@extends('layouts.self-paced-portal')

@section('title', 'Exam — ' . $course->title)
@section('course-title', $course->title)
@section('current-phase', '3')
@section('progress-percentage', $progressPercentage)

@push('styles')
<style>
    /* Ensure embedded images from Quill editor render correctly in exam questions */
    .prose img { max-width: 100%; height: auto; border-radius: 6px; }
    /* Ensure embedded iframes (YouTube/Vimeo) render correctly */
    .prose iframe { max-width: 100%; width: 100%; aspect-ratio: 16/9; border-radius: 8px; border: none; }
</style>
@endpush

@section('content')
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6"
     x-data="{
        {{-- ── State ─────────────────────────────────────────────────── --}}
        currentIndex:   {{ $currentIndex }},
        totalQuestions: {{ $totalQuestions }},
        answeredCount:  {{ $answeredCount }},
        remainingSeconds: {{ $remainingSeconds }},
        timerInterval:  null,
        submitting:     false,
        showSubmitModal: false,
        loadingQuestion: false,

        {{-- Current question data (populated from PHP or AJAX) --}}
        questionId:        {{ $currentQuestion?->id ?? 'null' }},
        questionText:      @js($currentQuestion?->question_text ?? ''),
        questionHtml:      @js($currentQuestion?->question_text_html ?: ($currentQuestion?->question_text ?? '')),
        optionA:           @js($currentQuestion?->option_a ?? ''),
        optionB:           @js($currentQuestion?->option_b ?? ''),
        optionC:           @js($currentQuestion?->option_c ?? ''),
        optionD:           @js($currentQuestion?->option_d ?? ''),
        selectedAnswer:    @js($currentQuestion ? ($attempt->getAnswerFor($currentQuestion->id) ?? '') : ''),
        allowMultiple:     {{ $currentQuestion?->allow_multiple_answers ? 'true' : 'false' }},
        selectedAnswers:   {},
        questionMediaType: @js($currentQuestion?->question_media_type ?? null),
        questionMediaUrl:  @js($currentQuestion?->question_media_path ? \Illuminate\Support\Facades\Storage::url($currentQuestion->question_media_path) : null),
        questionMediaName: @js($currentQuestion?->question_media_name ?? null),
        uploadRequired:    {{ $currentQuestion?->upload_required ? 'true' : 'false' }},
        uploadLabel:       @js($currentQuestion?->upload_label ?? null),

        {{-- Answered map: questionId → selected option --}}
        answeredMap: @js(collect($questionIds)->mapWithKeys(fn($qid, $i) => [$i => $attempt->getAnswerFor($qid) ?? null])->toArray()),

        {{-- Topic groups for section labels --}}
        topicGroups: @js($topicGroups),

        {{-- ── Computed: current topic label ─────────────────────────── --}}
        get currentTopicLabel() {
            for (const group of this.topicGroups) {
                const end = group.start_index + group.question_ids.length;
                if (this.currentIndex >= group.start_index && this.currentIndex < end) {
                    return group.topic_title;
                }
            }
            return '';
        },

        {{-- ── Timer helpers ─────────────────────────────────────────── --}}
        get timerFormatted() {
            let s = this.remainingSeconds;
            let h = Math.floor(s / 3600);
            let m = Math.floor((s % 3600) / 60);
            let sec = s % 60;
            if (h > 0) return String(h).padStart(2,'0') + ':' + String(m).padStart(2,'0') + ':' + String(sec).padStart(2,'0');
            return String(m).padStart(2,'0') + ':' + String(sec).padStart(2,'0');
        },
        get timerCritical() { return this.remainingSeconds <= 300; },
        get timerDanger()   { return this.remainingSeconds <= 60; },

        {{-- ── Lifecycle ──────────────────────────────────────────────── --}}
        init() {
            this.startTimer();
            // Parse saved multi-answer into selectedAnswers map
            this.parseSelectedAnswers();
            window.addEventListener('beforeunload', (e) => {
                if (!this.submitting) {
                    e.preventDefault();
                    e.returnValue = 'Your exam is in progress. Leaving will not stop the timer.';
                }
            });
        },

        parseSelectedAnswers() {
            this.selectedAnswers = {};
            if (this.selectedAnswer) {
                this.selectedAnswer.split(',').forEach(l => {
                    if (l.trim()) this.selectedAnswers[l.trim()] = true;
                });
            }
        },

        startTimer() {
            this.timerInterval = setInterval(() => {
                if (this.remainingSeconds > 0) {
                    this.remainingSeconds--;
                } else {
                    clearInterval(this.timerInterval);
                    this.autoSubmit();
                }
            }, 1000);
        },

        {{-- ── Auto-submit on timer expiry ───────────────────────────── --}}
        async autoSubmit() {
            if (this.submitting) return;
            this.submitting = true;
            try {
                const res = await axios.post(
                    '{{ route('self-paced.learn.exam.submit', [$course, $attempt]) }}',
                    { _token: '{{ csrf_token() }}' }
                );
                if (res.data.success) {
                    window.location.href = res.data.redirect_url;
                }
            } catch(e) {
                window.location.reload();
            }
        },

        {{-- ── Save answer immediately on selection ──────────────────── --}}
        async selectAnswer(option) {
            this.selectedAnswer = option;
            this.answeredMap[this.currentIndex] = option;
            this.answeredCount = Object.values(this.answeredMap).filter(v => v !== null && v !== undefined && v !== '').length;
            try {
                await axios.post(
                    '{{ route('api.self-paced.exam.answer', [$course, $attempt]) }}',
                    { question_id: this.questionId, selected_option: option, _token: '{{ csrf_token() }}' }
                );
            } catch(e) { /* silent */ }
        },

        {{-- ── Toggle a multi-answer checkbox ────────────────────────── --}}
        async toggleMultiAnswer(letter) {
            if (this.selectedAnswers[letter]) {
                delete this.selectedAnswers[letter];
            } else {
                this.selectedAnswers[letter] = true;
            }
            // Build sorted comma-separated string: "A,C"
            const sorted = Object.keys(this.selectedAnswers).sort().join(',');
            this.selectedAnswer = sorted;
            this.answeredMap[this.currentIndex] = sorted || null;
            this.answeredCount = Object.values(this.answeredMap).filter(v => v !== null && v !== undefined && v !== '').length;
            if (!sorted) return; // nothing selected yet — don't save
            try {
                await axios.post(
                    '{{ route('api.self-paced.exam.answer', [$course, $attempt]) }}',
                    { question_id: this.questionId, selected_option: sorted, _token: '{{ csrf_token() }}' }
                );
            } catch(e) { /* silent */ }
        },

        {{-- ── Navigate to a question by index ───────────────────────── --}}
        async goToQuestion(index) {
            if (index < 0 || index >= this.totalQuestions || this.loadingQuestion) return;
            this.loadingQuestion = true;
            try {
                const res = await axios.get(
                    '{{ route('api.self-paced.exam.question', [$course, $attempt, '__IDX__']) }}'.replace('__IDX__', index)
                );
                if (res.data.success) {
                    this.currentIndex      = res.data.index;
                    this.questionId        = res.data.question_id;
                    this.questionText      = res.data.question_text;
                    this.questionHtml      = res.data.question_text_html || res.data.question_text;
                    this.optionA           = res.data.option_a;
                    this.optionB           = res.data.option_b;
                    this.optionC           = res.data.option_c;
                    this.optionD           = res.data.option_d;
                    this.allowMultiple     = res.data.allow_multiple ?? false;
                    this.selectedAnswer    = res.data.saved_answer ?? '';
                    this.remainingSeconds  = res.data.remaining_seconds;
                    this.questionMediaType = res.data.question_media_type ?? null;
                    this.questionMediaUrl  = res.data.question_media_url ?? null;
                    this.questionMediaName = res.data.question_media_name ?? null;
                    this.uploadRequired    = res.data.upload_required ?? false;
                    this.uploadLabel       = res.data.upload_label ?? null;
                    this.parseSelectedAnswers();
                    // Re-render rich HTML question
                    this.$nextTick(() => {
                        const el = document.getElementById('question-html-body');
                        if (el) el.innerHTML = this.questionHtml;
                    });
                }
            } catch(e) { /* silent */ } finally {
                this.loadingQuestion = false;
            }
        },

        {{-- ── Manual submit ──────────────────────────────────────────── --}}
        async confirmSubmit() {
            this.showSubmitModal = false;
            if (this.submitting) return;
            this.submitting = true;
            clearInterval(this.timerInterval);
            try {
                const res = await axios.post(
                    '{{ route('self-paced.learn.exam.submit', [$course, $attempt]) }}',
                    { _token: '{{ csrf_token() }}' }
                );
                if (res.data.success) {
                    window.location.href = res.data.redirect_url;
                }
            } catch(e) {
                this.submitting = false;
                this.startTimer();
                alert('Submission failed. Please try again.');
            }
        }
     }"
     x-init="init()">

    {{-- =================================================================
         TOP BAR — Question counter + Timer
    ================================================================= --}}
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm px-4 py-3 mb-5 flex flex-col sm:flex-row items-center gap-3">

        {{-- Question counter --}}
        <div class="flex items-center gap-3 flex-1">
            <span class="text-sm font-semibold text-gray-700">
                Question <span x-text="currentIndex + 1" class="text-indigo-700"></span>
                of <span x-text="totalQuestions"></span>
            </span>
            <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">
                <i class="fas fa-check text-xs"></i>
                <span x-text="answeredCount"></span> answered
            </span>
            <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500">
                <span x-text="totalQuestions - answeredCount"></span> remaining
            </span>
        </div>

        {{-- Countdown Timer --}}
        <div class="flex items-center gap-2 px-4 py-2 rounded-xl font-mono font-bold text-lg transition-colors"
             :class="{
                 'bg-red-600 text-white animate-pulse': timerDanger,
                 'bg-amber-100 text-amber-700': timerCritical && !timerDanger,
                 'bg-indigo-50 text-indigo-700': !timerCritical
             }">
            <i class="fas fa-stopwatch text-sm" :class="{ 'text-white': timerDanger, 'text-amber-500': timerCritical && !timerDanger, 'text-indigo-400': !timerCritical }"></i>
            <span x-text="timerFormatted"></span>
        </div>

        {{-- Submit Button --}}
        <button @click="showSubmitModal = true"
                :disabled="submitting"
                class="inline-flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition shadow-sm disabled:opacity-50 disabled:cursor-not-allowed">
            <i class="fas fa-paper-plane text-xs"></i>
            <span x-text="submitting ? 'Submitting...' : 'Submit Exam'"></span>
        </button>
    </div>

    {{-- =================================================================
         QUESTION AREA
    ================================================================= --}}
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6 mb-5 min-h-[280px]">

        {{-- Loading overlay --}}
        <div x-show="loadingQuestion" class="flex items-center justify-center py-16">
            <i class="fas fa-spinner fa-spin text-indigo-400 text-2xl"></i>
        </div>

        <div x-show="!loadingQuestion">
            {{-- Topic section label --}}
            <div x-show="currentTopicLabel" x-cloak
                 class="flex items-center gap-1.5 text-xs font-semibold text-indigo-600 mb-3">
                <i class="fas fa-bookmark text-indigo-400"></i>
                <span x-text="currentTopicLabel"></span>
            </div>

            {{-- Question number badge --}}
            <div class="flex items-center gap-2 mb-4">
                <span class="inline-flex items-center justify-center w-7 h-7 bg-indigo-600 text-white text-xs font-bold rounded-full flex-shrink-0"
                      x-text="currentIndex + 1"></span>
                <span class="text-xs text-gray-400 font-medium uppercase tracking-wide">Question</span>
            </div>

            {{-- Question text — rich HTML if available, plain text fallback --}}
            <div id="question-html-body"
                 class="text-base sm:text-lg font-medium text-gray-800 leading-relaxed mb-6 prose prose-sm max-w-none prose-img:rounded-lg prose-img:shadow-sm">
                {!! $currentQuestion?->question_text_html ?: $currentQuestion?->question_text !!}
            </div>

            {{-- ── Question Media (image / video / pdf / presentation / excel) ── --}}
            <div x-show="questionMediaUrl" x-cloak class="mb-6">

                {{-- Image --}}
                <template x-if="questionMediaType === 'image'">
                    <div x-data="{ lightbox: false }">
                        <img :src="questionMediaUrl" :alt="questionMediaName"
                             class="w-full rounded-xl object-contain max-h-80 cursor-zoom-in hover:opacity-95 transition border border-gray-100 shadow-sm"
                             @click="lightbox = true" loading="lazy">
                        <div x-show="lightbox" x-transition @click="lightbox = false"
                             @keydown.escape.window="lightbox = false"
                             class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4 cursor-zoom-out" x-cloak>
                            <img :src="questionMediaUrl" :alt="questionMediaName"
                                 class="max-w-full max-h-full rounded-lg shadow-2xl object-contain">
                            <button @click.stop="lightbox = false"
                                    class="absolute top-4 right-4 w-9 h-9 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center text-white transition">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </template>

                {{-- Video --}}
                <template x-if="questionMediaType === 'video'">
                    <div>
                        <video controls class="w-full rounded-xl bg-black max-h-80 shadow-sm" preload="metadata"
                               :src="questionMediaUrl">
                            Your browser does not support video.
                        </video>
                        <p class="text-xs text-gray-400 mt-1 flex items-center gap-1">
                            <i class="fas fa-info-circle"></i> Watch the video above before answering.
                        </p>
                    </div>
                </template>

                {{-- PDF --}}
                <template x-if="questionMediaType === 'pdf'">
                    <div>
                        <div class="rounded-xl overflow-hidden border border-gray-200 shadow-sm">
                            <iframe :src="questionMediaUrl + '#toolbar=1&navpanes=0'"
                                    class="w-full" style="height: 420px;" title="Question PDF"></iframe>
                        </div>
                        <a :href="questionMediaUrl" target="_blank"
                           class="inline-flex items-center gap-1.5 mt-2 text-xs text-indigo-600 hover:text-indigo-800 font-medium transition">
                            <i class="fas fa-external-link-alt"></i> Open PDF in new tab
                        </a>
                    </div>
                </template>

                {{-- Presentation / Excel — download card --}}
                <template x-if="questionMediaType === 'presentation' || questionMediaType === 'excel'">
                    <div class="flex items-center gap-3 p-4 bg-orange-50 border border-orange-100 rounded-xl">
                        <span class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                              :class="questionMediaType === 'presentation' ? 'bg-orange-100' : 'bg-green-100'">
                            <i class="fas text-lg"
                               :class="questionMediaType === 'presentation' ? 'fa-file-powerpoint text-orange-600' : 'fa-file-excel text-green-600'"></i>
                        </span>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-gray-700 truncate" x-text="questionMediaName"></p>
                            <p class="text-xs text-gray-500">Download and review this file before answering.</p>
                        </div>
                        <a :href="questionMediaUrl" :download="questionMediaName"
                           class="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold rounded-lg transition">
                            <i class="fas fa-download"></i> Download
                        </a>
                    </div>
                </template>
            </div>

            {{-- ── Learner File Upload (when upload_required = true) ── --}}
            <div x-show="uploadRequired" x-cloak
                 class="mb-6 p-4 bg-amber-50 border border-amber-200 rounded-xl">
                <p class="text-xs font-semibold text-amber-800 mb-1 flex items-center gap-1.5">
                    <i class="fas fa-upload text-amber-600"></i> File Upload Required
                </p>
                <p class="text-xs text-amber-700 mb-3" x-text="uploadLabel || 'Download the file above, complete it, and upload your response here.'"></p>
                <input type="file"
                       :name="'upload_q_' + questionId"
                       accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.zip,.jpg,.jpeg,.png"
                       class="w-full text-sm text-gray-600 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-amber-100 file:text-amber-700 hover:file:bg-amber-200 transition">
                <p class="text-xs text-gray-400 mt-1">Accepted: PDF, Word, Excel, PowerPoint, ZIP, images. Max 50 MB.</p>
            </div>

            {{-- Answer Options — single (radio) or multi (checkbox) --}}
            <div class="space-y-3">

                {{-- Multi-answer hint --}}
                <div x-show="allowMultiple" x-cloak
                     class="flex items-center gap-2 text-xs text-indigo-700 bg-indigo-50 border border-indigo-100 rounded-lg px-3 py-2 mb-1">
                    <i class="fas fa-check-double text-indigo-500"></i>
                    Select all correct answers — you must choose all of them to score the mark.
                </div>

                @foreach(['A', 'B', 'C', 'D'] as $letter)
                @php $optVar = 'option' . $letter; @endphp

                {{-- Single-answer radio button --}}
                <button x-show="!allowMultiple"
                        @click="selectAnswer('{{ $letter }}')"
                        class="w-full flex items-center gap-3 px-4 py-3.5 rounded-xl border-2 text-left transition-all"
                        :class="selectedAnswer === '{{ $letter }}'
                            ? 'border-indigo-500 bg-indigo-50 text-indigo-800'
                            : 'border-gray-200 bg-white text-gray-700 hover:border-indigo-300 hover:bg-indigo-50/40'">
                    <span class="flex-shrink-0 w-8 h-8 rounded-full border-2 flex items-center justify-center text-sm font-bold transition-colors"
                          :class="selectedAnswer === '{{ $letter }}'
                              ? 'border-indigo-500 bg-indigo-500 text-white'
                              : 'border-gray-300 text-gray-500'">
                        {{ $letter }}
                    </span>
                    <span class="flex-1 text-sm leading-relaxed" x-text="{{ $optVar }}"></span>
                    <i class="fas fa-check-circle text-indigo-500 flex-shrink-0 transition-opacity"
                       :class="selectedAnswer === '{{ $letter }}' ? 'opacity-100' : 'opacity-0'"></i>
                </button>

                {{-- Multi-answer checkbox button --}}
                <button x-show="allowMultiple" x-cloak
                        @click="toggleMultiAnswer('{{ $letter }}')"
                        class="w-full flex items-center gap-3 px-4 py-3.5 rounded-xl border-2 text-left transition-all"
                        :class="selectedAnswers['{{ $letter }}']
                            ? 'border-indigo-500 bg-indigo-50 text-indigo-800'
                            : 'border-gray-200 bg-white text-gray-700 hover:border-indigo-300 hover:bg-indigo-50/40'">
                    <span class="flex-shrink-0 w-8 h-8 rounded-lg border-2 flex items-center justify-center text-sm font-bold transition-colors"
                          :class="selectedAnswers['{{ $letter }}']
                              ? 'border-indigo-500 bg-indigo-500 text-white'
                              : 'border-gray-300 text-gray-500'">
                        <template x-if="selectedAnswers['{{ $letter }}']">
                            <i class="fas fa-check text-xs"></i>
                        </template>
                        <template x-if="!selectedAnswers['{{ $letter }}']">
                            <span>{{ $letter }}</span>
                        </template>
                    </span>
                    <span class="flex-1 text-sm leading-relaxed" x-text="{{ $optVar }}"></span>
                    <span class="flex-shrink-0 text-xs font-medium px-2 py-0.5 rounded-full transition"
                          :class="selectedAnswers['{{ $letter }}'] ? 'bg-indigo-100 text-indigo-700' : 'bg-gray-100 text-gray-400'">
                        <span x-text="selectedAnswers['{{ $letter }}'] ? '✓ Selected' : 'Select'"></span>
                    </span>
                </button>

                @endforeach
            </div>
        </div>
    </div>

    {{-- =================================================================
         QUESTION NAVIGATOR GRID
    ================================================================= --}}
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 mb-5">
        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3 flex items-center gap-1.5">
            <i class="fas fa-th text-gray-400"></i> Question Navigator
        </p>
        <div class="flex flex-wrap gap-2">
            @foreach($questionIds as $idx => $qid)
            <button @click="goToQuestion({{ $idx }})"
                    class="w-9 h-9 rounded-lg text-xs font-bold transition-all border-2"
                    :class="{
                        'bg-indigo-600 border-indigo-600 text-white shadow-sm': currentIndex === {{ $idx }},
                        'bg-green-100 border-green-300 text-green-700': currentIndex !== {{ $idx }} && answeredMap[{{ $idx }}],
                        'bg-white border-gray-200 text-gray-500 hover:border-indigo-300 hover:bg-indigo-50': currentIndex !== {{ $idx }} && !answeredMap[{{ $idx }}]
                    }">
                {{ $idx + 1 }}
            </button>
            @endforeach
        </div>
        <div class="flex items-center gap-4 mt-3 text-xs text-gray-400">
            <span class="flex items-center gap-1.5">
                <span class="w-3 h-3 rounded bg-indigo-600 inline-block"></span> Current
            </span>
            <span class="flex items-center gap-1.5">
                <span class="w-3 h-3 rounded bg-green-200 border border-green-300 inline-block"></span> Answered
            </span>
            <span class="flex items-center gap-1.5">
                <span class="w-3 h-3 rounded bg-white border border-gray-300 inline-block"></span> Unanswered
            </span>
        </div>
    </div>

    {{-- =================================================================
         BOTTOM NAVIGATION BAR
    ================================================================= --}}
    <div class="flex items-center justify-between gap-3">
        <button @click="goToQuestion(currentIndex - 1)"
                :disabled="currentIndex === 0 || loadingQuestion"
                class="inline-flex items-center gap-1.5 px-4 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-600 text-sm font-medium rounded-lg transition disabled:opacity-40 disabled:cursor-not-allowed">
            <i class="fas fa-arrow-left text-xs"></i> Previous
        </button>

        <span class="text-xs text-gray-400">
            <span x-text="answeredCount"></span> / <span x-text="totalQuestions"></span> answered
        </span>

        <button @click="goToQuestion(currentIndex + 1)"
                :disabled="currentIndex >= totalQuestions - 1 || loadingQuestion"
                class="inline-flex items-center gap-1.5 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition disabled:opacity-40 disabled:cursor-not-allowed">
            Next <i class="fas fa-arrow-right text-xs"></i>
        </button>
    </div>

    {{-- =================================================================
         SUBMIT CONFIRMATION MODAL
    ================================================================= --}}
    <div x-show="showSubmitModal"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @keydown.escape.window="showSubmitModal = false"
         class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4"
         x-cloak>
        <div @click.stop
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 scale-95"
             x-transition:enter-end="opacity-100 scale-100"
             class="bg-white rounded-2xl shadow-2xl max-w-md w-full overflow-hidden">

            <div class="flex items-center justify-between px-6 py-4 bg-gradient-to-r from-amber-500 to-amber-600 rounded-t-2xl">
                <h3 class="text-base font-semibold text-white flex items-center gap-2">
                    <i class="fas fa-paper-plane"></i> Submit Exam?
                </h3>
                <button @click="showSubmitModal = false" class="text-white/80 hover:text-white transition">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="p-6">
                <p class="text-sm text-gray-500 text-center mb-4">
                    You have answered
                    <strong x-text="answeredCount" class="text-indigo-700"></strong>
                    of
                    <strong x-text="totalQuestions"></strong>
                    questions.
                </p>

            <div x-show="answeredCount < totalQuestions"
                 class="bg-amber-50 border border-amber-200 rounded-lg px-4 py-3 mb-4 text-sm text-amber-700 flex items-start gap-2">
                <i class="fas fa-exclamation-triangle mt-0.5 flex-shrink-0"></i>
                <span>
                    You have <strong x-text="totalQuestions - answeredCount"></strong> unanswered question(s).
                    Unanswered questions will be marked as incorrect.
                </span>
            </div>

            <p class="text-sm text-gray-500 text-center mb-5">
                Once submitted, you cannot change your answers.
            </p>

            <div class="flex gap-3">
                <button @click="showSubmitModal = false"
                        class="flex-1 px-4 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition">
                    <i class="fas fa-arrow-left mr-1"></i> Continue Exam
                </button>
                <button @click="confirmSubmit()"
                        class="flex-1 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-bold rounded-lg transition shadow-sm">
                    <i class="fas fa-check mr-1"></i> Yes, Submit
                </button>
            </div>
            </div>
        </div>
    </div>

</div>
@endsection
