@extends('admin.layout.app')

@section('main_title', 'Category Listing')
@section('title', 'Category Listing')
@section('sub_title', 'Control Panel')
@push('styles')
<style>
.content-left {
  border-right: 6px solid green;
  height: auto;
}
</style>

@endpush
<!-- start content -->
@section('content')

<div class="card">
    <div class="card-body">
        <div class="row" >
            <div class="col-md-6">
                <div class="white-box content-left">
                    <h3 class="box-title">View Categories</h3>
                    <p class="text-danger">Note:Drag And Drop Category To Make It Parent Or Child Category.</p>
                    <div class="row">
                        <div class="col-md-11">
                                <div class="mb-3">
                                    <label for="validationCustom01" class="form-label">Search</label>
                                    <input type="text" class="form-control search" id="search" placeholder="Category Name" value="" required="">    
                                </div>
                        </div>
                    </div>
                    <div class="category_tree">
                        <!--<div class="nestable nestable-lists">-->
                        <div class="custom-dd dd" id="nestable">
                                                    </div>
                        <!--</div>-->
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="white-box">
                    <h3 class="box-title">Add Categories</h3>
                    <p class="text-danger">Note:Add New Category </p>
                    <form class="form" action="{{route('category.store')}}" method="post" >
                        {{ csrf_field() }}
                        <div class="row">
                            <div class="col-md-12">
                                <div class=" form-group mb-3">
                                    <label class="form-label">Category</label>
                                    <input type="text" class="form-control" id="category_name" name="category_name" placeHolder="Category Name">
                                </div>
                            </div>
                            <!--<div class="col-md-2">-->
                            <!--  <button type="button" onclick="add_parentcategory()"  class="btn btn-blue btn-flat show-parentcat"><i class="fa fa-plus"></i></button>-->
                            <!--  <button type="button" onclick="hide_parentcategory()" style="display:none" class="btn btn-blue btn-flat hide-parentcat"><i class="fa fa-minus"></i></button>-->
                            <!--</div>-->
                        </div>
             
                    <!--<br>-->
                        <div class="row" id="parentCategory" style="Display:none">
                @if(!empty($parent_categories))
                    <label class="col-sm-12">Parent Category</label>
                    <div class="col-md-10">
                      <div class="form-group">
                       <select name="parent_category" onchange="delete_sub_div_content()" id="parent_category" class="form-control">
                         <option value="">Select Parent Category</option>
                         @foreach($parent_categories as $p)
                            <option value="{{$p->id}}">{{$p->name}}</option>
                         @endforeach
                       </select>
                     </div>
                   </div>
                    <div class="col-md-2 col-sm-4 col-lg-1">
                       <button type="button" id="parent_category_button" onclick="get_subcategory()" class="btn btn-blue btn-flat"><i class="fa fa-plus"></i></button>
                    </div>
                @else
                  <p class="text-danger">No parent Category Available</p>
                @endif
                
            </div>
                        <div class=" col-md-12  text-center">
                            <br/>
                            <button type="submit" class="btn btn-blue btn-flat ajax-submit">Save</button>
                            <button type="reset" class="btn btn-default btn-flat">Reset</a>
                        </div>
            
                  
                </form>
                </div>
            </div>
            
        </div>
       
        <!--<div class="search_result">-->
        <!--    <div class="row">-->
        <!--        <div class="col-md-12">-->
        <!--            <ol class="breadcrumb">-->
        <!--                <li class="breadcrumb-item"><a href="javascript: void(0);">Home</a></li>-->
        <!--                <li class="breadcrumb-item"><a href="javascript: void(0);">Library</a></li>-->
        <!--                <li class="breadcrumb-item active">Data</li>-->
        <!--            </ol>-->
        <!--        </div>-->
        <!--    </div>-->
        <!--</div>-->
    </div>
</div>


                    <!-- Modal Categories -->
                                
                                
 <div class="modal fade" id="category-modal" tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myCenterModalLabel">Categories</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="update_category" class="form-material form-horizontal" action="{{route('category.update')}}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="box-body">
                        <div class="form-group" id="selectedCategory" style="display: non">
                            <div class="col-md-12 col-sm-12 col-lg-12">
                                <input type="text" name="selected_category" id="selected_category" class="form-control" placeholder="Category Name" >
                            </div>
                            <input type="hidden" name="category_id" value="" id="category_id">
                            
                        </div>
                      
                
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                    <button type="submit"  class="btn btn-success waves-effect waves-light">Save</button>
                    </div>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End Modal Categories -->
@endsection


@push('scripts')

