@extends('backend.layout.app')
<!-- title go hear -->
@section('title' , 'gallery | order' )
<!-- content go hear -->
@section('content')
<div class="card  ">
<div class="card-header d-flex pb-2  bg-light">
  		<a href="{{ route('backend.gallery') }}" class="btn btn-r"><i class="fas fa-arrow-left"></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>id</th>
                    <th>position</th>
                    <th>name</th>
                    <th>image</th>
                    <th>status</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

    </div>
</div>
@endsection

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

 //  dataTable
$(document).ready(function () {
	  var table =   $("#table1").DataTable({
	      "responsive": true,
	      "lengthChange": false,
	      "processing": true,
          "serverSide": true,
	      "autoWidth": false,
 	      "dom": 'lBfrtip',
          "buttons": [ "colvis" ],
          "lengthMenu": [[-1], ['All']],
 	       ajax:{
                 url :"{{route('backend.gallery.result')}}",
                 type : "post",
                 headers : {
                              'X-CSRF-TOKEN': '{{ csrf_token() }}'
                           }
               },
          columns : [
               { data:"id",  visible: false,    },
              { data: 'position'      },
              { data:"name"  },
               { data:"image"   },
              { data: 'is_published'  },

            ],

          rowReorder: true,
          rowReorder: {
                      dataSrc: 'position'
            },
         order: [[1, 'asc']],
 	      "columnDefs": [{
              "targets": '_all',
              "defaultContent": ""
          }],
	    }) ;

      // position
       table.on('row-reorder', function (e, details) {
            if(details.length) {

               let rows = [];
                details.forEach(element => {
                    rows.push({
                        id: table.row(element.node).data().id,
                        position: parseInt(element.newPosition)
                    });
                });

                $.ajax({
                url :"{{route('backend.gallery.storeOrder')}}",
                     type : "post",
                     headers : {
                       'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                      rows: rows
                    },
                    success: function (response) {
                       toastr.success(  response.message);

                    }
                });
            }

        });

 });


</script>

@endpush