@extends('layouts.app')

@section('content')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<style>
    .select2-container .select2-selection--single { height: 42px; border-radius: 0.75rem; border-color: #e2e8f0; background-color: #f8fafc; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; font-size: 0.875rem; color: #334155; padding-left: 1rem; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 10px; }
    /* Menambahkan warna border merah jika error */
    .has-error .select2-selection { border-color: #ef4444 !important; background-color: #fef2f2 !important; }
</style>

<div id="exam-edit-container" class="max-w-5xl mx-auto px-4 py-8" x-data="{ questionType: '{{ old('question_type', $question->question_type ?? '') }}' }">
    <div class="mb-6 flex items-center space-x-3">
        <a href="{{ route('admin.question-bank.index') }}" class="text-slate-400 hover:text-blue-600 transition-colors">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
        </a>
        <h2 class="text-2xl font-bold text-slate-800 tracking-tight">Edit Soal: #{{ $question->id }}</h2>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <form action="{{ url('admin/exams/questions/'.$question->id) }}" method="POST" class="p-6 sm:p-8 space-y-6">
            @csrf
            @method('PUT')
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Subject / Materi <span class="text-red-500">*</span></label>
                    <select name="subject_id" class="select2 w-full text-sm @error('subject_id') has-error @enderror" required>
                        <option value="">-- Pilih Judul Materi --</option>
                        @foreach($subjects as $subj)
                            <option value="{{ $subj->id }}" {{ old('subject_id', $question->subject_id) == $subj->id ? 'selected' : '' }}>{{ $subj->name }}</option>
                        @endforeach
                    </select>
                    @error('subject_id') <p class="text-xs text-red-500 mt-1.5 font-medium">{{ $message }}</p> @enderror
                </div>
                
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Departemen</label>
                    <select name="department_id" class="select2 w-full text-sm @error('department_id') has-error @enderror">
                        <option value="">-- Global (Semua Dept) --</option>
                        @foreach($departments as $dept)
                            <option value="{{ $dept->id }}" {{ old('department_id', $question->department_id) == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                        @endforeach
                    </select>
                    @error('department_id') <p class="text-xs text-red-500 mt-1.5 font-medium">{{ $message }}</p> @enderror
                </div>
                
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Jabatan / Posisi</label>
                    <select name="position_id" class="select2 w-full text-sm @error('position_id') has-error @enderror">
                        <option value="">-- Global (Semua Jabatan) --</option>
                        @foreach($positions as $pos)
                            <option value="{{ $pos->id }}" {{ old('position_id', $question->position_id) == $pos->id ? 'selected' : '' }}>{{ $pos->name }}</option>
                        @endforeach
                    </select>
                    @error('position_id') <p class="text-xs text-red-500 mt-1.5 font-medium">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Tipe Soal <span class="text-red-500">*</span></label>
                    <select name="question_type" class="select2 w-full text-sm @error('question_type') has-error @enderror" required>
                        <option value="">-- Pilih Tipe --</option>
                        <option value="single" {{ old('question_type', $question->question_type) == 'single' ? 'selected' : '' }}>Single Choice (1 Kunci)</option>
                        <option value="multiple" {{ old('question_type', $question->question_type) == 'multiple' ? 'selected' : '' }}>Multiple Choice (Multi Kunci)</option>
                        <option value="true_false" {{ old('question_type', $question->question_type) == 'true_false' ? 'selected' : '' }}>True / False</option>
                        <option value="descriptive" {{ old('question_type', $question->question_type) == 'descriptive' ? 'selected' : '' }}>Descriptive (Esai)</option>
                    </select>
                    @error('question_type') <p class="text-xs text-red-500 mt-1.5 font-medium">{{ $message }}</p> @enderror
                </div>
                
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Level <span class="text-red-500">*</span></label>
                    <select name="question_level" class="select2 w-full text-sm @error('question_level') has-error @enderror" required>
                        <option value="mudah" {{ old('question_level', $question->question_level) == 'mudah' ? 'selected' : '' }}>Mudah</option>
                        <option value="sedang" {{ old('question_level', $question->question_level) == 'sedang' ? 'selected' : '' }}>Sedang</option>
                        <option value="sulit" {{ old('question_level', $question->question_level) == 'sulit' ? 'selected' : '' }}>Sulit</option>
                    </select>
                    @error('question_level') <p class="text-xs text-red-500 mt-1.5 font-medium">{{ $message }}</p> @enderror
                </div>
                
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Bobot Nilai (Score) <span class="text-red-500">*</span></label>
                    <input type="number" name="score_weight" value="{{ old('score_weight', $question->score_weight ?? 1) }}" class="w-full px-3 py-2 bg-slate-50 border @error('score_weight') border-red-500 bg-red-50 @else border-slate-200 @enderror rounded-xl text-sm focus:ring-blue-500" min="1" required>
                    @error('score_weight') <p class="text-xs text-red-500 mt-1.5 font-medium">{{ $message }}</p> @enderror
                </div>

                <div class="grid grid-cols-2 gap-3 lg:col-span-3">
                    <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2">Passing Grade</label>
                        <input type="number" name="passing_grade" value="{{ old('passing_grade', $question->passing_grade ?? 0) }}" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-blue-500" min="0" max="100">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2">Durasi (Detik)</label>
                        <input type="number" name="duration" value="{{ old('duration', $question->duration ?? 0) }}" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-blue-500">
                    </div>
                </div>
            </div>

            <div class="border-t border-slate-100 pt-6">
                <label class="block text-sm font-bold text-slate-700 mb-2">Teks Pertanyaan <span class="text-red-500">*</span></label>
                <textarea name="question_text" rows="4" required class="w-full px-4 py-3 bg-slate-50 border @error('question_text') border-red-500 bg-red-50 @else border-slate-200 @enderror rounded-xl text-sm focus:bg-white focus:ring-2 focus:ring-blue-500/20" placeholder="Tuliskan pertanyaan di sini...">{{ old('question_text', $question->question_text) }}</textarea>
                @error('question_text') <p class="text-xs text-red-500 mt-1.5 font-medium">{{ $message }}</p> @enderror
            </div>

            <div class="border-t border-slate-100 pt-6 bg-slate-50/50 p-6 rounded-xl mt-6 border" x-show="questionType !== ''" x-cloak>
                <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4">Pengaturan Opsi & Kunci Jawaban</h3>
                
                <div x-show="questionType === 'single'" class="space-y-3">
                    @foreach(['A' => 'option_a', 'B' => 'option_b', 'C' => 'option_c', 'D' => 'option_d', 'E' => 'option_e'] as $key => $col)
                    <div class="flex items-center gap-3">
                        <input type="radio" name="correct_answer" value="{{ $key }}" {{ old('correct_answer', $question->correct_answer) == $key ? 'checked' : '' }} class="w-5 h-5 text-blue-600 border-slate-300">
                        <span class="font-bold text-slate-500">{{ $key }}.</span>
                        <input type="text" name="{{ $col }}" value="{{ old($col, $question->$col) }}" placeholder="Opsi {{ $key }}" class="flex-1 px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm focus:ring-blue-500">
                    </div>
                    @endforeach
                    <p class="text-xs text-slate-500 mt-2">* Klik radio button (bulatan) untuk menandai kunci jawaban yang benar.</p>
                </div>

                <div x-show="questionType === 'multiple'" class="space-y-3">
                    @php 
                        $correctAnswers = is_array($question->correct_answer) ? $question->correct_answer : json_decode($question->correct_answer, true) ?? explode(',', $question->correct_answer ?? '');
                    @endphp
                    
                    @foreach(['A' => 'option_a', 'B' => 'option_b', 'C' => 'option_c', 'D' => 'option_d', 'E' => 'option_e'] as $key => $col)
                    <div class="flex items-center gap-3">
                        <input type="checkbox" name="correct_answer[]" value="{{ $key }}" {{ in_array($key, (array) old('correct_answer', $correctAnswers)) ? 'checked' : '' }} class="w-5 h-5 text-blue-600 border-slate-300 rounded">
                        <span class="font-bold text-slate-500">{{ $key }}.</span>
                        <input type="text" name="{{ $col }}" value="{{ old($col, $question->$col) }}" placeholder="Opsi {{ $key }}" class="flex-1 px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm focus:ring-blue-500">
                    </div>
                    @endforeach
                    <p class="text-xs text-slate-500 mt-2">* Centang kotak (checkbox) untuk menandai lebih dari satu kunci jawaban.</p>
                </div>

                <div x-show="questionType === 'true_false'" class="flex gap-4">
                    <label class="flex items-center gap-3 p-4 bg-white border border-slate-200 rounded-xl cursor-pointer hover:border-emerald-500 hover:bg-emerald-50 transition-colors w-48">
                        <input type="radio" name="correct_answer" value="True" {{ old('correct_answer', $question->correct_answer) == 'True' ? 'checked' : '' }} class="w-5 h-5 text-emerald-600 border-slate-300">
                        <span class="font-bold text-slate-700">True (Benar)</span>
                    </label>
                    <label class="flex items-center gap-3 p-4 bg-white border border-slate-200 rounded-xl cursor-pointer hover:border-red-500 hover:bg-red-50 transition-colors w-48">
                        <input type="radio" name="correct_answer" value="False" {{ old('correct_answer', $question->correct_answer) == 'False' ? 'checked' : '' }} class="w-5 h-5 text-red-600 border-slate-300">
                        <span class="font-bold text-slate-700">False (Salah)</span>
                    </label>
                </div>

                <div x-show="questionType === 'descriptive'">
                    <label class="block text-sm font-bold text-slate-700 mb-2">Keyword Jawaban (Pisahkan dengan koma)</label>
                    <textarea name="essay_keywords" rows="3" class="w-full px-4 py-3 bg-white border @error('essay_keywords') border-red-500 bg-red-50 @else border-slate-200 @enderror rounded-xl text-sm focus:ring-blue-500" placeholder="Contoh: mesin washing, suhu 80 derajat, steril">{{ old('essay_keywords', $question->essay_keywords) }}</textarea>
                    @error('essay_keywords') <p class="text-xs text-red-500 mt-1.5 font-medium">{{ $message }}</p> @enderror
                    <p class="text-[11px] text-slate-500 mt-2">* Sistem akan mendeteksi kata kunci ini pada teks jawaban peserta untuk memberikan nilai hitungan awal secara otomatis.</p>
                </div>
            </div>

            <div class="pt-6 flex justify-end space-x-3 border-t border-slate-100">
                <a href="{{ route('admin.question-bank.index') }}" class="px-5 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-xl transition-colors">Batal</a>
                <button type="submit" class="px-6 py-2 text-sm font-bold text-white bg-blue-600 hover:bg-blue-700 rounded-xl shadow-sm transition-colors">Simpan Perubahan</button>
            </div>
        </form>
    </div>
</div>

<script>
    $(document).ready(function() {
        // Inisialisasi Select2
        $('.select2').select2({ width: '100%' });
        
        // Memastikan AlpineJS selalu selaras ketika Select2 diubah
        $('select[name="question_type"]').on('change', function() {
            let container = document.getElementById('exam-edit-container');
            if(container) {
                Alpine.$data(container).questionType = $(this).val();
            }
        });
    });
</script>
@endsection