@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<style>
    .toolbar-card {
        border: none;
        border-radius: 14px;
        box-shadow: 0 2px 14px rgba(30, 41, 59, 0.06);
    }

    .toolbar-wrap {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .search-cluster {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.65rem;
        flex: 1 1 auto;
    }

    .search-field {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1 1 50px;
        min-width: 150px;
        height: 42px;
        padding: 0 12px;
        border-radius: 10px;
        border: 1px solid #e5e9f0;
        /* background: #f8fafc; */
        transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }

    .search-field i {
        flex: 0 0 auto;
        font-size: 15px;
        line-height: 1;
        color: #94a3b8;
        pointer-events: none;
    }

    .search-field input {
        flex: 1 1 auto;
        min-width: 0;
        height: 50px !important;
        border: none;
        background: transparent;
        padding: 0;
        font-size: 0.875rem;
        /* color: #1e293b; */
    }

    .search-field input:focus {
        outline: none;
        box-shadow: none;
    }

    .search-field:focus-within {
        /* background: #fff; */
        border-color: #696cff;
        box-shadow: 0 0 0 3px rgba(105, 108, 255, 0.12);
    }

    .btn-search {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 42px;
        padding: 0 18px;
        border-radius: 10px;
        border: none;
        background: #696cff;
        color: #fff;
        font-size: 0.875rem;
        font-weight: 500;
        white-space: nowrap;
        transition: background 0.15s ease, transform 0.1s ease;
    }

    .btn-search:hover {
        background: #5f61e6;
        color: #fff;
        transform: translateY(-1px);
    }

    .toolbar-divider {
        width: 1px;
        align-self: stretch;
        background: #eceef3;
        margin: 0 0.25rem;
    }

    .btn-add-patient {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 42px;
        padding: 0 20px;
        border-radius: 10px;
        background: #22c55e;
        color: #fff;
        font-size: 0.875rem;
        font-weight: 600;
        white-space: nowrap;
        box-shadow: 0 4px 10px rgba(34, 197, 94, 0.25);
        transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    }

    .btn-add-patient:hover {
        background: #1eab52;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(34, 197, 94, 0.3);
    }

    /* ---------- Mobile ---------- */
    @media (max-width: 767px) {
        .toolbar-wrap {
            flex-direction: column;
            align-items: stretch;
        }

        .search-cluster {
            flex-direction: column;
            width: 100%;
        }

        .search-field {
            width: 100%;
        }

        .btn-search,
        .btn-add-patient {
            width: 100%;
            justify-content: center;
        }

        .toolbar-divider {
            display: none;
        }
    }

    /* ---------- Tablet ---------- */
    @media (min-width: 768px) and (max-width: 991px) {
        .search-field {
            flex: 1 1 45%;
        }
    }

    /* ==========================================================
   CONSULTATION MODAL — redesign
   ========================================================== */
    .consultation-modal-header {
        background: linear-gradient(135deg, #0d6efd, #4f8bff);
        color: #fff;
        padding: 1.25rem 1.5rem;
    }

    .consultation-header-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.16);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #fff;
    }

    .consultation-header-sub {
        color: rgba(255, 255, 255, 0.75);
    }

    /* Patient info bar (replaces the readonly input grid) */
    .patient-info-bar {
        display: flex;
        align-items: center;
        gap: 18px;
        background: #f8f9fc;
        border-radius: 14px;
        padding: 18px 22px;
    }

    .patient-avatar {
        width: 54px;
        height: 54px;
        min-width: 54px;
        border-radius: 50%;
        background: linear-gradient(135deg, #0d6efd, #4f8bff);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 16px;
    }

    .patient-info-main {
        flex: 1;
        min-width: 0;
    }

    .patient-info-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .info-tag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 50px;
        padding: 4px 12px;
        font-size: 12.5px;
        color: #495057;
    }

    .info-tag i {
        font-size: 14px;
        color: #6c757d;
    }

    .info-tag-danger {
        color: #dc3545;
        border-color: #ffd8dc;
        background: #fff5f6;
    }

    .info-tag-danger i {
        color: #dc3545;
    }

    /* Section cards */
    .consultation-card {
        background: #fff;
        border: 1px solid #eef0f4;
        border-radius: 14px;
        overflow: hidden;
    }

    .consultation-card-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 18px;
        background: #fbfbfd;
        border-bottom: 1px solid #eef0f4;
    }

    .consultation-card-body {
        padding: 18px;
    }

    .section-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    .section-icon-amber {
        background: rgba(253, 126, 20, 0.12);
        color: #fd7e14;
    }

    .section-icon-red {
        background: rgba(220, 53, 69, 0.12);
        color: #dc3545;
    }

    .section-icon-purple {
        background: rgba(111, 66, 193, 0.12);
        color: #6f42c1;
    }

    .section-icon-teal {
        background: rgba(15, 110, 86, 0.12);
        color: #0f6e56;
    }

    .section-icon-green {
        background: rgba(47, 174, 116, 0.12);
        color: #2fae74;
    }

    .section-icon-blue {
        background: rgba(13, 110, 253, 0.12);
        color: #0d6efd;
    }

    /* Prescription table */
    .prescription-table thead th {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: #6c757d;
        border-bottom: 1px solid #eef0f4;
        font-weight: 600;
    }

    .prescription-table td {
        border-bottom: 1px solid #f2f3f6;
    }

    .med-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        border-radius: 8px;
        background: rgba(15, 110, 86, 0.1);
        color: #0f6e56;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    /* Morning / Afternoon / Night dose toggles — replaces raw checkboxes */
    .dose-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1.5px solid #dee2e6;
        color: #6c757d;
        font-weight: 700;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .btn-check:checked+.dose-btn {
        background: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
    }

    @media (max-width: 767.98px) {
        .patient-info-bar {
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
        }
    }

    /* ===========================
   Chrome Autofill Fix
=========================== */

    .search-field input:-webkit-autofill,
    .search-field input:-webkit-autofill:hover,
    .search-field input:-webkit-autofill:focus,
    .search-field input:-webkit-autofill:active {

        -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
        -webkit-text-fill-color: #1e293b !important;

        border: none !important;
        background: transparent !important;

        transition: background-color 9999s ease-in-out 0s;
        caret-color: #1e293b;
    }

    /* Focus */
    .search-field:focus-within {
        border-color: #696cff;
        box-shadow: 0 0 0 3px rgba(105, 108, 255, .12);
    }
