{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{ $page_title }}
@endsection

@section('styles')
<style>
    /* Target the processing overlay */
    #dataTableBuilder_processing {
        color: #0ea0db !important;
        border: none !important;
        box-shadow: 0px 4px 12px rgba(255, 155, 0, 0.15);
        border-radius: 8px;
        font-weight: bold;
        font-size: 15px;
    }
</style>
@endsection

{{-- Content --}}
@section('content')

    <!--begin::Summary Tiles-->
    <div class="col-md-12 pl-0 pr-0 mb-3">
        <div class="card shadow-sm" id="kt_card_summary">
            <div class="card-header collapsible cursor-pointer rotate">
                <div class="card-title">
                    <h3 class="card-label">Summary</h3>
                </div>
                <div class="card-toolbar">
                    <a href="javascript:;" data-bs-toggle="collapse" data-bs-target="#kt_docs_card_collapsible_summary">{!! $cardIcon !!}</a>
                </div>
            </div>
            <div id="kt_docs_card_collapsible_summary" class="collapse show">
                <div class="card-body py-4">
                    <div class="row g-5 g-xl-8">
                        <!--begin::Col-->
                        <div class="col-xl-2 col-md-4 col-6">
                            <div class="card card-dashed flex-center min-w-140px my-1 p-4 bg-light-info border-info cursor-pointer filter-tile" data-status="all">
                                <span class="svg-icon svg-icon-info svg-icon-2hx mb-3">
                                    <i class="bi bi-check-square fs-1 text-info"></i>
                                </span>
                                <span id="total-shifts-val" class="fs-4 fw-bold text-gray-900 mb-1">-</span>
                                <span class="fs-7 fw-semibold text-gray-500">Total Shifts</span>
                            </div>
                        </div>
                        <!--end::Col-->

                        <!--begin::Col-->
                        <div class="col-xl-2 col-md-4 col-6">
                            <div class="card card-dashed flex-center min-w-140px my-1 p-4 bg-light-success border-success">
                                <span class="svg-icon svg-icon-success svg-icon-2hx mb-3">
                                    <i class="bi bi-check-lg fs-1 text-success"></i>
                                </span>
                                <span id="finalized-val" class="fs-4 fw-bold text-gray-900 mb-1">-</span>
                                <span class="fs-7 fw-semibold text-gray-500">Finalized</span>
                            </div>
                        </div>
                        <!--end::Col-->

                        <!--begin::Col-->
                        <div class="col-xl-2 col-md-4 col-6">
                            <div class="card card-dashed flex-center min-w-140px my-1 p-4 bg-light-warning border-warning cursor-pointer filter-tile" data-status="draft">
                                <span class="svg-icon svg-icon-warning svg-icon-2hx mb-3">
                                    <i class="bi bi-exclamation-triangle fs-1 text-warning"></i>
                                </span>
                                <span id="draft-val" class="fs-4 fw-bold text-gray-900 mb-1">-</span>
                                <span class="fs-7 fw-semibold text-gray-500">Draft</span>
                            </div>
                        </div>
                        <!--end::Col-->

                        <!--begin::Col-->
                        <div class="col-xl-2 col-md-4 col-6">
                            <div class="card card-dashed flex-center min-w-140px my-1 p-4 bg-light-danger border-danger cursor-pointer filter-tile" data-status="missing">
                                <span class="svg-icon svg-icon-danger svg-icon-2hx mb-3">
                                    <i class="bi bi-plus-lg fs-1 text-danger"></i>
                                </span>
                                <span id="missing-val" class="fs-4 fw-bold text-gray-900 mb-1">-</span>
                                <span class="fs-7 fw-semibold text-gray-500">Missing</span>
                            </div>
                        </div>
                        <!--end::Col-->

                        <!--begin::Col-->
                        <div class="col-xl-2 col-md-4 col-6">
                            <div class="card card-dashed flex-center min-w-140px my-1 p-4 bg-light-primary border-primary cursor-pointer filter-tile" data-status="cancelled">
                                <span class="svg-icon svg-icon-primary svg-icon-2hx mb-3">
                                    <i class="bi bi-slash-circle fs-1 text-primary"></i>
                                </span>
                                <span id="cancelled-val" class="fs-4 fw-bold text-gray-900 mb-1">-</span>
                                <span class="fs-7 fw-semibold text-gray-500">Cancelled</span>
                            </div>
                        </div>
                        <!--end::Col-->

                        <!--begin::Col-->
                        <div class="col-xl-2 col-md-4 col-6">
                            <div class="card card-dashed flex-center min-w-140px my-1 p-4 bg-light border-gray-400">
                                <span class="svg-icon svg-icon-gray-600 svg-icon-2hx mb-3">
                                    <i class="bi bi-arrow-up-circle fs-1 text-gray-600"></i>
                                </span>
                                <span id="compliance-val" class="fs-4 fw-bold text-gray-900 mb-1">-%</span>
                                <span class="fs-7 fw-semibold text-gray-500">Compliance %</span>
                            </div>
                        </div>
                        <!--end::Col-->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-12 pl-0 pr-0 mb-3">
        <div class="card shadow-sm" id="kt_card_1">
            <div class="card-header collapsible cursor-pointer rotate">
                <div class="card-title">
                    <h3 class="card-label">Filter</h3>
                </div>
                <div class="card-toolbar">
                    <a href="javascript:;" data-bs-toggle="collapse" data-bs-target="#kt_docs_card_collapsible_1">{!! $cardIcon !!}</a>
                </div>
            </div>
            <div id="kt_docs_card_collapsible_1" class="collapse show">
                <div class="card-body py-4">
                    <div class="row">
                        <div class="col-md-2 col-sm-6 mb-3">
                            From Date <span class="text-danger">*</span>:
                            <input type="text" class="form-control datepicker2 filter-date input-from-date" placeholder="DD-MM-YYYY" name="from_date" value="{{ $fromDateDefault }}" autocomplete="off" />
                        </div>
                        <div class="col-md-2 col-sm-6 mb-3">
                            To Date <span class="text-danger">*</span>:
                            <input type="text" class="form-control datepicker2 filter-date input-to-date" placeholder="DD-MM-YYYY" name="to_date" value="{{ $toDateDefault }}" autocomplete="off" />
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            Participant:
                            <select name="client_id" class="form-control form-control-solid form-select filter-client-id" data-control="select2" data-placeholder="Select Participant" data-allow-clear="true">
                                <option value="">All Participant</option>
                                @foreach($client_list as $cid => $cname)
                                    <option value="{{ $cid }}">{{ $cname }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            Staff:
                            <select name="staff_id" class="form-control form-control-solid form-select filter-staff-id" data-control="select2" data-placeholder="Select Staff" data-allow-clear="true">
                                <option value="">All Staff</option>
                                @foreach($staff_list as $sid => $sname)
                                    <option value="{{ $sid }}">{{ $sname }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2 col-sm-6 mb-3">
                            Status:
                            <select name="status" class="form-control form-control-solid form-select filter-status" data-control="select2" data-placeholder="Select Status" data-allow-clear="true">
                                <option value="">All Status</option>
                                <option value="draft">Draft</option>
                                <option value="finalized">Finalized</option>
                                <option value="missing">Missing</option>
                                <option value="cancelled">Cancelled</option>
                                <option value="duplicate">Duplicate</option>
                            </select>
                        </div>
                        <div class="col-md-2 col-sm-6 mb-3">
                            Roster Shift Not Selected:
                            <select name="roster_shift_not_selected" class="form-control form-control-solid form-select filter-roster-shift-not-selected" data-control="select2" data-placeholder="Select Option" data-allow-clear="true">
                                <option value="">All</option>
                                <option value="yes">Yes</option>
                                <option value="no">No</option>
                            </select>
                        </div>
                    </div>
                    <div id="filter-error-message" class="text-danger d-none mt-2 fs-7 fw-bold"></div>
                    <div class="d-flex justify-content-end mt-4">
                        <button type="button" class="btn btn-light btn-active-light-primary me-2 btn-reset-filters">Reset</button>
                        <button type="button" class="btn btn-primary btn-apply-filters">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!--begin::Card-->
<div class="card shadow-sm">
    <!--begin::Card Header-->
    <div class="card-header border-0 pt-6">
        <div class="card-title">
            <!--begin::Search-->
            <div class="d-flex align-items-center position-relative my-1">
                <span class="svg-icon svg-icon-1 position-absolute ms-6">
                    <i class="bi bi-search fs-3 text-gray-400"></i>
                </span>
                <input type="text" data-kt-customer-table-filter="search" class="form-control form-control-solid w-250px ps-15" placeholder="Search" />
            </div>
            <!--end::Search-->
            <!--begin::Export buttons-->
            <div id="kt_datatable_example_1_export" class="d-none"></div>
            <!--end::Export buttons-->
        </div>
        <div class="card-toolbar">
            <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                <!--begin::Bulk Reminders Button-->
                <button type="button" class="btn btn-primary btn-bulk-reminders me-5 d-none">
                    Send Bulk Reminders
                </button>
                <!--begin::Export dropdown-->
                <button type="button" class="btn btn-light-primary me-5" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                    <span class="svg-icon svg-icon-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <rect opacity="0.3" x="12.75" y="4.25" width="12" height="2" rx="1" transform="rotate(90 12.75 4.25)" fill="currentColor"></rect>
                            <path d="M12.0573 6.11875L13.5203 7.87435C13.9121 8.34457 14.6232 8.37683 15.056 7.94401C15.4457 7.5543 15.4641 6.92836 15.0979 6.51643L12.4974 3.59084C12.0996 3.14332 11.4004 3.14332 11.0026 3.59084L8.40206 6.51643C8.0359 6.92836 8.0543 7.5543 8.44401 7.94401C8.87683 8.37683 9.58785 8.34458 9.9797 7.87435L11.4427 6.11875C11.6026 5.92684 11.8974 5.92684 12.0573 6.11875Z" fill="currentColor"></path>
                            <path d="M18.75 8.25H17.75C17.1977 8.25 16.75 8.69772 16.75 9.25C16.75 9.80228 17.1977 10.25 17.75 10.25C18.3023 10.25 18.75 10.6977 18.75 11.25V18.25C18.75 18.8023 18.3023 19.25 17.75 19.25H5.75C5.19772 19.25 4.75 18.8023 4.75 18.25V11.25C4.75 10.6977 5.19771 10.25 5.75 10.25C6.30229 10.25 6.75 9.80228 6.75 9.25C6.75 8.69772 6.30229 8.25 5.75 8.25H4.75C3.64543 8.25 2.75 9.14543 2.75 10.25V19.25C2.75 20.3546 3.64543 21.25 4.75 21.25H18.75C19.8546 21.25 20.75 20.3546 20.75 19.25V10.25C20.75 9.14543 19.8546 8.25 18.75 8.25Z" fill="#C4C4C4"></path>
                        </svg>
                    </span>
                    Export
                </button>
                <!--begin::Menu-->
                <div id="kt_datatable_example_1_export_menu" class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-200px py-4" data-kt-menu="true">
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="copy">
                            Copy to clipboard
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="excel">
                            Export as Excel
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="csv">
                            Export as CSV
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="pdf">
                            Export as PDF
                        </a>
                    </div>
                    <!--end::Menu item-->
                </div>
                <!--end::Menu-->
                <!--end::Export dropdown-->
            </div>
        </div>
    </div>
    <!--end::Card Header-->

    <!--begin::Card Body-->
    <div class="card-body">
        @include('backend.alerts')
        <!--begin: Datatable-->
        <div class="table-responsive">
            {!! $html->table() !!}
        </div>
        <!--end: Datatable-->
    </div>
    <!--end::Card Body-->
</div>
<!--end::Card-->

<!--begin::Email History Modal-->
<div class="modal fade" id="emailHistoryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Email History</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="$('#emailHistoryModal').modal('hide')"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped align-middle table-row-dashed fs-6 gy-5" id="emailHistoryTable">
                        <thead>
                            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                <th>Sent Date/Time</th>
                                <th>Sender</th>
                                <th>Recipient</th>
                                <th>Shift Date</th>
                                <th>Shift Type</th>
                                <th>Email Subject</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody id="emailHistoryTableBody" class="text-gray-600 fw-semibold">
                            <!-- Populated dynamically via JS -->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal" onclick="$('#emailHistoryModal').modal('hide')">Close</button>
            </div>
        </div>
    </div>
</div>
<!--end::Email History Modal-->
@endsection

@section('scripts')
{!! $html->scripts() !!}
<script>
    $(document).ready(function() {
        // clear flag
        window.clicked_summary_status = '';
        window.is_programmatic_clear = false;

        // Initialize Datepicker with past 2 weeks default and disable future dates
        $(".datepicker2").flatpickr({
            dateFormat: "d-m-Y",
            maxDate: "today"
        });

        // Handle search input trigger with debounce
        var searchTimer;
        $('[data-kt-customer-table-filter="search"]').off('keyup').on('keyup', function() {
            var val = this.value;
            clearTimeout(searchTimer);
            searchTimer = setTimeout(function() {
                window.LaravelDataTables["dataTableBuilder"].search(val).draw();
            }, 300);
        });

        // Summary tiles click handler to filter by status
        $('.filter-tile').click(function() {
            var status = $(this).data('status');
            
            // clear flag to true
            window.is_programmatic_clear = true;
            
            window.clicked_summary_status = status;
            
            // Clear dates when status is clicked 
            $('.input-from-date').val('');
            $('.input-to-date').val('');
            
            // Clear status dropdown filter 
            $('.filter-status').val(null).trigger('change');
            
            // Turn off programmatic flag
            window.is_programmatic_clear = false;
            
            window.LaravelDataTables["dataTableBuilder"].ajax.reload();
        });

        $('#dataTableBuilder').on('draw.dt', function() {
            try {
                if (typeof bootstrap !== 'undefined' && bootstrap.Popover) {
                    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
                    popoverTriggerList.map(function (popoverTriggerEl) {
                        return new bootstrap.Popover(popoverTriggerEl);
                    });
                }
            } catch (e) {
                console.error("Popover error: ", e);
            }
        });

        // Clear summary card selection if user interacts with any form filter input
        $('.input-from-date, .input-to-date, .filter-client-id, .filter-staff-id, .filter-status, .filter-roster-shift-not-selected').on('focus change', function() {
            if (!window.is_programmatic_clear) {
                window.clicked_summary_status = '';
            }
            // Reset apply button text when inputs change
            $('.btn-apply-filters').html('Apply').addClass('btn-primary').removeClass('btn-success').prop('disabled', false);
        });

        // Apply filters only when Apply button is clicked
        $('.btn-apply-filters').click(function(e) {
            e.preventDefault();
            window.clicked_summary_status = '';
            applyFiltersDirectly();
        });

        function applyFiltersDirectly() {
            var fromDate = $('.input-from-date').val().trim();
            var toDate = $('.input-to-date').val().trim();
            
            // Dates are always required when clicking Apply button
            if (fromDate === '' || toDate === '') {
                $('#filter-error-message').text("From Date and To Date are required.").removeClass('d-none');
                return false;
            }
            
            $('#filter-error-message').addClass('d-none');
            
            // Change apply button state to loading
            var applyBtn = $('.btn-apply-filters');
            applyBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm align-middle ms-2"></span> Applying...');
            
            window.LaravelDataTables["dataTableBuilder"].ajax.reload();
        }

        // Handle reset trigger to clear Select2 controls and dates properly
        $('.btn-reset-filters').click(function(e) {
            e.preventDefault();
            window.clicked_summary_status = '';
            
            // Hide error message
            $('#filter-error-message').addClass('d-none');
            
            // Clear dropdown values
            $('.filter-client-id').val(null).trigger('change');
            $('.filter-staff-id').val(null).trigger('change');
            $('.filter-status').val(null).trigger('change');
            $('.filter-roster-shift-not-selected').val(null).trigger('change');
            
            // Set dates back to defaults
            $('.input-from-date').val('{{ $fromDateDefault }}');
            $('.input-to-date').val('{{ $toDateDefault }}');
            
            // Reload table
            window.LaravelDataTables["dataTableBuilder"].ajax.reload();
        });

        // Listen for Yajra response to update summary cards dynamically
        $('#dataTableBuilder').on('xhr.dt', function(e, settings, json, xhr) {
            if (json && json.summary) {
                $('#total-shifts-val').text(json.summary.total_shifts);
                $('#finalized-val').text(json.summary.finalized);
                $('#draft-val').text(json.summary.draft);
                $('#missing-val').text(json.summary.missing);
                $('#cancelled-val').text(json.summary.cancelled);
                $('#compliance-val').text(json.summary.compliance);
            }
        });

        // Select All handler (event delegation)
        $(document).on('change', '#select-all-shifts', function() {
            var isChecked = $(this).is(':checked');
            $('.shift-checkbox').prop('checked', isChecked);
            toggleBulkButton();
        });

        // Individual checkbox change handler
        $(document).on('change', '.shift-checkbox', function() {
            var totalCheckboxes = $('.shift-checkbox').length;
            var checkedCheckboxes = $('.shift-checkbox:checked').length;
            $('#select-all-shifts').prop('checked', totalCheckboxes === checkedCheckboxes && totalCheckboxes > 0);
            toggleBulkButton();
        });

        function toggleBulkButton() {
            var checkedCount = $('.shift-checkbox:checked').length;
            if (checkedCount > 0) {
                $('.btn-bulk-reminders').removeClass('d-none');
            } else {
                $('.btn-bulk-reminders').addClass('d-none');
            }
        }

        // Reset checkbox state and update Apply filters button on table redraw
        $('#dataTableBuilder').on('draw.dt', function() {
            $('#select-all-shifts').prop('checked', false);
            $('.btn-bulk-reminders').addClass('d-none');
            
            // Restore apply button state
            var applyBtn = $('.btn-apply-filters');
            if (applyBtn.prop('disabled')) {
                applyBtn.prop('disabled', false)
                        .html('<i class="bi bi-check-circle-fill me-1 fs-5"></i> Filters Applied')
                        .addClass('btn-success')
                        .removeClass('btn-primary');
                        
                // Revert back to "Apply" after 3 seconds
                setTimeout(function() {
                    if (applyBtn.text().trim() === 'Filters Applied') {
                        applyBtn.html('Apply').addClass('btn-primary').removeClass('btn-success');
                    }
                }, 3000);
            }
        });

        // Bulk reminders submission
        $('.btn-bulk-reminders').click(function(e) {
            e.preventDefault();
            
            var selectedIds = [];
            $('.shift-checkbox:checked').each(function() {
                selectedIds.push($(this).val());
            });

            if (selectedIds.length === 0) {
                return;
            }

            Swal.fire({
                title: 'Are you sure?',
                text: "Send reminders for the " + selectedIds.length + " selected shifts? The system will process them in the background.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, send them!',
                cancelButtonText: 'No, cancel',
                customClass: {
                    confirmButton: 'btn btn-primary',
                    cancelButton: 'btn btn-active-light'
                },
                showLoaderOnConfirm: true,
                allowOutsideClick: () => !Swal.isLoading(),
                preConfirm: function() {
                    return $.ajax({
                        type: 'POST',
                        url: "{{ route('shift_case_note_reconciliation.bulk_send_reminder') }}",
                        data: {
                            allocation_ids: selectedIds,
                            _token: "{{ csrf_token() }}"
                        }
                    }).catch(function(err) {
                        console.error(err);
                        Swal.showValidationMessage('An error occurred while queuing the reminders.');
                    });
                }
            }).then(function(result) {
                if (result.isConfirmed && result.value) {
                    var res = result.value;
                    if (res.success) {
                        Swal.fire({
                            text: res.message,
                            icon: 'success',
                            buttonsStyling: false,
                            confirmButtonText: 'Ok, got it!',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            }
                        });
                        window.LaravelDataTables["dataTableBuilder"].ajax.reload(null, false);
                    } else {
                        Swal.fire({
                            text: res.message,
                            icon: 'error',
                            buttonsStyling: false,
                            confirmButtonText: 'Ok, got it!',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            }
                        });
                    }
                }
            });
        });
    });

    function sendShiftReminder(id, clientId = null) {
        var row = $('#' + id + (clientId ? '_' + clientId : ''));
        var staffName = row.find('td:nth-child(9)').text(); 
        var shiftDate = row.find('td:nth-child(2)').text(); 
        var participantName = row.find('td:nth-child(7)').text();
        
        Swal.fire({
            title: 'Are you sure?',
            text: "Send a case note reminder to " + staffName.trim() + " for the shift on " + shiftDate.trim() + (participantName ? " (" + participantName.trim() + ")" : "") + "?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, send it!',
            cancelButtonText: 'No, cancel',
            customClass: {
                confirmButton: 'btn btn-primary',
                cancelButton: 'btn btn-active-light'
            },
            showLoaderOnConfirm: true,
            allowOutsideClick: () => !Swal.isLoading(),
            preConfirm: function() {
                return $.ajax({
                    type: 'POST',
                    url: "{{ route('shift_case_note_reconciliation.send_reminder') }}",
                    data: {
                        allocation_id: id,
                        client_id: clientId,
                        _token: "{{ csrf_token() }}"
                    }
                }).catch(function(err) {
                    console.log(err);
                    Swal.showValidationMessage('An error occurred while sending the reminder.');
                });
            }
        }).then(function(result) {
            if (result.isConfirmed && result.value) {
                var res = result.value;
                if (res.success) {
                    Swal.fire({
                        text: res.message,
                        icon: 'success',
                        buttonsStyling: false,
                        confirmButtonText: 'Ok, got it!',
                        customClass: {
                            confirmButton: 'btn btn-primary'
                        }
                    });
                    window.LaravelDataTables["dataTableBuilder"].ajax.reload(null, false);
                } else {
                    Swal.fire({
                        text: res.message,
                        icon: 'error',
                        buttonsStyling: false,
                        confirmButtonText: 'Ok, got it!',
                        customClass: {
                            confirmButton: 'btn btn-primary'
                        }
                    });
                }
            }
        });
    }

    function viewEmailHistory(allocationId) {
        var $tbody = $('#emailHistoryTableBody');
        $tbody.html('<tr><td colspan="7" class="text-center text-muted">Loading...</td></tr>');
        $('#emailHistoryModal').modal('show');

        $.ajax({
            url: "{{ route('shift_case_note_reconciliation.email_history') }}",
            type: "POST",
            data: {
                allocation_id: allocationId,
                _token: "{{ csrf_token() }}"
            },
            success: function(res) {
                if (res.status && res.data && res.data.length > 0) {
                    var rows = '';
                    res.data.forEach(function(item) {
                        rows += '<tr>' +
                            '<td>' + item.date + '</td>' +
                            '<td>' + item.sender + '</td>' +
                            '<td>' + item.recipient + '</td>' +
                            '<td>' + item.shift_date + '</td>' +
                            '<td>' + item.shift_type + '</td>' +
                            '<td>' + item.subject + '</td>' +
                            '<td><span class="badge badge-light-success">' + item.status + '</span></td>' +
                            '</tr>';
                    });
                    $tbody.html(rows);
                } else {
                    $tbody.html('<tr><td colspan="7" class="text-center text-muted">No email history found.</td></tr>');
                }
            },
            error: function(err) {
                console.error(err);
                $tbody.html('<tr><td colspan="7" class="text-center text-danger">Error loading email history.</td></tr>');
            }
        });
    }
</script>
@endsection