@extends('layout.layout')

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

    @php
        $pageTitle = request('course_id') ? 'Course Sessions' : 'All Sessions';
        $pageDescription = request('course_id')
            ? 'Review and manage the sessions linked to the selected course.'
            : 'Review today\'s sessions, check the upcoming queue, and handle feedback or urgent actions quickly.';
        $showAdminFilter =
            (Auth::user()->jobTitle && Auth::user()->jobTitle->slug != 'admin') || Auth::user()->hasRole('Super admin');
        $isTrackSelected = request('schedule_type') === 'track';
        $isCourseSelected = request('schedule_type') === 'course';
        $hideCourseFilters = request('course_id');
    @endphp

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-3">
                <x-page-title :title="$pageTitle" :description="$pageDescription">
                    @if (request('course_id'))
                        <a href="{{ route('courses.index') }}" class="asset-btn asset-btn--secondary">
                            Back to Courses
                        </a>
                    @endif
                </x-page-title>

                {{-- @unless (request('course_id')) --}}
                {{-- <div class="ui-card ui-card--table p-3">
                        <div class="d-flex align-items-center gap-3 flex-wrap">
                            <div style="margin-right: auto;">
                                <h6 class="mb-0 ui-title">Filters</h6>
                                <x-table-controls :action="route('sessions')" date formId="sessions-filter-form" startDateName="from"
                                    endDateName="to" searchPlaceholder="Student, teacher, supervisor, program...">
                                </x-table-controls>
                            </div>
                        </div>
                    @endunless --}}

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header d-flex align-items-center justify-content-between gap-3 flex-wrap">
                        <div>
                            <h6 class="mb-0 ui-title">Today's Sessions</h6>
                        </div>
                        <x-table-controls :action="route('sessions')" date formId="sessions-filter-form" startDateName="from"
                            endDateName="to" searchName="search" searchPlaceholder="Student, teacher..."
                            :export="true" :exportRoute="route('sessions.export')" :saveRoute="route('sessions.saveFilteredTable')" />


                    </div>

                    <x-table :headers="[
                        'ID',
                        'Session',
                        'Student',
                        'Retention Admin',
                        'Team Leader',
                        'Teacher',
                        'Teacher Media',
                        'Supervisor',
                        'Program/Product',
                        'Level',
                        'Date',
                        'Time',
                        'White Board Upload',
                        'Group/Private',
                        'Actions',
                    ]" :paginator="$todayCourses" emptyMessage="No sessions scheduled for today.">
                        @foreach ($todayCourses as $course)
                            @php
                                $scheduled = $course->staffScheduled;
                                $teacher = sessionTeacher($course, $scheduled);
                                $manager = $teacher->manager ?? null;
                                $feedback = $feedbacksBySession->get($course->id);
                                $teacherName = staffDisplayName($teacher);
                                $teacherAvailability = $teacher && $course->session_date
                                    ? $teacher->getAvailabilityStatusForDate($course->session_date, false)
                                    : ['type' => null, 'label' => null];
                                $teacherAvailabilityType = $teacherAvailability['type'] ?? null;
                                $teacherAvailabilityLabel = match ($teacherAvailabilityType) {
                                    'leave' => 'Leave Session',
                                    'holiday' => 'Holiday Session',
                                    default => null,
                                };
                                $managerName = staffDisplayName($manager);
                                $trackOrProduct =
                                    $scheduled->schedule_type === 'track'
                                        ? $scheduled->track->name_en ?? 'N/A'
                                        : $scheduled->academyProduct->name_en ?? 'N/A';
                                $levelLabel = $scheduled->trackLevel->name_en ?? '-';
                                $groupLabel = $scheduled->trackType->name ?? 'N/A';
                                $groupPill = $scheduled->trackType?->name === 'Group' ? 'success' : 'warn';
                                $joinUrl = $scheduled->hasPaidStudentInvoice()
                                    ? route('courses.sessions.bbb.join', ['course' => $scheduled->id, 'session' => $course->id])
                                    : null;
                                $courseStudents = $scheduled->courseStudent;
                                $studentCount = $courseStudents->count();
                                $firstStudentId = $studentCount > 0 ? $courseStudents->first()->student_id : null;
                                $studentNoShowUrgents = $course->urgents->filter(
                                    fn($urgent) => $urgent->message === "Student Didn't Show-Up",
                                );
                                $reportedStudentIds = $studentNoShowUrgents
                                    ->pluck('student_id')
                                    ->filter()
                                    ->map(fn($id) => (int) $id)
                                    ->all();
                                $availableStudents = $courseStudents
                                    ->filter(
                                        fn($courseStudent) => !in_array(
                                            (int) $courseStudent->student_id,
                                            $reportedStudentIds,
                                            true,
                                        ),
                                    )
                                    ->values();
                                $remainingStudentCount = $availableStudents->count();
                                $singleStudentNoShowSent = $studentCount === 1 && $remainingStudentCount === 0;
                                $isFinalTrackSession =
                                    $scheduled->schedule_type === 'track' &&
                                    (int) $course->session_number ===
                                        (int) ($scheduled->session ?? $course->session_number);
                                $existingSubSession = $course->subSessions->first();
                                $subSessionTypeLabel = match ($existingSubSession?->type) {
                                    'extra_session' => 'Extra Session',
                                    'gift_call' => 'Gift Call',
                                    'cover_up' => 'Cover Up',
                                    default => null,
                                };
                                $primaryAssignment = $scheduled->courseAdmins->first();
                                $adminStaff = $primaryAssignment?->admin?->staff;
                                $teamLeader = $adminStaff?->manager;
                                $adminName = $primaryAssignment
                                    ? ($primaryAssignment->admin?->full_name ?:
                                    trim(($adminStaff?->first_name ?? '') . ' ' . ($adminStaff?->last_name ?? '')))
                                    : 'N/A';
                                $teamLeaderName = $teamLeader
                                    ? ($teamLeader->full_name ?:
                                    trim(($teamLeader->first_name ?? '') . ' ' . ($teamLeader->last_name ?? '')))
                                    : 'N/A';
                            @endphp

                            <tr>
                                <td class="ui-id text-center">
                                    <a href="{{ $course->session_url }}">
                                        {{ $course->id }}
                                    </a>
                                    <div class="mt-1">
                                        <a href="{{ $course->course_url }}" class="ui-muted small">
                                            Course #{{ $course->staff_scheduled_id }}
                                        </a>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <span class="ui-pill ui-pill--neutral">Session
                                        {{ $course->session_number }}</span>
                                    @if ($subSessionTypeLabel)
                                        <div class="mt-1">
                                            <span class="ui-pill ui-pill--info">Sub Session:
                                                {{ $subSessionTypeLabel }}</span>
                                        </div>
                                    @endif
                                </td>
                                <td class="text-center ui-muted">
                                    <div class="live-session-list">
                                        @foreach ($courseStudents as $student)
                                            <a href="{{ route('students.show', $student->student_id) }}" target="_blank"
                                                class="live-session-link">
                                                {{ $student->student->first_name }}
                                                {{ $student->student->last_name }}
                                            </a>
                                        @endforeach
                                    </div>
                                </td>
                                <td class="text-center ui-muted">
                                    @if ($primaryAssignment && $adminStaff)
                                        <a href="{{ config('app.HR_URL') . 'staffs/' . ($adminStaff->id ?? '#') }}">
                                            {{ $adminName ?: 'N/A' }}
                                        </a>
                                    @else
                                        <span class="ui-muted">N/A</span>
                                    @endif
                                </td>
                                <td class="text-center ui-muted">
                                    @if ($primaryAssignment && $teamLeader)
                                        <a href="{{ config('app.HR_URL') . 'staffs/' . ($teamLeader->id ?? '#') }}">

                                            {{ $teamLeaderName ?: 'N/A' }}
                                        </a>
                                    @else
                                        <span class="ui-muted">N/A</span>
                                    @endif
                                </td>
                                <td class="text-center ui-muted">
                                    <span class="live-session-link">
                                        <a href="{{ config('app.HR_URL') . 'staffs/' . ($teacher->id ?? '#') }}">
                                            {{ $teacherName }}
                                        </a>
                                    </span>
                                    @if ($teacherAvailabilityLabel)
                                        <div class="mt-1">
                                            <span class="badge bg-danger text-white">
                                                {{ $teacherAvailabilityLabel }}
                                            </span>
                                        </div>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <x-bbb-teacher-media-status :session="$course" :teacher="$teacher" />
                                </td>
                                <td class="text-center ui-muted">
                                    <span class="live-session-link">
                                        <a href="{{ config('app.HR_URL') . 'staffs/' . ($teacher->manager_id ?? '#') }}">
                                            {{ $managerName }}
                                        </a>
                                    </span>
                                </td>
                                <td class="text-center">
                                    <span class="ui-pill ui-pill--info">{{ $trackOrProduct }}</span>
                                </td>
                                <td class="text-center ui-muted">{{ $levelLabel }}</td>
                                <td class="text-center">
                                    <span class="ui-pill ui-pill--neutral">{{ $course->session_date }}</span>
                                </td>
                                <td class="text-center">
                                    <span
                                        class="ui-pill ui-pill--neutral">{{ \Carbon\Carbon::parse($course->start_time)->format('h:i A') }}</span>
                                </td>
                                <td class="text-center">
                                    <x-whiteboard-upload-countdown :session="$course" />
                                </td>
                                <td class="text-center">
                                    <span class="ui-pill ui-pill--{{ $groupPill }}">{{ $groupLabel }}</span>
                                </td>
                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="live-session-actions">
                                        @if (!$feedback)
                                            <a href="{{ route('feedback.add', ['session_id' => $course->id, 'staff_id' => $teacher?->id]) }}"
                                                class="btn btn-outline-primary btn-sm radius-8" title="Add Feedback">
                                                <iconify-icon icon="mdi:comment-plus-outline"
                                                    class="text-lg"></iconify-icon>
                                            </a>
                                        @else
                                            <button type="button" class="btn btn-outline-secondary btn-sm radius-8"
                                                title="View Feedback" data-bs-toggle="modal"
                                                data-bs-target="#feedbackModal{{ $course->id }}">
                                                <iconify-icon icon="mdi:comment-text-outline"
                                                    class="text-lg"></iconify-icon>
                                            </button>

                                            <div class="modal fade" id="feedbackModal{{ $course->id }}" tabindex="-1"
                                                aria-labelledby="feedbackModalLabel{{ $course->id }}" aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered modal-lg">
                                                    <div class="modal-content feedback-modal">
                                                        <div class="modal-header feedback-modal__header">
                                                            <div>
                                                                <div class="feedback-modal__eyebrow">Session
                                                                    feedback</div>
                                                                <div class="modal-title feedback-modal__title"
                                                                    id="feedbackModalLabel{{ $course->id }}">
                                                                    Submitted Feedback</div>
                                                                <div class="feedback-modal__meta">
                                                                    Session {{ $course->session_number }} -
                                                                    {{ \Carbon\Carbon::parse($feedback->created_at)->format('d M Y - h:i A') }}
                                                                </div>
                                                            </div>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                        </div>

                                                        <div class="modal-body feedback-modal__body">
                                                            <div class="feedback-modal__grid">
                                                                <div class="feedback-modal__panel">
                                                                    <div class="feedback-modal__section-title">
                                                                        Session details</div>
                                                                    <div class="feedback-modal__detail-list">
                                                                        <div class="feedback-modal__detail-item">
                                                                            <span
                                                                                class="feedback-modal__detail-label">Teacher</span>
                                                                            <strong class="feedback-modal__detail-value">
                                                                                <a
                                                                                    href="{{ config('app.HR_URL') . 'staffs/' . ($teacher->id ?? '#') }}">
                                                                                    {{ $teacherName }}
                                                                                </a>
                                                                            </strong>
                                                                        </div>
                                                                        <div class="feedback-modal__detail-item">
                                                                            <span
                                                                                class="feedback-modal__detail-label">Supervisor</span>
                                                                            <strong class="feedback-modal__detail-value">
                                                                                <a
                                                                                    href="{{ config('app.HR_URL') . 'staffs/' . ($teacher->manager_id ?? '#') }}">
                                                                                    {{ $managerName }}
                                                                                </a>
                                                                            </strong>
                                                                        </div>
                                                                        <div class="feedback-modal__detail-item">
                                                                            <span class="feedback-modal__detail-label">Program
                                                                                / Product</span>
                                                                            <strong
                                                                                class="feedback-modal__detail-value">{{ $trackOrProduct }}</strong>
                                                                        </div>
                                                                        <div class="feedback-modal__detail-item">
                                                                            <span
                                                                                class="feedback-modal__detail-label">Level</span>
                                                                            <strong
                                                                                class="feedback-modal__detail-value">{{ $levelLabel }}</strong>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div
                                                                    class="feedback-modal__panel feedback-modal__panel--wide">
                                                                    <div class="feedback-modal__section-title">
                                                                        Reported issues</div>
                                                                    <div class="feedback-modal__issues">
                                                                        <span
                                                                            class="feedback-status-pill {{ $feedback->camera_off == 1 ? 'is-active' : '' }}">Camera
                                                                            Off</span>
                                                                        <span
                                                                            class="feedback-status-pill {{ $feedback->internet_not_stable == 1 ? 'is-active' : '' }}">Internet
                                                                            Not Stable</span>
                                                                        <span
                                                                            class="feedback-status-pill {{ $feedback->class_room_not_suitable == 1 ? 'is-active' : '' }}">Class
                                                                            Room Not Suitable</span>
                                                                        <span
                                                                            class="feedback-status-pill {{ $feedback->on_spot_absence == 1 ? 'is-active' : '' }}">On
                                                                            Spot Absence</span>
                                                                        <span
                                                                            class="feedback-status-pill {{ $feedback->delay_in_start == 1 ? 'is-active' : '' }}">Delay
                                                                            in Start</span>
                                                                        <span
                                                                            class="feedback-status-pill {{ $feedback->virtual_background == 1 ? 'is-active' : '' }}">Virtual
                                                                            Background</span>
                                                                    </div>

                                                                    <div class="feedback-modal__note">
                                                                        <div class="feedback-modal__section-title">
                                                                            Admin comments</div>
                                                                        <p class="mb-0">
                                                                            {{ $feedback->admin_comments ?: 'No comments added for this feedback.' }}
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="modal-footer feedback-modal__footer">
                                                            <button type="button" class="asset-btn asset-btn--secondary"
                                                                data-bs-dismiss="modal">Close</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif

                                        @php
                                            $onSpotSent = $course->urgents->contains(
                                                fn($u) => str_contains($u->message ?? '', 'On-Spot Absence'),
                                            );
                                        @endphp

                                        <button type="button"
                                            class="btn btn-outline-warning btn-sm radius-8 on-spot-absence-btn"
                                            data-bs-toggle="modal" data-bs-target="#onSpotAbsenceModal"
                                            data-course-id="{{ $course->staff_scheduled_id }}"
                                            data-session-id="{{ $course->id }}"
                                            data-session-label="Session {{ $course->session_number }}"
                                            title="On Spot Absence" {{ $onSpotSent ? 'disabled' : '' }}>
                                            <iconify-icon icon="mdi:account-alert-outline" class="text-lg"></iconify-icon>
                                        </button>

                                        @if (filled($joinUrl))
                                            <a href="{{ $joinUrl }}" target="_blank"
                                                class="btn btn-outline-success btn-sm radius-8" title="Join">
                                                <iconify-icon icon="ri:video-add-line" class="text-lg"></iconify-icon>
                                            </a>
                                        @else
                                            <button type="button" class="btn btn-outline-secondary btn-sm radius-8"
                                                title="Join" disabled>
                                                <iconify-icon icon="ri:video-off-line" class="text-lg"></iconify-icon>
                                            </button>
                                        @endif

                                        @php
                                            $teacherNoShowSent = $course->urgents->contains(
                                                fn($u) => str_contains($u->message ?? '', "Teacher Didn't Show-Up"),
                                            );
                                        @endphp

                                        <button type="button"
                                            class="btn btn-outline-danger btn-sm radius-8 teacher-no-show-btn"
                                            title="Teacher Didn't Show-Up" data-bs-toggle="modal"
                                            data-bs-target="#teacherNoShowModal" data-session-id="{{ $course->id }}"
                                            data-course-id="{{ $course->staff_scheduled_id }}"
                                            data-student-id="{{ $firstStudentId }}"
                                            data-session-label="Session {{ $course->session_number }}"
                                            {{ $teacherNoShowSent ? 'disabled' : '' }}>
                                            <iconify-icon icon="mdi:account-off-outline" class="text-lg"></iconify-icon>
                                        </button>

                                        @if ($studentCount > 1)
                                            <button type="button"
                                                class="btn btn-outline-danger btn-sm radius-8 student-no-show-trigger"
                                                data-bs-toggle="modal"
                                                data-bs-target="#studentNoShowModal{{ $course->id }}"
                                                title="Student Didn't Show-Up"
                                                {{ $remainingStudentCount === 0 ? 'disabled' : '' }}>
                                                <iconify-icon icon="mdi:account-remove-outline"
                                                    class="text-lg"></iconify-icon>
                                            </button>

                                            <div class="modal fade" id="studentNoShowModal{{ $course->id }}"
                                                tabindex="-1"
                                                aria-labelledby="studentNoShowModalLabel{{ $course->id }}"
                                                aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <div class="modal-title"
                                                                id="studentNoShowModalLabel{{ $course->id }}">
                                                                Select Student</div>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <form action="{{ route('storeUrgent') }}" method="POST"
                                                            class="student-urgent-form"
                                                            data-session-date="{{ $course->session_date }}"
                                                            data-session-start="{{ $course->start_time }}"
                                                            data-session-end="{{ $course->end_time }}">
                                                            @csrf
                                                            <div class="modal-body text-start">
                                                                <input type="hidden" name="course_id"
                                                                    value="{{ $course->staff_scheduled_id }}">
                                                                <input type="hidden" name="session_id"
                                                                    value="{{ $course->id }}">
                                                                <input type="hidden" name="message"
                                                                    value="Student Didn't Show-Up">

                                                                @if ($remainingStudentCount > 0)
                                                                    <p class="mb-3">Please select the student(s)
                                                                        who didn&apos;t show up:</p>

                                                                    @foreach ($availableStudents as $cStudent)
                                                                        <div class="form-check mb-3">
                                                                            <input
                                                                                class="form-check-input student-urgent-checkbox"
                                                                                type="checkbox" name="student_ids[]"
                                                                                id="student{{ $course->id }}_{{ $cStudent->student_id }}"
                                                                                value="{{ $cStudent->student_id }}">
                                                                            <label class="form-check-label px-1"
                                                                                for="student{{ $course->id }}_{{ $cStudent->student_id }}">
                                                                                {{ $cStudent->student->first_name }}
                                                                                {{ $cStudent->student->last_name }}
                                                                            </label>
                                                                        </div>
                                                                    @endforeach

                                                                    <div class="mt-3 sub-session-type-wrapper d-none">
                                                                        @if ($scheduled->schedule_type === 'track')
                                                                            <div class="alert alert-info py-1 px-3 small">
                                                                                All students are selected. Choose
                                                                                the sub session type.
                                                                            </div>
                                                                            <label class="form-label fw-bold">Sub
                                                                                Session Type</label>
                                                                            <p class="text-muted small mb-3">When
                                                                                all students in this session are
                                                                                marked absent, the selected sub
                                                                                session type will be saved.</p>

                                                                            <div
                                                                                class="action-card-group action-card-group--compact">
                                                                                <div class="action-card">
                                                                                    <input
                                                                                        class="action-card__input sub-session-type-input"
                                                                                        type="radio"
                                                                                        name="sub_session_type"
                                                                                        id="studentSubExtra{{ $course->id }}"
                                                                                        value="extra_session">
                                                                                    <label class="action-card__label"
                                                                                        for="studentSubExtra{{ $course->id }}">
                                                                                        <div
                                                                                            class="action-card__icon bg-soft-info text-info">
                                                                                            <i
                                                                                                class="ri-calendar-event-line"></i>
                                                                                        </div>
                                                                                        <div class="action-card__info">
                                                                                            <span
                                                                                                class="action-card__title">Extra
                                                                                                Session</span>
                                                                                        </div>
                                                                                        <div class="action-card__radio">
                                                                                        </div>
                                                                                    </label>
                                                                                </div>

                                                                                <div class="action-card">
                                                                                    <input
                                                                                        class="action-card__input sub-session-type-input"
                                                                                        type="radio"
                                                                                        name="sub_session_type"
                                                                                        id="studentSubGift{{ $course->id }}"
                                                                                        value="gift_call">
                                                                                    <label class="action-card__label"
                                                                                        for="studentSubGift{{ $course->id }}">
                                                                                        <div
                                                                                            class="action-card__icon bg-soft-primary text-primary">
                                                                                            <i class="ri-gift-line"></i>
                                                                                        </div>
                                                                                        <div class="action-card__info">
                                                                                            <span
                                                                                                class="action-card__title">Gift
                                                                                                Call</span>
                                                                                        </div>
                                                                                        <div class="action-card__radio">
                                                                                        </div>
                                                                                    </label>
                                                                                </div>

                                                                                <div class="action-card">
                                                                                    <input
                                                                                        class="action-card__input sub-session-type-input"
                                                                                        type="radio"
                                                                                        name="sub_session_type"
                                                                                        id="studentSubCover{{ $course->id }}"
                                                                                        value="cover_up">
                                                                                    <label class="action-card__label"
                                                                                        for="studentSubCover{{ $course->id }}">
                                                                                        <div
                                                                                            class="action-card__icon bg-soft-success text-success">
                                                                                            <i
                                                                                                class="ri-shield-check-line"></i>
                                                                                        </div>
                                                                                        <div class="action-card__info">
                                                                                            <span
                                                                                                class="action-card__title">Cover
                                                                                                Up</span>
                                                                                        </div>
                                                                                        <div class="action-card__radio">
                                                                                        </div>
                                                                                    </label>
                                                                                </div>
                                                                            </div>

                                                                            <div
                                                                                class="mt-3 sub-session-students-wrapper d-none">
                                                                                <div
                                                                                    class="d-flex justify-content-between align-items-center mb-1">
                                                                                    <label
                                                                                        class="form-label fw-bold mb-0">Select
                                                                                        Students</label>
                                                                                    <span
                                                                                        class="badge bg-secondary sub-session-students-count">0
                                                                                        Selected</span>
                                                                                </div>
                                                                                <p
                                                                                    class="text-muted small mb-1 sub-session-students-hint">
                                                                                    Choose one or more students from
                                                                                    the system.</p>

                                                                                <div class="form-check mb-2">
                                                                                    <input
                                                                                        class="form-check-input sub-session-students-select-all"
                                                                                        type="checkbox"
                                                                                        id="selectAll_multi_{{ $course->id }}">
                                                                                    <label class="form-check-label fw-bold"
                                                                                        for="selectAll_multi_{{ $course->id }}">Select
                                                                                        All</label>
                                                                                </div>

                                                                                <input type="text"
                                                                                    class="form-control form-control-sm mb-1 sub-session-students-search"
                                                                                    placeholder="Search by name, code, or phone...">
                                                                                <div class="sub-session-students-list border rounded p-1"
                                                                                    style="max-height:200px;overflow-y:auto;">
                                                                                    @foreach ($students as $systemStudent)
                                                                                        <div class="form-check sub-session-student-item"
                                                                                            data-student-text="{{ strtolower(trim(($systemStudent->first_name ?? '') . ' ' . ($systemStudent->last_name ?? '') . ' ' . ($systemStudent->student_code ?? '') . ' ' . ($systemStudent->mobile ?? '') . ' ' . $systemStudent->id)) }}"
                                                                                            data-student-name="{{ $systemStudent->first_name }} {{ $systemStudent->last_name }}">
                                                                                            <input
                                                                                                class="form-check-input sub-session-students-select"
                                                                                                type="checkbox"
                                                                                                name="sub_session_student_ids[]"
                                                                                                id="subStudent_multi_{{ $course->id }}_{{ $systemStudent->id }}"
                                                                                                value="{{ $systemStudent->id }}">
                                                                                            <label class="form-check-label"
                                                                                                for="subStudent_multi_{{ $course->id }}_{{ $systemStudent->id }}">
                                                                                                {{ $systemStudent->first_name }}
                                                                                                {{ $systemStudent->last_name }}
                                                                                                — Code:
                                                                                                {{ $systemStudent->student_code ?? 'N/A' }}
                                                                                                — Phone:
                                                                                                {{ $systemStudent->mobile ?? 'N/A' }}
                                                                                            </label>
                                                                                        </div>
                                                                                    @endforeach
                                                                                </div>
                                                                                <div
                                                                                    class="sub-session-selected-students-preview mt-2 d-flex flex-wrap gap-2">
                                                                                </div>
                                                                            </div>

                                                                            <div
                                                                                class="mt-3 gift-call-slots-wrapper d-none">
                                                                                <label class="form-label fw-bold">Gift
                                                                                    Call Slots (20 mins
                                                                                    each)</label>
                                                                                <p class="text-muted small mb-1">
                                                                                    Slots are generated from the
                                                                                    current session duration. Assign
                                                                                    one student per slot.</p>
                                                                                <div class="gift-call-slots-list">
                                                                                </div>
                                                                            </div>
                                                                        @endif
                                                                    </div>
                                                                @else
                                                                    <p class="mb-0 text-muted">All students in this
                                                                        session already have a "Student Didn't
                                                                        Show-Up" urgent.</p>
                                                                @endif
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-outline-secondary"
                                                                    data-bs-dismiss="modal">Close</button>
                                                                <button type="submit" class="btn btn-outline-primary"
                                                                    {{ $remainingStudentCount === 0 ? 'disabled' : '' }}>Submit</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <button type="button"
                                                class="btn btn-outline-danger btn-sm radius-8 single-student-no-show-btn"
                                                data-bs-toggle="modal"
                                                data-bs-target="#singleStudentNoShowModal{{ $course->id }}"
                                                title="Student Didn't Show-Up"
                                                {{ $singleStudentNoShowSent ? 'disabled' : '' }}>
                                                <iconify-icon icon="mdi:account-remove-outline"
                                                    class="text-lg"></iconify-icon>
                                            </button>

                                            <div class="modal fade" id="singleStudentNoShowModal{{ $course->id }}"
                                                tabindex="-1"
                                                aria-labelledby="singleStudentNoShowModalLabel{{ $course->id }}"
                                                aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <div class="modal-title"
                                                                id="singleStudentNoShowModalLabel{{ $course->id }}">
                                                                Student Didn&apos;t Show Up</div>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <form action="{{ route('storeUrgent') }}" method="POST"
                                                            class="student-urgent-form"
                                                            data-session-date="{{ $course->session_date }}"
                                                            data-session-start="{{ $course->start_time }}"
                                                            data-session-end="{{ $course->end_time }}">
                                                            @csrf
                                                            <div class="modal-body text-start">
                                                                <input type="hidden" name="course_id"
                                                                    value="{{ $course->staff_scheduled_id }}">
                                                                <input type="hidden" name="session_id"
                                                                    value="{{ $course->id }}">
                                                                <input type="hidden" name="message"
                                                                    value="Student Didn't Show-Up">
                                                                @if ($firstStudentId && !$singleStudentNoShowSent)
                                                                    <input type="hidden" name="student_id"
                                                                        value="{{ $firstStudentId }}">
                                                                @endif

                                                                <p class="mb-3">Confirm marking this student as
                                                                    absent for the session.</p>
                                                                <div class="alert alert-info py-1 px-3 small">
                                                                    {{ $courseStudents->first()->student->first_name ?? '' }}
                                                                    {{ $courseStudents->first()->student->last_name ?? '' }}
                                                                </div>

                                                                <div class="mt-3">
                                                                    @if ($scheduled->schedule_type === 'track')
                                                                        <label class="form-label fw-bold">Sub
                                                                            Session Type</label>
                                                                        <p class="text-muted small mb-3">When all
                                                                            students in this session are marked
                                                                            absent, the selected sub session type
                                                                            will be saved.</p>

                                                                        <div
                                                                            class="action-card-group action-card-group--compact">
                                                                            <div class="action-card">
                                                                                <input class="action-card__input"
                                                                                    type="radio" name="sub_session_type"
                                                                                    id="singleStudentSubExtra{{ $course->id }}"
                                                                                    value="extra_session">
                                                                                <label class="action-card__label"
                                                                                    for="singleStudentSubExtra{{ $course->id }}">
                                                                                    <div
                                                                                        class="action-card__icon bg-soft-info text-info">
                                                                                        <i
                                                                                            class="ri-calendar-event-line"></i>
                                                                                    </div>
                                                                                    <div class="action-card__info">
                                                                                        <span
                                                                                            class="action-card__title">Extra
                                                                                            Session</span>
                                                                                    </div>
                                                                                    <div class="action-card__radio">
                                                                                    </div>
                                                                                </label>
                                                                            </div>

                                                                            <div class="action-card">
                                                                                <input class="action-card__input"
                                                                                    type="radio" name="sub_session_type"
                                                                                    id="singleStudentSubGift{{ $course->id }}"
                                                                                    value="gift_call">
                                                                                <label class="action-card__label"
                                                                                    for="singleStudentSubGift{{ $course->id }}">
                                                                                    <div
                                                                                        class="action-card__icon bg-soft-primary text-primary">
                                                                                        <i class="ri-gift-line"></i>
                                                                                    </div>
                                                                                    <div class="action-card__info">
                                                                                        <span
                                                                                            class="action-card__title">Gift
                                                                                            Call</span>
                                                                                    </div>
                                                                                    <div class="action-card__radio">
                                                                                    </div>
                                                                                </label>
                                                                            </div>

                                                                            <div class="action-card">
                                                                                <input class="action-card__input"
                                                                                    type="radio" name="sub_session_type"
                                                                                    id="singleStudentSubCover{{ $course->id }}"
                                                                                    value="cover_up">
                                                                                <label class="action-card__label"
                                                                                    for="singleStudentSubCover{{ $course->id }}">
                                                                                    <div
                                                                                        class="action-card__icon bg-soft-success text-success">
                                                                                        <i
                                                                                            class="ri-shield-check-line"></i>
                                                                                    </div>
                                                                                    <div class="action-card__info">
                                                                                        <span
                                                                                            class="action-card__title">Cover
                                                                                            Up</span>
                                                                                    </div>
                                                                                    <div class="action-card__radio">
                                                                                    </div>
                                                                                </label>
                                                                            </div>
                                                                        </div>

                                                                        <div
                                                                            class="mt-3 sub-session-students-wrapper d-none">
                                                                            <div
                                                                                class="d-flex justify-content-between align-items-center mb-1">
                                                                                <label
                                                                                    class="form-label fw-bold mb-0">Select
                                                                                    Students</label>
                                                                                <span
                                                                                    class="badge bg-secondary sub-session-students-count">0
                                                                                    Selected</span>
                                                                            </div>
                                                                            <p
                                                                                class="text-muted small mb-1 sub-session-students-hint">
                                                                                Choose one or more students from the
                                                                                system.</p>

                                                                            <div class="form-check mb-2">
                                                                                <input
                                                                                    class="form-check-input sub-session-students-select-all"
                                                                                    type="checkbox"
                                                                                    id="selectAll_single_{{ $course->id }}">
                                                                                <label class="form-check-label fw-bold"
                                                                                    for="selectAll_single_{{ $course->id }}">Select
                                                                                    All</label>
                                                                            </div>

                                                                            <input type="text"
                                                                                class="form-control form-control-sm mb-1 sub-session-students-search"
                                                                                placeholder="Search by name, code, or phone...">
                                                                            <div class="sub-session-students-list border rounded p-1"
                                                                                style="max-height:200px;overflow-y:auto;">
                                                                                @foreach ($students as $systemStudent)
                                                                                    <div class="form-check sub-session-student-item"
                                                                                        data-student-text="{{ strtolower(trim(($systemStudent->first_name ?? '') . ' ' . ($systemStudent->last_name ?? '') . ' ' . ($systemStudent->student_code ?? '') . ' ' . ($systemStudent->mobile ?? '') . ' ' . $systemStudent->id)) }}"
                                                                                        data-student-name="{{ $systemStudent->first_name }} {{ $systemStudent->last_name }}">
                                                                                        <input
                                                                                            class="form-check-input sub-session-students-select"
                                                                                            type="checkbox"
                                                                                            name="sub_session_student_ids[]"
                                                                                            id="subStudent_single_{{ $course->id }}_{{ $systemStudent->id }}"
                                                                                            value="{{ $systemStudent->id }}">
                                                                                        <label class="form-check-label"
                                                                                            for="subStudent_single_{{ $course->id }}_{{ $systemStudent->id }}">
                                                                                            {{ $systemStudent->first_name }}
                                                                                            {{ $systemStudent->last_name }}
                                                                                            — Code:
                                                                                            {{ $systemStudent->student_code ?? 'N/A' }}
                                                                                            — Phone:
                                                                                            {{ $systemStudent->mobile ?? 'N/A' }}
                                                                                        </label>
                                                                                    </div>
                                                                                @endforeach
                                                                            </div>
                                                                            <div
                                                                                class="sub-session-selected-students-preview mt-2 d-flex flex-wrap gap-2">
                                                                            </div>
                                                                        </div>

                                                                        <div class="mt-3 gift-call-slots-wrapper d-none">
                                                                            <label class="form-label fw-bold">Gift
                                                                                Call Slots (20 mins each)</label>
                                                                            <p class="text-muted small mb-1">Slots
                                                                                are generated from the current
                                                                                session duration. Assign one student
                                                                                per slot.</p>
                                                                            <div class="gift-call-slots-list">
                                                                            </div>
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-outline-secondary"
                                                                    data-bs-dismiss="modal">Close</button>
                                                                <button type="submit" class="btn btn-outline-primary"
                                                                    {{ $singleStudentNoShowSent ? 'disabled' : '' }}>Submit</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif

                                        @if ($course->subSessions->count() > 0)
                                            <a href="{{ route('sessions.sub-sessions', $course->id) }}"
                                                class="btn btn-outline-info btn-sm radius-8" title="View Sub Sessions">
                                                <iconify-icon icon="mdi:calendar-multiple" class="text-lg"></iconify-icon>
                                            </a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header d-flex align-items-center justify-content-between gap-3 flex-wrap">
                        <div>
                            <h6 class="mb-0 ui-title">Upcoming Sessions</h6>
                        </div>
                        <x-table-controls :action="route('sessions')" date formId="sessions-filter-form" startDateName="from"
                            endDateName="to" searchName="search"
                            searchPlaceholder="Student, teacher..." :export="true" :exportRoute="route('sessions.export')"
                            :saveRoute="route('sessions.saveFilteredTable')" />


                    </div>

                    <x-table :headers="[
                        'ID',
                        'Session',
                        'Student',
                        'Retention Admin',
                        'Team Leader',
                        'Teacher',
                        'Teacher Media',
                        'Supervisor',
                        'Program/Product',
                        'Level',
                        'Date',
                        'Time',
                        'White Board Upload',
                        'Group/Private',
                        'Session Link',
                    ]" :paginator="$upcomingCourses" emptyMessage="No upcoming sessions scheduled.">
                        @foreach ($upcomingCourses as $course)
                            @php
                                $scheduled = $course->staffScheduled;
                                $teacher = sessionTeacher($course, $scheduled);
                                $manager = $teacher->manager ?? null;
                                $teacherName = staffDisplayName($teacher);
                                $teacherAvailability = $teacher && $course->session_date
                                    ? $teacher->getAvailabilityStatusForDate($course->session_date, false)
                                    : ['type' => null, 'label' => null];
                                $teacherAvailabilityType = $teacherAvailability['type'] ?? null;
                                $teacherAvailabilityLabel = match ($teacherAvailabilityType) {
                                    'leave' => 'Leave Session',
                                    'holiday' => 'Holiday Session',
                                    default => null,
                                };
                                $managerName = staffDisplayName($manager);
                                $trackOrProduct =
                                    $scheduled->schedule_type === 'track'
                                        ? $scheduled->track->name_en ?? 'N/A'
                                        : $scheduled->academyProduct->name_en ?? 'N/A';
                                $levelLabel = $scheduled->trackLevel->name_en ?? '-';
                                $groupLabel = $scheduled->trackType->name ?? 'N/A';
                                $groupPill = $scheduled->trackType?->name === 'Group' ? 'success' : 'warn';
                                $primaryAssignment = $scheduled->courseAdmins->first();
                                $adminStaff = $primaryAssignment?->admin?->staff;
                                $teamLeader = $adminStaff?->manager;
                                $adminName = $primaryAssignment
                                    ? ($primaryAssignment->admin?->full_name ?:
                                    trim(($adminStaff?->first_name ?? '') . ' ' . ($adminStaff?->last_name ?? '')))
                                    : 'N/A';
                                $teamLeaderName = $teamLeader
                                    ? ($teamLeader->full_name ?:
                                    trim(($teamLeader->first_name ?? '') . ' ' . ($teamLeader->last_name ?? '')))
                                    : 'N/A';
                            @endphp

                            <tr>
                                <td class="ui-id text-center">
                                    <a href="{{ $course->session_url }}">
                                        {{ $course->id }}
                                    </a>
                                    <div class="mt-1">
                                        <a href="{{ $course->course_url }}" class="ui-muted small">
                                            Course #{{ $course->staff_scheduled_id }}
                                        </a>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <span class="ui-pill ui-pill--neutral">Session
                                        {{ $course->session_number }}</span>
                                </td>
                                <td class="text-center ui-muted">
                                    <div class="live-session-list">
                                        @foreach ($scheduled->courseStudent as $student)
                                            <a href="{{ route('students.show', $student->student_id) }}" target="_blank"
                                                class="live-session-link">
                                                {{ $student->student->first_name }}
                                                {{ $student->student->last_name }}
                                            </a>
                                        @endforeach
                                    </div>
                                </td>
                                <td class="text-center ui-muted">
                                    @if ($primaryAssignment && $adminStaff)
                                        <a href="{{ config('app.HR_URL') . 'staffs/' . ($adminStaff->id ?? '#') }}">
                                            {{ $adminName ?: 'N/A' }}
                                        </a>
                                    @else
                                        <span class="ui-muted">N/A</span>
                                    @endif
                                </td>
                                <td class="text-center ui-muted">
                                    @if ($primaryAssignment && $teamLeader)
                                        <a href="{{ config('app.HR_URL') . 'staffs/' . ($teamLeader->id ?? '#') }}">
                                            {{ $teamLeaderName ?: 'N/A' }}
                                        </a>
                                    @else
                                        <span class="ui-muted">N/A</span>
                                    @endif
                                </td>
                                <td class="text-center ui-muted">
                                    <span class="live-session-link">
                                        <a href="{{ config('app.HR_URL') . 'staffs/' . ($teacher->id ?? '#') }}">
                                            {{ $teacherName }}</span>
                                    </a>
                                    @if ($teacherAvailabilityLabel)
                                        <div class="mt-1">
                                            <span class="badge bg-danger text-white">
                                                {{ $teacherAvailabilityLabel }}
                                            </span>
                                        </div>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <x-bbb-teacher-media-status :session="$course" :teacher="$teacher" />
                                </td>
                                <td class="text-center ui-muted">
                                    <span class="live-session-link">
                                        <a href="{{ config('app.HR_URL') . 'staffs/' . ($teacher->manager_id ?? '#') }}">
                                            {{ $managerName }}</span>
                                    </a>
                                </td>
                                <td class="text-center">
                                    <span class="ui-pill ui-pill--info">{{ $trackOrProduct }}</span>
                                </td>
                                <td class="text-center ui-muted">{{ $levelLabel }}</td>
                                <td class="text-center">
                                    <span class="ui-pill ui-pill--neutral">{{ $course->session_date }}</span>
                                </td>
                                <td class="text-center">
                                    <span
                                        class="ui-pill ui-pill--neutral">{{ \Carbon\Carbon::parse($course->start_time)->format('h:i A') }}</span>
                                </td>
                                <td class="text-center">
                                    <x-whiteboard-upload-countdown :session="$course" />
                                </td>
                                <td class="text-center">
                                    <span class="ui-pill ui-pill--{{ $groupPill }}">{{ $groupLabel }}</span>
                                </td>
                                <td class="text-center">
                                    @if (filled($joinUrl))
                                        <a href="{{ $joinUrl }}" target="_blank"
                                            class="btn btn-outline-success btn-sm radius-8" title="Join">
                                            <iconify-icon icon="ri:video-add-line" class="text-lg"></iconify-icon>
                                        </a>
                                    @else
                                        <button type="button" class="btn btn-outline-secondary btn-sm radius-8"
                                            title="Join" disabled>
                                            <iconify-icon icon="ri:video-off-line" class="text-lg"></iconify-icon>
                                        </button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="teacherNoShowModal" tabindex="-1" aria-labelledby="teacherNoShowModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('storeUrgent') }}" method="POST" id="teacherNoShowForm">
                    @csrf
                    <div class="modal-header">
                        <div class="modal-title fw-semibold" id="teacherNoShowModalLabel">Confirm Teacher No-Show
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p class="mb-1">Are you sure the teacher didn't show up for <strong
                                id="teacherNoShowSessionLabel">this session</strong>?</p>
                        <p class="mb-0 text-muted small">This will be reported as an urgent and the HR effect will
                            be sent immediately.</p>
                        <input type="hidden" name="course_id" id="teacherNoShowCourseId">
                        <input type="hidden" name="session_id" id="teacherNoShowSessionId">
                        <input type="hidden" name="student_id" id="teacherNoShowStudentId">
                        <input type="hidden" name="message" value="Teacher Didn't Show-Up">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger" id="confirmTeacherNoShowBtn">Confirm</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="onSpotAbsenceModal" tabindex="-1" aria-labelledby="onSpotAbsenceModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('storeUrgent') }}" method="POST" id="onSpotAbsenceForm">
                    @csrf
                    <div class="modal-header">
                        <div class="modal-title fw-semibold" id="onSpotAbsenceModalLabel">Confirm On Spot Absence
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p class="mb-1">Are you sure you want to mark <strong id="onSpotAbsenceSessionLabel">this
                                session</strong> as On Spot Absence?</p>
                        <p class="mb-0 text-muted small">This will save the feedback and send the related HR effect
                            immediately.</p>
                        <input type="hidden" name="course_id" id="onSpotAbsenceCourseId">
                        <input type="hidden" name="session_id" id="onSpotAbsenceSessionId">
                        <input type="hidden" name="message" value="On-Spot Absence">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-warning text-white"
                            id="confirmOnSpotAbsenceBtn">Confirm</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    </div>
    </div>
    </div>
