@extends('layout.layout')

@section('content')
    @if (optional(optional(Auth::user()->staff)->department)->slug != 'academy')
        <div class="text-center fw-bold fs-5 mt-3">
            <strong>Notice:</strong> You have access outside the Academy department.
        </div>
    @else
        <div class="container-fluid">
            <section class="mb-3">
                <div class="card shadow-sm">
                    <div class="card-header d-flex justify-content-between align-items-center py-2">
                        <div class="d-flex align-items-center gap-2">
                            <iconify-icon icon="mdi:filter-variant" class="me-1" style="color:#405893;"></iconify-icon>
                            <span class="fw-semibold">Schedule Filters</span>
                        </div>
                        <button type="button" id="clearFilters"
                            class="btn btn-outline-danger btn-sm d-flex align-items-center gap-2">
                            <iconify-icon icon="mdi:broom" style="font-size:14px"></iconify-icon>
                            <span>Clear</span>
                        </button>
                    </div>
                    <div class="card-body">
                        <form>
                            <div class="row">
                                <div class="col-md-4 mt-3">
                                    @if (in_array(optional(optional(Auth::user()->staff)->jobTitle)->slug, ['supervisor', 'academic-admin']))
                                        <label for="staff_id" class="form-label">Teachers </label>
                                    @else
                                        <label for="staff_id" class="form-label">Staffs </label>
                                    @endif
                                    <select class="form-select form-select-sm " id="staff_id" name="staff_id" required>
                                        @if (in_array(optional(optional(Auth::user()->staff)->jobTitle)->slug, ['supervisor', 'academic-admin']))
                                            {{-- <option value="">Select Teacher</option> --}}
                                        @else
                                            <option value="">Select Staffs</option>
                                        @endif
                                        @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-4 mt-3">
                                        <label for="teacher_id" class="form-label">Teachers</label>
                                        <select class="form-select  general-select" multiple id="teacher_id" name="teacher_id"
                                            required>
                                            {{-- <option value="">Select Teacher</option> --}}
                                        </select>
                                        @error('teacher_id')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                @endif
                                <div class="col-md-4 mt-3">
                                    <label for="category_id" class="form-label">Programs </label>
                                    <select class="form-select form-select-sm " id="category_id" name="category_id" required>
                                        <option value="">Select Program</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-4 mt-3">
                                    <label for="track_type_id" class="form-label">Session 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-4 mt-3">
                                    <label for="track_id" class="form-label">Tracks </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-4 mt-3">
                                    <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-4 mt-5">
                                    <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-4 mt-3">
                                    <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>

                                {{-- New End Time Filter --}}
                                <div class="col-md-4 mt-3">
                                    <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 class="col-md-4 mt-3">
                                    <label for="student_name" class="form-label">Student Name</label>
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text px-3">
                                            <iconify-icon icon="mdi:account-search-outline"
                                                style="color: #405893;"></iconify-icon>
                                        </span>
                                        <input type="text" class="form-control" id="student_name" name="student_name"
                                            placeholder="Search by student name">
                                    </div>
                                </div>

                            </div>
                        </form>

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

        <div style="overflow: auto;" class="mt-3">
            <div id="content-wrap">
                <div class="tab-content">
                    <div class="">
                        {{-- ENHANCED TABLE STRUCTURE --}}
                        <table
                            class="table table-bordered table-striped table-hover align-top text-center table-enhanced-schedule sm-table mb-0">
                            <thead>
                                <tr class="text-center" id="schedule-header-row">
                                    <th class="staff-header-col">Staff / Teacher</th>
                                    {{-- Day headers will be inserted here by JavaScript --}}
                                </tr>
                            </thead>
                            <tbody id="slots-body"></tbody>
                        </table>
                    </div>
                </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>
    @endif

@endsection

