@extends('layouts.backend')
@section('extraCss')
<style type="text/css">
span.multiselect-native-select {
    position: relative;
    display: block;
}
.btn-group, .btn-group-vertical {
    display: block;
}
.custom-select, .dropdown-item {
    width: 100% !important;
}
</style>
@endsection
@section('mainContentArea')
    <div class="card card-default">
        <div class="card-header">
            <h4>Assest Category Manager</h4>
             <button class="btn btn-success float-right btn-sm" type="button"  data-toggle="modal" data-target="#categoryModel" id="add-category" style="float:right; margin:10px;">
              <i class="fa fas fa-plus"></i> Add category</button>
        </div>
        <div class="card-body">
          
         
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <!-- <th>Image</th> -->
                        <th>Name</th> 
                        <th>Parent</th>
                        <th>Description</th>
                        <th>HSN</th>
                        <th>GST</th>
                        <th colspan="2">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($categoryList as $key => $group)
                        <tr>
                            <td>{{$key + $categoryList->firstItem() }}</td> 
                            <!-- <td><img src="{{ asset('uploads/assest/'.$group->image) }}" alt="" title="" width = '100px' height='150px'></td>
                            --> <td>{{ empty($group->name) ? 'N/A' : $group->name }}</td>
                            <td>{{ empty($group->parent->name) ? 'N/A' : $group->parent->name }}</td>
                            <td>{{ empty($group->description) ? 'N/A' : $group->description }}</td>
                            <td>{{ empty($group->hsncode) ? 'N/A' : $group->hsncode }}</td>
                            <td>{{ empty($group->gst) ? 'N/A' : $group->gst }}</td>
                            <td><a data-id="{{ $group->id }}" id="edit-post" class="btn btn-xs btn-info btn-sm"><i class="fa fas fa-pencil"></i> </a>
                            </td>                          
                           
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @php if($categoryList->count() > 0) { @endphp {!! $categoryList->appends(request()->input())->links() !!} @php } @endphp
    </div>

<!-- Modal -->
<div class="modal fade" id="categoryModel" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header" >
              <h5> Add Category</h5>
              <button type="button" class="close" data-dismiss="modal">&times;</button> 
               
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                <p class="statusMsg"></p>
                <form role="form" method="post" id="upload_form" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div class="form-group ">
                        <label for="cate_type"> Select parent category </label> 
                         <select class="form-control" name="parent_id" id="parent_id" required>
                            <option value="0">Select Option</option>
                            @foreach($parentList as $glist) 
                            <option value="{{$glist->id}}">{{$glist->name}}</option> 
                            @endforeach 
                        </select>
                    </div>
                   
                    <div class="form-group">
                        <label for="inputName">Name</label>
                        <input id="catid" type="hidden">
                        <input type="text" class="form-control" id="inputName" placeholder="Enter your name" required />
                    </div> 
                    
                    <div class="form-group">
                        <label for="inputMessage">Description</label>                        
                        <textarea class="form-control" id="inputDes" placeholder="Enter your description" required></textarea>
                    </div>

                    <div class="form-group">
                        <label for="inputName">GST (%)</label>                       
                        <input type="number" min='0' class="form-control" id="inputGst" placeholder="Enter GST In percentage" required />
                    </div> 

                    <div class="form-group">
                        <label for="inputName">HSN Code</label>                       
                        <input type="text" class="form-control" id="inputHsn" placeholder="Enter your hsn code" required />
                    </div>                     

                    <!-- <div class="form-group">
                         <label for="code"> Banner Image </label>
                         <input type="file" name="banner" id="banner" class="form-control" onchange="previewBanner(this)" accept="image/*">                          
                    </div>

                    <div class="form-group" id="preview_banner" style='display:none;'>
                        <img id="preview_banner_img" src="" alt="Placeholder" width = '100px' height='150px'>
                    </div> -->

                    <div class="form-group">
                        <label for="inputMessage">Status</label>
                        <select name="status" id="inputstatus" class="form-control" required>
                                <option value="">select</option>                               
                                <option value="1" {{ ( (!empty(request("status")) && (request("status") === 1)) ? "selected" : "") }}>Active</option>
                                <option value="0" {{ ( (!empty(request("status")) && (request("status") === 0)) ? "selected" : "") }}>Deactive</option>
                              
                        </select>                       
                    </div>
                </form>
            </div>
            
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary " id="btn-save" onclick="submitCategoryForm()">SUBMIT</button>
            </div>
        </div>
    </div>
