@extends('admin.layouts.base')

@section('title', 'Booking Requests Management')

@section('content')
<div id="kt_app_content_container" class="app-container">
    <div class="card">
        <!-- Card Header -->
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <h3 class="fw-bold">
                    <i class="ki-duotone ki-truck fs-1 me-2"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i>
                    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>

        <!-- Summary Statistics Cards -->
        <div class="card-body py-6">
            <div class="row g-6 mb-5">
                <div class="col-md-3 col-sm-4 col-6">
                    <div class="card border border-primary h-100 shadow-sm">
                        <div class="card-body text-center p-6">
                            <h6 class="text-muted fw-semibold mb-3">Total Requests</h6>
                            <h2 class="mb-0 text-primary">{{ $total }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 col-sm-4 col-6">
                    <div class="card border border-warning h-100 shadow-sm">
                        <div class="card-body text-center p-6">
                            <h6 class="text-muted fw-semibold mb-3">Pending</h6>
                            <h2 class="mb-0 text-warning">{{ $pending }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 col-sm-4 col-6">
                    <div class="card border border-info h-100 shadow-sm">
                        <div class="card-body text-center p-6">
                            <h6 class="text-muted fw-semibold mb-3">Approved</h6>
                            <h2 class="mb-0 text-info">{{ $approved }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 col-sm-4 col-6">
                    <div class="card border border-success h-100 shadow-sm">
                        <div class="card-body text-center p-6">
                            <h6 class="text-muted fw-semibold mb-3">Confirmed</h6>
                            <h2 class="mb-0 text-success">{{ $confirmed }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-4 col-6">
                    <div class="card border border-danger h-100 shadow-sm">
                        <div class="card-body text-center p-6">
                            <h6 class="text-muted fw-semibold mb-3">Rejected</h6>
                            <h2 class="mb-0 text-danger">{{ $rejected }}</h2>
                        </div>
                    </div>
                </div>
            </div>

            <!-- DataTable -->
            <div class="table-responsive">
                <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>
</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 </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, rejectModal;

$(document).ready(function () {
    // Initialize DataTable
    table = $('#kt_datatable_booking_requests').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("admin.booking-requests.data") }}',
            type: 'GET'
        },
        pageLength: 25,
        lengthMenu: [10, 25, 50, 100],
        columns: [
            { data: 'sr_no', className: 'text-center' },
            { data: 'user', orderable: false },
            { data: 'route', orderable: false, className: 'text-center' },
            { data: 'carrier', orderable: false },
            { data: 'amount', orderable: false, className: 'text-start' },
            { 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.'
        }
    });

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

    // Initialize Reject Modal
    rejectModal = new bootstrap.Modal('#rejectModal');

    // View Details - Eye Icon Click
    $(document).on('click', '.view-details', function () {
        const id = $(this).data('id');
        const $btn = $(this);

        // Show loading spinner on button
        $btn.prop('disabled', true)
            .html('<span class="spinner-border spinner-border-sm" role="status"></span>');

        // Correct way to generate URL with parameter
        const url = '{{ route("admin.booking-requests.details", ":id") }}'.replace(':id', id);

        $.get(url)
            .done(function (html) {
                // Remove any existing modal
                $('#bookingDetailsModal').remove();
                // Append new modal HTML
                $('body').append(html);
                // Show the modal
                const modal = new bootstrap.Modal(document.getElementById('bookingDetailsModal'));
                modal.show();
            })
            .fail(function (xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to load booking details. Please try again.'
                });
            })
            .always(function () {
                // Restore eye icon
                $btn.prop('disabled', false)
                    .html('<i class="ki-duotone ki-eye fs-4"></i>');
            });
    });

    // Status Change Handler
    $(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':
                $('#rejectForm').data('url', '{{ route("admin.booking-requests.update-status", ":id") }}'.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!';
        }

        Swal.fire({
            title: title,
            text: text,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: confirmText,
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $btn.prop('disabled', true);

                $.ajax({
                    url: '{{ route("admin.booking-requests.update-status", ":id") }}'.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 () {
                        Swal.fire('Error', 'Server error occurred', 'error');
                    },
                    complete: function () {
                        $btn.prop('disabled', false);
                    }
                });
            }
        });
    });

    // Reject Form Submit
    $('#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',
            confirmButtonText: 'Yes, reject!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.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 () {
                        Swal.fire('Error', 'Server error occurred', 'error');
                    }
                });
            }
        });
    });
});
</script>
@endpush