@push('styles')
    <style>
        /* General Loader and Table Styles */
        #loader {
            position: absolute;
            inset: 0;
        }


        @media (min-width: 577px) and (max-width: 1676px) {

            .select2-container,
            .select2-selection--multiple {
                width: 300px !important;
            }
        }

        @media (min-width: 1677px) and (max-width: 1683px) {

            .select2-container,
            .select2-selection--multiple {
                width: 250px !important;
            }
        }

        @media (min-width: 1684px) and (max-width: 1879px) {

            .select2-container,
            .select2-selection--multiple {
                width: 400px !important;
            }
        }

        @media (min-width: 1880px) {

            .select2-container,
            .select2-selection--multiple {
                width: 467px !important;
            }
        }


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

        .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;
        }


        /* Enhanced Schedule Table Styles */
        .table-enhanced-schedule {
            /* Ensure fixed width for schedule components */
            table-layout: fixed;
            width: 100%;
            min-width: 800px;
            /* Adjust as necessary for scroll */
        }

        /* Staff/Teacher Column Header */
        .table-enhanced-schedule thead th.staff-header-col {
            background-color: #d4d4d4 !important;
            color: #000000 !important;

            position: sticky;
            left: 0;
            z-index: 3;
            /* Above other headers */
            min-width: 150px;
            /* Fixed width for staff column */
            max-width: 150px;
            text-align: center;
            padding-left: 1rem;
            vertical-align: middle
        }

        /* Staff/Teacher Name Cell in Body */
        .table-enhanced-schedule tbody td.staff-name-col {
            position: sticky;
            left: 0;
            z-index: 1;
            /* Below header */
            background-color: #f8f9fa;
            /* Light background to distinguish */
            font-weight: 600;
            text-align: left;
            padding-left: 1rem;
            min-width: 150px;
            max-width: 150px;

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

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

        /* Class for the day headers to ensure border/space on the right */
        .table-enhanced-schedule thead th.day-header-separator {
            /* Add a white border to the right of each day header for visual separation */
            border-right: 2px solid #ffffff !important;
        }

        /* Remove the right border from the last TH if desired */
        .table-enhanced-schedule thead th:last-child {
            border-right: none !important;
        }


        /* Content Cells */
        .table-enhanced-schedule tbody tr td:not(.staff-name-col) {
            /* The main cells for schedule content */
            padding: 0;
            vertical-align: top;
            /* Important for stacked time slots */
            min-width: 150px;
            max-width: 150px;
            height: 100%;
            /* Ensure cell takes full height */
        }

        /* Time Slot Container (replaces table_btn) */
        .time-slot-container {
            /* Container for all slots in a single day/staff cell */
            display: flex;
            flex-direction: column;
            gap: 2px;
            /* Small gap between slots */
            padding: 5px;
            /* Padding inside the cell */
            height: 100%;
        }

        /* Individual Time Slot Card (Mimics the colored blocks) */
        .slot-card {
            padding: 6px 8px;
            border-radius: 4px;
            color: #1f2d3d;
            /* Dark text for readability */
            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;
        }

        /* Color classes for slots (based on image colors) */
        .slot-card.color-white {
            background-color: #f7f7f7;
            /* Very light gray/white */
            color: #212529;
            /* Dark text */
            border: 1px solid #dee2e6;
        }

        .slot-card.color-green {
            background-color: #d4edda;
            /* Light Green */
            color: #155724;
            /* Dark Green text */
        }

        .slot-card.color-blue {
            background-color: #cce5ff;
            /* Light Blue */
            color: #004085;
            /* Dark Blue text */
        }




        /* Small text for group/level info */
        .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 Track</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('');
            $('#student_name').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 Track</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 tracks 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 teacherSelect = $('#teacher_id');
            if (staffId) {
                let allStaff = @json($staffs);
                let selectedStaff = allStaff.find(s => s.id == staffId);
                
                teacherSelect.empty().append('<option value="">Select Teacher</option>');
                if (selectedStaff && selectedStaff.staff) {
                    $.each(selectedStaff.staff, function (index, teacher) {
                        teacherSelect.append(
                            '<option value="' + teacher.id + '">' +
                            teacher.first_name + ' ' + teacher.last_name +
                            '</option>'
                        );
                    });
                }
            }
            buildLoadSLots();
        });
        $('#teacher_id').on('change', function () {
            buildLoadSLots();
        });
        $('#start_time, #end_time').on('input', function () {
            buildLoadSLots();
        });

        $('#student_name').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,
                        teacher_id: $('#teacher_id').val() ?? null,
                        start_time: $('#start_time').val() ?? null,
                        end_time: $('#end_time').val() ?? null,
                        student_name: $('#student_name').val() ?? null,
                    },
                    success: function (res) {
                        resolve(res);
                    },
                    error: function (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 {
                    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 buildSlotsTable(data) {
            let headerCells = ''; // MODIFIED: This now holds only the day TH tags
            let allStaffs = [];

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

            // 1. Collect all unique days and all unique staffs/teachers
            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,
                            teacher_name: staff.staff_name || 'N/A Teacher'
                        });
                    }
                });
            });

            // 2. Insert the generated day header cells next to the fixed Staff/Teacher 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 Teachers or schedule data for the selected period.</div></td></tr>`;
            } else {
                // Sort staffs by name for a consistent look
                allStaffs.sort((a, b) => a.teacher_name.localeCompare(b.teacher_name));
                allStaffs.forEach(staff => {
                    bodyHtml += `<tr>`;
                    // First column: Staff/Teacher Name (Sticky)
                    bodyHtml += `<td class="staff-name-col">${staff.teacher_name}</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 staffScheduleId = sd.staff_scheduled?.id;
                                    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 colorClass = getSlotColorClass(trackTypeName);
                                    let studentId = student_name?.id ?? '';
                                    let retentionUrl = "{{ config('app.Retention_URL') }}";
                                    // 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>
                                                        `;
                                    } 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>
                                                            `;
                                    }
                                    // The slot-card structure mimics the blocks in the image
                                    const formattedTime = time.start_time ? time.start_time
                                        .substring(0, 5) : '';

                                    dayContentHtml += `<div class="slot-card ${colorClass}">
                                                        <div class="slot-time">${formattedTime}</div>
                                                        ${extraInfo}
                                                    </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