@extends('layouts.app')

@section('title', $createMode ? 'Buat Soal Ujian' : 'Bank Soal Ujian')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading flex flex-wrap items-center justify-between gap-4"><div><p class="pkbm-dashboard__breadcrumb">Standar Penilaian <i class="bi bi-chevron-right" aria-hidden="true"></i>Manajemen Ujian</p><h1 class="pkbm-dashboard__title">{{ $createMode ? 'Buat Soal Ujian' : 'Bank Soal Ujian' }}</h1><p class="pkbm-dashboard__subtitle">{{ $createMode ? 'Pilih cara membuat soal untuk kelas dan mata pelajaran yang diampu.' : 'Kelola bank soal berdasarkan periode, kelas, mata pelajaran, dan jenis ujian.' }}</p></div>
        @if ($createMode)
            <a href="{{ route('pkbm.ujian.questions', ['tahun_pelajaran' => $period->tahun_pelajaran, 'semester' => $period->semester, 'id_kelas' => $classId ?: null, 'id_mapel' => $subjectId ?: null, 'jenis' => $filters['jenis'] ?? null]) }}" class="sp-btn-secondary"><i class="bi bi-arrow-left" aria-hidden="true"></i>Kembali ke bank soal</a>
        @else
            <a href="{{ route('pkbm.ujian.questions', ['mode' => 'create', 'tahun_pelajaran' => $period->tahun_pelajaran, 'semester' => $period->semester, 'id_kelas' => $classId ?: null, 'id_mapel' => $subjectId ?: null, 'jenis' => $filters['jenis'] ?? null]) }}" class="sp-btn-primary"><i class="bi bi-plus-circle" aria-hidden="true"></i>Buat Soal</a>
        @endif
    </header>
    @if (session('status'))<div role="status" class="settings-notice settings-notice--success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</span></div>@endif
    @if ($errors->any())<div role="alert" class="settings-notice settings-notice--error"><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i><div><p class="font-semibold">Soal belum berhasil diproses.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div></div>@endif

    <section class="sp-card">
        <div class="sp-card-header flex flex-wrap items-center justify-between gap-3"><h2 class="sp-section-title">{{ $createMode ? 'Pilih data soal' : 'Filter bank soal' }}</h2><button form="question-filters-form" type="submit" class="sp-btn-secondary"><i class="bi bi-funnel" aria-hidden="true"></i>Terapkan filter</button></div>
        <form id="question-filters-form" method="GET" action="{{ route('pkbm.ujian.questions') }}" class="grid gap-4 p-5 sm:grid-cols-2 lg:grid-cols-3 lg:items-end" data-question-filters>
            @if ($createMode)<input type="hidden" name="mode" value="create">@endif
            <label class="block"><span class="sp-form-label">Tahun pelajaran</span><select name="tahun_pelajaran" required class="sp-form-control px-3" data-year-select>@foreach ($periods->pluck('tahun_pelajaran')->unique() as $yearOption)<option value="{{ $yearOption }}" @selected($period->tahun_pelajaran === $yearOption)>{{ $yearOption }}</option>@endforeach</select></label>
            <label class="block"><span class="sp-form-label">Semester</span><select name="semester" required class="sp-form-control px-3" data-semester-select>@foreach ($periods->where('tahun_pelajaran', $period->tahun_pelajaran)->pluck('semester')->unique() as $semesterOption)<option value="{{ $semesterOption }}" @selected($period->semester === $semesterOption)>{{ $semesterOption }}</option>@endforeach</select></label>
            <label class="block"><span class="sp-form-label">Kelas</span><select name="id_kelas" class="sp-form-control px-3"><option value="">Pilih kelas</option>@foreach ($classes as $class)<option value="{{ $class->id }}" @selected($classId === (int) $class->id)>{{ $class->nama_kelas }}</option>@endforeach</select></label>
            <label class="block"><span class="sp-form-label">Mata pelajaran diampu</span><select name="id_mapel" class="sp-form-control px-3"><option value="">Pilih mapel</option>@foreach ($subjects as $subject)<option value="{{ $subject->id }}" @selected($subjectId === (int) $subject->id)>{{ $subject->nama_mapel }}</option>@endforeach</select></label>
            <label class="block"><span class="sp-form-label">Jenis ujian</span><select name="jenis" required class="sp-form-control px-3"><option value="">Pilih jenis</option><option value="PTS" @selected(($filters['jenis'] ?? '') === 'PTS')>PSTS</option><option value="PAS" @selected(($filters['jenis'] ?? '') === 'PAS')>PSAS</option></select></label>
            <label class="block"><span class="sp-form-label">Metode input</span><select name="input" class="sp-form-control px-3"><option value="">Semua metode</option><option value="manual" @selected(($filters['input'] ?? '') === 'manual')>Manual</option><option value="upload" @selected(($filters['input'] ?? '') === 'upload')>Unggah berkas</option></select></label>
        </form>
    </section>

    @if ($createMode)
        @if (!$classId || !$subjectId || empty($filters['jenis']))
            <div class="rounded-xl border border-blue-200 bg-blue-50 p-4 text-sm text-blue-900">Pilih tahun pelajaran, semester, kelas, mata pelajaran, dan jenis ujian di atas untuk menampilkan metode pembuatan soal.</div>
        @elseif ($chapters->isEmpty())
            <div class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">Peta materi kelas dan mata pelajaran ini belum tersedia. Buat peta materi terlebih dahulu sebelum menambahkan soal.</div>
        @else
            <section class="sp-card overflow-hidden">
                <div class="sp-card-header"><h2 class="sp-section-title">Pilih metode pembuatan soal</h2><p class="mt-1 text-xs text-slate-500">{{ $period->tahun_pelajaran }} · {{ $period->semester }} · {{ $classes->firstWhere('id', $classId)?->nama_kelas }} · {{ $subjects->firstWhere('id', $subjectId)?->nama_mapel }} · {{ $filters['jenis'] === 'PTS' ? 'PSTS' : 'PSAS' }}</p></div>
                <div class="border-b border-slate-200 px-5 pt-4">
                    <div class="flex flex-wrap gap-2" role="tablist" aria-label="Metode pembuatan soal">
                        <button type="button" id="question-tab-manual" role="tab" aria-controls="question-panel-manual" aria-selected="true" class="rounded-t-lg border border-b-0 border-blue-600 bg-blue-600 px-4 py-2 text-sm font-semibold text-white" data-question-tab="manual">Soal manual</button>
                        <button type="button" id="question-tab-upload" role="tab" aria-controls="question-panel-upload" aria-selected="false" tabindex="-1" class="rounded-t-lg border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-50" data-question-tab="upload">Upload file</button>
                        <button type="button" id="question-tab-ai" role="tab" aria-controls="question-panel-ai" aria-selected="false" tabindex="-1" class="rounded-t-lg border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-50" data-question-tab="ai">Prompt AI</button>
                    </div>
                </div>
                <div id="question-panel-manual" role="tabpanel" aria-labelledby="question-tab-manual" data-question-panel="manual">
                    <form method="POST" action="{{ route('pkbm.ujian.questions.store') }}" enctype="multipart/form-data" class="grid gap-4 p-5 sm:grid-cols-2" data-manual-question-form>
                        @csrf
                        <input type="hidden" name="id_kelas" value="{{ $classId }}"><input type="hidden" name="id_mapel" value="{{ $subjectId }}">
                        <input type="hidden" name="tahun_pelajaran" value="{{ $period->tahun_pelajaran }}"><input type="hidden" name="semester_label" value="{{ $period->semester }}">
                        <input type="hidden" name="semester" value="{{ $period->semester === 'Genap' ? '2' : '1' }}"><input type="hidden" name="jenis" value="{{ $filters['jenis'] }}">
                        <label class="block"><span class="sp-form-label">BAB dari peta materi</span><select name="bab_ke" required class="sp-form-control px-3"><option value="">Pilih BAB</option>@foreach ($chapters as $chapter)<option value="{{ $chapter['number'] }}" @selected((int) old('bab_ke') === $chapter['number'])>BAB {{ $chapter['number'] }} · {{ $chapter['name'] }}</option>@endforeach</select></label>
                        <label class="block"><span class="sp-form-label">Tipe soal</span><select name="tipe_soal" required class="sp-form-control px-3" data-manual-question-type><option value="pg" @selected(old('tipe_soal', 'pg') === 'pg')>Pilihan ganda</option><option value="pg_banyak" @selected(old('tipe_soal') === 'pg_banyak')>Pilihan ganda kompleks</option><option value="tabel" @selected(old('tipe_soal') === 'tabel')>Tabel (Ya/Tidak/Benar/Salah)</option><option value="menjodohkan" @selected(old('tipe_soal') === 'menjodohkan')>Menjodohkan</option><option value="esai" @selected(old('tipe_soal') === 'esai')>Esai/Uraian</option></select></label>
                        <label class="block sm:col-span-2"><span class="sp-form-label">Pertanyaan</span><textarea name="pertanyaan" rows="3" maxlength="10000" required class="sp-form-control px-3 py-2" placeholder="Tuliskan pertanyaan"></textarea></label>
                        <div class="grid gap-3 sm:col-span-2 sm:grid-cols-2" data-manual-type-section="options">
                            @foreach (['a','b','c','d','e'] as $option)<label class="block"><span class="sp-form-label">Opsi {{ strtoupper($option) }}</span><input name="opsi_{{ $option }}" maxlength="2000" class="sp-form-control px-3" placeholder="Teks pilihan {{ strtoupper($option) }}"></label>@endforeach
                            <label class="block"><span class="sp-form-label">Kunci jawaban</span><input name="jawaban" maxlength="10000" class="sp-form-control px-3" placeholder="Contoh: a atau a,c" data-manual-answer-key></label>
                        </div>
                        <fieldset class="sm:col-span-2 space-y-3" data-manual-type-section="tabel" hidden>
                            <legend class="sp-form-label">Pernyataan dan kunci jawaban</legend>
                            <p class="text-xs text-slate-500">Tuliskan satu pernyataan per baris, lalu pilih kunci jawaban di sampingnya.</p>
                            <div class="space-y-2" data-table-rows>
                                @foreach (array_values(old('table_rows', [['statement' => '', 'answer' => ''], ['statement' => '', 'answer' => '']])) as $row => $tableRow)
                                    <div class="grid gap-2 rounded-xl border border-slate-200 bg-slate-50 p-3 sm:grid-cols-[1fr_12rem_auto]" data-question-row data-row-index="{{ $row }}">
                                        <label class="block"><span class="sp-form-label">Pernyataan {{ $row + 1 }}</span><input name="table_rows[{{ $row }}][statement]" value="{{ $tableRow['statement'] ?? '' }}" maxlength="2000" class="sp-form-control px-3" placeholder="Contoh: Air mendidih pada suhu 100°C"></label>
                                        <label class="block"><span class="sp-form-label">Kunci jawaban</span><select name="table_rows[{{ $row }}][answer]" class="sp-form-control px-3"><option value="">Pilih kunci</option>@foreach (['Benar', 'Salah', 'Ya', 'Tidak'] as $tableAnswer)<option value="{{ $tableAnswer }}" @selected(($tableRow['answer'] ?? '') === $tableAnswer)>{{ $tableAnswer }}</option>@endforeach</select></label>
                                        <button type="button" class="sp-btn-secondary self-end px-3" data-remove-question-row aria-label="Hapus pernyataan"><i class="bi bi-trash" aria-hidden="true"></i></button>
                                    </div>
                                @endforeach
                            </div>
                            <button type="button" class="sp-btn-secondary" data-add-table-row><i class="bi bi-plus-circle" aria-hidden="true"></i>Tambah pernyataan</button>
                        </fieldset>
                        <fieldset class="sm:col-span-2 space-y-3" data-manual-type-section="menjodohkan" hidden>
                            <legend class="sp-form-label">Daftar soal dan kunci pasangan</legend>
                            <p class="text-xs text-slate-500">Isi teks di kolom kiri dan pasangan yang benar di kolom kunci. Minimal dua pasangan.</p>
                            <div class="space-y-2" data-matching-rows>
                                @foreach (array_values(old('matching_pairs', [['prompt' => '', 'answer' => ''], ['prompt' => '', 'answer' => '']])) as $row => $matchingPair)
                                    <div class="grid gap-2 rounded-xl border border-slate-200 bg-slate-50 p-3 sm:grid-cols-[1fr_1fr_auto]" data-question-row data-row-index="{{ $row }}">
                                        <label class="block"><span class="sp-form-label">Teks soal / istilah {{ $row + 1 }}</span><input name="matching_pairs[{{ $row }}][prompt]" value="{{ $matchingPair['prompt'] ?? '' }}" maxlength="500" class="sp-form-control px-3" placeholder="Contoh: Ibu kota Jawa Barat"></label>
                                        <label class="block"><span class="sp-form-label">Kunci pasangan</span><input name="matching_pairs[{{ $row }}][answer]" value="{{ $matchingPair['answer'] ?? '' }}" maxlength="500" class="sp-form-control px-3" placeholder="Contoh: Bandung"></label>
                                        <button type="button" class="sp-btn-secondary self-end px-3" data-remove-question-row aria-label="Hapus pasangan"><i class="bi bi-trash" aria-hidden="true"></i></button>
                                    </div>
                                @endforeach
                            </div>
                            <button type="button" class="sp-btn-secondary" data-add-matching-row><i class="bi bi-plus-circle" aria-hidden="true"></i>Tambah pasangan</button>
                        </fieldset>
                        <label class="block sm:col-span-2" data-manual-type-section="esai" hidden><span class="sp-form-label">Pedoman jawaban esai</span><textarea name="jawaban" rows="3" maxlength="10000" disabled class="sp-form-control px-3 py-2" placeholder="Tuliskan pedoman jawaban atau poin penting"></textarea></label>
                        <label class="block"><span class="sp-form-label">Gambar soal (opsional)</span><input type="file" name="gambar_soal" accept="image/*" class="sp-form-control px-3 py-2"></label>
                        <label class="block"><span class="sp-form-label">Gambar kunci (opsional)</span><input type="file" name="gambar_jawaban" accept="image/*" class="sp-form-control px-3 py-2"></label>
                        <div class="sm:col-span-2"><button type="submit" class="sp-btn-primary"><i class="bi bi-plus-circle" aria-hidden="true"></i>Simpan soal manual</button></div>
                    </form>
                </div>
                <div id="question-panel-upload" role="tabpanel" aria-labelledby="question-tab-upload" data-question-panel="upload" hidden>
                    <form method="POST" action="{{ route('pkbm.ujian.questions.store') }}" enctype="multipart/form-data" class="grid gap-4 p-5 sm:grid-cols-2">
                        @csrf
                        <input type="hidden" name="id_kelas" value="{{ $classId }}"><input type="hidden" name="id_mapel" value="{{ $subjectId }}">
                        <input type="hidden" name="tahun_pelajaran" value="{{ $period->tahun_pelajaran }}"><input type="hidden" name="semester_label" value="{{ $period->semester }}">
                        <input type="hidden" name="semester" value="{{ $period->semester === 'Genap' ? '2' : '1' }}"><input type="hidden" name="jenis" value="{{ $filters['jenis'] }}">
                        <input type="hidden" name="tipe_soal" value="upload">
                        <label class="block"><span class="sp-form-label">BAB dari peta materi</span><select name="bab_ke" required class="sp-form-control px-3"><option value="">Pilih BAB</option>@foreach ($chapters as $chapter)<option value="{{ $chapter['number'] }}">BAB {{ $chapter['number'] }} · {{ $chapter['name'] }}</option>@endforeach</select></label>
                        <label class="block"><span class="sp-form-label">Berkas soal</span><input type="file" name="file_upload" accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.odt,.ods,.txt" required class="sp-form-control px-3 py-2"></label>
                        <p class="text-sm text-slate-600 sm:col-span-2">Format PDF, DOC, XLS, PPT, ODT, ODS, atau TXT. Ukuran maksimal 20 MB.</p>
                        <div class="sm:col-span-2"><button type="submit" class="sp-btn-primary"><i class="bi bi-upload" aria-hidden="true"></i>Upload soal</button></div>
                    </form>
                </div>
                <div id="question-panel-ai" role="tabpanel" aria-labelledby="question-tab-ai" data-question-panel="ai" hidden>
                    <form method="POST" action="{{ route('pkbm.ujian.questions.import') }}" enctype="multipart/form-data" class="space-y-5 p-5" data-question-import
                        data-subject="{{ $subjects->firstWhere('id', $subjectId)?->nama_mapel }}"
                        data-grade="{{ $classes->firstWhere('id', $classId)?->tingkatan }}"
                        data-year="{{ $period->tahun_pelajaran }}" data-semester="{{ $period->semester }}"
                        data-exam="{{ $filters['jenis'] }}">
                        @csrf
                        <input type="hidden" name="tahun_pelajaran" value="{{ $period->tahun_pelajaran }}">
                        <input type="hidden" name="semester" value="{{ $period->semester }}">
                        <input type="hidden" name="id_kelas" value="{{ $classId }}">
                        <input type="hidden" name="id_mapel" value="{{ $subjectId }}">
                        <input type="hidden" name="jenis" value="{{ $filters['jenis'] }}">
                        <fieldset>
                            <legend class="sp-form-label">Pilih BAB dari peta materi (maksimal 12)</legend>
                            <div class="mt-2 grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
                                @foreach ($chapters as $chapter)
                                    <label class="flex cursor-pointer items-start gap-3 rounded-xl border border-slate-200 p-3 transition hover:border-blue-300 hover:bg-blue-50/50">
                                        <input type="checkbox" name="chapter_ids[]" value="{{ $chapter['number'] }}" data-chapter-number="{{ $chapter['number'] }}" data-chapter-name="{{ $chapter['name'] }}" data-chapter-topics="{{ implode(' · ', $chapter['topics']) }}" class="mt-1 rounded border-slate-300 text-blue-600 focus:ring-blue-500" @checked(in_array((string) $chapter['number'], (array) old('chapter_ids', []), true))>
                                        <span><span class="block text-sm font-semibold text-slate-800">BAB {{ $chapter['number'] }} · {{ $chapter['name'] }}</span><span class="mt-1 block text-xs text-slate-500">{{ implode(' · ', $chapter['topics']) ?: 'Belum ada judul materi pertemuan' }}</span></span>
                                    </label>
                                @endforeach
                            </div>
                        </fieldset>
                        <div class="grid gap-3 sm:grid-cols-3">
                            <label class="block"><span class="sp-form-label">Bentuk soal</span><select name="tipe_soal" required class="sp-form-control px-3" data-question-type><option value="pg" @selected(old('tipe_soal') === 'pg')>Pilihan ganda (A-D)</option><option value="esai" @selected(old('tipe_soal') === 'esai')>Esai / uraian</option></select></label>
                            <label class="block"><span class="sp-form-label">Jumlah soal</span><input type="number" name="jumlah_soal" min="1" max="30" value="{{ old('jumlah_soal', 10) }}" required class="sp-form-control px-3" data-question-count></label>
                            <label class="block"><span class="sp-form-label">Tingkat kesulitan</span><select name="kesulitan" required class="sp-form-control px-3" data-question-difficulty><option value="mudah" @selected(old('kesulitan') === 'mudah')>Mudah</option><option value="sedang" @selected(old('kesulitan', 'sedang') === 'sedang')>Sedang</option><option value="menantang" @selected(old('kesulitan') === 'menantang')>Menantang</option></select></label>
                        </div>
                        <div class="rounded-xl border border-blue-100 bg-blue-50/60 p-4">
                            <div class="flex flex-wrap items-center justify-between gap-3">
                                <div><h3 class="text-sm font-semibold text-slate-800">Susun prompt untuk layanan AI pilihan</h3><p class="mt-1 text-xs text-slate-600">Tidak ada API key atau koneksi AI dari aplikasi. Jangan sertakan data pribadi.</p></div>
                                <button type="button" class="sp-btn-secondary" data-build-prompt><i class="bi bi-clipboard" aria-hidden="true"></i>Buat &amp; salin prompt</button>
                            </div>
                            <textarea readonly rows="8" class="sp-form-control mt-3 px-3 py-2 font-mono text-xs" placeholder="Pilih BAB dan klik “Buat & salin prompt”." data-prompt-output></textarea>
                            <p class="mt-2 text-xs text-slate-600" aria-live="polite" data-prompt-status></p>
                        </div>
                        <div class="rounded-xl border border-amber-200 bg-amber-50 p-4">
                            <h3 class="text-sm font-semibold text-amber-950">Impor hasil JSON ke bank soal</h3>
                            <p class="mt-1 text-xs text-amber-900">Unggah hanya JSON sesuai format prompt. File SQL dan format lain ditolak. Maksimal 1 MB; semua soal divalidasi sebelum disimpan.</p>
                            <label class="mt-3 block"><span class="sp-form-label">File hasil AI (.json)</span><input type="file" name="questions_file" accept=".json,application/json" required class="sp-form-control px-3 py-2"></label>
                        </div>
                        <button type="submit" class="sp-btn-primary"><i class="bi bi-shield-check" aria-hidden="true"></i>Validasi &amp; simpan ke bank soal</button>
                    </form>
                </div>
            </section>
        @endif
    @elseif ($classId && $subjectId && !empty($filters['jenis']))
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header"><h2 class="sp-section-title">Daftar soal tersimpan</h2><p class="mt-1 text-xs text-slate-500">{{ $questions->count() }} soal · {{ $filters['jenis'] }} · {{ $period->tahun_pelajaran }}</p></div>
            <div class="overflow-x-auto"><table class="sp-table min-w-full"><thead><tr><th class="w-12">No.</th><th class="w-20">BAB</th><th class="w-32">Tipe</th><th>Pertanyaan / berkas</th><th>Opsi dan kunci</th><th class="w-24 text-right">Aksi</th></tr></thead><tbody>
                @forelse ($questions as $question)
                    @php($answerOptions = [])
                    @foreach (['a','b','c','d','e'] as $option)
                        @php($decoded = json_decode($question->{'opsi_'.$option} ?? '', true))
                        @if (!empty($decoded['teks']))@php($answerOptions[] = strtoupper($option).'. '.$decoded['teks'])@endif
                    @endforeach
                    <tr>
                        <td>{{ $loop->iteration }}</td><td><span class="rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-700">{{ $question->bab_ke ? 'BAB '.$question->bab_ke : '—' }}</span></td><td><span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold uppercase text-slate-700">{{ str_replace('_', ' ', $question->tipe_soal) }}</span></td>
                        <td><p class="whitespace-pre-line font-medium text-slate-800">{{ $question->pertanyaan ?: 'Arsip soal terlampir' }}</p>
                            @if ($question->file_upload)<a href="{{ route('pkbm.ujian.questions.file', [$question->id, 'file']) }}" class="mt-2 inline-flex items-center gap-1 text-xs font-semibold text-blue-700 no-underline hover:no-underline"><i class="bi bi-file-earmark-arrow-down" aria-hidden="true"></i>Lihat berkas soal</a>@endif
                            @if ($question->gambar_soal)<a href="{{ route('pkbm.ujian.questions.file', [$question->id, 'gambar-soal']) }}" class="ml-3 text-xs font-semibold text-blue-700 no-underline hover:no-underline">Lihat gambar</a>@endif
                        </td>
                        <td class="text-sm">@if ($answerOptions !== [])<p class="whitespace-pre-line">{{ implode("\n", $answerOptions) }}</p>@endif
                            @if ($question->jawaban)<p class="mt-1 font-semibold text-emerald-700">Kunci: {{ $question->jawaban }}</p>@endif
                            @if ($question->pasangan)<p class="mt-1 whitespace-pre-line text-xs text-slate-500">Pasangan: {{ $question->pasangan }}</p>@endif
                            @if ($question->sub_pertanyaan)<p class="mt-1 whitespace-pre-line text-xs text-slate-500">Subpertanyaan: {{ $question->sub_pertanyaan }}</p>@endif
                        </td>
                        <td><div class="flex justify-end gap-2"><a href="{{ route('pkbm.ujian.questions.edit', $question->id) }}" class="sp-btn-secondary px-3 py-1.5" aria-label="Ubah soal"><i class="bi bi-pencil" aria-hidden="true"></i></a><form method="POST" action="{{ route('pkbm.ujian.questions.destroy', $question->id) }}" onsubmit="return confirm('Hapus soal ini? Soal yang sudah memiliki jawaban tidak dapat dihapus.')">@csrf @method('DELETE')<button class="sp-btn-danger px-3 py-1.5" aria-label="Hapus soal"><i class="bi bi-trash" aria-hidden="true"></i></button></form></div></td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="py-8 text-center text-slate-500">Belum ada soal yang sesuai filter.</td></tr>
                @endforelse
            </tbody></table></div>
        </section>
    @endif
