@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; }
</style>

<div class="max-w-5xl mx-auto px-4 py-8" x-data="{ questionType: '{{ old('type', $question->type) }}' }" @update-type.window="questionType = $event.detail">
    <div class="mb-6 flex items-center space-x-3">
        <a href="{{ route('admin.exams.questions') }}" 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">Departemen</label>
                    <select name="department_id" class="select2 w-full text-sm">
                        <option value="">-- Semua Departemen --</option>
                        @foreach($departments as $dept)
                            <option value="{{ $dept->id }}" {{ old('department_id', $question->department_id) == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Posisi / Jabatan</label>
                    <select name="position_id" class="select2 w-full text-sm">
                        <option value="">-- 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>
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Materi SOP / Modul <span class="text-red-500">*</span></label>
                    <select name="training_matrix_id" class="select2 w-full text-sm" required>
                        <option value="">-- Pilih Materi Pembelajaran --</option>
                        @foreach($matrices as $matrix)
                            <option value="{{ $matrix->id }}" {{ old('training_matrix_id', $question->training_matrix_id) == $matrix->id ? 'selected' : '' }}>{{ $matrix->title }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="lg:col-span-2">
                    <label class="block text-sm font-bold text-slate-700 mb-2">Tipe Soal <span class="text-red-500">*</span></label>
                    <select name="type" class="select2 w-full text-sm" required>
                        <option value="single" {{ $question->type == 'single' ? 'selected' : '' }}>Single Choice (Satu Jawaban Benar)</option>
                        <option value="multiple" {{ $question->type == 'multiple' ? 'selected' : '' }}>Multiple Choice (Banyak Jawaban Benar)</option>
                        <option value="true_false" {{ $question->type == 'true_false' ? 'selected' : '' }}>True / False (Benar / Salah)</option>
                        <option value="descriptive" {{ $question->type == 'descriptive' ? 'selected' : '' }}>Descriptive (Esai / Uraian)</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Tingkat Kesulitan <span class="text-red-500">*</span></label>
                    <select name="level" class="select2 w-full text-sm" required>
                        <option value="mudah" {{ $question->level == 'mudah' ? 'selected' : '' }}>Mudah (Easy)</option>
                        <option value="sedang" {{ $question->level == 'sedang' ? 'selected' : '' }}>Sedang (Medium)</option>
                        <option value="sulit" {{ $question->level == 'sulit' ? 'selected' : '' }}>Sulit (Hard)</option>
                    </select>
                </div>
            </div>

            <div class="border-t border-slate-100 pt-6">
                <label class="block text-sm font-bold text-slate-700 mb-2">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 border-slate-200 rounded-xl text-sm focus:border-blue-500">{{ old('question_text', $question->question_text) }}</textarea>
            </div>

            <div class="bg-amber-50 border-l-4 border-amber-500 p-4 mt-4">
                <p class="text-sm text-amber-800 font-semibold">Tipe Soal diubah?</p>
                <p class="text-xs text-amber-700 mt-1">Jika Anda mengubah tipe soal, pastikan Anda mengisi kembali opsi jawabannya di bawah ini karena format jawabannya berubah.</p>
            </div>

            <div class="pt-6 flex justify-end space-x-3 border-t border-slate-100 mt-8">
                <a href="{{ route('admin.exams.questions') }}" class="px-5 py-2.5 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-xl transition-colors">Batal</a>
                <button type="submit" class="px-5 py-2.5 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-xl shadow-md transition-all">Perbarui Soal</button>
            </div>
        </form>
    </div>
</div>

<script>
    $(document).ready(function() {
        $('.select2').select2({ width: '100%' });
        
        $('select[name="type"]').on('change', function() {
            window.dispatchEvent(new CustomEvent('update-type', { detail: $(this).val() }));
        });
    });
</script>
@endsection