@extends('Admin.layout')

@section('content')
    <div>
        <h4>Completed Orders</h4>
    </div>

    <div class="card p-4 border-0 shadow-sm">

        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center mb-4">

            <div class="mb-3 mb-lg-0">
                <select id="pageLength" class="form-select w-auto">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="all">All</option>
                </select>
            </div>

            <div class="col-lg-6 col-12 mb-3">
                <div class="d-flex flex-column flex-lg-row gap-3">
                    <div class="search-box flex-grow-1">
                        <input type="search" id="searchBox" class="form-control" placeholder="Search">
                    </div>

                    <button type="button" class="btn btn-primary border flex-shrink-0" id="exportBtn">
                        <i class="ti tabler-download me-2"></i> Export 
                    </button>
                </div>
            </div>

        </div>

        <div class="table-responsive p-2">
            <table id="completedOrdersTable" class="table align-middle w-100">
                <thead class="bg-primary-subtle">
                    <tr>
                        <th class="text-center">SNO</th>
                        <th class="text-center">DATE</th>
                        <th class="text-center">ORDER ID</th>
                        <th class="text-center">RESTAURANT</th>
                        <th class="text-center">USER</th>
                        <th class="text-center">PHONE</th>
                        <th class="text-center">PRODUCTS</th>
                        <th class="text-center">VIEW</th>
                        <th class="text-center">STATUS</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>

    <script>
        $(document).ready(function() {

            const table = $('#completedOrdersTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('get_completed_orders_data') }}",
                dom: 't',
                pageLength: 10,
                ordering: true,
                columnDefs: [{
                    targets: '_all',
                    className: 'text-nowrap text-center'
                }],
                buttons: [{
                    extend: 'excelHtml5',
                    title: 'Completed_Orders_Report',
                    filename: 'Completed_Orders_Report',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6, 8]
                    }
                }],
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'date',
                        name: 'created_at'
                    },
                    {
                        data: 'order_id',
                        name: 'order_number'
                    },
                    {
                        data: 'restaurant',
                        name: 'restaurant.name'
                    },
                    {
                        data: 'user',
                        name: 'user.name'
                    },
                    {
                        data: 'phno',
                        name: 'user.phone'
                    },
                    {
                        data: 'products',
                        name: 'products',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'view',
                        name: 'view',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    }
                ],
                createdRow: function(row, data, dataIndex) {
                    if (dataIndex % 2 !== 0) {
                        $(row).addClass('bg-primary-subtle');
                    }
                }
            });

            $('#searchBox').on('keyup', function() {
                table.search(this.value).draw();
            });

            $('#pageLength').on('change', function() {
                table.page.len($(this).val()).draw();
            });

            $('#exportBtn').on('click', function() {
                table.button('.buttons-excel').trigger();
            });

        });
    </script>
@endsection