@extends('layouts.siswa')

@section('title', 'Ujian Berlangsung - CBT Online')

@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
@endpush

@section('content')

@php
// Debug: check session data
$debugLogoUrl = session('logo_url');
$debugSettings = session('settings');
$debugLbbId = session('current_lbb_id');
@endphp

<div class="cbt-root">

    {{-- ═══ TOP BAR (original structure) ═══ --}}
    <div class="timer-bar sticky-top shadow-sm py-2">
        <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: 40px; height: 40px; 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: 40px; height: 40px; object-fit: contain; border-radius: 50%; display: block;">
                    @else
                        <span style="font-size: 24px;">🎓</span>
                    @endif
                </div>
                <div class="col">
                    <div class="timer-display ms-2" id="timerPill">
                        <i class="bi bi-clock"></i>
                        <span id="timer" class="mono">01:00:00</span>
                    </div>
                </div>
                <div class="col-auto">
                    <button class="btn btn-success btn-submit-top" onclick="submitExam()">
                        <i class="bi bi-check-circle d-none d-sm-inline"></i>
                        <span>Selesai</span>
                    </button>
                </div>
            </div>
        </div>
        {{-- Progress strip --}}
        <div class="progress-strip mt-2">
            <div class="progress-fill" id="progressFill"></div>
        </div>
    </div>

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

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

                    {{-- Question meta --}}
                    <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>
                        <button class="doubt-btn" onclick="toggleDoubt()" id="doubtButton" title="Tandai ragu-ragu">
                            <i class="bi bi-flag"></i>
                            <span>Ragu-ragu</span>
                        </button>
                    </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>

                        {{-- Audio --}}
                        <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>
                                    Sisa play: <strong id="audioCount" class="mono">3</strong>× lagi
                                </div>
                            </div>
                            <audio id="audioElement" src=""></audio>
                        </div>
                    </div>

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

                    {{-- Nav buttons --}}
                    <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: Navigator ── --}}
            <div class="col-12 col-lg-4">
                <aside>
                    <div class="nav-panel-inner">
                        <div class="nav-header">
                            <span class="nav-title">
                                <i class="bi bi-grid-3x3 me-1"></i> Navigasi Soal
                            </span>
                            <div class="nav-stats">
                                <span class="stat-chip answered-chip"><span id="statAnswered">0</span> Dijawab</span>
                                <span class="stat-chip doubt-chip"><span id="statDoubt">0</span> Ragu</span>
                            </div>
                        </div>

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

                        {{-- Footer pinned --}}
                        <div class="nav-footer">
                        <div class="nav-legend">
                            <div class="legend-row">
                                <span class="dot dot-answered"></span><span>Dijawab</span>
                                <span class="dot dot-doubt"></span><span>Ragu-ragu</span>
                            </div>
                            <div class="legend-row">
                                <span class="dot dot-current"></span><span>Aktif</span>
                                <span class="dot dot-empty"></span><span>Belum</span>
                            </div>
                        </div>

                        <button class="btn-submit-aside" onclick="submitExam()">
                            <i class="bi bi-check-circle me-1"></i> Selesai & Kumpulkan
                        </button>
                        </div>{{-- /nav-footer --}}
                    </div>
                </aside>
            </div>

        </div>
    </main>

    <!-- {{-- Mobile bottom bar --}}
    <div class="mobile-bar d-lg-none">
        <button class="mob-btn" onclick="prevQuestion()" id="mobPrev" disabled>
            <i class="bi bi-arrow-left"></i>
        </button>
        <button class="mob-grid-btn" onclick="toggleMobileNav()">
            <i class="bi bi-grid-3x3"></i>
            <span id="mobProgress" class="mono">0/{{ $questions->count() }}</span>
        </button>
        <button class="mob-btn" onclick="nextQuestion()" id="mobNext">
            <i class="bi bi-arrow-right"></i>
        </button>
    </div>

    {{-- Mobile drawer --}}
    <div class="mob-drawer-overlay d-none" id="mobOverlay" onclick="toggleMobileNav()"></div>
    <div class="mob-drawer d-none" id="mobDrawer">
        <div class="mob-drawer-header">
            <span>Navigasi Soal</span>
            <button onclick="toggleMobileNav()"><i class="bi bi-x-lg"></i></button>
        </div>
        <div class="q-grid mob-grid" id="questionGridMob"></div>
        <button class="btn-submit-aside mt-3" onclick="submitExam()">
            <i class="bi bi-check-circle me-1"></i> Selesai & Kumpulkan
        </button>
    </div> -->
