@extends('layouts.siswa')

@section('title', 'Pembahasan Soal - CBT Online')

@section('content')
<div class="disc-root">

    {{-- ═══ HEADER ═══ --}}
    <div class="disc-header sticky-top shadow-sm">
        <div class="container">
            <div class="row align-items-center g-0">
                <div class="col-auto">
                    @if(session('logo_url'))
                        <img src="{{ session('logo_url') }}" alt="Logo"
                             style="width:60px;height:60px;object-fit:contain;border-radius:50%;display:block;">
                    @elseif(session('settings') && session('settings')->logo_path)
                        <img src="{{ asset('storage/' . session('settings')->logo_path) }}" alt="Logo"
                             style="width:60px;height:60px;object-fit:contain;border-radius:50%;display:block;">
                    @else
                        <span style="font-size: 32px;">🎓</span>
                    @endif
                </div>
                <div class="col">
                    <div class="ms-3">
                        <div class="header-label">Pembahasan Soal</div>
                        <div class="header-exam-name">{{ $exam->name }}</div>
                    </div>
                </div>
                <div class="col-auto d-flex align-items-center gap-2">
                    <div class="score-pill">
                        {{$attempt->examPackage->name}}
                        <!-- <i class="bi bi-trophy-fill"></i>
                        <span class="mono">{{ number_format($attempt->score, 1) }}</span> -->
                    </div>
                    <a href="{{ route('siswa.history.index') }}" class="back-pill">
                        <i class="bi bi-arrow-left"></i>
                        <span class="d-none d-sm-inline">Riwayat</span>
                    </a>
                </div>
            </div>
        </div>
        {{-- Correct/wrong strip --}}
        <div class="result-strip">
            <div class="strip-correct" id="stripCorrect"></div>
            <div class="strip-wrong"   id="stripWrong"></div>
        </div>
    </div>

    {{-- ═══ MAIN ═══ --}}
    <main class="disc-main container mt-4">
        <div class="row g-4">

            {{-- ── LEFT: Question Panel ── --}}
            <div class="col-12 col-lg-8">
                <section class="question-panel">

                    {{-- Meta row --}}
                    <div class="q-meta">
                        <div class="q-badge">
                            <span class="q-num mono" id="questionNumber">01</span>
                            <span class="q-sep">/</span>
                            <span class="q-total mono">{{ str_pad($questions->count(), 2, '0', STR_PAD_LEFT) }}</span>
                        </div>
                        <span class="q-type-chip" id="questionType">Pilihan Ganda</span>
                        <span class="answer-status" id="answerStatus"></span>
                    </div>

                    {{-- Question body --}}
                    <div class="q-body">
                        <div class="q-text" id="questionText"></div>
                        <div class="q-image d-none" id="questionImage">
                            <img src="" alt="Gambar soal">
                        </div>
                        <div class="q-audio d-none" id="questionAudio">
                            <div class="audio-card">
                                <div class="audio-top">
                                    <button class="audio-btn play-btn" onclick="toggleAudio()" id="playButton">
                                        <i id="playIcon" class="bi bi-play-fill"></i>
                                    </button>
                                    <div class="audio-track">
                                        <div class="audio-bar-wrap" onclick="seekAudio(event)">
                                            <div class="audio-bar-bg">
                                                <div class="audio-bar-fill" id="audioProgress"></div>
                                            </div>
                                        </div>
                                        <div class="audio-times">
                                            <span class="mono" id="currentTime">0:00</span>
                                            <span class="mono" id="duration">0:00</span>
                                        </div>
                                    </div>
                                    <button class="audio-btn stop-btn" onclick="stopAudio()" id="stopButton" disabled>
                                        <i class="bi bi-stop-fill"></i>
                                    </button>
                                </div>
                                <div class="audio-footer">
                                    <i class="bi bi-headphones"></i>
                                    Mode Pembahasan
                                </div>
                            </div>
                            <audio id="audioElement" src=""></audio>
                        </div>
                    </div>

                    {{-- Options --}}
                    <div class="options-wrap" id="answerOptions"></div>

                    {{-- Explanation box --}}
                    <div class="explain-box" id="explainBox">
                        <div class="explain-header">
                            <div class="explain-icon">
                                <i class="bi bi-lightbulb-fill"></i>
                            </div>
                            <span>Pembahasan</span>
                        </div>
                        <div class="explain-body" id="discussionContent"></div>
                    </div>

                    {{-- Nav --}}
                    <div class="q-nav">
                        <button class="nav-btn prev-btn" onclick="prevQuestion()" id="prevBtn" disabled>
                            <i class="bi bi-arrow-left"></i> Sebelumnya
                        </button>
                        <button class="nav-btn next-btn" onclick="nextQuestion()" id="nextBtn">
                            Selanjutnya <i class="bi bi-arrow-right"></i>
                        </button>
                    </div>

                </section>
            </div>

            {{-- ── RIGHT: Summary + Navigator ── --}}
            <div class="col-12 col-lg-4">
                <aside>
                    <div class="side-panel">

                        {{-- Score summary --}}
                        <div class="side-score">
                            <div class="score-big">
                            <span class="{{ $attempt->score > $exam->passing_grade ? 'score-passed' : 'score-default' }} mono">
                                {{ number_format($attempt->score, 0) }}
                            </span>
                                <span class="score-max">/100</span>
                            </div>
                            <div class="score-label">Nilai Akhir</div>
                        </div>

                        {{-- Stats row --}}
                        <div class="stats-row">
                            <div class="stat-item correct-item">
                                <span class="stat-num mono">{{ $attempt->correct_answers }}</span>
                                <span class="stat-lbl">Benar</span>
                            </div>
                            <div class="stat-divider"></div>
                            <div class="stat-item wrong-item">
                                <span class="stat-num mono">{{ $attempt->wrong_answers }}</span>
                                <span class="stat-lbl">Salah</span>
                            </div>
                            <div class="stat-divider"></div>
                            <div class="stat-item total-item">
                                <span class="stat-num mono">{{ $questions->count() }}</span>
                                <span class="stat-lbl">Total</span>
                            </div>
                        </div>

                        {{-- Nav header --}}
                        <div class="nav-label">
                            <i class="bi bi-grid-3x3"></i> Navigasi Soal
                        </div>

                        {{-- Grid scroll --}}
                        <div class="nav-grid-scroll">
                            <div class="q-grid" id="questionGrid"></div>
                        </div>

                        {{-- Legend --}}
                        <div class="nav-legend">
                            <div class="legend-row">
                                <span class="dot dot-current"></span><span>Aktif</span>
                                <span class="dot dot-correct"></span><span>Benar</span>
                                <span class="dot dot-wrong"></span><span>Salah</span>
                                <span class="dot dot-empty"></span><span>Kosong</span>
                            </div>
                        </div>

                        {{-- Back button --}}
                        <a href="{{ route('siswa.history.index') }}" class="btn-back">
                            <i class="bi bi-arrow-left-circle"></i> Kembali ke Riwayat
                        </a>

                    </div>
                </aside>
            </div>

        </div>
    </main>
