@extends('layouts.cbt')
@section('page-title', 'Edit Soal')
@section('sidebar')@include('components.guru-sidebar')@endsection
@section('content')
@php
    $correctIdx = $question->options->values()->search(fn($o) => $o->is_correct);
    $correctIndices = $question->options->values()->filter(fn($o) => $o->is_correct)->keys()->values()->all();
@endphp
<div class="card-sdn max-w-3xl" x-data="questionEditForm(@js($question->options->map(fn($o) => ['label' => $o->label, 'content' => $o->content])->values()), {{ $correctIdx === false ? 0 : $correctIdx }}, @js($correctIndices))">
    <form method="POST" action="{{ route('guru.questions.update', $question) }}" enctype="multipart/form-data" class="space-y-4">
        @csrf @method('PUT')
        <div class="grid grid-cols-2 gap-4">
            <div><label class="form-label">Tipe</label><input class="form-input bg-gray-100" value="{{ $question->type->label() }}" disabled></div>
            <div><label class="form-label">Poin</label><input name="points" type="number" class="form-input" value="{{ $question->points }}" required></div>
            <div><label class="form-label">Kesulitan</label><select name="difficulty" class="form-input"><option value="mudah" @selected($question->difficulty=='mudah')>Mudah</option><option value="sedang" @selected($question->difficulty=='sedang')>Sedang</option><option value="sulit" @selected($question->difficulty=='sulit')>Sulit</option></select></div>
        </div>
        <div><label class="form-label">Pertanyaan</label><textarea name="content" class="form-input" rows="3" required>{{ $question->content }}</textarea></div>
        <div><label class="form-label">Pembahasan</label><textarea name="explanation" class="form-input" rows="2">{{ $question->explanation }}</textarea></div>

        @if($question->type->value === '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</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>
            <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="correctOption === i" @change="correctOption = i">
                    <input type="text" :name="'options['+i+'][label]'" x-model="opt.label" class="form-input w-14 text-center" maxlength="5">
                    <input type="text" :name="'options['+i+'][content]'" x-model="opt.content" class="form-input flex-1" required>
                    <button type="button" @click="removeOption(i)" x-show="options.length > 2" class="text-red-500 font-bold px-2">&times;</button>
                </div>
            </template>
        </div>
        @elseif($question->type->value === '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</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.</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">
                    <input type="text" :name="'options['+i+'][label]'" x-model="opt.label" class="form-input w-14 text-center" maxlength="5">
                    <input type="text" :name="'options['+i+'][content]'" x-model="opt.content" class="form-input flex-1" required>
                    <button type="button" @click="removeOption(i)" x-show="options.length > 2" class="text-red-500 font-bold px-2">&times;</button>
                </div>
            </template>
        </div>
        @elseif($question->type->value === 'true_false')
        <div class="space-y-2">
            <label class="form-label">Jawaban Benar</label>
            @foreach($question->options as $i => $opt)
            <div class="flex gap-2 items-center">
                <input type="radio" name="correct_option" value="{{ $i }}" @checked($opt->is_correct)>
                <input name="options[{{ $i }}][content]" class="form-input" value="{{ $opt->content }}" readonly>
                <input type="hidden" name="options[{{ $i }}][label]" value="{{ $opt->label }}">
            </div>
            @endforeach
        </div>
        @endif

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

@push('scripts')
<script>
function questionEditForm(initialOptions, initialCorrect, initialCorrectOptions = [0, 1]) {
    return {
        options: initialOptions.length ? initialOptions : [{ label: 'A', content: '' }, { label: 'B', content: '' }],
        correctOption: initialCorrect,
        correctOptions: initialCorrectOptions.length ? initialCorrectOptions : [0, 1],
        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