</div>

{{-- ═══ SUBMIT MODAL (Bootstrap) ═══ --}}
<div class="modal fade" id="submitModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 p-0" style="border-radius: 20px; overflow: hidden;">
        <div class="cbt-modal">
            <div class="modal-icon">
                <i class="bi bi-exclamation-triangle-fill"></i>
            </div>
            <h3>Yakin ingin mengakhiri ujian?</h3>
            <p>Pastikan semua jawaban sudah terisi dengan benar sebelum mengumpulkan.</p>

            <div class="modal-stats">
                <div class="modal-stat">
                    <span class="ms-num answered-color" id="summaryAnswered">0</span>
                    <span class="ms-label">Dijawab</span>
                </div>
                <div class="modal-stat-div"></div>
                <div class="modal-stat">
                    <span class="ms-num doubt-color" id="summaryDoubt">0</span>
                    <span class="ms-label">Ragu</span>
                </div>
                <div class="modal-stat-div"></div>
                <div class="modal-stat">
                    <span class="ms-num empty-color" id="summaryUnanswered">0</span>
                    <span class="ms-label">Belum</span>
                </div>
            </div>

            <div class="modal-actions">
                <button class="modal-btn-cancel" data-bs-dismiss="modal">
                    <i class="bi bi-arrow-left me-1"></i> Kembali ke Ujian
                </button>
                <button class="modal-btn-confirm" onclick="confirmSubmit()">
                    <i class="bi bi-check-circle me-1"></i> Ya, Kumpulkan
                </button>
            </div>
        </div>
        </div>
    </div>
</div>

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

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

    /* Pakai global tenant vars dari layout.siswa */
    /* --primary-custom   = theme_primary_color   */
    /* --secondary-custom = theme_secondary_color */
    /* --accent           = theme_accent_color    */
    --cbt-accent:     var(--primary-custom);
    --cbt-accent-h:   var(--cbt-accent);
    --cbt-accent-2:   var(--secondary-custom);
    --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;
    --amber:      #d97706;
    --amber-bg:   #fffbeb;
    --amber-bdr:  #fcd34d;
    --red:        #dc2626;
    --radius:     14px;
    --radius-sm:  9px;
    --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
    --mob-bar-h:  64px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text);
}
.mono { font-family: 'JetBrains Mono', monospace; }

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

/* ═══ HEADER ═══ */
.timer-bar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--border) !important;
    z-index: 100;
}
.timer-display {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
@media (max-width: 400px) {
    .timer-display { font-size: 1.15rem; gap: 5px; }
    .timer-display i { font-size: 14px; }
}
.timer-display i { color: var(--cbt-accent); }
.timer-display.warning       { color: var(--amber); }
.timer-display.warning i     { color: var(--amber); }
.timer-display.danger        { color: var(--red); animation: blink 1s infinite; }
.timer-display.danger i      { color: var(--red); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.45} }

.btn-submit-top {
    border-radius: 100px !important;
    padding: 8px 20px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.progress-strip {
    height: 4px;
    background: var(--border);
    overflow: hidden; /* pastikan fill tidak keluar */
}
.progress-fill  {
    height: 100%;
    min-height: 4px;
    background: var(--primary-custom, #5b6af0);
    transition: width .5s cubic-bezier(.4,0,.2,1);
    border-radius: 0 2px 2px 0;
    width: 0%; /* explicit default */
}

/* ═══ MAIN ═══ */
.cbt-main { padding-bottom: calc(var(--mob-bar-h) + 24px); }

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

/* Meta row */
.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;
}

.doubt-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1.5px solid var(--border2);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all .2s;
}
.doubt-btn:hover  { border-color: var(--amber-bdr); color: var(--amber); background: var(--amber-bg); }
.doubt-btn.active { border-color: var(--amber);     color: var(--amber); background: var(--amber-bg); }

/* 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 */
.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: 10px; }

.opt-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.opt-item:hover {
    border-color: var(--cbt-accent-bdr);
    background: var(--cbt-accent-bg);
    transform: translateX(4px);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--primary-custom) 12%, transparent);
}
.opt-item.selected {
    border-color: var(--cbt-accent);
    background: var(--cbt-accent-bg);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-custom) 10%, transparent);
}
.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;
    transition: all .15s;
}
.opt-item.selected .opt-key { background: var(--cbt-accent); border-color: var(--cbt-accent); color: #fff; }
.opt-item:hover    .opt-key { border-color: var(--cbt-accent); color: var(--cbt-accent); }
.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); }

