@include('Admin.layouts.app')
@include('Admin.layouts.sidebar')
@section('title', 'Products')
<!-- Begin Page Content -->
<div class="container-fluid">

    <!-- Page Heading -->
    <h1 class="page-title h3 mb-2 text-gray-800">
        Products
        <a href="{{route('admin.product.form')}}" class="btn-gazna"
           style="text-decoration:none;height:50px;font-size:14px;">Add Product</a>
    </h1>
    <!-- DataTales Example -->
    <div class="innerpagedetails card shadow mb-4">
        <div class="card-header py-3">
            <h6>Products</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="laravel_datatable" width="100%" cellspacing="0">
                    <thead>
                    <tr>
                        <th>Sort</th>
                        <th style="width: 9%;">S.No</th>
                        <th>Title</th>
                        <th>Image</th>
                        <th>Status</th>
                        <th width="105px">Action</th>
                    </tr>
                    </thead>
                    <tbody id="sortable">
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->

<!-- jQuery & jQuery UI -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<!-- DataTables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


<script>
    $(document).ready(function () {
        $(document).ready(function () {
            let table = $('#laravel_datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.products') }}",
                rowReorder: true,
                columns: [
                    {data: 'sort', name: 'sort', orderable: false, searchable: false},
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'title', name: 'title'},
                    {data: 'avatar', name: 'avatar'},
                    {data: 'status', name: 'status'},
                    {data: 'action', name: 'action', orderable: false, searchable: false}
                ],
                createdRow: function (row, data, dataIndex) {
                    $(row).attr('data-id', data.id);
                }
            });

            $("#sortable").sortable({
                update: function (event, ui) {
                    let order = [];
                    $("#sortable tr").each(function (index) {
                        order.push($(this).data("id"));
                    });

                    $.ajax({
                        url: "{{ route('admin.product.sort') }}",
                        type: "POST",
                        data: {
                            order: order,
                            _token: "{{ csrf_token() }}"
                        },
                        success: function (response) {
                            console.log("Sorting Updated", response);
                        }
                    });
                }
            }).disableSelection();
        });
    });
</script>
@if(Session::has('success'))
    <script>
        Swal.fire({
            title: "Success!",
            text: "{{ Session::get('success') }}",
            icon: "success",
            timer: 2000,
            showConfirmButton: false,
        });
    </script>
@elseif(Session::has('error'))
    <script>

    </script>
@endif
@include('Admin.layouts.footer')
@include('Admin.layouts.modal')