{{-- 
    Lokasi File: resources/views/guru/ujian/create.blade.php (Atau sesuaikan dengan nama file Anda)
    Deskripsi: Form Pembuatan Jadwal Ujian CBT (Mobile-Optimized, UI Premium)
--}}

@extends('layouts.guru_master')

@section('title', 'Terbitkan Ujian Baru | Smart Cendekia')

@section('css')
{{-- Select2 CSS --}}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<style>
    :root {
        --app-bg: #f4f7fb;
        --primary: #4f46e5;
        --text-main: #0f172a;
        --font-mono: 'JetBrains Mono', monospace;
    }

    body { font-family: 'Plus Jakarta Sans', sans-serif !important; background-color: var(--app-bg); }

    /* === HERO GRADIENT CARD === */
    .hero-gradient {
        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        border-radius: 28px; padding: 25px 20px; color: white;
        position: relative; overflow: hidden;
        box-shadow: 0 15px 30px -10px rgba(79, 70, 229, 0.4);
        margin-bottom: 25px;
    }
    .hero-gradient::after {
        content: ''; position: absolute; width: 150px; height: 150px;
        background: rgba(255,255,255,0.05); border-radius: 50%;
        top: -40px; right: -20px;
    }

    /* === CONTENT CARDS === */
    .content-card {
        background: white; border-radius: 24px; padding: 25px;
        margin-bottom: 20px; border: 1px solid #f1f5f9;
        box-shadow: 0 10px 20px rgba(0,0,0,0.02);
    }
    
    /* === FORM INPUTS === */
    .form-modern {
        border-radius: 14px; 
        background: #f8fafc; 
        border: 1px solid #e2e8f0; 
        padding: 10px 15px; /* Sedikit dikurangi padding atas-bawahnya */
        font-weight: 600; 
        color: var(--text-main); 
        transition: 0.2s;
        height: auto; /* Memastikan tinggi mengikuti konten */
        min-height: 48px; /* Standard touch-friendly height */
        line-height: 1.5; /* Memberikan ruang baris teks */
    }

    /* Khusus untuk elemen select agar teks opsi tidak terpotong */
    select.form-modern {
        padding-right: 30px; /* Memberi ruang untuk icon panah default browser */
        appearance: auto; /* Mengembalikan panah default agar lebih aman di mobile */
    }
    }
    .form-modern:focus { background: white; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(79,70,229,0.1); }
    .form-modern::placeholder { color: #94a3b8; font-weight: 500; }
    
    .input-group-text-modern {
        background: #f8fafc; border: 1px solid #e2e8f0; border-right: none;
        border-top-left-radius: 14px; border-bottom-left-radius: 14px; color: #64748b;
    }

    /* === SELECT2 CUSTOM STYLING (Single & Multiple) === */
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple {
        background-color: #f8fafc !important; border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important; min-height: 48px !important; padding: 4px 8px !important;
    }
    .select2-container--default .select2-selection--single { padding: 8px 12px !important; display: flex; align-items: center; }
    .select2-container--default .select2-selection__arrow { height: 46px !important; right: 10px !important; }
    
    .select2-container--default.select2-container--focus .select2-selection--single,
    .select2-container--default.select2-container--focus .select2-selection--multiple {
        background-color: white !important; border-color: var(--primary) !important;
        box-shadow: 0 0 0 4px rgba(79,70,229,0.1) !important;
    }
    
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: var(--primary) !important; border: none !important;
        color: white !important; border-radius: 8px !important; padding: 4px 10px !important;
        font-weight: 700; font-size: 0.85rem; margin-top: 6px !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: white !important; opacity: 0.7; margin-right: 5px !important; border: none !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { opacity: 1; background: transparent !important; }

    /* === SWITCHES (iOS Style) === */
    .custom-switch .custom-control-label::before { height: 1.5rem; width: 2.75rem; border-radius: 2rem; background-color: #e2e8f0; border: none; }
    .custom-switch .custom-control-label::after { height: calc(1.5rem - 4px); width: calc(1.5rem - 4px); border-radius: 50%; background-color: white; }
    .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--primary); }
