@extends('Admin.layout')

@section('content')

        <!-- Page Header -->
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0">Cancelled Orders</h4>
        </div>

        <div class="card p-3">
            <div class="table-responsive">
                <table id="Orders" class="table table-bordered align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>SNO</th>
                            <th>DATE</th>
                            <th>ORDER&nbsp;ID</th>
                            <th>Customer&nbsp;Invoice</th>
                            <th>STATE</th>
                            <th>USER</th>
                            <th>PHONE&nbsp;NUMBER</th>
                            <th>PRODUCT</th>
                            <th>VIEW</th>
                            <th>REMARK</th>
                            <th>STATUS</th>
                        </tr>
                    </thead>

                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>




    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

    <script>

$(document).ready(function () {
    $('#Orders').DataTable({
        processing: true,
        serverSide: true,

        pageLength: 10,
        lengthMenu: [5, 10, 25, 50],

        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search",
            processing: "Loading..."
        },

        ajax: "{{ route('cancelled_orders_data') }}",

        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'created_at', name: 'created_at' },
            { data: 'order_id', name: 'order_id' },
            { data: 'order_list', name: 'order_list', orderable: false, searchable: false },
            { data: 'state', name: 'state' },
            { data: 'user', name: 'user' },
            { data: 'phone', name: 'phone' },
            { data: 'product_count', name: 'product_count' },
            { data: 'view', name: 'view', orderable: false, searchable: false },
            { data: 'remark', name: 'remark' },
            { data: 'status', name: 'status', orderable: false, searchable: false }
        ]
    });
});
</script>
    </script>
@endsection