</style>
@section('content')

    <div class="row align-items-center justify-content-between mb-3">
        <div class="col-auto">
            <h5>Appointment Report — <span class="text-primary">{{ date('d M Y') }}</span>&nbsp;<span
                    class="badge bg-label-success"><span id="totalCount"></span>&nbsp;&nbsp;&nbsp;&nbsp;Appointments</span>
            </h5>
        </div>
        <div class="col-auto d-flex gap-2">
            <a href="{{ route('upcoming_appointments') }}" class="btn btn-primary">
                <i class="ti tabler-file-text me-1"></i> Upcoming
            </a>
            <a href="{{ route('view_appointments') }}" class="btn btn-primary">
                <i class="ti tabler-file-text me-1"></i> Closed
            </a>

        </div>
    </div>
    {{-- Quick Add Form --}}
    <div id="quickAddForm" style="display:none;" class="card border-0 shadow-sm mb-3">


    </div> {{-- ============ Toolbar Card: Search + Add Patient ============ --}}
    <div class="card toolbar-card mb-4">
        <div class="card-body">
            <div class="toolbar-wrap">

                <div class="search-cluster">
                    <div class="search-field">
                        <input type="text" id="sheetSearch" placeholder="Sheet ID">
                    </div>

                    <div class="search-field">
                        <i class="ti tabler-user"></i>
                        <input type="text" id="nameSearch" placeholder="Patient Name">
                    </div>

                    <div class="search-field">
                        <i class="ti tabler-phone"></i>
                        <input type="text" id="phoneSearch" placeholder="Phone Number">
                    </div>

                    <button class="btn btn-secondary" id="resetBtn" type="button">
                        <span>Reset</span>
                    </button>
                </div>
                <!-- 
                                <div class="toolbar-divider"></div>

                                <a href="{{ route('create_patient_full') }}" class="btn btn-primary">
                                    <i class="ti tabler-user-plus"></i>
                                    <span>Add Patient</span>
                                </a> -->

            </div>
        </div>
    </div>




    {{-- Appointments Table --}}
    <div class="card p-0">
        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-auto">
                <select id="pageLength" class="form-select">
                    <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-auto ms-auto">
                <div class="d-flex align-items-center gap-2">
                    <input type="text" id="customSearch" class="form-control" placeholder="Search..." style="width:180px;">
                    <button class="btn btn-label-secondary">Export</button>
                </div>
            </div>
        </div>

        <div class="table-responsive pt-0 pb-2">
            <table class="table" id="pendingAppointmentsTable">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Time</th>
                        <th>Token</th>
                        <th>Sheet ID</th>
                        <th>Patient</th>
                        <th>Phone</th>
                        <th>Doctor</th>
                        <th>Reason</th>
                        <th>Consultation</th>
                        <th>Status</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    {{-- Close Modal --}}
    <div class="modal fade" id="closeAppointmentModal" tabindex="-1">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content" style="border-radius:16px;">
                <div class="modal-header">
                    <h5 class="modal-title">Update Status</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="closeAppointmentId">
                    <div class="mb-3">
                        <label class="form-label">Status</label>
                        <select class="form-select" disabled>
                            <option>Closed</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Remark</label>
                        <textarea class="form-control" rows="3" id="closeRemark"></textarea>
                    </div>
                </div>
                <div class="text-center pb-3">
                    <button type="button" class="btn btn-light me-3" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" id="submitCloseBtn">Submit</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="statusUpdateModal" tabindex="-1">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header">

                    <button class="btn-close" data-bs-dismiss="modal">
                    </button>

                </div>
                <h5 class="text-center">
                    Update Appointment Status
                </h5>

                <div class="modal-body">

                    <input type="hidden" id="statusAppointmentId">

                    <div class="mb-3">
                        <label class="form-label">
                            Appointment Status
                        </label>

                        <select class="form-select" id="appointmentStatus">


                            <option value="Completed">Completed</option>

                            <option value="Cancelled">Cancelled</option>

                            <option value="Next Followup Date">Next Followup Date</option>

                        </select>

                    </div>

                    <div class="mb-3" id="followupDateGroup" style="display:none;">
                        <label class="form-label">
                            Next Follow Up Date <span class="text-danger">*</span>
                        </label>

                        <input type="date" class="form-control" id="followupDate">

                        <div class="invalid-feedback" id="error_follow_up_date"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">
                            Reason <span class="text-danger">*</span>
                        </label>

                        <textarea class="form-control" rows="3" id="followupReason" placeholder="Enter reason"></textarea>

                        <div class="invalid-feedback" id="error_reason"></div>
                    </div>

                </div>

                <div class="text-center">
                    <button class="btn btn-light" data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <button class="btn btn-warning" id="saveAppointmentStatus">
                        Save Changes
                    </button>
                </div>
                <div class="modal-footer">


                </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://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.getElementById('submit_btn').addEventListener('click', function (e) {
            e.preventDefault();
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('deleteForm').submit();
        });
    </script>
    <script>
        $(document).ready(function () {

            const allData = @json($appointments);
            const doctors = @json($doctors);
            const today = "{{ date('Y-m-d') }}";
            //toaster
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true
            });

            // Filter to today only initially
            function filterByDate(from, to) {
                return allData.filter(function (row) {
                    return row.date >= from && row.date <= to;
                });
            }

            let filteredData = filterByDate(today, today);

            const table = $('#pendingAppointmentsTable').DataTable({
                data: allData,
                pageLength: 10,
                lengthChange: false,
                columns: [
                    {data: 'date', render: d => d ? d.split('-').reverse().join('-') : '-'},
                    {
                        data: 'time',
                        render: function (data) {
                            if (!data) return '-';
                            const date = new Date('1970-01-01T' + data);
                            return date.toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit', hour12: true});
                        }
                    },
                    {data: 'token'},
                    {data: 'sheet_no'},
                    {data: 'patient'},
                    {data: 'phone'},
                    {
                        data: null,
                        render: (data, type, row) => row.specializations
                            ? `${row.doctor} <span class="text-muted">(${row.specializations})</span>`
                            : row.doctor
                    },
                    {
                        data: 'symptoms',
                        defaultContent: '-'
                    },
                    {
                        data: null,
                        orderable: false,
                        render: function (data, type, row) {
                            let url = "{{ route('consultation', ':id') }}".replace(':id', row.id);
                            return `<a href="${url}" class="btn btn-sm btn-label-info">
                                        <i class="ti tabler-stethoscope me-1"></i> Consultation
                                    </a>`;
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        render: (data, type, row) => `
                            <button class="btn btn-sm btn-warning status-update-btn"
                                    data-id="${row.id}" data-bs-toggle="modal" data-bs-target="#statusUpdateModal">
                                <i class="ti tabler-edit me-1"></i> Update
                            </button>`
                    },
                ]
            });

            function updateCount(data) {$('#totalCount').text(data.length);}
            updateCount(allData);

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

            $('#pageLength').on('change', function () {
                const length = $(this).val();
                table.page.len(length === 'All' ? -1 : parseInt(length)).draw();
            });

            function applyFilters() {
                const sheetNo = $('#sheetSearch').val().toLowerCase().trim();
                const name = $('#nameSearch').val().toLowerCase().trim();
                const phone = $('#phoneSearch').val().toLowerCase().trim();

                const filtered = allData.filter(row =>
                    (sheetNo === '' || String(row.sheet_no ?? '').toLowerCase().includes(sheetNo)) &&
                    (name === '' || String(row.patient ?? '').toLowerCase().includes(name)) &&
                    (phone === '' || String(row.phone ?? '').toLowerCase().includes(phone))
                );

                table.clear().rows.add(filtered).draw();
                updateCount(filtered);
            }

            $('#sheetSearch, #nameSearch, #phoneSearch').on('keyup input', applyFilters);

            $('#resetBtn').on('click', function () {
                $('#sheetSearch, #nameSearch, #phoneSearch').val('');
                table.clear().rows.add(allData).draw();
                updateCount(allData);
            });
            // Search
            $('#customSearch').on('keyup', function () {
                table.search(this.value).draw();
            });

            $('#pageLength').on('change', function () {
                let length = $(this).val();
                table.page.len(length === 'All' ? -1 : parseInt(length)).draw();
            });

            // Close appointment
            $('#pendingAppointmentsTable').on('click', '.close-btn', function () {
                $('#closeAppointmentId').val($(this).data('id'));
                $('#closeRemark').val('');
            });

            $('#submitCloseBtn').on('click', function () {
                const id = $('#closeAppointmentId').val();
                const remark = $('#closeRemark').val();
                $.ajax({
                    url: '{{ url("admin/appointment") }}/' + id + '/close',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        remark: remark
                    },
                    success: function () {
                        Toast.fire({
                            icon: 'success',
                            title: response.message
                        });

                        $('#closeAppointmentModal').modal('hide');
                        location.reload();
                    },
                    error: function () {
                        alert('Failed to close appointment.');
                    }
                });
            });

            // Mark visited
            $(document).on('click', '.visited-btn', function () {
                const id = $(this).data('id');
                const btn = $(this);

                $.ajax({
                    url: '{{ url("admin/appointment") }}/' + id + '/close',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        remark: 'Visited'
                    },
                    success: function () {
                        btn.removeClass('btn-label-secondary').addClass('btn-success');
                        btn.html('<i class="ti tabler-check me-1"></i>Visited');
                    },
                    error: function () {
                        alert('Failed to mark as visited.');
                    }

                });
            });

            // Quick Add toggle
            $('#toggleQuickAdd, #closeQuickAdd, #closeQuickAdd2').on('click', function () {
                $('#quickAddForm').slideToggle(300);
            });

            // Department → Doctor filter
            $('#qa_dept').on('change', function () {
                const dept = $(this).val();
                const doctorSelect = $('#qa_doctor');
                doctorSelect.html('<option value="">Select Doctor</option>');
                if (!dept) return;
                doctors.filter(d => d.specialization === dept).forEach(function (d) {
                    doctorSelect.append('<option value="' + d.id + '">' + d.doctor_name + '</option>');
                });
            });

            // Quick Add submit
            $('#quickAddFormEl').on('submit', function (e) {
                e.preventDefault();
                $('.text-danger.small').text('');
                const btn = $('#quickAddSubmitBtn');
                const text = $('#quickAddSubmitText');
                btn.prop('disabled', true);
                text.text('Booking...');

                $.ajax({
                    url: '{{ route("store_appointment") }}',
                    method: 'POST',
                    data: $(this).serialize(),
                    success: function (response) {
                        btn.prop('disabled', false);
                        text.text('Book Appointment');
                        if (response.success) {
                            // $('#quickAddAlert').html('<div class="alert alert-success">' + response.message + '</div>').show();
                            // setTimeout(function() { location.reload(); }, 1000);
                            Toast.fire({
                                icon: 'success',
                                title: response.message
                            });

                            setTimeout(function () {
                                location.reload();
                            }, 1000);
                        }
                    },
                    error: function (xhr) {
                        btn.prop('disabled', false);
                        text.text('Book Appointment');
                        if (xhr.status === 422) {
                            const errors = xhr.responseJSON.errors;
                            $.each(errors, function (field, messages) {
                                $('#err_' + field).text(messages[0]);
                            });
                            Toast.fire({
                                icon: 'error',
                                title: 'Failed to book appointment.'
                            });
                        }
                    }
                });
            });

            function applyFilters() {

                const sheetNo = $('#sheetSearch').val().toLowerCase().trim();
                const name = $('#nameSearch').val().toLowerCase().trim();
                const phone = $('#phoneSearch').val().toLowerCase().trim();

                const filtered = allData.filter(function (row) {

                    const matchSheet = sheetNo === '' ||
                        String(row.sheet_no ?? '').toLowerCase().includes(sheetNo);

                    const matchName = name === '' ||
                        String(row.patient ?? '').toLowerCase().includes(name);

                    const matchPhone = phone === '' ||
                        String(row.phone ?? '').toLowerCase().includes(phone);

                    return matchSheet && matchName && matchPhone;

                });

                table.clear().rows.add(filtered).draw();
                updateCount(filtered);

            }

            $('#sheetSearch, #nameSearch, #phoneSearch').on('keyup input', function () {
                applyFilters();
            });
            $('#resetBtn').on('click', function () {

                $('#sheetSearch').val('');
                $('#nameSearch').val('');
                $('#phoneSearch').val('');

                table.clear().rows.add(filteredData).draw();

                updateCount(filteredData);

            });


            function toggleFollowupDate() {

                if ($('#appointmentStatus').val() === 'Next Followup Date') {
                    $('#followupDateGroup').slideDown(200);
                    $('#followupDate').prop('required', true);
                } else {
                    $('#followupDateGroup').slideUp(200);
                    $('#followupDate').prop('required', false).val('');
                }
            }

            $('#appointmentStatus').on('change', function () {
                toggleFollowupDate();
            });

            // Hide initially
            toggleFollowupDate();

            // Reset every time modal opens
            $('#statusUpdateModal').on('shown.bs.modal', function () {
                $('#appointmentStatus').val('Completed');
                toggleFollowupDate();
            });



            // Open modal
            $(document).on('click', '.status-update-btn', function () {
                $('#statusAppointmentId').val($(this).data('id'));
            });

            // Save
            $('#saveAppointmentStatus').on('click', function () {

                let btn = $(this);

                btn.prop('disabled', true)
                    .html('Processing...');

                $.ajax({
                    url: "{{ route('update_appointment_status') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        appointment_id: $('#statusAppointmentId').val(),
                        status: $('#appointmentStatus').val(),
                        follow_up_date: $('#followupDate').val(),
                        reason: $('#followupReason').val()
                    },

                    success: function (response) {

                        Toast.fire({
                            icon: 'success',
                            title: response.message
                        });

                        $('#statusUpdateModal').modal('hide');

                        setTimeout(function () {
                            location.reload();
                        }, 800);
                    },

                    error: function (xhr) {

                        btn.prop('disabled', false)
                            .html('Save Changes');

                        if (xhr.status === 422) {

                            let errors = xhr.responseJSON.errors;

                            let message = '';

                            $.each(errors, function (field, messages) {
                                message += messages[0] + '<br>';
                            });

                            Toast.fire({
                                icon: 'error',
                                title: message
                            });

                        } else {

                            Toast.fire({
                                icon: 'error',
                                title: xhr.responseJSON?.message ?? 'Something went wrong.'
                            });

                        }
                    }
                });

            });
        });
    </script>
@endsection