/* 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;
}
.tf-opt:hover    { border-color: var(--cbt-accent-bdr); color: var(--cbt-accent); background: var(--cbt-accent-bg); transform: translateY(-2px); }
.tf-opt.selected { border-color: var(--green); color: var(--green); background: var(--green-bg); box-shadow: 0 0 0 3px rgba(5,150,105,.1); }

/* ═══ 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 { background: var(--cbt-accent-h); transform: translateY(-1px); box-shadow: 0 5px 18px color-mix(in srgb, var(--primary-custom) 35%, transparent); }

/* ═══ NAV PANEL ═══ */
.nav-panel-inner {
    position: sticky;
    top: calc(70px + 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 - 120px);
    overflow: hidden; /* panel kaku, yang scroll cuma grid */
}

/* Header nav — padding, tidak scroll */
.nav-header {
    padding: 18px 18px 10px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Grid area — ini yang scroll */
.nav-grid-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 18px;
    min-height: 0; /* penting biar flex bisa shrink */
}
.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); }

/* Footer nav — legend + tombol, tidak scroll */
.nav-footer {
    padding: 12px 18px 18px;
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--surface);
}
.nav-title  { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.nav-stats  { display: flex; gap: 6px; flex-wrap: wrap; }
.stat-chip  { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px; }
.answered-chip { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-bdr); }
.doubt-chip    { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-bdr); }

/* Grid */
.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.1); 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-answered { background: var(--green-bg);  border-color: var(--green);     color: var(--green); }
.qg-btn.s-doubt    { background: var(--amber-bg);  border-color: var(--amber-bdr); color: var(--amber); }

/* Legend */
.nav-legend { display: flex; flex-direction: column; gap: 7px; padding-top: 10px; border-top: 1px solid var(--border); }
.legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 500; }
.dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.dot-current  { background: var(--cbt-accent); }
.dot-answered { background: var(--green); }
.dot-doubt    { background: var(--amber); }
.dot-empty    { background: var(--surface2); border: 1.5px solid var(--border2); }

.btn-submit-aside {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 12px;
    background: var(--cbt-accent); color: #fff;
    border: none; border-radius: var(--radius);
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--primary-custom) 25%, transparent);
    transition: all .2s;
}
.btn-submit-aside:hover { background: var(--cbt-accent-h); transform: translateY(-1px); }

/* ═══ MOBILE BAR ═══ */
.mobile-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--mob-bar-h);
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    display: flex; align-items: center;
    padding: 0 16px; gap: 10px;
    z-index: 90;
    box-shadow: 0 -4px 20px rgba(0,0,0,.06);
}
.mob-btn {
    width: 46px; height: 46px;
    border-radius: 12px;
    border: 1.5px solid var(--border2);
    background: var(--surface);
    color: var(--text); font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: all .2s;
}
.mob-btn:disabled { opacity: .3; cursor: not-allowed; }
.mob-btn:not(:disabled):hover { border-color: var(--cbt-accent-bdr); color: var(--cbt-accent); background: var(--cbt-accent-bg); }
.mob-grid-btn {
    flex: 1; height: 46px;
    border-radius: 12px;
    border: 1.5px solid var(--border2);
    background: var(--surface);
    color: var(--text);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 14px; font-weight: 700;
    cursor: pointer; transition: all .2s;
}
.mob-grid-btn:hover { border-color: var(--cbt-accent-bdr); color: var(--cbt-accent); background: var(--cbt-accent-bg); }

