@extends('backend.layout.app')
<!-- title go hear -->
@section('title' , 'Gallery' )
<!-- content go hear -->
@section('content')
<div class="card ">
<div class="card-header d-flex pb-2  bg-light">
     <a href="{{ route('backend.gallery.createOrupdate') }}" 
    class="btn  btn-r  "><i class="fas fa-plus"></i>
    </a>
     <a href="{{ route('backend.gallery.order') }}" 
    class="btn  btn-r  ">  <i class="fas fa-sort-amount-down-alt"></i> </a>
    <a  id="multi_delete" class="btn btn-r  text-secondary"   ><i class='fas fa-trash-alt'></i> </a>
    <a   class="btn btn-r  text-secondary" onclick="reloadTable('table1')" >
        <i class="fas fa-sync-alt"></i>
    </a>
    </div>
    <div class="card-body">
        
        <table id="table1" class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th  class="text-white text-center">
                      <input type='checkbox' id='all_check'   > 
                    </th>
                    <th>id</th>
                    <th>position</th>
                    <th>image</th>
                    <th>name</th>
                    <th>alt</th>
                    <th>status</th>
                    <th>created_at</th>
                    <th> </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        
    </div>
</div>
@endsection

@push('footer-script')
<script type="text/javascript">

 //  dataTable
$(document).ready(function () {
	    $("#table1").DataTable({
	      "responsive": true, 
	      "lengthChange": false,
	      "processing": true,
          "serverSide": true, 
	      "autoWidth": false,
	      "dom": 'lBfrtip',
	      "buttons": ["copy", "csv", "excel", "colvis"],
	       ajax:{
                 url :"{{route('backend.gallery.result')}}",
                 type : "post",
                 headers : {
                              'X-CSRF-TOKEN': '{{ csrf_token() }}'
                           }
               },
          columns : [
              { data:"check",name:"check", orderable: false, searchable: false,sWidth:'6%'},
              { data:"id"  },
              { data:"position"  },
              { data:"image"  },
              { data:"name"  },
              { data:"alt"  },
              { data:"is_published"  },
              { data:"created_at",visible: false  },
              { data:"action", orderable: false, searchable: false,sWidth:'6%'},
          ],
         order: [[1, 'desc']],
 	      "columnDefs": [{
              "targets": '_all',
              "defaultContent": ""
          }],
	    }) ;

        //  multiple check box
      $( '#all_check' ).click(function() {
           $('.check_box').prop('checked', $(this).prop('checked'));

      });

       // multiple delete 
         $('#multi_delete').on('click', function(e) {
             var allVals = []; 
             $('.check_box:checked').each(function() {
                 allVals.push($(this).val());
             });
             data = [];
             data["id"] = allVals.toString() ;
             data["url"] = "{{ route('backend.gallery.destroy') }}";
             data["table"] = "table1";
             if(allVals.length === 0){
                 toastr.info( 'Oops!.. please select first.. ');

             }
             else{
              deleteMe( data );
                  $('#all_check').prop('checked', false);  // after delete uchek main
 
             }
          });

 });
 

</script>

@endpush