@extends('Admin.layout')
@section('content')
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">Completed 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 class="text-nowrap">ORDER ID</th>
                         <th class="text-nowrap">Customer Invoice</th>
                         <th class="text-nowrap">STATE</th>
                         <th class="text-nowrap">USER</th>
                         <th class="text-nowrap">PHONE NUMBER</th>
                         <th class="text-nowrap">PRODUCT</th>
                        <th class="text-nowrap">TOTAL AMOUNT</th>
                         <th class="text-nowrap">VIEW</th>
                        <th>ACTION</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,
        ajax: "{{ route('completed_orders_data') }}",
        pageLength: 10,
        lengthMenu: [5, 10, 25, 50],
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search "
        },
        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'created_at', name: 'created_at' },
            { data: 'order_id', name: 'order_id' },
            { data: 'order_list', orderable: false, searchable: false },
            { data: 'state', name: 'address.state' },
            { data: 'user', orderable: false },
            { data: 'phone', orderable: false },
            { data: 'product_count', orderable: false },
            { data: 'total_amount', orderable: false },
            { data: 'view', orderable: false, searchable: false },
            { data: 'action', orderable: false, searchable: false },
        ]
    });
});
</script>
@endsection