@php
use App\Enums\ControlType;
@endphp

{{-- ─────────────── RIGHT: Sidebar ─────────────── --}}
<div class="col-lg-3 col-md-4">
    <div class="card border-0 shadow-sm position-sticky" style="top: 80px;">

        {{-- Timer / No-timer --}}
        <div class="card-body p-3 pb-2">
            @if($exam->control_type === ControlType::TIMER->value)
                <div class="timer-block" id="timer-block">
                    <p class="timer-label mb-1">Sisa Waktu</p>
                    <div class="timer-value" id="timer-display">00:00:00</div>
                </div>
            @else
                <div class="timer-block" id="manual-timer-block">
                    <p class="timer-label mb-1">Durasi Berjalan</p>
                    <div class="timer-value" id="manual-elapsed-display">00:00:00</div>
                    <small class="text-muted d-block mt-1">
                        <i class="fas fa-stopwatch me-1"></i> Mode Manual
                    </small>
                </div>
            @endif
        </div>

        <hr class="horizontal dark my-0 mx-3">

        {{-- Question navigation grid --}}
        <div class="card-body p-3">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="text-xs font-weight-bold text-uppercase text-muted">Navigasi Soal</span>
                <span class="answered-count" id="answered-summary">
                    <strong id="answered-count">{{ $questions->filter(fn($q) => $q->saved_answer && ($q->saved_answer->id_trn_mc_option || $q->saved_answer->essay_answer || $q->saved_answer->essay_image))->count() }}</strong> / {{ $totalQ }}
                </span>
            </div>

            <div class="d-flex flex-wrap" id="nav-container" style="gap: 2px;">
                @foreach($questions as $index => $q)
                @php $hasAnswer = $q->saved_answer && ($q->saved_answer->id_trn_mc_option || $q->saved_answer->essay_answer || $q->saved_answer->essay_image); @endphp
                <button type="button"
                        class="btn {{ $hasAnswer ? 'btn-success' : 'btn-outline-secondary' }} question-nav-btn nav-btn-{{ $index + 1 }}"
                        onclick="goToQuestion({{ $index + 1 }})">
                    {{ $index + 1 }}
                </button>
                @endforeach
            </div>

            {{-- Legend --}}
            <div class="mt-3 pt-3 border-top d-flex justify-content-center gap-4">
                <div class="d-flex align-items-center gap-1">
                    <span style="display:inline-block; width:10px; height:10px; background:#2dce89; border-radius:3px;"></span>
                    <span class="text-xxs text-muted">Dijawab</span>
                </div>
                <div class="d-flex align-items-center gap-1">
                    <span style="display:inline-block; width:10px; height:10px; background:#fff; border:1.5px solid #adb5bd; border-radius:3px;"></span>
                    <span class="text-xxs text-muted">Not yet</span>
                </div>
                <div class="d-flex align-items-center gap-1">
                    <span style="display:inline-block; width:10px; height:10px; background: rgba(94,114,228,.25); border: 2px solid #5e72e4; border-radius:3px;"></span>
                    <span class="text-xxs text-muted">Aktif</span>
                </div>
            </div>

            {{-- Submit button --}}
            <div class="mt-4">
                <button type="button" class="btn btn-primary w-100 shadow-sm" onclick="confirmSubmit()">
                    <i class="fas fa-paper-plane me-2"></i> Selesai &amp; Kumpulkan
                </button>
            </div>
        </div>

    </div>
</div>