@if ($errors->any())
<div class="bg-red-100 text-red-700 p-3 rounded mb-4">
    <ul>
        @foreach ($errors->all() as $error)
            <li>- {{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<x-layout>
    <x-slot:header></x-slot>

    <section class="py-1 bg-white rounded-lg">
      <div class="container mx-auto px-0">
        
        <!-- Title -->
        <div class="text-center mb-12" data-aos="fade-up">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-800">
            Pendaftaran Peserta Didik Baru (PPDB)
          </h2>
          <div class="section-divider"></div>
          <p class="text-gray-600 max-w-3xl mx-auto">
            Formulir pendaftaran online untuk calon siswa/i {{ $websiteData->namasekolah }}
          </p>
        </div>

        <div class="max-w-3xl mx-auto bg-gray-50 p-8 rounded-lg shadow">
          
          @if(session('success'))
            <div class="bg-green-100 text-green-700 p-3 rounded mb-4">
              {{ session('success') }}
            </div>
          @endif

          <form action="{{ route('daftar.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <!-- ================= DATA SISWA ================= -->
            <h3 class="text-lg font-semibold mt-0 mb-4 text-green-700">-- Data Siswa --</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

                <div>
                    <label class="block mb-1 font-medium">Nama Lengkap</label>
                    <input type="text" name="nama_lengkap" class="w-full border p-2 rounded" required>
                </div>

                <div>
                    <label class="block mb-1 font-medium">NIK</label>
                    <input type="text" name="nik" class="w-full border p-2 rounded" required>
                </div>

                <div>
                    <label class="block mb-1 font-medium">NISN</label>
                    <input type="text" name="nisn" class="w-full border p-2 rounded" required>
                </div>

                <div>
                    <label class="block mb-1 font-medium">KIP</label>
                    <input type="text" name="kip" class="w-full border p-2 rounded">
                </div>

                <div>
                    <label class="block mb-1 font-medium">Tempat Lahir</label>
                    <input type="text" name="tempat_lahir" class="w-full border p-2 rounded" required>
                </div>

                <div>
                    <label class="block mb-1 font-medium">Tanggal Lahir</label>
                    <input type="date" name="tanggal_lahir" class="w-full border p-2 rounded" required>
                </div>

                <div>
                    <label class="block mb-1 font-medium">Jenis Kelamin</label>
                    <select name="jenis_kelamin" class="w-full border p-2 rounded" required>
                    <option value="">-- Pilih --</option>
                    <option value="L">Laki-laki</option>
                    <option value="P">Perempuan</option>
                    </select>
                </div>

                <div>
                    <label class="block mb-1 font-medium">Agama</label>
                    <input type="text" name="agama" class="w-full border p-2 rounded" required>
                </div>

                <div>
                    <label class="block mb-1 font-medium">Jumlah Saudara</label>
                    <input type="number" name="jumlah_saudara" class="w-full border p-2 rounded" required>
                </div>

                <div>
                    <label class="block mb-1 font-medium">Anak Ke</label>
                    <input type="number" name="anak_ke" class="w-full border p-2 rounded" required>
                </div>

                <div>
                    <label class="block mb-1 font-medium">Hobi</label>
                    <input type="text" name="hobi" class="w-full border p-2 rounded" required>
                </div>

                <div>
                    <label class="block mb-1 font-medium">Cita-cita</label>
                    <input type="text" name="cita_cita" class="w-full border p-2 rounded" required>
                </div>

                <div>
                    <label class="block mb-1 font-medium">No HP</label>
                    <input type="text" name="no_hp" class="w-full border p-2 rounded" required>
                </div>

                <div>
                    <label class="block mb-1 font-medium">Email Aktif</label>
                    <input type="email" name="email" class="w-full border p-2 rounded" required>
                </div>

                <div>
                    <label class="block mb-1 font-medium">Pembiaya Sekolah</label>
                    <input type="text" name="pembiaya_sekolah" class="w-full border p-2 rounded" required>
                </div>

                <div>
                    <label class="block mb-1 font-medium">Kebutuhan Disabilitas</label>
                    <input type="text" name="kebutuhan_disabilitas" class="w-full border p-2 rounded" required>
                </div>

                <div>
                    <label class="block mb-1 font-medium">Kebutuhan Khusus</label>
                    <input type="text" name="kebutuhan_khusus" class="w-full border p-2 rounded" required>
                </div>

                <div>
                    <label class="block mb-1 font-medium">Status Tempat Tinggal</label>
                    <input type="text" name="status_tempat_tinggal" class="w-full border p-2 rounded" required>
                </div>

                <div>
                    <label class="block mb-1 font-medium">Jarak ke Madrasah (km)</label>
                    <input type="number" step="0.01" name="jarak_ke_madrasah" class="w-full border p-2 rounded" required>
                </div>

                <div>
                    <label class="block mb-1 font-medium">Waktu Tempuh (menit)</label>
                    <input type="text" name="waktu_tempuh" class="w-full border p-2 rounded" required>
                </div>

                <div>
                    <label class="block mb-1 font-medium">Transportasi</label>
                    <input type="text" name="transportasi" class="w-full border p-2 rounded" required>
                </div>

                <div class="md:col-span-2">
                    <label class="block mb-1 font-medium">Alamat Lengkap</label>
                    <textarea name="alamat_lengkap" class="w-full border p-2 rounded" required></textarea>
                </div>

            </div>

            <!-- ================= DATA AYAH ================= -->
            <h3 class="text-lg font-semibold mt-8 mb-4 text-green-700">-- Data Ayah --</h3>
            <div class="grid md:grid-cols-3 gap-4">
                <input class="w-full border p-2 rounded" name="nik_ayah" placeholder="NIK Ayah" required>
                <input class="w-full border p-2 rounded" name="nama_ayah" placeholder="Nama Ayah" required>
                <input class="w-full border p-2 rounded" name="tempat_lahir_ayah" placeholder="Tempat Lahir Ayah" required>
                <input type="date" class="w-full border p-2 rounded" name="tanggal_lahir_ayah" required>
                <input class="w-full border p-2 rounded" name="status_ayah" placeholder="Status Ayah" required>
                <input class="w-full border p-2 rounded" name="pendidikan_ayah" placeholder="Pendidikan Ayah" required>
                <input class="w-full border p-2 rounded" name="pekerjaan_ayah" placeholder="Pekerjaan Ayah" required>
                <input class="w-full border p-2 rounded" name="domisili_ayah" placeholder="Domisili Ayah" required>
                <input class="w-full border p-2 rounded" name="no_hp_ayah" placeholder="No HP Ayah" required>
                <input class="w-full border p-2 rounded" name="penghasilan_ayah" placeholder="Penghasilan Ayah" required>
                <input class="w-full border p-2 rounded" name="status_tempat_tinggal_ayah" placeholder="Status Tempat Tinggal Ayah" required>
                <textarea class="w-full border p-2 rounded md:col-span-3" name="alamat_ayah" placeholder="Alamat Lengkap Ayah" required></textarea>            
            </div> 

            <!-- ================= DATA IBU ================= -->
            <h3 class="text-lg font-semibold mt-8 mb-4 text-green-700">-- Data Ibu --</h3>
            <div class="grid md:grid-cols-3 gap-4">
                <input class="w-full border p-2 rounded" name="nik_ibu" placeholder="NIK Ibu" required>
                <input class="w-full border p-2 rounded" name="nama_ibu" placeholder="Nama Ibu" required>
                <input class="w-full border p-2 rounded" name="tempat_lahir_ibu" placeholder="Tempat Lahir Ibu" required>
                <input type="date" class="w-full border p-2 rounded" name="tanggal_lahir_ibu" required>
                <input class="w-full border p-2 rounded" name="status_ibu" placeholder="Status Ibu" required>
                <input class="w-full border p-2 rounded" name="pendidikan_ibu" placeholder="Pendidikan Ibu" required>
                <input class="w-full border p-2 rounded" name="pekerjaan_ibu" placeholder="Pekerjaan Ibu" required>
                <input class="w-full border p-2 rounded" name="domisili_ibu" placeholder="Domisili Ibu" required>
                <input class="w-full border p-2 rounded" name="no_hp_ibu" placeholder="No HP Ibu" required>
                <input class="w-full border p-2 rounded" name="penghasilan_ibu" placeholder="Penghasilan Ibu" required>
                <input class="w-full border p-2 rounded" name="status_tempat_tinggal_ibu" placeholder="Status Tempat Tinggal Ibu" required>
                <textarea class="w-full border p-2 rounded md:col-span-3" name="alamat_ibu" placeholder="Alamat Lengkap Ibu" required></textarea>                
            </div>

            <!-- ================= DATA WALI ================= -->
            <h3 class="text-lg font-semibold mt-8 mb-4 text-green-700">-- Data Wali (Jika Ada) --</h3>
            <div class="grid md:grid-cols-3 gap-4">
                <input class="w-full border p-2 rounded" name="nik_wali" placeholder="NIK Wali">
                <input class="w-full border p-2 rounded" name="nama_wali" placeholder="Nama Wali">
                <input class="w-full border p-2 rounded" name="tempat_lahir_wali" placeholder="Tempat Lahir Wali">
                <input type="date" class="w-full border p-2 rounded" name="tanggal_lahir_wali">
                <input class="w-full border p-2 rounded" name="status_wali" placeholder="Status Wali">
                <input class="w-full border p-2 rounded" name="pendidikan_wali" placeholder="Pendidikan Wali">
                <input class="w-full border p-2 rounded" name="pekerjaan_wali" placeholder="Pekerjaan Wali">
                <input class="w-full border p-2 rounded" name="domisili_wali" placeholder="Domisili Wali">
                <input class="w-full border p-2 rounded" name="no_hp_wali" placeholder="No HP Wali">
                <input class="w-full border p-2 rounded" name="penghasilan_wali" placeholder="Penghasilan Wali">
                <input class="w-full border p-2 rounded" name="status_tempat_tinggal_wali" placeholder="Status Tempat Tinggal Wali">
                <textarea class="w-full border p-2 rounded md:col-span-3" name="alamat_wali" placeholder="Alamat Lengkap Wali"></textarea>                
            </div> 

            <!-- ================= PRESTASI & BEASISWA ================= -->
            <h3 class="text-lg font-semibold mt-8 mb-4 text-green-700">-- Prestasi & Beasiswa --</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <textarea class="w-full border p-2 rounded" name="prestasi" placeholder="Prestasi (jika ada)"></textarea>
                <input class="w-full border p-2 rounded" name="beasiswa" placeholder="Beasiswa / Bantuan (jika ada)">
            </div>

            <!-- ================= UPLOAD DOKUMEN ================= -->
            <h3 class="text-lg font-semibold mt-8 mb-4 text-gray-700">Upload Dokumen (max 2MB)</h3>
            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <label class="block font-medium mb-1">KK Terbaru</label>
                    <input type="file" name="file_kk" class="w-full border p-2 rounded" required>
                </div>
                <div>
                    <label class="block font-medium mb-1">KTP Orang Tua</label>
                    <input type="file" name="file_ktp_ortu" class="w-full border p-2 rounded" required>
                </div>
                <div>
                    <label class="block font-medium mb-1">Akte Kelahiran</label>
                    <input type="file" name="file_akte" class="w-full border p-2 rounded" required>
                </div>
                <div>
                    <label class="block font-medium mb-1">Ijazah / SKL</label>
                    <input type="file" name="file_ijazah" class="w-full border p-2 rounded" required>
                </div>
            </div>

            <p class="text-yellow-600 text-medium mt-6">
              *Pastikan semua data benar sebelum klik Kirim.
            </p>

            <div class="mt-4">
              <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-full font-semibold shadow">
                Kirim Pendaftaran
              </button>
            </div>

            </form>


        </div>

        <br>

      </div>
    </section>
</x-layout>