@php
    $activeTab = 'identitas'; 
    if($errors->hasAny(['no_kk', 'alamat_jalan', 'kode_pos'])) $activeTab = 'alamat';
    // TAMBAHAN: wa_ayah dan wa_ibu dimasukkan ke deteksi error tab orangtua
    if($errors->hasAny(['nama_ibu_kandung', 'nik_ibu', 'nama_ayah', 'wa_ayah', 'wa_ibu'])) $activeTab = 'orangtua';
    if($errors->hasAny(['tinggi_badan', 'berat_badan'])) $activeTab = 'periodik';
    if($errors->hasAny(['penerima_kps', 'no_kps'])) $activeTab = 'bantuan';
    if($errors->hasAny(['file_foto', 'file_akta'])) $activeTab = 'berkas';
@endphp

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-bold text-2xl text-gray-800 leading-tight">
            {{ __('Pendaftaran Siswa Baru') }}
        </h2>
    </x-slot>

    <div class="py-8" x-data="{ tab: '{{ $activeTab }}' }"> 
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            
            <form action="{{ route('students.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="bg-white p-6 rounded-xl shadow-sm mb-6 border-l-4 border-indigo-600 relative overflow-hidden">
                    <div class="absolute top-0 right-0 -mt-4 -mr-4 w-24 h-24 bg-indigo-100 rounded-full opacity-50 blur-xl"></div>
                    
                    <h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
                        <svg class="w-6 h-6 mr-2 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
                        Lokasi & Kelas
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 relative z-10">
                        <div>
                            <x-input-label for="school_id" :value="__('Sekolah Tujuan')" class="mb-1" />
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"></path></svg>
                                </div>
                                <select name="school_id" id="school_id" class="pl-10 block w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 transition duration-150 ease-in-out" required>
                                    <option value="">-- Pilih Sekolah --</option>
                                    @foreach($schools as $school)
                                        <option value="{{ $school->id }}" {{ old('school_id') == $school->id ? 'selected' : '' }}>
                                            {{ $school->name }} ({{ $school->level }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <x-input-error :messages="$errors->get('school_id')" class="mt-2" />
                        </div>

                        <div>
                            <x-input-label for="classroom_id" :value="__('Rombongan Belajar')" class="mb-1" />
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                                </div>
                                <select name="classroom_id" id="classroom_id" class="pl-10 block w-full border-gray-300 rounded-lg shadow-sm bg-gray-50 focus:border-indigo-500 focus:ring-indigo-500" disabled>
                                    <option value="">-- Pilih Sekolah Dulu --</option>
                                </select>
                            </div>
                            <x-input-error :messages="$errors->get('classroom_id')" class="mt-2" />
                        </div>
                    </div>
                </div>

                <div class="mb-4">
                    <div class="flex flex-wrap gap-2 p-1 bg-gray-100 rounded-xl">
                        @foreach([
                            'identitas' => '1. Identitas',
                            'alamat' => '2. Alamat',
                            'orangtua' => '3. Orang Tua',
                            'periodik' => '4. Periodik',
                            'bantuan' => '5. Bantuan',
                            'berkas' => '6. Upload'
                        ] as $key => $label)
                            <button type="button" @click="tab = '{{ $key }}'" 
                                :class="{ 'bg-white text-indigo-700 shadow ring-1 ring-black ring-opacity-5': tab === '{{ $key }}', 'text-gray-500 hover:text-gray-700 hover:bg-gray-200': tab !== '{{ $key }}' }"
                                class="flex-1 py-2.5 px-4 rounded-lg text-sm font-bold transition-all duration-200">
                                {{ $label }}
                            </button>
                        @endforeach
                    </div>
                </div>

                <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100 min-h-[500px]">

                    <div x-show="tab === 'identitas'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100">
                        <h4 class="text-xl font-bold text-gray-800 mb-6 border-b pb-2">Data Pribadi Siswa</h4>
                        
                        <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
                            
                            <div class="md:col-span-12">
                                <x-input-label for="nama_lengkap" value="Nama Lengkap (Sesuai Akta)*" />
                                <div class="mt-1 relative rounded-md shadow-sm">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                                    </div>
                                    <input type="text" name="nama_lengkap" id="nama_lengkap" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-lg py-3" value="{{ old('nama_lengkap') }}" required placeholder="Contoh: Muhammad Rizky">
                                </div>
                            </div>

                            <div class="md:col-span-6">
                                <x-input-label for="nik" value="NIK (16 Digit)*" />
                                <input type="number" name="nik" id="nik" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-lg py-2.5" value="{{ old('nik') }}" required placeholder="3204xxxxxxxxxxxx">
                                <x-input-error :messages="$errors->get('nik')" class="mt-2" />
                            </div>
                            <div class="md:col-span-6">
                                <x-input-label for="nis" value="NIS (Opsional)" />
                                <input type="number" name="nis" id="nis" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-lg py-2.5" value="{{ old('nis') }}" placeholder="10 Digit">
                            </div>
                            <div class="md:col-span-6">
                                <x-input-label for="nisn" value="NISN (Opsional)" />
                                <input type="number" name="nisn" id="nisn" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-lg py-2.5" value="{{ old('nisn') }}" placeholder="10 Digit">
                            </div>

                            <div class="md:col-span-6">
                                <x-input-label for="tempat_lahir" value="Tempat Lahir*" />
                                <input type="text" name="tempat_lahir" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-lg py-2.5" value="{{ old('tempat_lahir') }}" required>
                            </div>
                            <div class="md:col-span-6">
                                <x-input-label for="tanggal_lahir" value="Tanggal Lahir*" />
                                <input type="date" name="tanggal_lahir" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-lg py-2.5" value="{{ old('tanggal_lahir') }}" required>
                            </div>

                            <div class="md:col-span-6">
                                <x-input-label for="jenis_kelamin" value="Jenis Kelamin*" />
                                <select name="jenis_kelamin" class="mt-1 block w-full py-2.5 px-3 border border-gray-300 bg-white rounded-lg shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    <option value="L">Laki-laki</option>
                                    <option value="P">Perempuan</option>
                                </select>
                            </div>
                            <div class="md:col-span-6">
                                <x-input-label for="agama" value="Agama*" />
                                <select name="agama" class="mt-1 block w-full py-2.5 px-3 border border-gray-300 bg-white rounded-lg shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    <option value="Islam">Islam</option>
                                    <option value="Kristen">Kristen</option>
                                    <option value="Katolik">Katolik</option>
                                    <option value="Hindu">Hindu</option>
                                    <option value="Buddha">Buddha</option>
                                    <option value="Konghucu">Konghucu</option>
                                </select>
                            </div>
                            
                            <div class="md:col-span-6">
                                <x-input-label for="kebutuhan_khusus" value="Kebutuhan Khusus (Jika Ada)" />
                                <input type="text" name="kebutuhan_khusus" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-lg py-2.5" value="{{ old('kebutuhan_khusus') }}" placeholder="Tuna Netra, Tuna Daksa, dll.">
                            </div>
                        </div>
                    </div>

                    <div x-show="tab === 'alamat'" x-transition>
                        <h4 class="text-xl font-bold text-gray-800 mb-6 border-b pb-2">Domisili & Kartu Keluarga</h4>
                        
                        <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
                            <div class="md:col-span-6">
                                <x-input-label for="no_kk" value="Nomor Kartu Keluarga (KK)" />
                                <input type="number" name="no_kk" class="mt-1 block w-full border-gray-300 rounded-lg py-2.5 shadow-sm focus:ring-indigo-500 focus:border-indigo-500" value="{{ old('no_kk') }}">
                            </div>
                            <div class="md:col-span-6">
                                <x-input-label for="tempat_tinggal" value="Jenis Tempat Tinggal" />
                                <select name="tempat_tinggal" class="mt-1 block w-full border-gray-300 rounded-lg py-2.5 shadow-sm">
                                    <option value="Bersama Orang Tua">Bersama Orang Tua</option>
                                    <option value="Wali">Wali</option>
                                    <option value="Asrama">Asrama</option>
                                    <option value="Kos">Kos</option>
                                </select>
                            </div>

                            <div class="md:col-span-12">
                                <x-input-label for="alamat_jalan" value="Alamat Lengkap (Jalan/Dusun)" />
                                <textarea name="alamat_jalan" rows="2" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500" placeholder="Jl. Mawar No. 12, Dusun Sukamaju">{{ old('alamat_jalan') }}</textarea>
                            </div>

                            <div class="md:col-span-1">
                                <x-input-label for="rt" value="RT" />
                                <input type="number" name="rt" class="mt-1 block w-full border-gray-300 rounded-lg py-2 text-center" value="{{ old('rt') }}">
                            </div>
                            <div class="md:col-span-1">
                                <x-input-label for="rw" value="RW" />
                                <input type="number" name="rw" class="mt-1 block w-full border-gray-300 rounded-lg py-2 text-center" value="{{ old('rw') }}">
                            </div>

                            <div class="md:col-span-4">
                                <x-input-label for="desa_kelurahan" value="Desa / Kelurahan" />
                                <input type="text" name="desa_kelurahan" class="mt-1 block w-full border-gray-300 rounded-lg py-2" value="{{ old('desa_kelurahan') }}">
                            </div>
                            <div class="md:col-span-4">
                                <x-input-label for="kecamatan" value="Kecamatan" />
                                <input type="text" name="kecamatan" class="mt-1 block w-full border-gray-300 rounded-lg py-2" value="{{ old('kecamatan') }}">
                            </div>
                            <div class="md:col-span-2">
                                <x-input-label for="kode_pos" value="Kode Pos" />
                                <input type="number" name="kode_pos" class="mt-1 block w-full border-gray-300 rounded-lg py-2" value="{{ old('kode_pos') }}">
                            </div>
                        </div>
                    </div>

                    <div x-show="tab === 'orangtua'" x-transition>
                        <h4 class="text-xl font-bold text-gray-800 mb-6 border-b pb-2">Informasi Orang Tua</h4>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            
                            <div class="bg-pink-50 p-6 rounded-xl border border-pink-100 shadow-sm">
                                <div class="flex items-center mb-4">
                                    <div class="w-8 h-8 rounded-full bg-pink-200 flex items-center justify-center text-pink-600 mr-3">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                                    </div>
                                    <h4 class="font-bold text-pink-700 text-lg">Ibu Kandung</h4>
                                </div>
                                <div class="space-y-4">
                                    <div>
                                        <x-input-label for="nama_ibu_kandung" value="Nama Lengkap*" />
                                        <input type="text" name="nama_ibu_kandung" class="block w-full mt-1 border-pink-200 rounded-lg focus:ring-pink-500 focus:border-pink-500" required value="{{ old('nama_ibu_kandung') }}">
                                    </div>
                                    <div>
                                        <x-input-label for="nik_ibu" value="NIK Ibu" />
                                        <input type="number" name="nik_ibu" class="block w-full mt-1 border-pink-200 rounded-lg focus:ring-pink-500 focus:border-pink-500" value="{{ old('nik_ibu') }}">
                                    </div>
                                    <div>
                                        <x-input-label for="pekerjaan_ibu" value="Pekerjaan" />
                                        <input type="text" name="pekerjaan_ibu" class="block w-full mt-1 border-pink-200 rounded-lg focus:ring-pink-500 focus:border-pink-500" value="{{ old('pekerjaan_ibu') }}">
                                    </div>
                                    <div>
                                        <x-input-label for="wa_ibu" value="No. WhatsApp Ibu" />
                                        <div class="relative mt-1">
                                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-pink-500 font-medium">+62</span>
                                            <input type="number" name="wa_ibu" class="pl-11 block w-full border-pink-200 rounded-lg focus:ring-pink-500 focus:border-pink-500" value="{{ old('wa_ibu') }}" placeholder="81234567890">
                                        </div>
                                        <p class="text-xs text-pink-500 mt-1 italic">Abaikan angka 0 di depan.</p>
                                        <x-input-error :messages="$errors->get('wa_ibu')" class="mt-2" />
                                    </div>
                                </div>
                            </div>

                            <div class="bg-blue-50 p-6 rounded-xl border border-blue-100 shadow-sm">
                                <div class="flex items-center mb-4">
                                    <div class="w-8 h-8 rounded-full bg-blue-200 flex items-center justify-center text-blue-600 mr-3">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                                    </div>
                                    <h4 class="font-bold text-blue-700 text-lg">Ayah</h4>
                                </div>
                                <div class="space-y-4">
                                    <div>
                                        <x-input-label for="nama_ayah" value="Nama Lengkap" />
                                        <input type="text" name="nama_ayah" class="block w-full mt-1 border-blue-200 rounded-lg focus:ring-blue-500 focus:border-blue-500" value="{{ old('nama_ayah') }}">
                                    </div>
                                    <div>
                                        <x-input-label for="nik_ayah" value="NIK Ayah" />
                                        <input type="number" name="nik_ayah" class="block w-full mt-1 border-blue-200 rounded-lg focus:ring-blue-500 focus:border-blue-500" value="{{ old('nik_ayah') }}">
                                    </div>
                                    <div>
                                        <x-input-label for="pekerjaan_ayah" value="Pekerjaan" />
                                        <input type="text" name="pekerjaan_ayah" class="block w-full mt-1 border-blue-200 rounded-lg focus:ring-blue-500 focus:border-blue-500" value="{{ old('pekerjaan_ayah') }}">
                                    </div>
                                    <div>
                                        <x-input-label for="wa_ayah" value="No. WhatsApp Ayah" />
                                        <div class="relative mt-1">
                                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-500 font-medium">+62</span>
                                            <input type="number" name="wa_ayah" class="pl-11 block w-full border-blue-200 rounded-lg focus:ring-blue-500 focus:border-blue-500" value="{{ old('wa_ayah') }}" placeholder="81234567890">
                                        </div>
                                        <p class="text-xs text-blue-500 mt-1 italic">Abaikan angka 0 di depan.</p>
                                        <x-input-error :messages="$errors->get('wa_ayah')" class="mt-2" />
                                    </div>
                                </div>
                            </div>

                            <div class="md:col-span-2">
                                <x-input-label for="penghasilan_bulanan" value="Estimasi Penghasilan Bulanan Orang Tua" />
                                <select name="penghasilan_bulanan" class="block w-full mt-1 border-gray-300 rounded-lg shadow-sm py-2.5">
                                    <option value="< 500.000">Kurang dari Rp 500.000</option>
                                    <option value="500.000 - 999.999">Rp 500.000 - Rp 999.999</option>
                                    <option value="1 Juta - 1.999.999">Rp 1 Juta - Rp 1.999.999</option>
                                    <option value="2 Juta - 4.999.999">Rp 2 Juta - Rp 4.999.999</option>
                                    <option value="5 Juta - 20 Juta">Rp 5 Juta - Rp 20 Juta</option>
                                    <option value="> 20 Juta">Lebih dari Rp 20 Juta</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div x-show="tab === 'periodik'" x-transition>
                        <h4 class="text-xl font-bold text-gray-800 mb-6 border-b pb-2">Data Periodik</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <x-input-label for="no_ujian_sebelumnya" value="No Peserta UN / Ijazah" />
                                <input type="text" name="no_ujian_sebelumnya" class="mt-1 block w-full border-gray-300 rounded-lg py-2.5" value="{{ old('no_ujian_sebelumnya') }}">
                            </div>
                            <div>
                                <x-input-label for="jarak_ke_sekolah" value="Jarak ke Sekolah (KM)" />
                                <div class="mt-1 relative rounded-md shadow-sm">
                                    <input type="number" name="jarak_ke_sekolah" class="block w-full pr-12 border-gray-300 rounded-lg py-2.5 focus:ring-indigo-500 focus:border-indigo-500" placeholder="0">
                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                        <span class="text-gray-500 sm:text-sm">km</span>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <x-input-label for="tinggi_badan" value="Tinggi Badan" />
                                <div class="mt-1 relative rounded-md shadow-sm">
                                    <input type="number" name="tinggi_badan" class="block w-full pr-12 border-gray-300 rounded-lg py-2.5" placeholder="0">
                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                        <span class="text-gray-500 sm:text-sm">cm</span>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <x-input-label for="berat_badan" value="Berat Badan" />
                                <div class="mt-1 relative rounded-md shadow-sm">
                                    <input type="number" name="berat_badan" class="block w-full pr-12 border-gray-300 rounded-lg py-2.5" placeholder="0">
                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                        <span class="text-gray-500 sm:text-sm">kg</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div x-show="tab === 'bantuan'" x-transition>
                        <h4 class="text-xl font-bold text-gray-800 mb-6 border-b pb-2">Kesejahteraan Peserta Didik</h4>
                        <div class="space-y-6">
                            <div class="bg-indigo-50 p-4 rounded-lg border border-indigo-100 flex items-center justify-between">
                                <label for="penerima_kps" class="font-bold text-indigo-900">Apakah Penerima KPS / PKH / KIP?</label>
                                <div class="flex items-center h-6">
                                    <input id="penerima_kps" type="checkbox" value="1" name="penerima_kps" class="w-5 h-5 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
                                </div>
                            </div>
                            
                            <div>
                                <x-input-label for="no_kps" value="Nomor Kartu (Jika Ada)" />
                                <input type="text" name="no_kps" id="no_kps" class="mt-1 block w-full border-gray-300 rounded-lg py-2.5" placeholder="Isi nomor KIP/KPS disini..." value="{{ old('no_kps') }}">
                            </div>

                            <div class="bg-green-50 p-4 rounded-lg border border-green-100 flex items-center justify-between">
                                <label for="layanan_pip" class="font-bold text-green-900">Layak Mendapatkan PIP?</label>
                                <div class="flex items-center h-6">
                                    <input id="layanan_pip" type="checkbox" value="1" name="layanan_pip" class="w-5 h-5 text-green-600 border-gray-300 rounded focus:ring-green-500">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div x-show="tab === 'berkas'" x-transition>
                        <h4 class="text-xl font-bold text-gray-800 mb-6 border-b pb-2">Dokumen Pendukung</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            @foreach(['file_foto' => 'Pas Foto Siswa', 'file_akta' => 'Scan Akta Kelahiran', 'file_kk' => 'Scan Kartu Keluarga', 'file_ktp_ortu' => 'Scan KTP Ortu', 'file_ijazah_sebelumnya' => 'Scan Ijazah Sebelumnya', 'file_kip' => 'Scan Kartu KIP/Bantuan'] as $name => $label)
                                <div class="border-2 border-dashed border-gray-300 p-6 rounded-xl hover:border-indigo-500 hover:bg-indigo-50 transition duration-300 group text-center">
                                    <div class="mb-3">
                                        <svg class="mx-auto h-12 w-12 text-gray-400 group-hover:text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
                                    </div>
                                    <x-input-label :for="$name" :value="$label" class="cursor-pointer font-bold text-gray-700" />
                                    <input type="file" name="{{ $name }}" class="hidden" id="{{ $name }}" onchange="document.getElementById('preview-{{ $name }}').innerText = this.files[0].name">
                                    <label for="{{ $name }}" class="mt-2 inline-block px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 cursor-pointer">
                                        Pilih File
                                    </label>
                                    <p id="preview-{{ $name }}" class="mt-2 text-sm text-indigo-600 font-medium"></p>
                                    <p class="text-xs text-gray-400 mt-1">Max 2MB (JPG/PDF)</p>
                                </div>
                            @endforeach
                        </div>
                    </div>

                </div>

                <div class="mt-8 flex justify-end items-center space-x-4">
                    <a href="{{ route('students.index') }}" class="px-6 py-3 bg-gray-100 text-gray-700 rounded-lg font-bold hover:bg-gray-200 transition">Batal</a>
                    <button type="submit" class="px-8 py-3 bg-indigo-600 text-white font-bold rounded-lg shadow-lg hover:bg-indigo-700 hover:shadow-xl transform hover:-translate-y-1 transition duration-200 flex items-center">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        SIMPAN DATA LENGKAP
                    </button>
                </div>
            
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const schoolSelect = document.getElementById('school_id');
            const classSelect = document.getElementById('classroom_id');

            function loadClasses(schoolId, selectedClassId = null) {
                if (schoolId) {
                    fetch(`/get-classrooms/${schoolId}`)
                        .then(response => response.json())
                        .then(data => {
                            classSelect.innerHTML = '<option value="">-- Pilih Kelas --</option>';
                            data.forEach(item => {
                                const isSelected = selectedClassId == item.id ? 'selected' : '';
                                const option = `<option value="${item.id}" ${isSelected}>${item.grade} - ${item.name} (${item.major ? item.major.code : ''})</option>`;
                                classSelect.innerHTML += option;
                            });
                            classSelect.disabled = false;
                            classSelect.classList.remove('bg-gray-50');
                        });
                } else {
                    classSelect.innerHTML = '<option value="">-- Pilih Sekolah Dulu --</option>';
                    classSelect.disabled = true;
                }
            }

            const oldSchoolId = "{{ old('school_id') }}";
            const oldClassId = "{{ old('classroom_id') }}";
            if (oldSchoolId) {
                loadClasses(oldSchoolId, oldClassId);
            }

            schoolSelect.addEventListener('change', function() {
                loadClasses(this.value);
            });
        });
    </script>
</x-app-layout>