@section('title', 'Daftar Online')

@extends('Frontend.Layouts.app2')

@section('content')
<br><br>
    <x-header-section-page title="Daftar Online {{ $settings['nama kampus'] ?? 'Nama kampus tidak tersedia' }}" breadcrumb-home="Home" breadcrumb-current="Daftar Online" />

    <!-- Step 2 -->
    @if ($step == 2)
        <div data-aos="fade-up" class="py-10 bg-gray-50 w-full">
            <div data-aos="fade-up" class="container mx-auto px-4 lg:px-20 max-w-screen-lg">
                <div data-aos="fade-up" class="bg-white shadow-md rounded-lg overflow-hidden">
                    <!-- Header -->
                    <div data-aos="fade-up" class="bg-primary p-6 text-center" style="color: #Fff">
                        <h2 data-aos="fade-up" class="text-2xl font-poppins font-semibold">Formulir Pendaftaran</h2>
                        <p data-aos="fade-up" class="text-sm mt-2 font-dmsans">Lengkapi data Anda untuk melanjutkan proses pendaftaran</p>
                    </div>
                    
                    <!-- Form -->
                    <div data-aos="fade-up" class="p-8">
                        <form method="post" action="{{ route('registration.store') }}" id="mainForm">
                            @if ($errors->any())
                                <div data-aos="fade-up" class="p-4 bg-red-100 border-l-4 border-red-500 text-red-700 rounded-lg mb-6">
                                    <p data-aos="fade-up" class="text-sm font-dmsans font-medium"><strong>Terjadi Kesalahan!</strong></p>
                                    <ul data-aos="fade-up" class="list-disc pl-6 text-sm font-dmsans">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            @csrf
                            
                            <!-- Nama Kampus - Full Width -->
                            <div data-aos="fade-up" class="mt-6">
                                <label data-aos="fade-up" class="block text-sm font-medium text-gray-700 font-poppins mb-2">Nama Kampus</label>
                                <p class="mt-1 p-4 border border-gray-300 rounded-lg w-full bg-gray-100 text-gray-800 text-base">
                                    {{ $settings['nama kampus'] ?? '#' }}
                                </p>
                                <input type="hidden" name="kampus" value="{{ $settings['nama kampus'] ?? '#' }}">
                            </div>

                            <!-- PILIH KELAS - Full Width (BARU) -->
                            <div data-aos="fade-up" class="mt-6">
                                <label for="kelas" class="block text-sm font-medium text-gray-700 font-poppins mb-2">Pilih Kelas</label>
                                <select name="kelas" id="kelas" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" required>
                                    <option value="">-- Pilih Kelas --</option>
                                    @foreach ($kelasList as $item)
                                        <option value="{{ $item->kategori }}" {{ old('kelas') == $item->kategori ? 'selected' : '' }}>
                                            {{ $item->kategori }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- PILIH JURUSAN - Full Width (akan diisi via AJAX) -->
                            <div data-aos="fade-up" class="mt-6">
                                <label for="jurusan" class="block text-sm font-medium text-gray-700 font-poppins mb-2">Pilih Jurusan</label>
                                <select name="jurusan" id="jurusan" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" required disabled>
                                    <option value="">-- Pilih Kelas Terlebih Dahulu --</option>
                                </select>
                            </div>

                            <!-- Grid 2 kolom untuk KTP dan Nama -->
                            <div data-aos="fade-up" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Nomor KTP</label>
                                    <input type="number" name="ktp" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" placeholder="16 Digit Nomor KTP" value="{{ old('ktp') }}" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Nama Lengkap</label>
                                    <input type="text" name="nama" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" placeholder="Sesuai KTP" value="{{ old('nama') }}" required>
                                </div>
                            </div>

                            <!-- Alamat KTP dan Alamat Domisili (2 grid) -->
                            <div data-aos="fade-up" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Alamat KTP</label>
                                    <input type="text" name="alamat_ktp" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" placeholder="Alamat Sesuai KTP" value="{{ old('alamat_ktp') }}" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Alamat Domisili</label>
                                    <input type="text" name="alamat_dom" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" placeholder="Alamat Domisili Saat Ini" value="{{ old('alamat_dom') }}">
                                </div>
                            </div>

                            <!-- Jenis Kelamin dan Tempat Lahir (2 grid) -->
                            <div data-aos="fade-up" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Jenis Kelamin</label>
                                    <div class="mt-2 flex gap-6">
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="jk" value="L" class="form-radio text-primary w-5 h-5" {{ old('jk') == 'L' ? 'checked' : '' }} required>
                                            <span class="ml-2 font-poppins text-base">Laki-laki</span>
                                        </label>
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="jk" value="P" class="form-radio text-primary w-5 h-5" {{ old('jk') == 'P' ? 'checked' : '' }} required>
                                            <span class="ml-2 font-poppins text-base">Perempuan</span>
                                        </label>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Tempat Lahir</label>
                                    <input type="text" name="tmpt_lahir" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" placeholder="Tempat Lahir" value="{{ old('tmpt_lahir') }}" required>
                                </div>
                            </div>

                            <!-- Tanggal Lahir dan Nomor WA/HP (2 grid) -->
                            <div data-aos="fade-up" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Tanggal Lahir</label>
                                    <input type="date" name="tgl_lahir" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" value="{{ old('tgl_lahir') }}" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Nomor WhatsApp / HP</label>
                                    <input type="tel" name="no_wa" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" placeholder="Nomor WhatsApp Aktif" value="{{ old('no_wa') }}" required>
                                </div>
                            </div>

                            <!-- Nomor Darurat dan Email Aktif (2 grid) -->
                            <div data-aos="fade-up" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Nomor Darurat (Orang Tidak Serumah)</label>
                                    <input type="tel" name="no_hp" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" placeholder="Nomor untuk Keadaan Darurat" value="{{ old('no_hp') }}">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Email Aktif</label>
                                    <input type="email" name="email" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" placeholder="Alamat Email Aktif" value="{{ old('email') }}" required>
                                </div>
                            </div>

                            <!-- Agama dan Nama Ibu Kandung (2 grid) -->
                            <div data-aos="fade-up" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Agama</label>
                                    <select name="agama" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" 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>
                                        <option value="Protestan" {{ old('agama') == 'Protestan' ? 'selected' : '' }}>Protestan</option>
                                        <option value="Lainnya" {{ old('agama') == 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Nama Ibu Kandung</label>
                                    <input type="text" name="ibu" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" placeholder="Nama Ibu Kandung" value="{{ old('ibu') }}" required>
                                </div>
                            </div>

                            <!-- Lulusan dan Asal Sekolah (2 grid) -->
                            <div data-aos="fade-up" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                                <div>
                                    <label for="lulusan" class="block text-sm font-medium text-gray-700 font-poppins mb-2">Lulusan</label>
                                    <select name="lulusan" id="lulusan" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" required>
                                        <option value="" disabled {{ old('lulusan') === null ? 'selected' : '' }}>-- Pilih Lulusan --</option>
                                        <option value="SMA/MA/SMK/Sederajat" {{ old('lulusan') === 'SMA/MA/SMK/Sederajat' ? 'selected' : '' }}>SMA/MA/SMK/Sederajat</option>
                                        <option value="D3/Sederajat" {{ old('lulusan') === 'D3/Sederajat' ? 'selected' : '' }}>D3/Sederajat</option>
                                        <option value="Paket C" {{ old('lulusan') === 'Paket C' ? 'selected' : '' }}>Paket C</option>
                                        <option value="S1/D4/Sederajat" {{ old('lulusan') === 'S1/D4/Sederajat' ? 'selected' : '' }}>S1/D4/Sederajat</option>
                                    </select>
                                </div>
                                <div id="sekolah_wrapper" style="{{ old('lulusan') !== 'SMA/MA/SMK/Sederajat' && old('lulusan') !== null ? 'display: block;' : 'display: none;' }}">
                                    <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Nama Sekolah / Universitas</label>
                                    <input type="text" name="sekolah" id="sekolah" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" placeholder="Nama Sekolah / Universitas" value="{{ old('sekolah') }}">
                                </div>
                            </div>

                            <!-- Ukuran Jaket dan Pekerjaan (2 grid) -->
                            <div data-aos="fade-up" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Ukuran Jaket Almamater</label>
                                    <select name="jaket" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" required>
                                        <option value="">-- Pilih Ukuran --</option>
                                        <option value="S" {{ old('jaket') == 'S' ? 'selected' : '' }}>S</option>
                                        <option value="M" {{ old('jaket') == 'M' ? 'selected' : '' }}>M</option>
                                        <option value="L" {{ old('jaket') == 'L' ? 'selected' : '' }}>L</option>
                                        <option value="XL" {{ old('jaket') == 'XL' ? 'selected' : '' }}>XL</option>
                                        <option value="XXL" {{ old('jaket') == 'XXL' ? 'selected' : '' }}>XXL</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Pekerjaan</label>
                                    <select name="pekerjaan" id="pekerjaan" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" required>
                                        <option value="">-- Pilih Pekerjaan --</option>
                                        <option value="Belum Bekerja" {{ old('pekerjaan') == 'Belum Bekerja' ? 'selected' : '' }}>Belum Bekerja</option>
                                        <option value="Karyawan Swasta" {{ old('pekerjaan') == 'Karyawan Swasta' ? 'selected' : '' }}>Karyawan Swasta</option>
                                        <option value="Wiraswasta" {{ old('pekerjaan') == 'Wiraswasta' ? 'selected' : '' }}>Wiraswasta</option>
                                        <option value="ASN/PNS" {{ old('pekerjaan') == 'ASN/PNS' ? 'selected' : '' }}>ASN/PNS</option>
                                        <option value="Lainnya" {{ old('pekerjaan') == 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Input Pekerjaan Lainnya - Muncul saat pilih Lainnya -->
                            <div data-aos="fade-up" class="mt-6" id="pekerjaan_lainnya_wrapper" style="{{ old('pekerjaan') == 'Lainnya' ? 'display: block;' : 'display: none;' }}">
                                <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Pekerjaan (Lainnya)</label>
                                <input type="text" name="pekerjaan_lainnya" id="pekerjaan_lainnya" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" placeholder="Masukkan pekerjaan Anda" value="{{ old('pekerjaan_lainnya') }}">
                                <p class="text-xs text-gray-500 mt-1">*Silakan isi pekerjaan Anda jika memilih "Lainnya"</p>
                            </div>

                            <!-- Sumber Informasi - Full Width -->
                            <div data-aos="fade-up" class="mt-6">
                                <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Sumber Informasi Mengetahui Kampus</label>
                                <select name="info" class="mt-1 p-4 border border-gray-300 rounded-lg w-full focus:ring-primary focus:border-primary text-base" required>
                                    <option value="">-- Pilih Sumber Informasi --</option>
                                    <option value="Facebook" {{ old('info') == 'Facebook' ? 'selected' : '' }}>Facebook</option>
                                    <option value="Instagram" {{ old('info') == 'Instagram' ? 'selected' : '' }}>Instagram</option>
                                    <option value="Tiktok" {{ old('info') == 'Tiktok' ? 'selected' : '' }}>Tiktok</option>
                                    <option value="Google" {{ old('info') == 'Google' ? 'selected' : '' }}>Google</option>
                                    <option value="Datang Langsung" {{ old('info') == 'Datang Langsung' ? 'selected' : '' }}>Datang Langsung</option>
                                    <option value="Teman/Keluarga" {{ old('info') == 'Teman/Keluarga' ? 'selected' : '' }}>Teman/Keluarga</option>
                                    <option value="Brosur" {{ old('info') == 'Brosur' ? 'selected' : '' }}>Brosur</option>
                                    <option value="Spanduk" {{ old('info') == 'Spanduk' ? 'selected' : '' }}>Spanduk</option>
                                    <option value="RAP (Recruit Affiliate Program)" {{ old('info') == 'RAP (Recruit Affiliate Program)' ? 'selected' : '' }}>RAP (Recruit Affiliate Program)</option>
                                </select>
                            </div>

                            <!-- Hidden Inputs -->
                            <input type="hidden" name="biaya" value="Bulanan">

                            <!-- Submit Button -->
                            <div data-aos="fade-up" class="mt-8 text-center">
                                <button type="submit" id="submit-btn" style="color:#fff;" class="w-full md:w-1/2 bg-primary py-4 rounded-lg hover:bg-accent transition text-base font-semibold">
                                    DAFTAR SEKARANG
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@push('addon-script')
<script>
    // Script untuk dynamic jurusan berdasarkan kelas
    (function() {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initAll);
        } else {
            initAll();
        }
        
        function initAll() {
            initPekerjaanLainnya();
            initLulusanToggle();
            initKelasJurusan();
        }
        
        function initKelasJurusan() {
            const kelasSelect = document.getElementById('kelas');
            const jurusanSelect = document.getElementById('jurusan');
            
            if (!kelasSelect || !jurusanSelect) {
                console.error('Elemen kelas atau jurusan tidak ditemukan');
                return;
            }
            
            // Function untuk mengambil jurusan berdasarkan kelas
            function loadJurusan(kelas, selectedJurusan = null) {
                if (!kelas) {
                    jurusanSelect.innerHTML = '<option value="">-- Pilih Kelas Terlebih Dahulu --</option>';
                    jurusanSelect.disabled = true;
                    return;
                }
                
                // Tampilkan loading
                jurusanSelect.innerHTML = '<option value="">Loading...</option>';
                jurusanSelect.disabled = true;
                
                // Fetch data jurusan
                fetch(`/get-jurusan/${encodeURIComponent(kelas)}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.length === 0) {
                            jurusanSelect.innerHTML = '<option value="">-- Tidak ada jurusan untuk kelas ini --</option>';
                            jurusanSelect.disabled = true;
                        } else {
                            let options = '<option value="">-- Pilih Jurusan --</option>';
                            data.forEach(jurusan => {
                                const selected = (selectedJurusan === jurusan.jurusan) ? 'selected' : '';
                                options += `<option value="${jurusan.jurusan}" ${selected}>${jurusan.jurusan}</option>`;
                            });
                            jurusanSelect.innerHTML = options;
                            jurusanSelect.disabled = false;
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching jurusan:', error);
                        jurusanSelect.innerHTML = '<option value="">-- Error loading data --</option>';
                        jurusanSelect.disabled = true;
                    });
            }
            
            // Event listener ketika kelas berubah
            kelasSelect.addEventListener('change', function() {
                const selectedKelas = this.value;
                const oldJurusan = "{{ old('jurusan') }}";
                loadJurusan(selectedKelas, oldJurusan);
            });
            
            // Load initial jika ada old value kelas
            const initialKelas = "{{ old('kelas') }}";
            const oldJurusan = "{{ old('jurusan') }}";
            if (initialKelas) {
                kelasSelect.value = initialKelas;
                loadJurusan(initialKelas, oldJurusan);
            }
        }
        
        function initPekerjaanLainnya() {
            var pekerjaanSelect = document.getElementById('pekerjaan');
            var pekerjaanLainnyaWrapper = document.getElementById('pekerjaan_lainnya_wrapper');
            var pekerjaanLainnyaInput = document.getElementById('pekerjaan_lainnya');
            
            if (!pekerjaanSelect) {
                console.error('Elemen dengan id "pekerjaan" tidak ditemukan!');
                return;
            }
            
            if (!pekerjaanLainnyaWrapper) {
                console.error('Elemen dengan id "pekerjaan_lainnya_wrapper" tidak ditemukan!');
                return;
            }
            
            // Function untuk toggle
            function togglePekerjaanLainnya() {
                if (pekerjaanSelect.value === 'Lainnya') {
                    pekerjaanLainnyaWrapper.style.display = 'block';
                    if (pekerjaanLainnyaInput) {
                        pekerjaanLainnyaInput.setAttribute('required', 'required');
                    }
                } else {
                    pekerjaanLainnyaWrapper.style.display = 'none';
                    if (pekerjaanLainnyaInput) {
                        pekerjaanLainnyaInput.removeAttribute('required');
                        pekerjaanLainnyaInput.value = '';
                    }
                }
            }
            
            // Jalankan pertama kali
            togglePekerjaanLainnya();
            
            // Event listener
            pekerjaanSelect.addEventListener('change', togglePekerjaanLainnya);
        }
        
        function initLulusanToggle() {
            var lulusanSelect = document.getElementById('lulusan');
            var sekolahWrapper = document.getElementById('sekolah_wrapper');
            var sekolahInput = document.getElementById('sekolah');
            
            if (!lulusanSelect) {
                console.error('Elemen dengan id "lulusan" tidak ditemukan!');
                return;
            }
            
            if (!sekolahWrapper) {
                console.error('Elemen dengan id "sekolah_wrapper" tidak ditemukan!');
                return;
            }
            
            if (!sekolahInput) {
                console.error('Elemen dengan id "sekolah" tidak ditemukan!');
                return;
            }
            
            // Function untuk toggle Asal Sekolah
            function toggleSekolah() {
                var selectedValue = lulusanSelect.value;
                // Tampilkan hanya jika BUKAN SMA/MA/SMK/Sederajat
                // dan sudah ada pilihan (tidak kosong)
                if (selectedValue !== 'SMA/MA/SMK/Sederajat' && selectedValue !== '') {
                    sekolahWrapper.style.display = 'block';
                    sekolahInput.setAttribute('required', 'required');
                } else {
                    sekolahWrapper.style.display = 'none';
                    sekolahInput.removeAttribute('required');
                    sekolahInput.value = '';
                }
            }
            
            // Jalankan pertama kali
            toggleSekolah();
            
            // Event listener
            lulusanSelect.addEventListener('change', toggleSekolah);
        }
    })();
</script>
@endpush