@extends('admin.layouts.base')

@section('content')
<div id="kt_app_content_container" class="app-container">
    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <h3 class="fw-bold">Booking Requests Management</h3>
            </div>
            <div class="card-toolbar">
                <div class="d-flex align-items-center position-relative me-5">
                    <i class="ki-duotone ki-magnifier fs-3 position-absolute ms-5">
                        <span class="path1"></span><span class="path2"></span>
                    </i>
                    <input type="text" id="booking_search"
                           class="form-control form-control-solid w-250px ps-13"
                           placeholder="Search booking requests..." />
                </div>
            </div>
        </div>

        <div class="card-body pt-0">
            <table class="table align-middle table-row-dashed fs-6 gy-5"
                   id="kt_datatable_booking_requests">
                <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                        <th class="min-w-50px">SR NO</th>
                        <th class="min-w-180px">User</th>
                        <th class="min-w-100px">Quote ID</th>
                        <th class="min-w-200px">Route</th>
                        <th class="min-w-150px">Carrier</th>
                        <th class="min-w-120px">Amount</th>
                        <th class="min-w-120px">Requested</th>
                        <th class="min-w-100px text-center">Status</th>
                        <th class="min-w-150px text-center">Actions</th>
                    </tr>
                </thead>
                <tbody class="text-gray-600 fw-semibold"></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Reject Note Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="rejectForm">
                @csrf
                <input type="hidden" name="status" value="rejected">
                <div class="modal-header">
                    <h5 class="modal-title">Reject Booking Request</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Admin Note <small class="text-muted">(optional)</small></label>
                        <textarea name="admin_note" class="form-control" rows="3"
                                  placeholder="Enter reason for rejection..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Reject Request</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let table;
const updateUrl = '{{ route('admin.booking-requests.update-status', ':id') }}';
const rejectModal = new bootstrap.Modal('#rejectModal');

$(document).ready(function () {
    // Initialize DataTable
    table = $('#kt_datatable_booking_requests').DataTable({
        dom: "<'row my-5'<'col-12 d-flex justify-content-between'<'d-flex align-items-center position-relative my-1'f><'datatable-buttons'B>>>" +
             "<'table-responsive'tr>" +
             "<'row d-flex align-items-center justify-content-between'<'col d-flex align-items-center gap-3'l i><'col-auto'p>>",
        pageLength: 25,
        lengthMenu: [10, 25, 50, 100],
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("admin.booking-requests.data") }}',
            type: 'GET',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        },
        columns: [
            { data: 'sr_no', className: 'text-center' },
            { data: 'user', orderable: false },
            { data: 'quote_id', orderable: false, className: 'text-center' },
            { data: 'route', orderable: false, className: 'text-center' },
            { data: 'carrier', orderable: false },
            { data: 'amount', orderable: false, className: 'text-end' },
            { data: 'requested', orderable: false, className: 'text-center' },
            { data: 'status', orderable: false, className: 'text-center' },
            { data: 'actions', orderable: false, className: 'text-center' }
        ],
        language: { 
            processing: '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>',
            emptyTable: 'No booking requests found.',
            zeroRecords: 'No matching booking requests found.'
        }
    });

    // Search functionality
    $('#booking_search').on('keyup', function () {
        table.search(this.value).draw();
    });

    // Status change handler for dropdown
    $(document).on('click', '.change-status', function (e) {
        e.preventDefault();
        const id = $(this).data('id');
        const status = $(this).data('status');
        const $btn = $(this).closest('.dropdown').find('.dropdown-toggle');

        let title, text, confirmText;

        switch (status) {
            case 'confirmed':
                title = 'Confirm & Tender Shipment?';
                text = 'This will confirm the booking and tender the shipment to the carrier via TQL API. This action cannot be undone.';
                confirmText = 'Yes, confirm & tender!';
                break;
            case 'rejected':
                // Show reject modal for rejection
                $('#rejectForm').data('url', updateUrl.replace(':id', id));
                $('#rejectForm')[0].reset();
                rejectModal.show();
                return;
            case 'approved':
                title = 'Approve Booking Request?';
                text = 'This will approve the booking request.';
                confirmText = 'Yes, approve!';
                break;
            case 'pending':
                title = 'Mark as Pending?';
                text = 'This will change the status back to pending.';
                confirmText = 'Yes, mark as pending!';
                break;
            default:
                title = 'Update Status?';
                text = `This will change the status to ${status}.`;
                confirmText = 'Yes, update!';
        }

        // Direct status change for non-rejection statuses
        Swal.fire({
            title: title,
            text: text,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: confirmText,
            cancelButtonText: 'Cancel',
            allowOutsideClick: false
        }).then((result) => {
            if (result.isConfirmed) {
                $btn.prop('disabled', true);
                
                $.ajax({
                    url: updateUrl.replace(':id', id),
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        status: status,
                        admin_note: ''
                    },
                    success: function(res) {
                        if (res.success) {
                            Swal.fire('Success!', res.message, 'success');
                            table.ajax.reload(null, false);
                        } else {
                            Swal.fire('Error', res.message || 'Failed to update status', 'error');
                        }
                    },
                    error: function(xhr) {
                        console.error('Status update failed:', xhr.responseText);
                        let errorMsg = 'Server error occurred';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }
                        Swal.fire('Error', errorMsg, 'error');
                    },
                    complete: function() {
                        $btn.prop('disabled', false);
                    }
                });
            }
        });
    });

    // Submit reject form
    $('#rejectForm').on('submit', function (e) {
        e.preventDefault();
        const url = $(this).data('url');
        const note = $('textarea[name="admin_note"]').val().trim();

        if (!note) {
            Swal.fire('Error', 'Please provide a reason for rejection.', 'error');
            return;
        }

        Swal.fire({
            title: 'Reject Booking Request?',
            text: `Reason: ${note}`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Yes, reject!',
            cancelButtonText: 'Cancel',
            allowOutsideClick: false
        }).then((result) => {
            if (result.isConfirmed) {
                // Send proper data for reject action including admin_note
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        status: 'rejected',
                        admin_note: note
                    },
                    success: function(res) {
                        if (res.success) {
                            Swal.fire('Rejected!', res.message, 'success');
                            rejectModal.hide();
                            table.ajax.reload(null, false);
                        } else {
                            Swal.fire('Error', res.message || 'Failed to reject', 'error');
                        }
                    },
                    error: function(xhr) {
                        console.error('Reject failed:', xhr.responseText);
                        let errorMsg = 'Server error occurred';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }
                        Swal.fire('Error', errorMsg, 'error');
                    }
                });
            }
        });
    });
});
</script>
@endpush