@extends('layouts.teacher')

@section('title', 'Edit Ujian')
@section('header_title', 'Edit Ujian')

@section('content')
<div class="max-w-4xl mx-auto">
    {{-- BACK BUTTON --}}
    <a href="{{ route('guru.ujian.index') }}"
       class="inline-flex items-center text-gray-500 hover:text-indigo-600 mb-6 transition">
        <i class="ph ph-arrow-left mr-2"></i> Kembali ke Daftar Ujian
    </a>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">

        @if ($errors->any())
        <div class="bg-red-100 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
            <ul class="text-sm list-disc list-inside">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        <form method="POST" action="{{ route('guru.ujian.update', $quiz->id) }}">
            @csrf
            @method('PATCH')

            <div class="grid grid-cols-1 gap-6">

                {{-- INFO MODUL & KELAS (READ ONLY) --}}
                <div class="bg-gray-50 border rounded-lg p-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <p class="text-sm text-gray-500">Modul</p>
                            <p class="font-semibold text-gray-800">{{ $msc->module->title }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500">Kelas</p>
                            <p class="font-semibold text-gray-800">{{ $msc->studentClass->name }}</p>
                        </div>
                    </div>
                </div>

                {{-- SECTION & LESSON --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {{-- SECTION --}}
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Bab / Section
                        </label>
                        <select name="section_id" id="section_id"
                                onchange="loadLessons(this.value)"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none">
                            <option value="">Pilih Bab (Opsional)</option>
                            @foreach($sections as $section)
                                <option value="{{ $section->id }}" 
                                    {{ $quiz->section_id == $section->id ? 'selected' : '' }}>
                                    {{ $section->title }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- LESSON --}}
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Materi / Lesson
                        </label>
                        <select name="lesson_id" id="lesson_id"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none">
                            <option value="">Pilih Materi (Opsional)</option>
                            @foreach($lessons as $lesson)
                                <option value="{{ $lesson->id }}"
                                    {{ $quiz->lesson_id == $lesson->id ? 'selected' : '' }}>
                                    {{ $lesson->title }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- JUDUL --}}
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Judul Ujian <span class="text-red-500">*</span>
                    </label>
                    <input type="text"
                           name="title"
                           value="{{ old('title', $quiz->title) }}"
                           required
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
                           placeholder="Misal: Ujian Akhir Semester">
                </div>

                {{-- DURASI --}}
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Durasi (menit) <span class="text-red-500">*</span>
                    </label>
                    <input type="number"
                           name="duration"
                           value="{{ old('duration', $quiz->duration) }}"
                           required
                           min="1"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
                           placeholder="60">
                </div>

                {{-- JADWAL UJIAN --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {{-- WAKTU DIBUKA --}}
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Waktu Dibuka
                        </label>
                        <div class="flex gap-2">
                            <input type="datetime-local"
                                   name="available_at"
                                   id="available_at"
                                   value="{{ old('available_at', $quiz->available_at ? date('Y-m-d\TH:i', strtotime($quiz->available_at)) : '') }}"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none text-gray-600">
                            <button type="button"
                                    onclick="clearDate('available_at')"
                                    class="px-3 py-2 text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg border border-gray-300 font-medium whitespace-nowrap">
                                Clear
                            </button>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">
                            Biarkan kosong jika ujian langsung tersedia.
                        </p>
                    </div>

                    {{-- DEADLINE --}}
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Batas Waktu / Deadline
                        </label>
                        <div class="flex gap-2">
                            <input type="datetime-local"
                                   name="deadline"
                                   id="deadline"
                                   value="{{ old('deadline', $quiz->deadline ? date('Y-m-d\TH:i', strtotime($quiz->deadline)) : '') }}"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none text-gray-600">
                            <button type="button"
                                    onclick="clearDate('deadline')"
                                    class="px-3 py-2 text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg border border-gray-300 font-medium whitespace-nowrap">
                                Clear
                            </button>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">
                            Batas akhir siswa bisa mengerjakan.
                        </p>
                    </div>
                </div>

                {{-- STATUS AKTIF --}}
                <div class="flex items-center space-x-3 bg-indigo-50 p-4 rounded-lg">
                    <input type="checkbox"
                           name="is_active"
                           value="1"
                           {{ old('is_active', $quiz->is_active) ? 'checked' : '' }}
                           class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 w-5 h-5">
                    <div>
                        <label class="text-sm font-bold text-gray-700">
                            Ujian Aktif
                        </label>
                        <p class="text-xs text-gray-500">
                            Siswa dapat melihat dan mengerjakan ujian ini
                        </p>
                    </div>
                </div>

            </div>

            {{-- ACTION BUTTONS --}}
            <div class="mt-8 pt-6 border-t border-gray-100 flex justify-between items-center">
                <a href="{{ route('guru.ujian.show', $quiz->id) }}"
                   class="text-indigo-600 hover:text-indigo-800 font-medium text-sm">
                    <i class="ph ph-arrow-right mr-1"></i> Edit Soal Ujian
                </a>
                
                <div class="flex space-x-3">
                    <a href="{{ route('guru.ujian.index') }}"
                       class="px-6 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 font-medium transition">
                        Batal
                    </a>
                    <button type="submit"
                            class="px-6 py-2.5 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 font-medium shadow-lg shadow-indigo-200 transition">
                        Perbarui Ujian
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
function clearDate(inputId) {
    document.getElementById(inputId).value = '';
}

// AJAX untuk load lessons ketika section berubah
function loadLessons(sectionId) {
    if (!sectionId) {
        document.getElementById('lesson_id').innerHTML = '<option value="">Pilih Materi (Opsional)</option>';
        return;
    }

    // Ambil lessons dari data yang sudah ada atau via AJAX
    // Untuk simplicity, kita reload page dengan parameter
    const currentUrl = new URL(window.location.href);
    currentUrl.searchParams.set('section_id', sectionId);
    window.location.href = currentUrl.toString();
}
</script>
@endsection