@extends('admin.layouts.app')
@section('title')
    Category
@endsection


@section('content')
    <div class="content-page">
        <div class="content">
            <div class="container-fluid">
                <div class="row page-title">
                    <div class="col-md-12">
                        <div class="col-md-12 d-flex justify-content-between">
                            <div class="">
                                <h4 class="mb-1 mt-0">Category</h4>
                            </div>
                            <nav aria-label="breadcrumb" class="float-right">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a>admin</a></li>
                                    <li class="breadcrumb-item"><a>Category List</a></li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        @if ($message = Session::get('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <strong>{{ $message }}</strong>
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif
                        <div class="card">
                            <div class="card-body">
                                <div class="col">
                                    <a class="btn btn-info " href="{{ route('addCategory') }}"><i
                                            data-feather="plus"></i>Add Category</a>
                                    <a class="btn btn-info" href="{{ route('changeOrder') }}"><i
                                            data-feather="battery-charging"></i>Change Order</a>
                                            
                                </div>
                                <table id="category"
                                    class="table table-striped dt-responsive nowrap dataTable no-footer dtr-inline collapsed">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Order Id</th>
                                            <th>Category Name</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="sortable">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            @endsection
            @section('js')
                <script nonce="{{ $cspNonce }}" src="{{ asset(JS) }}/jquery.js"></script>
                <script nonce="{{ $cspNonce }}" src="{{ asset(LIBS) }}/ui-js/jquery-ui.js"></script>
                <script nonce="{{ $cspNonce }}" src=" {{ asset(JS) }}/bootstrap.bundle.min.js"></script>
                <script nonce="{{ $cspNonce }}" src="{{ asset(LIBS) }}/datatables/datatables.js"></script>
                <script nonce="{{ $cspNonce }}" src="{{ asset(LIBS) }}/datatables/dataTables.bootstrap5.min.js"></script>
                <script nonce="{{ $cspNonce }}" src="{{ asset(LIBS) }}/datatables/dataTables.responsive.min.js"></script>
                <script nonce="{{ $cspNonce }}" src="{{ asset(LIBS) }}/datatables/responsive.bootstrap5.min.js"></script>
                <script nonce="{{ $cspNonce }}" src="{{ asset(JS) }}/dropzone.min.js"></script>
                <script nonce="{{ $cspNonce }}">
                    var table = $("#category").DataTable({
                        processing: true,
                        serverSide: true,

                        "language": {
                            "emptyTable": "No data available",
                            paginate: {
                                previous: "<",
                                next: ">"
                            }
                        },
                        drawCallback: function() {
                            $(".dataTables_paginate > .pagination").addClass("pagination-rounded");
                        },
                        ajax: "{{ route('admin.fetch.category') }}",
                        order: [
                            [1, 'asc']
                        ],
                        columns: [{
                                data: 'id',
                                name: 'id',
                                searchable: false
                            },
                            {
                                data: 'order_id',
                                name: 'order_id',
                                searchable: false
                            },
                            {
                                data: 'category_name',
                                name: 'category_name',

                            },
                            {
                                data: 'action',
                                name: 'action',
                                orderable: false,
                                searchable: false
                            },

                        ]
                    });
                </script>

                <script nonce="{{ $cspNonce }}">
                    $("#sortable").sortable({
                        items: "tr",
                        cursor: 'move',
                        opacity: 0.6,
                        update: function() {
                            sendOrderToServer();
                        }
                    });

                    function sendOrderToServer() {
                        var order = [];
                        $('.row1').each(function(index, element) {
                            order.push({
                                id: $(this).attr('data-id'),
                                position: index + 1
                            });
                        });

                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            url: "{{ route('changeOrder') }}",
                            data: {
                                order: order,
                                _token: "{{ csrf_token() }}",
                            },
                            success: function(response) {
                                table.ajax.reload();
                            }
                        });
                    }
                </script>
            @endsection