/* Drawer */
.mob-drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.25);
    z-index: 200;
    backdrop-filter: blur(4px);
}
.mob-drawer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-radius: 20px 20px 0 0;
    padding: 20px 20px calc(var(--mob-bar-h) + 16px);
    z-index: 201;
    max-height: 72vh;
    overflow-y: auto;
    box-shadow: 0 -8px 32px rgba(0,0,0,.1);
}
.mob-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
    font-size: 15px; font-weight: 700;
}
.mob-drawer-header button {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 8px; width: 32px; height: 32px;
    color: var(--muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.mob-grid { grid-template-columns: repeat(7, 1fr) !important; }

/* ═══ MODAL ═══ */
.cbt-modal {
    background: var(--surface);
    border-radius: 20px;
    padding: 32px 28px;
    max-width: 420px; width: 100%;
    text-align: center;
    display: flex; flex-direction: column; gap: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0,0,0,.12);
    margin: auto;
}
.modal-icon {
    width: 62px; height: 62px;
    border-radius: 16px;
    background: var(--amber-bg); border: 1px solid var(--amber-bdr);
    color: var(--amber); font-size: 26px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
}
.cbt-modal h3 { font-size: 20px; font-weight: 800; margin: 0; color: var(--text); }
.cbt-modal p  { font-size: 14px; color: var(--muted); margin: 0; }
.modal-stats {
    display: flex; align-items: center;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
}
.modal-stat     { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 3px; }
.modal-stat-div { width: 1px; background: var(--border); align-self: stretch; }
.ms-num   { font-size: 30px; font-weight: 800; font-family: 'JetBrains Mono', monospace; line-height: 1; }
.ms-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.answered-color { color: var(--green); }
.doubt-color    { color: var(--amber); }
.empty-color    { color: var(--red); }
.modal-actions { display: flex; flex-direction: column; gap: 8px; }
.modal-btn-cancel {
    padding: 12px; border-radius: var(--radius);
    border: 1.5px solid var(--border2); background: transparent;
    color: var(--muted); font-size: 14px; font-weight: 700;
    cursor: pointer; transition: all .2s;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.modal-btn-cancel:hover { border-color: var(--text); color: var(--text); }
.modal-btn-confirm {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px; border-radius: var(--radius);
    border: none; background: var(--cbt-accent); color: #fff;
    font-size: 14px; font-weight: 700; cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--primary-custom) 30%, transparent);
    transition: all .2s;
}
.modal-btn-confirm:hover { background: var(--cbt-accent-h); }

/* helpers */
.d-none { display: none !important; }
.mt-3   { margin-top: 12px; }

@media (max-width: 991px) {
    .cbt-main { padding-bottom: calc(var(--mob-bar-h) + 20px) !important; }
}
@media (max-width: 576px) {
    .q-body { padding: 16px; }
    .opt-item { padding: 12px 14px; }
    .q-num { font-size: 18px; }
}
</style>

<script>
// ═══ STATE ═══
let currentQuestion = 1;
const totalQuestions = {{ $questions->count() }};
let answers    = {}; // diisi di DOMContentLoaded dengan key integer
let doubts     = new Set();
let attemptId  = {{ $attempt->id }};

const examStartTime = {{ $attempt->start_time->timestamp }};
const totalDuration = {{ $exam->duration * 60 }};
let timeRemaining   = 0;
let timerInterval;
let audioPlayCount   = 0;
let maxAudioPlay     = 3; // max play count for current question
let audioProgressInt = null;
let audioPlayCounts  = @json($audioPlayCountsByNumber) || {}; // Store audio play counts from session (mapped by question_number)
let hasPlayedAudio   = false; // Flag to track if audio has been played for current session

const questions = @json($questionsJson) || [];

// ═══ INIT ═══
document.addEventListener('DOMContentLoaded', () => {
    // Use answers already mapped by question_number from backend
    answers = @json($answersByNumber) || {};

    startTimer();
    buildGrid();
    loadQuestion(1);
    updateProgress();
});
 

// ═══ TIMER ═══
function calcRemaining() {
    return Math.max(0, totalDuration - (Math.floor(Date.now() / 1000) - examStartTime));
}
function startTimer() {
    timeRemaining = calcRemaining();
    renderTimer();
    timerInterval = setInterval(() => {
        timeRemaining = calcRemaining();
        renderTimer();
        if (timeRemaining <= 0) { clearInterval(timerInterval); forceSubmitExam(); }
    }, 1000);
}
function renderTimer() {
    const h = Math.floor(timeRemaining / 3600);
    const m = Math.floor((timeRemaining % 3600) / 60);
    const s = Math.floor(timeRemaining % 60);
    document.getElementById('timer').textContent = `${pad(h)}:${pad(m)}:${pad(s)}`;

    const el  = document.getElementById('timerPill');
    const pct = timeRemaining / totalDuration;
    el.classList.remove('warning', 'danger');
    if (pct < .1)       el.classList.add('danger');
    else if (pct < .25) el.classList.add('warning');
}
function pad(n) { return String(n).padStart(2, '0'); }

