@php
use App\Enums\QuestionType;
use App\Enums\TestType;
@endphp

{{-- ─────────────── LEFT: Question Area ─────────────── --}}
<div class="col-lg-9 col-md-8">
    <div class="card border-0 shadow-sm">

        {{-- Card header: exam info + progress --}}
        <div class="card-header border-0 pb-2 pt-4 px-4">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <span class="badge badge-sm bg-gradient-primary text-uppercase mb-1">
                        {{ $exam->test_type === TestType::PRE_TEST->value ? 'Pre-Test' : 'Post-Test' }}
                    </span>
                    <h5 class="mb-0 text-dark font-weight-bolder">{{ $exam->bank_question_title }}</h5>
                    <p class="text-xs text-muted mb-0">{{ $exam->title ?? 'Training Assessment' }}</p>
                </div>
                <div class="text-end">
                    <span id="progress-label" class="text-xs text-muted">Soal <strong>1</strong> dari <strong>{{ $totalQ }}</strong></span>
                </div>
            </div>
            <div class="exam-progress-bar">
                <div class="exam-progress-fill" id="progress-fill" style="width: {{ $totalQ > 0 ? (1/$totalQ*100) : 0 }}%"></div>
            </div>
        </div>

        <div class="card-body px-4 pt-3 pb-4">
            <form id="exam-form" action="{{ url('trsuex/submit') }}" method="POST">
                @csrf
                <input type="hidden" name="exam_id" value="{{ encrypt($exam->id) }}">
                <input type="hidden" name="attempt_id" value="{{ $attempt->id }}">
                <input type="hidden" name="draft_payload" id="draft-payload" value="{}">

                @foreach($questions as $index => $q)
                <div class="question-card {{ $index === 0 ? 'active' : '' }}" id="q-{{ $index + 1 }}" data-question-id="{{ $q->id }}">

                    {{-- Question number label --}}
                    <div class="d-flex align-items-center mb-3">
                        <span class="badge bg-gradient-secondary text-white me-2" style="font-size:.78rem; padding: 5px 10px; border-radius:6px;">
                            No. {{ $index + 1 }}
                        </span>
                        @if($q->question_type === QuestionType::MC->value)
                            <span class="text-xxs text-uppercase font-weight-bold text-muted">Pilihan Ganda</span>
                        @else
                            <span class="text-xxs text-uppercase font-weight-bold text-muted">Essay</span>
                        @endif
                    </div>

                    {{-- Question content --}}
                    <div class="mb-4 ps-1">
                        @if($q->question_image)
                            <img src="{{ asset('storage/' . $q->question_image) }}"
                                 class="img-fluid rounded mb-3 shadow-sm d-block"
                                 style="max-height: 320px; border: 1px solid #e9ecef;"
                                 alt="Gambar Soal">
                        @endif
                        @if($q->question_text && trim($q->question_text) !== '')
                            <p class="text-sm text-dark mb-0" style="line-height: 1.7;">
                                {!! nl2br(e($q->question_text)) !!}
                            </p>
                        @endif
                    </div>

                    {{-- Answer area --}}
                    @if($q->question_type === QuestionType::MC->value)
                        <div class="options-container">
                            @forelse($q->options as $opt)
                            @php
                                $optLabel   = chr(65 + $loop->index);
                                $isSelected = $q->saved_answer && $q->saved_answer->id_trn_mc_option == $opt->id;
                            @endphp
                            <label class="mc-option {{ $isSelected ? 'selected' : '' }}" for="opt_{{ $opt->id }}">
                                <input class="answer-input" type="radio"
                                       name="q_{{ $q->id }}"
                                       id="opt_{{ $opt->id }}"
                                       value="{{ $opt->id }}"
                                       data-type="mc"
                                       {{ $isSelected ? 'checked' : '' }}>
                                <span class="opt-letter">{{ $optLabel }}</span>
                                <span class="opt-text">
                                    @if($opt->answer_detail && trim($opt->answer_detail) !== '')
                                        {!! nl2br(e($opt->answer_detail)) !!}
                                    @endif
                                    @if($opt->option_image)
                                        <img src="{{ asset('storage/' . $opt->option_image) }}"
                                             class="img-fluid rounded mt-2 d-block"
                                             style="max-height: 180px; border: 1px solid #e9ecef;"
                                             alt="Gambar Pilihan">
                                    @endif
                                </span>
                            </label>
                            @empty
                            <p class="text-danger text-sm">Pilihan ganda tidak tersedia.</p>
                            @endforelse
                        </div>
                    @else
                        @php $savedImg = $q->saved_answer->essay_image ?? null; @endphp
                        <div>
                            <label class="form-label text-xs font-weight-bold text-uppercase text-muted mb-2">
                                Jawaban Essay
                            </label>
                            <textarea id="essay-text-{{ $q->id }}"
                                      name="q_{{ $q->id }}"
                                      class="form-control essay-area essay-text-input w-100"
                                      data-qid="{{ $q->id }}"
                                      rows="7"
                                      placeholder="Tuliskan jawaban Anda di sini...">{{ $q->saved_answer ? $q->saved_answer->essay_answer : '' }}</textarea>

                            <div class="mt-3">
                                <label class="form-label text-xs font-weight-bold text-uppercase text-muted mb-1">
                                    <i class="fas fa-image me-1"></i> Lampiran Gambar <span class="text-xxs font-weight-normal">(opsional · jpg/png/gif/webp · maks 2 MB)</span>
                                </label>

                                <div id="essay-preview-{{ $q->id }}" class="mb-2{{ $savedImg ? '' : ' d-none' }}">
                                    @if($savedImg)
                                        <div class="position-relative d-inline-block">
                                            <img src="{{ asset('storage/' . $savedImg) }}"
                                                 class="img-fluid rounded shadow-sm"
                                                 style="max-height: 240px; border: 1px solid #e9ecef;"
                                                 alt="Gambar Jawaban">
                                            <button type="button"
                                                    class="btn btn-sm btn-danger essay-img-remove position-absolute"
                                                    data-qid="{{ $q->id }}"
                                                    style="top:6px; right:6px; padding:2px 8px; font-size:.72rem;">
                                                <i class="fas fa-times"></i> Hapus
                                            </button>
                                        </div>
                                    @endif
                                </div>

                                <div class="essay-upload-area" id="essay-upload-{{ $q->id }}">
                                    <label for="essay-img-{{ $q->id }}" class="d-flex align-items-center gap-2 p-3 rounded"
                                           style="border: 2px dashed #c3cdf7; background:#f8f9ff; cursor:pointer; transition: border-color .18s;">
                                        <i class="fas fa-cloud-upload-alt text-primary" style="font-size:1.4rem;"></i>
                                        <span class="text-xs text-muted">Klik untuk unggah gambar jawaban</span>
                                    </label>
                                    <input type="file"
                                           id="essay-img-{{ $q->id }}"
                                           class="essay-image-input d-none"
                                           data-qid="{{ $q->id }}"
                                           name="essay_image"
                                           accept="image/jpeg,image/png,image/gif,image/webp">
                                </div>
                            </div>

                            <p class="text-xxs text-muted mt-2"><i class="fas fa-check-circle text-success me-1"></i>Jawaban disimpan otomatis.</p>
                        </div>
                    @endif

                    {{-- Bottom navigation --}}
                    <div class="d-flex justify-content-between align-items-center mt-5 pt-3" style="border-top: 1px solid #f0f0f5;">
                        @if($index > 0)
                            <button type="button" class="btn btn-sm btn-outline-secondary btn-nav px-4" data-target="{{ $index }}">
                                <i class="fas fa-chevron-left me-1"></i> Sebelumnya
                            </button>
                        @else
                            <div></div>
                        @endif

                        @if($index < $totalQ - 1)
                            <button type="button" class="btn btn-sm btn-primary btn-nav px-4" data-target="{{ $index + 2 }}">
                                Selanjutnya <i class="fas fa-chevron-right ms-1"></i>
                            </button>
                        @else
                            <button type="button" class="btn btn-sm btn-success px-4" onclick="confirmSubmit()">
                                <i class="fas fa-paper-plane me-1"></i> Selesai Ujian
                            </button>
                        @endif
                    </div>
                </div>
                @endforeach

            </form>
        </div>
    </div>
</div>