@extends('Admin.layout')

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

@section('content')
    <div>
        <h4>New 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 w-100">
                <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>ACTION</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="cancelModal" tabindex="-1" aria-labelledby="cancelModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="rejectionForm">
                    @csrf
                    <input type="hidden" id="reject_order_db_id" name="id">
                    <div class="modal-header">
                        <h5 class="modal-title" id="cancelModalLabel">Reject Order <span id="display_order_id"
                                class="text-primary"></span></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="cancellation_reason" class="form-label">Reason for Rejection <span
                                    class="text-danger">*</span></label>
                            <textarea class="form-control" id="cancellation_reason" name="cancellation_reason" rows="3"
                                placeholder="Enter reason for canceling this order..."></textarea>
                            <div class="invalid-feedback" id="reasonError">Please enter a reason.</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-danger" id="submitRejectBtn">
                            <span class="spinner-border spinner-border-sm d-none" id="btnSpinner" role="status"
                                aria-hidden="true"></span>
                            Reject Order
                        </button>
                    </div>
                </form>
            </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://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 = $('#table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('get_neworders_data') }}",
                pageLength: 10,
                searching: true,
                lengthChange: false,
                ordering: true,
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'order_id',
                        name: 'order_id'
                    },
                    {
                        data: 'restaurant_name',
                        name: 'restaurant.name'
                    },
                    {
                        data: 'user_name',
                        name: 'customer.first_name'
                    },
                    {
                        data: 'phone_no',
                        name: 'phone'
                    },
                    {
                        data: 'products_count',
                        name: 'product_count',
                        searchable: false
                    },
                    {
                        data: 'view',
                        name: 'view',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                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: 'New_Orders_Report',
                    filename: 'New_Orders_Report_' + new Date().toISOString().slice(0, 10),
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6] 
                    }
                }]
            });

            $('#searchBox').on('keyup search', 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();
            });

            $(document).on('click', '.cancel-order-btn', function() {
                const id = $(this).data('id');
                const orderId = $(this).data('order-id');

                $('#reject_order_db_id').val(id);
                $('#display_order_id').text('#' + orderId);
                $('#cancellation_reason').val('').removeClass('is-invalid');
                $('#cancelModal').modal('show');
            });

            $('#rejectionForm').on('submit', function(e) {
                e.preventDefault();

                const reasonInput = $('#cancellation_reason');
                const reasonVal = reasonInput.val().trim();

                if (reasonVal === '') {
                    reasonInput.addClass('is-invalid');
                    return;
                } else {
                    reasonInput.removeClass('is-invalid');
                }

                $('#submitRejectBtn').prop('disabled', true);
                $('#btnSpinner').removeClass('d-none');

                $.ajax({
                    url: "{{ route('cancel_order') }}",
                    type: "POST",
                    data: $(this).serialize(),
                    success: function(response) {
                        $('#cancelModal').modal('hide');
                        table.ajax.reload(null,
                        false);

                        if (typeof showToast === 'function') {
                            showToast(response.message, 'success');
                        }
                    },
                    error: function(xhr) {
                        let errMessage = 'Something went wrong. Please try again.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errMessage = xhr.responseJSON.message;
                        }
                        if (typeof showToast === 'function') {
                            showToast(errMessage, 'error');
                        }
                    },
                    complete: function() {
                        $('#submitRejectBtn').prop('disabled', false);
                        $('#btnSpinner').addClass('d-none');
                    }
                });
            });
        });
    </script>
@endsection