@php
    $filtersOpen = request()->hasAny(['keyword', 'subject_id', 'lesson_id', 'teacher_id', 'type', 'difficulty_level_id']);
    $pageTitle = $pageTitle ?? __('dashboard.Question Bank');
    $pageHeading = $pageHeading ?? __('dashboard.All Questions');
    $pageDescription = $pageDescription ?? __('dashboard.Question bank subtitle');
    $routePrefix = $routePrefix ?? 'admin';
    $indexRoute = $indexRoute ?? $routePrefix . '.questions.index';
    $createRoute = $createRoute ?? $routePrefix . '.questions.create';
    $showTeacherFilter = $showTeacherFilter ?? false;
    $bankView = $bankView ?? ($routePrefix === 'teacher' ? 'teacher_scope' : 'admin');
    $isTeacherBank = str_starts_with($bankView, 'teacher');
    $showAuthorColumn = ! $isTeacherBank;
    $creatorScope = request('creator_scope', 'all');
    $stats = $questionBankData['stats'];
    $typeBreakdown = $questionBankData['type_breakdown'];
    $difficultyBreakdown = $questionBankData['difficulty_breakdown'];
    $subjectCards = $questionBankData['subject_cards'];
    $previewSubject = $questionBankData['preview_subject'];
    $previewQuestions = $questionBankData['preview_questions'];
    $previewSubjectStats = $questionBankData['preview_subject_stats'];
    $typeLabels = $questionBankData['type_labels'];
    $typeIcons = $questionBankData['type_icons'];
    $isArabic = app()->getLocale() === 'ar';

    $teacherScopeFilters = $isTeacherBank
        ? [
            [
                'label' => $isArabic ? ($bankView === 'subject_head_scope' ? 'كل أسئلة القسم' : 'كل الأسئلة المتاحة') : ($bankView === 'subject_head_scope' ? 'All Department Questions' : 'All Available Questions'),
                'route' => route($indexRoute, array_merge(request()->except(['page', 'creator_scope']), ['creator_scope' => 'all'])),
                'active' => $creatorScope !== 'mine',
            ],
            [
                'label' => $isArabic ? ($bankView === 'subject_head_scope' ? 'أسئلة رئيس القسم' : 'أسئلتي المنشأة') : ($bankView === 'subject_head_scope' ? 'Head Created Questions' : 'My Created Questions'),
                'route' => route($indexRoute, array_merge(request()->except(['page', 'creator_scope']), ['creator_scope' => 'mine'])),
                'active' => $creatorScope === 'mine',
            ],
        ]
        : [];

    $resetQuery = array_filter([
        'preview_subject_id' => request('preview_subject_id'),
        'creator_scope' => $isTeacherBank ? $creatorScope : null,
    ]);
@endphp