</style>
@stop

@section('content_body')
<div class="container-fluid pb-5 px-3 animate__animated animate__fadeIn">

    {{-- NAVIGASI KEMBALI (Menggunakan URL mutlak untuk menghindari error route not found) --}}
    <div class="mb-3 mt-4">
        <a href="{{ url('guru/ujian/jadwal') }}" class="btn btn-white border rounded-pill shadow-sm px-3 py-2 font-weight-bold text-secondary" style="font-size: 0.85rem;">
            <i class="fas fa-arrow-left mr-1"></i> Batal / Kembali
        </a>
    </div>

    {{-- HERO HEADER --}}
    <div class="hero-gradient animate__animated animate__fadeInDown">
        <div style="position: relative; z-index: 2;">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <h3 class="font-weight-bold mb-1" style="font-size: 1.4rem;">Terbitkan Ujian Baru</h3>
                    <p class="mb-0 font-weight-bold" style="opacity: 0.8; font-size: 0.85rem;">Atur parameter ujian, keamanan, dan buat Token.</p>
                </div>
                <div style="width: 45px; height: 45px; background: rgba(255,255,255,0.2); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;">
                    <i class="fas fa-rocket"></i>
                </div>
            </div>
        </div>
    </div>

    {{-- MAIN FORM --}}
    <form action="{{ route('guru.ujian.jadwal.store') }}" method="POST">
        @csrf

        <div class="row">
            {{-- KOLOM KIRI: IDENTITAS UJIAN --}}
            <div class="col-lg-7">
                <div class="content-card animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
                    <h6 class="font-weight-bold text-dark mb-4" style="border-bottom: 2px solid #f1f5f9; padding-bottom: 10px;">
                        <i class="fas fa-info-circle text-primary mr-2"></i> Identitas Ujian
                    </h6>

                    {{-- Nama Ujian --}}
                    <div class="form-group mb-4">
                        <label class="small font-weight-bold text-muted mb-2">Nama Ujian / Sesi <span class="text-danger">*</span></label>
                        <input type="text" name="nama_ujian" class="form-control form-modern @error('nama_ujian') is-invalid @enderror" placeholder="Contoh: Penilaian Harian Matematika Bab 1" value="{{ old('nama_ujian') }}" required>
                        @error('nama_ujian') <div class="text-danger small mt-1 font-weight-bold">{{ $message }}</div> @enderror
                    </div>

                    {{-- Bank Soal (Select2 Single) --}}
                    <div class="form-group mb-4">
                        <label class="small font-weight-bold text-muted mb-2">Pilih Bank Soal <span class="text-danger">*</span></label>
                        <select name="bank_soal_id" class="form-control select2-single @error('bank_soal_id') is-invalid @enderror" required data-placeholder="Cari Paket Soal...">
                            <option value=""></option>
                            @foreach($bankSoals ?? [] as $bs)
                                <option value="{{ $bs->id }}" {{ old('bank_soal_id') == $bs->id ? 'selected' : '' }}>
                                    {{ $bs->kode_bank_soal }} - {{ $bs->judul }} ({{ $bs->mataPelajaran->nama_mapel ?? 'Umum' }})
                                </option>
                            @endforeach
                        </select>
                        <small class="text-muted mt-2 d-block font-weight-bold"><i class="fas fa-search text-info mr-1"></i> Ketik judul atau kode soal untuk mencari.</small>
                        @error('bank_soal_id') <div class="text-danger small mt-1 font-weight-bold">{{ $message }}</div> @enderror
                    </div>

                    {{-- Kelas Target (Select2 Multiple) --}}
                    <div class="form-group mb-4">
                        <label class="small font-weight-bold text-muted mb-2">Target Peserta (Kelas) <span class="text-danger">*</span></label>
                        <select name="kelas_ids[]" class="form-control select2-multiple @error('kelas_ids') is-invalid @enderror" multiple="multiple" required data-placeholder="Ketuk untuk memilih kelas...">
                            @foreach($kelas ?? [] as $k)
                                <option value="{{ $k->id }}" {{ in_array($k->id, old('kelas_ids', [])) ? 'selected' : '' }}>
                                    Kelas {{ $k->nama_kelas }}
                                </option>
                            @endforeach
                        </select>
                        <small class="text-muted mt-2 d-block font-weight-bold"><i class="fas fa-users text-info mr-1"></i> Anda dapat memilih lebih dari satu kelas.</small>
                        @error('kelas_ids') <div class="text-danger small mt-1 font-weight-bold">{{ $message }}</div> @enderror
                    </div>

                    {{-- Info Token Otomatis --}}
                    <div class="alert alert-info border-0 mt-4 mb-0" style="background-color: #eff6ff; color: #1e40af; border-radius: 16px;">
                        <div class="d-flex">
                            <div class="mr-3 mt-1"><i class="fas fa-key fa-2x"></i></div>
                            <div>
                                <h6 class="font-weight-bold mb-1">Generate Token Otomatis</h6>
                                <p class="mb-0 small font-weight-medium" style="opacity: 0.9;">Sistem akan men-generate 5 karakter Kode Token unik (Kombinasi Huruf & Angka) setelah Anda menekan tombol Terbitkan.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- KOLOM KANAN: KONFIGURASI --}}
            <div class="col-lg-5">
                <div class="content-card animate__animated animate__fadeInUp" style="animation-delay: 0.2s;">
                    <h6 class="font-weight-bold text-dark mb-4" style="border-bottom: 2px solid #f1f5f9; padding-bottom: 10px;">
                        <i class="fas fa-sliders-h text-primary mr-2"></i> Pengaturan Waktu & Opsi
                    </h6>

                    {{-- Status Jadwal --}}
                    <div class="form-group mb-4">
                        <label class="small font-weight-bold text-muted mb-2">Status Jadwal Default</label>
                        <select name="status_ujian" class="form-control form-modern">
                            <option value="terbit" {{ old('status_ujian') == 'terbit' ? 'selected' : '' }}>🟢 Aktif (Langsung Terbit)</option>
                            <option value="draft" {{ old('status_ujian') == 'draft' ? 'selected' : '' }}>⚪ Draft (Sembunyikan Dulu)</option>
                        </select>
                    </div>

                    {{-- Waktu Mulai --}}
                    <div class="form-group mb-4">
                        <label class="small font-weight-bold text-muted mb-2">Waktu Mulai <span class="text-danger">*</span></label>
                        <input type="datetime-local" name="waktu_mulai" class="form-control form-modern @error('waktu_mulai') is-invalid @enderror" value="{{ old('waktu_mulai') }}" required>
                        @error('waktu_mulai') <div class="text-danger small mt-1 font-weight-bold">{{ $message }}</div> @enderror
                    </div>

                    {{-- Durasi --}}
                    <div class="form-group mb-4">
                        <label class="small font-weight-bold text-muted mb-2">Durasi Pengerjaan <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text input-group-text-modern"><i class="far fa-clock"></i></span>
                            </div>
                            <input type="number" name="durasi" class="form-control form-modern border-left-0 @error('durasi') is-invalid @enderror" value="{{ old('durasi', 60) }}" min="1" required style="border-radius: 0;">
                            <div class="input-group-append">
                                <span class="input-group-text bg-light text-muted font-weight-bold" style="border: 1px solid #e2e8f0; border-left: none; border-top-right-radius: 14px; border-bottom-right-radius: 14px;">Menit</span>
                            </div>
                        </div>
                        @error('durasi') <div class="text-danger small mt-1 font-weight-bold">{{ $message }}</div> @enderror
                    </div>

                    {{-- Batas Waktu Selesai --}}
                    <div class="form-group mb-4">
                        <label class="small font-weight-bold text-muted mb-2">Batas Akhir Login (Opsional)</label>
                        <input type="datetime-local" name="waktu_selesai" class="form-control form-modern @error('waktu_selesai') is-invalid @enderror" value="{{ old('waktu_selesai') }}">
                        <small class="text-muted mt-2 d-block font-weight-bold">Biarkan kosong agar sistem menghitung otomatis dari Durasi.</small>
                        @error('waktu_selesai') <div class="text-danger small mt-1 font-weight-bold">{{ $message }}</div> @enderror
                    </div>

                    <hr class="my-4" style="border-color: #f1f5f9;">

                    {{-- SWITCHES --}}
                    <div class="d-flex align-items-center justify-content-between mb-4">
                        <div>
                            <h6 class="font-weight-bold text-dark mb-1" style="font-size: 0.95rem;">Acak Urutan Soal</h6>
                            <p class="text-muted small mb-0 font-weight-bold">Soal tampil berbeda tiap siswa.</p>
                        </div>
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="acakSoal" name="acak_soal" value="1" {{ old('acak_soal', '1') == '1' ? 'checked' : '' }}>
                            <label class="custom-control-label" for="acakSoal"></label>
                        </div>
                    </div>

                    <div class="d-flex align-items-center justify-content-between mb-4">
                        <div>
                            <h6 class="font-weight-bold text-dark mb-1" style="font-size: 0.95rem;">Tampilkan Nilai</h6>
                            <p class="text-muted small mb-0 font-weight-bold">Siswa melihat skor setelah submit.</p>
                        </div>
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="tampilHasil" name="tampil_hasil" value="1" {{ old('tampil_hasil', '1') == '1' ? 'checked' : '' }}>
                            <label class="custom-control-label" for="tampilHasil"></label>
                        </div>
                    </div>

                    {{-- KEAMANAN / ANTI-CHEAT --}}
                    <div class="bg-red-50 p-3 rounded-lg border mb-4" style="background: #fef2f2; border-color: #fecaca;">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <div>
                                <h6 class="font-weight-bold text-danger mb-1" style="font-size: 0.95rem;"><i class="fas fa-shield-alt mr-1"></i> Anti-Cheat</h6>
                                <p class="text-muted small mb-0 font-weight-bold">Kunci layar jika pindah tab.</p>
                            </div>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="sistemKeamanan" name="sistem_keamanan" value="1" onchange="togglePinKeamanan()" {{ old('sistem_keamanan') == '1' ? 'checked' : '' }}>
                                <label class="custom-control-label" for="sistemKeamanan"></label>
                            </div>
                        </div>

                        <div class="form-group mb-0 animate__animated animate__fadeIn" id="form-pin-keamanan" style="display: none;">
                            <label class="small font-weight-bold text-danger mb-2 text-uppercase">PIN Pembuka Kunci</label>
                            <input type="text" name="pin_keamanan" id="inputPin" 
                                   class="form-control form-modern border-danger text-center font-weight-bold text-danger @error('pin_keamanan') is-invalid @enderror" 
                                   placeholder="Contoh: 123456" maxlength="6" 
                                   value="{{ old('pin_keamanan') }}" 
                                   style="letter-spacing: 5px; font-size: 1.2rem;">
                            @error('pin_keamanan') <div class="text-danger small mt-1 font-weight-bold">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    {{-- SUBMIT BUTTON --}}
                    <button type="submit" class="btn btn-block btn-lg shadow-sm font-weight-bold text-white mt-4" style="background: var(--primary); border-radius: 16px; font-size: 1rem; padding: 14px;">
                        <i class="fas fa-paper-plane mr-2"></i> Terbitkan Ujian & Generate Token
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    function togglePinKeamanan() {
        if ($('#sistemKeamanan').is(':checked')) {
            $('#form-pin-keamanan').slideDown();
            $('#inputPin').prop('required', true);
        } else {
            $('#form-pin-keamanan').slideUp();
            $('#inputPin').prop('required', false).val('');
        }
    }

    $(document).ready(function() {
        // Init Select2 untuk Single Dropdown (Bank Soal)
        $('.select2-single').select2({
            width: '100%',
            placeholder: $(this).data('placeholder'),
            allowClear: true
        });

        // Init Select2 untuk Multiple Dropdown (Kelas)
        $('.select2-multiple').select2({
            width: '100%',
            placeholder: $(this).data('placeholder'),
            allowClear: true
        });

        // Jalankan pengecekan pertama kali halaman diload
        togglePinKeamanan();
    });
</script>
@endsection