</div>

<style>
/* ═══ HIDE SIDEBAR ═══ */
.sidebar, .top-navbar { display: none !important; }
.main-content   { margin-left: 0 !important; padding-top: 0 !important; }
.content-wrapper { padding: 0 !important; }

/* ═══ TOKENS ═══ */
:root {
    --bg:          #f4f6fb;
    --surface:     #ffffff;
    --surface2:    #f0f3f9;
    --border:      #e3e8f0;
    --border2:     #ced5e8;
    --text:        #1a1f36;
    --muted:       #7b849e;

    --cbt-accent:     var(--primary-custom);
    --cbt-accent-h:   var(--accent);
    --cbt-accent-bg:  color-mix(in srgb, var(--primary-custom) 10%, white);
    --cbt-accent-bdr: color-mix(in srgb, var(--primary-custom) 35%, white);

    --green:      #059669;
    --green-bg:   #ecfdf5;
    --green-bdr:  #6ee7b7;
    --green-soft: #d1fae5;
    --red:        #dc2626;
    --red-bg:     #fef2f2;
    --red-bdr:    #fca5a5;
    --red-soft:   #fee2e2;
    --amber:      #d97706;
    --amber-bg:   #fffbeb;
    --amber-bdr:  #fcd34d;

    --radius:     14px;
    --radius-sm:  9px;
    --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text);
}
.mono { font-family: 'JetBrains Mono', monospace; }

