@extends('layouts.superadmin')

@section('content')
@php
    $mentorRole = $roles->firstWhere(fn($r) => strtolower($r->role_name) === 'mentor');
    $internRole = $roles->firstWhere(fn($r) => strtolower($r->role_name) === 'intern');
    $superadminRole = $roles->firstWhere(fn($r) => strtolower($r->role_name) === 'superadmin');
@endphp

<div x-data="{
    userModalOpen: {{ (isset($editUser) && $editUser) || $errors->any() ? 'true' : 'false' }},
    deleteModalOpen: false,
    modalMode: '{{ isset($editUser) && $editUser ? 'edit' : 'create' }}',
    showPassword: false,
    deleteId: null,
    deleteName: '',
    form: {
        id_user: '{{ isset($editUser) && $editUser ? $editUser->id_user : '' }}',
        name: '{{ old('name', isset($editUser) && $editUser ? $editUser->name : '') }}',
        email: '{{ old('email', isset($editUser) && $editUser ? $editUser->email : '') }}',
        password: '',
        role_id: '{{ old('role_id', isset($editUser) && $editUser ? $editUser->role_id : ($internRole?->id_roles ?? '')) }}',
        role_name: '{{ isset($editUser) && $editUser ? strtolower($editUser->role?->role_name ?? '') : 'intern' }}',
        mentor_id: '{{ old('mentor_id', isset($editUser) && $editUser ? ($editUser->intern?->mentor_id ?? '') : '') }}',
        status: '{{ old('status', isset($editUser) && $editUser ? ($editUser->intern?->status ?? 'aktif') : 'aktif') }}',
        batch_id: '{{ old('batch_id', isset($editUser) && $editUser ? ($editUser->intern?->batch_id ?? '') : '') }}',
        start_date: '{{ old('start_date', isset($editUser) && $editUser && $editUser->intern?->start_date ? \Carbon\Carbon::parse($editUser->intern->start_date)->format('Y-m-d') : '') }}',
        end_date: '{{ old('end_date', isset($editUser) && $editUser && $editUser->intern?->end_date ? \Carbon\Carbon::parse($editUser->intern->end_date)->format('Y-m-d') : '') }}',
        school: '{{ old('school', isset($editUser) && $editUser ? ($editUser->intern?->school ?? '') : '') }}',
        major: '{{ old('major', isset($editUser) && $editUser ? ($editUser->intern?->major ?? '') : '') }}',
        position: '{{ old('position', isset($editUser) && $editUser ? ($editUser->intern?->position ?? '') : '') }}'
    },
    batches: {{ Js::from(collect($batchList ?? [])->mapWithKeys(fn($b) => [$b->id_batch => ['start' => $b->start_date ? \Carbon\Carbon::parse($b->start_date)->format('Y-m-d') : '', 'end' => $b->end_date ? \Carbon\Carbon::parse($b->end_date)->format('Y-m-d') : '']])) }},
    onBatchChange(id) {
        if (this.batches && this.batches[id]) {
            this.form.start_date = this.batches[id].start || '';
            this.form.end_date = this.batches[id].end || '';
        }
    },
    setRole(id, name) {
        this.form.role_id = id;
        this.form.role_name = name;
    },
    openAdd() {
        this.modalMode = 'create';
        this.showPassword = false;
        this.form = {
            id_user: '',
            name: '',
            email: '',
            password: '',
            role_id: '{{ $internRole?->id_roles ?? '' }}',
            role_name: 'intern',
            mentor_id: '',
            status: 'aktif',
            batch_id: '',
            start_date: '',
            end_date: '',
            school: '',
            major: '',
            position: ''
        };
        this.userModalOpen = true;
    },
    openEdit(user) {
        this.modalMode = 'edit';
        this.showPassword = false;
        this.form = {
            id_user: user.id_user,
            name: user.name || '',
            email: user.email || '',
            password: '',
            role_id: user.role_id,
            role_name: user.role_name,
            mentor_id: user.mentor_id || '',
            status: user.status || 'aktif',
            batch_id: user.batch_id || '',
            start_date: user.start_date || '',
            end_date: user.end_date || '',
            school: user.school || '',
            major: user.major || '',
            position: user.position || ''
        };
        this.userModalOpen = true;
    },
    openDelete(id, name) {
        this.deleteId = id;
        this.deleteName = name;
        this.deleteModalOpen = true;
    }
}" @keydown.escape.window="userModalOpen = false; deleteModalOpen = false">

    <!-- Top Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
        <div>
            <h1 class="text-3xl font-bold text-[#13124E] tracking-tight">Management User</h1>
            <p class="text-xs text-gray-400 mt-1">Kelola profil, kontak, dan afiliasi seluruh anggota program magang.</p>
        </div>
        <button type="button" @click="openAdd()"
            class="bg-[#13124E] hover:bg-[#1E1B6B] text-white text-xs font-semibold px-4 py-2.5 rounded-xl flex items-center gap-2 transition shadow-xs self-start sm:self-auto cursor-pointer">
            <i class="fa-solid fa-user-plus text-xs"></i>
            <span>Tambah pengguna</span>
        </button>
    </div>

    <!-- Flash Messages -->
    @if (session('success'))
        <div class="mb-6 p-4 rounded-xl bg-emerald-50 border border-emerald-200 text-xs font-medium text-emerald-800 flex items-center justify-between shadow-xs">
            <div class="flex items-center gap-2">
                <i class="fa-solid fa-circle-check text-emerald-600 text-sm"></i>
                <span>{{ session('success') }}</span>
            </div>
        </div>
    @endif

    @if (isset($errors) && $errors->any())
        <div class="mb-6 p-4 rounded-xl bg-red-50 border border-red-200 text-xs font-medium text-red-800 shadow-xs">
            <div class="flex items-center gap-2 mb-1 font-semibold">
                <i class="fa-solid fa-circle-exclamation text-red-600 text-sm"></i>
                <span>Terjadi kesalahan:</span>
            </div>
            <ul class="list-disc list-inside text-red-700 ml-4 space-y-0.5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Direktori Pengguna Card with Livewire Interactive Table -->
    <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-xs mb-6">
        <!-- Title & Subtitle -->
        <div class="mb-5">
            <h2 class="text-base font-bold text-gray-900">Direktori pengguna</h2>
            <p class="text-xs text-gray-400 mt-0.5">Lihat detail profil atau perbarui data anggota dengan live search dan filter interaktif.</p>
        </div>

        <!-- Livewire Component: UserTable (Lazy Loaded, Real-time Data Binding, Loading States, URL State) -->
        <livewire:superadmin.user-table lazy />
    </div>

    <!-- Bottom Timestamp -->
    <div class="text-[11px] text-gray-400">
        Data diperbarui {{ now()->translatedFormat('d M Y, H.i') }} WIB
    </div>

    <!-- USER MODAL (TAMBAH / EDIT) -->
    <div id="userModal" x-show="userModalOpen" x-cloak :class="{ 'hidden': !userModalOpen }" class="fixed inset-0 z-50 bg-black/40 backdrop-blur-2xs flex items-center justify-center p-4 overflow-y-auto">
        <div class="bg-white rounded-3xl max-w-xl w-full p-4 sm:p-5 shadow-2xl relative my-3 sm:my-4 max-h-[90vh] overflow-y-auto">
            <!-- Modal Header -->
            <div class="flex items-center justify-between pb-3 border-b border-gray-100 mb-3">
                <div class="flex items-center gap-3">
                    <div id="modalIconBox" class="w-9 h-9 rounded-xl bg-[#13124E] text-white flex items-center justify-center text-sm shadow-xs shrink-0">
                        <i id="modalIcon" :class="modalMode === 'edit' ? 'fa-solid fa-user-pen' : 'fa-solid fa-user-plus'"></i>
                    </div>
                    <h3 id="modalTitle" class="text-sm sm:text-base font-bold text-gray-900" x-text="modalMode === 'edit' ? 'Edit pengguna' : 'Tambah pengguna'"></h3>
                </div>
                <button type="button" @click="userModalOpen = false" class="text-gray-400 hover:text-gray-600 text-base p-1 cursor-pointer">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>

            <!-- Form -->
            <form id="userForm" method="POST" :action="modalMode === 'edit' ? ('{{ url('superadmin/management-user') }}/' + form.id_user) : '{{ route('superadmin.management_user.store') }}'">
                @csrf
                <template x-if="modalMode === 'edit'">
                    <input type="hidden" name="_method" value="PUT">
                </template>
                <input type="hidden" name="role_id" :value="form.role_id" :disabled="form.role_name !== 'superadmin'">

                <!-- Info Header -->
                <div class="flex items-center justify-between text-[10px] font-bold uppercase text-gray-400 tracking-wider mb-2.5">
                    <span>INFORMASI AKUN</span>
                    <span><span class="text-rose-500 font-bold">*</span> Wajib diisi</span>
                </div>

                <!-- Nama Lengkap -->
                <div class="mb-3">
                    <label for="form_name" class="block text-xs font-semibold text-gray-800 mb-1">
                        Nama lengkap <span class="text-rose-500 font-bold">*</span>
                    </label>
                    <input id="form_name" name="name" type="text" x-model="form.name" required placeholder="Nama lengkap pengguna..."
                        class="w-full px-3.5 py-2 rounded-xl border border-gray-200 text-xs text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
                </div>

                <!-- Email & Password -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-3">
                    <!-- Email -->
                    <div>
                        <label for="form_email" class="block text-xs font-semibold text-gray-800 mb-1">
                            Email <span class="text-rose-500 font-bold">*</span>
                        </label>
                        <input id="form_email" name="email" type="email" x-model="form.email" required placeholder="Email pengguna..."
                            class="w-full px-3.5 py-2 rounded-xl border border-gray-200 text-xs text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
                    </div>

                    <!-- Password -->
                    <div>
                        <label for="form_password" class="block text-xs font-semibold text-gray-800 mb-1">
                            Password <span x-show="modalMode === 'create'" class="text-rose-500 font-bold">*</span>
                        </label>
                        <div class="relative flex items-center">
                            <input id="form_password" name="password" :type="showPassword ? 'text' : 'password'" minlength="8" x-model="form.password" :required="modalMode === 'create'" placeholder="Minimal 8 karakter..."
                                class="w-full pl-3.5 pr-10 py-2 rounded-xl border border-gray-200 text-xs text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
                            <button type="button" @click="showPassword = !showPassword" class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-gray-400 hover:text-gray-600 transition cursor-pointer" aria-label="Tampilkan atau sembunyikan password" title="Tampilkan atau sembunyikan password">
                                <i :class="showPassword ? 'fa-regular fa-eye-slash text-xs' : 'fa-regular fa-eye text-xs'"></i>
                            </button>
                        </div>
                        <p id="passwordHelper" class="text-[10px] text-gray-400 mt-1" x-text="modalMode === 'create' ? 'Minimal 8 karakter kombinasi huruf & angka.' : 'Kosongkan jika tidak ingin mengubah password akun. Jika diisi, minimal 8 karakter (huruf & angka).'"></p>
                    </div>
                </div>

                <!-- Role -->
                <div class="mb-3">
                    <label class="block text-xs font-semibold text-gray-800 mb-1">
                        Role <span class="text-rose-500 font-bold">*</span>
                    </label>

                    <!-- Superadmin Readonly Indicator -->
                    <div x-show="form.role_name === 'superadmin'" class="p-3 rounded-xl bg-red-50 border border-red-200 text-xs text-red-700 font-medium flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <span class="w-2 h-2 rounded-full bg-red-500"></span>
                            <span>Superadmin (Akun Utama / Role Terlindungi)</span>
                        </div>
                        <span class="text-[10px] text-red-500 font-semibold uppercase tracking-wider">Permanen</span>
                    </div>

                    <!-- Option Radio Mentor / Intern -->
                    <div x-show="form.role_name !== 'superadmin'" class="grid grid-cols-2 gap-3">
                        <!-- Option Mentor -->
                        <label @click="setRole('{{ $mentorRole?->id_roles }}', 'mentor')" :class="form.role_name === 'mentor' ? 'border-indigo-600 bg-indigo-50/60' : 'border-gray-200'" class="role-card flex items-center gap-2.5 p-2.5 rounded-xl border cursor-pointer transition">
                            <input type="radio" name="role_id" value="{{ $mentorRole?->id_roles }}" :checked="form.role_name === 'mentor'" :disabled="form.role_name === 'superadmin'" class="text-indigo-600 focus:ring-0">
                            <span class="text-xs font-medium text-gray-700">Mentor</span>
                        </label>

                        <!-- Option Intern -->
                        <label @click="setRole('{{ $internRole?->id_roles }}', 'intern')" :class="form.role_name === 'intern' ? 'border-indigo-600 bg-indigo-50/60' : 'border-gray-200'" class="role-card flex items-center gap-2.5 p-2.5 rounded-xl border cursor-pointer transition">
                            <input type="radio" name="role_id" value="{{ $internRole?->id_roles }}" :checked="form.role_name === 'intern'" :disabled="form.role_name === 'superadmin'" class="text-indigo-600 focus:ring-0">
                            <span class="text-xs font-medium text-gray-900">Intern</span>
                        </label>
                    </div>
                </div>

                <!-- Intern Specific Fields -->
                <div x-show="form.role_name === 'intern'" class="space-y-3">
                    <!-- Mentor & Posisi (Khusus intern) -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                            <label for="form_mentor_id" class="block text-xs font-semibold text-gray-800 mb-1">
                                Mentor <span class="text-gray-400 font-normal text-[10px]">(intern)</span>
                            </label>
                            <div class="relative"
                                x-data="{
                                    open: false,
                                    search: '',
                                    options: [
                                        { value: '', label: '-- Pilih mentor --' },
                                        @foreach ($mentorList as $m)
                                            { value: '{{ $m->id_user }}', label: {{ Js::from($m->name) }} },
                                        @endforeach
                                    ],
                                    get selectedLabel() {
                                        const found = this.options.find(o => String(o.value) === String(form.mentor_id));
                                        return found ? found.label : '-- Pilih mentor --';
                                    },
                                    get filteredOptions() {
                                        if (!this.search.trim()) return this.options;
                                        const q = this.search.toLowerCase();
                                        return this.options.filter(o => o.label.toLowerCase().includes(q));
                                    },
                                    select(val) {
                                        form.mentor_id = val;
                                        this.open = false;
                                        this.search = '';
                                    }
                                }"
                                x-init="$watch('open', value => { if (value) $nextTick(() => $refs.searchInput?.focus()); })"
                                @click.outside="open = false"
                                @keydown.escape.window="open = false">
                                
                                <input type="hidden" id="form_mentor_id" name="mentor_id" :value="form.mentor_id" :disabled="form.role_name !== 'intern'">

                                <button type="button" @click="if (form.role_name === 'intern') open = !open"
                                    :disabled="form.role_name !== 'intern'"
                                    :class="form.role_name !== 'intern' ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 cursor-pointer'"
                                    class="w-full px-3.5 py-2 rounded-xl border border-gray-200 text-xs text-left focus:outline-none focus:ring-1 focus:ring-indigo-500 flex items-center justify-between transition">
                                    <span class="truncate" :class="form.mentor_id ? 'text-gray-900 font-medium' : 'text-gray-500'" x-text="selectedLabel"></span>
                                    <i class="fa-solid fa-chevron-down text-[10px] text-gray-400 transition-transform duration-200 ml-2" :class="{ 'rotate-180': open }"></i>
                                </button>

                                <div x-show="open && form.role_name === 'intern'" x-cloak
                                    class="absolute z-50 left-0 right-0 mt-1 bg-white border border-gray-200 rounded-xl shadow-xl overflow-hidden py-1">
                                    <div class="p-2 border-b border-gray-100 bg-gray-50/50">
                                        <div class="relative">
                                            <span class="absolute inset-y-0 left-0 flex items-center pl-2.5 pointer-events-none text-gray-400">
                                                <i class="fa-solid fa-magnifying-glass text-[11px]"></i>
                                            </span>
                                            <input type="text" x-ref="searchInput" x-model="search" placeholder="Cari nama mentor..."
                                                class="w-full pl-8 pr-7 py-1.5 bg-white border border-gray-200 rounded-lg text-xs text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                                            <button type="button" x-show="search.length > 0" @click="search = ''; $refs.searchInput.focus()"
                                                class="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-400 hover:text-gray-600">
                                                <i class="fa-solid fa-xmark text-[11px]"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <ul class="max-h-48 overflow-y-auto py-1 text-xs divide-y divide-gray-50">
                                        <template x-for="opt in filteredOptions" :key="opt.value">
                                            <li @click="select(opt.value)"
                                                class="px-3.5 py-2 cursor-pointer flex items-center justify-between hover:bg-indigo-50/60 transition"
                                                :class="String(form.mentor_id) === String(opt.value) ? 'bg-indigo-50/80 text-[#13124E] font-semibold' : 'text-gray-700'">
                                                <span class="truncate" x-text="opt.label"></span>
                                                <i x-show="String(form.mentor_id) === String(opt.value)" class="fa-solid fa-check text-xs text-indigo-600 ml-2"></i>
                                            </li>
                                        </template>
                                        <li x-show="filteredOptions.length === 0" class="px-3.5 py-2.5 text-center text-xs text-gray-400">
                                            Tidak ditemukan
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div>
                            <label for="form_position" class="block text-xs font-semibold text-gray-800 mb-1">
                                Posisi <span class="text-gray-400 font-normal text-[10px]">(intern)</span>
                            </label>
                            <input id="form_position" name="position" type="text" x-model="form.position" :disabled="form.role_name !== 'intern'" placeholder="Backend, UI/UX, Frontend..."
                                class="w-full px-3.5 py-2 rounded-xl border border-gray-200 text-xs text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                        </div>
                    </div>

                    <!-- Status Magang (Hanya saat edit intern) -->
                    <div id="formStatusWrapper">
                        <label for="form_status" class="block text-xs font-semibold text-gray-800 mb-1">
                            Status Magang <span class="text-gray-400 font-normal text-[10px]">(intern)</span>
                        </label>
                        <div class="relative">
                            <select id="form_status" name="status" x-model="form.status" :disabled="form.role_name !== 'intern'"
                                class="w-full px-3.5 py-2 pr-8 rounded-xl border border-gray-200 text-xs text-gray-700 bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500 appearance-none cursor-pointer">
                                <option value="aktif">Aktif</option>
                                <option value="lulus">Lulus</option>
                                <option value="fail">Failed</option>
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400">
                                <i class="fa-solid fa-chevron-down text-[10px] leading-none"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Batch Periode -->
                    <div>
                        <label for="form_batch_id" class="block text-xs font-semibold text-gray-800 mb-1">
                            Batch Periode <span class="text-gray-400 font-normal text-[10px]">(intern)</span>
                        </label>
                        <div class="relative"
                            x-data="{
                                open: false,
                                search: '',
                                options: [
                                    { value: '', label: 'Otomatis (Sesuai tanggal periode)' },
                                    @foreach ($batchList ?? [] as $b)
                                        { value: '{{ $b->id_batch }}', label: {{ Js::from($b->name . ' (' . ($b->start_date ? \Carbon\Carbon::parse($b->start_date)->translatedFormat('d M Y') : '') . ' s/d ' . ($b->end_date ? \Carbon\Carbon::parse($b->end_date)->translatedFormat('d M Y') : '') . ')') }} },
                                    @endforeach
                                ],
                                get selectedLabel() {
                                    const found = this.options.find(o => String(o.value) === String(form.batch_id));
                                    return found ? found.label : 'Otomatis (Sesuai tanggal periode)';
                                },
                                get filteredOptions() {
                                    if (!this.search.trim()) return this.options;
                                    const q = this.search.toLowerCase();
                                    return this.options.filter(o => o.label.toLowerCase().includes(q));
                                },
                                select(val) {
                                    form.batch_id = val;
                                    onBatchChange(val);
                                    this.open = false;
                                    this.search = '';
                                }
                            }"
                            x-init="$watch('open', value => { if (value) $nextTick(() => $refs.searchInput?.focus()); })"
                            @click.outside="open = false"
                            @keydown.escape.window="open = false">

                            <input type="hidden" id="form_batch_id" name="batch_id" :value="form.batch_id" :disabled="form.role_name !== 'intern'">

                            <button type="button" @click="if (form.role_name === 'intern') open = !open"
                                :disabled="form.role_name !== 'intern'"
                                :class="form.role_name !== 'intern' ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 cursor-pointer'"
                                class="w-full px-3.5 py-2 rounded-xl border border-gray-200 text-xs text-left focus:outline-none focus:ring-1 focus:ring-indigo-500 flex items-center justify-between transition">
                                <span class="truncate" :class="form.batch_id ? 'text-gray-900 font-medium' : 'text-gray-500'" x-text="selectedLabel"></span>
                                <i class="fa-solid fa-chevron-down text-[10px] text-gray-400 transition-transform duration-200 ml-2" :class="{ 'rotate-180': open }"></i>
                            </button>

                            <div x-show="open && form.role_name === 'intern'" x-cloak
                                class="absolute z-50 left-0 right-0 mt-1 bg-white border border-gray-200 rounded-xl shadow-xl overflow-hidden py-1">
                                <div class="p-2 border-b border-gray-100 bg-gray-50/50">
                                    <div class="relative">
                                        <span class="absolute inset-y-0 left-0 flex items-center pl-2.5 pointer-events-none text-gray-400">
                                            <i class="fa-solid fa-magnifying-glass text-[11px]"></i>
                                        </span>
                                        <input type="text" x-ref="searchInput" x-model="search" placeholder="Cari batch periode..."
                                            class="w-full pl-8 pr-7 py-1.5 bg-white border border-gray-200 rounded-lg text-xs text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                                        <button type="button" x-show="search.length > 0" @click="search = ''; $refs.searchInput.focus()"
                                            class="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-400 hover:text-gray-600">
                                            <i class="fa-solid fa-xmark text-[11px]"></i>
                                        </button>
                                    </div>
                                </div>
                                <ul class="max-h-48 overflow-y-auto py-1 text-xs divide-y divide-gray-50">
                                    <template x-for="opt in filteredOptions" :key="opt.value">
                                        <li @click="select(opt.value)"
                                            class="px-3.5 py-2 cursor-pointer flex items-center justify-between hover:bg-indigo-50/60 transition"
                                            :class="String(form.batch_id) === String(opt.value) ? 'bg-indigo-50/80 text-[#13124E] font-semibold' : 'text-gray-700'">
                                            <span class="truncate" x-text="opt.label"></span>
                                            <i x-show="String(form.batch_id) === String(opt.value)" class="fa-solid fa-check text-xs text-indigo-600 ml-2"></i>
                                        </li>
                                    </template>
                                    <li x-show="filteredOptions.length === 0" class="px-3.5 py-2.5 text-center text-xs text-gray-400">
                                        Tidak ditemukan
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Periode Intern -->
                    <div>
                        <label class="block text-xs font-semibold text-gray-800 mb-1">
                            Periode Intern <span class="text-gray-400 font-normal text-[10px]">(intern)</span>
                        </label>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <div>
                                <span class="block text-[11px] text-gray-500 font-medium mb-1">Tanggal Mulai</span>
                                <div class="relative">
                                    <input id="form_start_date" name="start_date" type="date" x-model="form.start_date" :disabled="form.role_name !== 'intern'"
                                        class="w-full px-3.5 py-2 rounded-xl border border-gray-200 text-xs text-gray-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 cursor-pointer">
                                </div>
                            </div>
                            <div>
                                <span class="block text-[11px] text-gray-500 font-medium mb-1">Tanggal Selesai</span>
                                <div class="relative">
                                    <input id="form_end_date" name="end_date" type="date" x-model="form.end_date" :disabled="form.role_name !== 'intern'"
                                        class="w-full px-3.5 py-2 rounded-xl border border-gray-200 text-xs text-gray-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 cursor-pointer">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Sekolah & Jurusan -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                            <label for="form_school" class="block text-xs font-semibold text-gray-800 mb-1">
                                Sekolah / Universitas <span class="text-gray-400 font-normal text-[10px]">(intern)</span>
                            </label>
                            <input id="form_school" name="school" type="text" x-model="form.school" :disabled="form.role_name !== 'intern'" placeholder="SMK Negeri 1 Bandung..."
                                class="w-full px-3.5 py-2 rounded-xl border border-gray-200 text-xs text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                        </div>
                        <div>
                            <label for="form_major" class="block text-xs font-semibold text-gray-800 mb-1">
                                Jurusan / Departemen <span class="text-gray-400 font-normal text-[10px]">(intern)</span>
                            </label>
                            <input id="form_major" name="major" type="text" x-model="form.major" :disabled="form.role_name !== 'intern'" placeholder="Rekayasa Perangkat Lunak..."
                                class="w-full px-3.5 py-2 rounded-xl border border-gray-200 text-xs text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                        </div>
                    </div>
                </div>

                <!-- Modal Actions -->
                <div class="flex items-center justify-between pt-3 mt-3 border-t border-gray-100">
                    <button type="button" @click="userModalOpen = false"
                        class="px-4 py-2 rounded-xl border border-gray-200 text-xs font-semibold text-gray-700 bg-white hover:bg-gray-50 transition cursor-pointer">
                        Batal
                    </button>
                    <button type="submit"
                        class="px-5 py-2 rounded-xl bg-[#13124E] hover:bg-[#1E1B6B] text-white text-xs font-semibold flex items-center gap-2 transition shadow-xs cursor-pointer">
                        <i class="fa-solid fa-check text-xs"></i>
                        <span>Simpan</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- DELETE MODAL -->
    <div id="deleteModal" x-show="deleteModalOpen" x-cloak :class="{ 'hidden': !deleteModalOpen }" class="fixed inset-0 z-50 bg-black/40 backdrop-blur-2xs flex items-center justify-center p-3">
        <div class="bg-white rounded-3xl max-w-md w-full overflow-hidden shadow-2xl relative my-3 sm:my-6 animate-in fade-in zoom-in duration-150">
            <!-- Modal Body Top -->
            <div class="p-4 sm:p-5">
                <!-- Icon & Close button -->
                <div class="flex items-start justify-between mb-3">
                    <div class="w-10 h-10 rounded-2xl bg-[#fee2e2]/60 text-[#dc2626] flex items-center justify-center text-lg shadow-2xs">
                        <i class="fa-regular fa-trash-can"></i>
                    </div>
                    <button type="button" @click="deleteModalOpen = false" class="text-gray-400 hover:text-gray-600 text-base p-1 cursor-pointer">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>

                <!-- Title & Description -->
                <h3 class="text-base sm:text-lg font-bold text-gray-900 mb-1.5">Hapus pengguna ini?</h3>
                <p class="text-xs text-gray-500 leading-relaxed">
                    Akses dan profil pengguna <span class="font-semibold text-gray-700" x-text="deleteName ? '&quot;' + deleteName + '&quot;' : ''"></span> akan dihapus permanen. Tindakan ini tidak dapat dibatalkan.
                </p>
            </div>

            <!-- Modal Footer Bottom -->
            <div class="bg-gray-50/80 px-5 py-3 border-t border-gray-100 flex items-center justify-between">
                <span class="text-xs text-gray-400">Penghapusan permanen</span>
                <div class="flex items-center gap-2.5">
                    <button type="button" @click="deleteModalOpen = false"
                        class="px-4 py-2 rounded-xl border border-gray-200 text-xs font-semibold text-gray-700 bg-white hover:bg-gray-50 transition shadow-2xs cursor-pointer">
                        Batal
                    </button>
                    <form id="deleteForm" method="POST" :action="'{{ url('superadmin/management-user') }}/' + deleteId" class="m-0">
                        @csrf
                        @method('DELETE')
                        <button type="submit"
                            class="px-4 py-2 rounded-xl bg-rose-600 hover:bg-rose-700 text-white text-xs font-semibold flex items-center gap-2 transition shadow-xs cursor-pointer">
                            <i class="fa-regular fa-trash-can text-xs"></i>
                            <span>Ya, hapus pengguna</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection