<x-guest-layout>
    <div class="text-center mb-8">
        <h2 class="text-2xl font-bold text-gray-800">PENDAFTARAN SISWA BARU</h2>
        <div class="w-24 h-1 bg-purple-800 mx-auto mt-2 rounded-full"></div>
    </div>

    <form method="POST" action="{{ route('register') }}" class="space-y-6">
        @csrf

        <div class="w-full sm:max-w-4xl mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
            <!-- Personal Information Section -->
            <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
                <h3 class="text-lg font-semibold text-gray-700 mb-4 flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                            clip-rule="evenodd" />
                    </svg>
                    Informasi Pribadi
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Name -->
                    <div>
                        <x-input-label for="name" :value="__('Nama Lengkap')" class="text-gray-600" />
                        <x-text-input id="name" class="block mt-1 w-full rounded-md" type="text" name="name"
                            :value="old('name')" required autofocus autocomplete="name"
                            placeholder="Nama lengkap sesuai dokumen" />
                        <x-input-error :messages="$errors->get('name')" class="mt-2" />
                    </div>

                    <!-- NIS -->
                    <div>
                        <x-input-label for="nis" :value="__('Nomor Induk Siswa')" class="text-gray-600" />
                        <x-text-input id="nis" class="block mt-1 w-full rounded-md" type="text" name="nis"
                            :value="old('nis')" required placeholder="Nomor induk siswa" />
                        <x-input-error :messages="$errors->get('nis')" class="mt-2" />
                    </div>

                    <!-- Tempat & Tanggal Lahir -->
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <x-input-label for="tempat_lahir" :value="__('Tempat Lahir')" class="text-gray-600" />
                            <x-text-input id="tempat_lahir" class="block mt-1 w-full rounded-md" type="text"
                                name="tempat_lahir" :value="old('tempat_lahir')" required placeholder="Kota kelahiran" />
                            <x-input-error :messages="$errors->get('tempat_lahir')" class="mt-2" />
                        </div>
                        <div>
                            <x-input-label for="tanggal" :value="__('Tanggal Lahir')" class="text-gray-600" />
                            <x-text-input id="tanggal" class="block mt-1 w-full rounded-md" type="date"
                                name="tanggal" :value="old('tanggal')" required />
                            <x-input-error :messages="$errors->get('tanggal')" class="mt-2" />
                        </div>
                    </div>

                    <!-- Jenis Kelamin & Agama -->
                    <div>
                        <x-input-label for="jenis_kelamin" :value="__('Jenis Kelamin')" class="text-gray-600" />
                        <select id="jenis_kelamin" name="jenis_kelamin"
                            class="block mt-1 w-full border-gray-300 focus:border-purple-500 focus:ring-purple-500 rounded-md shadow-sm"
                            required>
                            <option value="">Pilih Jenis Kelamin</option>
                            <option value="L" {{ old('jenis_kelamin') == 'L' ? 'selected' : '' }}>Laki-Laki
                            </option>
                            <option value="P" {{ old('jenis_kelamin') == 'P' ? 'selected' : '' }}>Perempuan
                            </option>
                        </select>
                        <x-input-error :messages="$errors->get('jenis_kelamin')" class="mt-2" />
                    </div>

                    <div>
                        <x-input-label for="agama" :value="__('Agama')" class="text-gray-600" />
                        <select id="agama" name="agama"
                            class="block mt-1 w-full border-gray-300 focus:border-purple-500 focus:ring-purple-500 rounded-md shadow-sm"
                            required>
                            <option value="">Pilih Agama</option>
                            <option value="Islam" {{ old('agama') == 'Islam' ? 'selected' : '' }}>Islam</option>
                            <option value="Kristen" {{ old('agama') == 'Kristen' ? 'selected' : '' }}>Kristen</option>
                            <option value="Katolik" {{ old('agama') == 'Katolik' ? 'selected' : '' }}>Katolik</option>
                            <option value="Hindu" {{ old('agama') == 'Hindu' ? 'selected' : '' }}>Hindu</option>
                            <option value="Buddha" {{ old('agama') == 'Buddha' ? 'selected' : '' }}>Buddha</option>
                            <option value="Konghucu" {{ old('agama') == 'Konghucu' ? 'selected' : '' }}>Konghucu
                            </option>
                        </select>
                        <x-input-error :messages="$errors->get('agama')" class="mt-2" />
                    </div>
                </div>
            </div>

            <!-- School Information Section -->
            <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
                <h3 class="text-lg font-semibold text-gray-700 mb-4 flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20"
                        fill="currentColor">
                        <path
                            d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z" />
                    </svg>
                    Informasi Sekolah
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Kelas -->
                    <div>
                        <x-input-label for="kelas" :value="__('Kelas')" class="text-gray-600" />
                        <select id="kelas" name="kelas"
                            class="block mt-1 w-full border-gray-300 focus:border-purple-500 focus:ring-purple-500 rounded-md shadow-sm"
                            required>
                            <option value="">Pilih Kelas</option>
                            <option value="X ATPH">X ATPH</option>
                            <option value="X APHP">X APHP</option>
                            <option value="X TKJ">X TKJ</option>
                            <option value="X TKRO">X TKRO</option>
                            <option value="X AKL">X AKL</option>
                            <option value="X APAT">X APAT</option>

                            <option value="XI ATPH">XI ATPH</option>
                            <option value="XI APHP">XI APHP</option>
                            <option value="XI TKJ">XI TKJ</option>
                            <option value="XI TKRO">XI TKRO</option>
                            <option value="XI AKL">XI AKL</option>
                            <option value="XI APAT">XI APAT</option>

                            <option value="XII ATPH">XII ATPH</option>
                            <option value="XII APHP">XII APHP</option>
                            <option value="XII TKJ">XII TKJ</option>
                            <option value="XII TKRO">XII TKRO</option>
                            <option value="XII AKL">XII AKL</option>
                            <option value="XII APAT">XII APAT</option>
                        </select>
                        <x-input-error :messages="$errors->get('kelas')" class="mt-2" />
                    </div>

                    <!-- Tahun Pelajaran -->
                    <div>
                        <x-input-label for="tahun_pelajaran" :value="__('Tahun Pelajaran')" class="text-gray-600" />
                        <x-text-input id="tahun_pelajaran" class="block mt-1 w-full rounded-md" type="text"
                            name="tahun_pelajaran" :value="old('tahun_pelajaran', date('Y') . '/' . (date('Y') + 1))" required placeholder="Contoh: 2024/2025" />
                        <x-input-error :messages="$errors->get('tahun_pelajaran')" class="mt-2" />
                    </div>
                </div>
            </div>

            <!-- Contact Information Section -->
            <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
                <h3 class="text-lg font-semibold text-gray-700 mb-4 flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20"
                        fill="currentColor">
                        <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                        <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                    </svg>
                    Informasi Kontak
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Alamat -->
                    <div class="md:col-span-2">
                        <x-input-label for="alamat" :value="__('Alamat Lengkap')" class="text-gray-600" />
                        <textarea id="alamat" name="alamat" rows="3"
                            class="block mt-1 w-full border-gray-300 focus:border-purple-500 focus:ring-purple-500 rounded-md shadow-sm"
                            required placeholder="Alamat lengkap termasuk RT/RW">{{ old('alamat') }}</textarea>
                        <x-input-error :messages="$errors->get('alamat')" class="mt-2" />
                    </div>
                </div>
            </div>

            <!-- Account Information Section -->
            <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
                <h3 class="text-lg font-semibold text-gray-700 mb-4 flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20"
                        fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
                            clip-rule="evenodd" />
                    </svg>
                    Informasi Akun
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Username -->
                    <div>
                        <x-input-label for="username" :value="__('Username')" class="text-gray-600" />
                        <x-text-input id="username" class="block mt-1 w-full rounded-md" type="text"
                            name="username" :value="old('username')" required autocomplete="username"
                            placeholder="Nama pengguna unik" />
                        <x-input-error :messages="$errors->get('username')" class="mt-2" />
                    </div>

                    <!-- Password -->
                    <div>
                        <x-input-label for="password" :value="__('Kata Sandi')" class="text-gray-600" />
                        <x-text-input id="password" class="block mt-1 w-full rounded-md" type="password"
                            name="password" required autocomplete="new-password" placeholder="Minimal 8 karakter" />
                        <x-input-error :messages="$errors->get('password')" class="mt-2" />
                    </div>

                    <!-- Confirm Password -->
                    <div class="md:col-span-2">
                        <x-input-label for="password_confirmation" :value="__('Konfirmasi Kata Sandi')" class="text-gray-600" />
                        <x-text-input id="password_confirmation" class="block mt-1 w-full rounded-md" type="password"
                            name="password_confirmation" required autocomplete="new-password"
                            placeholder="Ketik ulang kata sandi" />
                        <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex flex-col sm:flex-row items-center justify-between mt-8">
                <a href="{{ route('login') }}"
                    class="flex items-center text-sm text-purple-600 hover:text-purple-800 mb-4 sm:mb-0">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20"
                        fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
                            clip-rule="evenodd" />
                    </svg>
                    Sudah memiliki akun?
                </a>

                <button type="submit" style="background-color: rgba(87, 7, 65, 1);""
                    class=" w-full sm:w-auto px-6 py-3 text-white font-medium rounded-md shadow-md hover:shadow-lg transition duration-300 ease-in-out">
                    Daftar Sekarang
                </button>
            </div>
        </div>
    </form>
</x-guest-layout>