@extends('layout.layout')

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

    <script>
        (() => {
            const savedView = localStorage.getItem('studentViewPreference') || 'table';
            const root = document.documentElement;

            if (savedView === 'card') {
                root.style.setProperty('--initial-student-table-display', 'none');
                root.style.setProperty('--initial-student-card-display', 'grid');
                root.style.setProperty('--initial-student-table-btn-display', 'inline-flex');
                root.style.setProperty('--initial-student-card-btn-display', 'none');
                root.style.setProperty('--initial-student-card-pagination-display', 'block');
            } else {
                root.style.setProperty('--initial-student-table-display', 'block');
                root.style.setProperty('--initial-student-card-display', 'none');
                root.style.setProperty('--initial-student-table-btn-display', 'none');
                root.style.setProperty('--initial-student-card-btn-display', 'inline-flex');
                root.style.setProperty('--initial-student-card-pagination-display', 'none');
            }
        })();
    </script>

    @php
        $authStaff = Auth::user()->staff;
        $isAcademicSelfScoped = $is_academic_self_scope ?? false;
        $isAcademicTeacher = $is_academic_teacher ?? false;
        $isAcademicTester = $is_academic_tester ?? false;
        $hideInstructorAndSupervisorColumns = $isAcademicSelfScoped;
        $persistentQuery = collect([
            'staff_id' => request('staff_id'),
            'staffScheduleId' => request('staffScheduleId'),
            'student_type' => request('student_type'),
            'waiting_list' => request('waiting_list'),
            'frozen_list' => request('frozen_list'),
            'finished_list' => request('finished_list'),
            'finished_year' => request('finished_year'),
            'finished_quarter' => request('finished_quarter'),
            'assigned_list' => request('assigned_list'),
            'renewal_filter' => request('renewal_filter'),
        ])
            ->filter(fn($value) => filled($value))
            ->all();

        $filtersAction = route('students.index', $persistentQuery);
        $isWaitingListFilter = request('waiting_list') == 1;
        $isFrozenListFilter = request('frozen_list') == 1;
        $isFinishedListFilter = request('finished_list') == 1;
        $isAssignedListFilter = request('assigned_list') == 1;
        $isCurrentStudentType = request('student_type') === 'current';
        $renewalFilter = request('renewal_filter');
        $isDueRenewalFilter = $renewalFilter === 'due';
        $isRenewedStudentsFilter = $renewalFilter === 'renewed';
        $isOldDataFilter = $renewalFilter === 'old_data';
        $hasRenewalFilter = filled($renewalFilter);
        $allStudentsTabQuery = collect($persistentQuery)
            ->except(['waiting_list', 'frozen_list', 'finished_list', 'finished_year', 'finished_quarter', 'assigned_list', 'renewal_filter'])
            ->all();
        $allStudentsBaseTabQuery = collect($allStudentsTabQuery)->except(['student_type'])->all();
        $allStudentsTabUrl = route('students.index', $allStudentsBaseTabQuery);
        $currentStudentsTabUrl = route('students.index', array_merge($allStudentsBaseTabQuery, ['student_type' => 'current']));
        $waitingListTabUrl = route('students.index', array_merge($allStudentsBaseTabQuery, ['waiting_list' => 1]));
        $frozenListTabUrl = route('students.index', array_merge($allStudentsBaseTabQuery, ['frozen_list' => 1]));
        $finishedListTabUrl = route('students.index', array_merge($allStudentsBaseTabQuery, ['finished_list' => 1]));
        $assignedListTabUrl = route('students.index', array_merge($allStudentsBaseTabQuery, ['assigned_list' => 1]));
        $dueRenewalTabUrl = route('students.index', array_merge($allStudentsBaseTabQuery, ['renewal_filter' => 'due']));
        $renewedStudentsTabUrl = route('students.index', array_merge($allStudentsBaseTabQuery, ['renewal_filter' => 'renewed']));
        $oldDataTabUrl = route('students.index', array_merge($allStudentsBaseTabQuery, ['renewal_filter' => 'old_data']));
        $showTesterColumns = request('staff_id') && optional($staffName?->jobTitle)->slug === 'tester';
        if ($isAcademicTester) {
            $showTesterColumns = false;
        }
        $headers = [
            'Photo',
            'Code',
            'Name',
            'Level',
            'Session',
            'Program',
            'Category',
            'Instructor',
            'Team Leader',
            'Admin',
            'Secondary Team Leader',
            'Secondary Admin',
            'Supervisor',
            'Department',
            'Added By',
        ];

        if ($isWaitingListFilter) {
            $headers = [
                'Photo',
                'Code',
                'Name',
                'Program',
                'Category',
                'Invoice Creator',
                'Department',
                'Invoice Date',
            ];
        }

        if ($hideInstructorAndSupervisorColumns && !$isWaitingListFilter) {
            $headers = array_values(array_filter($headers, fn($header) => !in_array($header, ['Instructor', 'Supervisor', 'Department', 'Added By'], true)));
        }

        if ($showTesterColumns) {
            $headers = array_merge($headers, ['Program Type', 'Program Type']);
        }

        if ($isFinishedListFilter || $isRenewedStudentsFilter || $isOldDataFilter) {
            array_splice($headers, count($headers), 0, ['Finished Date']);
        }

        $headers[] = 'Actions';
        $canCreateStudent = Auth::user()->can('retention_students_create');
    @endphp

    @php
        $studentMeta = function ($student) use ($authStaff, $isAcademicSelfScoped, $isAcademicTeacher, $isAcademicTester) {
            $lead = $student->leads->first();
            $courseStudent = $student->courseStudents->first();
            $course = $courseStudent?->course;
            $manager = $course?->staff?->manager;

            $departmentName =
                $lead?->creator?->staff?->department?->name ??
                ($student->createdBy?->staff?->department?->name ?? 'N/A');

            $addedByName = $lead?->creator?->full_name ?? ($student->createdBy?->full_name ?? 'N/A');
            $trackTypeName = $lead?->trackType?->name ?? ($student->trackType?->name ?? 'N/A');
            $programTypeName = $lead?->pricingplantype?->name ?? ($student->pricingPlanType?->name ?? 'N/A');

            $levelName = $course?->trackLevel?->name_en ?? 'N/A';
            $sessionName = $course?->session ?? 'N/A';
            $trackName = $course?->track?->name_en ?? 'N/A';
            $categoryName = $course?->category?->name_en ?? 'N/A';

            $instructorName =
                trim(($course?->staff?->first_name ?? '') . ' ' . ($course?->staff?->last_name ?? '')) ?: 'N/A';
            $instructorId = $course?->staff?->id ?? '#';
            ;

            $supervisorName =
                $manager?->full_name ?:
                trim(($manager?->first_name ?? '') . ' ' . ($manager?->last_name ?? '')) ?:
                'N/A';
            $supervisorId = $manager?->id ?? '#';
            ;
            $addedById = $lead?->creator?->staff?->id ?? $student->createdBy?->staff?->id;

            $primaryAdmins = collect();
            $primaryLeaders = collect();
            $secondaryAdmins = collect();
            $secondaryLeaders = collect();

            foreach ($student->courseStudents as $cs) {
                if ($cs->course) {
                    // Primary Admins (from courseAdmins / admin_assigned_students)
                    foreach ($cs->course->courseAdmins as $ca) {
                        if ($ca->admin) {
                            $primaryAdmins->push($ca->admin);
                            if ($ca->admin->staff && $ca->admin->staff->manager) {
                                $primaryLeaders->push($ca->admin->staff->manager);
                            }
                        }
                    }
                    // Secondary Admins (from course_secondary_admins)
                    foreach ($cs->course->secondaryAdmins as $sa) {
                        $secondaryAdmins->push($sa);
                        if ($sa->staff && $sa->staff->manager) {
                            $secondaryLeaders->push($sa->staff->manager);
                        }
                    }
                }
            }
            $uniquePrimaryAdmins = $primaryAdmins->unique('id');
            $uniquePrimaryLeaders = $primaryLeaders->unique('id');
            $uniqueSecondaryAdmins = $secondaryAdmins->unique('id');
            $uniqueSecondaryLeaders = $secondaryLeaders->unique('id');

            $feedbackCourseStudent = $student->courseStudents
                ->filter(fn($item) => $item->course)
                ->when($isAcademicSelfScoped && $authStaff, function ($collection) use ($authStaff) {
                    return $collection->filter(fn($item) => (int) $item->course?->staff_id === (int) $authStaff->id);
                })
                ->sortByDesc(function ($item) {
                    $sessions = collect($item->course?->scheduledSessions ?? []);
                    $lastSession = $sessions->sortByDesc(fn($session) => ($session->session_date ?? '') . ' ' . ($session->end_time ?? ''))->first();

                    return ($lastSession?->session_date ?? $item->course?->end_date ?? $item->course?->start_date ?? now()->toDateString());
                })
                ->first() ?? $courseStudent;

            $feedbackCourse = $feedbackCourseStudent?->course;
            $feedbackSessions = collect($feedbackCourse?->scheduledSessions ?? [])->sortBy(function ($session) {
                return ($session->session_date ?? '') . '-' . str_pad((string) ($session->session_number ?? 0), 4, '0', STR_PAD_LEFT);
            })->values();
            $existingCourseFeedbacks = $student->teacherFeedbacks
                ->when($authStaff, fn($collection) => $collection->where('teacher_id', $authStaff->id))
                ->when($feedbackCourse, fn($collection) => $collection->where('staff_schedule_id', $feedbackCourse->id))
                ->values();

            $feedbackAction = [
                'show_misplaced' => false,
                'misplaced_session_id' => null,
                'misplaced_course_id' => null,
                'show_add' => false,
                'show_view' => false,
                'url' => null,
                'label' => null,
                'title' => null,
                'type' => null,
                'is_overdue' => false,
                'view_feedbacks' => collect(),
            ];

            if ($isAcademicTeacher && $authStaff && $feedbackCourse) {
                $lastPastSession = $feedbackSessions
                    ->filter(function ($session) {
                        return \Carbon\Carbon::parse($session->session_date . ' ' . $session->end_time)->isPast();
                    })
                    ->sortByDesc(function ($session) {
                        return ($session->session_date ?? '') . '-' . str_pad((string) ($session->session_number ?? 0), 4, '0', STR_PAD_LEFT);
                    })
                    ->first();

                if ($lastPastSession && in_array((int) $lastPastSession->session_number, [1, 2], true)) {
                    $hasMisplacedUrgent = collect($lastPastSession->urgents ?? [])
                        ->contains(function ($urgent) use ($student) {
                            return (int) $urgent->student_id === (int) $student->id
                                && (int) $urgent->created_by === (int) Auth::id()
                                && trim((string) $urgent->message) === 'Misplaced Request';
                        });

                    if (! $hasMisplacedUrgent) {
                        $feedbackAction['show_misplaced'] = true;
                        $feedbackAction['misplaced_session_id'] = $lastPastSession->id;
                        $feedbackAction['misplaced_course_id'] = $feedbackCourse->id;
                    }
                }

                $submittedTypes = $existingCourseFeedbacks->pluck('type')->all();
                $pastSessionsCount = $feedbackSessions->filter(function ($session) {
                    return \Carbon\Carbon::parse($session->session_date . ' ' . $session->end_time)->isPast();
                })->count();

                $nextFeedback = null;
                $targetSession = null;

                if (!in_array('initial', $submittedTypes, true)) {
                    $nextFeedback = 'initial';
                    $targetSession = $feedbackSessions->first();
                } elseif ($pastSessionsCount >= 4 && !in_array('mid', $submittedTypes, true)) {
                    $nextFeedback = 'mid';
                    $targetSession = $feedbackSessions->skip(3)->first();
                } elseif ($pastSessionsCount >= 8 && !in_array('final', $submittedTypes, true)) {
                    $nextFeedback = 'final';
                    $targetSession = $feedbackSessions->skip(7)->first();
                }

                if ($nextFeedback && $targetSession) {
                    $sessionEnd = \Carbon\Carbon::parse($targetSession->session_date . ' ' . $targetSession->end_time);
                    $feedbackAction = array_merge($feedbackAction, [
                        'show_add' => true,
                        'show_view' => false,
                        'url' => route('students.feedback.create', [
                            'id' => $student->id,
                            'staff_schedule_id' => $feedbackCourse->id,
                            'session_id' => $targetSession->id,
                        ]),
                        'label' => ucfirst($nextFeedback) . ' Feedback',
                        'title' => ucfirst($nextFeedback) . ' Feedback',
                        'type' => $nextFeedback,
                        'is_overdue' => now()->gt($sessionEnd->copy()->addHours(12)),
                        'view_feedbacks' => collect(),
                    ]);
                } else {
                    $viewType = collect(['final', 'mid', 'initial'])->first(fn($type) => $existingCourseFeedbacks->where('type', $type)->isNotEmpty());
                    if ($viewType) {
                        $feedbackAction['show_view'] = true;
                        $feedbackAction['title'] = 'View Feedback';
                        $feedbackAction['type'] = $viewType;
                        $feedbackAction['view_feedbacks'] = $existingCourseFeedbacks->where('type', $viewType)->values();
                    }
                }
            } elseif ($isAcademicTester && $authStaff && $feedbackCourse) {
                $demoFeedback = $existingCourseFeedbacks->where('type', 'demo')->values();
                $targetSession = $feedbackSessions->first();

                if ($demoFeedback->isEmpty() && $targetSession) {
                    $sessionEnd = \Carbon\Carbon::parse($targetSession->session_date . ' ' . $targetSession->end_time);
                    $feedbackAction = array_merge($feedbackAction, [
                        'show_add' => true,
                        'show_view' => false,
                        'url' => route('students.feedback.demo.create', [
                            'id' => $student->id,
                            'staff_schedule_id' => $feedbackCourse->id,
                            'session_id' => $targetSession->id,
                        ]),
                        'label' => 'Performance Report',
                        'title' => 'Add Performance Report',
                        'type' => 'demo',
                        'is_overdue' => now()->gt($sessionEnd->copy()->addHours(24)),
                        'view_feedbacks' => collect(),
                    ]);
                } elseif ($demoFeedback->isNotEmpty()) {
                    $feedbackAction['show_view'] = true;
                    $feedbackAction['title'] = 'View Feedback';
                    $feedbackAction['type'] = 'demo';
                    $feedbackAction['view_feedbacks'] = $demoFeedback;
                }
            }

            $hasDelayedFeedback = false;
            if ($isAcademicSelfScoped) {
                $hasDelayedFeedback = (bool) $feedbackAction['is_overdue'];
            } else {
                foreach ($student->courseStudents as $studentCourse) {
                    if (!$studentCourse->course || !$studentCourse->course->scheduledSessions) {
                        continue;
                    }

                    foreach ($studentCourse->course->scheduledSessions as $session) {
                        $feedbackType = match ($session->session_number) {
                            1 => 'initial',
                            4 => 'mid',
                            8 => 'final',
                            default => null,
                        };

                        if (!$feedbackType) {
                            continue;
                        }

                        $sessionEndDateTime = \Carbon\Carbon::parse($session->session_date . ' ' . $session->end_time);
                        $hasFeedback = $student->teacherFeedbacks
                            ->where('staff_schedule_id', $studentCourse->course->id)
                            ->where('type', $feedbackType)
                            ->isNotEmpty();

                        if (now()->greaterThan($sessionEndDateTime->copy()->addHours(12)) && !$hasFeedback) {
                            $hasDelayedFeedback = true;
                            break 2;
                        }
                    }
                }
            }

            return [
                'departmentName' => $departmentName,
                'addedByName' => $addedByName,
                'trackTypeName' => $trackTypeName,
                'programTypeName' => $programTypeName,
                'levelName' => $levelName,
                'sessionName' => $sessionName,
                'trackName' => $trackName,
                'categoryName' => $categoryName,
                'instructorName' => $instructorName,
                'instructorId' => $instructorId,
                'uniquePrimaryLeaders' => $uniquePrimaryLeaders,
                'uniquePrimaryAdmins' => $uniquePrimaryAdmins,
                'uniqueSecondaryLeaders' => $uniqueSecondaryLeaders,
                'uniqueSecondaryAdmins' => $uniqueSecondaryAdmins,
                'supervisorName' => $supervisorName,
                'supervisorId' => $supervisorId,
                'addedById' => $addedById,
                'hasDelayedFeedback' => $hasDelayedFeedback,
                'lastSessionDate' => $student->last_session_date ?? 'N/A',
                'feedbackAction' => $feedbackAction,
            ];
        };
    @endphp

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title title="Students"
                    description="Browse student records, filter by status, and follow related staff or schedule assignments.">
                    @if ($canCreateStudent)
                        <a href="{{ route('students.create') }}" class="asset-btn asset-btn--primary">
                            + Add New Student
                        </a>
                    @endif
                </x-page-title>

                @if (request('staff_id') && $staffName)
                    <div class="ui-card">
                        <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap p-3">
                            <div>
                                <h6 class="mb-1 ui-title">Filtered By Staff</h6>
                                <p class="mb-0 ui-muted">
                                    Showing students linked to {{ $staffName->first_name }} {{ $staffName->last_name }}.
                                </p>
                            </div>

                            <a href="javascript:history.back()" class="asset-btn asset-btn--secondary">
                                Return Back
                            </a>
                        </div>
                    </div>
                @elseif (request('staffScheduleId'))
                    <div class="ui-card">
                        <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap p-3">
                            <div>
                                <h6 class="mb-1 ui-title">Filtered By Schedule</h6>
                                <p class="mb-0 ui-muted">
                                    Showing students linked to schedule #{{ request('staffScheduleId') }}.
                                </p>
                            </div>

                            <a href="javascript:history.back()" class="asset-btn asset-btn--secondary">
                                Return Back
                            </a>
                        </div>
                    </div>
                @endif

                <div class="d-flex align-items-center gap-3 flex-wrap">
                    <div class="student-filter-tabs" role="tablist" aria-label="Student list type">
                        <a href="{{ $allStudentsTabUrl }}"
                            class="student-filter-tab {{ !$isWaitingListFilter && !$isFrozenListFilter && !$isFinishedListFilter && !$isAssignedListFilter && !$hasRenewalFilter && !$isCurrentStudentType ? 'is-active' : '' }}"
                            role="tab" aria-selected="{{ !$isWaitingListFilter && !$isFrozenListFilter && !$isFinishedListFilter && !$isAssignedListFilter && !$hasRenewalFilter && !$isCurrentStudentType ? 'true' : 'false' }}">
                            All Students
                        </a>
                        <a href="{{ $currentStudentsTabUrl }}"
                            class="student-filter-tab {{ !$isWaitingListFilter && !$isFrozenListFilter && !$isFinishedListFilter && !$isAssignedListFilter && !$hasRenewalFilter && $isCurrentStudentType ? 'is-active' : '' }}"
                            role="tab" aria-selected="{{ !$isWaitingListFilter && !$isFrozenListFilter && !$isFinishedListFilter && !$isAssignedListFilter && !$hasRenewalFilter && $isCurrentStudentType ? 'true' : 'false' }}">
                            Current
                        </a>
                        <a href="{{ $dueRenewalTabUrl }}"
                            class="student-filter-tab {{ $isDueRenewalFilter ? 'is-active' : '' }}"
                            role="tab" aria-selected="{{ $isDueRenewalFilter ? 'true' : 'false' }}">
                            Students due for renewal
                        </a>
                        <a href="{{ $renewedStudentsTabUrl }}"
                            class="student-filter-tab {{ $isRenewedStudentsFilter ? 'is-active' : '' }}"
                            role="tab" aria-selected="{{ $isRenewedStudentsFilter ? 'true' : 'false' }}">
                            Renewed students
                        </a>
                        <a href="{{ $oldDataTabUrl }}"
                            class="student-filter-tab {{ $isOldDataFilter ? 'is-active' : '' }}"
                            role="tab" aria-selected="{{ $isOldDataFilter ? 'true' : 'false' }}">
                            Old Data (completed and renewed)
                        </a>
                        <a href="{{ $assignedListTabUrl }}"
                            class="student-filter-tab {{ $isAssignedListFilter ? 'is-active' : '' }}"
                            role="tab" aria-selected="{{ $isAssignedListFilter ? 'true' : 'false' }}">
                            Assigned
                        </a>
                        <a href="{{ $waitingListTabUrl }}"
                            class="student-filter-tab {{ $isWaitingListFilter ? 'is-active' : '' }}"
                            role="tab" aria-selected="{{ $isWaitingListFilter ? 'true' : 'false' }}">
                            Waiting List
                        </a>
                        {{-- <a href="{{ $frozenListTabUrl }}"
                            class="student-filter-tab {{ $isFrozenListFilter ? 'is-active' : '' }}"
                            role="tab" aria-selected="{{ $isFrozenListFilter ? 'true' : 'false' }}">
                            Frozen Students
                        </a> --}}
                        <a href="{{ $finishedListTabUrl }}"
                            class="student-filter-tab {{ $isFinishedListFilter ? 'is-active' : '' }}"
                            role="tab" aria-selected="{{ $isFinishedListFilter ? 'true' : 'false' }}">
                            Finished
                        </a>
                    </div>

                    @if ($isFinishedListFilter)
                        @php
                            $currentYear = date('Y');
                            $selectedYear = request('finished_year', $currentYear);
                            $selectedQuarter = request('finished_quarter', ceil(date('n') / 3));
                        @endphp
                        <div class="ms-auto d-flex align-items-center gap-2">
                            <div class="d-flex bg-white rounded-pill p-1 border shadow-sm">
                                @foreach ([1 => 'Q1', 2 => 'Q2', 3 => 'Q3', 4 => 'Q4'] as $qNum => $qLabel)
                                    <a href="{{ route('students.index', array_merge($persistentQuery, ['finished_quarter' => $qNum])) }}"
                                        class="px-3 py-1 rounded-pill text-decoration-none transition-all {{ $selectedQuarter == $qNum ? 'bg-primary text-white shadow-sm' : 'text-muted' }}"
                                        style="font-size: 0.85rem; font-weight: 600;">
                                        {{ $qLabel }}
                                    </a>
                                @endforeach
                            </div>
                            <div class="dropdown">
                                <button class="btn bg-white border rounded-pill px-3 shadow-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" style="font-size: 0.85rem; font-weight: 600;">
                                    {{ $selectedYear }}
                                </button>
                                <ul class="dropdown-menu shadow border-0 mt-2">
                                    @for ($y = $currentYear; $y >= 2023; $y--)
                                        <li>
                                            <a class="dropdown-item {{ $selectedYear == $y ? 'active' : '' }}"
                                               href="{{ route('students.index', array_merge($persistentQuery, ['finished_year' => $y])) }}">
                                                {{ $y }}
                                            </a>
                                        </li>
                                    @endfor
                                </ul>
                            </div>
                        </div>
                    @endif
                </div>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-wrap">
                            <h6 class="mb-0 ui-title" style="margin-right: auto;">Filters</h6>




                            @php
                                $tableFilters = [];
                                $tableFilterLabels = [];
                                if (!$isWaitingListFilter && !$isFrozenListFilter && !$isFinishedListFilter && !$isAssignedListFilter && !$hasRenewalFilter) {
                                    $tableFilters = [
                                        'student_type' => [
                                            'new' => 'New',
                                            'old' => 'Old',
                                            'demo' => 'Demo',
                                            'current' => 'Current',
                                        ],
                                    ];
                                    $tableFilterLabels = ['student_type' => 'Student Type'];
                                }

                                $tableControlsPreserveQuery = [];
                                if ($isWaitingListFilter) {
                                    $tableControlsPreserveQuery = [
                                        'waiting_list' => 1,
                                        'wl_department' => request('wl_department'),
                                        'wl_track' => request('wl_track'),
                                    ];
                                } elseif ($hasRenewalFilter) {
                                    $tableControlsPreserveQuery = ['renewal_filter' => $renewalFilter];
                                }
                            @endphp

                            <x-table-controls :action="$filtersAction" :filters="$tableFilters" :filterLabels="$tableFilterLabels"
                                searchPlaceholder="Search by name, code" formId="students-table-controls"
                                :preserveQuery="$tableControlsPreserveQuery">

                                @if ($isWaitingListFilter)
                                    <input type="hidden" name="wl_department" id="hidden_wl_department" value="{{ request('wl_department') }}">
                                    <input type="hidden" name="wl_track" id="hidden_wl_track" value="{{ request('wl_track') }}">

                                    <select id="select_wl_department" class="form-select form-select-sm" style="width:auto"
                                        onchange="document.getElementById('hidden_wl_department').value=this.value; this.form.submit()">
                                        <option value="">All Departments</option>
                                        @foreach ($wlDepartments as $dept)
                                            <option value="{{ $dept->slug }}"
                                                {{ request('wl_department') == $dept->slug ? 'selected' : '' }}>
                                                {{ $dept->name }}
                                            </option>
                                        @endforeach
                                    </select>

                                    <select id="select_wl_track" class="form-select form-select-sm" style="width:auto"
                                        onchange="document.getElementById('hidden_wl_track').value=this.value; this.form.submit()">
                                        <option value="">All Programs</option>
                                        @foreach ($wlTracks as $track)
                                            <option value="{{ $track->id }}"
                                                {{ request('wl_track') == $track->id ? 'selected' : '' }}>
                                                {{ $track->name_en }}
                                            </option>
                                        @endforeach
                                    </select>
                                @endif
                            </x-table-controls>

                            <div class="student-view-toggle" role="group" aria-label="View toggle">
                                <button type="button" class="student-view-toggle__btn" id="tableViewBtn" title="Table View">
                                    <iconify-icon icon="material-symbols:table-rows"></iconify-icon>
                                </button>
                                <button type="button" class="student-view-toggle__btn" id="cardViewBtn" title="Card View">
                                    <iconify-icon icon="material-symbols:grid-view"></iconify-icon>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div id="studentTableView" class="student-table-view">
                        <x-table :headers="$headers" :paginator="$students" emptyMessage="No students found."
                            :emptyActionText="$canCreateStudent ? '+ Add New Student' : null"
                            :emptyActionUrl="$canCreateStudent ? route('students.create') : null">
                            @foreach ($students as $student)
                                @php
                                    $meta = $studentMeta($student);
                                    $isNewStudent = $student->courseStudents->isEmpty();
                                @endphp



                                <tr>
                                    <td class="text-center">
                                        <img src="{{ $student->student_photo ?? asset('assets/images/logo.png') }}"
                                            alt="{{ $student->first_name }}" class="student-avatar">
                                    </td>

                                    <td class="text-center">
                                        <span class="ui-pill ui-pill--neutral">{{ $student->student_code ?? 'N/A' }}</span>
                                    </td>

                                    <td class="text-center">
                                        <a href="{{ route('students.show', $student->id) }}" class="ui-title student-name-link">
                                            @if ($meta['hasDelayedFeedback'])
                                                <iconify-icon icon="ri:error-warning-fill"
                                                    class="student-warning-icon"></iconify-icon>
                                            @endif
                                            <span>{{ $student->first_name }} {{ $student->last_name }}</span>
                                            @if ($isNewStudent)
                                                <span class="ui-pill ui-pill--success">New Student</span>
                                            @endif
                                        </a>
                                    </td>

                                    @if (!$isWaitingListFilter)
                                        <td class="text-center ui-muted">{{ $meta['levelName'] }}</td>
                                        <td class="text-center">
                                            <span class="ui-pill ui-pill--neutral">{{ $meta['sessionName'] }}</span>
                                        </td>
                                    @endif

                                    @if (!$isWaitingListFilter)
                                        <td class="text-center ui-muted">{{ $meta['trackName'] }}</td>
                                        <td class="text-center ui-muted">{{ $meta['categoryName'] }}</td>
                                    @endif

                                    @if ($isWaitingListFilter)
                                        @php
                                            $firstInvoice  = $student->invoices->first();
                                            $extraInvoices = $student->invoices->skip(1);
                                            $invoiceTrack    = $firstInvoice?->track?->name_en ?? 'N/A';
                                            $invoiceCategory = $firstInvoice?->track?->categories?->name_en ?? 'N/A';
                                            $invoiceCreator  = $firstInvoice?->createdBy?->staff;
                                            $creatorName     = $invoiceCreator ? trim($invoiceCreator->first_name . ' ' . $invoiceCreator->last_name) : ($firstInvoice?->createdBy?->full_name ?? 'N/A');
                                            $creatorStaffId  = $invoiceCreator?->id;
                                            $creatorDept     = $invoiceCreator?->department?->name ?? 'N/A';
                                            $invoiceDate     = $firstInvoice?->created_at?->format('M d, Y') ?? 'N/A';
                                        @endphp

                                        <td class="text-center ui-muted">{{ $invoiceTrack }}</td>
                                        <td class="text-center ui-muted">{{ $invoiceCategory }}</td>

                                        <td class="text-center ui-muted">
                                            @if ($creatorStaffId)
                                                <a href="{{ config('app.HR_URL') . 'staffs/' . $creatorStaffId }}" class="staff-filter-link">
                                                    {{ $creatorName }}
                                                </a>
                                            @else
                                                {{ $creatorName }}
                                            @endif
                                            @if ($extraInvoices->isNotEmpty())
                                                <button class="btn btn-link btn-sm p-0 mt-1"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#extra-invoices-{{ $student->id }}"
                                                    aria-expanded="false">
                                                    <small>+{{ $extraInvoices->count() }} more</small>
                                                </button>
                                            @endif
                                        </td>

                                        <td class="text-center ui-muted">{{ $creatorDept }}</td>
                                        <td class="text-center ui-muted">{{ $invoiceDate }}</td>

                                        <td class="text-center">
                                            <div class="ui-actions justify-content-center">
                                                <x-table-action type="view" :url="route('students.show', $student->id)" title="View Student" />
                                                @can('retention_students_update')
                                                    <x-table-action type="edit" :url="route('students.edit', $student->id)" title="Edit Student" />
                                                @endcan
                                            </div>
                                        </td>
                                    </tr>

                                    {{-- Collapse rows for extra invoices --}}
                                    @if ($extraInvoices->isNotEmpty())
                                        <tr class="collapse" id="extra-invoices-{{ $student->id }}">
                                            <td colspan="9" class="p-0">
                                                <table class="table table-sm mb-0 bg-light">
                                                    <thead class="table-secondary">
                                                        <tr>
                                                            <th class="text-center">Program</th>
                                                            <th class="text-center">Category</th>
                                                            <th class="text-center">Invoice Creator</th>
                                                            <th class="text-center">Department</th>
                                                            <th class="text-center">Invoice Date</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($extraInvoices as $inv)
                                                            @php
                                                                $invCreator = $inv->createdBy?->staff;
                                                                $invCreatorName = $invCreator ? trim($invCreator->first_name . ' ' . $invCreator->last_name) : ($inv->createdBy?->full_name ?? 'N/A');
                                                                $invCreatorStaffId = $invCreator?->id;
                                                            @endphp
                                                            <tr>
                                                                <td class="text-center">{{ $inv->track?->name_en ?? 'N/A' }}</td>
                                                                <td class="text-center">{{ $inv->track?->categories?->name_en ?? 'N/A' }}</td>
                                                                <td class="text-center">
                                                                    @if ($invCreatorStaffId)
                                                                        <a href="{{ config('app.HR_URL') . 'staffs/' . $invCreatorStaffId }}" class="staff-filter-link">
                                                                            {{ $invCreatorName }}
                                                                        </a>
                                                                    @else
                                                                        {{ $invCreatorName }}
                                                                    @endif
                                                                </td>
                                                                <td class="text-center">{{ $invCreator?->department?->name ?? 'N/A' }}</td>
                                                                <td class="text-center">{{ $inv->created_at?->format('M d, Y') ?? 'N/A' }}</td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    @endif

                                    @else
                                        {{-- Normal (non-waiting-list) cells --}}
                                        {{-- track & category already rendered above --}}

                                    @unless ($hideInstructorAndSupervisorColumns)
                                        <td class="text-center ui-muted">
                                            @if ($meta['instructorId'] && $meta['instructorName'] !== 'N/A')
                                                <a href="{{ config('app.HR_URL') . 'staffs/' . ($meta['instructorId'] ?? '#') }}">
                                                    {{ $meta['instructorName'] }}
                                                </a>
                                            @else
                                                {{ $meta['instructorName'] }}
                                            @endif
                                        </td>
                                    @endunless

                                    <td class="text-center ui-muted">
                                        @forelse ($meta['uniquePrimaryLeaders'] as $leaderStaff)
                                            <a href="{{ config('app.HR_URL') . 'staffs/' . ($leaderStaff->id ?? '#') }}" class="d-block">
                                                {{ $leaderStaff->full_name ?: ($leaderStaff->first_name . ' ' . $leaderStaff->last_name) }}
                                            </a>
                                        @empty
                                            N/A
                                        @endforelse
                                    </td>

                                    <td class="text-center ui-muted">
                                        @forelse ($meta['uniquePrimaryAdmins'] as $adminUser)
                                            <a href="{{ config('app.HR_URL') . 'staffs/' . ($adminUser->staff->id ?? '#') }}" class="d-block">
                                                {{ $adminUser->staff->full_name ?? $adminUser->full_name ?? 'Admin' }}
                                            </a>
                                        @empty
                                            N/A
                                        @endforelse
                                    </td>

                                    <td class="text-center ui-muted">
                                        @forelse ($meta['uniqueSecondaryLeaders'] as $leaderStaff)
                                            <a href="{{ config('app.HR_URL') . 'staffs/' . ($leaderStaff->id ?? '#') }}" class="d-block">
                                                {{ $leaderStaff->full_name ?: ($leaderStaff->first_name . ' ' . $leaderStaff->last_name) }}
                                            </a>
                                        @empty
                                            N/A
                                        @endforelse
                                    </td>

                                    <td class="text-center ui-muted">
                                        @forelse ($meta['uniqueSecondaryAdmins'] as $adminUser)
                                            <a href="{{ config('app.HR_URL') . 'staffs/' . ($adminUser->staff->id ?? '#') }}" class="d-block">
                                                {{ $adminUser->staff->full_name ?? $adminUser->full_name ?? 'Admin' }}
                                            </a>
                                        @empty
                                            N/A
                                        @endforelse
                                    </td>

                                    @unless ($hideInstructorAndSupervisorColumns)
                                        <td class="text-center ui-muted">
                                            @if ($meta['supervisorId'] && $meta['supervisorName'] !== 'N/A')
                                                <a href="{{ config('app.HR_URL') . 'staffs/' . ($meta['supervisorId'] ?? '#') }}"
                                                    class="staff-filter-link">
                                                    {{ $meta['supervisorName'] }}
                                                </a>
                                            @else
                                                {{ $meta['supervisorName'] }}
                                            @endif
                                        </td>
                                    @endunless

                                    @unless ($isAcademicSelfScoped)
                                        <td class="text-center ui-muted">{{ $meta['departmentName'] }}</td>
                                        <td class="text-center ui-muted">
                                            @if ($meta['addedById'] && $meta['addedByName'] !== 'N/A')
                                                <a href="{{ config('app.HR_URL') . 'staffs/' . ($meta['addedById'] ?? '#') }}"
                                                    class="staff-filter-link">
                                                    {{ $meta['addedByName'] }}
                                                </a>
                                            @else
                                                {{ $meta['addedByName'] }}
                                            @endif
                                        </td>
                                    @endunless

                                    @if ($showTesterColumns)
                                        <td class="text-center">
                                            <span class="ui-pill ui-pill--info">{{ $meta['trackTypeName'] }}</span>
                                        </td>
                                        <td class="text-center">
                                            <span class="ui-pill ui-pill--neutral">{{ $meta['programTypeName'] }}</span>
                                        </td>
                                    @endif

                                    @if ($isFinishedListFilter || $isRenewedStudentsFilter || $isOldDataFilter)
                                        <td class="text-center">
                                            <span class="ui-pill ui-pill--warn">{{ $meta['lastSessionDate'] }}</span>
                                        </td>
                                    @endif

                                    <td class="text-center">
                                        <div class="ui-actions justify-content-center">
                                            <x-table-action type="view" :url="route('students.show', $student->id)"
                                                title="View Student" />

                                            @if ($meta['feedbackAction']['show_misplaced'])
                                                <form action="{{ route('storeUrgent') }}" method="POST" class="d-inline">
                                                    @csrf
                                                    <input type="hidden" name="course_id" value="{{ $meta['feedbackAction']['misplaced_course_id'] }}">
                                                    <input type="hidden" name="session_id" value="{{ $meta['feedbackAction']['misplaced_session_id'] }}">
                                                    <input type="hidden" name="student_id" value="{{ $student->id }}">
                                                    <input type="hidden" name="message" value="Misplaced Request">
                                                    <button type="submit" class="student-action-btn student-action-btn--warn" title="Misplaced">
                                                        <iconify-icon icon="mdi:alert-outline" class="text-lg"></iconify-icon>
                                                        <span class="ms-1">Misplaced</span>
                                                    </button>
                                                </form>
                                            @endif

                                            @if ($meta['feedbackAction']['show_add'])
                                                <a href="{{ $meta['feedbackAction']['url'] }}"
                                                    class="student-action-btn {{ $meta['feedbackAction']['is_overdue'] ? 'student-action-btn--danger' : 'student-action-btn--primary' }}"
                                                    title="{{ $meta['feedbackAction']['title'] }}">
                                                    <iconify-icon icon="mdi:comment-plus-outline" class="text-lg"></iconify-icon>
                                                    <span class="ms-1">{{ $meta['feedbackAction']['label'] }}</span>
                                                </a>
                                            @elseif ($meta['feedbackAction']['show_view'])
                                                <button type="button" class="student-action-btn student-action-btn--info"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#feedbackModal{{ $student->id }}"
                                                    title="{{ $meta['feedbackAction']['title'] }}">
                                                    <iconify-icon icon="mdi:comment-text-outline" class="text-lg"></iconify-icon>
                                                    <span class="ms-1">View Feedback</span>
                                                </button>
                                            @endif

                                            @can('retention_students_update')
                                                <x-table-action type="edit" :url="route('students.edit', $student->id)"
                                                    title="Edit Student" />
                                            @endcan
                                        </div>
                                    </td>
                                </tr>
                                    @endif {{-- end @else (non-waiting-list) --}}
                            @endforeach
                        </x-table>
                    </div>

                    <div id="studentCardView" class="student-cards-grid">
                        @forelse ($students as $student)
                            @php
                                $meta = $studentMeta($student);
                                $isNewStudent = $student->courseStudents->isEmpty();
                            @endphp

                            @if ($isWaitingListFilter)
                                @php
                                    $firstInvoice   = $student->invoices->first();
                                    $extraInvoices  = $student->invoices->skip(1);
                                    $wlTrack        = $firstInvoice?->track?->name_en ?? 'N/A';
                                    $wlCategory     = $firstInvoice?->track?->categories?->name_en ?? 'N/A';
                                    $wlCreator      = $firstInvoice?->createdBy?->staff;
                                    $wlCreatorName  = $wlCreator ? trim($wlCreator->first_name . ' ' . $wlCreator->last_name) : ($firstInvoice?->createdBy?->full_name ?? 'N/A');
                                    $wlCreatorId    = $wlCreator?->id;
                                    $wlDept         = $wlCreator?->department?->name ?? 'N/A';
                                    $wlDate         = $firstInvoice?->created_at?->format('M d, Y') ?? 'N/A';
                                @endphp

                                <article class="student-card">
                                    <div class="student-card__top">
                                        <img src="{{ $student->student_photo ?? asset('assets/images/logo.png') }}"
                                            alt="{{ $student->first_name }}" class="student-card__avatar">
                                        <div class="student-card__identity">
                                            <a href="{{ route('students.show', $student->id) }}" class="student-card__name">
                                                <span>{{ $student->first_name }} {{ $student->last_name }}</span>
                                            </a>
                                            <span class="ui-pill ui-pill--neutral">Code: {{ $student->student_code ?? 'N/A' }}</span>
                                        </div>
                                    </div>

                                    <div class="student-card__details">
                                        <div class="student-card__detail">
                                            <span class="student-card__label">Program</span>
                                            <strong class="student-card__value">{{ $wlTrack }}</strong>
                                        </div>
                                        <div class="student-card__detail">
                                            <span class="student-card__label">Category</span>
                                            <strong class="student-card__value">{{ $wlCategory }}</strong>
                                        </div>
                                        <div class="student-card__detail">
                                            <span class="student-card__label">Invoice Creator</span>
                                            <strong class="student-card__value">
                                                @if ($wlCreatorId)
                                                    <a href="{{ config('app.HR_URL') . 'staffs/' . $wlCreatorId }}" class="staff-filter-link">
                                                        {{ $wlCreatorName }}
                                                    </a>
                                                @else
                                                    {{ $wlCreatorName }}
                                                @endif
                                            </strong>
                                        </div>
                                        <div class="student-card__detail">
                                            <span class="student-card__label">Department</span>
                                            <strong class="student-card__value">{{ $wlDept }}</strong>
                                        </div>
                                        <div class="student-card__detail">
                                            <span class="student-card__label">Invoice Date</span>
                                            <strong class="student-card__value">{{ $wlDate }}</strong>
                                        </div>

                                        @if ($extraInvoices->isNotEmpty())
                                            <div class="student-card__detail" style="grid-column: 1/-1">
                                                <button class="btn btn-link btn-sm p-0"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#card-extra-{{ $student->id }}">
                                                    +{{ $extraInvoices->count() }} more invoice(s)
                                                </button>
                                                <div class="collapse mt-2" id="card-extra-{{ $student->id }}">
                                                    @foreach ($extraInvoices as $inv)
                                                        @php
                                                            $ec = $inv->createdBy?->staff;
                                                            $ecName = $ec ? trim($ec->first_name . ' ' . $ec->last_name) : ($inv->createdBy?->full_name ?? 'N/A');
                                                        @endphp
                                                        <div class="border rounded p-2 mb-1 small">
                                                            <div><span class="text-muted">Program:</span> {{ $inv->track?->name_en ?? 'N/A' }}</div>
                                                            <div><span class="text-muted">Category:</span> {{ $inv->track?->categories?->name_en ?? 'N/A' }}</div>
                                                            <div><span class="text-muted">Creator:</span>
                                                                @if ($ec?->id)
                                                                    <a href="{{ config('app.HR_URL') . 'staffs/' . $ec->id }}">{{ $ecName }}</a>
                                                                @else
                                                                    {{ $ecName }}
                                                                @endif
                                                            </div>
                                                            <div><span class="text-muted">Date:</span> {{ $inv->created_at?->format('M d, Y') }}</div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif
                                    </div>

                                    <div class="ui-actions justify-content-end">
                                        <x-table-action type="view" :url="route('students.show', $student->id)" title="View Student" />
                                        @can('retention_students_update')
                                            <x-table-action type="edit" :url="route('students.edit', $student->id)" title="Edit Student" />
                                        @endcan
                                    </div>
                                </article>

                            @else
                                <article class="student-card">
                                <div class="student-card__top">
                                    <img src="{{ $student->student_photo ?? asset('assets/images/logo.png') }}"
                                        alt="{{ $student->first_name }}" class="student-card__avatar">

                                    <div class="student-card__identity">
                                        <a href="{{ route('students.show', $student->id) }}" class="student-card__name">
                                            @if ($meta['hasDelayedFeedback'])
                                                <iconify-icon icon="ri:error-warning-fill"
                                                    class="student-warning-icon"></iconify-icon>
                                            @endif
                                            <span>{{ $student->first_name }} {{ $student->last_name }}</span>
                                            @if ($isNewStudent)
                                                <span class="ui-pill ui-pill--success">New Student</span>
                                            @endif
                                        </a>
                                        <span class="ui-pill ui-pill--neutral">Code:
                                            {{ $student->student_code ?? 'N/A' }}</span>
                                    </div>
                                </div>

                                <div class="student-card__details">
                                    @unless ($hideInstructorAndSupervisorColumns)
                                        <div class="student-card__detail">
                                            <span class="student-card__label">Instructor</span>
                                            <strong class="student-card__value">
                                                @if ($meta['instructorId'] && $meta['instructorName'] !== 'N/A')
                                                    <a href="{{ config('app.HR_URL') . 'staffs/' . ($meta['instructorId'] ?? '#') }}"
                                                        class="staff-filter-link">
                                                        {{ $meta['instructorName'] }}
                                                    </a>
                                                @else
                                                    {{ $meta['instructorName'] }}
                                                @endif
                                            </strong>
                                        </div>
                                    @else
                                        <div class="student-card__detail">
                                            <span class="student-card__label">Session</span>
                                            <strong class="student-card__value">{{ $meta['sessionName'] }}</strong>
                                        </div>
                                    @endunless
                                    <div class="student-card__detail">
                                        <span class="student-card__label">Program</span>
                                        <strong class="student-card__value">{{ $meta['trackName'] }}</strong>
                                    </div>
                                    <div class="student-card__detail">
                                        <span class="student-card__label">Level</span>
                                        <strong class="student-card__value">{{ $meta['levelName'] }}</strong>
                                    </div>
                                    @unless ($isAcademicSelfScoped)
                                        <div class="student-card__detail">
                                            <span class="student-card__label">Department</span>
                                            <strong class="student-card__value">{{ $meta['departmentName'] }}</strong>
                                        </div>
                                        <div class="student-card__detail">
                                            <span class="student-card__label">Added By</span>
                                            <strong class="student-card__value">
                                                @if ($meta['addedById'] && $meta['addedByName'] !== 'N/A')
                                                    <a href="{{ config('app.HR_URL') . 'staffs/' . ($meta['addedById'] ?? '#') }}"
                                                        class="staff-filter-link">
                                                        {{ $meta['addedByName'] }}
                                                    </a>
                                                @else
                                                    {{ $meta['addedByName'] }}
                                                @endif
                                            </strong>
                                        </div>
                                    @endunless
                                </div>

                                <div class="ui-actions justify-content-end">
                                    <x-table-action type="view" :url="route('students.show', $student->id)"
                                        title="View Student" />

                                    @if ($meta['feedbackAction']['show_misplaced'])
                                        <form action="{{ route('storeUrgent') }}" method="POST" class="d-inline">
                                            @csrf
                                            <input type="hidden" name="course_id" value="{{ $meta['feedbackAction']['misplaced_course_id'] }}">
                                            <input type="hidden" name="session_id" value="{{ $meta['feedbackAction']['misplaced_session_id'] }}">
                                            <input type="hidden" name="student_id" value="{{ $student->id }}">
                                            <input type="hidden" name="message" value="Misplaced Request">
                                            <button type="submit" class="student-action-btn student-action-btn--warn" title="Misplaced">
                                                <iconify-icon icon="mdi:alert-outline" class="text-lg"></iconify-icon>
                                                <span class="ms-1">Misplaced</span>
                                            </button>
                                        </form>
                                    @endif

                                    @if ($meta['feedbackAction']['show_add'])
                                        <a href="{{ $meta['feedbackAction']['url'] }}"
                                            class="student-action-btn {{ $meta['feedbackAction']['is_overdue'] ? 'student-action-btn--danger' : 'student-action-btn--primary' }}"
                                            title="{{ $meta['feedbackAction']['title'] }}">
                                            <iconify-icon icon="mdi:comment-plus-outline" class="text-lg"></iconify-icon>
                                            <span class="ms-1">{{ $meta['feedbackAction']['label'] }}</span>
                                        </a>
                                    @elseif ($meta['feedbackAction']['show_view'])
                                        <button type="button" class="student-action-btn student-action-btn--info"
                                            data-bs-toggle="modal"
                                            data-bs-target="#feedbackModal{{ $student->id }}"
                                            title="{{ $meta['feedbackAction']['title'] }}">
                                            <iconify-icon icon="mdi:comment-text-outline" class="text-lg"></iconify-icon>
                                            <span class="ms-1">View Feedback</span>
                                        </button>
                                    @endif

                                    @can('retention_students_update')
                                        <x-table-action type="edit" :url="route('students.edit', $student->id)"
                                            title="Edit Student" />
                                    @endcan
                                </div>
                            </article>
                            @endif {{-- end @else (non-waiting-list card) --}}
                        @empty
                            <div class="student-empty-state">
                                <h6 class="mb-2 ui-title">No students found.</h6>
                                <p class="mb-3 ui-muted">Try changing the filters or search term, or add a new student if
                                    needed.</p>

                                @if ($canCreateStudent)
                                    <a href="{{ route('students.create') }}" class="asset-btn asset-btn--primary">
                                        + Add New Student
                                    </a>
                                @endif
                            </div>
                        @endforelse
                    </div>

                    @foreach ($students as $student)
                        @php
                            $meta = $studentMeta($student);
                            $feedbackItems = $meta['feedbackAction']['view_feedbacks'] ?? collect();
                        @endphp
                        @if ($feedbackItems->isNotEmpty())
                            <div class="modal fade" id="feedbackModal{{ $student->id }}" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-xl modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <div class="modal-title">
                                                Feedback Details - {{ $student->first_name }} {{ $student->last_name }}
                                                <span class="badge bg-light text-dark ms-2">{{ ucfirst($meta['feedbackAction']['type']) }} Feedback</span>
                                            </div>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>

                                        <div class="modal-body">
                                            @foreach ($feedbackItems as $feedback)
                                                <div class="border rounded p-3 mb-4 shadow-sm">
                                                    <div class="fw-medium text-primary mb-2">
                                                        {{ ucfirst($feedback->type) }} Feedback
                                                        <span class="badge bg-secondary ms-2">{{ $feedback->created_at->format('Y-m-d') }}</span>
                                                    </div>

                                                    @if ($feedback->submission_status)
                                                        <div class="mb-3">
                                                            <strong>Submission Status:</strong>
                                                            @if ($feedback->submission_status == 'late')
                                                                <span class="badge bg-danger">Late</span>
                                                            @elseif($feedback->submission_status == 'on_time')
                                                                <span class="badge bg-success">On Time</span>
                                                            @else
                                                                <span class="badge bg-warning text-dark">{{ ucfirst($feedback->submission_status) }}</span>
                                                            @endif
                                                        </div>
                                                    @endif

                                                    <div class="row g-2 mb-3">
                                                        @if ($feedback->level)<div class="col-md-3"><strong>Level:</strong> {{ $feedback->level }}</div>@endif
                                                        @if ($feedback->need)<div class="col-md-3"><strong>Need:</strong> {{ $feedback->need }}</div>@endif
                                                        @if ($feedback->result)<div class="col-md-3"><strong>Result:</strong> {{ $feedback->result }}</div>@endif
                                                        @if ($feedback->score)<div class="col-md-3"><strong>Score:</strong> {{ $feedback->score }}</div>@endif
                                                        @if ($feedback->up_to_level)<div class="col-md-3"><strong>Up to Level:</strong> {{ $feedback->up_to_level }}</div>@endif
                                                        @if ($feedback->suggested_levels)<div class="col-md-3"><strong>Suggested Levels:</strong> {{ $feedback->suggested_levels }}</div>@endif
                                                        @if ($feedback->suggested_band)<div class="col-md-3"><strong>Suggested Band:</strong> {{ $feedback->suggested_band }}</div>@endif
                                                    </div>

                                                    @if ($feedback->first_feedback || $feedback->comment)
                                                        <div class="mb-3 p-3 border rounded">
                                                            <strong>Summary:</strong>
                                                            <p class="mb-0 text-muted">{{ $feedback->first_feedback ?? $feedback->comment }}</p>
                                                        </div>
                                                    @endif

                                                    @if ($feedback->type === 'final')
                                                        <div class="fw-medium text-secondary mt-3 mb-2 border-top pt-2">Skill Ratings</div>
                                                        <div class="row g-2">
                                                            @if ($feedback->grammar)<div class="col-md-4"><strong>Grammar:</strong> {{ $feedback->grammar }}</div>@endif
                                                            @if ($feedback->speaking)<div class="col-md-4"><strong>Speaking:</strong> {{ $feedback->speaking }}</div>@endif
                                                            @if ($feedback->appropriacy)<div class="col-md-4"><strong>Appropriacy:</strong> {{ $feedback->appropriacy }}</div>@endif
                                                            @if ($feedback->listening)<div class="col-md-4"><strong>Listening:</strong> {{ $feedback->listening }}</div>@endif
                                                            @if ($feedback->reading)<div class="col-md-4"><strong>Reading:</strong> {{ $feedback->reading }}</div>@endif
                                                            @if ($feedback->writing)<div class="col-md-4"><strong>Writing:</strong> {{ $feedback->writing }}</div>@endif
                                                        </div>
                                                    @elseif ($feedback->type === 'demo')
                                                        <div class="row g-2">
                                                            @if ($feedback->demo_listening)<div class="col-md-6"><strong>Listening:</strong> {{ $feedback->demo_listening }}</div>@endif
                                                            @if ($feedback->demo_reading)<div class="col-md-6"><strong>Reading:</strong> {{ $feedback->demo_reading }}</div>@endif
                                                            @if ($feedback->demo_speaking)<div class="col-md-6"><strong>Speaking:</strong> {{ $feedback->demo_speaking }}</div>@endif
                                                            @if ($feedback->demo_vocabulary)<div class="col-md-6"><strong>Vocabulary:</strong> {{ $feedback->demo_vocabulary }}</div>@endif
                                                            @if ($feedback->demo_grammar)<div class="col-md-6"><strong>Grammar:</strong> {{ $feedback->demo_grammar }}</div>@endif
                                                            @if ($feedback->objectivies)<div class="col-12"><strong>Objectivies:</strong> {{ $feedback->objectivies }}</div>@endif
                                                        </div>
                                                    @endif

                                                    @if ($feedback->teachers_note)
                                                        <div class="mt-3 p-2 border-top pt-3">
                                                            <strong>Teacher's Note:</strong>
                                                            <p class="mb-0 fst-italic">{{ $feedback->teachers_note }}</p>
                                                        </div>
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>

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

                    @if ($students->count() && method_exists($students, 'links'))
                        <div id="studentCardPagination" class="student-card-pagination px-4 py-3 border-top border-slate-200">
                            {{ $students->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .student-table-view {
            display: var(--initial-student-table-display, block);
        }

        .student-cards-grid {
            display: var(--initial-student-card-display, none);
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
            gap: 1.25rem;
            padding: 1.5rem;
        }

        .student-card-pagination {
            display: var(--initial-student-card-pagination-display, none);
        }

        .student-view-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .student-filter-tabs {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            background: #eff6ff;
            border-radius: 12px;
            padding: 4px;
        }

        .student-filter-tab {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.45rem 0.8rem;
            border-radius: 10px;
            color: #475569;
            font-size: 0.85rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .student-filter-tab:hover {
            color: #0f172a;
            background: rgba(255, 255, 255, 0.7);
        }

        .student-filter-tab.is-active {
            background: #ffffff;
            color: #1d4ed8;
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
        }

        .student-view-toggle__btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border: 1px solid #dbe4f0;
            border-radius: 12px;
            background: #fff;
            color: #2563eb;
            transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }

        .student-view-toggle__btn:hover {
            border-color: #93c5fd;
            box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
            transform: translateY(-1px);
        }

        #tableViewBtn {
            display: var(--initial-student-table-btn-display, none);
        }

        #cardViewBtn {
            display: var(--initial-student-card-btn-display, inline-flex);
        }

        .student-avatar {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            object-fit: cover;
            border: 1px solid #dbe4f0;
            background: #fff;
        }

        .student-name-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            text-decoration: none;
        }

        .student-warning-icon {
            color: #dc2626;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .student-card {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 1.25rem;
            border: 1px solid #e2e8f0;
            border-radius: 20px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
        }

        .student-card__top {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .student-card__avatar {
            width: 72px;
            height: 72px;
            border-radius: 20px;
            object-fit: cover;
            border: 1px solid #dbe4f0;
            background: #fff;
            flex-shrink: 0;
        }

        .student-card__identity {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            min-width: 0;
        }

        .student-card__name {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            color: #0f172a;
            font-weight: 700;
            text-decoration: none;
            line-height: 1.5;
        }

        .student-card__details {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.9rem;
        }

        .student-card__detail {
            padding: 0.85rem 0.9rem;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.9);
        }

        .student-card__label {
            display: block;
            margin-bottom: 0.3rem;
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .student-card__value {
            color: #0f172a;
            font-size: 0.92rem;
            line-height: 1.5;
        }

        .student-action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.38rem;
            min-height: 34px;
            padding: 0.46rem 0.78rem;
            border-radius: 10px;
            border: 1px solid transparent;
            background: #fff;
            font-size: 0.78rem;
            font-weight: 700;
            line-height: 1;
            text-decoration: none;
            transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
            white-space: nowrap;
        }

        .student-action-btn:hover {
            transform: translateY(-1px);
            text-decoration: none;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
        }

        .student-action-btn iconify-icon {
            font-size: 1rem;
            flex-shrink: 0;
        }

        .student-action-btn--primary {
            border-color: #bfdbfe;
            background: #eff6ff;
            color: #1d4ed8;
        }

        .student-action-btn--primary:hover {
            border-color: #93c5fd;
            background: #dbeafe;
            color: #1e40af;
        }

        .student-action-btn--info {
            border-color: #bae6fd;
            background: #f0f9ff;
            color: #0369a1;
        }

        .student-action-btn--info:hover {
            border-color: #7dd3fc;
            background: #e0f2fe;
            color: #075985;
        }

        .student-action-btn--warn {
            border-color: #fcd34d;
            background: #fffbeb;
            color: #b45309;
        }

        .student-action-btn--warn:hover {
            border-color: #fbbf24;
            background: #fef3c7;
            color: #92400e;
        }

        .student-action-btn--danger {
            border-color: #fca5a5;
            background: #fef2f2;
            color: #dc2626;
        }

        .student-action-btn--danger:hover {
            border-color: #f87171;
            background: #fee2e2;
            color: #b91c1c;
        }

        .student-empty-state {
            grid-column: 1 / -1;
            padding: 2rem;
            text-align: center;
            border: 1px dashed #cbd5e1;
            border-radius: 20px;
            background: #fff;
        }

        @media (max-width: 768px) {
            .student-cards-grid {
                padding: 1rem;
                grid-template-columns: 1fr;
            }

            .student-card__details {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const tableViewBtn = document.getElementById('tableViewBtn');
            const cardViewBtn = document.getElementById('cardViewBtn');
            const tableView = document.getElementById('studentTableView');
            const cardView = document.getElementById('studentCardView');
            const cardPagination = document.getElementById('studentCardPagination');

            function setView(view) {
                const isCard = view === 'card';

                if (tableView) {
                    tableView.style.display = isCard ? 'none' : 'block';
                }

                if (cardView) {
                    cardView.style.display = isCard ? 'grid' : 'none';
                }

                if (cardPagination) {
                    cardPagination.style.display = isCard ? 'block' : 'none';
                }

                if (tableViewBtn) {
                    tableViewBtn.style.display = isCard ? 'inline-flex' : 'none';
                }

                if (cardViewBtn) {
                    cardViewBtn.style.display = isCard ? 'none' : 'inline-flex';
                }

                localStorage.setItem('studentViewPreference', view);
            }

            const savedView = localStorage.getItem('studentViewPreference') || 'table';
            setView(savedView);

            if (tableViewBtn) {
                tableViewBtn.addEventListener('click', function () {
                    setView('table');
                });
            }

            if (cardViewBtn) {
                cardViewBtn.addEventListener('click', function () {
                    setView('card');
                });
            }
        });
    </script>
@endpush