@if($isTeacherBank)
    <div class="space-y-6" x-data="{ filtersOpen: {{ $filtersOpen ? 'true' : 'false' }} }">
        <section class="rounded-xl border border-brand-100 bg-gradient-to-br from-white via-brand-50/40 to-white p-6 shadow-sm dark:border-brand-500/20 dark:bg-surface-900">
            <div class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
                <div class="space-y-2">
                    <p class="text-[11px] font-black uppercase tracking-[0.24em] text-brand-600 dark:text-brand-300">{{ $pageTitle }}</p>
                    <h2 class="text-2xl font-black tracking-tight text-surface-900 dark:text-white">{{ $pageHeading }}</h2>
                    <p class="max-w-3xl text-sm leading-7 text-surface-500 dark:text-surface-400">{{ $pageDescription }}</p>
                </div>

                <div class="flex flex-wrap items-center gap-3">
                    <div class="inline-flex items-center gap-3 rounded-xl border border-brand-100 bg-brand-50/70 px-4 py-3 dark:border-brand-500/20 dark:bg-brand-500/10">
                        <p class="text-sm font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'الأسئلة المتاحة لك' : 'Questions in your reach' }}</p>
                        <p class="text-2xl font-black leading-none text-surface-900 dark:text-white">{{ $stats['total_questions'] }}</p>
                    </div>
                    <a href="{{ route($createRoute) }}" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">
                        <i class="fa-solid fa-plus text-xs"></i>
                        <span>{{ __('dashboard.Add New Question') }}</span>
                    </a>
                </div>
            </div>

            <div class="mt-6 flex flex-wrap gap-2">
                @foreach($teacherScopeFilters as $filter)
                    <a href="{{ $filter['route'] }}" class="inline-flex items-center rounded-xl px-4 py-2.5 text-sm font-bold transition {{ $filter['active'] ? 'bg-brand-600 text-white' : 'border border-surface-200 bg-white text-surface-700 hover:bg-surface-50 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200 dark:hover:bg-surface-800' }}">
                        {{ $filter['label'] }}
                    </a>
                @endforeach
            </div>
        </section>

        <section class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <div class="border-b border-surface-200 bg-surface-50/80 px-6 py-5 dark:border-surface-800 dark:bg-surface-800/30">
                <div class="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
                    <div class="space-y-1">
                        <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'إحصائيات البنك' : 'Bank statistics' }}</p>
                        <h3 class="text-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'ملخص سريع لبنك الأسئلة' : 'Quick question bank summary' }}</h3>
                        <p class="text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'مؤشرات سريعة تساعدك على فهم التغطية الحالية داخل موادك قبل اختيار الأسئلة.' : 'Fast indicators to understand current coverage across your subjects before choosing questions.' }}</p>
                    </div>

                    <button type="button" @click="filtersOpen = !filtersOpen" class="inline-flex h-11 items-center gap-2 rounded-xl border border-surface-200 bg-white px-4 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200 dark:hover:bg-surface-800">
                        <i class="fa-solid" :class="filtersOpen ? 'fa-sliders' : 'fa-filter'"></i>
                        <span>{{ __('dashboard.Filter') }}</span>
                    </button>
                </div>
            </div>

            <div class="grid gap-4 px-6 py-6 md:grid-cols-2 xl:grid-cols-5">
                <article class="rounded-xl border border-surface-200 bg-white p-4 dark:border-surface-800 dark:bg-surface-900">
                    <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'إجمالي الأسئلة' : 'Total questions' }}</p>
                    <p class="mt-2 text-2xl font-black text-surface-900 dark:text-white">{{ $stats['total_questions'] }}</p>
                </article>
                <article class="rounded-xl border border-surface-200 bg-white p-4 dark:border-surface-800 dark:bg-surface-900">
                    <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'المواد المغطاة' : 'Covered subjects' }}</p>
                    <p class="mt-2 text-2xl font-black text-surface-900 dark:text-white">{{ $stats['total_subjects'] }}</p>
                </article>
                <article class="rounded-xl border border-surface-200 bg-white p-4 dark:border-surface-800 dark:bg-surface-900">
                    <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'تصحيح تلقائي' : 'Auto corrected' }}</p>
                    <p class="mt-2 text-2xl font-black text-surface-900 dark:text-white">{{ $stats['auto_corrected_questions'] }}</p>
                </article>
                <article class="rounded-xl border border-surface-200 bg-white p-4 dark:border-surface-800 dark:bg-surface-900">
                    <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'تصحيح يدوي' : 'Manual review' }}</p>
                    <p class="mt-2 text-2xl font-black text-surface-900 dark:text-white">{{ $stats['manual_review_questions'] }}</p>
                </article>
                <article class="rounded-xl border border-surface-200 bg-white p-4 dark:border-surface-800 dark:bg-surface-900">
                    <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'أسئلة بوسائط' : 'Media questions' }}</p>
                    <p class="mt-2 text-2xl font-black text-surface-900 dark:text-white">{{ $stats['questions_with_media'] }}</p>
                </article>
            </div>

            <div x-show="filtersOpen" x-collapse class="border-t border-surface-200 px-6 py-6 dark:border-surface-800">
                <form action="{{ route($indexRoute) }}" method="GET" class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                    <input type="hidden" name="preview_subject_id" value="{{ request('preview_subject_id') }}">
                    <input type="hidden" name="creator_scope" value="{{ $creatorScope }}">
                    <input type="text" name="keyword" value="{{ request('keyword') }}" class="rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" placeholder="{{ __('dashboard.Search by question text') }}">
                    <select name="subject_id" class="rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Subject') }}</option>
                        @foreach($subjects as $subject)
                            <option value="{{ $subject->id }}" @selected(request('subject_id') == $subject->id)>{{ $subject->grade?->stage?->name ?? '' }}{{ $subject->grade?->name ? ' - ' . $subject->grade->name : '' }}{{ ' - ' . $subject->name }}</option>
                        @endforeach
                    </select>
                    <select name="lesson_id" class="rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Lesson') }}</option>
                        @foreach($lessons as $lesson)
                            <option value="{{ $lesson->id }}" @selected(request('lesson_id') == $lesson->id)>{{ $lesson->title }}</option>
                        @endforeach
                    </select>
                    <select name="type" class="rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Type') }}</option>
                        @foreach($typeLabels as $value => $label)
                            <option value="{{ $value }}" @selected(request('type') === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                    <select name="difficulty_level_id" class="rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Difficulty Level') }}</option>
                        @foreach($difficultyLevels as $level)
                            <option value="{{ $level->id }}" @selected(request('difficulty_level_id') == $level->id)>{{ $level->name }}</option>
                        @endforeach
                    </select>
                    <div class="flex gap-3 md:col-span-2 xl:col-span-4">
                        <button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">
                            <i class="fa-solid fa-magnifying-glass text-xs"></i>
                            <span>{{ __('dashboard.Filter') }}</span>
                        </button>
                        <a href="{{ route($indexRoute, $resetQuery) }}" class="inline-flex items-center rounded-xl border border-surface-200 px-4 py-2 text-sm font-bold text-surface-600 transition hover:bg-surface-50 dark:border-surface-700 dark:text-surface-300 dark:hover:bg-surface-800">
                            {{ __('dashboard.Reset') }}
                        </a>
                    </div>
                </form>
            </div>
        </section>

        <section class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <div class="border-b border-surface-200 bg-surface-50/80 px-6 py-5 dark:border-surface-800 dark:bg-surface-800/30">
                <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
                    <div>
                        <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'أسئلة المواد' : 'Subject questions' }}</p>
                        <h3 class="text-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'أسئلة المواد المتاحة للمدرس' : 'Questions available to the teacher' }}</h3>
                        <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'اختر مادة من البطاقات التالية لمراجعة أسئلتها، أو اترك الفلاتر عامة لعرض كل الأسئلة المتاحة لك.' : 'Pick a subject from the cards below to review its questions, or keep filters broad to view all questions available to you.' }}</p>
                    </div>

                    @if($previewSubject && $previewSubjectStats)
                        <div class="rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm dark:border-surface-700 dark:bg-surface-900">
                            <p class="font-bold text-surface-900 dark:text-white">{{ $previewSubject->name }}</p>
                            <p class="mt-1 text-surface-500 dark:text-surface-400">{{ $previewSubjectStats['total_questions'] }} {{ $isArabic ? 'سؤالاً في المادة المختارة' : 'questions in the selected subject' }}</p>
                        </div>
                    @endif
                </div>
            </div>

            <div class="space-y-6 px-6 py-6">
                @if($subjectCards->isEmpty())
                    <div class="rounded-xl border border-dashed border-surface-300 px-5 py-12 text-center text-sm text-surface-500 dark:border-surface-700 dark:text-surface-400">
                        {{ $isArabic ? 'لا توجد مواد أو أسئلة متاحة حالياً داخل نطاقك.' : 'There are no available subjects or questions in your current scope.' }}
                    </div>
                @else
                    <div class="grid gap-3 lg:grid-cols-2 xl:grid-cols-3">
                        @foreach($subjectCards as $subjectCard)
                            @php
                                $isActiveSubject = (int) ($previewSubject?->id ?? 0) === (int) $subjectCard['id'];
                                $previewQuery = array_merge(request()->query(), ['preview_subject_id' => $subjectCard['id']]);
                            @endphp
                            <a href="{{ route($indexRoute, $previewQuery) }}" class="rounded-xl border px-4 py-4 transition {{ $isActiveSubject ? 'border-brand-200 bg-brand-50/70 dark:border-brand-700 dark:bg-brand-500/10' : 'border-surface-200 bg-white hover:border-surface-300 dark:border-surface-800 dark:bg-surface-900 dark:hover:border-surface-700' }}">
                                <div class="flex items-start justify-between gap-3">
                                    <div class="min-w-0">
                                        <p class="text-sm font-black text-surface-900 dark:text-white">{{ $subjectCard['name'] }}</p>
                                        <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">{{ trim(($subjectCard['stage_name'] ?? '') . ' - ' . ($subjectCard['grade_name'] ?? ''), ' -') }}</p>
                                    </div>
                                    <span class="rounded-full px-2.5 py-1 text-[11px] font-black {{ $isActiveSubject ? 'bg-brand-600 text-white' : 'bg-surface-100 text-surface-600 dark:bg-surface-800 dark:text-surface-300' }}">{{ $subjectCard['questions_count'] }}</span>
                                </div>

                                <div class="mt-4 grid grid-cols-3 gap-2 text-center text-xs">
                                    <div class="rounded-xl bg-surface-50 px-3 py-2 dark:bg-surface-950">
                                        <p class="text-surface-500 dark:text-surface-400">{{ $isArabic ? 'أسئلة' : 'Questions' }}</p>
                                        <p class="mt-1 font-black text-surface-900 dark:text-white">{{ $subjectCard['questions_count'] }}</p>
                                    </div>
                                    <div class="rounded-xl bg-surface-50 px-3 py-2 dark:bg-surface-950">
                                        <p class="text-surface-500 dark:text-surface-400">{{ $isArabic ? 'دروس' : 'Lessons' }}</p>
                                        <p class="mt-1 font-black text-surface-900 dark:text-white">{{ $subjectCard['lessons_count'] }}</p>
                                    </div>
                                    <div class="rounded-xl bg-surface-50 px-3 py-2 dark:bg-surface-950">
                                        <p class="text-surface-500 dark:text-surface-400">{{ $isArabic ? 'متوسط' : 'Average' }}</p>
                                        <p class="mt-1 font-black text-surface-900 dark:text-white">{{ $subjectCard['average_score'] }}</p>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                @endif

                <article class="overflow-hidden rounded-xl border border-surface-200 bg-white dark:border-surface-800 dark:bg-surface-900">
                    <div class="border-b border-surface-200 px-6 py-5 dark:border-surface-800">
                        <div class="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
                            <div>
                                <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'القائمة الحالية' : 'Current list' }}</p>
                                <h3 class="mt-1 text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'الأسئلة الجاهزة للمراجعة' : 'Questions ready for review' }}</h3>
                            </div>
                            <p class="text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'هذه القائمة تعكس المادة المختارة والفلاتر الحالية مباشرة.' : 'This list directly reflects the selected subject and current filters.' }}</p>
                        </div>
                    </div>

                    @if($questions->isEmpty())
                        <div class="px-6 py-16 text-center text-sm text-surface-500 dark:text-surface-400">{{ __('dashboard.No data found') }}</div>
                    @else
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-surface-200 dark:divide-surface-800">
                                <thead class="bg-surface-50/80 dark:bg-surface-800/40">
                                    <tr class="text-right text-xs font-black uppercase tracking-[0.2em] text-surface-500 dark:text-surface-400">
                                        <th class="px-6 py-4">{{ $isArabic ? 'السؤال' : 'Question' }}</th>
                                        <th class="px-6 py-4">{{ $isArabic ? 'النوع' : 'Type' }}</th>
                                        <th class="px-6 py-4">{{ $isArabic ? 'المادة والدرس' : 'Subject & lesson' }}</th>
                                        <th class="px-6 py-4">{{ $isArabic ? 'الصعوبة والدرجة' : 'Difficulty & score' }}</th>
                                        <th class="px-6 py-4 text-left">{{ __('dashboard.Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-surface-200 dark:divide-surface-800">
                                    @foreach($questions as $question)
                                        <tr class="transition hover:bg-surface-50/80 dark:hover:bg-surface-800/20">
                                            <td class="px-6 py-5">
                                                <p class="text-sm font-black text-surface-900 dark:text-white">{{ $question->question_text }}</p>
                                                <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">#{{ $question->id }}</p>
                                            </td>
                                            <td class="px-6 py-5">
                                                <span class="inline-flex items-center gap-2 rounded-full bg-surface-100 px-3 py-1 text-xs font-bold text-surface-700 dark:bg-surface-800 dark:text-surface-200">
                                                    <i class="fa-solid {{ $typeIcons[$question->type] ?? 'fa-circle-question' }}"></i>
                                                    <span>{{ $typeLabels[$question->type] ?? $question->type }}</span>
                                                </span>
                                            </td>
                                            <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">
                                                <p>{{ $question->subject?->name ?? '-' }}</p>
                                                <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">{{ $question->lesson?->title ?? '-' }}</p>
                                            </td>
                                            <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">
                                                <p>{{ $question->difficultyLevel?->name ?? ($isArabic ? 'غير محدد' : 'Unspecified') }}</p>
                                                <p class="mt-1 text-xs font-black text-surface-900 dark:text-white">{{ $question->score ?? 0 }}</p>
                                            </td>
                                            <td class="px-6 py-5">
                                                <div class="flex items-center justify-end gap-2">
                                                    <a href="{{ route($routePrefix . '.questions.show', $question->id) }}" class="inline-flex items-center gap-2 rounded-xl border border-surface-200 px-4 py-2.5 text-sm font-bold text-surface-700 transition hover:border-brand-300 hover:text-brand-700 dark:border-surface-700 dark:text-surface-200">
                                                        <i class="fa-regular fa-eye text-xs"></i>
                                                        <span>{{ __('dashboard.View') }}</span>
                                                    </a>
                                                    <a href="{{ route($routePrefix . '.questions.edit', $question->id) }}" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-bold text-white transition hover:bg-brand-700">
                                                        <i class="fa-solid fa-pen-to-square text-xs"></i>
                                                        <span>{{ __('dashboard.Edit') }}</span>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="border-t border-surface-200 px-6 py-5 dark:border-surface-800">
                            {{ $questions->appends(request()->query())->links('pagination::simple-tailwind') }}
                        </div>
                    @endif
                </article>
            </div>
        </section>
    </div>
@else
    <div class="space-y-6" x-data="{ filtersOpen: {{ $filtersOpen ? 'true' : 'false' }} }">
        <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
                <div class="space-y-2">
                    <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $pageTitle }}</p>
                    <h2 class="text-2xl font-black tracking-tight text-surface-900 dark:text-white">{{ $pageHeading }}</h2>
                    <p class="max-w-3xl text-sm leading-7 text-surface-500 dark:text-surface-400">{{ $pageDescription }}</p>
                </div>

                <div class="flex flex-wrap items-center gap-3">
                    <div class="inline-flex items-center gap-3 rounded-xl border border-surface-200 bg-surface-50 px-4 py-3 dark:border-surface-700 dark:bg-surface-950">
                        <p class="text-sm font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'إجمالي الأسئلة' : 'Total questions' }}</p>
                        <p class="text-2xl font-black leading-none text-surface-900 dark:text-white">{{ $stats['total_questions'] }}</p>
                    </div>
                    <a href="{{ route($createRoute) }}" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">
                        <i class="fa-solid fa-plus text-xs"></i>
                        <span>{{ __('dashboard.Add New Question') }}</span>
                    </a>
                </div>
            </div>
        </section>

        <section class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <div class="border-b border-surface-200 bg-surface-50/80 px-6 py-5 dark:border-surface-800 dark:bg-surface-800/30">
                <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
                    <div class="space-y-1">
                        <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'ملخص البنك' : 'Bank overview' }}</p>
                        <h2 class="text-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'وضع بنك الأسئلة' : 'Question bank status' }}</h2>
                        <p class="text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'إحصاءات مباشرة عن التغطية والأنواع والتصحيح والوسائط.' : 'Direct metrics for coverage, types, correction mode, and media usage.' }}</p>
                    </div>

                    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:min-w-[40rem]">
                        <div class="rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-700 dark:bg-surface-900">
                            <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'المواد المغطاة' : 'Covered subjects' }}</p>
                            <p class="mt-1 text-xl font-black leading-none text-surface-900 dark:text-white">{{ $stats['total_subjects'] }}</p>
                        </div>
                        <div class="rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-700 dark:bg-surface-900">
                            <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'متوسط الدرجة' : 'Average score' }}</p>
                            <p class="mt-1 text-xl font-black leading-none text-surface-900 dark:text-white">{{ $stats['average_score'] }}</p>
                        </div>
                        <div class="rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-700 dark:bg-surface-900">
                            <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'تصحيح يدوي' : 'Manual review' }}</p>
                            <p class="mt-1 text-xl font-black leading-none text-surface-900 dark:text-white">{{ $stats['manual_review_questions'] }}</p>
                        </div>
                        <div class="rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-700 dark:bg-surface-900">
                            <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'تصحيح تلقائي' : 'Auto corrected' }}</p>
                            <p class="mt-1 text-xl font-black leading-none text-surface-900 dark:text-white">{{ $stats['auto_corrected_questions'] }}</p>
                        </div>
                        <div class="rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-700 dark:bg-surface-900">
                            <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'بها وسائط' : 'With media' }}</p>
                            <p class="mt-1 text-xl font-black leading-none text-surface-900 dark:text-white">{{ $stats['questions_with_media'] }}</p>
                        </div>
                        <div class="flex items-center justify-end">
                            <button type="button" @click="filtersOpen = !filtersOpen" class="inline-flex h-11 items-center gap-2 rounded-xl border border-surface-200 bg-white px-4 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200 dark:hover:bg-surface-800">
                                <i class="fa-solid" :class="filtersOpen ? 'fa-sliders' : 'fa-filter'"></i>
                                <span>{{ __('dashboard.Filter') }}</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div x-show="filtersOpen" x-collapse class="border-b border-surface-200 px-6 py-6 dark:border-surface-800">
                <form action="{{ route($indexRoute) }}" method="GET" class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                    <input type="hidden" name="preview_subject_id" value="{{ request('preview_subject_id') }}">
                    <input type="text" name="keyword" value="{{ request('keyword') }}" class="rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" placeholder="{{ __('dashboard.Search by question text') }}">
                    <select name="subject_id" class="rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Subject') }}</option>
                        @foreach($subjects as $subject)
                            <option value="{{ $subject->id }}" @selected(request('subject_id') == $subject->id)>{{ $subject->grade?->stage?->name ?? '' }}{{ $subject->grade?->name ? ' - ' . $subject->grade->name : '' }}{{ ' - ' . $subject->name }}</option>
                        @endforeach
                    </select>
                    <select name="lesson_id" class="rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Lesson') }}</option>
                        @foreach($lessons as $lesson)
                            <option value="{{ $lesson->id }}" @selected(request('lesson_id') == $lesson->id)>{{ $lesson->title }}</option>
                        @endforeach
                    </select>
                    @if($showTeacherFilter)
                        <select name="teacher_id" class="rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                            <option value="">{{ __('dashboard.Select Teacher') }}</option>
                            @foreach($teachers as $teacher)
                                <option value="{{ $teacher->id }}" @selected(request('teacher_id') == $teacher->id)>{{ trim(($teacher->first_name ?? '') . ' ' . ($teacher->last_name ?? '')) }}</option>
                            @endforeach
                        </select>
                    @endif
                    <select name="type" class="rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Type') }}</option>
                        @foreach($typeLabels as $value => $label)
                            <option value="{{ $value }}" @selected(request('type') === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                    <select name="difficulty_level_id" class="rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Difficulty Level') }}</option>
                        @foreach($difficultyLevels as $level)
                            <option value="{{ $level->id }}" @selected(request('difficulty_level_id') == $level->id)>{{ $level->name }}</option>
                        @endforeach
                    </select>
                    <div class="flex gap-3 md:col-span-2 xl:col-span-4">
                        <button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">
                            <i class="fa-solid fa-magnifying-glass text-xs"></i>
                            <span>{{ __('dashboard.Filter') }}</span>
                        </button>
                        <a href="{{ route($indexRoute, array_filter(['preview_subject_id' => request('preview_subject_id')])) }}" class="inline-flex items-center rounded-xl border border-surface-200 px-4 py-2 text-sm font-bold text-surface-600 transition hover:bg-surface-50 dark:border-surface-700 dark:text-surface-300 dark:hover:bg-surface-800">
                            {{ __('dashboard.Reset') }}
                        </a>
                    </div>
                </form>
            </div>

            <div class="grid gap-6 px-6 py-6 xl:grid-cols-[minmax(0,1fr)_320px]">
                <div class="space-y-6">
                    <article class="rounded-xl border border-surface-200 bg-surface-50/60 p-5 dark:border-surface-800 dark:bg-surface-950/30">
                        <div class="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
                            <div>
                                <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'خريطة المواد' : 'Subjects map' }}</p>
                                <h3 class="mt-1 text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'المواد المتاحة للمعاينة' : 'Subjects available for preview' }}</h3>
                            </div>
                            <p class="text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'اختر مادة واحدة لعرض معاينة سريعة وإحصاءاتها.' : 'Choose a subject to preview recent questions and related metrics.' }}</p>
                        </div>

                        @if($subjectCards->isEmpty())
                            <div class="mt-5 rounded-xl border border-dashed border-surface-300 px-5 py-10 text-center text-sm text-surface-500 dark:border-surface-700 dark:text-surface-400">
                                {{ $isArabic ? 'لا توجد مواد متاحة داخل هذا النطاق حالياً.' : 'No subjects are available in the current scope.' }}
                            </div>
                        @else
                            <div class="mt-5 grid gap-3 lg:grid-cols-2">
                                @foreach($subjectCards as $subjectCard)
                                    @php
                                        $isActiveSubject = (int) ($previewSubject?->id ?? 0) === (int) $subjectCard['id'];
                                        $previewQuery = array_merge(request()->query(), ['preview_subject_id' => $subjectCard['id']]);
                                    @endphp
                                    <a href="{{ route($indexRoute, $previewQuery) }}" class="rounded-xl border px-4 py-4 text-right transition {{ $isActiveSubject ? 'border-brand-200 bg-brand-50/70 dark:border-brand-700 dark:bg-brand-500/10' : 'border-surface-200 bg-white hover:border-surface-300 dark:border-surface-800 dark:bg-surface-900 dark:hover:border-surface-700' }}">
                                        <div class="flex items-start justify-between gap-3">
                                            <div class="min-w-0">
                                                <p class="text-sm font-black text-surface-900 dark:text-white">{{ $subjectCard['name'] }}</p>
                                                <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">{{ trim(($subjectCard['stage_name'] ?? '') . ' - ' . ($subjectCard['grade_name'] ?? ''), ' -') }}</p>
                                            </div>
                                            <span class="rounded-full px-2.5 py-1 text-[11px] font-black {{ $isActiveSubject ? 'bg-brand-600 text-white' : 'bg-surface-100 text-surface-600 dark:bg-surface-800 dark:text-surface-300' }}">{{ $subjectCard['questions_count'] }}</span>
                                        </div>
                                        <div class="mt-4 grid grid-cols-3 gap-2 text-center text-xs">
                                            <div class="rounded-xl bg-surface-50 px-3 py-2 dark:bg-surface-950">
                                                <p class="text-surface-500 dark:text-surface-400">{{ $isArabic ? 'أسئلة' : 'Questions' }}</p>
                                                <p class="mt-1 font-black text-surface-900 dark:text-white">{{ $subjectCard['questions_count'] }}</p>
                                            </div>
                                            <div class="rounded-xl bg-surface-50 px-3 py-2 dark:bg-surface-950">
                                                <p class="text-surface-500 dark:text-surface-400">{{ $isArabic ? 'دروس' : 'Lessons' }}</p>
                                                <p class="mt-1 font-black text-surface-900 dark:text-white">{{ $subjectCard['lessons_count'] }}</p>
                                            </div>
                                            <div class="rounded-xl bg-surface-50 px-3 py-2 dark:bg-surface-950">
                                                <p class="text-surface-500 dark:text-surface-400">{{ $isArabic ? 'متوسط' : 'Average' }}</p>
                                                <p class="mt-1 font-black text-surface-900 dark:text-white">{{ $subjectCard['average_score'] }}</p>
                                            </div>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        @endif
                    </article>

                    <article class="rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
                        <div class="border-b border-surface-200 px-6 py-5 dark:border-surface-800">
                            <div class="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
                                <div>
                                    <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'قائمة الأسئلة' : 'Questions list' }}</p>
                                    <h3 class="mt-1 text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'الأسئلة الحالية' : 'Current questions' }}</h3>
                                </div>
                                <p class="text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'الأسئلة الظاهرة تعكس الفلاتر الحالية مباشرة.' : 'The visible questions reflect the active filters directly.' }}</p>
                            </div>
                        </div>

                        @if($questions->isEmpty())
                            <div class="px-6 py-16 text-center text-sm text-surface-500 dark:text-surface-400">{{ __('dashboard.No data found') }}</div>
                        @else
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-surface-200 dark:divide-surface-800">
                                    <thead class="bg-surface-50/80 dark:bg-surface-800/40">
                                        <tr class="text-right text-xs font-black uppercase tracking-[0.2em] text-surface-500 dark:text-surface-400">
                                            <th class="px-6 py-4">{{ $isArabic ? 'السؤال' : 'Question' }}</th>
                                            <th class="px-6 py-4">{{ $isArabic ? 'النوع' : 'Type' }}</th>
                                            <th class="px-6 py-4">{{ $isArabic ? 'المادة والدرس' : 'Subject & lesson' }}</th>
                                            <th class="px-6 py-4">{{ $isArabic ? 'الصعوبة والدرجة' : 'Difficulty & score' }}</th>
                                            @if($showAuthorColumn)
                                                <th class="px-6 py-4">{{ $isArabic ? 'المنشئ' : 'Author' }}</th>
                                            @endif
                                            <th class="px-6 py-4 text-left">{{ __('dashboard.Actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-surface-200 dark:divide-surface-800">
                                        @foreach($questions as $question)
                                            <tr class="transition hover:bg-surface-50/80 dark:hover:bg-surface-800/20">
                                                <td class="px-6 py-5">
                                                    <p class="text-sm font-black text-surface-900 dark:text-white">{{ $question->question_text }}</p>
                                                    <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">#{{ $question->id }}</p>
                                                </td>
                                                <td class="px-6 py-5">
                                                    <span class="inline-flex items-center gap-2 rounded-full bg-surface-100 px-3 py-1 text-xs font-bold text-surface-700 dark:bg-surface-800 dark:text-surface-200">
                                                        <i class="fa-solid {{ $typeIcons[$question->type] ?? 'fa-circle-question' }}"></i>
                                                        <span>{{ $typeLabels[$question->type] ?? $question->type }}</span>
                                                    </span>
                                                </td>
                                                <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">
                                                    <p>{{ $question->subject?->name ?? '-' }}</p>
                                                    <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">{{ $question->lesson?->title ?? '-' }}</p>
                                                </td>
                                                <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">
                                                    <p>{{ $question->difficultyLevel?->name ?? ($isArabic ? 'غير محدد' : 'Unspecified') }}</p>
                                                    <p class="mt-1 text-xs font-black text-surface-900 dark:text-white">{{ $question->score ?? 0 }}</p>
                                                </td>
                                                @if($showAuthorColumn)
                                                    <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">{{ trim(($question->user?->first_name ?? '') . ' ' . ($question->user?->last_name ?? '')) ?: '-' }}</td>
                                                @endif
                                                <td class="px-6 py-5">
                                                    <div class="flex items-center justify-end gap-2">
                                                        <a href="{{ route($routePrefix . '.questions.show', $question->id) }}" class="inline-flex items-center gap-2 rounded-xl border border-surface-200 px-4 py-2.5 text-sm font-bold text-surface-700 transition hover:border-brand-300 hover:text-brand-700 dark:border-surface-700 dark:text-surface-200">
                                                            <i class="fa-regular fa-eye text-xs"></i>
                                                            <span>{{ __('dashboard.View') }}</span>
                                                        </a>
                                                        <a href="{{ route($routePrefix . '.questions.edit', $question->id) }}" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-bold text-white transition hover:bg-brand-700">
                                                            <i class="fa-solid fa-pen-to-square text-xs"></i>
                                                            <span>{{ __('dashboard.Edit') }}</span>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <div class="border-t border-surface-200 px-6 py-5 dark:border-surface-800">
                                {{ $questions->appends(request()->query())->links('pagination::simple-tailwind') }}
                            </div>
                        @endif
                    </article>
                </div>

                <aside class="space-y-6">
                    <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
                        <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'أنواع الأسئلة' : 'Question types' }}</p>
                        <h3 class="mt-1 text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'التوزيع العام' : 'General breakdown' }}</h3>
                        <div class="mt-4 space-y-3">
                            @forelse($typeLabels as $typeKey => $typeLabel)
                                <div class="flex items-center justify-between rounded-xl border border-surface-200 px-4 py-3 dark:border-surface-800">
                                    <span class="inline-flex items-center gap-2 text-sm font-bold text-surface-700 dark:text-surface-200">
                                        <i class="fa-solid {{ $typeIcons[$typeKey] ?? 'fa-circle-question' }} text-brand-500"></i>
                                        <span>{{ $typeLabel }}</span>
                                    </span>
                                    <span class="text-base font-black text-surface-900 dark:text-white">{{ $typeBreakdown[$typeKey] ?? 0 }}</span>
                                </div>
                            @empty
                                <p class="text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'لا توجد بيانات بعد.' : 'No data yet.' }}</p>
                            @endforelse
                        </div>
                    </article>

                    <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
                        <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'مستويات الصعوبة' : 'Difficulty levels' }}</p>
                        <h3 class="mt-1 text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'توزيع الصعوبة' : 'Difficulty breakdown' }}</h3>
                        <div class="mt-4 space-y-3">
                            @forelse($difficultyBreakdown as $difficultyName => $total)
                                <div class="flex items-center justify-between rounded-xl bg-surface-50 px-4 py-3 dark:bg-surface-950">
                                    <span class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ $difficultyName }}</span>
                                    <span class="text-base font-black text-surface-900 dark:text-white">{{ $total }}</span>
                                </div>
                            @empty
                                <p class="text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'لا توجد بيانات بعد.' : 'No data yet.' }}</p>
                            @endforelse
                        </div>
                    </article>

                    <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
                        <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'معاينة المادة' : 'Subject preview' }}</p>
                        <h3 class="mt-1 text-lg font-black text-surface-900 dark:text-white">{{ $previewSubject?->name ?? ($isArabic ? 'لا توجد مادة محددة' : 'No selected subject') }}</h3>

                        @if($previewSubject && $previewSubjectStats)
                            <p class="mt-2 text-sm text-surface-500 dark:text-surface-400">{{ trim(($previewSubject->grade?->stage?->name ?? '') . ' - ' . ($previewSubject->grade?->name ?? ''), ' -') }}</p>
                            <div class="mt-4 grid grid-cols-2 gap-3">
                                <div class="rounded-xl bg-surface-50 px-4 py-3 dark:bg-surface-950">
                                    <p class="text-xs font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'الأسئلة' : 'Questions' }}</p>
                                    <p class="mt-1 text-lg font-black text-surface-900 dark:text-white">{{ $previewSubjectStats['total_questions'] }}</p>
                                </div>
                                <div class="rounded-xl bg-surface-50 px-4 py-3 dark:bg-surface-950">
                                    <p class="text-xs font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'الدروس المغطاة' : 'Covered lessons' }}</p>
                                    <p class="mt-1 text-lg font-black text-surface-900 dark:text-white">{{ $previewSubjectStats['lessons_covered'] }}</p>
                                </div>
                                <div class="rounded-xl bg-surface-50 px-4 py-3 dark:bg-surface-950">
                                    <p class="text-xs font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'متوسط الدرجة' : 'Average score' }}</p>
                                    <p class="mt-1 text-lg font-black text-surface-900 dark:text-white">{{ $previewSubjectStats['average_score'] }}</p>
                                </div>
                                <div class="rounded-xl bg-surface-50 px-4 py-3 dark:bg-surface-950">
                                    <p class="text-xs font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'أسئلة بها وسائط' : 'Media questions' }}</p>
                                    <p class="mt-1 text-lg font-black text-surface-900 dark:text-white">{{ $previewSubjectStats['media_questions'] }}</p>
                                </div>
                            </div>
                        @else
                            <div class="mt-4 rounded-xl border border-dashed border-surface-300 px-5 py-10 text-center text-sm text-surface-500 dark:border-surface-700 dark:text-surface-400">
                                {{ $isArabic ? 'اختر مادة من القائمة لعرض إحصاءاتها ومعاينة أسئلتها.' : 'Choose a subject to preview its metrics and latest questions.' }}
                            </div>
                        @endif
                    </article>
                </aside>
            </div>
        </section>

        <section class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <div class="border-b border-surface-200 px-6 py-5 dark:border-surface-800">
                <div class="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
                    <div>
                        <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'المعاينة السريعة' : 'Quick preview' }}</p>
                        <h3 class="mt-1 text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'آخر أسئلة المادة المختارة' : 'Latest questions in the selected subject' }}</h3>
                    </div>
                    <p class="text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'عرض مباشر لآخر الأسئلة المرتبطة بالمادة الجاري معاينتها.' : 'A direct snapshot of the latest questions linked to the currently previewed subject.' }}</p>
                </div>
            </div>

            @if($previewQuestions->isEmpty())
                <div class="px-6 py-16 text-center text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'لا توجد أسئلة للمعاينة داخل هذه المادة حالياً.' : 'No preview questions are available for this subject yet.' }}</div>
            @else
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-surface-200 dark:divide-surface-800">
                        <thead class="bg-surface-50/80 dark:bg-surface-800/40">
                            <tr class="text-right text-xs font-black uppercase tracking-[0.2em] text-surface-500 dark:text-surface-400">
                                <th class="px-6 py-4">{{ $isArabic ? 'السؤال' : 'Question' }}</th>
                                <th class="px-6 py-4">{{ $isArabic ? 'النوع' : 'Type' }}</th>
                                <th class="px-6 py-4">{{ $isArabic ? 'الدرس' : 'Lesson' }}</th>
                                <th class="px-6 py-4">{{ $isArabic ? 'الصعوبة' : 'Difficulty' }}</th>
                                <th class="px-6 py-4">{{ $isArabic ? 'الدرجة' : 'Score' }}</th>
                                <th class="px-6 py-4 text-left">{{ $isArabic ? 'إجراء' : 'Action' }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-surface-200 dark:divide-surface-800">
                            @foreach($previewQuestions as $question)
                                <tr class="transition hover:bg-surface-50/80 dark:hover:bg-surface-800/20">
                                    <td class="px-6 py-5">
                                        <p class="text-sm font-black text-surface-900 dark:text-white">{{ $question->question_text }}</p>
                                        <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">{{ trim(($question->user?->first_name ?? '') . ' ' . ($question->user?->last_name ?? '')) ?: '-' }}</p>
                                    </td>
                                    <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">{{ $typeLabels[$question->type] ?? $question->type }}</td>
                                    <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">{{ $question->lesson?->title ?? '-' }}</td>
                                    <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">{{ $question->difficultyLevel?->name ?? ($isArabic ? 'غير محدد' : 'Unspecified') }}</td>
                                    <td class="px-6 py-5 text-sm font-black text-surface-900 dark:text-white">{{ $question->score ?? 0 }}</td>
                                    <td class="px-6 py-5">
                                        <a href="{{ route($routePrefix . '.questions.show', $question->id) }}" class="inline-flex items-center gap-2 rounded-xl border border-surface-200 px-4 py-2.5 text-sm font-bold text-surface-700 transition hover:border-brand-300 hover:text-brand-700 dark:border-surface-700 dark:text-surface-200">
                                            <i class="fa-regular fa-eye text-xs"></i>
                                            <span>{{ __('dashboard.View') }}</span>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </section>
    </div>
@endif