/* ═══ ROOT ═══ */
.disc-root { min-height: 100vh; background: var(--bg); }

/* ═══ HEADER ═══ */
.disc-header {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 10px 0 0;
    z-index: 100;
}
.header-label     { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.header-exam-name { font-size: 14px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }

.score-pill {
    display: flex; align-items: center; gap: 7px;
    background: var(--green-bg);
    border: 1.5px solid var(--green-bdr);
    border-radius: 100px;
    padding: 6px 16px;
    font-size: 16px; font-weight: 800;
    color: var(--green);
}
.score-pill i { font-size: 14px; }

.back-pill {
    display: flex; align-items: center; gap: 6px;
    background: var(--surface2);
    border: 1.5px solid var(--border2);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 13px; font-weight: 700;
    color: var(--muted);
    text-decoration: none;
    transition: all .2s;
}
.back-pill:hover { border-color: var(--cbt-accent-bdr); color: var(--cbt-accent); background: var(--cbt-accent-bg); }

/* Result strip */
.result-strip {
    display: flex;
    height: 4px;
    margin-top: 10px;
    overflow: hidden;
}
.strip-correct { background: var(--green); transition: width .6s ease; }
.strip-wrong   { background: var(--red);   transition: width .6s ease; }

/* ═══ MAIN ═══ */
.disc-main { padding-bottom: 40px; }

/* ═══ QUESTION PANEL ═══ */
.question-panel { display: flex; flex-direction: column; gap: 14px; }

.q-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.q-badge {
    display: flex; align-items: baseline; gap: 2px;
    background: var(--cbt-accent-bg);
    border: 1.5px solid var(--cbt-accent-bdr);
    border-radius: 100px;
    padding: 5px 16px;
}
.q-num   { font-size: 22px; font-weight: 800; color: var(--cbt-accent); }
.q-sep   { font-size: 14px; color: var(--muted); margin: 0 2px; }
.q-total { font-size: 13px; color: var(--muted); font-weight: 600; }

.q-type-chip {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 5px 13px;
    font-size: 11px; font-weight: 700;
    color: var(--muted);
    text-transform: uppercase; letter-spacing: .07em;
}

.answer-status {
    margin-left: auto;
    display: flex; align-items: center; gap: 6px;
    border-radius: 100px;
    padding: 5px 14px;
    font-size: 13px; font-weight: 700;
    border: 1.5px solid;
}
.answer-status.correct { background: var(--green-bg);  border-color: var(--green-bdr);  color: var(--green); }
.answer-status.wrong   { background: var(--red-bg);    border-color: var(--red-bdr);    color: var(--red);   }
.answer-status.empty   { background: var(--surface2);  border-color: var(--border2);    color: var(--muted); }

/* Question body */
.q-body {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 16px;
}
.q-text {
    font-size: 16px; line-height: 1.8;
    color: var(--text); font-weight: 500;
}
.q-image img {
    max-width: 100%; max-height: 280px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    object-fit: contain;
}

/* Audio Player */
.audio-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.audio-top { display: flex; align-items: center; gap: 12px; }
.audio-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
    transition: all .2s;
}
.play-btn { background: var(--cbt-accent); color: #fff; }
.play-btn:hover { background: var(--cbt-accent-h); transform: scale(1.08); }
.stop-btn { background: var(--surface); color: var(--muted); border: 1.5px solid var(--border2); }
.stop-btn:disabled { opacity: .4; cursor: not-allowed; }
.audio-track { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.audio-bar-wrap { cursor: pointer; padding: 5px 0; }
.audio-bar-bg   { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.audio-bar-fill { height: 100%; background: var(--cbt-accent); width: 0%; border-radius: 3px; transition: width .1s linear; }
.audio-times    { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.audio-footer   { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.audio-footer strong { color: var(--cbt-accent); }

/* ═══ OPTIONS ═══ */
.options-wrap { display: flex; flex-direction: column; gap: 8px; }

.opt-item {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 13px 18px;
    box-shadow: var(--shadow-sm);
    transition: all .15s;
    position: relative;
}
/* jawaban benar */
.opt-item.correct {
    background: var(--green-bg);
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(5,150,105,.08);
}
.opt-item.correct .opt-key  { background: var(--green); border-color: var(--green); color: #fff; }
.opt-item.correct .opt-text { color: var(--green); font-weight: 700; }

/* jawaban user yang salah */
.opt-item.wrong {
    background: var(--red-bg);
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(220,38,38,.08);
}
.opt-item.wrong .opt-key  { background: var(--red); border-color: var(--red); color: #fff; }
.opt-item.wrong .opt-text { color: var(--red); font-weight: 700; }

/* pilihan lain */
.opt-item.dim { opacity: .5; }

/* TF */
.tf-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tf-opt {
    padding: 22px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    cursor: pointer;
    font-size: 16px; font-weight: 700;
    color: var(--muted);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: all .2s;
    display: flex;
}
.tf-opt.correct { border-color: var(--green); color: var(--green); background: var(--green-bg); box-shadow: 0 0 0 3px rgba(5,150,105,.1); }
.tf-opt.wrong { border-color: var(--red); color: var(--red); background: var(--red-bg); box-shadow: 0 0 0 3px rgba(220,38,38,.1); }
.tf-opt.dim { opacity: .5; }

.opt-key {
    width: 38px; height: 38px; min-width: 38px;
    border-radius: 10px;
    background: var(--surface2);
    border: 1.5px solid var(--border2);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
}
.opt-text { font-size: 15px; font-weight: 500; color: var(--text); flex: 1; }
.opt-img  { width: 70px; height: 70px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--border); }
.opt-badge {
    margin-left: auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.opt-badge.correct-badge { background: var(--green-soft); color: var(--green); }
.opt-badge.wrong-badge   { background: var(--red-soft);   color: var(--red);   }

/* ═══ EXPLANATION BOX ═══ */
.explain-box {
    background: var(--amber-bg);
    border: 1.5px solid var(--amber-bdr);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}
.explain-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.explain-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: rgba(217,119,6,.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    color: var(--amber);
    flex-shrink: 0;
}
.explain-header span { font-size: 14px; font-weight: 800; color: var(--amber); text-transform: uppercase; letter-spacing: .06em; }
.explain-body { font-size: 15px; line-height: 1.75; color: var(--text); }
.explain-body em { color: var(--muted); }

/* ═══ NAV BUTTONS ═══ */
.q-nav { display: flex; gap: 10px; margin-top: 4px; }
.nav-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 20px;
    border-radius: var(--radius);
    font-size: 14px; font-weight: 700;
    cursor: pointer; border: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: all .2s;
}
.prev-btn { background: var(--surface); border: 1.5px solid var(--border2) !important; color: var(--text); box-shadow: var(--shadow-sm); }
.prev-btn:hover:not(:disabled) { border-color: var(--cbt-accent-bdr) !important; color: var(--cbt-accent); background: var(--cbt-accent-bg); }
.prev-btn:disabled { opacity: .35; cursor: not-allowed; }
.next-btn { background: var(--cbt-accent); color: #fff; box-shadow: 0 3px 12px color-mix(in srgb, var(--primary-custom) 30%, transparent); }
.next-btn:hover { transform: translateY(-1px); }

/* ═══ SIDE PANEL ═══ */
.side-panel {
    position: sticky;
    top: calc(66px + 16px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
    max-height: calc(100vh - 106px);
    overflow: hidden;
}

/* Score block */
.side-score {
    padding: 22px 20px 16px;
    text-align: center;
    background: linear-gradient(135deg, var(--cbt-accent-bg) 0%, var(--surface) 100%);
    border-bottom: 1px solid var(--border);
}
.score-big {
    display: flex; align-items: baseline; justify-content: center; gap: 4px;
}
.score-default { font-size: 52px; font-weight: 800; color: var(--danger); line-height: 1; }
.score-passed { font-size: 52px; font-weight: 800; color: var(--success); line-height: 1; }
.score-max { font-size: 18px; font-weight: 700; color: var(--muted); }
.score-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 4px; }

/* Stats row */
.stats-row {
    display: flex; align-items: stretch;
    border-bottom: 1px solid var(--border);
}
.stat-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 14px 8px;
    gap: 3px;
}
.stat-divider { width: 1px; background: var(--border); align-self: stretch; }
.stat-num { font-size: 26px; font-weight: 800; line-height: 1; }
.stat-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.correct-item .stat-num { color: var(--green); }
.wrong-item   .stat-num { color: var(--red); }
.total-item   .stat-num { color: var(--cbt-accent); }

/* Nav label */
.nav-label {
    padding: 14px 18px 8px;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 6px;
}

/* Grid scroll */
.nav-grid-scroll {
    flex: 1; overflow-y: auto; padding: 12px 18px;
    min-height: 0;
}
.nav-grid-scroll::-webkit-scrollbar { width: 4px; }
.nav-grid-scroll::-webkit-scrollbar-track { background: transparent; }
.nav-grid-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
.nav-grid-scroll::-webkit-scrollbar-thumb:hover { background: var(--cbt-accent); }

.q-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.qg-btn {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--surface2);
    font-size: 12px; font-weight: 700;
    color: var(--muted);
    cursor: pointer;
    transition: all .15s;
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace;
}
.qg-btn:hover    { border-color: var(--cbt-accent-bdr); color: var(--cbt-accent); transform: scale(1.08); background: var(--cbt-accent-bg); }
.qg-btn.s-current { background: var(--cbt-accent); border-color: var(--cbt-accent); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-custom) 30%, transparent); }
.qg-btn.s-correct { background: var(--green-bg);  border-color: var(--green);         color: var(--green); }
.qg-btn.s-wrong   { background: var(--red-bg);    border-color: var(--red);           color: var(--red);   }
.qg-btn.s-empty   { background: var(--surface2);  border-color: var(--border2);       color: var(--muted); opacity: .6; }

/* Legend */
.nav-legend {
    padding: 10px 18px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.legend-row {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    font-size: 11px; color: var(--muted); font-weight: 600;
}
.dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.dot-current { background: var(--cbt-accent); }
.dot-correct { background: var(--green); }
.dot-wrong   { background: var(--red); }
.dot-empty   { background: var(--surface2); border: 1.5px solid var(--border2); }

/* Back button */
.btn-back {
    margin: 0 18px 18px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px;
    background: var(--surface);
    border: 1.5px solid var(--border2);
    border-radius: var(--radius);
    font-size: 14px; font-weight: 700;
    color: var(--text); text-decoration: none;
    transition: all .2s;
    flex-shrink: 0;
}
.btn-back:hover { background: var(--cbt-accent-bg); border-color: var(--cbt-accent-bdr); color: var(--cbt-accent); }

.d-none { display: none !important; }

@media (max-width: 576px) {
    .q-body { padding: 16px; }
    .score-default { font-size: 40px; }
    .header-exam-name { max-width: 160px; }
}
</style>

<script>
// ═══ STATE ═══
let currentQuestion = 1;
const totalQuestions = {{ $questions->count() }};
const answers  = @json($answers);   // { question_id: 'A', ... }
const questions = {!! json_encode($questions->map(function($q) {
    return [
        'id'          => $q->id,
        'number'      => $q->question_number,
        'type'        => $q->question_type,
        'text'        => $q->question_text,
        'image'       => $q->image_url,  // Use pre-generated URL
        'audio'       => $q->audio_url,  // Use pre-generated URL (null for discussion)
        'answer_key'  => $q->answer_key,
        'explanation' => $q->explanation,
        'options'     => $q->options->map(function($opt) {
            return [
                'label' => $opt->option_key->value,
                'text'  => $opt->content,
                'image' => $opt->image_url,  // Use pre-generated URL
            ];
        })->toArray(),
    ];
})->toArray()) !!};

// ═══ INIT ═══
document.addEventListener('DOMContentLoaded', () => {
    buildGrid();
    loadQuestion(1);
    updateResultStrip();
});

// ═══ RESULT STRIP ═══
function updateResultStrip() {
    let correct = 0;
    questions.forEach(q => {
        if (answers[q.id] === q.answer_key) correct++;
    });
    const pctCorrect = (correct / totalQuestions) * 100;
    const pctWrong   = 100 - pctCorrect;
    document.getElementById('stripCorrect').style.width = pctCorrect + '%';
    document.getElementById('stripWrong').style.width   = pctWrong   + '%';
}

// ═══ GRID ═══
function buildGrid() {
    const g = document.getElementById('questionGrid');
    if (!g) return;
    g.innerHTML = '';
    
    questions.forEach((q, i) => {
        const userAns  = answers[q.id];
        const isCorrect = userAns && userAns === q.answer_key;
        const isWrong   = userAns && userAns !== q.answer_key;

        const b = document.createElement('button');
        b.className = 'qg-btn';
        b.textContent = q.number;
        b.onclick = () => loadQuestion(i + 1);
        if (i + 1 === currentQuestion) b.classList.add('s-current');
        else if (isCorrect)            b.classList.add('s-correct');
        else if (isWrong)              b.classList.add('s-wrong');
        else                           b.classList.add('s-empty');
        g.appendChild(b);
    });
}

function updateGrid() {
    document.querySelectorAll('.qg-btn').forEach((btn, i) => {
        const n  = i + 1;
        const q  = questions[i];
        const ua = answers[q.id];
        btn.className = 'qg-btn';
        if (n === currentQuestion)              btn.classList.add('s-current');
        else if (ua && ua === q.answer_key)     btn.classList.add('s-correct');
        else if (ua && ua !== q.answer_key)     btn.classList.add('s-wrong');
        else                                    btn.classList.add('s-empty');
    });
}

// ═══ LOAD QUESTION ═══
function loadQuestion(num) {
    currentQuestion = num;
    const q       = questions[num - 1];
    const userAns = answers[q.id];
    const isCorrect  = userAns && userAns === q.answer_key;
    const isWrong    = userAns && userAns !== q.answer_key;
    const isEmpty    = !userAns;

    // Number + type
    document.getElementById('questionNumber').textContent = String(q.number).padStart(2, '0');
    document.getElementById('questionType').textContent   = typeLabel(q.question_type);

    // Status badge
    const badge = document.getElementById('answerStatus');
    badge.className = 'answer-status';
    if (isEmpty) {
        badge.classList.add('empty');
        badge.innerHTML = '<i class="bi bi-dash-circle"></i> Tidak Dijawab';
    } else if (isCorrect) {
        badge.classList.add('correct');
        badge.innerHTML = '<i class="bi bi-check-circle-fill"></i> Benar';
    } else {
        badge.classList.add('wrong');
        badge.innerHTML = '<i class="bi bi-x-circle-fill"></i> Salah';
    }

    // Text
    document.getElementById('questionText').innerHTML = q.text;

    // Image
    const imgDiv = document.getElementById('questionImage');
    if (q.image) { imgDiv.classList.remove('d-none'); imgDiv.querySelector('img').src = q.image; }
    else         { imgDiv.classList.add('d-none'); }

    // Audio
    stopAudio(); // Stop any playing audio before loading new question
    const audDiv = document.getElementById('questionAudio');
    if (q.audio) {
        audDiv.classList.remove('d-none');
        document.getElementById('audioElement').src = q.audio;
        document.getElementById('audioProgress').style.width = '0%';
        document.getElementById('currentTime').textContent = '0:00';
        document.getElementById('duration').textContent = '0:00';
        setPlayIcon(false);
        document.getElementById('stopButton').disabled = true;
    } else {
        audDiv.classList.add('d-none');
    }

    // Options
    renderOptions(q, userAns);

    // Explanation
    document.getElementById('discussionContent').innerHTML =
        q.explanation || '<em>Tidak ada pembahasan untuk soal ini.</em>';

    // Nav
    document.getElementById('prevBtn').disabled = num === 1;
    document.getElementById('nextBtn').innerHTML = num === totalQuestions
        ? 'Selesai <i class="bi bi-check-circle"></i>'
        : 'Selanjutnya <i class="bi bi-arrow-right"></i>';

    updateGrid();
}

function renderOptions(q, userAns) {
    const wrap = document.getElementById('answerOptions');

    if (q.type == 'true_false') {
        wrap.className = 'tf-wrap';
        wrap.innerHTML = q.options.map(opt => {
            const isCorrect      = opt.label === q.answer_key;
            const isWrongUserAns = opt.label === userAns && !isCorrect;
            const isDim          = !isCorrect && !isWrongUserAns;

            const cls = isCorrect ? 'correct' : isWrongUserAns ? 'wrong' : 'dim';

            const badge = isCorrect
                ? '<span class="opt-badge correct-badge"><i class="bi bi-check-lg"></i></span>'
                : isWrongUserAns
                    ? '<span class="opt-badge wrong-badge"><i class="bi bi-x-lg"></i></span>'
                    : '';

            return `
                <div class="tf-opt ${cls}">
                    ${opt.text}${badge}
                </div>`;
            // return `
            //     <div class="tf-opt ${cls}">
            //         <span class="opt-text">${opt.text}</span>
            //         ${badge}
            //     </div>`;
        }).join('');
    } else {
        wrap.className = 'options-wrap';
        wrap.innerHTML = q.options.map(opt => {
            const isCorrect      = opt.label === q.answer_key;
            const isWrongUserAns = opt.label === userAns && !isCorrect;
            const isDim          = !isCorrect && !isWrongUserAns;

            const cls = isCorrect ? 'correct' : isWrongUserAns ? 'wrong' : 'dim';

            const badge = isCorrect
                ? '<span class="opt-badge correct-badge"><i class="bi bi-check-lg"></i></span>'
                : isWrongUserAns
                    ? '<span class="opt-badge wrong-badge"><i class="bi bi-x-lg"></i></span>'
                    : '';

            return `
                <div class="opt-item ${cls}">
                    <div class="opt-key">${opt.label}</div>
                    ${opt.image ? `<img src="${opt.image}" class="opt-img" alt="${opt.text}">` : ''}
                    <div class="opt-text">${opt.text}</div>
                    ${badge}
                </div>`;
        }).join('');
    }
}

function typeLabel(type) {
    return {
        'multiple_choice':              'Pilihan Ganda',
        'true_false':                   'Benar/Salah',
        'listening':                    'Listening',
        'multiple_choice_image':        'PG dengan Gambar',
        'multiple_choice_image_option': 'PG dengan Gambar Jawaban',
    }[type] || 'Pilihan Ganda';
}

// ═══ NAVIGATION ═══
function nextQuestion() {
    if (currentQuestion < totalQuestions) loadQuestion(currentQuestion + 1);
}
function prevQuestion() {
    if (currentQuestion > 1) loadQuestion(currentQuestion - 1);
}

// ═══ AUDIO ═══
let audioProgressInt = null;

function setPlayIcon(playing) {
    document.getElementById('playIcon').className = playing ? 'bi bi-pause-fill' : 'bi bi-play-fill';
}

function toggleAudio() {
    const audio = document.getElementById('audioElement');
    if (audio.paused) {
        if (audio.currentTime === 0) {
            audio.load();
            audio.addEventListener('loadedmetadata', () => {
                const m = Math.floor(audio.duration / 60), s = Math.floor(audio.duration % 60);
                document.getElementById('duration').textContent = `${m}:${s < 10 ? '0' : ''}${s}`;
            }, { once: true });
        }
        audio.play();
        setPlayIcon(true);
        document.getElementById('stopButton').disabled = false;
        audioProgressInt = setInterval(updateAudioProgress, 100);
        audio.addEventListener('ended', () => {
            setPlayIcon(false);
            document.getElementById('stopButton').disabled = true;
            clearInterval(audioProgressInt);
        }, { once: true });
    } else {
        audio.pause();
        setPlayIcon(false);
        clearInterval(audioProgressInt);
    }
}

function stopAudio() {
    const audio = document.getElementById('audioElement');
    if (!audio) return;
    audio.pause();
    audio.currentTime = 0;
    setPlayIcon(false);
    document.getElementById('stopButton').disabled = true;
    document.getElementById('audioProgress').style.width = '0%';
    document.getElementById('currentTime').textContent = '0:00';
    clearInterval(audioProgressInt);
}

function updateAudioProgress() {
    const audio = document.getElementById('audioElement');
    if (!audio.duration) return;
    document.getElementById('audioProgress').style.width = (audio.currentTime / audio.duration * 100) + '%';
    const m = Math.floor(audio.currentTime / 60), s = Math.floor(audio.currentTime % 60);
    document.getElementById('currentTime').textContent = `${m}:${s < 10 ? '0' : ''}${s}`;
}

function seekAudio(e) {
    const audio = document.getElementById('audioElement');
    if (!audio.duration) return;
    const rect = e.currentTarget.getBoundingClientRect();
    audio.currentTime = ((e.clientX - rect.left) / rect.width) * audio.duration;
}
</script>
@endsection