@extends('Admin.layout')

<style>
    .dt-search {
        display: none !important;
    }
</style>

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

    <div class="card p-4">

        <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="table" class="table">
                <thead class="bg-primary-subtle">
                    <tr>
                        <th>SNO</th>
                        <th>DATE</th>
                        <th>ORDER ID</th>
                        <th>RESTAURANT</th>
                        <th>USER</th>
                        <th>PHONE</th>
                        <th>PRODUCTS</th>
                        <th>VIEW</th>
                        <th>REMARK</th>
                        <th>STATUS</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="remarkModal" tabindex="-1" aria-labelledby="remarkModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header mt-0 text-white">
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                {{-- <div class="modal-body">
                <div class="mb-3 mt-0">
                    <label class="fw-semibold text-secondary">Cancelled By:</label>
                    <p id="modalCancelledBy" class="text-dark fw-bold mb-0">-</p>
                </div> --}}
                <div class="p-4">
                    {{-- <label class="fw-semibold text-secondary">Reason:</label> --}}
                    <p id="modalRemarkContent" class="text-dark mb-0">-</p>
                </div>
            </div>
        </div>
    </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.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.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>

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

            const table = $('#table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('get_cancelled_orders_data') }}",
                pageLength: 10,
                searching: true,
                lengthChange: false,
                ordering: true,

                columnDefs: [{
                    targets: '_all',
                    className: 'text-nowrap text-center'
                }],

                createdRow: function(row, data, dataIndex) {
                    if (dataIndex % 2 != 0) {
                        $(row).addClass('bg-primary-subtle');
                    }
                },

                buttons: [{
                    extend: 'excelHtml5',
                    title: 'Cancelled_Orders_Report',
                    filename: 'Cancelled_Orders_Report_' + new Date().toISOString().slice(0, 10),
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6, 9]
                    }
                }],

                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'date',
                        name: 'created_at'
                    },
                    {
                        data: 'order_id',
                        name: 'order_id'
                    },
                    {
                        data: 'restaurant',
                        name: 'restaurant.name'
                    },
                    {
                        data: 'user',
                        name: 'customer.first_name'
                    },
                    {
                        data: 'phno',
                        name: 'phone'
                    },
                    {
                        data: 'products',
                        name: 'product_count',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'view',
                        name: 'view',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'remark',
                        name: 'remark',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            $('#table').on('click', '.view-remark-btn', function() {
                const reason = $(this).attr('data-reason');
                const cancelledBy = $(this).attr('data-by');

                $('#modalCancelledBy').text(cancelledBy);
                $('#modalRemarkContent').text(reason);

                const remarkModal = new bootstrap.Modal(document.getElementById('remarkModal'));
                remarkModal.show();
            });

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

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

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

        });
    </script>
@endsection