@extends('layouts.teacher')
@section('title', 'Buat Ujian')
@section('header_title', 'Buat Ujian Baru')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">

        <form method="POST" action="{{ route('guru.ujian.store') }}" onsubmit="return validateExamForm()">
        @csrf

        {{-- MODULE dan KELAS --}}
        <label class="block text-sm font-medium mb-1">
            Modul & Kelas
        </label>

            <select name="modules_student_class_id"
                onchange="location='?msc_id='+this.value"
                class="w-full border rounded-lg px-3 py-2"
                required>
            <option value="">-- Pilih Modul & Kelas --</option>

            @foreach ($mscs as $msc)
                <option value="{{ $msc->id }}"
                    {{ $mscId == $msc->id ? 'selected' : '' }}>
                    {{ $msc->module->title }}
                    — {{ $msc->studentClass->name }}
                </option>
            @endforeach
        </select>


        {{-- SECTION --}}
        @if($sections->count())
        <label class="block font-bold mt-4 mb-1">Bab / Section</label>
        <select name="section_id"
            onchange="location='?msc_id={{ $mscId }}&section_id='+this.value"
            class="w-full border rounded px-3 py-2">
            <option value="">Pilih Bab</option>
            @foreach($sections as $s)
                <option value="{{ $s->id }}" {{ $sectionId == $s->id ? 'selected' : '' }}>
                    {{ $s->title }}
                </option>
            @endforeach
        </select>
        @endif

        {{-- LESSON --}}
        @if($lessons->count())
        <label class="block font-bold mt-4 mb-1">Materi / Lesson</label>
        <select name="lesson_id" class="w-full border rounded px-3 py-2" required>
            <option value="">Pilih Materi</option>
            @foreach($lessons as $l)
                <option value="{{ $l->id }}">{{ $l->title }}</option>
            @endforeach
        </select>
        @endif


        <label class="block font-bold mt-4 mb-1">Judul Ujian</label>
        <input type="text" name="title" class="w-full border rounded px-3 py-2">

        <label class="block font-bold mt-4 mb-1">Durasi (menit)</label>
        <input type="number" name="duration" value="60" class="w-full border rounded px-3 py-2">

        {{-- TAMBAHAN: JADWAL UJIAN --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div>
                <label class="block font-bold mb-1">Waktu Dibuka</label>
                <input type="datetime-local" name="available_at" class="w-full border rounded px-3 py-2">
                <p class="text-xs text-gray-500 mt-1">
                    Biarkan kosong jika ujian langsung tersedia setelah dibuat.
                </p>
            </div>
            <div>
                <label class="block font-bold mb-1">Batas Waktu / Deadline</label>
                <input type="datetime-local" name="deadline" class="w-full border rounded px-3 py-2">
                <p class="text-xs text-gray-500 mt-1">
                    Batas akhir siswa bisa mengerjakan.
                </p>
            </div>
        </div>

        <button class="mt-6 bg-indigo-600 text-white px-6 py-2 rounded">
            Simpan & Lanjut
        </button>
        </form>

    </div>
</div>

<!-- MODAL ALERT -->
<div id="alertModal"
     class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center hidden z-50">

    <div class="bg-white rounded-xl shadow-xl w-96 p-6 text-center animate-scale">

        <h2 class="text-lg font-semibold text-gray-800 mb-2">
            Perhatian
        </h2>

        <p id="alertMessage" class="text-gray-600 mb-6"></p>

        <button onclick="closeAlert()"
            class="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2 rounded-lg">
            OK
        </button>

    </div>
</div>

<style>
@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-scale {
    animation: scaleIn 0.2s ease;
}
</style>

<script>
function showAlert(message) {
    document.getElementById('alertMessage').innerText = message;
    document.getElementById('alertModal').classList.remove('hidden');
}

function closeAlert() {
    document.getElementById('alertModal').classList.add('hidden');
}

function validateExamForm() {

    const msc = document.querySelector('[name="modules_student_class_id"]').value;
    const section = document.querySelector('[name="section_id"]')?.value;
    const lesson = document.querySelector('[name="lesson_id"]')?.value;

    if(!msc){
        showAlert('Silakan pilih Modul & Kelas terlebih dahulu');
        return false;
    }

    if(!section){
        showAlert('Silakan pilih Bab / Section terlebih dahulu');
        return false;
    }

    if(!lesson){
        showAlert('Silakan pilih Materi / Lesson terlebih dahulu');
        return false;
    }

    return true;
}
</script>

@endsection