@extends('layout.layout')

@section('content')
    @include('components.alert')

    @if (optional(optional(Auth::user()->staff)->department)->slug != 'retention')
        <div class="container-fluid app-bg">
            <div class="page-shell">
                <div class="ui-card">
                    <div class="px-4 py-5 text-center">
                        <h5 class="mb-2 ui-title">Notice</h5>
                        <p class="mb-0 ui-muted">You have access outside the Retention department.</p>
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="container-fluid app-bg">
            <div class="page-shell">
                <div class="d-flex flex-column gap-4">
                    <x-page-title
                        title="View Schedule"
                        description="Review staff schedules by date range, program, level, and admin assignment in one place."
                    >
                        <button type="button" id="clearFilters"
                            class="asset-btn asset-btn--secondary d-flex align-items-center gap-2">
                            <iconify-icon icon="mdi:broom" style="font-size: 16px"></iconify-icon>
                            <span>Clear Filters</span>
                        </button>
                    </x-page-title>

                    <div class="ui-card">
                        <div class="ui-card__header">
                            <div>
                                <h6 class="mb-0 ui-title">Schedule Filters</h6>
                                <p class="mb-0 ui-muted">Narrow the view by staff, category, program type, level, date range, and session time.</p>
                            </div>
                        </div>

                        <div class="p-3">
                            <form class="view-schedule-filters">
                                <div class="row g-3 align-items-end">
                                    <div class="col-md-6 col-xl-4">
                                        <label for="staff_id" class="form-label">Staffs</label>
                                        <select class="form-select form-select-sm" id="staff_id" name="staff_id" required>
                                            <option value="">Select Staff</option>
                                            @foreach ($staffs as $item)
                                                <option value="{{ $item->id }}">
                                                    {{ $item->first_name }} {{ $item->last_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('staff_id')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    @if (optional(optional(Auth::user()->staff)->jobTitle)->sort == 1)
                                        <div class="col-md-6 col-xl-4">
                                            <label for="next_staff_id" class="form-label">Admins</label>
                                            <select class="form-select form-select-sm" id="next_staff_id" name="next_staff_id"
                                                required>
                                                <option value="">Select Staff</option>
                                            </select>
                                            @error('next_staff_id')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    @endif

                                    <div class="col-md-6 col-xl-4">
                                        <label for="category_id" class="form-label">Categories</label>
                                        <select class="form-select form-select-sm" id="category_id" name="category_id"
                                            required>
                                            <option value="">Select Category</option>
                                            @foreach ($categories as $item)
                                                <option value="{{ $item->id }}">{{ $item->name_en }}</option>
                                            @endforeach
                                        </select>
                                        @error('category_id')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 col-xl-4">
                                        <label for="track_type_id" class="form-label">Program Types</label>
                                        <select class="form-select form-select-sm" id="track_type_id" name="track_type_id">
                                            <option value="">Select Type</option>
                                            @foreach ($trackTypes as $item)
                                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('track_type_id')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 col-xl-4">
                                        <label for="track_id" class="form-label">Programs</label>
                                        <select class="form-select form-select-sm" id="track_id" name="track_id"></select>
                                        @error('track_id')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 col-xl-4">
                                        <label for="track_level_id" class="form-label">Levels</label>
                                        <select class="form-select form-select-sm" id="track_level_id"
                                            name="track_level_id"></select>
                                        @error('track_level_id')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 col-xl-4">
                                        <label for="date_range" class="form-label">Date Range</label>
                                        <input type="hidden" id="start_date" name="start_date">
                                        <input type="hidden" id="end_date" name="end_date">
                                        <div class="input-group input-group-sm">
                                            <span class="input-group-text px-3">
                                                <iconify-icon icon="mdi:calendar" style="color: #007bff;"></iconify-icon>
                                            </span>
                                            <input type="text" class="form-control" id="date_range" name="date_range"
                                                required placeholder="Select date or range">

                                            <button type="button" class="btn btn-outline-secondary" id="prev_date"
                                                title="Previous day">
                                                <iconify-icon icon="mdi:chevron-left" style="color: #007bff;"></iconify-icon>
                                            </button>
                                            <button type="button" class="btn btn-outline-secondary" id="next_date"
                                                title="Next day">
                                                <iconify-icon icon="mdi:chevron-right" style="color: #007bff;"></iconify-icon>
                                            </button>
                                        </div>
                                        @error('start_date')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                        @error('end_date')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 col-xl-4">
                                        <label for="start_time" class="form-label">Start Time</label>
                                        <div class="input-group input-group-sm">
                                            <span class="input-group-text px-3">
                                                <iconify-icon icon="mdi:clock-outline" style="color: #405893;"></iconify-icon>
                                            </span>
                                            <input type="time" class="form-control time-picker" id="start_time"
                                                name="start_time" placeholder="HH:MM">
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-xl-4">
                                        <label for="end_time" class="form-label">End Time</label>
                                        <div class="input-group input-group-sm">
                                            <span class="input-group-text px-3">
                                                <iconify-icon icon="mdi:clock-outline" style="color: #405893;"></iconify-icon>
                                            </span>
                                            <input type="time" class="form-control time-picker" id="end_time"
                                                name="end_time" placeholder="HH:MM">
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="position-relative">
                        <div id="content-wrap" class="ui-card ui-card--table">
                            <div class="ui-card__header">
                                <div>
                                    <h6 class="mb-0 ui-title">Schedule Overview</h6>
                                    <p class="mb-0 ui-muted">Each row represents a staff member and each day column lists the scheduled sessions for that date.</p>
                                </div>
                            </div>

                            <div class="ui-table-wrap nice-scrollbar">
                                <table class="ui-table table-enhanced-schedule">
                                    <thead class="ui-table__head">
                                        <tr class="text-center" id="schedule-header-row">
                                            <th class="staff-header-col">Staff</th>
                                        </tr>
                                    </thead>
                                    <tbody class="ui-table__body" id="slots-body"></tbody>
                                </table>
                            </div>
                        </div>

                        <div id="loader" class="loader-container">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

@endsection

@push('styles')
    <style>
        #loader {
            position: absolute;
            inset: 0;
            z-index: 2;
        }

        .loader-container {
            display: none;
            min-height: 320px;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 0.72);
            backdrop-filter: blur(1px);
            border-radius: 20px;
        }

        .view-schedule-filters .form-label {
            color: #0f172a;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .view-schedule-filters .form-select,
        .view-schedule-filters .form-control,
        .view-schedule-filters .input-group-text {
            min-height: 42px;
        }

        .bordered-table thead tr th {
            background-color: #405893 !important;
            color: #ffffff !important;
            position: sticky;
            top: 0;
            z-index: 2;
            white-space: nowrap;
        }

        .bordered-table tbody tr td {
            background-color: #fafbff;
        }

        .table-enhanced-schedule {
            table-layout: fixed;
            width: 100%;
            min-width: 960px;
        }

        .table-enhanced-schedule thead th.staff-header-col {
            background-color: #d4d4d4 !important;
            color: #000000 !important;

            position: sticky;
            left: 0;
            z-index: 3;
            min-width: 160px;
            max-width: 160px;
            text-align: center;
            padding-left: 1rem;
            vertical-align: middle;
        }

        .table-enhanced-schedule tbody td.staff-name-col {
            position: sticky;
            left: 0;
            z-index: 1;
            background-color: #f8f9fa;
            font-weight: 600;
            text-align: left;
            padding-left: 1rem;
            min-width: 160px;
            max-width: 160px;

            text-align: center;
            align-items: center;
            vertical-align: middle;
            border-right: 1px solid #dee2e6;
        }

        .table-enhanced-schedule thead th:not(.staff-header-col) {
            background-color: #d3d3d3 !important;
            color: #000000 !important;
            min-width: 160px;
            padding: 0.5rem 0.25rem;
            vertical-align: top;
            white-space: normal;
        }

        .table-enhanced-schedule thead th.day-header-separator {
            border-right: 2px solid #ffffff !important;
        }

        .table-enhanced-schedule thead th:last-child {
            border-right: none !important;
        }


        .table-enhanced-schedule tbody tr td:not(.staff-name-col) {
            padding: 0;
            vertical-align: top !important;
            min-width: 160px;
            max-width: 160px;
            height: 100%;
        }
        .time-slot-container {
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding: 5px;
            height: 100%;
        }

        .slot-card {
            padding: 6px 8px;
            border-radius: 4px;
            color: #1f2d3d;
            font-size: 14px;
            line-height: 1.2;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            user-select: none;
            cursor: default;
            font-weight: 500;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .slot-card.color-white {
            background-color: #f7f7f7;
            color: #212529;
            border: 1px solid #dee2e6;
        }

        .slot-card.color-green {
            background-color: #d4edda;
            color: #155724;
        }

        .slot-card.color-blue {
            background-color: #cce5ff;
            color: #004085;
        }

        .slot-card .slot-detail {
            font-size: 14px;
            font-weight: 400;
            opacity: 0.9;
        }

        .slot-card .slot-time {
            font-weight: 600;
            margin-bottom: 2px;
        }
    </style>
@endpush

@push('scripts')
    <script>

        $('#clearFilters').on('click', function() {
            // reset selects
            $('#staff_id').val('').trigger('change');
            $('#category_id').val('').trigger('change');
            $('#track_type_id').val('').trigger('change');
            $('#track_id').html('<option value="">Select Program</option>').val('').trigger('change');
            $('#track_level_id').html('<option value="">Select Level</option>').val('').trigger('change');
            $('#track_level_session_id').html('<option value="">Select Session</option>').val('').trigger('change');
            $('#start_time').val('');
            $('#end_time').val('');


            // reset date range
            const today = moment().format('YYYY-MM-DD');
            const sevenDays = moment().add(6, 'days').format('YYYY-MM-DD');
            $('#start_date').val(today);
            $('#end_date').val(sevenDays);
            $('#date_range').val(today + " to " + sevenDays);

            // rebuild slots
            buildLoadSLots();
        });
        $('#track_type_id').on('change', function() {
            let trackTypeId = $(this).val();
            let categoryId = $('#category_id').val();

            let url =
                "{{ route('getTracksByTrackType', ['trackTypeId' => ':trackTypeId', 'categoryId' => ':categoryId']) }}"
                .replace(':trackTypeId', trackTypeId).replace(':categoryId', categoryId);
            $.ajax({
                url: url,
                type: 'GET',
                success: function(response) {
                    $('#track_id').html(
                        '<option value="">Select Program</option>'); // Clear and set default
                    if (response.tracks.length > 0) {
                        response.tracks.forEach(track => {
                            const text = track.name_en;
                            $('#track_id').append(
                                `<option value="${track.id}" data-track='${JSON.stringify(track)}'>${text}</option>`
                            );
                        });
                    } else {
                        $('#track_id').append(
                            '<option value="">No programs available</option>');
                    }

                }
            });

            buildLoadSLots();

        });
        $('#track_id').on('change', function() {
            let trackId = $(this).val();

            let url =
                "{{ route('getLevelsByTrack', ['trackId' => ':trackId']) }}".replace(':trackId', trackId);

            $.ajax({
                url: url,
                type: 'GET',
                success: function(response) {
                    $('#track_level_id').html(
                        '<option value="">Select Level</option>'); // Clear and set default
                    if (response.levels.length > 0) {
                        response.levels.forEach(level => {
                            $('#track_level_id').append(
                                `<option value="${level.id}">${ level.name_en}</option>`
                            );
                        });
                    } else {
                        $('#track_level_id').append(
                            '<option value="">No levels available</option>');
                    }

                }
            });

            buildLoadSLots();

        });
        // $('#staff_id').on('change', function () {
        //     let staffId = $(this).val();
        //     let nextSatffSelect = $('#next_staff_id');
        //     nextSatffSelect.empty().append('<option value="">Select Staff</option>');
        //     if (staffId) {
        //         let allStaff = @json($staffs);
        //         let selectedStaff = allStaff.find(s => s.id == staffId);
        //         if (selectedStaff && selectedStaff.staff) {
        //             $.each(selectedStaff.staff, function (index, staff) {
        //                 nextSatffSelect.append(
        //                     '<option value="' + staff.id + '">' +staff.first_name + ' ' + staff.last_name +'</option>'
        //                 );
        //             });
        //         }
        //     }
        //     buildLoadSLots();
        // });
        $('#staff_id').on('change', function () {
            let staffId = $(this).val();
            let nextStaffSelect = $('#next_staff_id');

            nextStaffSelect.empty().append('<option value="">Select Staff</option>');

            if (staffId) {
                $.ajax({
                    url: "{{ route('getAdmins') }}",
                    type: "GET",
                    data: { staff_id: staffId },
                    success: function (response) {
                        if (response && response.length > 0) {
                            $.each(response, function (index, staff) {
                                nextStaffSelect.append(`<option value="${staff.id}">${staff.first_name} ${staff.last_name}</option>`);
                            });
                        } else {
                            nextStaffSelect.append('<option disabled>No staff found</option>');
                        }

                        buildLoadSLots();
                    },
                    error: function (xhr) {
                        console.error(xhr.responseText);
                        toastr.error('Failed to load staff. Please try again.');
                    }
                });
            } else {
                buildLoadSLots();
            }
        });





        $('#next_staff_id').on('change', function () {
            buildLoadSLots();
        });
        $('#start_time, #end_time').on('input', function() {
            buildLoadSLots();
        });

        $('#track_level_id').on('change', function() {
            let trackLevelId = $(this).val();
            let url =
                "{{ route('getSessionsByLevel', ['trackLevelId' => ':trackLevelId']) }}".replace(':trackLevelId',
                    trackLevelId);

            $.ajax({
                url: url,
                type: 'GET',
                success: function(response) {
                    $('#track_level_session_id').html(
                        '<option value="">Select Session</option>'); // Clear and set default
                    if (response.sessions.length > 0) {
                        response.sessions.forEach(session => {
                            $('#track_level_session_id').append(
                                `<option value="${session.id}" data-session='${JSON.stringify(session)}'>${ session.name_en}</option>`

                            );
                        });
                    } else {
                        $('#track_level_session_id').append(
                            '<option value="">No levels available</option>');
                    }

                }
            });

            buildLoadSLots();

        });
        $('#track_level_session_id').on('change', function() {
            let sessionDataElement = $(this).find(':selected');
            // Check if the selected option has a 'data-session' attribute
            if (sessionDataElement.data('session')) {
                let sessionData = sessionDataElement.data('session');

                if (sessionData && sessionData.scheduled_sessions.length > 0) {
                    let schedules = sessionData.scheduled_sessions;

                    schedules.sort((a, b) => new Date(a.session_date) - new Date(b.session_date));

                    let startDate = schedules[0].session_date.split('T')[0];
                    let endDate = schedules[schedules.length - 1].session_date.split('T')[0];

                    $('#start_date').val(startDate);
                    $('#end_date').val(endDate);
                    $('#date_range').val(startDate + ' to ' + endDate);
                }
            } else {
                // If 'Select Session' is chosen, clear the dates
                const today = moment().format('YYYY-MM-DD');
                const sevenDays = moment().add(6, 'days').format('YYYY-MM-DD');
                $('#start_date').val(today);
                $('#end_date').val(sevenDays);
                $('#date_range').val(today);
            }


            buildLoadSLots();
        });


        $(function() {
            $('#date_range').flatpickr({
                mode: "range",
                dateFormat: "Y-m-d",
                defaultDate: [moment().format('YYYY-MM-DD'), moment().add(4, 'days').format(
                    'YYYY-MM-DD')], // Default to 5 days, similar to the image

                minDate: "today",
                onChange: function(selectedDates, dateStr, instance) {
                    if (selectedDates.length === 2) {
                        let start = moment(selectedDates[0]).format('YYYY-MM-DD');
                        let end = moment(selectedDates[1]).format('YYYY-MM-DD');

                        $('#start_date').val(start);
                        $('#end_date').val(end);
                        // The flatpickr range format is 'start to end', use that for display
                        $('#date_range').val(dateStr);

                        buildLoadSLots();
                    }
                }
            });

            const today = moment().format('YYYY-MM-DD');
            const fiveDays = moment().add(4, 'days').format('YYYY-MM-DD'); // Default to 5 days: Sun to Thu
            $('#start_date').val(today);
            $('#end_date').val(fiveDays);
            $('#date_range').val(today + " to " + fiveDays); // Set initial display to a range
        });
        let currentDate = moment();

        // This date navigation logic needs to be aware of the 'range' mode
        function updateDateRange(start, end) {
            $('#start_date').val(start.format('YYYY-MM-DD'));
            $('#end_date').val(end.format('YYYY-MM-DD'));
            $('#date_range').val(start.format('YYYY-MM-DD') + " to " + end.format('YYYY-MM-DD'));
            buildLoadSLots();
        }

        // Get the current range in days
        function getCurrentRangeDays() {
            let start = moment($('#start_date').val());
            let end = moment($('#end_date').val());
            if (start.isValid() && end.isValid()) {
                return end.diff(start, 'days');
            }
            return 4; // Default to 5 days total (Sun to Thu is 4 days difference)
        }

        function togglePrevButton() {
            let start = moment($('#start_date').val());
            if (start.isSameOrBefore(moment(), 'day')) {
                $('#prev_date').prop('disabled', true);
            } else {
                $('#prev_date').prop('disabled', false);
            }
        }
        togglePrevButton();

        $('#prev_date').on('click', function() {
            let range = getCurrentRangeDays() + 1; // Number of days in the range
            let start = moment($('#start_date').val()).subtract(range, 'days');
            let end = moment($('#end_date').val()).subtract(range, 'days');
            updateDateRange(start, end);
            togglePrevButton();
        });
        $('#next_date').on('click', function() {
            let range = getCurrentRangeDays() + 1; // Number of days in the range
            let start = moment($('#start_date').val()).add(range, 'days');
            let end = moment($('#end_date').val()).add(range, 'days');
            updateDateRange(start, end);
            togglePrevButton();
        });
        $(document).ready(function() {
            buildLoadSLots();
        });

        function loadSlots() {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: '{{ route('getAllSessions') }}',
                    type: 'GET',
                    data: {
                        start_date: $('#start_date').val() ?? null,
                        end_date: $('#end_date').val() ?? null,
                        track_type_id: $('#track_type_id').val() ?? null,
                        track_id: $('#track_id').val() ?? null,
                        track_level_id: $('#track_level_id').val() ?? null,
                        track_level_session_id: $('#track_level_session_id').val() ?? null,
                        staff_id: $('#staff_id').val() ?? null,
                        next_staff_id: $('#next_staff_id').val() ?? null,
                        start_time: $('#start_time').val() ?? null,
                        end_time: $('#end_time').val() ?? null,
                    },
                    success: function(res) {
                        resolve(res);
                    },
                    error: function(err) {
                        console.log("Error", err);
                        reject(err);
                    }
                });
            });
        }
        async function buildLoadSLots() {
            $('#loader').show();
            $('#content-wrap').hide();

            try {
                const res = await loadSlots();
                if (res.success) {
                    buildSlotsTable(res.data);
                    $('#content-wrap').show();
                } else {
                    console.log("Res", res);
                    toastr.error('Something went wrong!');
                }
            } catch (err) {
                toastr.error('Failed to load slots.');
            } finally {
                $('#loader').hide();
            }
        }

        function getSlotColorClass(trackTypeName) {
            if (!trackTypeName) return 'color-white';

            const name = trackTypeName.toLowerCase();
            // Assign colors based on typical track names or a simplified lookup
            if (name.includes('group') || name.includes('standard')) {
                return 'color-green';
            } else if (name.includes('private') || name.includes('one-to-one')) {
                return 'color-red';
            } else if (name.includes('track')) {
                return 'color-blue';
            }
            return 'color-white';
        }

        function escapeAttr(value) {
            return String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/"/g, '&quot;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;');
        }

        function buildSlotsTable(data) {
            let headerCells = ''; // MODIFIED: This now holds only the day TH tags
            let allStaffs = [];

            // Clear previous day headers (but leave the Staff column)
            $('#schedule-header-row th:not(.staff-header-col)').remove();

            // 1. Collect all unique days and all unique staffs
            data.forEach(day => {
                // Day Header (Thu 02, Wed 01, etc.)
                const dayName = day.day_name.substring(0, 3);
                const dateNum = moment(day.date).format('DD');

                // Add the day TH cell to headerCells string
                headerCells +=
                    `<th class="text-center day-header-separator"><div class="fw-semibold">${dayName} ${dateNum}</div><div class="small">${day.date}</div></th>`;

                day.staffs.forEach(staff => {
                    if (!allStaffs.find(s => s.staff_id === staff.staff_id)) {
                        allStaffs.push({
                            staff_id: staff.staff_id,
                            staff_name: staff.staff_name || 'N/A',
                            teacher_type_label: staff.teacher_type_label || 'Native-like'
                        });
                    }
                });
            });

            // 2. Insert the generated day header cells next to the fixed Staff header
            $('#schedule-header-row').append(headerCells);

            // 3. Build the table body
            let bodyHtml = '';

            if (allStaffs.length === 0) {
                // The colspan must be the number of days + 1 (for the staff column)
                const colspan = data.length + 1;
                bodyHtml =
                    `<tr><td class="text-center py-5" colspan="${colspan}"><div class="text-muted">No available Staff or schedule data for the selected period.</div></td></tr>`;
            } else {
                // Sort staffs by name for a consistent look
                allStaffs.sort((a, b) => a.staff_name.localeCompare(b.staff_name));

                allStaffs.forEach(staff => {
                    bodyHtml += `<tr>`;
                    let hrUrl = "{{ config('app.HR_URL') }}staffs/" + staff.staff_id;
                    // First column: Staff/staff Name (Sticky)
                    bodyHtml += `<td class="staff-name-col"><a href="${hrUrl}" target="_blank" class="fw-bold" style="text-decoration: none;">${staff.staff_name}</a> <span class="badge bg-light text-dark">${staff.teacher_type_label}</span></td>`;

                    // Subsequent columns: Schedule Slots for each day
                    data.forEach(day => {
                        // Find schedule data for this specific staff on this specific day
                        let staffDayData = day.staffs.filter(s => s.staff_id === staff.staff_id);

                        let dayContentHtml = '';

                        if (staffDayData.length) {
                            dayContentHtml += '<div class="time-slot-container">';

                            staffDayData.forEach(sd => {
                                // Iterate through all time slots for this staff on this day
                                sd.times.forEach(time => {
                                    let extraInfo = '';
                                    let trackTypeName = sd.staff_scheduled?.track_type?.name;
                                    let trackTypeId = sd.staff_scheduled?.track_type?.id;
                                    let trackLevelName = sd.staff_scheduled?.track_level?.name_en;
                                    let student_name = sd.staff_scheduled?.courseStudent?.student;
                                    let staffScheduleId = sd.staff_scheduled?.id;

                                    let adminName  =  sd.staff_scheduled.adminName[0];
                                    let adminId  =  sd.staff_scheduled.adminId[0];
                                    let colorClass = getSlotColorClass(trackTypeName);
                                    let studentId = student_name?.id ?? '';
                                    let retentionUrl = "{{ config('app.Retention_URL') }}";
                                    let hrUrl = "{{ config('app.HR_URL') }}staffs/";

                                    // Create the extra info line based on type (Private vs Group/Track)
                                    if (trackTypeName?.toLowerCase() === 'private') {
                                        let fullStudentName = (student_name?.first_name ||'') + ' ' + (student_name?.last_name || '');
                                        extraInfo = `
                                                            <div class="slot-detail"><a href='${retentionUrl}students/${studentId}'>${fullStudentName.trim() || 'Private Session'}</a></div>
                                                            <div class="slot-detail">${trackLevelName || 'N/A Level'}</div>
                                                   <a href='${hrUrl}${adminId}'><div class="slot-detail">admin :   ${ adminName || 'N/A'}</div></a>

                                                        `;
                                    } else {
                                        // Use Track Type and Level for Group sessions
                                        extraInfo = `
                                                            <div class="slot-detail"><a href='${retentionUrl}students?staffScheduleId=${staffScheduleId}'>${trackTypeName || 'Group'}</a></div>
                                                            <div class="slot-detail">${trackLevelName || 'N/A Level'}</div>
                                                            <a href='${hrUrl}${adminId}'><div class="slot-detail">admin :   ${ adminName || 'N/A'}</div></a>


                                                        `;
                                    }

                                    // The slot-card structure mimics the blocks in the image
                                    const formattedTime = time.start_time ? time.start_time
                                        .substring(0, 5) : '';
                                    const rawMeetingUrl = time.bbb_join_url || time.meeting_url || '';
                                    const meetingUrl = rawMeetingUrl ? escapeAttr(rawMeetingUrl) : '';
                                    const joinLink = meetingUrl
                                        ? `<a href="${meetingUrl}" target="_blank" class="btn btn-sm btn-outline-success mt-1" title="Join">Join</a>`
                                        : '';

                                    dayContentHtml += `<div class="slot-card ${colorClass}">
                                                        <div class="slot-time">${formattedTime}</div>
                                                        ${extraInfo}
                                                        ${joinLink}
                                                    </div>`;

                                });
                            });
                            dayContentHtml += '</div>';

                            bodyHtml +=
                                `<td class="text-center">${dayContentHtml}</td>`;
                        } else {
                            // Empty cell for days with no schedule for this staff
                            bodyHtml += '<td><span class="text-center text-muted small">-</span></td>';
                        }
                    });

                    bodyHtml += `</tr>`;
                });
            }

            $('#slots-body').html(bodyHtml);
        }
    </script>
@endpush