@extends('student.layouts.app', ['studentExamMode' => true])

@section('title', $quiz->title)

@section('content')
@php
    $isArabic = app()->getLocale() === 'ar';
@endphp

<div class="space-y-6">
    <section class="border-b border-zinc-200 bg-white/90 px-4 py-4 backdrop-blur-xl dark:border-zinc-800 dark:bg-zinc-950/90 sm:px-6 lg:px-8">
        <div class="mx-auto flex max-w-[110rem] flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div class="flex items-start gap-3">
                <a href="{{ route('student.courses.quizzes.index', $course->id) }}" class="inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-zinc-200 bg-white text-zinc-700 text-decoration-none dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200">
                    <i class="fa-solid fa-arrow-{{ $isArabic ? 'right' : 'left' }}"></i>
                </a>
                <div>
                    <div class="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-400">{{ $isArabic ? 'وضع التركيز' : 'Focus mode' }}</div>
                    <h1 class="mt-1 text-xl font-black text-zinc-900 dark:text-white">{{ $quiz->title }}</h1>
                    <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'تم إخفاء عناصر اللوحة الجانبية لتسهيل التركيز الكامل على الاختبار.' : 'Dashboard distractions are hidden so the quiz stays fully focused.' }}</p>
                </div>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <span class="rounded-full bg-zinc-100 px-3 py-2 text-xs font-black text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300">{{ $quiz->questions->count() }} {{ $isArabic ? 'سؤال' : 'questions' }}</span>
                <span class="rounded-full bg-zinc-100 px-3 py-2 text-xs font-black text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300">{{ $quiz->total_marks }} {{ $isArabic ? 'درجة' : 'marks' }}</span>
                <span class="rounded-full bg-primary-light px-3 py-2 text-xs font-black text-primary dark:bg-primary/10 dark:text-primary-container">{{ $quiz->duration }} {{ $isArabic ? 'دقيقة' : 'min' }}</span>
            </div>
        </div>
    </section>

    <section class="grid gap-6 px-4 pb-6 sm:px-6 sm:pb-8 lg:grid-cols-[minmax(0,1.35fr)_22rem] lg:px-8">
        <form id="student-quiz-form" action="{{ route('student.courses.quizzes.storeAnswer', $quiz->id) }}" method="POST" enctype="multipart/form-data" class="student-card overflow-hidden">
            @csrf

            <div class="border-b border-zinc-200 bg-zinc-50 px-6 py-5 dark:border-zinc-800 dark:bg-zinc-950">
                <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                    <div>
                        <h2 class="text-xl font-black text-zinc-900 dark:text-white">{{ $quiz->title }}</h2>
                        @if ($quiz->description)
                            <p class="mt-2 text-sm leading-7 text-zinc-500 dark:text-zinc-400">{{ $quiz->description }}</p>
                        @endif
                    </div>
                    <div class="rounded-[1.5rem] border border-primary/20 bg-primary-light/40 px-4 py-4 text-center dark:border-primary/30 dark:bg-primary/10">
                        <div class="text-[11px] font-black text-primary">{{ $isArabic ? 'الوقت المتبقي' : 'Time remaining' }}</div>
                        <div class="mt-1 text-2xl font-black text-zinc-900 dark:text-white font-numbers" data-quiz-timer="{{ $timeRemaining }}">{{ gmdate('i:s', $timeRemaining) }}</div>
                    </div>
                </div>
            </div>

            <div class="space-y-5 p-6">
                <div class="rounded-[1.75rem] border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-950">
                    <div class="mb-3 text-xs font-black uppercase tracking-[0.22em] text-zinc-400">{{ $isArabic ? 'جدول الأسئلة' : 'Question map' }}</div>
                    <div class="grid grid-cols-5 gap-2 sm:grid-cols-8 lg:grid-cols-10" data-question-nav>
                        @foreach ($quiz->questions->sortBy('position')->values() as $index => $quizQuestion)
                            <button type="button" class="question-nav-item flex h-11 items-center justify-center rounded-2xl border border-zinc-200 bg-white text-sm font-black text-zinc-700 transition dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200" data-question-target="{{ $index }}">
                                {{ $index + 1 }}
                            </button>
                        @endforeach
                    </div>
                </div>

                @foreach ($quiz->questions->sortBy('position')->values() as $index => $quizQuestion)
                    @php
                        $question = $quizQuestion->question;
                        $detail = $answerDetails->get($quizQuestion->id);
                        $storedAnswer = $detail?->answer;
                        $questionTypeLabel = match ($question?->type) {
                            'mcq' => $isArabic ? 'اختياري' : 'MCQ',
                            'true_false' => $isArabic ? 'صح / خطأ' : 'True/False',
                            'essay' => $isArabic ? 'مقالي' : 'Essay',
                            'paragraph' => $isArabic ? 'فقرة' : 'Paragraph',
                            'match' => $isArabic ? 'مطابقة' : 'Match',
                            'audio_text' => $isArabic ? 'صوت ثم نص' : 'Audio to Text',
                            'text_audio' => $isArabic ? 'نص ثم صوت' : 'Text to Audio',
                            'fill_blank' => $isArabic ? 'أكمل الفراغات' : 'Fill in the blanks',
                            default => $isArabic ? 'غير محدد' : 'Unknown',
                        };
                    @endphp
                    @if ($question)
                        <article class="question-panel rounded-[1.75rem] border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900" data-question-panel="{{ $index }}" @if ($index !== 0) style="display:none" @endif>
                            <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                                <div>
                                    <div class="inline-flex items-center gap-2 rounded-full bg-zinc-100 px-3 py-1 text-xs font-black text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300">
                                        <span>{{ $isArabic ? 'سؤال' : 'Question' }}</span>
                                        <span class="font-numbers">{{ $index + 1 }}</span>
                                        <span>•</span>
                                        <span>{{ $questionTypeLabel }}</span>
                                    </div>
                                    <h3 class="mt-3 text-lg font-black leading-8 text-zinc-900 dark:text-white">{{ $question->question_text }}</h3>
                                </div>
                                <div class="rounded-full bg-primary-light px-3 py-1 text-xs font-black text-primary dark:bg-primary/10 dark:text-primary-container">{{ $quizQuestion->score }} {{ $isArabic ? 'درجة' : 'marks' }}</div>
                            </div>

                            <div class="mt-5">
                                @if ($question->type === 'mcq' && $question->mcq)
                                    <div class="grid gap-3">
                                        @foreach ($question->mcq->choices as $choiceIndex => $choice)
                                            <label class="flex cursor-pointer items-start gap-3 rounded-2xl border border-zinc-200 px-4 py-4 dark:border-zinc-800">
                                                <input type="radio" name="answers[{{ $quizQuestion->id }}]" value="{{ $choiceIndex }}" class="question-input mt-1 h-4 w-4 border-zinc-300 text-primary focus:ring-primary" data-question-index="{{ $index }}" @checked((string) $storedAnswer === (string) $choiceIndex)>
                                                <span class="text-sm font-medium leading-7 text-zinc-700 dark:text-zinc-200">{{ $choice }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                @elseif ($question->type === 'true_false' && $question->trueFalse)
                                    <div class="grid gap-3 sm:grid-cols-2">
                                        <label class="flex cursor-pointer items-center gap-3 rounded-2xl border border-zinc-200 px-4 py-4 dark:border-zinc-800">
                                            <input type="radio" name="answers[{{ $quizQuestion->id }}]" value="1" class="question-input h-4 w-4 border-zinc-300 text-primary focus:ring-primary" data-question-index="{{ $index }}" @checked($storedAnswer === '1')>
                                            <span class="text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'صح' : 'True' }}</span>
                                        </label>
                                        <label class="flex cursor-pointer items-center gap-3 rounded-2xl border border-zinc-200 px-4 py-4 dark:border-zinc-800">
                                            <input type="radio" name="answers[{{ $quizQuestion->id }}]" value="0" class="question-input h-4 w-4 border-zinc-300 text-primary focus:ring-primary" data-question-index="{{ $index }}" @checked($storedAnswer === '0')>
                                            <span class="text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'خطأ' : 'False' }}</span>
                                        </label>
                                    </div>
                                @elseif (in_array($question->type, ['essay', 'paragraph'], true))
                                    <textarea name="answers[{{ $quizQuestion->id }}]" rows="7" class="question-input w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm text-zinc-700 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-200" data-question-index="{{ $index }}" placeholder="{{ $isArabic ? 'اكتب إجابتك هنا...' : 'Write your answer here...' }}">{{ $storedAnswer }}</textarea>
                                @elseif ($question->type === 'match' && $question->match)
                                    @php
                                        $groupA = is_array($question->match->group_a)
                                            ? $question->match->group_a
                                            : (json_decode($question->match->group_a ?? '[]', true) ?: []);
                                        $groupB = is_array($question->match->group_b)
                                            ? $question->match->group_b
                                            : (json_decode($question->match->group_b ?? '[]', true) ?: []);
                                        $savedPairs = is_array($storedAnswer)
                                            ? $storedAnswer
                                            : (json_decode($storedAnswer ?? '[]', true) ?: []);
                                    @endphp
                                    <div class="space-y-3">
                                        @foreach ($groupA as $item)
                                            <div class="grid gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] md:items-center">
                                                <div class="rounded-2xl bg-zinc-50 px-4 py-3 text-sm font-black text-zinc-700 dark:bg-zinc-950 dark:text-zinc-200">{{ $item }}</div>
                                                <select name="answers[{{ $quizQuestion->id }}][{{ $item }}]" class="question-input rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm text-zinc-700 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-200" data-question-index="{{ $index }}">
                                                    <option value="">{{ $isArabic ? 'اختر المطابقة' : 'Choose match' }}</option>
                                                    @foreach ($groupB as $matchChoice)
                                                        <option value="{{ $matchChoice }}" @selected(($savedPairs[$item] ?? null) == $matchChoice)>{{ $matchChoice }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        @endforeach
                                    </div>
                                @elseif ($question->type === 'audio_text' && $question->audioText)
                                    <div class="space-y-4">
                                        @if ($question->media_path)
                                            <div class="rounded-[1.5rem] border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-950">
                                                <div class="mb-3 text-xs font-black uppercase tracking-[0.2em] text-zinc-400">{{ $isArabic ? 'استمع أولاً' : 'Listen first' }}</div>
                                                <audio controls class="w-full">
                                                    <source src="{{ asset('storage/' . $question->media_path) }}" type="{{ $question->media_type ?: 'audio/mpeg' }}">
                                                </audio>
                                            </div>
                                        @endif
                                        <textarea name="answers[{{ $quizQuestion->id }}]" rows="7" class="question-input w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm text-zinc-700 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-200" data-question-index="{{ $index }}" placeholder="{{ $isArabic ? 'اكتب ما فهمته أو الإجابة المطلوبة هنا...' : 'Write what you understood or the required answer here...' }}">{{ $storedAnswer }}</textarea>
                                    </div>
                                @elseif ($question->type === 'text_audio' && $question->textAudio)
                                    <div class="space-y-4">
                                        <div class="rounded-[1.5rem] border border-dashed border-zinc-300 px-4 py-4 text-sm leading-7 text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
                                            {{ $isArabic ? 'ارفع إجابتك كملف صوتي. الأنواع المدعومة: mp3, wav, ogg, m4a, webm.' : 'Upload your answer as an audio file. Supported formats: mp3, wav, ogg, m4a, webm.' }}
                                        </div>
                                        <input type="file" name="audio_answers[{{ $quizQuestion->id }}]" accept=".mp3,.wav,.ogg,.m4a,.webm,audio/*" class="question-input w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm text-zinc-700 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-200" data-question-index="{{ $index }}" data-has-existing-answer="{{ filled($storedAnswer) ? '1' : '0' }}">
                                        @if (filled($storedAnswer))
                                            <div class="rounded-[1.5rem] border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-950">
                                                <div class="mb-3 text-xs font-black uppercase tracking-[0.2em] text-zinc-400">{{ $isArabic ? 'إجابة صوتية محفوظة' : 'Saved audio answer' }}</div>
                                                <audio controls class="w-full">
                                                    <source src="{{ asset('storage/' . $storedAnswer) }}">
                                                </audio>
                                            </div>
                                        @endif
                                    </div>
                                @elseif ($question->type === 'fill_blank' && $question->fillBlank)
                                    @php
                                        $templateText = $question->fillBlank->template_text ?? '';
                                        $segments = preg_split('/\[blank\]/', $templateText) ?: [$templateText];
                                        $savedFillAnswers = is_array($storedAnswer) ? $storedAnswer : (json_decode($storedAnswer ?? '[]', true) ?: []);
                                    @endphp
                                    <div class="rounded-[1.5rem] border border-zinc-200 bg-zinc-50 p-5 leading-8 dark:border-zinc-800 dark:bg-zinc-950">
                                        @foreach ($segments as $segmentIndex => $segment)
                                            <span class="text-sm font-medium text-zinc-700 dark:text-zinc-200">{{ $segment }}</span>
                                            @if (! $loop->last)
                                                <input type="text" name="answers[{{ $quizQuestion->id }}][{{ $segmentIndex }}]" value="{{ $savedFillAnswers[$segmentIndex] ?? '' }}" class="question-input mx-2 my-2 inline-flex min-w-[11rem] rounded-xl border border-zinc-300 bg-white px-3 py-2 text-sm font-bold text-zinc-700 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100" data-question-index="{{ $index }}" placeholder="{{ $isArabic ? 'أكمل هنا' : 'Fill here' }}">
                                            @endif
                                        @endforeach
                                    </div>
                                @else
                                    <div class="rounded-2xl border border-dashed border-zinc-300 px-4 py-5 text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
                                        {{ $isArabic ? 'نوع هذا السؤال غير مدعوم حالياً في الواجهة الجديدة.' : 'This question type is not yet supported in the new interface.' }}
                                    </div>
                                @endif
                            </div>

                            <div class="mt-6 flex flex-col gap-3 border-t border-zinc-200 pt-5 dark:border-zinc-800 sm:flex-row sm:items-center sm:justify-between">
                                <button type="button" class="inline-flex items-center justify-center gap-2 rounded-2xl border border-zinc-200 px-4 py-3 text-sm font-black text-zinc-700 dark:border-zinc-800 dark:text-zinc-200" data-question-prev @if ($index === 0) disabled @endif>
                                    <i class="fa-solid fa-arrow-{{ $isArabic ? 'right' : 'left' }}"></i>
                                    {{ $isArabic ? 'السؤال السابق' : 'Previous question' }}
                                </button>
                                <div class="text-xs font-bold text-zinc-400">{{ $isArabic ? 'يتم حفظ الإجابة المختارة تلقائياً داخل المحاولة الحالية.' : 'The selected answer is kept automatically in the current attempt.' }}</div>
                                <button type="button" class="inline-flex items-center justify-center gap-2 rounded-2xl bg-primary px-4 py-3 text-sm font-black text-white" data-question-next @if ($index === $quiz->questions->count() - 1) disabled @endif>
                                    {{ $isArabic ? 'السؤال التالي' : 'Next question' }}
                                    <i class="fa-solid fa-arrow-{{ $isArabic ? 'left' : 'right' }}"></i>
                                </button>
                            </div>
                        </article>
                    @endif
                @endforeach
            </div>

            <div class="border-t border-zinc-200 bg-zinc-50 px-6 py-5 dark:border-zinc-800 dark:bg-zinc-950">
                <p class="text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'التنقل بين الأسئلة وحفظ الإجابات يتم داخل الصفحة، ويمكنك تسليم الاختبار من العمود الجانبي.' : 'Question navigation and answer saving happen inside the page, and you can submit the quiz from the sidebar.' }}</p>
            </div>
        </form>

        <aside class="space-y-6">
            <div class="student-card p-6">
                <h3 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'ملخص سريع' : 'Quick summary' }}</h3>
                <div class="mt-4 grid gap-3">
                    <div class="rounded-2xl bg-zinc-50 px-4 py-4 dark:bg-zinc-950">
                        <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'عدد الأسئلة' : 'Questions' }}</div>
                        <div class="mt-1 text-2xl font-black text-zinc-900 dark:text-white font-numbers">{{ $quiz->questions->count() }}</div>
                    </div>
                    <div class="rounded-2xl bg-zinc-50 px-4 py-4 dark:bg-zinc-950">
                        <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'الدرجة الكلية' : 'Total marks' }}</div>
                        <div class="mt-1 text-2xl font-black text-zinc-900 dark:text-white font-numbers">{{ $quiz->total_marks }}</div>
                    </div>
                    <div class="rounded-2xl bg-zinc-50 px-4 py-4 dark:bg-zinc-950">
                        <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'المدة' : 'Duration' }}</div>
                        <div class="mt-1 text-2xl font-black text-zinc-900 dark:text-white font-numbers">{{ $quiz->duration }}</div>
                    </div>
                </div>
                <div class="mt-5 border-t border-zinc-200 pt-5 dark:border-zinc-800">
                    <p class="text-sm leading-7 text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'بعد المراجعة النهائية، استخدم هذا الزر لتسليم الاختبار.' : 'After your final review, use this button to submit the quiz.' }}</p>
                </div>
            </div>

            <div class="student-card p-6">
                <h3 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'إنهاء المحاولة' : 'Finish attempt' }}</h3>
                <p class="mt-3 text-sm leading-7 text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'عند الضغط على زر التسليم سيتم إرسال جميع الإجابات الحالية وإنهاء المحاولة.' : 'Submitting will send all current answers and close this attempt.' }}</p>
                <button type="submit" form="student-quiz-form"
                    onclick="return confirm('{{ $isArabic ? 'هل أنت متأكد من تسليم الاختبار؟ لا يمكن التراجع بعد التسليم.' : 'Are you sure you want to submit? This cannot be undone.' }}')"
                    class="mt-5 inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-primary px-5 py-3 text-sm font-black text-white">
                    <i class="fa-solid fa-paper-plane text-xs"></i>
                    {{ $isArabic ? 'تسليم الاختبار' : 'Submit quiz' }}
                </button>
            </div>
        </aside>
    </section>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var timerNode = document.querySelector('[data-quiz-timer]');
        if (!timerNode) {
            return;
        }

        var remaining = Number(timerNode.getAttribute('data-quiz-timer') || 0);
        var form = document.querySelector('form[action*="quizzes"]');
        var panels = Array.from(document.querySelectorAll('[data-question-panel]'));
        var navButtons = Array.from(document.querySelectorAll('[data-question-target]'));
        var prevButtons = Array.from(document.querySelectorAll('[data-question-prev]'));
        var nextButtons = Array.from(document.querySelectorAll('[data-question-next]'));
        var storageKey = 'student-quiz-' + {{ $quiz->id }} + '-answers';
        var currentQuestion = 0;

        function getSavedState() {
            try {
                return JSON.parse(sessionStorage.getItem(storageKey) || '{}');
            } catch (error) {
                return {};
            }
        }

        function setSavedState(state) {
            sessionStorage.setItem(storageKey, JSON.stringify(state));
        }

        function markAnsweredQuestions() {
            navButtons.forEach(function (button, index) {
                var inputs = document.querySelectorAll('.question-input[data-question-index="' + index + '"]');
                var answered = Array.from(inputs).some(function (input) {
                    if (input.type === 'file') {
                        return input.files.length > 0 || input.getAttribute('data-has-existing-answer') === '1';
                    }

                    if (input.type === 'radio' || input.type === 'checkbox') {
                        return input.checked;
                    }

                    return String(input.value || '').trim() !== '';
                });

                button.classList.toggle('bg-primary', answered || index === currentQuestion);
                button.classList.toggle('text-white', answered || index === currentQuestion);
                button.classList.toggle('border-primary', answered || index === currentQuestion);
                button.classList.toggle('bg-emerald-50', answered && index !== currentQuestion);
                button.classList.toggle('text-emerald-700', answered && index !== currentQuestion);
                button.classList.toggle('border-emerald-200', answered && index !== currentQuestion);
            });
        }

        function showQuestion(index) {
            currentQuestion = Math.max(0, Math.min(index, panels.length - 1));
            panels.forEach(function (panel, panelIndex) {
                panel.style.display = panelIndex === currentQuestion ? '' : 'none';
            });
            prevButtons.forEach(function (button, panelIndex) {
                button.disabled = panelIndex === 0;
            });
            nextButtons.forEach(function (button, panelIndex) {
                button.disabled = panelIndex === panels.length - 1;
            });
            markAnsweredQuestions();
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        function saveCurrentAnswers() {
            var state = getSavedState();
            document.querySelectorAll('.question-input').forEach(function (input) {
                var name = input.name;

                if (! name) {
                    return;
                }

                if (input.type === 'file') {
                    return;
                } else if (input.type === 'radio') {
                    if (input.checked) {
                        state[name] = input.value;
                    }
                } else if (input.tagName === 'SELECT') {
                    state[name] = input.value;
                } else {
                    state[name] = input.value;
                }
            });
            setSavedState(state);
            markAnsweredQuestions();
        }

        function restoreSavedAnswers() {
            var state = getSavedState();
            document.querySelectorAll('.question-input').forEach(function (input) {
                var name = input.name;
                if (! name || typeof state[name] === 'undefined') {
                    return;
                }

                if (input.type === 'file') {
                    return;
                } else if (input.type === 'radio') {
                    input.checked = String(input.value) === String(state[name]);
                } else {
                    input.value = state[name];
                }
            });
        }

        function renderTime(seconds) {
            var minutes = String(Math.floor(seconds / 60)).padStart(2, '0');
            var secs = String(seconds % 60).padStart(2, '0');
            timerNode.textContent = minutes + ':' + secs;
        }

        restoreSavedAnswers();
        showQuestion(0);

        navButtons.forEach(function (button) {
            button.addEventListener('click', function () {
                saveCurrentAnswers();
                showQuestion(Number(button.getAttribute('data-question-target') || 0));
            });
        });

        prevButtons.forEach(function (button, index) {
            button.addEventListener('click', function () {
                saveCurrentAnswers();
                showQuestion(index - 1);
            });
        });

        nextButtons.forEach(function (button, index) {
            button.addEventListener('click', function () {
                saveCurrentAnswers();
                showQuestion(index + 1);
            });
        });

        document.querySelectorAll('.question-input').forEach(function (input) {
            var eventName = input.tagName === 'SELECT' || input.type === 'radio' ? 'change' : 'input';
            input.addEventListener(eventName, function () {
                saveCurrentAnswers();

                if (input.type === 'radio') {
                    var questionIndex = Number(input.getAttribute('data-question-index') || 0);
                    if (questionIndex < panels.length - 1) {
                        window.setTimeout(function () {
                            showQuestion(questionIndex + 1);
                        }, 180);
                    }
                }
            });
        });

        if (form) {
            form.addEventListener('submit', function () {
                saveCurrentAnswers();
                sessionStorage.removeItem(storageKey);
            });
        }

        renderTime(remaining);

        var warned5min = false;

        var interval = window.setInterval(function () {
            remaining -= 1;

            if (remaining <= 0) {
                renderTime(0);
                window.clearInterval(interval);
                if (form) {
                    form.submit();
                }
                return;
            }

            if (!warned5min && remaining <= 300) {
                warned5min = true;
                var msg = document.documentElement.lang === 'ar'
                    ? '⚠️ تبقى 5 دقائق فقط على انتهاء الاختبار!'
                    : '⚠️ Only 5 minutes remaining!';
                alert(msg);
                if (timerNode) {
                    timerNode.classList.add('text-red-600', 'dark:text-red-400');
                }
            }

            renderTime(remaining);
        }, 1000);
    });
</script>
@endsection