<?php $__env->startSection('content'); ?>
    <div class="mb-6 flex flex-col gap-1">
        <div
            class="text-xs font-bold uppercase tracking-widest text-blue-600 dark:text-blue-400"
        >
            Manajemen Akun
        </div>

        <div class="flex items-center justify-between">
            <h1
                class="text-2xl font-black text-slate-800 dark:text-white uppercase tracking-tight"
            >
                Tambah Akun Baru
            </h1>

            <a
                href="<?php echo e(route('admin.users.index')); ?>"
                class="flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-bold text-slate-600 transition-all hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-400"
            >
                <i class="fa-solid fa-arrow-left text-xs"></i>
                Kembali
            </a>
        </div>
    </div>
    <form
        method="POST"
        action="<?php echo e(route('admin.users.store')); ?>"
        class="max-w-2xl space-y-5 rounded-3xl border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-800 dark:bg-slate-950"
    >
        <?php echo csrf_field(); ?>

        <!-- USERNAME + PASSWORD -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
            <!-- Username -->
            <div>
                <label
                    class="mb-1.5 block text-sm font-bold text-slate-700 dark:text-white/80"
                >
                    Username
                </label>

                <input
                    name="username"
                    value="<?php echo e(old('username')); ?>"
                    placeholder="Masukkan username"
                    class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none dark:border-slate-800 dark:bg-slate-900/50 dark:text-white"
                />

                <?php $__errorArgs = ['username'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                    <div class="mt-1 text-xs font-bold text-red-600 uppercase">
                        <?php echo e($message); ?>

                    </div>
                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
            </div>

            <!-- Password -->
            <div>
                <label
                    class="mb-1.5 block text-sm font-bold text-slate-700 dark:text-white/80"
                >
                    Password
                </label>

                <input
                    type="password"
                    name="password"
                    placeholder="••••••••"
                    class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none dark:border-slate-800 dark:bg-slate-900/50 dark:text-white"
                />

                <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                    <div class="mt-1 text-xs font-bold text-red-600 uppercase">
                        <?php echo e($message); ?>

                    </div>
                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
            </div>
        </div>

        <!-- ROLE -->
<div>

<label class="mb-3 block text-sm font-bold text-slate-700 dark:text-white/80">

Role / Jabatan

</label>

<div
id="role-select"
class="grid grid-cols-1 gap-2"
>

<?php $__currentLoopData = $roles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $r): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

<label
class="flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 cursor-pointer transition hover:bg-blue-50 dark:border-slate-800 dark:bg-slate-900/50"
>

<input
type="checkbox"
name="roles[]"
value="<?php echo e($r); ?>"
<?php if(in_array($r, old('roles', []))): echo 'checked'; endif; ?>
class="h-3.5 w-3.5 text-blue-600 rounded"
/>

<span class="text-sm font-medium dark:text-white">

<?php echo e(Str::headline($r)); ?>


</span>

</label>

<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

</div>