// ═══ GRID ═══
function buildGrid() {
    ['questionGrid', 'questionGridMob'].forEach(id => {
        const g = document.getElementById(id);
        if (!g) return;
        g.innerHTML = '';
        for (let i = 1; i <= totalQuestions; i++) {
            const b = document.createElement('button');
            b.className = 'qg-btn';
            b.textContent = i;
            b.onclick = () => { loadQuestion(i); if (id === 'questionGridMob') toggleMobileNav(); };
            g.appendChild(b);
        }
    });
}
function updateGrid() {
    document.querySelectorAll('.qg-btn').forEach((btn, i) => {
        const n = i + 1;
        btn.className = 'qg-btn';
        if (n === currentQuestion) btn.classList.add('s-current');
        else if (doubts.has(n))    btn.classList.add('s-doubt');
        else if (answers[n])       btn.classList.add('s-answered');
    });
}

// ═══ LOAD QUESTION ═══
function loadQuestion(num) {
    currentQuestion = num;
    const q = questions[num - 1];

    stopAudio();
    // Use audio play count from backend if available, otherwise reset to 0
    audioPlayCount = audioPlayCounts[num] || 0;
    hasPlayedAudio = false; // Reset flag when changing question
    maxAudioPlay = q.max_play_count || 3;
    document.getElementById('audioCount').textContent = Math.max(0, maxAudioPlay - audioPlayCount);

    document.getElementById('questionNumber').textContent = pad(num);
    document.getElementById('questionType').textContent   = q.type;
    document.getElementById('questionText').innerHTML     = q.text;

    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'); }

    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'); }

    renderOptions(q, num);

    const db = document.getElementById('doubtButton');
    if (db) {
        doubts.has(num) ? db.classList.add('active') : db.classList.remove('active');
    }

    const prevBtn = document.getElementById('prevBtn');
    if (prevBtn) prevBtn.disabled = num === 1;
    
    const mobPrev = document.getElementById('mobPrev');
    if (mobPrev) mobPrev.disabled = num === 1;

    const isLast = num === totalQuestions;
    const nextBtn = document.getElementById('nextBtn');
    if (nextBtn) {
        nextBtn.innerHTML = isLast
            ? '<i class="bi bi-check-circle"></i> Selesai'
            : 'Selanjutnya <i class="bi bi-arrow-right"></i>';
    }

    updateGrid();
    updateProgress();
}

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

    if (q.type === 'true_false') {
        wrap.className = 'tf-wrap';
        wrap.innerHTML = q.options.map(opt => `
            <div class="tf-opt ${answers[num] === opt.label ? 'selected' : ''}"
                 onclick="selectAnswer(this,'${opt.label}')">
                ${opt.text}
            </div>`).join('');
    } else {
        wrap.className = 'options-wrap';
        wrap.innerHTML = q.options.map(opt => `
            <div class="opt-item ${answers[num] === opt.label ? 'selected' : ''}"
                 onclick="selectAnswer(this,'${opt.label}')">
                <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>
            </div>`).join('');
    }
}

// ═══ PROGRESS ═══
function updateProgress() {
    const answered   = Object.keys(answers).length;
    const doubtCnt   = doubts.size;
    const unanswered = totalQuestions - answered;

    document.getElementById('progressFill').style.width       = (answered / totalQuestions * 100) + '%';
    document.getElementById('statAnswered').textContent        = answered;
    document.getElementById('statDoubt').textContent           = doubtCnt;
    document.getElementById('summaryAnswered').textContent     = answered;
    document.getElementById('summaryDoubt').textContent        = doubtCnt;
    document.getElementById('summaryUnanswered').textContent   = unanswered;
    // document.getElementById('mobProgress').textContent         = `${answered}/${totalQuestions}`;
}

// ═══ ANSWER ═══
function selectAnswer(el, answer) {
    document.querySelectorAll('.opt-item,.tf-opt').forEach(o => o.classList.remove('selected'));
    el.classList.add('selected');
    answers[currentQuestion] = answer;
    saveAnswer(currentQuestion, answer, doubts.has(currentQuestion));
    updateGrid();
    updateProgress();
}
function saveAnswer(qNum, answer, isDoubt) {
    const q = questions[qNum - 1];
    fetch('/siswa/cbt/save-answer', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
        body: JSON.stringify({ attempt_id: attemptId, question_id: q.id, answer, is_doubt: isDoubt })
    }).catch(console.error);
}

// ═══ DOUBT ═══
function toggleDoubt() {
    const db = document.getElementById('doubtButton');
    if (doubts.has(currentQuestion)) { doubts.delete(currentQuestion); db.classList.remove('active'); }
    else                             { doubts.add(currentQuestion);    db.classList.add('active'); }
    updateGrid(); updateProgress();
}

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

// ═══ MOBILE ═══
function toggleMobileNav() {
    ['mobOverlay', 'mobDrawer'].forEach(id => document.getElementById(id).classList.toggle('d-none'));
}

// ═══ SUBMIT ═══
let isSubmitting = false; // guard double-submit

function submitExam() {
    updateProgress();
    const modal = new bootstrap.Modal(document.getElementById('submitModal'));
    modal.show();
}

function confirmSubmit() {
    if (isSubmitting) return;
    isSubmitting = true;

    // Loading state pada tombol confirm
    const btn = document.querySelector('.modal-btn-confirm');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>Mengumpulkan...';

    fetch(`/siswa/cbt/${attemptId}/submit`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content }
    })
    .then(r => {
        if (r.redirected) { window.location.href = r.url; return; }
        return r.json();
    })
    .then(d => {
        if (d && !d.success) {
            AppAlert.error(d.message || 'Gagal mengirim ujian');
            // Reset tombol kalau gagal
            isSubmitting = false;
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-check-circle me-1"></i> Ya, Kumpulkan';
        }
    })
    .catch(err => {
        console.error(err);
        AppAlert.error('Terjadi kesalahan saat mengirim ujian');
        isSubmitting = false;
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-check-circle me-1"></i> Ya, Kumpulkan';
    });
}

function forceSubmitExam() {
    if (isSubmitting) return;
    isSubmitting = true;

    // Alert waktu habis seperti kode asli
    AppAlert.info('Waktu habis! Jawaban akan dikirim otomatis...');

    // Disable semua tombol + tampilkan overlay loading fullscreen
    document.querySelectorAll('button').forEach(b => b.disabled = true);
    // const overlay = document.createElement('div');
    // overlay.id = 'submitOverlay';
    // overlay.style.cssText = 'position:fixed;inset:0;background:rgba(255,255,255,.75);backdrop-filter:blur(4px);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;';
    // overlay.innerHTML = '<div class="spinner-border text-primary" style="width:48px;height:48px;" role="status"></div><div style="font-weight:700;font-size:15px;color:#1a1f36;">Mengumpulkan jawaban...</div>';
    // document.body.appendChild(overlay);

    fetch(`/siswa/cbt/${attemptId}/submit`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content }
    })
    .then(r => { if (r.redirected) window.location.href = r.url; })
    .catch(err => {
        console.error(err);
        AppAlert.error('Terjadi kesalahan saat mengirim ujian otomatis');
    });
}

// ═══ AUDIO ═══
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 (audioPlayCount >= maxAudioPlay) return;

        // Load metadata if first play
        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}:${pad(s)}`;
            }, { once: true });
        }

        // Increment play count if this is a new play session
        if (!hasPlayedAudio) {
            audioPlayCount++;
            audioPlayCounts[currentQuestion] = audioPlayCount;
            document.getElementById('audioCount').textContent = Math.max(0, maxAudioPlay - audioPlayCount);
            hasPlayedAudio = true; // Mark as played

            // Save audio play count to backend
            const q = questions[currentQuestion - 1];
            fetch('/siswa/cbt/save-audio-play-count', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
                body: JSON.stringify({ attempt_id: attemptId, question_id: q.id, audio_play_count: audioPlayCount })
            }).catch(console.error);
        }

        audio.play();
        setPlayIcon(true);
        document.getElementById('stopButton').disabled = false;
        audioProgressInt = setInterval(updateAudioProgress, 100);
        audio.addEventListener('ended', () => {
            setPlayIcon(false);
            document.getElementById('stopButton').disabled = true;
            hasPlayedAudio = false; // Reset flag when audio ends naturally
            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);
    hasPlayedAudio = false; // Reset flag when stopped manually
}
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}:${pad(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>

<script src="{{ asset('js/anti-cheating.js') }}"></script>
<script>
// Initialize anti-cheating detector
document.addEventListener('DOMContentLoaded', () => {
    const antiCheatDetector = new AntiCheatDetector({
        examSessionId: '{{ $attempt->id }}',
        cheatEventEndpoint: '{{ route('siswa.cbt.cheat-event') }}',
        enabled: true,
        cooldownMs: 5000 // 5 seconds cooldown between warnings
    });

    // Clean up on page unload
    window.addEventListener('beforeunload', () => {
        if (antiCheatDetector) {
            antiCheatDetector.destroy();
        }
    });
});
</script>
@endsection