@extends('layouts.cbt')
@section('page-title', 'Tambah Soal')
@section('sidebar')@include('components.guru-sidebar')@endsection
@section('content')
<div class="card-sdn max-w-3xl" x-data="questionForm()">
    <form method="POST" action="{{ route('guru.questions.store', $bank) }}" enctype="multipart/form-data" class="space-y-4">
        @csrf
        <div class="grid grid-cols-3 gap-4">
            <div><label class="form-label">Tipe</label>
                <select name="type" x-model="type" class="form-input">
                    <option value="pg">Pilihan Ganda</option>
                    <option value="pg_kompleks">PG Kompleks (Multi Jawaban)</option>
                    <option value="true_false">Benar/Salah</option>
                    <option value="essay">Esai</option>
                </select>
            </div>
            <div><label class="form-label">Kesulitan</label><select name="difficulty" class="form-input"><option value="mudah">Mudah</option><option value="sedang" selected>Sedang</option><option value="sulit">Sulit</option></select></div>
            <div><label class="form-label">Poin</label><input name="points" type="number" class="form-input" value="10" required></div>
        </div>
        <div><label class="form-label">Pertanyaan</label><textarea name="content" class="form-input" rows="3" required></textarea></div>
        <div><label class="form-label">Gambar (opsional)</label><input type="file" name="image" accept="image/*" class="form-input"></div>
        <div><label class="form-label">Pembahasan</label><textarea name="explanation" class="form-input" rows="2"></textarea></div>

        <template x-if="type === 'pg'">
            <div class="space-y-3 border-2 border-dashed border-orange-200 rounded-xl p-4 bg-orange-50/30">
                <div class="flex justify-between items-center">
                    <label class="form-label mb-0">Opsi Jawaban (min 2, max 10)</label>
                    <button type="button" @click="addOption()" x-show="options.length < 10" class="text-sm font-bold text-sdn-orange hover:underline">+ Tambah Opsi</button>
                </div>
                <p class="text-xs text-gray-500">Pilih radio sebagai jawaban benar. Label opsional (default A, B, C...).</p>
                <template x-for="(opt, i) in options" :key="i">
                    <div class="flex gap-2 items-center">
                        <input type="radio" name="correct_option" :value="i" :checked="i === correctOption" @change="correctOption = i" class="shrink-0">
                        <input type="text" :name="'options['+i+'][label]'" x-model="opt.label" class="form-input w-14 text-center shrink-0" :placeholder="String.fromCharCode(65+i)" maxlength="5">
                        <input type="text" :name="'options['+i+'][content]'" x-model="opt.content" class="form-input flex-1" placeholder="Teks opsi jawaban" required>
                        <button type="button" @click="removeOption(i)" x-show="options.length > 2" class="text-red-500 font-bold px-2 shrink-0" title="Hapus opsi">&times;</button>
                    </div>
                </template>
            </div>
        </template>

        <template x-if="type === 'pg_kompleks'">
            <div class="space-y-3 border-2 border-dashed border-yellow-200 rounded-xl p-4 bg-yellow-50/30">
                <div class="flex justify-between items-center">
                    <label class="form-label mb-0">Opsi Jawaban (min 2, max 10)</label>
                    <button type="button" @click="addOption()" x-show="options.length < 10" class="text-sm font-bold text-sdn-orange hover:underline">+ Tambah Opsi</button>
                </div>
                <p class="text-xs text-gray-500">Centang minimal 2 opsi sebagai jawaban benar. Siswa dapat memilih lebih dari satu jawaban.</p>
                <template x-for="(opt, i) in options" :key="i">
                    <div class="flex gap-2 items-center">
                        <input type="checkbox" name="correct_options[]" :value="i" x-model="correctOptions" class="shrink-0">
                        <input type="text" :name="'options['+i+'][label]'" x-model="opt.label" class="form-input w-14 text-center shrink-0" :placeholder="String.fromCharCode(65+i)" maxlength="5">
                        <input type="text" :name="'options['+i+'][content]'" x-model="opt.content" class="form-input flex-1" placeholder="Teks opsi jawaban" required>
                        <button type="button" @click="removeOption(i)" x-show="options.length > 2" class="text-red-500 font-bold px-2 shrink-0" title="Hapus opsi">&times;</button>
                    </div>
                </template>
            </div>
        </template>

        <template x-if="type === 'true_false'">
            <div><label class="form-label">Jawaban Benar</label>
                <select name="correct_option" class="form-input"><option value="0">Benar</option><option value="1">Salah</option></select>
            </div>
        </template>

        <button class="btn-sdn-primary">Simpan Soal</button>
    </form>
</div>

@push('scripts')
<script>
function questionForm() {
    return {
        type: 'pg',
        correctOption: 0,
        correctOptions: [0, 1],
        options: [
            { label: 'A', content: '' },
            { label: 'B', content: '' },
            { label: 'C', content: '' },
            { label: 'D', content: '' },
        ],
        addOption() {
            if (this.options.length >= 10) return;
            const idx = this.options.length;
            this.options.push({ label: String.fromCharCode(65 + idx), content: '' });
        },
        removeOption(i) {
            if (this.options.length <= 2) return;
            this.options.splice(i, 1);
            if (this.correctOption >= this.options.length) {
                this.correctOption = this.options.length - 1;
            }
            this.correctOptions = this.correctOptions
                .filter(idx => idx !== i)
                .map(idx => (idx > i ? idx - 1 : idx));
        }
    }
}
</script>
@endpush
@endsection