<script src="{{asset('public/assets/js/vendor.min.js') }}"></script>
<script src="{{ asset('public/assets/libs/nestable2/jquery.nestable.min.js') }}"></script>
<script src="{{ asset('public/assets/js/pages/nestable.init.js') }} "></script>
<script src="{{ asset('public/assets/js/app.min.js') }} "></script>
    <script>
        var $defaultList;
        var $default_json_list;
        $(document).ready(function(){
            $('#nestable').nestable();
             $defaultList = $('#nestable').nestable('serialize');
             $default_json_list = JSON.stringify($defaultList);
        });
    
        $('#nestable').on('change', function() {
            /* on change event */
            $list=$('#nestable').nestable('serialize');
            
        	$json_list=JSON.stringify($list);
        	
        	if($default_json_list != $json_list){
        	    $.ajax({
                        url: "{{ route('category.updateorder') }}",
                        type: "post",
                        data: {"Category_list": $json_list,"_token": "{{ csrf_token() }}", },
                        dataType: 'json',
                        success: function (response)
                        {
                            if ($.trim(response.success) == "true")
                            {
                               $defaultList = $('#nestable').nestable('serialize');
                               $default_json_list = JSON.stringify($defaultList);
                                //location.reload();
                               
                            } else {
                                alert("Update Failed");
                            }
                        }
                    });
        	}
        });
    </script>
    <script>
        $(document).on('click','.delete',function(){
                var _token = $('input[name="_token"]').val();
                $id=$(this).data('id');
                $action=$(this).data('src');
                Swal.fire({
                title: "Are you sure?",
                text: "Category will be Deleted! All Sub Category will be deleted.",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn-danger",
                confirmButtonText: "Yes, Delete Resource!",
                closeOnConfirm: false
                }).then((result)=>{
                    if(result['isConfirmed']){
                        $.ajax({
                        url: $action,
                        type: "post",
                        data:{
                        "_token": "{{ csrf_token() }}",
                        },
                        success: function (response){
                            if(response.success==true){
                                Swal.fire("Deleted!", response.msg, "success");
                            }else{
                                Swal.fire("Error!", response.msg, "error");
                            }
                        }
                    });
                    }
                })
            });
          
        $(document).on('click','.edit_cat_name',function(){
        var id = $(this).data('id');
        var name=$(this).data('name');
        $("#selected_category").val(name);
 	    $("#category_id").val(id);
  	    $('#category-modal').modal('show');
    })  
    
        $(document).ready(function(){
            $('#update_category').submit(function(e){

            e.preventDefault();

            var me = $(this);
            var fd = new FormData($(this)[0]);

            // perform ajax

             $.ajax({

              url: me.attr('action'),

              type: me.attr('method'),

              data: fd,

              dataType: 'json',
              processData: false,
              contentType: false,

            success: function(response){

                if(response.success == true)
                {
                    swal.fire('Category Updated successfully','success');
                    $("#category-modal").modal('hide');
                    $("#form_error").hide();
                    location.reload();
                }
                else{

                $.each(response.messages, function(key, value) {

                      var element = $('#' + key);
                        element.closest('div.form-group')

                        .removeClass('.has-error')

                        .addClass(value.length > 0 ? 'has-error':'has-success' )

                        .find('.text-danger')

                        .remove();
                         element.after(value);

                });
            }
        }
    });
            });
         });
         
        $(document).ready(function(){
        $('form').submit(function(e){

        e.preventDefault();

        var me = $(this);
        var fd=new FormData($(this)[0]);

        // perform ajax
        $.ajaxSetup({
           headers: {
               'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        });


        $.ajax({

           url: me.attr('action'),

           type: 'post',

           data: fd,

           dataType: 'json',
           contentType: false,
           processData: false,

           success: function(response){

               if(response.success == 'true')
               {
                 swal.fire("Category added successfully");
               //alert('category added successfully');
               location.reload();

                $("#form_error").hide();
            }

            else{

               $.each(response.responseJSON.errors, function(key, value) {

                     var element = $('#' + key);
                       element.closest('div.form-group')

                       .removeClass('.has-error')

                       .addClass(value.length > 0 ? 'has-error':'has-success' )

                       .find('.text-danger')

                       .remove();
                        element.after(value);

               });
           }
       },
       error:function(response){
        // alert(response.responseJSON.errors.category_name);
         //errors=console.log(response.responseJSON);
         $.each(response.responseJSON.errors, function(key, value) {

               var element = $('#' + key);
                 element.closest('div.form-group')

                 .removeClass('.has-error')

                 .addClass(value.length > 0 ? 'has-error':'has-success' )

                 .find('.text-danger')

                 .remove();
                  element.after('<p class="text text-danger">'+value+'</p>');

         });
       }
   });
   });
});
         
        function searchTree(searchTerm) {
            $('.dd-list li').removeClass('search-result');
            $('.dd-list  li').hide();
            // var searchResults = $('.dd-list li:contains("' + searchTerm + '")');
            searchTerm = searchTerm.toLowerCase();
            var searchResults = $('.dd-list li').filter(function() {
                $(this).removeClass('dd-collapsed');
                return $(this).text().toLowerCase().indexOf(searchTerm) !== -1;
            });
            var closestOl = searchResults.closest('ol');
            searchResults.addClass('search-result');
            searchResults.find('.dd-list li.search-result').show();
            searchResults.show();
            closestOl.show();
            //searchResults.parentsUntil('.dd-list .dd-item').show();
        }
        
        $(document).on('keyup','.search',function(){
            var search = $(this).val();
            
            if(search.length > 3){
                searchTree(search);
            }else{
                $('.dd-list li').filter(function() {
                $(this).addClass('dd-collapsed');
            });
                $('.dd-list li').show();
            }
        })
    </script>

@endpush