<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
    <!-- Dynamic Header -->
    <div class="mb-12">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8">
            <div class="relative">
                <div
                    class="absolute -left-3 -top-3 w-20 h-20 bg-gradient-to-br from-violet-500/10 to-indigo-600/10 rounded-full blur-xl">
                </div>
                <h1 class="text-4xl font-black tracking-tight dark:text-white relative z-10 mb-2">
                    <span class="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent">
                        Tambah Mahasiswa
                    </span>
                </h1>
                <p class="text-slate-500 dark:text-slate-400 text-sm pl-1">
                    <i data-lucide="user-plus" class="w-4 h-4 inline mr-2"></i>
                    Tambahkan data mahasiswa baru ke dalam sistem
                </p>
            </div>

            <div class="flex items-center gap-4">
                <a href="<?php echo e(route('mahasiswa.index')); ?>"
                    class="px-4 py-2.5 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-700 transition-all flex items-center gap-2 shadow-sm">
                    <i data-lucide="arrow-left" class="w-4 h-4"></i>
                    <span>Kembali</span>
                </a>
            </div>
        </div>

        <!-- Main Form Card -->
        <div class="max-w-4xl mx-auto">
            <div class="group relative">
                <div
                    class="absolute -inset-1 bg-gradient-to-r from-violet-600/10 to-indigo-600/10 rounded-3xl blur opacity-0 group-hover:opacity-30 transition duration-500">
                </div>
                <div
                    class="relative bg-white dark:bg-[#1a1a2e] p-8 rounded-3xl border border-slate-200 dark:border-white/5 shadow-xl">

                    <!-- Form Header -->
                    <div class="flex items-center gap-4 mb-8 pb-6 border-b border-slate-100 dark:border-white/5">
                        <div
                            class="w-12 h-12 rounded-2xl bg-gradient-to-br from-violet-500/10 to-indigo-600/10 text-violet-500 flex items-center justify-center">
                            <i data-lucide="user-plus" class="w-6 h-6"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white">Form Tambah Mahasiswa</h3>
                            <p class="text-sm text-slate-500 dark:text-slate-400">Isi form berikut untuk menambahkan
                                mahasiswa baru</p>
                        </div>
                    </div>

                    <!-- Error Messages -->
                    <?php if($errors->any()): ?>
                        <div
                            class="mb-6 p-4 bg-gradient-to-r from-red-500/10 to-rose-600/10 border border-red-500/20 rounded-2xl animate-fade-in">
                            <div class="flex items-start gap-3">
                                <div
                                    class="w-10 h-10 rounded-xl bg-red-500/10 text-red-500 flex items-center justify-center flex-shrink-0">
                                    <i data-lucide="alert-triangle" class="w-5 h-5"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-bold text-red-700 dark:text-red-400 mb-2">Terjadi kesalahan:</h4>
                                    <ul class="space-y-1">
                                        <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <li class="text-sm text-red-600 dark:text-red-300">• <?php echo e($error); ?>

                                            </li>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>

                    <!-- Form -->
                    <form action="<?php echo e(route('mahasiswa.store')); ?>" method="POST" class="space-y-6" id="mahasiswaForm">
                        <?php echo csrf_field(); ?>

                        <!-- SECTION 1: DATA AKADEMIK -->
                        <div class="bg-slate-50 dark:bg-white/5 p-6 rounded-xl space-y-4">
                            <h4 class="font-semibold text-lg text-gray-900 dark:text-white flex items-center gap-2">
                                <i data-lucide="graduation-cap" class="w-5 h-5 text-violet-500"></i>
                                Data Akademik
                            </h4>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <!-- Kampus -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Kampus <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <i data-lucide="school"
                                            class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                        <select name="kampus_id" id="kampus_id" required
                                            class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500 appearance-none cursor-pointer">
                                            <option value="">-- Pilih Kampus --</option>
                                            <?php $__currentLoopData = $kampus; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $k): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <option value="<?php echo e($k->id); ?>"
                                                    <?php echo e(old('kampus_id') == $k->id ? 'selected' : ''); ?>>
                                                    <?php echo e($k->nama); ?>

                                                    <?php echo e($k->singkatan ? '(' . $k->singkatan . ')' : ''); ?>

                                                </option>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </select>
                                        <i data-lucide="chevron-down"
                                            class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
                                    </div>
                                </div>

                                <!-- Program Studi -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Program Studi <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <i data-lucide="book-open"
                                            class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                        <select name="prodi_id" id="prodi_id" required disabled
                                            class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500 appearance-none cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed">
                                            <option value="">-- Pilih Kampus Terlebih Dahulu --</option>
                                        </select>
                                        <i data-lucide="chevron-down"
                                            class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
                                    </div>
                                    <div id="prodi_loading" class="hidden mt-2">
                                        <div class="flex items-center text-sm text-slate-500">
                                            <i data-lucide="loader-2" class="w-4 h-4 animate-spin mr-2"></i>
                                            Memuat program studi...
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <!-- NIM -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        NIM <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <i data-lucide="hash"
                                            class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                        <input type="text" name="nim" value="<?php echo e(old('nim')); ?>"
                                            class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500"
                                            placeholder="Masukkan NIM" required>
                                    </div>
                                </div>

                                <!-- Angkatan -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Angkatan <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <i data-lucide="hash"
                                            class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                        <input type="text" name="angkatan" value="<?php echo e(old('angkatan')); ?>"
                                            class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500"
                                            placeholder="Contoh: 1, 2, 3, 4 dll" required>
                                    </div>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <!-- Kelompok -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Kelompok <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <i data-lucide="users"
                                                class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                            <select name="kelompok" required
                                                class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500 appearance-none cursor-pointer">
                                                <option value="">-- Pilih Kelompok --</option>
                                                <option value="SMA"
                                                    <?php echo e(old('kelompok') == 'SMA' ? 'selected' : ''); ?>>
                                                    SMA</option>
                                                <option value="D3"
                                                    <?php echo e(old('kelompok') == 'D3' ? 'selected' : ''); ?>>D3
                                                </option>
                                                <option value="S1"
                                                    <?php echo e(old('kelompok') == 'S1' ? 'selected' : ''); ?>>S1
                                                </option>
                                            </select>
                                            <i data-lucide="chevron-down"
                                                class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
                                        </div>
                                    </div>

                                    <!-- Status Masuk -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Status Masuk <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <i data-lucide="user-check"
                                                class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                            <select name="status_masuk" required
                                                class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500 appearance-none cursor-pointer">
                                                <option value="">-- Pilih Status --</option>
                                                <option value="Baru"
                                                    <?php echo e(old('status_masuk') == 'Baru' ? 'selected' : ''); ?>>Baru</option>
                                                <option value="Pindahan"
                                                    <?php echo e(old('status_masuk') == 'Pindahan' ? 'selected' : ''); ?>>Pindahan
                                                </option>
                                            </select>
                                            <i data-lucide="chevron-down"
                                                class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
                                        </div>
                                    </div>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <!-- Tahun Ajaran -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Tahun Akademik <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <i data-lucide="calendar-range"
                                                class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                            <select name="tahun_ajaran" id="tahun_ajaran" required
                                                class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500 appearance-none cursor-pointer">
                                                <option value="">-- Pilih Tahun Akademik --</option>
                                                <?php $__currentLoopData = $tahunAjaran; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $group): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <optgroup label="<?php echo e($group['label']); ?>">
                                                        <?php $__currentLoopData = $group['options']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $option): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                            <option value="<?php echo e($option['value']); ?>"
                                                                <?php echo e(old('tahun_ajaran') == $option['value'] ? 'selected' : ''); ?>>
                                                                <?php echo e($option['label']); ?>

                                                            </option>
                                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                    </optgroup>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            </select>
                                            <i data-lucide="chevron-down"
                                                class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
                                        </div>
                                        <?php $__errorArgs = ['tahun_ajaran'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                            <p class="mt-2 text-sm text-red-600 dark:text-red-400"><?php echo e($message); ?></p>
                                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                    </div>

                                    <!-- Waktu Kuliah -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Waktu Kuliah <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <i data-lucide="clock"
                                                class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                            <select name="waktu_kuliah" required
                                                class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500 appearance-none cursor-pointer">
                                                <option value="">-- Pilih Waktu Kuliah --</option>
                                                <option value="Reguler Pagi"
                                                    <?php echo e(old('waktu_kuliah') == 'Reguler Pagi' ? 'selected' : ''); ?>>
                                                    Reguler
                                                    Pagi</option>
                                                <option value="Reguler Malam/Sore"
                                                    <?php echo e(old('waktu_kuliah') == 'Reguler Malam/Sore' ? 'selected' : ''); ?>>
                                                    Reguler Malam/Sore</option>
                                                <option value="Kelas Weekend"
                                                    <?php echo e(old('waktu_kuliah') == 'Kelas Weekend' ? 'selected' : ''); ?>>
                                                    Kelas
                                                    Weekend</option>
                                                <option value="E-learning/Online"
                                                    <?php echo e(old('waktu_kuliah') == 'E-learning/Online' ? 'selected' : ''); ?>>
                                                    E-learning/Online</option>
                                            </select>
                                            <i data-lucide="chevron-down"
                                                class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- SECTION 2: DATA PRIBADI -->
                            <div class="bg-slate-50 dark:bg-white/5 p-6 rounded-xl space-y-4">
                                <h4
                                    class="font-semibold text-lg text-gray-900 dark:text-white flex items-center gap-2">
                                    <i data-lucide="user" class="w-5 h-5 text-violet-500"></i>
                                    Data Pribadi
                                </h4>

                                <!-- Nama Lengkap -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Nama Lengkap <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <i data-lucide="user"
                                            class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                        <input type="text" id="nama" name="nama"
                                            value="<?php echo e(old('nama')); ?>"
                                            class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500"
                                            placeholder="Masukkan nama lengkap" required>
                                    </div>
                                </div>

                                <!-- NIK -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        NIK KTP <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <i data-lucide="credit-card"
                                            class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                        <input type="text" name="nik" value="<?php echo e(old('nik')); ?>"
                                            class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500"
                                            placeholder="Masukkan NIK" maxlength="16" required>
                                    </div>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <!-- Tempat Lahir -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Tempat Lahir <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <i data-lucide="map-pin"
                                                class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                            <input type="text" name="tempat_lahir"
                                                value="<?php echo e(old('tempat_lahir')); ?>"
                                                class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500"
                                                placeholder="Tempat lahir" required>
                                        </div>
                                    </div>

                                    <!-- Tanggal Lahir -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Tanggal Lahir <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <i data-lucide="calendar"
                                                class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                            <input type="date" name="tanggal_lahir"
                                                value="<?php echo e(old('tanggal_lahir')); ?>"
                                                class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500"
                                                required>
                                        </div>
                                    </div>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <!-- Agama -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Agama <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <i data-lucide="church"
                                                class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                            <select name="agama" required
                                                class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500 appearance-none cursor-pointer">
                                                <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>
                                            </select>
                                            <i data-lucide="chevron-down"
                                                class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
                                        </div>
                                    </div>

                                    <!-- Jenis Kelamin -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Jenis Kelamin <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <i data-lucide="users"
                                                class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                            <select name="jenis_kelamin" required
                                                class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500 appearance-none cursor-pointer">
                                                <option value="">-- Pilih Jenis Kelamin --</option>
                                                <option value="Laki-laki"
                                                    <?php echo e(old('jenis_kelamin') == 'Laki-laki' ? 'selected' : ''); ?>>
                                                    Laki-laki
                                                </option>
                                                <option value="Perempuan"
                                                    <?php echo e(old('jenis_kelamin') == 'Perempuan' ? 'selected' : ''); ?>>
                                                    Perempuan
                                                </option>
                                            </select>
                                            <i data-lucide="chevron-down"
                                                class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
                                        </div>
                                    </div>
                                </div>

                                <!-- Alamat -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Alamat <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <i data-lucide="map-pin"
                                            class="absolute left-4 top-4 w-4 h-4 text-slate-400"></i>
                                        <textarea name="alamat" rows="3" required
                                            class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500 resize-none"
                                            placeholder="Masukkan alamat lengkap"><?php echo e(old('alamat')); ?></textarea>
                                    </div>
                                </div>
                            </div>

                            <!-- SECTION 3: DATA KONTAK -->
                            <div class="bg-slate-50 dark:bg-white/5 p-6 rounded-xl space-y-4">
                                <h4
                                    class="font-semibold text-lg text-gray-900 dark:text-white flex items-center gap-2">
                                    <i data-lucide="phone" class="w-5 h-5 text-violet-500"></i>
                                    Data Kontak
                                </h4>

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <!-- No WA -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            No WhatsApp <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <i data-lucide="phone"
                                                class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                            <input type="text" name="no_wa" value="<?php echo e(old('no_wa')); ?>"
                                                class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500"
                                                placeholder="Contoh: 08123456789" required>
                                        </div>
                                    </div>

                                    <!-- No Darurat -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            No Darurat (Orang Tidak Serumah) <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <i data-lucide="phone-call"
                                                class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                            <input type="text" name="no_darurat" value="<?php echo e(old('no_darurat')); ?>"
                                                class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500"
                                                placeholder="Nomor kontak darurat" required>
                                        </div>
                                    </div>
                                </div>

                                <!-- Email -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Email <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <i data-lucide="mail"
                                            class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                        <input type="email" name="email" value="<?php echo e(old('email')); ?>"
                                            class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500"
                                            placeholder="contoh@email.com" required>
                                    </div>
                                </div>
                            </div>

                            <!-- SECTION 4: DATA ORANG TUA -->
                            <div class="bg-slate-50 dark:bg-white/5 p-6 rounded-xl space-y-4">
                                <h4
                                    class="font-semibold text-lg text-gray-900 dark:text-white flex items-center gap-2">
                                    <i data-lucide="users" class="w-5 h-5 text-violet-500"></i>
                                    Data Orang Tua
                                </h4>

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <!-- Nama Ayah -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Nama Ayah <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <i data-lucide="user"
                                                class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                            <input type="text" name="nama_ayah" value="<?php echo e(old('nama_ayah')); ?>"
                                                class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500"
                                                placeholder="Nama ayah" required>
                                        </div>
                                    </div>

                                    <!-- Nama Ibu -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Nama Ibu <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <i data-lucide="user"
                                                class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                            <input type="text" name="nama_ibu" value="<?php echo e(old('nama_ibu')); ?>"
                                                class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500"
                                                placeholder="Nama ibu" required>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- SECTION 5: INFORMASI TAMBAHAN -->
                            <div class="bg-slate-50 dark:bg-white/5 p-6 rounded-xl space-y-4">
                                <h4
                                    class="font-semibold text-lg text-gray-900 dark:text-white flex items-center gap-2">
                                    <i data-lucide="info" class="w-5 h-5 text-violet-500"></i>
                                    Informasi Tambahan
                                </h4>

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <!-- Ukuran Jaket -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Ukuran Jaket Almamater <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <i data-lucide="shirt"
                                                class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                            <select name="ukuran_jaket" required
                                                class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500 appearance-none cursor-pointer">
                                                <option value="">-- Pilih Ukuran --</option>
                                                <option value="S"
                                                    <?php echo e(old('ukuran_jaket') == 'S' ? 'selected' : ''); ?>>
                                                    S</option>
                                                <option value="M"
                                                    <?php echo e(old('ukuran_jaket') == 'M' ? 'selected' : ''); ?>>
                                                    M</option>
                                                <option value="L"
                                                    <?php echo e(old('ukuran_jaket') == 'L' ? 'selected' : ''); ?>>
                                                    L</option>
                                                <option value="XL"
                                                    <?php echo e(old('ukuran_jaket') == 'XL' ? 'selected' : ''); ?>>XL</option>
                                                <option value="XXL"
                                                    <?php echo e(old('ukuran_jaket') == 'XXL' ? 'selected' : ''); ?>>XXL</option>
                                                <option value="XXXL"
                                                    <?php echo e(old('ukuran_jaket') == 'XXXL' ? 'selected' : ''); ?>>XXXL</option>
                                            </select>
                                            <i data-lucide="chevron-down"
                                                class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
                                        </div>
                                    </div>

                                    <!-- Sumber Informasi -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Sumber Informasi <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <i data-lucide="share-2"
                                                class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                            <select name="sumber_informasi" id="sumber_informasi" required
                                                class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500 appearance-none cursor-pointer">
                                                <option value="">-- Pilih Sumber Informasi --</option>
                                                <option value="Facebook"
                                                    <?php echo e(old('sumber_informasi') == 'Facebook' ? 'selected' : ''); ?>>
                                                    Facebook
                                                </option>
                                                <option value="Instagram"
                                                    <?php echo e(old('sumber_informasi') == 'Instagram' ? 'selected' : ''); ?>>
                                                    Instagram</option>
                                                <option value="Tiktok"
                                                    <?php echo e(old('sumber_informasi') == 'Tiktok' ? 'selected' : ''); ?>>Tiktok
                                                </option>
                                                <option value="Teman/Keluarga"
                                                    <?php echo e(old('sumber_informasi') == 'Teman/Keluarga' ? 'selected' : ''); ?>>
                                                    Teman/Keluarga</option>
                                                <option value="Brosur"
                                                    <?php echo e(old('sumber_informasi') == 'Brosur' ? 'selected' : ''); ?>>Brosur
                                                </option>
                                                <option value="Google"
                                                    <?php echo e(old('sumber_informasi') == 'Google' ? 'selected' : ''); ?>>Google
                                                </option>
                                                <option value="RAP (Recruitment Affiliate Program)"
                                                    <?php echo e(old('sumber_informasi') == 'RAP (Recruitment Affiliate Program)' ? 'selected' : ''); ?>>
                                                    RAP (Recruitment Affiliate Program)</option>
                                                <option value="BDC"
                                                    <?php echo e(old('sumber_informasi') == 'BDC' ? 'selected' : ''); ?>>BDC
                                                </option>
                                                <option value="Datang Langsung"
                                                    <?php echo e(old('sumber_informasi') == 'Datang Langsung' ? 'selected' : ''); ?>>
                                                    Datang Langsung</option>
                                                <option value="Subdomain"
                                                    <?php echo e(old('sumber_informasi') == 'Subdomain' ? 'selected' : ''); ?>>
                                                    Subdomain</option>
                                            </select>
                                            <i data-lucide="chevron-down"
                                                class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
                                        </div>
                                    </div>
                                </div>

                                <!-- Nama RAP (Dropdown) - muncul jika sumber = RAP -->
                                <div id="rap_field" class="hidden">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Pilih Nama RAP <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <i data-lucide="users"
                                            class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                        <select name="rap_id" id="rap_id"
                                            class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500 appearance-none cursor-pointer">
                                            <option value="">-- Pilih Nama RAP --</option>
                                            <?php if(isset($rapList) && $rapList->count() > 0): ?>
                                                <?php $__currentLoopData = $rapList; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $rap): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <option value="<?php echo e($rap->id); ?>"
                                                        <?php echo e(old('rap_id') == $rap->id ? 'selected' : ''); ?>>
                                                        <?php echo e($rap->nama); ?>

                                                        <?php if($rap->tipe == 'mahasiswa'): ?>
                                                            (Mahasiswa - <?php echo e($rap->nim); ?>)
                                                        <?php else: ?>
                                                            (Non Mahasiswa)
                                                        <?php endif; ?>
                                                    </option>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            <?php endif; ?>
                                        </select>
                                        <i data-lucide="chevron-down"
                                            class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
                                    </div>
                                    <p class="text-xs text-slate-500 mt-1">Pilih nama RAP yang merekrut mahasiswa ini
                                    </p>
                                </div>

                                <!-- Pilih Marketing (khusus untuk role telemarketing) -->
                                <div id="marketing_field" class="hidden">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Pilih Marketing <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <i data-lucide="user"
                                            class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                        <select name="marketing_id" id="marketing_id"
                                            class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-violet-500">
                                            <option value="">-- Pilih Marketing --</option>
                                        </select>
                                        <i data-lucide="chevron-down"
                                            class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
                                    </div>
                                    <div id="marketing_info" class="mt-2 text-xs text-slate-500 hidden">
                                        <i data-lucide="info" class="w-3 h-3 inline mr-1"></i>
                                        Marketing yang ditampilkan hanya yang bertugas di kampus yang dipilih
                                    </div>
                                    <p class="text-xs text-slate-500 mt-1">Pilih marketing yang akan mendapatkan fee
                                        dari pendaftaran ini</p>
                                </div>
                            </div>

                            <!-- Form Footer -->
                            <div class="pt-6 border-t border-slate-100 dark:border-white/5">
                                <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                                    <div class="text-sm text-slate-500 dark:text-slate-400">
                                        <i data-lucide="info" class="w-4 h-4 inline mr-1"></i>
                                        Field dengan tanda <span class="text-red-500">*</span> wajib diisi
                                    </div>
                                    <div class="flex gap-3">
                                        <a href="<?php echo e(route('mahasiswa.index')); ?>"
                                            class="px-4 py-2.5 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-700 transition-all flex items-center gap-2">
                                            <i data-lucide="arrow-left" class="w-4 h-4"></i>
                                            Kembali
                                        </a>
                                        <button type="submit"
                                            class="px-4 py-2.5 bg-gradient-to-r from-violet-600 to-indigo-700 text-white rounded-xl text-sm font-medium hover:shadow-lg hover:shadow-violet-500/25 transition-all flex items-center gap-2">
                                            <i data-lucide="save" class="w-4 h-4"></i>
                                            Simpan Mahasiswa
                                        </button>
                                    </div>
                                </div>
                            </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            lucide.createIcons();

            const namaInput = document.getElementById('nama');

            if (namaInput) {
                namaInput.addEventListener('input', function() {
                    this.value = this.value.toUpperCase();
                });
            }

            // Load prodi berdasarkan kampus
            function loadProdiByKampus(kampusId) {
                const prodiSelect = document.getElementById('prodi_id');
                const prodiLoading = document.getElementById('prodi_loading');

                if (!kampusId) {
                    prodiSelect.innerHTML = '<option value="">-- Pilih Kampus Terlebih Dahulu --</option>';
                    prodiSelect.disabled = true;
                    return;
                }

                // Tampilkan loading dan disable select
                prodiSelect.innerHTML = '<option value="">-- Memuat program studi --</option>';
                prodiSelect.disabled = true;
                prodiLoading.classList.remove('hidden');

                fetch(`/get-prodi/${kampusId}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        prodiSelect.innerHTML = '<option value="">-- Pilih Program Studi --</option>';

                        if (data.length === 0) {
                            prodiSelect.innerHTML = '<option value="">-- Tidak ada program studi --</option>';
                            prodiSelect.disabled = true;
                            return;
                        }

                        // Tampilkan prodi dengan format [JENJANG] NAMA PRODI
                        data.forEach(prodi => {
                            const option = document.createElement('option');
                            option.value = prodi.id;
                            option.textContent = `[${prodi.jenjang}] ${prodi.nama}`;
                            prodiSelect.appendChild(option);
                        });

                        // Enable select setelah data dimuat
                        prodiSelect.disabled = false;
                    })
                    .catch(error => {
                        console.error('Error loading prodi:', error);
                        prodiSelect.innerHTML = '<option value="">-- Error loading data --</option>';
                        prodiSelect.disabled = true;
                    })
                    .finally(() => {
                        prodiLoading.classList.add('hidden');
                    });
            }

            // Event untuk kampus change
            const kampusSelect = document.getElementById('kampus_id');
            kampusSelect.addEventListener('change', function() {
                loadProdiByKampus(this.value);
            });

            // Toggle field RAP
            const sumberInformasi = document.getElementById('sumber_informasi');
            const rapField = document.getElementById('rap_field');
            const rapSelect = document.getElementById('rap_id');

            if (sumberInformasi) {
                sumberInformasi.addEventListener('change', function() {
                    if (this.value === 'RAP (Recruitment Affiliate Program)') {
                        rapField.classList.remove('hidden');
                        if (rapSelect) rapSelect.setAttribute('required', 'required');
                    } else {
                        rapField.classList.add('hidden');
                        if (rapSelect) rapSelect.removeAttribute('required');
                    }
                });

                // Check initial value
                if (sumberInformasi.value === 'RAP (Recruitment Affiliate Program)') {
                    rapField.classList.remove('hidden');
                    if (rapSelect) rapSelect.setAttribute('required', 'required');
                }
            }

            // Tampilkan field marketing jika user yang login adalah telemarketing
            const userRole = '<?php echo e(Auth::user()->role->name ?? ''); ?>';
            const marketingField = document.getElementById('marketing_field');
            const marketingSelect = document.getElementById('marketing_id');
            const kampusSelectForMarketing = document.getElementById('kampus_id');

            // Fungsi untuk memuat marketing berdasarkan kampus
            function loadMarketingByKampus(kampusId) {
                if (!marketingSelect) return;

                marketingSelect.innerHTML = '<option value="">-- Pilih Marketing --</option>';

                if (!kampusId) {
                    return;
                }

                marketingSelect.disabled = true;
                marketingSelect.innerHTML = '<option value="">Memuat marketing...</option>';

                fetch(`/get-marketing-by-kampus/${kampusId}`)
                    .then(response => response.json())
                    .then(data => {
                        marketingSelect.innerHTML = '<option value="">-- Pilih Marketing --</option>';

                        if (data.marketing_list.length === 0) {
                            marketingSelect.innerHTML = '<option value="">Tidak ada marketing untuk kampus ' +
                                data.kampus_nama + '</option>';
                        } else {
                            data.marketing_list.forEach(marketing => {
                                const option = document.createElement('option');
                                option.value = marketing.id;
                                option.textContent = `${marketing.name} (${data.kampus_nama})`;
                                marketingSelect.appendChild(option);
                            });
                        }

                    })
                    .catch(error => {
                        console.error('Error loading marketing:', error);
                        marketingSelect.innerHTML = '<option value="">Error loading data</option>';
                    })
                    .finally(() => {
                        marketingSelect.disabled = false;
                    });
            }

            // Tampilkan field marketing jika user adalah telemarketing
            if (userRole === 'telemarketing') {
                if (marketingField) {
                    marketingField.classList.remove('hidden');
                }
                if (marketingSelect) {
                    marketingSelect.setAttribute('required', 'required');
                }

                // Event ketika kampus berubah, load marketing
                if (kampusSelectForMarketing) {
                    kampusSelectForMarketing.addEventListener('change', function() {
                        loadMarketingByKampus(this.value);
                    });

                    // Load marketing jika sudah ada kampus terpilih (misal dari old value)
                    const selectedKampus = kampusSelectForMarketing.value;
                    if (selectedKampus) {
                        loadMarketingByKampus(selectedKampus);
                    }
                }
            }

        });
    </script>

    <style>
        .animate-fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php /**PATH /home/edunesiaserver/public_html/K2/WEB_INTERNAL/SIMA/DEVELOPMENT/resources/views/mahasiswa/create.blade.php ENDPATH**/ ?>