{{-- resources/views/public/ppdb/create.blade.php --}}
@extends('layouts.public')
@section('title', 'Formulir PPDB Online')

@section('content')
<section class="position-relative d-flex align-items-center justify-content-center overflow-hidden" style="min-height: 40vh; padding-top: 140px; padding-bottom: 120px; background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-emerald) 100%);">
    <div class="position-absolute top-0 start-0 w-100 h-100" style="background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.3;"></div>
    
    <div class="container position-relative text-center text-white" style="z-index: 2;">
        <span class="badge px-4 py-2 rounded-pill mb-3" style="background: var(--accent-gold); color: var(--primary-dark); font-size: 0.95rem; font-weight: 700; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);">
            <i class="bi bi-pencil-square me-1"></i> Registrasi Online
        </span>
        <h1 class="fw-bold mx-auto mb-3" style="font-size: 3rem; font-family: 'Cairo', sans-serif; text-shadow: 0 2px 10px rgba(0,0,0,0.3);">
            Formulir PPDB Online
        </h1>
        <p class="lead mx-auto mb-0" style="color: rgba(255,255,255,0.9); font-weight: 500; font-size: 1.15rem;">
            Tahun Ajaran {{ $taAktif->tahun_ajaran }}
        </p>
    </div>
</section>

<section class="section-spacing section-bg-light" style="padding-top: 0; padding-bottom: 100px;">
    <div class="container">
        <div id="step-1-jenjang" style="margin-top: -60px; z-index: 3; position: relative;">
            <div class="row justify-content-center g-4">
                @foreach($jenjangs as $jenjang)
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-lg rounded-4 text-center jenjang-card" 
                         data-id="{{ $jenjang->id }}" 
                         data-nama="{{ $jenjang->nama_jenjang }}"
                         style="cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; border-bottom: 6px solid var(--primary-emerald) !important;">
                        <div class="card-body p-5">
                            <i class="bi bi-building text-primary mb-4 d-block" style="font-size: 4rem;"></i>
                            <h3 class="fw-bold text-dark mb-3">{{ $jenjang->nama_jenjang }}</h3>
                            <p class="text-muted small mb-0">{{ $jenjang->deskripsi ?? 'Pendaftaran siswa baru jenjang '.$jenjang->nama_jenjang }}</p>
                            <span class="btn btn-outline-primary rounded-pill mt-4 px-4 fw-bold">Pilih Jenjang Ini</span>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        <div class="row justify-content-center" id="step-2-form" style="display: none;">
            <div class="col-lg-8 col-md-10 mx-auto">
                <div class="card border-0 shadow-lg rounded-4 overflow-hidden bg-white" style="margin-top: -60px; z-index: 3; position: relative;">
                    
                    <div class="card-body p-4 p-md-5">
                        <div class="d-flex align-items-center mb-4 pb-3 border-bottom">
                            <button type="button" class="btn btn-link text-muted p-0 me-3 fs-3 hover-lift" id="btnBackToJenjang" title="Kembali Pilih Jenjang">
                                <i class="bi bi-arrow-left-circle-fill" style="color: var(--primary-emerald);"></i>
                            </button>
                            <div>
                                <h4 class="mb-0 fw-bold" style="color: var(--primary-dark); font-family: 'Cairo', sans-serif;">Lengkapi Data Anda</h4>
                                <small class="text-muted">Pastikan data diisi sesuai dengan dokumen resmi (KK/Ijazah).</small>
                            </div>
                        </div>

                        @if($errors->any())
                            <div class="alert alert-danger border-0 shadow-sm rounded-3 mb-4">
                                <ul class="mb-0 fw-medium">@foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach</ul>
                            </div>
                        @endif

                        <form action="{{ route('public.ppdb.store') }}" method="POST">
                            @csrf
                        
                            <input type="hidden" name="jenjang_id" id="input_jenjang_id">
                        
                            <div class="mb-4 bg-light p-4 rounded-4 border" style="border-color: rgba(0,0,0,0.05) !important;">
                                <label class="form-label fw-bold text-dark mb-2" style="font-size: 1.1rem;"><i class="bi bi-bookmark-check text-primary me-2"></i>Pilihan Tingkatan / Jenjang <span class="text-danger">*</span></label>
                                <input type="text" id="input_jenjang_nama" class="form-control form-control-lg fw-bold text-primary bg-white text-center" style="cursor: not-allowed;" readonly>
                                <div class="form-text mt-2 text-center"><i class="bi bi-info-circle me-1"></i> Penentuan ruang kelas spesifik akan diatur oleh admin madrasah pada saat verifikasi pendaftaran.</div>
                            </div>

                            <h5 class="fw-bold text-dark mb-3 mt-5" style="font-family: 'Cairo', sans-serif;"><i class="bi bi-person-vcard text-primary me-2"></i>Identitas Diri</h5>
                            
                            <div class="row g-4 mb-4">
                                <div class="col-md-12">
                                    <label class="form-label fw-bold">Nama Lengkap (Sesuai Ijazah/KK) <span class="text-danger">*</span></label>
                                    <input type="text" name="nama_lengkap" class="form-control form-control-lg bg-light border-0" value="{{ old('nama_lengkap') }}" required placeholder="Contoh: Muhammad Al-Fatih">
                                </div>
                                
                                <div class="col-md-6">
                                    <label class="form-label fw-bold">Jenis Kelamin <span class="text-danger">*</span></label>
                                    <select name="jenis_kelamin" class="form-select form-control-lg bg-light border-0" required>
                                        <option value="">-- Pilih --</option>
                                        <option value="L" {{ old('jenis_kelamin') == 'L' ? 'selected' : '' }}>Laki-laki</option>
                                        <option value="P" {{ old('jenis_kelamin') == 'P' ? 'selected' : '' }}>Perempuan</option>
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">Agama</label>
                                    <input type="text" name="agama" class="form-control form-control-lg bg-light border-0 text-muted" value="Islam" readonly>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">Tempat Lahir</label>
                                    <input type="text" name="tempat_lahir" class="form-control form-control-lg bg-light border-0" value="{{ old('tempat_lahir') }}" placeholder="Contoh: Cirebon">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">Tanggal Lahir</label>
                                    <input type="date" name="tanggal_lahir" class="form-control form-control-lg bg-light border-0" value="{{ old('tanggal_lahir') }}">
                                </div>
                            </div>

                            <h5 class="fw-bold text-dark mb-3 mt-5" style="font-family: 'Cairo', sans-serif;"><i class="bi bi-file-earmark-text text-primary me-2"></i>Data Akademik & Kontak</h5>

                            <div class="row g-4 mb-5">
                                <div class="col-md-6">
                                    <label class="form-label fw-bold">NISN <span class="text-muted fw-normal fs-6">(Opsional)</span></label>
                                    <input type="number" name="nisn" class="form-control form-control-lg bg-light border-0" value="{{ old('nisn') }}" placeholder="10 Digit NISN">
                                </div>
                                
                                <div class="col-md-6">
                                    <label class="form-label fw-bold">Asal Sekolah <span class="text-danger">*</span></label>
                                    <input type="text" name="asal_sekolah" class="form-control form-control-lg bg-light border-0" value="{{ old('asal_sekolah') }}" required placeholder="Contoh: SMPN 1 Kuningan">
                                </div>

                                <div class="col-md-12">
                                    <label class="form-label fw-bold">Nomor HP / WhatsApp (Aktif) <span class="text-danger">*</span></label>
                                    <input type="text" name="no_hp" class="form-control form-control-lg bg-light border-0" value="{{ old('no_hp') }}" required placeholder="Contoh: 08123456789">
                                    <div class="form-text mt-2"><i class="bi bi-info-circle me-1"></i> Nomor ini akan digunakan panitia untuk menghubungi Anda.</div>
                                </div>
                            </div>

                            <div class="d-grid mt-4">
                                <button type="submit" class="btn-daftar text-decoration-none d-inline-flex align-items-center justify-content-center py-3 fs-5" style="border-radius: 12px;">
                                    <i class="bi bi-send-fill me-2"></i> Kirim Formulir Pendaftaran
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .jenjang-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important; }
    .hover-lift:hover { transform: scale(1.1); transition: transform 0.2s ease; }
    .form-control-lg, .form-select-lg { font-size: 1rem; }
    .form-control:focus, .form-select:focus { box-shadow: 0 0 0 0.25rem rgba(21, 101, 192, 0.25) !important; background-color: #fff !important; }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.jenjang-card').forEach(card => {
            card.addEventListener('click', function() {
                const id = this.getAttribute('data-id');
                const nama = this.getAttribute('data-nama');
                
                document.getElementById('input_jenjang_id').value = id;
                document.getElementById('input_jenjang_nama').value = nama;
                
                document.getElementById('step-1-jenjang').style.display = 'none';
                document.getElementById('step-2-form').style.display = 'block';
                
                window.scrollTo({ top: document.getElementById('step-2-form').offsetTop - 80, behavior: 'smooth' });
            });
        });

        document.getElementById('btnBackToJenjang').addEventListener('click', function() {
            document.getElementById('step-2-form').style.display = 'none';
            document.getElementById('step-1-jenjang').style.display = 'block';
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });

        @if($errors->any())
            document.getElementById('step-1-jenjang').style.display = 'none';
            document.getElementById('step-2-form').style.display = 'block';
        @endif
    });
</script>
@endsection