<?php $__env->startSection('title', 'Daftar Online'); ?>



<?php $__env->startSection('content'); ?>
<br><br>
    <?php if (isset($component)) { $__componentOriginal5de6c61179b5c431782cc0aa46c5056175d068df = $component; } ?>
<?php $component = $__env->getContainer()->make(App\View\Components\HeaderSectionPage::class, ['title' => 'Daftar Online '.e($settings['nama kampus'] ?? 'Nama kampus tidak tersedia').'','breadcrumbHome' => 'Home','breadcrumbCurrent' => 'Daftar Online']); ?>
<?php $component->withName('header-section-page'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal5de6c61179b5c431782cc0aa46c5056175d068df)): ?>
<?php $component = $__componentOriginal5de6c61179b5c431782cc0aa46c5056175d068df; ?>
<?php unset($__componentOriginal5de6c61179b5c431782cc0aa46c5056175d068df); ?>
<?php endif; ?>

    <!-- Step 2 -->
    <?php 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="<?php echo e(route('registration.store')); ?>" id="mainForm">
                            <?php 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">
                                        <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <li><?php echo e($error); ?></li>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </ul>
                                </div>
                            <?php endif; ?>
                            <?php echo csrf_field(); ?>
                            
                            <!-- 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">
                                    <?php echo e($settings['nama kampus'] ?? '#'); ?>

                                </p>
                                <input type="hidden" name="kampus" value="<?php echo e($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>
                                    <?php $__currentLoopData = $kelasList; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($item->kategori); ?>" <?php echo e(old('kelas') == $item->kategori ? 'selected' : ''); ?>>
                                            <?php echo e($item->kategori); ?>

                                        </option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </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="<?php echo e(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="<?php echo e(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="<?php echo e(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="<?php echo e(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" <?php echo e(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" <?php echo e(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="<?php echo e(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="<?php echo e(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="<?php echo e(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="<?php echo e(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="<?php echo e(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" <?php echo e(old('agama') == 'Islam' ? 'selected' : ''); ?>>Islam</option>
                                        <option value="Kristen" <?php echo e(old('agama') == 'Kristen' ? 'selected' : ''); ?>>Kristen</option>
                                        <option value="Katolik" <?php echo e(old('agama') == 'Katolik' ? 'selected' : ''); ?>>Katolik</option>
                                        <option value="Hindu" <?php echo e(old('agama') == 'Hindu' ? 'selected' : ''); ?>>Hindu</option>
                                        <option value="Buddha" <?php echo e(old('agama') == 'Buddha' ? 'selected' : ''); ?>>Buddha</option>
                                        <option value="Konghucu" <?php echo e(old('agama') == 'Konghucu' ? 'selected' : ''); ?>>Konghucu</option>
                                        <option value="Protestan" <?php echo e(old('agama') == 'Protestan' ? 'selected' : ''); ?>>Protestan</option>
                                        <option value="Lainnya" <?php echo e(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="<?php echo e(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 <?php echo e(old('lulusan') === null ? 'selected' : ''); ?>>-- Pilih Lulusan --</option>
                                        <option value="SMA/MA/SMK/Sederajat" <?php echo e(old('lulusan') === 'SMA/MA/SMK/Sederajat' ? 'selected' : ''); ?>>SMA/MA/SMK/Sederajat</option>
                                        <option value="D3/Sederajat" <?php echo e(old('lulusan') === 'D3/Sederajat' ? 'selected' : ''); ?>>D3/Sederajat</option>
                                        <option value="Paket C" <?php echo e(old('lulusan') === 'Paket C' ? 'selected' : ''); ?>>Paket C</option>
                                        <option value="S1/D4/Sederajat" <?php echo e(old('lulusan') === 'S1/D4/Sederajat' ? 'selected' : ''); ?>>S1/D4/Sederajat</option>
                                    </select>
                                </div>
                                <div id="sekolah_wrapper" style="<?php echo e(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="<?php echo e(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" <?php echo e(old('jaket') == 'S' ? 'selected' : ''); ?>>S</option>
                                        <option value="M" <?php echo e(old('jaket') == 'M' ? 'selected' : ''); ?>>M</option>
                                        <option value="L" <?php echo e(old('jaket') == 'L' ? 'selected' : ''); ?>>L</option>
                                        <option value="XL" <?php echo e(old('jaket') == 'XL' ? 'selected' : ''); ?>>XL</option>
                                        <option value="XXL" <?php echo e(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" <?php echo e(old('pekerjaan') == 'Belum Bekerja' ? 'selected' : ''); ?>>Belum Bekerja</option>
                                        <option value="Karyawan Swasta" <?php echo e(old('pekerjaan') == 'Karyawan Swasta' ? 'selected' : ''); ?>>Karyawan Swasta</option>
                                        <option value="Wiraswasta" <?php echo e(old('pekerjaan') == 'Wiraswasta' ? 'selected' : ''); ?>>Wiraswasta</option>
                                        <option value="ASN/PNS" <?php echo e(old('pekerjaan') == 'ASN/PNS' ? 'selected' : ''); ?>>ASN/PNS</option>
                                        <option value="Lainnya" <?php echo e(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="<?php echo e(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="<?php echo e(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" <?php echo e(old('info') == 'Facebook' ? 'selected' : ''); ?>>Facebook</option>
                                    <option value="Instagram" <?php echo e(old('info') == 'Instagram' ? 'selected' : ''); ?>>Instagram</option>
                                    <option value="Tiktok" <?php echo e(old('info') == 'Tiktok' ? 'selected' : ''); ?>>Tiktok</option>
                                    <option value="Google" <?php echo e(old('info') == 'Google' ? 'selected' : ''); ?>>Google</option>
                                    <option value="Datang Langsung" <?php echo e(old('info') == 'Datang Langsung' ? 'selected' : ''); ?>>Datang Langsung</option>
                                    <option value="Teman/Keluarga" <?php echo e(old('info') == 'Teman/Keluarga' ? 'selected' : ''); ?>>Teman/Keluarga</option>
                                    <option value="Brosur" <?php echo e(old('info') == 'Brosur' ? 'selected' : ''); ?>>Brosur</option>
                                    <option value="Spanduk" <?php echo e(old('info') == 'Spanduk' ? 'selected' : ''); ?>>Spanduk</option>
                                    <option value="RAP (Recruit Affiliate Program)" <?php echo e(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="button" id="show-privacy-modal-btn" style="color:#fff; background-color: #1a56db;" class="w-full md:w-1/2 py-4 rounded-lg hover:bg-blue-700 transition text-base font-semibold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300">
                                    <span class="flex items-center justify-center gap-2">
                                        <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                        DAFTAR SEKARANG
                                    </span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <!-- Modal Privacy Policy dengan sumber PDF dari online -->
    <div id="privacyModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4 py-8">
            <!-- Backdrop dengan blur effect -->
            <div class="fixed inset-0 transition-all duration-300 bg-black bg-opacity-50 backdrop-blur-sm" id="modal-backdrop"></div>
            
            <!-- Modal Container -->
            <div class="relative bg-white rounded-2xl shadow-2xl transform transition-all duration-300 scale-95 opacity-0 w-full max-w-2xl mx-auto" id="modal-container">
                
                <!-- Header dengan warna primary seperti form -->
                <div class="relative overflow-hidden rounded-t-2xl px-6 py-5" style="background: linear-gradient(135deg, #1a56db 0%, #0e3a8a 100%);">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <!--<div class="p-2 bg-white bg-opacity-20 rounded-xl">-->
                            <!--    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">-->
                            <!--        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>-->
                            <!--    </svg>-->
                            <!--</div>-->
                            <!--<div>-->
                            <!--    <h3 class="text-xl font-bold text-white font-poppins">Kebijakan Privasi</h3>-->
                            <!--    <p class="text-sm text-blue-100 font-dmsans mt-0.5">Baca dengan seksama sebelum melanjutkan</p>-->
                            <!--</div>-->
                        </div>
                        <button type="button" id="close-modal-btn" class="text-white hover:text-blue-200 transition-colors duration-200">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>
                </div>
                
                <!-- PDF Viewer Area -->
                <div class="p-6 bg-gray-50">
                    <!-- PDF Controls -->
                    <div class="flex items-center justify-between mb-3 text-sm text-gray-600">
                        <div class="flex items-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                            <span class="font-dmsans">Dokumen Kebijakan Privasi</span>
                        </div>
                        <a href="https://akademikebidanan-ismahusada.ac.id/pdf/privacy-policy.pdf" target="_blank" class="hover:text-blue-700 transition-colors flex items-center gap-1" style="color: #1a56db;">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                            </svg>
                            Buka di tab baru
                        </a>
                    </div>
                    
                    <!-- PDF Viewer dengan ukuran lebih compact - Mengambil dari URL online -->
                    <div class="border border-gray-200 rounded-xl overflow-hidden bg-white shadow-sm">
                        <iframe 
                            src="https://akademikebidanan-ismahusada.ac.id/pdf/privacy-policy.pdf#toolbar=0&navpanes=0&scrollbar=1&view=FitH" 
                            class="w-full"
                            style="height: 400px;"
                            frameborder="0"
                            id="pdf-viewer">
                        </iframe>
                    </div>
                    
                    <!-- Reading indicator -->
                    <div class="mt-3 flex items-center justify-between" id="scroll-indicator">
                        <div class="flex items-center gap-2 text-xs text-gray-500">
                            <svg class="w-4 h-4 text-blue-500 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
                            </svg>
                            <span class="font-dmsans">Gulir ke bawah untuk membaca seluruh dokumen</span>
                        </div>
                    </div>
                </div>
                
                <!-- Footer dengan persetujuan -->
                <div class="px-6 py-5 bg-white border-t border-gray-100">
                    <!-- Checkbox dengan desain modern warna primary -->
                    <label class="flex items-start gap-3 cursor-pointer group">
                        <div class="flex items-center h-5">
                            <input type="checkbox" id="privacy-checkbox" class="w-5 h-5 rounded border-2 border-gray-300 focus:ring-2 transition-all duration-200" style="color: #1a56db; accent-color: #1a56db;">
                        </div>
                        <div class="flex-1">
                            <span class="text-sm text-gray-700 font-dmsans leading-relaxed">
                                Saya telah membaca, memahami, dan menyetujui 
                                <span class="font-semibold" style="color: #1a56db;">Kebijakan Privasi</span> 
                                serta 
                                <span class="font-semibold" style="color: #1a56db;">Syarat dan Ketentuan</span> 
                                yang berlaku.
                            </span>
                        </div>
                    </label>
                    
                    <!-- Action Buttons dengan warna primary -->
                    <div class="flex gap-3 mt-6">
                        <button type="button" id="cancel-modal-btn" class="flex-1 px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 rounded-xl hover:bg-gray-200 transition-all duration-200 font-dmsans">
                            Batal
                        </button>
                        <button type="button" id="confirm-submit-btn" disabled class="flex-1 px-4 py-2.5 text-sm font-medium text-white rounded-xl transition-all duration-200 font-dmsans bg-gray-300 cursor-not-allowed relative overflow-hidden group">
                            <span class="relative z-10">Setuju & Daftar</span>
                            <span class="absolute inset-0 transition-opacity duration-200 opacity-0 group-hover:opacity-100" style="background: linear-gradient(135deg, #1a56db 0%, #0e3a8a 100%);"></span>
                        </button>
                    </div>
                </div>
                
                <!-- Decorative element -->
                <div class="absolute top-0 right-0 w-32 h-32 rounded-full filter blur-3xl opacity-10 -z-10" style="background: #1a56db;"></div>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('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();
            initModernPrivacyModal();
        }
        
        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 loadJurusan(kelas, selectedJurusan = null) {
                if (!kelas) {
                    jurusanSelect.innerHTML = '<option value="">-- Pilih Kelas Terlebih Dahulu --</option>';
                    jurusanSelect.disabled = true;
                    return;
                }
                
                jurusanSelect.innerHTML = '<option value="">Loading...</option>';
                jurusanSelect.disabled = true;
                
                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;
                    });
            }
            
            kelasSelect.addEventListener('change', function() {
                const selectedKelas = this.value;
                const oldJurusan = "<?php echo e(old('jurusan')); ?>";
                loadJurusan(selectedKelas, oldJurusan);
            });
            
            const initialKelas = "<?php echo e(old('kelas')); ?>";
            const oldJurusan = "<?php echo e(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 || !pekerjaanLainnyaWrapper) return;
            
            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 = '';
                    }
                }
            }
            
            togglePekerjaanLainnya();
            pekerjaanSelect.addEventListener('change', togglePekerjaanLainnya);
        }
        
        function initLulusanToggle() {
            var lulusanSelect = document.getElementById('lulusan');
            var sekolahWrapper = document.getElementById('sekolah_wrapper');
            var sekolahInput = document.getElementById('sekolah');
            
            if (!lulusanSelect || !sekolahWrapper) return;
            
            function toggleSekolah() {
                var selectedValue = lulusanSelect.value;
                if (selectedValue !== 'SMA/MA/SMK/Sederajat' && selectedValue !== '') {
                    sekolahWrapper.style.display = 'block';
                    if (sekolahInput) sekolahInput.setAttribute('required', 'required');
                } else {
                    sekolahWrapper.style.display = 'none';
                    if (sekolahInput) {
                        sekolahInput.removeAttribute('required');
                        sekolahInput.value = '';
                    }
                }
            }
            
            toggleSekolah();
            lulusanSelect.addEventListener('change', toggleSekolah);
        }
        
        function initModernPrivacyModal() {
            const modal = document.getElementById('privacyModal');
            const modalContainer = document.getElementById('modal-container');
            const showModalBtn = document.getElementById('show-privacy-modal-btn');
            const closeModalBtn = document.getElementById('close-modal-btn');
            const cancelModalBtn = document.getElementById('cancel-modal-btn');
            const confirmBtn = document.getElementById('confirm-submit-btn');
            const privacyCheckbox = document.getElementById('privacy-checkbox');
            const form = document.getElementById('mainForm');
            
            // Animasi show modal
            function showModal() {
                modal.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
                
                setTimeout(() => {
                    modalContainer.classList.remove('scale-95', 'opacity-0');
                    modalContainer.classList.add('scale-100', 'opacity-100');
                }, 10);
            }
            
            function closeModal() {
                modalContainer.classList.remove('scale-100', 'opacity-100');
                modalContainer.classList.add('scale-95', 'opacity-0');
                
                setTimeout(() => {
                    modal.classList.add('hidden');
                    document.body.style.overflow = '';
                }, 300);
            }
            
            showModalBtn.addEventListener('click', function(e) {
                e.preventDefault();
                privacyCheckbox.checked = false;
                confirmBtn.disabled = true;
                confirmBtn.classList.remove('hover:shadow-lg', 'cursor-pointer');
                confirmBtn.classList.add('bg-gray-300', 'cursor-not-allowed');
                confirmBtn.style.background = '#9ca3af';
                showModal();
            });
            
            closeModalBtn.addEventListener('click', closeModal);
            cancelModalBtn.addEventListener('click', closeModal);
            document.getElementById('modal-backdrop').addEventListener('click', closeModal);
            
            // Checkbox handler
            privacyCheckbox.addEventListener('change', function() {
                if (this.checked) {
                    confirmBtn.disabled = false;
                    confirmBtn.classList.remove('bg-gray-300', 'cursor-not-allowed');
                    confirmBtn.classList.add('hover:shadow-lg', 'cursor-pointer');
                    confirmBtn.style.background = 'linear-gradient(135deg, #1a56db 0%, #0e3a8a 100%)';
                } else {
                    confirmBtn.disabled = true;
                    confirmBtn.classList.remove('hover:shadow-lg', 'cursor-pointer');
                    confirmBtn.classList.add('bg-gray-300', 'cursor-not-allowed');
                    confirmBtn.style.background = '#9ca3af';
                }
            });
            
            confirmBtn.addEventListener('click', function() {
                if (privacyCheckbox.checked) {
                    form.submit();
                }
            });
            
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
                    closeModal();
                }
            });
        }
    })();
</script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('Frontend.Layouts.app2', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/edunesiaserver/public_html/K2/WEB_KAMPUS/WEB_TEMPLATE/Ijo-IjoTua/resources/views/Frontend/daftaronline.blade.php ENDPATH**/ ?>