@endsection

@push('styles')
    <style>
        .live-session-list {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 0.35rem;
        }

        .live-session-link {
            color: #0f172a;
            font-weight: 600;
            text-decoration: none;
        }

        .live-session-link:hover {
            color: #2563eb;
        }

        .live-session-actions {
            display: ruby;
            /* justify-content: center; */
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .feedback-modal {
            border: 0;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 24px 80px rgba(15, 23, 42, 0.2);
        }

        .feedback-modal__header {
            padding: 1.5rem 1.5rem 1rem;
            border-bottom: 1px solid #e2e8f0;
            background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
        }

        .feedback-modal__eyebrow {
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 0.35rem;
        }

        .feedback-modal__title {
            color: #0f172a;
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
        }

        .feedback-modal__meta {
            color: #64748b;
            font-size: 0.92rem;
        }

        .feedback-modal__body {
            padding: 1.5rem;
            background: #fff;
        }

        .feedback-modal__grid {
            display: grid;
            grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
            gap: 1rem;
        }

        .feedback-modal__panel {
            border: 1px solid #e2e8f0;
            border-radius: 20px;
            background: #f8fafc;
            padding: 1rem;
        }

        .feedback-modal__panel--wide {
            background: #fff;
        }

        .feedback-modal__section-title {
            color: #0f172a;
            font-size: 0.95rem;
            font-weight: 700;
            margin-bottom: 0.85rem;
        }

        .feedback-modal__detail-list {
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
        }

        .feedback-modal__detail-item {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }

        .feedback-modal__detail-label {
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .feedback-modal__detail-value {
            color: #0f172a;
            font-size: 0.95rem;
        }

        .feedback-modal__issues {
            display: flex;
            flex-wrap: wrap;
            gap: 0.65rem;
            margin-bottom: 1rem;
        }

        .feedback-status-pill {
            display: inline-flex;
            align-items: center;
            padding: 0.55rem 0.85rem;
            border-radius: 999px;
            background: #f1f5f9;
            color: #64748b;
            font-size: 0.86rem;
            font-weight: 600;
            border: 1px solid #e2e8f0;
        }

        .feedback-status-pill.is-active {
            background: #dbeafe;
            color: #1d4ed8;
            border-color: #bfdbfe;
        }

        .feedback-modal__note {
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: #f8fafc;
            padding: 1rem;
            color: #334155;
            line-height: 1.65;
        }

        .feedback-modal__footer {
            padding: 0 1.5rem 1.5rem;
            border-top: 0;
            background: #fff;
        }

        #sessions-filter-form .slot-wrapper {
            flex: 0 0 100%;
            order: 2;
        }

        /* Action Cards */
        .action-card-group {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .action-card-group--compact {
            gap: 0.75rem;
        }

        .action-card {
            position: relative;
        }

        .action-card__input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        .action-card__label {
            display: flex;
            align-items: center;
            gap: 1.25rem;
            padding: 1.25rem;
            border-radius: 1.25rem;
            background: #fff;
            border: 2px solid #e2e8f0;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            margin-bottom: 0;
        }

        .action-card__icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            border-radius: 12px;
            font-size: 1.5rem;
            transition: all 0.3s ease;
        }

        .action-card__info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }

        .action-card__title {
            font-size: 1.1rem;
            font-weight: 700;
            color: #0f172a;
        }

        .action-card__hint {
            font-size: 0.88rem;
            color: #64748b;
        }

        .action-card__radio {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 2px solid #cbd5e1;
            background: #fff;
            position: relative;
            transition: all 0.3s ease;
        }

        .action-card__radio::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #fff;
            transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* Active / Checked States */
        .action-card__input:checked+.action-card__label {
            background: #f0f9ff;
            border-color: #3b82f6;
            box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1);
        }

        .action-card__input:checked+.action-card__label .action-card__radio {
            background: #3b82f6;
            border-color: #3b82f6;
        }

        .action-card__input:checked+.action-card__label .action-card__radio::after {
            transform: translate(-50%, -50%) scale(1);
        }

        /* Hover States */
        .action-card__label:hover {
            border-color: #cbd5e1;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }

        .bg-soft-primary {
            background-color: rgba(59, 130, 246, 0.1);
        }

        .bg-soft-info {
            background-color: rgba(6, 182, 212, 0.1);
        }

        .bg-soft-danger {
            background-color: rgba(239, 68, 68, 0.1);
        }

        .bg-soft-success {
            background-color: rgba(34, 197, 94, 0.12);
        }

        .sub-session-students-wrapper {
            border: 1px solid #dbeafe;
            border-radius: 14px;
            background: linear-gradient(180deg, #f8fbff 0%, #f1f7ff 100%);
            padding: 0.9rem;
        }

        .sub-session-students-list {
            background: #ffffff;
            font-size: 0.92rem;
            line-height: 1.6;
        }

        .sub-session-students-list .form-check {
            padding: 0.35rem 0.5rem;
            border-radius: 6px;
            transition: background 0.15s;
        }

        .sub-session-students-list .form-check:hover {
            background: #f1f7ff;
        }

        .sub-session-students-list .form-check-input:checked~.form-check-label {
            font-weight: 600;
            color: #1d4ed8;
        }

        .select2-container--open {
            z-index: 9999;
        }

        .modal-icon-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(15px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .ui-card {
            animation: fadeInUp 0.5s ease-out backwards;
        }

        .ui-card:nth-child(2) {
            animation-delay: 0.1s;
        }

        .ui-card:nth-child(3) {
            animation-delay: 0.2s;
        }

        @media (max-width: 767.98px) {
            .feedback-modal__grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            var isProgrammaticSubSessionStudentsChange = false;

            window.removeSubSessionStudent = function(studentId, btn) {
                var $btn = $(btn);
                var $wrapper = $btn.closest('.sub-session-students-wrapper');

                if (studentId && $wrapper.length) {
                    var $checkbox = $wrapper.find('.sub-session-students-select').filter(function() {
                        return $(this).val() == studentId;
                    });

                    if ($checkbox.length) {
                        $checkbox.prop('checked', false).trigger('change');
                    }
                }
            };

            function setSubSessionStudentsValue(studentsSelect, value) {
                if (!studentsSelect || !studentsSelect.length) {
                    return;
                }

                // Support both old <select> and new checkbox list
                if (studentsSelect.is('select')) {
                    isProgrammaticSubSessionStudentsChange = true;
                    studentsSelect.val(value);
                    if (studentsSelect.hasClass('select2-hidden-accessible')) {
                        studentsSelect.trigger('change.select2');
                    }
                    isProgrammaticSubSessionStudentsChange = false;
                } else {
                    // It's a wrapper — uncheck all checkboxes inside
                    studentsSelect.find('input[type="checkbox"]').prop('checked', false);
                }
            }

            function setWrapperInputsEnabled(wrapper, enabled) {
                if (!wrapper || !wrapper.length) {
                    return;
                }

                wrapper.find('input, select, textarea').prop('disabled', !enabled);
            }

            function normalizeSessionTimeValue(value) {
                if (!value) {
                    return null;
                }

                var cleaned = String(value).trim().replace(' ', 'T');
                if (cleaned.length === 16) {
                    cleaned += ':00';
                }

                return cleaned;
            }

            function parseSessionDateTime(sessionDate, sessionTime) {
                if (!sessionDate || !sessionTime) {
                    return null;
                }

                var normalized = normalizeSessionTimeValue(sessionTime);
                var candidate = String(sessionDate).trim() + 'T' + normalized.replace(/^T/, '');
                var parsed = new Date(candidate);

                return Number.isNaN(parsed.getTime()) ? null : parsed;
            }

            function formatTimeLabel(dateObj) {
                return dateObj.toLocaleTimeString([], {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: true
                });
            }

            function buildGiftCallSlots(form) {
                var sessionDate = form.data('session-date');
                var sessionStart = form.data('session-start');
                var sessionEnd = form.data('session-end');
                var startDate = parseSessionDateTime(sessionDate, sessionStart);
                var endDate = parseSessionDateTime(sessionDate, sessionEnd);
                var nowDate = new Date();
                nowDate.setSeconds(0, 0);
                var slotMinutes = 20;

                if (!startDate || !endDate || endDate <= startDate) {
                    return [];
                }

                var effectiveStart = startDate > nowDate ? new Date(startDate.getTime()) : new Date(nowDate
                    .getTime());
                if (effectiveStart >= endDate) {
                    return [];
                }

                var availableMinutes = Math.floor((endDate.getTime() - effectiveStart.getTime()) / 60000);
                if (availableMinutes <= 0) {
                    return [];
                }

                var fullSlots = Math.floor(availableMinutes / slotMinutes);
                var remainder = availableMinutes % slotMinutes;
                var durations = [];
                var slots = [];
                var cursor = new Date(effectiveStart.getTime());

                // First slot (closest to now) gets remainder, later slots remain full 20 mins.
                if (remainder > 0) {
                    durations.push(remainder);
                }

                for (var j = 0; j < fullSlots; j++) {
                    durations.push(slotMinutes);
                }

                for (var i = 0; i < durations.length; i++) {
                    var duration = durations[i];
                    var slotEnd = new Date(cursor.getTime() + (duration * 60000));

                    slots.push({
                        index: i + 1,
                        startLabel: formatTimeLabel(cursor),
                        endLabel: formatTimeLabel(slotEnd),
                        durationMinutes: duration
                    });

                    cursor = slotEnd;
                }

                return slots;
            }

            function getStudentOptionsHtml(form) {
                var options = ['<option value="">Select one student</option>'];

                form.find('.sub-session-students-list .sub-session-student-item').each(function() {
                    var checkbox = $(this).find('input[type="checkbox"]');
                    var label = $(this).find('label').text().trim();
                    options.push('<option value="' + checkbox.val() + '">' + label + '</option>');
                });

                return options.join('');
            }

            function renderGiftCallSlots(form) {
                var giftWrapper = form.find('.gift-call-slots-wrapper');
                var slotsList = giftWrapper.find('.gift-call-slots-list');
                var slots = buildGiftCallSlots(form);

                if (!giftWrapper.length || !slotsList.length) {
                    return;
                }

                if (slots.length === 0) {
                    slotsList.html(
                        '<div class="alert alert-warning py-1 px-3 mb-0 small">No valid 20-minute Gift Call slots available for this session time.</div>'
                    );
                    return;
                }

                var optionsHtml = getStudentOptionsHtml(form);
                var rows = [];

                rows.push('<div class="table-responsive"><table class="table table-sm align-middle mb-0">');
                rows.push('<thead><tr><th style="width: 55%;">Slot Time</th><th>Student</th></tr></thead><tbody>');

                slots.forEach(function(slot) {
                    rows.push('<tr>');
                    rows.push('<td><span class="ui-pill ui-pill--neutral">Session ' + slot.index + ': ' +
                        slot.startLabel + ' - ' + slot.endLabel + ' (' + slot.durationMinutes +
                        ' mins)</span></td>');
                    rows.push(
                        '<td><select class="form-select form-select-sm gift-slot-student-select" name="sub_session_student_ids[]" aria-label="Gift call student slot ' +
                        slot.index + '">');
                    rows.push(optionsHtml);
                    rows.push('</select></td>');
                    rows.push('</tr>');
                });

                rows.push('</tbody></table></div>');

                slotsList.html(rows.join(''));
                initGiftSlotStudentSelect(giftWrapper);
            }

            function initSubSessionStudentSelect(scope) {
                // No longer needed for checkbox lists, kept for gift-slot selects
            }

            function initGiftSlotStudentSelect(scope) {
                var target = scope && scope.length ? scope : $(document);

                target.find('.gift-slot-student-select').each(function() {
                    var select = $(this);
                    var modal = select.closest('.modal');

                    if (select.hasClass('select2-hidden-accessible')) {
                        return;
                    }

                    select.select2({
                        width: '100%',
                        placeholder: 'Search student...',
                        allowClear: true,
                        dropdownParent: modal.length ? modal : $(document.body)
                    });
                });
            }

            function syncSubSessionTypeVisibility(form) {
                var total = form.find('input[name="student_ids[]"]').length;
                var checked = form.find('input[name="student_ids[]"]:checked').length;
                var wrapper = form.find('.sub-session-type-wrapper');

                if (!wrapper.length) {
                    return;
                }

                if (total > 0 && checked === total) {
                    wrapper.removeClass('d-none');
                } else {
                    wrapper.addClass('d-none');
                    wrapper.find('input[name="sub_session_type"]').prop('checked', false);
                    setSubSessionStudentsValue(wrapper.find('.sub-session-students-wrapper'), null);
                }

                syncSubSessionStudentsVisibility(form);
            }

            function syncSubSessionStudentsVisibility(form) {
                var selectedType = form.find('input[name="sub_session_type"]:checked').val();
                var studentsWrapper = form.find('.sub-session-students-wrapper');
                var studentsHint = studentsWrapper.find('.sub-session-students-hint');
                var studentsCheckboxes = studentsWrapper.find('.sub-session-students-list');
                var giftWrapper = form.find('.gift-call-slots-wrapper');

                if (!studentsWrapper.length && !giftWrapper.length) {
                    return;
                }

                if (!selectedType) {
                    studentsWrapper.addClass('d-none');
                    giftWrapper.addClass('d-none');
                    setWrapperInputsEnabled(giftWrapper, false);
                    setWrapperInputsEnabled(studentsWrapper, false);
                    setSubSessionStudentsValue(studentsWrapper, null);
                    giftWrapper.find('.gift-call-slots-list').empty();
                    return;
                }

                if (selectedType === 'gift_call') {
                    studentsWrapper.addClass('d-none');
                    setWrapperInputsEnabled(studentsWrapper, false);
                    setSubSessionStudentsValue(studentsWrapper, null);

                    giftWrapper.removeClass('d-none');
                    renderGiftCallSlots(form);
                    setWrapperInputsEnabled(giftWrapper, true);
                } else {
                    giftWrapper.addClass('d-none');
                    giftWrapper.find('.gift-call-slots-list').empty();
                    setWrapperInputsEnabled(giftWrapper, false);

                    studentsWrapper.removeClass('d-none');
                    setWrapperInputsEnabled(studentsWrapper, true);
                    studentsHint.text('Choose one or more students to be added automatically to this sub session.');
                }
            }

            function toggleSessionTypeFilters(value) {
                if (value === 'track') {
                    $('.track-filter-group').removeClass('d-none');
                    $('.product-filter-group').addClass('d-none');
                    $('#product_id').val('');
                } else if (value === 'course') {
                    $('.product-filter-group').removeClass('d-none');
                    $('.track-filter-group').addClass('d-none');
                    $('#track_id, #track_type, #level_id').val('');
                } else {
                    $('.track-filter-group, .product-filter-group').addClass('d-none');
                    $('#track_id, #product_id, #track_type, #level_id').val('');
                }
            }

            const sessionsFilterForm = document.getElementById('sessions-filter-form');
            let autoSubmitTimer;
            const autoSubmitFilters = () => {
                if (!sessionsFilterForm) {
                    return;
                }

                clearTimeout(autoSubmitTimer);
                autoSubmitTimer = setTimeout(() => {
                    sessionsFilterForm.submit();
                }, 500);
            };

            if (sessionsFilterForm) {
                sessionsFilterForm.querySelectorAll('select, input[type="date"], input[type="time"]').forEach((
                    element) => {
                    element.addEventListener('change', autoSubmitFilters);
                });

                const searchInput = sessionsFilterForm.querySelector('input[name="search"]');
                if (searchInput) {
                    searchInput.addEventListener('input', autoSubmitFilters);
                }
            }

            toggleSessionTypeFilters($('#schedule_type').val());
            initSubSessionStudentSelect($(document));

            $('#schedule_type').on('change', function() {
                toggleSessionTypeFilters($(this).val());
                autoSubmitFilters();
            });

            $(document).on('submit', '.teacher-urgent-form', function(e) {
                e.preventDefault();
                var student_id = $('input[name="message"]:checked').data('student-id');
                var form = $(this);
                var modalId = form.closest('.modal').attr('id');
                var scheduleType = '';
                var courseId = form.data('course-id');
                var selectedRadioId = form.find('input[name="message"]:checked').attr('id');

                if (selectedRadioId && selectedRadioId.includes('giftCall')) {
                    scheduleType = 'gift-call';
                } else if (selectedRadioId && selectedRadioId.includes('extraSession')) {

                    // alert('Student ID: ' + student_id);
                    scheduleType = 'extra-session';
                }

                $.ajax({
                    url: form.attr('action'),
                    type: 'POST',
                    data: form.serialize(),
                    success: function(response) {
                        $('#' + modalId).modal('hide');
                        if (response.success) {
                            window.location.href = "{{ route('schedule') }}?schedule_type=" +
                                scheduleType + "&session_id=" + courseId + "&student_id=" +
                                student_id;
                        }
                    },
                    error: function() {
                        toastr.error('Something went wrong. Please try again.');
                    }
                });
            });

            $(document).on('submit', '.student-urgent-form', function(e) {
                e.preventDefault();
                var form = $(this);
                var modal = form.closest('.modal');
                var message = form.find('input[name="message"]').val();
                var checkedStudents = form.find('input[name="student_ids[]"]:checked').length;
                var totalSelectableStudents = form.find('input[name="student_ids[]"]').length;
                var selectedCheckboxes = form.find('input[name="student_ids[]"]:checked');
                var submitButton = form.find('button[type="submit"]');
                var subSessionType = form.find('input[name="sub_session_type"]:checked').val();
                var subSessionStudentIds = [];
                var hasSingleStudent = form.find('input[name="student_id"]').length > 0;
                var requiresTypeNow = form.find('input[name="sub_session_type"]').length > 0 &&
                    ((totalSelectableStudents > 0 && checkedStudents === totalSelectableStudents) ||
                        hasSingleStudent);

                if (message === "Student Didn't Show-Up" && form.find('input[name="student_ids[]"]')
                    .length > 0 && checkedStudents === 0) {
                    toastr.error('Please select at least one student.');
                    return;
                }

                if (requiresTypeNow && !subSessionType) {
                    toastr.error('Please choose the sub session type.');
                    return;
                }

                if (requiresTypeNow) {
                    if (subSessionType === 'gift_call') {
                        subSessionStudentIds = form.find('.gift-slot-student-select').map(function() {
                            return $(this).val();
                        }).get().filter(function(value) {
                            return value && value.length > 0;
                        });

                        var uniqueGiftStudents = Array.from(new Set(subSessionStudentIds));

                        if (subSessionStudentIds.length === 0) {
                            toastr.error('Please select at least one student in Gift Call slots.');
                            return;
                        }

                        if (uniqueGiftStudents.length !== subSessionStudentIds.length) {
                            toastr.error('Each student can only be selected once for Gift Call.');
                            return;
                        }
                    } else {
                        subSessionStudentIds = form.find(
                            '.sub-session-students-wrapper input[name="sub_session_student_ids[]"]:checked'
                        ).map(function() {
                            return $(this).val();
                        }).get();

                        if (subSessionStudentIds.length === 0) {
                            toastr.error(
                                'Please choose at least one student for the selected sub session type.');
                            return;
                        }
                    }
                }

                $.ajax({
                    url: form.attr('action'),
                    type: 'POST',
                    data: form.serialize(),
                    success: function(response) {
                        if (response.success) {
                            toastr.success('Request Sent');

                            if (modal.length) {
                                selectedCheckboxes.each(function() {
                                    $(this).closest('.form-check').remove();
                                });

                                var remainingCheckboxes = modal.find(
                                    'input[name="student_ids[]"]');
                                var modalTrigger = $('[data-bs-target="#' + modal.attr('id') +
                                    '"]');

                                if (!remainingCheckboxes.length) {
                                    modal.find('.modal-body').html(
                                        '<p class="mb-0 text-muted">All students in this session already have a "Student Didn\\\'t Show-Up" urgent.</p>'
                                    );
                                    modal.find('button[type="submit"]').prop('disabled', true);
                                    modalTrigger.prop('disabled', true);
                                } else {
                                    syncSubSessionTypeVisibility(form);
                                }

                                modal.modal('hide');
                            } else if (message === "Student Didn't Show-Up") {
                                submitButton.prop('disabled', true);
                            }
                        }
                    },
                    error: function(xhr) {
                        var errorMessage = xhr.responseJSON && xhr.responseJSON.message ?
                            xhr.responseJSON.message :
                            'Something went wrong. Please try again.';

                        toastr.error(errorMessage);
                    }
                });
            });

            $(document).on('change', '.student-urgent-checkbox', function() {
                var form = $(this).closest('form');
                syncSubSessionTypeVisibility(form);
            });

            $(document).on('change', 'input[name="sub_session_type"]', function() {
                var form = $(this).closest('form');
                syncSubSessionStudentsVisibility(form);
            });

            $(document).on('change', '.sub-session-students-select', function() {
                if (typeof isProgrammaticSubSessionStudentsChange !== 'undefined' &&
                    isProgrammaticSubSessionStudentsChange) {
                    return;
                }

                var $this = $(this);
                var wrapper = $this.closest('.sub-session-students-wrapper');
                var form = $this.closest('form');

                // Part 1: Original Visibility Logic
                syncSubSessionStudentsVisibility(form);

                // Part 2: New UI Logic (Count and Preview)
                if (wrapper.length) {
                    var allCheckboxes = wrapper.find('.sub-session-students-select');
                    var checkedCheckboxes = wrapper.find('.sub-session-students-select:checked');
                    var selectAllCheckbox = wrapper.find('.sub-session-students-select-all');

                    // update select all state
                    if (allCheckboxes.length > 0 && allCheckboxes.length === checkedCheckboxes.length) {
                        selectAllCheckbox.prop('checked', true);
                    } else {
                        selectAllCheckbox.prop('checked', false);
                    }

                    // update count
                    wrapper.find('.sub-session-students-count').text(checkedCheckboxes.length +
                        ' Selected');

                    // update preview
                    var previewContainer = wrapper.find('.sub-session-selected-students-preview');
                    previewContainer.empty();
                    checkedCheckboxes.each(function() {
                        var studentName = $(this).closest('.sub-session-student-item').data(
                            'student-name') || 'Student';
                        var id = $(this).val();

                        var initials = studentName.split(' ').map(w => w[0]).join('').substring(0,
                            2).toUpperCase();
                        if (!initials) initials = 'S';

                        var badge = `
                            <div class="selected-student-badge" data-id="${id}" style="display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:#f1f5f9;border:1px solid #e2e8f0;font-size:0.85rem;font-weight:600;color:#0f172a;">
                                <div class="selected-student-avatar" style="width:22px;height:22px;border-radius:50%;background:#3b82f6;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:bold;">${initials}</div>
                                <span class="student-name" style="pointer-events:none;">${studentName}</span>
                                <button type="button" class="selected-student-remove" onclick="removeSubSessionStudent('${id}', this)" style="border:none;background:#fee2e2;padding:0;cursor:pointer;margin-left:4px;color:#ef4444;font-size:18px;line-height:1;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;">&times;</button>
                            </div>
                        `;
                        previewContainer.append(badge);
                    });
                }
            });

            $(document).on('input', '.sub-session-students-search', function() {
                var query = $(this).val().toLowerCase().trim();
                var list = $(this).siblings('.sub-session-students-list');
                list.find('.sub-session-student-item').each(function() {
                    var text = $(this).data('student-text') || '';
                    $(this).toggle(query === '' || text.indexOf(query) !== -1);
                });
            });

            // Select all toggle
            $(document).on('change', '.sub-session-students-select-all', function() {
                var wrapper = $(this).closest('.sub-session-students-wrapper');
                var isChecked = $(this).is(':checked');

                isProgrammaticSubSessionStudentsChange = true;
                wrapper.find('.sub-session-students-select').prop('checked', isChecked);
                isProgrammaticSubSessionStudentsChange = false;

                wrapper.find('.sub-session-students-select').first().trigger('change');
            });





            $(document).on('show.bs.modal', '.modal', function() {
                var form = $(this).find('.student-urgent-form');
                initSubSessionStudentSelect($(this));

                if (!form.length) {
                    return;
                }

                syncSubSessionTypeVisibility(form);
                syncSubSessionStudentsVisibility(form);
            });

            var onSpotAbsenceModalElement = document.getElementById('onSpotAbsenceModal');

            if (onSpotAbsenceModalElement) {
                onSpotAbsenceModalElement.addEventListener('show.bs.modal', function(event) {
                    var triggerButton = event.relatedTarget;

                    if (!triggerButton) {
                        return;
                    }

                    var activeOnSpotButton = $(triggerButton);
                    $('#onSpotAbsenceCourseId').val(activeOnSpotButton.data('course-id') || '');
                    $('#onSpotAbsenceSessionId').val(activeOnSpotButton.data('session-id') || '');
                    $('#onSpotAbsenceSessionLabel').text(activeOnSpotButton.data('session-label') ||
                        'this session');
                });

                onSpotAbsenceModalElement.addEventListener('hidden.bs.modal', function() {
                    $('#onSpotAbsenceCourseId').val('');
                    $('#onSpotAbsenceSessionId').val('');
                    $('#onSpotAbsenceSessionLabel').text('this session');
                });

                $('#onSpotAbsenceForm').on('submit', function(e) {
                    e.preventDefault();
                    var form = $(this);
                    var sessionId = $('#onSpotAbsenceSessionId').val();
                    $.ajax({
                        url: form.attr('action'),
                        type: 'POST',
                        data: form.serialize(),
                        success: function(response) {
                            $('#onSpotAbsenceModal').modal('hide');
                            if (response.success) {
                                var btn = $('.on-spot-absence-btn[data-session-id="' +
                                    sessionId + '"]');
                                btn.prop('disabled', true);
                                toastr.success('On Spot Absence reported successfully.');
                            }
                        },
                        error: function() {
                            toastr.error('Something went wrong. Please try again.');
                        }
                    });
                });
            }

            var teacherNoShowModalElement = document.getElementById('teacherNoShowModal');

            if (teacherNoShowModalElement) {
                teacherNoShowModalElement.addEventListener('show.bs.modal', function(event) {
                    var triggerButton = event.relatedTarget;
                    if (!triggerButton) return;
                    var btn = $(triggerButton);
                    $('#teacherNoShowCourseId').val(btn.data('course-id') || '');
                    $('#teacherNoShowSessionId').val(btn.data('session-id') || '');
                    $('#teacherNoShowStudentId').val(btn.data('student-id') || '');
                    $('#teacherNoShowSessionLabel').text(btn.data('session-label') || 'this session');
                });

                teacherNoShowModalElement.addEventListener('hidden.bs.modal', function() {
                    $('#teacherNoShowCourseId').val('');
                    $('#teacherNoShowSessionId').val('');
                    $('#teacherNoShowStudentId').val('');
                    $('#teacherNoShowSessionLabel').text('this session');
                });

                $('#teacherNoShowForm').on('submit', function(e) {
                    e.preventDefault();
                    var form = $(this);
                    var sessionId = $('#teacherNoShowSessionId').val();
                    $.ajax({
                        url: form.attr('action'),
                        type: 'POST',
                        data: form.serialize(),
                        success: function(response) {
                            $('#teacherNoShowModal').modal('hide');
                            if (response.success) {
                                var btn = $('.teacher-no-show-btn[data-session-id="' +
                                    sessionId + '"]');
                                btn.prop('disabled', true);
                                toastr.success('Teacher No-Show reported successfully.');
                            }
                        },
                        error: function() {
                            toastr.error('Something went wrong. Please try again.');
                        }
                    });
                });
            }
        });
    </script>
@endpush