</div>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const filterForm = document.querySelector('[data-question-filters]');
    if (filterForm) {
        const periodOptions = @json($periods->map(fn ($option) => ['year' => $option->tahun_pelajaran, 'semester' => $option->semester])->values());
        const year = filterForm.querySelector('[data-year-select]');
        const semester = filterForm.querySelector('[data-semester-select]');
        const classSelect = filterForm.querySelector('[name="id_kelas"]');
        const subjectSelect = filterForm.querySelector('[name="id_mapel"]');
        year?.addEventListener('change', () => {
            const allowedSemesters = [...new Set(periodOptions.filter((option) => option.year === year.value).map((option) => option.semester))];
            const currentSemester = semester.value;
            semester.replaceChildren(...allowedSemesters.map((value) => new Option(value, value)));
            if (allowedSemesters.includes(currentSemester)) {
                semester.value = currentSemester;
            } else {
                semester.value = allowedSemesters[0] ?? '';
            }
            classSelect.value = '';
            subjectSelect.value = '';
        });
        classSelect?.addEventListener('change', () => { subjectSelect.value = ''; });
    }

    const questionTabs = [...document.querySelectorAll('[data-question-tab]')];
    if (questionTabs.length) {
        const activateTab = (name) => {
            questionTabs.forEach((tab) => {
                const isActive = tab.dataset.questionTab === name;
                tab.setAttribute('aria-selected', String(isActive));
                tab.tabIndex = isActive ? 0 : -1;
                tab.classList.toggle('border-blue-600', isActive);
                tab.classList.toggle('bg-blue-600', isActive);
                tab.classList.toggle('text-white', isActive);
                tab.classList.toggle('border-slate-200', !isActive);
                tab.classList.toggle('text-slate-600', !isActive);
                const panel = document.querySelector(`[data-question-panel="${tab.dataset.questionTab}"]`);
                if (panel) panel.hidden = !isActive;
            });
        };
        questionTabs.forEach((tab, index) => {
            tab.addEventListener('click', () => activateTab(tab.dataset.questionTab));
            tab.addEventListener('keydown', (event) => {
                if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
                event.preventDefault();
                const nextIndex = event.key === 'Home' ? 0
                    : event.key === 'End' ? questionTabs.length - 1
                        : (index + (event.key === 'ArrowRight' ? 1 : questionTabs.length - 1)) % questionTabs.length;
                questionTabs[nextIndex].focus();
                activateTab(questionTabs[nextIndex].dataset.questionTab);
            });
        });
        const initialTab = @json($errors->has('questions_file') || $errors->has('chapter_ids') ? 'ai' : ($errors->has('file_upload') ? 'upload' : 'manual'));
        activateTab(initialTab);
    }

    const manualQuestionForm = document.querySelector('[data-manual-question-form]');
    if (manualQuestionForm) {
        const typeSelect = manualQuestionForm.querySelector('[data-manual-question-type]');
        const typeSections = [...manualQuestionForm.querySelectorAll('[data-manual-type-section]')];
        const updateQuestionFields = () => {
            const type = typeSelect.value;
            typeSections.forEach((section) => {
                const visible = section.dataset.manualTypeSection === type
                    || (section.dataset.manualTypeSection === 'options' && ['pg', 'pg_banyak'].includes(type));
                section.hidden = !visible;
                section.querySelectorAll('input, select, textarea').forEach((input) => { input.disabled = !visible; });
            });
        };
        typeSelect.addEventListener('change', updateQuestionFields);
        updateQuestionFields();

        const addRow = (container, kind) => {
            if (container.querySelectorAll('[data-question-row]').length >= 20) return;
            const rowIndexes = [...container.querySelectorAll('[data-row-index]')].map((row) => Number(row.dataset.rowIndex));
            const index = Math.max(-1, ...rowIndexes) + 1;
            const row = document.createElement('div');
            row.className = kind === 'table'
                ? 'grid gap-2 rounded-xl border border-slate-200 bg-slate-50 p-3 sm:grid-cols-[1fr_12rem_auto]'
                : 'grid gap-2 rounded-xl border border-slate-200 bg-slate-50 p-3 sm:grid-cols-[1fr_1fr_auto]';
            row.dataset.questionRow = '';
            row.dataset.rowIndex = String(index);

            const addField = (fieldName, labelText, placeholder, isSelect) => {
                const label = document.createElement('label');
                label.className = 'block';
                const title = document.createElement('span');
                title.className = 'sp-form-label';
                title.textContent = labelText;
                label.append(title);
                const control = document.createElement(isSelect ? 'select' : 'input');
                control.name = fieldName;
                control.className = 'sp-form-control px-3';
                if (isSelect) {
                    control.add(new Option('Pilih kunci', ''));
                    ['Benar', 'Salah', 'Ya', 'Tidak'].forEach((answer) => control.add(new Option(answer, answer)));
                } else {
                    control.type = 'text';
                    control.maxLength = kind === 'table' ? 2000 : 500;
                    control.placeholder = placeholder;
                }
                label.append(control);
                row.append(label);
            };

            if (kind === 'table') {
                addField(`table_rows[${index}][statement]`, `Pernyataan ${index + 1}`, 'Tuliskan pernyataan', false);
                addField(`table_rows[${index}][answer]`, 'Kunci jawaban', '', true);
            } else {
                addField(`matching_pairs[${index}][prompt]`, `Teks soal / istilah ${index + 1}`, 'Tuliskan soal atau istilah', false);
                addField(`matching_pairs[${index}][answer]`, 'Kunci pasangan', 'Tuliskan pasangan yang benar', false);
            }

            const remove = document.createElement('button');
            remove.type = 'button';
            remove.className = 'sp-btn-secondary self-end px-3';
            remove.setAttribute('aria-label', kind === 'table' ? 'Hapus pernyataan' : 'Hapus pasangan');
            remove.dataset.removeQuestionRow = '';
            const icon = document.createElement('i');
            icon.className = 'bi bi-trash';
            icon.setAttribute('aria-hidden', 'true');
            remove.append(icon);
            row.append(remove);
            container.append(row);
        };

        manualQuestionForm.querySelector('[data-add-table-row]')?.addEventListener('click', () => {
            addRow(manualQuestionForm.querySelector('[data-table-rows]'), 'table');
        });
        manualQuestionForm.querySelector('[data-add-matching-row]')?.addEventListener('click', () => {
            addRow(manualQuestionForm.querySelector('[data-matching-rows]'), 'matching');
        });
        manualQuestionForm.addEventListener('click', (event) => {
            const removeButton = event.target.closest('[data-remove-question-row]');
            if (removeButton) removeButton.closest('[data-question-row]').remove();
        });
    }

    const importForm = document.querySelector('[data-question-import]');
    if (importForm) {
        const buildButton = importForm.querySelector('[data-build-prompt]');
        const promptOutput = importForm.querySelector('[data-prompt-output]');
        const promptStatus = importForm.querySelector('[data-prompt-status]');
        buildButton.addEventListener('click', async () => {
            const selectedChapters = [...importForm.querySelectorAll('[name="chapter_ids[]"]:checked')];
            if (selectedChapters.length === 0 || selectedChapters.length > 12) {
                promptStatus.textContent = 'Pilih antara 1 sampai 12 BAB terlebih dahulu.';
                return;
            }
            const count = Number(importForm.querySelector('[data-question-count]').value);
            if (!Number.isInteger(count) || count < 1 || count > 30) {
                promptStatus.textContent = 'Jumlah soal harus antara 1 sampai 30.';
                return;
            }
            const typeValue = importForm.querySelector('[data-question-type]').value;
            const difficulty = importForm.querySelector('[data-question-difficulty]').selectedOptions[0].textContent.trim();
            const chapters = selectedChapters.map((checkbox) => ({
                bab_ke: Number(checkbox.dataset.chapterNumber),
                nama_bab: checkbox.dataset.chapterName,
                materi: checkbox.dataset.chapterTopics.split(' · ').filter(Boolean),
            }));
            const questionShape = typeValue === 'pg'
                ? { bab_ke: 1, pertanyaan: 'Teks soal', opsi: { a: 'Pilihan A', b: 'Pilihan B', c: 'Pilihan C', d: 'Pilihan D' }, jawaban: 'a' }
                : { bab_ke: 1, pertanyaan: 'Teks soal', opsi: null, jawaban: 'Pedoman jawaban' };
            const prompt = [
                'Bertindaklah sebagai penyusun soal pendidikan yang cermat. Buat tepat ' + count + ' soal berbahasa Indonesia.',
                'Konteks: mata pelajaran ' + importForm.dataset.subject + ', kelas tingkat ' + importForm.dataset.grade
                    + ', tahun pelajaran ' + importForm.dataset.year + ', semester ' + importForm.dataset.semester
                    + ', ujian ' + importForm.dataset.exam + ', bentuk ' + (typeValue === 'pg' ? 'pilihan ganda' : 'esai')
                    + ', kesulitan ' + difficulty + '.',
                'Gunakan hanya materi BAB yang diberikan. Sebarkan soal secara wajar pada BAB terpilih. Jangan menciptakan nomor BAB lain.',
                'BAB dan materi yang diizinkan:',
                JSON.stringify(chapters, null, 2),
                typeValue === 'pg'
                    ? 'Untuk setiap soal, buat empat opsi A-D yang masuk akal dan tepat satu kunci jawaban. Isi jawaban dengan huruf kecil a, b, c, atau d.'
                    : 'Untuk setiap soal esai, isi jawaban dengan pedoman jawaban singkat yang benar dan isi opsi dengan null.',
                'Keluarkan hanya JSON valid tanpa markdown, tanpa blok kode, tanpa komentar, tanpa teks tambahan, dan tanpa properti lain.',
                'Struktur wajib: objek dengan satu properti "questions" yang berisi array tepat ' + count + ' objek.',
                'Setiap objek wajib memiliki tepat properti bab_ke (integer dari BAB terpilih), pertanyaan (string), opsi, dan jawaban (string).',
                'Contoh bentuk satu soal: ' + JSON.stringify(questionShape),
            ].join('\n\n');
            promptOutput.value = prompt;
            promptOutput.focus();
            promptOutput.select();
            try {
                await navigator.clipboard.writeText(prompt);
                promptStatus.textContent = 'Prompt berhasil disalin. Tempelkan ke Gemini atau layanan AI pilihan.';
            } catch {
                const copied = typeof document.execCommand === 'function' && document.execCommand('copy');
                promptStatus.textContent = copied
                    ? 'Prompt berhasil disalin. Tempelkan ke Gemini atau layanan AI pilihan.'
                    : 'Prompt siap disalin. Salin teks pada kotak prompt secara manual.';
            }
        });
    }
});
</script>
@endpush
@endsection