</div>
   
@endsection

@section('extraJs')
<script type="text/javascript">
$('body').on('click', '#add-staff', function () {       
        $('#inputName').val('');       
        $('#inputDes').val('');
        $('#inputstatus').val('');
        $('#parent_id').val(''); 
        $('#inputGst').val('');
        $('#inputHsn').val('');  
        $('#catid').val('')
        $('#categoryModel .modal-dialog .modal-content .modal-header h5').html("Add Category");
        $('#categoryModel .modal-dialog .modal-content .modal-footer #btn-save').html("Submit");
});

$(document).ready(function(){
     $('#upload_form').submit(function(e) {
            e.preventDefault();
            alert('ko');
            var formData = new FormData(this);
     });
});            

function submitCategoryForm(){
    var parent_id = $('#parent_id').val();  
    var name = $('#inputName').val();    
    var desc = $('#inputDes').val();
    var status = $('#inputstatus').val();  
    var catid =  $('#catid').val();
    var gst =  $('#inputGst').val();
    var hsn =  $('#inputHsn').val();
    if(parent_id.trim() == '' ){
        alert('Please select parent category.');
        $('#parent_id').focus();
        return false;
    }else if(name.trim() == '' ){
        alert('Please enter category name.');
        $('#inputName').focus();
        return false;
    }else if(desc.trim() == '' ){
        alert('Please enter category description.');
        $('#inputDes').focus();
        return false;
    }else if(gst.trim() == '' ){
        alert('Please enter GST in percentage.');
        $('#inputGst').focus();
        return false;
    }else if(hsn.trim() == '' ){
        alert('Please enter hsn code.');
        $('#inputHsn').focus();
        return false;
    }else if(status.trim() == '' ){
        alert('Please select category status.');
        $('#inputstatus').focus();
        return false;
    }else{
        var _token   = $('meta[name="csrf-token"]').attr('content'); 
        $.ajax({
            type: "get",
            url: "{{ route('categorysave') }}",
            data: {
            name: name,            
            desc:desc,
            status:status,   
            catid: catid,
            hsn:hsn,
            gst:gst,
            parent_id: parent_id,         
            _token: _token
            },
            dataType: "json",
            beforeSend: function () {
                $('.submitBtn').attr("disabled","disabled");
               
            },           
            success: function(response) { 
                var reason = JSON.stringify(response);  
                var parsed = JSON.parse(reason);            
                console.log(parsed);
                if (parsed.status == false) {
                toastr.error(parsed.info);
                $('.submitBtn').removeAttr("disabled");
                } else {
                toastr.success(parsed.info);
                
                window.location.reload('true');               
                
                }
            }
        });
    }
}

$('body').on('click', '#edit-post', function () { 
      var post_id = $(this).data('id');
      var _token   = $('meta[name="csrf-token"]').attr('content'); 
        $.ajax({
            type: "get",
            url: "{{ route('categoryedit') }}",
            data: {
            id:  post_id,        
            _token: _token
            },
            dataType: "json",                       
            success: function(data) { 
                  $('#categoryModel .modal-dialog .modal-content .modal-header h5').html("Edit Category");
                  $('#categoryModel .modal-dialog .modal-content .modal-footer #btn-save').html("update");
                  $('#categoryModel').modal('show');
                  
                  $('#inputName').val(data.name);
                  $('#catid').val(data.id);
                 
                  $('#inputDes').val(data.description);
                  $('#inputGst').val(data.gst);
                  $('#inputHsn').val(data.hsncode);    
                    
                  $("#inputstatus option[value=" + data.is_active + "]").attr('selected', true);
                  $("#parent_id option[value=" + data.parent_id + "]").attr('selected', true);                
            }
        });
      
});



function previewBanner(input){
       $("#preview_banner").css("display", "block");
        var file = $("input[type=file]").get(0).files[0];
 
        if(file){
            var reader = new FileReader();
 
            reader.onload = function(){
                $("#preview_banner_img").attr("src", reader.result);
            }
 
            reader.readAsDataURL(file);
        }
    }
</script>
@endsection