@extends('frontend.layouts.app')

@section('title', 'Play Quiz')
@php
    $hideFooter = true;
    $hideHeader = true;

    $answeredCount = count($answeredQuestionIds ?? []);
    $totalCount = $questions->count();
    $progressPercent = $totalCount > 0 ? round(($answeredCount / $totalCount) * 100) : 0;
    $remainingCount = max($totalCount - $answeredCount, 0);
    $isLastQuestion = $currentQuestionNumber >= $totalCount;
    $previousQuestionUrl =
        $currentQuestionNumber > 1 ? route('quiz.question', [$contest->id, $currentQuestionNumber - 1]) : null;
    $nextQuestionUrl =
        $currentQuestionNumber < $totalCount
            ? route('quiz.question', [$contest->id, $currentQuestionNumber + 1])
            : null;
@endphp
@section('content')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap"
        rel="stylesheet">

    <section class="quiz-page">
        <div class="quiz-shell">

            {{-- Top bar --}}
            <header class="quiz-topbar">
                <div class="quiz-topbar__title">
                    <span class="quiz-icon" aria-hidden="true">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                            <path d="M9.5 9a2.5 2.5 0 1 1 3.4 2.33c-.66.27-1.4.9-1.4 1.92" stroke="currentColor"
                                stroke-width="1.8" stroke-linecap="round" />
                            <circle cx="12" cy="17" r="0.9" fill="currentColor" />
                            <rect x="3" y="3" width="18" height="18" rx="6" stroke="currentColor"
                                stroke-width="1.8" />
                        </svg>
                    </span>
                    <div>
                        <p class="quiz-eyebrow">{{ $contest->title }}</p>
                        <p class="quiz-subtle">Question {{ $currentQuestionNumber }} of {{ $totalCount }}</p>
                    </div>
                </div>

                <div class="quiz-language-toggle" role="group" aria-label="Select language">
                    <button type="button" class="quiz-language-btn is-active" data-language="en">
                        English
                    </button>
                    <button type="button" class="quiz-language-btn" data-language="hi">
                        हिंदी
                    </button>
                </div>

                <div class="quiz-timer" id="timerWrap">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <circle cx="12" cy="13" r="8" stroke="currentColor" stroke-width="1.8" />
                        <path d="M12 9v4l2.5 2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path d="M9.5 2.5h5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
                    </svg>
                    <span class="quiz-timer__label">Time left</span>
                    <span id="timer" class="quiz-timer__value">00:00</span>
                </div>
            </header>

            {{-- Segmented progress meter: one segment per question --}}
            <div class="quiz-progress" role="progressbar" aria-valuenow="{{ $currentQuestionNumber }}" aria-valuemin="1"
                aria-valuemax="{{ $totalCount }}">
                @for ($i = 1; $i <= $totalCount; $i++)
                    <span
                        class="quiz-progress__seg {{ $i <= $currentQuestionNumber ? 'is-filled' : '' }} {{ $i == $currentQuestionNumber ? 'is-current' : '' }}"></span>
                @endfor
            </div>

            <div class="quiz-grid">
                <div class="quiz-card">
                    @error('selected_answer')
                        <div class="quiz-alert">{{ $message }}</div>
                    @enderror

                    <span class="quiz-chip">Question {{ $currentQuestionNumber }} of {{ $totalCount }}</span>
                    {{-- <h1 class="quiz-question">{{ $question->question }}</h1> --}}

                    <h1 class="quiz-question">
                        <span class="quiz-text-en">{{ $question->question }}</span>

                        @if ($question->question_hi)
                            <span class="quiz-text-hi">{{ $question->question_hi }}</span>
                        @endif
                    </h1>

                    <form method="POST" action="{{ route('quiz.answer', $contest->id) }}" class="quiz-form"
                        id="quiz-answer-form">
                        @csrf
                        <input type="hidden" name="question_id" value="{{ $question->id }}">
                        <div class="quiz-options">
                            <label class="quiz-option">
                                <input class="quiz-option__input" type="radio" name="selected_answer" value="A"
                                    @checked(old('selected_answer', $selectedAnswer) == 'A')>
                                <span class="quiz-option__badge">A</span>
                                {{-- <span class="quiz-option__text">{{ $question->option_a }}</span> --}}
                                <span class="quiz-option__text">
                                    <span class="quiz-text-en">{{ $question->option_a }}</span>

                                    @if ($question->option_a_hi)
                                        <span class="quiz-text-hi">{{ $question->option_a_hi }}</span>
                                    @endif
                                </span>
                                <span class="quiz-option__indicator" aria-hidden="true"></span>
                            </label>

                            <label class="quiz-option">
                                <input class="quiz-option__input" type="radio" name="selected_answer" value="B"
                                    @checked(old('selected_answer', $selectedAnswer) == 'B')>
                                <span class="quiz-option__badge">B</span>
                                <span class="quiz-option__text">
                                    <span class="quiz-text-en">{{ $question->option_b }}</span>

                                    @if ($question->option_b_hi)
                                        <span class="quiz-text-hi">{{ $question->option_b_hi }}</span>
                                    @endif
                                </span>
                                <span class="quiz-option__indicator" aria-hidden="true"></span>
                            </label>

                            <label class="quiz-option">
                                <input class="quiz-option__input" type="radio" name="selected_answer" value="C"
                                    @checked(old('selected_answer', $selectedAnswer) == 'C')>
                                <span class="quiz-option__badge">C</span>
                                <span class="quiz-option__text">
                                    <span class="quiz-text-en">{{ $question->option_c }}</span>

                                    @if ($question->option_c_hi)
                                        <span class="quiz-text-hi">{{ $question->option_c_hi }}</span>
                                    @endif
                                </span>
                                <span class="quiz-option__indicator" aria-hidden="true"></span>
                            </label>

                            <label class="quiz-option">
                                <input class="quiz-option__input" type="radio" name="selected_answer" value="D"
                                    @checked(old('selected_answer', $selectedAnswer) == 'D')>
                                <span class="quiz-option__badge">D</span>
                                <span class="quiz-option__text">
                                    <span class="quiz-text-en">{{ $question->option_d }}</span>

                                    @if ($question->option_d_hi)
                                        <span class="quiz-text-hi">{{ $question->option_d_hi }}</span>
                                    @endif
                                </span>
                                <span class="quiz-option__indicator" aria-hidden="true"></span>
                            </label>
                        </div>

                        <div class="quiz-footer">
                            <span class="quiz-footer__hint">Select an answer to continue</span>
                            <div class="quiz-footer__actions">
                                @if ($previousQuestionUrl)
                                    <a href="{{ $previousQuestionUrl }}"
                                        class="quiz-sidebar-btn quiz-sidebar-btn--secondary">
                                        Previous
                                    </a>
                                @endif

                                @if ($isLastQuestion)
                                    <button type="submit" class="quiz-btn js-submit-quiz" name="submit_quiz"
                                        value="1">
                                        Submit Quiz
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                                            aria-hidden="true">
                                            <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </button>
                                @else
                                    <button type="button" class="quiz-btn js-next-question">
                                        Next Question
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                                            aria-hidden="true">
                                            <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </button>
                                @endif
                            </div>
                        </div>
                    </form>
                </div>

                <aside class="quiz-sidebar">
                    <div class="quiz-sidebar__card">
                        <div class="quiz-sidebar__header">
                            <div class="quiz-ring" aria-hidden="true">
                                <svg viewBox="0 0 40 40">
                                    <circle class="quiz-ring__track" cx="20" cy="20" r="16"
                                        pathLength="100" />
                                    <circle class="quiz-ring__fill" cx="20" cy="20" r="16"
                                        pathLength="100" stroke-dasharray="100"
                                        stroke-dashoffset="{{ 100 - $progressPercent }}" />
                                </svg>
                                <span class="quiz-ring__label">{{ $progressPercent }}%</span>
                            </div>
                            <div>
                                <p class="quiz-sidebar__eyebrow">Your progress</p>
                                <p class="quiz-sidebar__total">{{ $answeredCount }} of {{ $totalCount }} answered</p>
                            </div>
                        </div>

                        <div class="quiz-legend">
                            <span class="quiz-legend__item"><i class="quiz-legend__dot is-current"
                                    aria-hidden="true"></i>Current</span>
                            <span class="quiz-legend__item"><i class="quiz-legend__dot is-complete"
                                    aria-hidden="true"></i>Answered</span>
                            <span class="quiz-legend__item"><i class="quiz-legend__dot"
                                    aria-hidden="true"></i>Unanswered</span>
                        </div>

                        <div class="quiz-question-grid">
                            @foreach ($questions as $index => $item)
                                @php
                                    $questionIndex = $index + 1;
                                    $attempted = in_array($item->id, $answeredQuestionIds ?? []);
                                    $isActive = $currentQuestionNumber === $questionIndex;
                                @endphp
                                <a href="{{ route('quiz.question', [$contest->id, $questionIndex]) }}"
                                    class="quiz-question-pill {{ $attempted ? 'is-complete' : '' }} {{ $isActive ? 'is-active' : '' }}"
                                    @if ($isActive) aria-current="true" @endif
                                    aria-label="Question {{ $questionIndex }}{{ $attempted ? ', answered' : ', unanswered' }}{{ $isActive ? ', current' : '' }}">
                                    {{ $questionIndex }}
                                </a>
                            @endforeach
                        </div>

                        <div class="quiz-sidebar__actions">
                            <button type="submit" form="quiz-answer-form" name="submit_quiz" value="1"
                                class="quiz-sidebar-btn quiz-sidebar-btn--primary js-submit-quiz">
                                <svg width="15" height="15" viewBox="0 0 24 24" fill="none"
                                    aria-hidden="true">
                                    <path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="2.2"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                Submit Quiz
                            </button>
                        </div>

                        @if ($remainingCount > 0)
                            <p class="quiz-sidebar__note">{{ $remainingCount }}
                                question{{ $remainingCount === 1 ? '' : 's' }} still unanswered</p>
                        @endif
                    </div>
                </aside>
            </div>
        </div>
    </section>

    <style>
        .quiz-page {
            --ink: #1D1B31;
            --ink-soft: #6C6885;
            --violet: #5B4FE5;
            --violet-dark: #241F72;
            --violet-tint: #EFEDFC;
            --border: #E6E3F5;
            --bg: #F4F3FB;
            --danger: #E2483D;
            --success: #1FAE5C;
            --success-tint: #E6FBF0;
            --success-border: #BEEBD2;
            --card: #FFFFFF;
            font-family: 'Inter', -apple-system, sans-serif;
            background: var(--bg);
            padding: 40px 20px;
            color: var(--ink);
        }

        .quiz-shell {
            width: 100%;
            max-width: none;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Top bar */
        .quiz-topbar {
            background: linear-gradient(135deg, var(--violet-dark), var(--violet));
            border-radius: 18px 18px 0 0;
            padding: 20px 26px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            color: #fff;
            max-width: 1440px;
            margin: 0 auto;
        }

        .quiz-topbar__title {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .quiz-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.16);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .quiz-eyebrow {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 1.05rem;
            margin: 0;
            line-height: 1.2;
        }

        .quiz-subtle {
            margin: 2px 0 0;
            font-size: 0.82rem;
            color: rgba(255, 255, 255, 0.75);
        }

        .quiz-timer {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.14);
            border: 1px solid rgba(255, 255, 255, 0.25);
            border-radius: 999px;
            padding: 8px 16px;
        }

        .quiz-timer__label {
            font-size: 0.78rem;
            color: rgba(255, 255, 255, 0.8);
        }

        .quiz-timer__value {
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 600;
            font-size: 0.98rem;
            letter-spacing: 0.02em;
            min-width: 48px;
            text-align: right;
        }

        .quiz-timer.is-critical {
            background: rgba(226, 72, 61, 0.28);
            border-color: rgba(226, 72, 61, 0.5);
        }

        .quiz-timer.is-critical .quiz-timer__value {
            animation: quizPulse 1s ease-in-out infinite;
        }

        @keyframes quizPulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.45;
            }
        }

        /* Segmented progress: one bar per question, echoed by the ring in the sidebar —
                               both read as the same "meter" language rather than two unrelated widgets. */
        .quiz-progress {
            display: flex;
            gap: 4px;
            background: var(--violet-dark);
            padding: 0 22px 16px;
            max-width: 1440px;
            margin: 0 auto;
        }

        .quiz-progress__seg {
            flex: 1;
            height: 5px;
            border-radius: 3px;
            background: rgba(255, 255, 255, 0.22);
            transition: background 0.25s ease;
        }

        .quiz-progress__seg.is-filled {
            background: #C9C4FA;
        }

        .quiz-progress__seg.is-current {
            background: #fff;
        }

        .quiz-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr);
            gap: 24px;
            align-items: start;
            width: 100%;
            max-width: 1440px;
            margin: 0 auto;
        }

        /* Question card */
        .quiz-card {
            background: var(--card);
            border-radius: 0 0 18px 18px;
            padding: 32px 28px 28px;
            box-shadow: 0 20px 40px -24px rgba(36, 31, 114, 0.35);
        }

        .quiz-alert {
            background: #FDECEC;
            color: var(--danger);
            border: 1px solid #F7C9C6;
            border-radius: 10px;
            padding: 10px 14px;
            font-size: 0.88rem;
            margin-bottom: 18px;
        }

        .quiz-chip {
            display: inline-block;
            background: var(--violet-tint);
            color: var(--violet);
            font-size: 0.78rem;
            font-weight: 600;
            padding: 6px 12px;
            border-radius: 999px;
            margin-bottom: 16px;
        }

        .quiz-question {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 1.5rem;
            line-height: 1.35;
            margin: 0 0 24px;
            color: var(--ink);
        }

        /* Options */
        .quiz-options {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 26px;
        }

        .quiz-option {
            position: relative;
            display: flex;
            align-items: center;
            gap: 14px;
            border: 1.5px solid var(--border);
            border-radius: 12px;
            padding: 16px;
            cursor: pointer;
            transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
        }

        .quiz-option:hover {
            border-color: #C9C4FA;
            background: #FBFAFF;
        }

        .quiz-option:active {
            transform: scale(0.99);
        }

        .quiz-option__input {
            position: absolute;
            opacity: 0;
            width: 1px;
            height: 1px;
        }

        .quiz-option__badge {
            width: 34px;
            height: 34px;
            border-radius: 9px;
            background: var(--violet-tint);
            color: var(--violet);
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 0.92rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background 0.15s ease, color 0.15s ease;
        }

        .quiz-option__text {
            font-size: 0.98rem;
            color: var(--ink);
            flex: 1;
        }

        .quiz-option__indicator {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1.5px solid #D6D3EA;
            flex-shrink: 0;
            position: relative;
            transition: border-color 0.15s ease;
        }

        .quiz-option__indicator::after {
            content: '';
            position: absolute;
            inset: 4px;
            border-radius: 50%;
            background: var(--violet);
            transform: scale(0);
            transition: transform 0.15s ease;
        }

        .quiz-option__input:checked~.quiz-option__indicator {
            border-color: var(--violet);
        }

        .quiz-option__input:checked~.quiz-option__indicator::after {
            transform: scale(1);
        }

        .quiz-option__input:checked~.quiz-option__badge {
            background: var(--violet);
            color: #fff;
        }

        .quiz-option__input:checked~.quiz-option__text {
            font-weight: 600;
        }

        .quiz-option:has(.quiz-option__input:checked) {
            border-color: var(--violet);
            background: var(--violet-tint);
        }

        .quiz-option__input:focus-visible~.quiz-option__indicator {
            outline: 2px solid var(--violet);
            outline-offset: 2px;
        }

        .quiz-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }

        .quiz-footer__hint {
            font-size: 0.84rem;
            color: var(--ink-soft);
        }

        .quiz-footer__actions {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-left: auto;
        }

        .quiz-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--violet);
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 12px 22px;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 0.95rem;
            cursor: pointer;
            transition: background 0.15s ease, transform 0.1s ease;
            margin-left: auto;
        }

        .quiz-btn:hover {
            background: var(--violet-dark);
        }

        .quiz-btn:active {
            transform: scale(0.98);
        }

        /* Sidebar */
        .quiz-sidebar {
            min-width: 240px;
        }

        .quiz-sidebar__card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 22px;
            box-shadow: 0 20px 40px -30px rgba(36, 31, 114, 0.25);
        }

        .quiz-sidebar__header {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 16px;
        }

        /* Progress ring: deliberately reuses the same fill logic as the header's segmented
                               meter — a completion percentage rendered as a stroke, not a fresh metaphor. */
        .quiz-ring {
            position: relative;
            width: 48px;
            height: 48px;
            flex-shrink: 0;
        }

        .quiz-ring svg {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }

        .quiz-ring__track {
            fill: none;
            stroke: var(--violet-tint);
            stroke-width: 4;
        }

        .quiz-ring__fill {
            fill: none;
            stroke: var(--violet);
            stroke-width: 4;
            stroke-linecap: round;
            transition: stroke-dashoffset 0.3s ease;
        }

        .quiz-ring__label {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.66rem;
            font-weight: 700;
            color: var(--violet-dark);
        }

        .quiz-sidebar__eyebrow {
            margin: 0;
            font-size: 0.8rem;
            color: var(--ink-soft);
        }

        .quiz-sidebar__total {
            margin: 2px 0 0;
            font-size: 1rem;
            font-weight: 700;
        }

        .quiz-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border);
        }

        .quiz-legend__item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.76rem;
            color: var(--ink-soft);
        }

        .quiz-legend__dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #E1DEF5;
            flex-shrink: 0;
        }

        .quiz-legend__dot.is-current {
            background: var(--violet);
        }

        .quiz-legend__dot.is-complete {
            background: var(--success);
        }

        .quiz-question-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 20px;
        }

        .quiz-question-pill {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 42px;
            border-radius: 12px;
            background: #F7F5FF;
            color: var(--ink-soft);
            font-weight: 700;
            text-decoration: none;
            border: 1.5px solid transparent;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .quiz-question-pill:hover {
            background: #E6E3F5;
        }

        /* Answered state is a checkmark badge, independent of the current-question ring below,
                               so a pill can show both at once without one state erasing the other. */
        .quiz-question-pill.is-complete {
            background: var(--success-tint);
            color: #1A7A3A;
            border-color: var(--success-border);
        }

        .quiz-question-pill.is-complete::after {
            content: '✓';
            position: absolute;
            top: -6px;
            right: -6px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--success);
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #fff;
        }

        .quiz-question-pill.is-active {
            border-color: var(--violet);
            box-shadow: 0 0 0 2px rgba(91, 79, 229, 0.16);
            font-weight: 800;
        }

        .quiz-question-pill.is-active:not(.is-complete) {
            background: var(--violet-tint);
            color: var(--violet-dark);
        }

        .quiz-sidebar__actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .quiz-sidebar-btn {
            border: none;
            border-radius: 12px;
            padding: 12px 16px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex: 1;
        }

        .quiz-sidebar-btn--primary {
            background: var(--violet);
            color: #fff;
        }

        .quiz-sidebar-btn--secondary {
            background: #F4F3FB;
            color: var(--ink);
        }

        .quiz-sidebar-btn--primary:hover {
            background: var(--violet-dark);
        }

        .quiz-sidebar-btn--secondary:hover {
            background: #E6E3F5;
        }

        .quiz-sidebar__note {
            margin: 12px 0 0;
            font-size: 0.78rem;
            color: var(--ink-soft);
            text-align: center;
        }

        @media (min-width: 981px) {
            .quiz-sidebar {
                position: sticky;
                top: 24px;
            }
        }

        @media (max-width: 980px) {
            .quiz-grid {
                grid-template-columns: 1fr;
            }

            .quiz-sidebar {
                width: 100%;
            }
        }

        @media (max-width: 560px) {
            .quiz-options {
                grid-template-columns: 1fr;
            }

            .quiz-topbar {
                border-radius: 16px 16px 0 0;
            }

            .quiz-question {
                font-size: 1.25rem;
            }

            .quiz-btn {
                margin-left: 0;
                width: 100%;
                justify-content: center;
            }

            .quiz-footer {
                justify-content: center;
            }

            .quiz-footer__actions {
                width: 100%;
                flex-direction: column;
                margin-left: 0;
            }

            .quiz-footer__actions .quiz-btn,
            .quiz-footer__actions .quiz-sidebar-btn {
                width: 100%;
                margin-left: 0;
            }

            .quiz-question-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }

            .quiz-sidebar__actions {
                flex-direction: column;
            }
        }

        /* Hindi/English Option */
        .quiz-language-toggle {
            display: flex;
            align-items: center;
            gap: 4px;
            background: rgba(255, 255, 255, 0.14);
            border: 1px solid rgba(255, 255, 255, 0.25);
            border-radius: 999px;
            padding: 4px;
            margin-left: auto;
        }

        .quiz-language-btn {
            border: none;
            background: transparent;
            color: rgba(255, 255, 255, 0.8);
            padding: 7px 14px;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;
        }

        .quiz-language-btn.is-active {
            background: #fff;
            color: var(--violet-dark);
        }

        .quiz-language-btn:hover {
            color: #fff;
        }

        .quiz-language-btn.is-active:hover {
            color: var(--violet-dark);
        }

        .quiz-text-hi {
            display: none;
        }

        .quiz-page.is-hindi .quiz-text-en {
            display: none;
        }

        .quiz-page.is-hindi .quiz-text-hi {
            display: block;
        }

        .quiz-page.is-hindi .quiz-question .quiz-text-hi {
            font-size: 1.25rem;
            line-height: 1.5;
        }

        @media (max-width: 560px) {
            .quiz-language-toggle {
                margin-left: 0;
            }

            .quiz-language-btn {
                padding: 6px 12px;
            }
        }
    </style>

    <script>
        (function() {
            const timerEl = document.getElementById('timer');
            const timerWrap = document.getElementById('timerWrap');
            const quizForm = document.getElementById('quiz-answer-form');
            const redirectUrl = @json(route('quiz.start', $contest->id));
            const saveUrl = @json(route('quiz.answer', $contest->id));
            const nextQuestionUrl = @json($nextQuestionUrl);
            const csrfToken = @json(csrf_token());
            const questionId = @json($question->id);
            const optionInputs = Array.from(document.querySelectorAll('input[name="selected_answer"]'));
            const languageButtons = Array.from(document.querySelectorAll('.quiz-language-btn'));
            const quizPage = document.querySelector('.quiz-page');

            function setLanguage(language) {
                quizPage.classList.toggle('is-hindi', language === 'hi');

                languageButtons.forEach((button) => {
                    const isActive = button.dataset.language === language;
                    button.classList.toggle('is-active', isActive);
                });

                localStorage.setItem('quiz_language', language);
            }

            const savedLanguage = localStorage.getItem('quiz_language') || 'en';

            setLanguage(savedLanguage);

            languageButtons.forEach((button) => {
                button.addEventListener('click', () => {
                    setLanguage(button.dataset.language);
                });
            });
            const confirmMessage = 'Are you sure you want to submit the quiz?';
            let currentAnswer = @json($selectedAnswer);
            let lastDeselectedAnswer = '';
            let lastDeselectedAt = 0;
            let seconds = {{ (int) $timeLeftSeconds }};

            function formatTime(value) {
                const minutes = Math.floor(value / 60);
                const remainingSeconds = value % 60;
                return String(minutes).padStart(2, '0') + ':' + String(remainingSeconds).padStart(2, '0');
            }

            function tick() {
                if (seconds <= 0) {
                    window.location.href = redirectUrl;
                    return;
                }

                timerEl.textContent = formatTime(seconds);
                timerWrap.classList.toggle('is-critical', seconds <= 60);
                seconds--;
            }

            function sendAnswer(payload) {
                fetch(saveUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrfToken,
                    },
                    body: JSON.stringify({
                        question_id: questionId,
                        ...payload,
                    }),
                }).catch(() => {});
            }

            function uncheckAnswer() {
                optionInputs.forEach((input) => {
                    input.checked = false;
                });
            }

            function handleOptionChange(event) {
                const input = event.target.closest('input[name="selected_answer"]');

                if (!input) {
                    return;
                }

                currentAnswer = input.value;
                sendAnswer({
                    selected_answer: input.value
                });
            }

            function handleOptionClick(event) {
                const option = event.target.closest('.quiz-option');

                if (!option) {
                    return;
                }

                const input = option.querySelector('input[name="selected_answer"]');

                if (
                    lastDeselectedAnswer === input.value &&
                    (Date.now() - lastDeselectedAt) < 300
                ) {
                    event.preventDefault();
                    return;
                }

                if (!input || currentAnswer !== input.value) {
                    return;
                }

                event.preventDefault();
                currentAnswer = '';
                lastDeselectedAnswer = input.value;
                lastDeselectedAt = Date.now();
                uncheckAnswer();
                sendAnswer({
                    remove_answer: 1
                });
            }

            function handleNextClick(event) {
                if (!nextQuestionUrl) {
                    return;
                }

                event.preventDefault();
                window.location.href = nextQuestionUrl;
            }

            function handleSubmitClick(event) {
                const trigger = event.target.closest('.js-submit-quiz');

                if (!trigger) {
                    return;
                }

                if (!window.confirm(confirmMessage)) {
                    event.preventDefault();
                    return;
                }
            }

            if (quizForm) {
                quizForm.addEventListener('change', handleOptionChange);
                quizForm.addEventListener('click', handleOptionClick);
                quizForm.addEventListener('click', handleSubmitClick);
            }

            const nextButton = document.querySelector('.js-next-question');

            if (nextButton) {
                nextButton.addEventListener('click', handleNextClick);
            }

            tick();
            setInterval(tick, 1000);
        })();
    </script>
@endsection