</div>

        <!-- NAMA -->
        <div>
            <label
                class="mb-1.5 block text-sm font-bold text-slate-700 dark:text-white/80"
            >
                Nama Lengkap
            </label>

            <input
                type="text"
                name="nama"
                value="<?php echo e(old('nama')); ?>"
                placeholder="Masukkan nama lengkap"
                class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 focus:border-blue-500 focus:outline-none dark:border-slate-800 dark:bg-slate-900/50 dark:text-white"
            />

            <?php $__errorArgs = ['nama'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                <div class="mt-1 text-xs font-bold text-red-600 uppercase">
                    <?php echo e($message); ?>

                </div>
            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
        </div>

        <!-- NIP -->
        <div id="nip-container" class="hidden animate-fade-in">
            <label
                class="mb-1.5 block text-sm font-bold text-slate-700 dark:text-white/80"
            >
                NIP (Nomor Induk Pegawai)
            </label>

            <input
                type="text"
                name="nip"
                value="<?php echo e(old('nip')); ?>"
                placeholder="Contoh: 1980xxxxxxxx"
                class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 focus:border-blue-500 focus:outline-none dark:border-slate-800 dark:bg-slate-900/50 dark:text-white font-mono tracking-widest"
            />

            <p class="mt-1 text-[10px] text-slate-400 italic">*Wajib untuk Guru, Wali Kelas, BK, dan Kepala Sekolah</p>

            <?php $__errorArgs = ['nip'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                <div class="mt-1 text-xs font-bold text-red-600 uppercase">
                    <?php echo e($message); ?>

                </div>
            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
        </div>

        <!-- KELAS -->
        <div id="kelas-container" class="hidden animate-fade-in">
            <label
                class="mb-1.5 block text-sm font-bold text-slate-700 dark:text-white/80"
            >
                Kelas Binaan
            </label>

            <select
                name="kelas_id"
                class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 focus:border-blue-500 focus:outline-none dark:border-slate-800 dark:bg-slate-900/50 dark:text-white"
            >
                <option value="">-- Pilih Kelas --</option>

                <?php $__currentLoopData = $kelas; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $k): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option
                        value="<?php echo e($k->kelas_id); ?>"
                        <?php if(old('kelas_id') == $k->kelas_id): echo 'selected'; endif; ?>
                    >
                        <?php echo e($k->nama_kelas); ?>

                    </option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>

            <?php $__errorArgs = ['kelas_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                <div class="mt-1 text-xs font-bold text-red-600 uppercase">
                    <?php echo e($message); ?>

                </div>
            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
        </div>

        <!-- NO HP -->
        <div>
            <label
                class="mb-1.5 block text-sm font-bold text-slate-700 dark:text-white/80"
            >
                Nomor HP
            </label>

            <input
                type="text"
                name="no_hp"
                value="<?php echo e(old('no_hp')); ?>"
                placeholder="08xxxxxxxxxx"
                class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 focus:border-blue-500 focus:outline-none dark:border-slate-800 dark:bg-slate-900/50 dark:text-white"
            />

            <?php $__errorArgs = ['no_hp'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                <div class="mt-1 text-xs font-bold text-red-600 uppercase">
                    <?php echo e($message); ?>

                </div>
            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
        </div>

        <!-- ALAMAT -->
        <div>
            <label
                class="mb-1.5 block text-sm font-bold text-slate-700 dark:text-white/80"
            >
                Alamat
            </label>

            <textarea
                name="alamat"
                rows="3"
                placeholder="Masukkan alamat"
                class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 focus:border-blue-500 focus:outline-none dark:border-slate-800 dark:bg-slate-900/50 dark:text-white"
                ><?php echo e(old('alamat')); ?></textarea
            >

            <?php $__errorArgs = ['alamat'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                <div class="mt-1 text-xs font-bold text-red-600 uppercase">
                    <?php echo e($message); ?>

                </div>
            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
        </div>

        <!-- STATUS -->
        <div>
            <label
                class="mb-1.5 block text-sm font-bold text-slate-700 dark:text-white/80"
            >
                Status Akun
            </label>

            <select
                name="status"
                class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 focus:border-blue-500 focus:outline-none dark:border-slate-800 dark:bg-slate-900/50 dark:text-white"
            >
                <?php $__currentLoopData = ['aktif','nonaktif']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $s): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option
                        value="<?php echo e($s); ?>"
                        <?php if(old('status', 'aktif') === $s): echo 'selected'; endif; ?>
                    >
                        <?php echo e(ucfirst($s)); ?>

                    </option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>

            <?php $__errorArgs = ['status'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                <div class="mt-1 text-xs font-bold text-red-600 uppercase">
                    <?php echo e($message); ?>

                </div>
            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
        </div>

        <!-- BUTTON -->
        <div class="pt-4 text-right">
            <button
                class="w-full md:w-auto rounded-xl bg-blue-600 px-10 py-3 font-black uppercase tracking-widest text-white shadow-lg shadow-blue-600/20 transition-all hover:bg-blue-700 active:scale-95"
            >
                Simpan Akun
            </button>
        </div>
    </form>
   <script>
document.addEventListener("DOMContentLoaded", function(){

const roleCheckboxes =
document.querySelectorAll(
'input[name="roles[]"]'
);

const kelasContainer =
document.getElementById("kelas-container");

const nipContainer =
document.getElementById("nip-container");

function toggleExtraInputs(){

const selectedRoles =

Array.from(roleCheckboxes)

.filter(cb => cb.checked)

.map(cb => cb.value);

const rolesWithNip = [

"guru",
"wali_kelas",
"kepala_sekolah",
"guru_bk"

];

const showNip =

selectedRoles.some(role =>

rolesWithNip.includes(role)

);

nipContainer.classList.toggle(
"hidden",
!showNip
);

kelasContainer.classList.toggle(
"hidden",
!selectedRoles.includes(
"wali_kelas"
)
);

}

roleCheckboxes.forEach(cb => {

cb.addEventListener(
'change',
toggleExtraInputs
);

});

toggleExtraInputs();

});
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', ['title' => 'Tambah User'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\sistem-absensi-smkn-2-rupat\resources\views/admin/users/create.blade.php ENDPATH**/ ?>