@extends('layout.appdas')

@section('title', 'Pengguna')
@section('content')



{{-- MASTER CARD: MANAJEMEN PENGGUNA --}}
<div class="card table-card mb-0 shadow-sm border-0 rounded-0 overflow-hidden">
    <div class="card-header pengguna-header bg-white border-bottom py-3 px-4">
        <div class="pengguna-info">
            <h5 class="mb-1 fw-bold text-dark d-inline-flex align-items-center">
                <i class="bi bi-people-fill text-primary me-2 fs-5 align-middle"></i>
                <span>Manajemen Pengguna</span>
            </h5>
            <p class="text-muted mb-0 small">
                Kelola pengguna, divisi, dan hak akses sistem.
            </p>
        </div>

        <div class="pengguna-action">
            <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#modalDivisi">
                <i class="bi bi-building me-1"></i>
                Kelola Unit
            </button>

            <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#tambahUserModal">
                <i class="bi bi-person-plus me-1"></i>
                Tambah Pengguna
            </button>

            <button class="btn btn-success btn-sm px-3" data-bs-toggle="modal" data-bs-target="#modalKategori">
                <i class="bi bi-tags me-1"></i>
                Kelola Kategori
            </button>

            <button class="btn btn-info btn-sm px-3 text-white" data-bs-toggle="modal" data-bs-target="#modalJenis">
                <i class="bi bi-file-earmark-text me-1"></i>
                Kelola Jenis Surat
            </button>
        </div>
    </div>

    <div class="card-body p-4 d-flex flex-column">
        {{-- REKAP STATISTIK --}}
        <div class="row g-3 mb-4 pengguna-kpi-row">
            <div class="col-12 col-md-4">
                <div class="border rounded-3 p-3 h-100 bg-light pengguna-stat-card">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block mb-1">Total Pengguna</small>
                            <h3 class="fw-bold mb-0 text-dark">{{ $totalUser ?? $users->count() }}</h3>
                        </div>
                        <div class="stat-icon bg-soft-primary p-2 rounded-3 text-primary">
                            <i class="bi bi-people-fill fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="border rounded-3 p-3 h-100 bg-light pengguna-stat-card">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block mb-1">Pengguna Aktif</small>
                            <h3 class="fw-bold mb-0 text-success">{{ $userAktif ?? 0 }}</h3>
                        </div>
                        <div class="stat-icon bg-soft-success p-2 rounded-3 text-success">
                            <i class="bi bi-person-check-fill fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="border rounded-3 p-3 h-100 bg-light pengguna-stat-card">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block mb-1">Pengguna Nonaktif</small>
                            <h3 class="fw-bold mb-0 text-danger">{{ $userNonaktif ?? 0 }}</h3>
                        </div>
                        <div class="stat-icon bg-soft-danger p-2 rounded-3 text-danger">
                            <i class="bi bi-person-x-fill fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- FORM FILTER & PENCARIAN TERPADU --}}
        <form action="{{ route('pengguna.index') }}" method="GET" class="row g-2 mb-4 bg-light p-3 rounded-3 border align-items-center">
            <div class="col-md-8">
                <input type="text" name="search" class="form-control form-control-sm" placeholder="Cari nama atau email..." value="{{ request('search') }}">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary btn-sm w-100 rounded-2">
                    <i class="bi bi-search me-1"></i> Cari
                </button>
            </div>
            <div class="col-md-2">
                <a href="{{ route('pengguna.index') }}" class="btn btn-reset-custom btn-sm w-100 d-flex align-items-center justify-content-center gap-1" title="Reset Filter">
                    <i class="bi bi-arrow-counterclockwise"></i> Reset
                </a>
            </div>
        </form>

        {{-- TABEL DATA PENGGUNA --}}
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 text-nowrap">
                <thead class="table-light text-uppercase fs-7 text-secondary">
                    <tr>
                        <th style="width: 5%">No</th>
                        <th style="width: 12%">NIP</th>
                        <th style="width: 20%">Nama</th>
                        <th style="width: 20%">Email</th>
                        <th style="width: 12%">Role</th>
                        <th style="width: 15%">Unit</th>
                        <th style="width: 8%">Status</th>
                        <th class="text-center" style="width: 8%; min-width: 140px;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($users as $index => $user)
                    <tr>
                        <td class="text-muted">{{ $users->firstItem() + $index }}</td>
                        <td class="font-monospace fw-semibold">{{ $user->nip }}</td>
                        <td class="fw-semibold text-dark">{{ $user->name }}</td>
                        <td>{{ $user->email }}</td>
                        <td>
                            @if ($user->isAdmin())
                                <span class="badge bg-primary text-white"><i class="bi bi-shield-lock me-1"></i>{{ $user->role->nama_role ?? 'Admin' }}</span>
                            @elseif ($user->isAsisten())
                                <span class="badge" style="background-color: #ede9fe; color: #6b21a8; border: 1px solid #ddd6fe;">
                                    <i class="bi bi-person-gear me-1"></i>{{ $user->role->nama_role ?? 'Asisten Admin' }}
                                </span>
                                @if (!empty($user->permissions))
                                    <div class="d-flex flex-wrap gap-1 mt-1">
                                        @php
                                            $pLabels = [
                                                'arsip-lamaran' => ['Data Pelamar', 'primary'],
                                                'surat' => ['Surat', 'success'],
                                                'daftar-disposisi' => ['Disposisi', 'warning text-dark'],
                                                'monitoring' => ['Monitoring', 'info text-dark'],
                                                'laporan' => ['Laporan', 'secondary'],
                                            ];
                                        @endphp
                                        @foreach ($user->permissions as $p)
                                            <span class="badge bg-{{ $pLabels[$p][1] ?? 'light text-dark' }}" style="font-size: 0.65rem;">
                                                {{ $pLabels[$p][0] ?? $p }}
                                            </span>
                                        @endforeach
                                    </div>
                                @else
                                    <div class="text-muted mt-0.5" style="font-size: 0.7rem;"><em>(Belum ada menu)</em></div>
                                @endif
                            @else
                                <span class="badge bg-info text-dark">{{ $user->role->nama_role ?? 'User' }}</span>
                            @endif
                        </td>
                        <td>{{ $user->divisi->nama_divisi ?? '-' }}</td>
                        <td>
                            <span class="badge {{ $user->status === 'Aktif' ? 'bg-success' : 'bg-danger' }}">
                                {{ $user->status }}
                            </span>
                        </td>
                        <td class="text-center text-nowrap">
                            <div class="btn-action-group justify-content-center">
                                <button type="button" class="btn btn-sm btn-outline-warning text-dark btn-edit" data-bs-toggle="modal" data-bs-target="#editUserModal" data-id="{{ $user->id }}" data-name="{{ $user->name }}" data-nip="{{ $user->nip }}" data-email="{{ $user->email }}" data-role="{{ $user->role_id }}" data-divisi="{{ $user->divisi_id }}" data-status="{{ $user->status }}" data-permissions="{{ json_encode($user->permissions ?? []) }}" title="Edit Pengguna">
                                    <i class="bi bi-pencil-square"></i><span class="d-none d-md-inline ms-1">Edit</span>
                                </button>

                                <button type="button" class="btn btn-sm btn-outline-danger btn-hapus-pengguna" data-id="{{ $user->id }}" data-name="{{ $user->name }}" title="Hapus Pengguna">
                                    <i class="bi bi-trash"></i><span class="d-none d-md-inline ms-1">Hapus</span>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center py-5 text-muted align-middle">
                            <div class="d-flex flex-column align-items-center justify-content-center text-center w-100 py-2">
                                <i class="bi bi-people fs-2 mb-2 text-muted"></i>
                                <span class="fw-medium">Tidak ada data pengguna ditemukan.</span>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- PAGINATION FOOTER --}}
        @if($users->hasPages() || $users->total() > 0)
        <div id="paginationContainer" class="mt-auto pt-3 border-top">
            {{ $users->links() }}
        </div>
        @endif
    </div>
</div>



{{-- ========================================== MODAL TAMBAH ========================================== --}}
<div class="modal fade" id="tambahUserModal" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">

    <div class="modal-dialog modal-lg modal-dialog-centered">

        <div class="modal-content border-0 shadow">

            <form action="{{ route('pengguna.store') }}" method="POST" id="formTambahUser">

                @csrf

                <div class="modal-header bg-primary text-white">

                    <h5 class="modal-title fw-bold">
                        <i class="bi bi-person-plus-fill me-2"></i>
                        Tambah Pengguna Baru
                    </h5>

                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal">
                    </button>

                </div>

                <div class="modal-body">

                    <div class="row g-3">

                        <div class="col-md-6">

                            <label class="form-label fw-semibold small">
                                NIP
                            </label>

                            <input type="text" name="nip" id="tambah_nip" class="form-control" placeholder="Masukkan NIP" required autocomplete="off">
                            <div id="pesan_nip_tambah" class="text-success fst-italic mt-1 small" style="display: none;">
                                <em>* NIP ini sudah terdaftar di sistem.</em>
                            </div>

                        </div>

                        <div class="col-md-6">

                            <label class="form-label fw-semibold small">
                                Nama Lengkap
                            </label>

                            <input type="text" name="name" id="tambah_name" class="form-control" placeholder="Masukkan nama lengkap" required autocomplete="off">

                        </div>

                        <div class="col-12">

                            <label class="form-label fw-semibold small">
                                Email
                            </label>

                            <input type="email" name="email" id="tambah_email" class="form-control" placeholder="contoh@email.com" required autocomplete="off">
                            <div id="pesan_email_tambah" class="text-success fst-italic mt-1 small" style="display: none;">
                                <em>* Alamat email ini sudah terdaftar di sistem.</em>
                            </div>

                        </div>

                        <div class="col-md-6">

                            <label class="form-label fw-semibold small">
                                Role Akses
                            </label>

                            <select name="role_id" id="tambah_role" class="form-select" required>

                                <option value="">-- Pilih Role --</option>

                                @foreach ($roles as $role)
                                <option value="{{ $role->id }}">
                                    {{ $role->nama_role }}
                                </option>
                                @endforeach

                            </select>

                        </div>

                        <div class="col-md-6">

                            <label class="form-label fw-semibold small">
                                Divisi Kerja
                            </label>

                            <select name="divisi_id" id="tambah_divisi" class="form-select" required>

                                <option value="">-- Pilih Divisi --</option>

                                @foreach ($divisi as $div)
                                <option value="{{ $div->id }}">
                                    {{ $div->nama_divisi }}
                                </option>
                                @endforeach

                            </select>
                            <div id="hint_asisten_divisi_tambah" class="text-primary small mt-1" style="display: none; font-size: 0.75rem;">
                                <i class="bi bi-info-circle me-1"></i>Otomatis diselaraskan dengan Unit Admin: <strong>{{ auth()->user()->divisi->nama_divisi ?? 'WR II' }}</strong>
                            </div>

                        </div>

                        {{-- PANEL HAK AKSES MENU (KHUSUS ROLE ASISTEN ADMIN) --}}
                        <div class="col-12" id="tambah_permissions_container" style="display: none;">
                            <div class="card border border-primary-subtle shadow-sm bg-light-subtle rounded-3">
                                <div class="card-header bg-primary-subtle py-2 d-flex justify-content-between align-items-center">
                                    <span class="fw-semibold text-primary small">
                                        <i class="bi bi-shield-check me-1"></i>Pilih Hak Akses Menu Asisten Admin
                                    </span>
                                    <div class="btn-group btn-group-sm">
                                        <button type="button" class="btn btn-xs btn-outline-primary py-0 px-2" id="btnSelectAllTambah" style="font-size: 0.72rem;">Pilih Semua</button>
                                        <button type="button" class="btn btn-xs btn-outline-secondary py-0 px-2" id="btnUnselectAllTambah" style="font-size: 0.72rem;">Reset</button>
                                    </div>
                                </div>
                                <div class="card-body py-2.5 px-3">
                                    <p class="text-muted small mb-2" style="font-size: 0.78rem;">
                                        Centang menu yang boleh diakses dan dikelola oleh asisten ini:
                                    </p>
                                    <div class="row g-2">
                                        <div class="col-sm-6">
                                            <div class="form-check form-switch p-2 bg-white rounded border border-light-subtle">
                                                <input class="form-check-input ms-0 me-2 tambah-permission-checkbox" type="checkbox" name="permissions[]" value="arsip-lamaran" id="tambah_perm_lamaran">
                                                <label class="form-check-label small fw-semibold cursor-pointer" for="tambah_perm_lamaran">
                                                    <i class="bi bi-person-badge text-primary me-1"></i>Data Pelamar
                                                    <small class="d-block text-muted fw-normal" style="font-size: 0.72rem;">Input pelamar, download CV, verifikasi berkas</small>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-check form-switch p-2 bg-white rounded border border-light-subtle">
                                                <input class="form-check-input ms-0 me-2 tambah-permission-checkbox" type="checkbox" name="permissions[]" value="surat" id="tambah_perm_surat">
                                                <label class="form-check-label small fw-semibold cursor-pointer" for="tambah_perm_surat">
                                                    <i class="bi bi-envelope-paper text-success me-1"></i>Manajemen Surat
                                                    <small class="d-block text-muted fw-normal" style="font-size: 0.72rem;">Input surat masuk/keluar & scan fisik</small>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-check form-switch p-2 bg-white rounded border border-light-subtle">
                                                <input class="form-check-input ms-0 me-2 tambah-permission-checkbox" type="checkbox" name="permissions[]" value="approve-disposisi" id="tambah_perm_approve">
                                                <label class="form-check-label small fw-semibold cursor-pointer" for="tambah_perm_approve">
                                                    <i class="bi bi-shield-check text-warning me-1"></i>Approve Disposisi
                                                    <small class="d-block text-muted fw-normal" style="font-size: 0.72rem;">Setujui atau tolak disposisi antar divisi</small>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-check form-switch p-2 bg-white rounded border border-light-subtle">
                                                <input class="form-check-input ms-0 me-2 tambah-permission-checkbox" type="checkbox" name="permissions[]" value="daftar-disposisi" id="tambah_perm_disposisi">
                                                <label class="form-check-label small fw-semibold cursor-pointer" for="tambah_perm_disposisi">
                                                    <i class="bi bi-inboxes text-warning me-1"></i>Daftar Disposisi
                                                    <small class="d-block text-muted fw-normal" style="font-size: 0.72rem;">Tindak lanjut dan instruksi disposisi</small>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-check form-switch p-2 bg-white rounded border border-light-subtle">
                                                <input class="form-check-input ms-0 me-2 tambah-permission-checkbox" type="checkbox" name="permissions[]" value="monitoring" id="tambah_perm_monitoring">
                                                <label class="form-check-label small fw-semibold cursor-pointer" for="tambah_perm_monitoring">
                                                    <i class="bi bi-activity text-info me-1"></i>Monitoring Surat
                                                    <small class="d-block text-muted fw-normal" style="font-size: 0.72rem;">Pantau perjalanan dan approval surat</small>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-check form-switch p-2 bg-white rounded border border-light-subtle">
                                                <input class="form-check-input ms-0 me-2 tambah-permission-checkbox" type="checkbox" name="permissions[]" value="laporan" id="tambah_perm_laporan">
                                                <label class="form-check-label small fw-semibold cursor-pointer" for="tambah_perm_laporan">
                                                    <i class="bi bi-file-earmark-bar-graph text-secondary me-1"></i>Laporan Rekapitulasi
                                                    <small class="d-block text-muted fw-normal" style="font-size: 0.72rem;">Melihat rekap, cetak PDF, dan download Excel</small>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">

                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <label class="form-label fw-semibold small mb-0">
                                    Password
                                </label>
                                <span class="badge bg-light text-muted border font-monospace" style="font-size: 0.73rem;">
                                    <i class="bi bi-magic text-primary me-1"></i>Otomatis sama dengan email
                                </span>
                            </div>

                            <input type="text" name="password" id="tambah_password" class="form-control" placeholder="Otomatis terisi sesuai email..." autocomplete="new-password">
                            <small class="text-muted d-block mt-1" style="font-size: 0.8rem;">
                                <em>* Password default otomatis menggunakan email akun jika tidak diubah secara manual.</em>
                            </small>

                        </div>


                    </div>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-light border" data-bs-dismiss="modal">

                        <i class="bi bi-x-circle me-1"></i>
                        Batal

                    </button>

                    <button type="submit" class="btn btn-primary" id="btnSubmitUser">

                        <i class="bi bi-check-circle me-1"></i>
                        Simpan Pengguna

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>


{{-- ========================================== MODAL EDIT ========================================== --}}
<div class="modal fade" id="editUserModal" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">

    <div class="modal-dialog modal-lg modal-dialog-centered">

        <div class="modal-content border-0 shadow">

            <form id="editUserForm" method="POST">

                @csrf
                @method('PUT')

                <div class="modal-header bg-warning text-dark">

                    <h5 class="modal-title fw-bold">
                        <i class="bi bi-pencil-square me-2"></i>
                        Ubah Data Pengguna
                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>

                </div>

                <div class="modal-body">

                    <div class="row g-3">

                        <div class="col-md-6">

                            <label class="form-label fw-semibold small">
                                NIP
                            </label>

                            <input type="text" id="edit_nip" name="nip" class="form-control" required>
                            <div id="pesan_nip_edit" class="text-success fst-italic mt-1 small" style="display: none;">
                                <em>* NIP ini sudah terdaftar di sistem.</em>
                            </div>

                        </div>

                        <div class="col-md-6">

                            <label class="form-label fw-semibold small">
                                Nama Lengkap
                            </label>

                            <input type="text" id="edit_name" name="name" class="form-control" required>

                        </div>

                        <div class="col-12">

                            <label class="form-label fw-semibold small">
                                Email
                            </label>

                            <input type="email" id="edit_email" name="email" class="form-control" required>
                            <div id="pesan_email_edit" class="text-success fst-italic mt-1 small" style="display: none;">
                                <em>* Alamat email ini sudah terdaftar di sistem.</em>
                            </div>

                        </div>

                        <div class="col-md-6">

                            <label class="form-label fw-semibold small">
                                Role Akses
                            </label>

                            <select id="edit_role" name="role_id" class="form-select" required>

                                <option value="">-- Pilih Role --</option>

                                @foreach ($roles as $role)
                                <option value="{{ $role->id }}">
                                    {{ $role->nama_role }}
                                </option>
                                @endforeach

                            </select>

                        </div>

                        <div class="col-md-6">

                            <label class="form-label fw-semibold small">
                                Divisi Kerja
                            </label>

                            <select id="edit_divisi" name="divisi_id" class="form-select" required>

                                <option value="">-- Pilih Divisi --</option>

                                @foreach ($divisi as $div)
                                <option value="{{ $div->id }}">
                                    {{ $div->nama_divisi }}
                                </option>
                                @endforeach

                            </select>
                            <div id="hint_asisten_divisi_edit" class="text-primary small mt-1" style="display: none; font-size: 0.75rem;">
                                <i class="bi bi-info-circle me-1"></i>Otomatis diselaraskan dengan Unit Admin: <strong>{{ auth()->user()->divisi->nama_divisi ?? 'WR II' }}</strong>
                            </div>

                        </div>

                        <div class="col-md-6">

                            <label class="form-label fw-semibold small">
                                Status Akun
                            </label>

                            <select id="edit_status" name="status" class="form-select" required>

                                <option value="Aktif">Aktif</option>
                                <option value="Nonaktif">Nonaktif</option>

                            </select>

                        </div>

                        <div class="col-md-6">

                            <label class="form-label fw-semibold small text-muted">
                                Password Baru
                            </label>

                            <input type="password" name="password" class="form-control" placeholder="Kosongkan jika tidak diubah">

                            <small class="text-muted">
                                Biarkan kosong jika password tidak ingin diubah.
                            </small>

                        </div>

                        {{-- PANEL HAK AKSES MENU (KHUSUS ROLE ASISTEN ADMIN) --}}
                        <div class="col-12" id="edit_permissions_container" style="display: none;">
                            <div class="card border border-warning-subtle shadow-sm bg-light-subtle rounded-3">
                                <div class="card-header bg-warning-subtle py-2 d-flex justify-content-between align-items-center">
                                    <span class="fw-semibold text-dark small">
                                        <i class="bi bi-shield-check me-1 text-warning"></i>Pilih Hak Akses Menu Asisten Admin
                                    </span>
                                    <div class="btn-group btn-group-sm">
                                        <button type="button" class="btn btn-xs btn-outline-dark py-0 px-2" id="btnSelectAllEdit" style="font-size: 0.72rem;">Pilih Semua</button>
                                        <button type="button" class="btn btn-xs btn-outline-secondary py-0 px-2" id="btnUnselectAllEdit" style="font-size: 0.72rem;">Reset</button>
                                    </div>
                                </div>
                                <div class="card-body py-2.5 px-3">
                                    <p class="text-muted small mb-2" style="font-size: 0.78rem;">
                                        Centang menu yang boleh diakses dan dikelola oleh asisten ini:
                                    </p>
                                    <div class="row g-2">
                                        <div class="col-sm-6">
                                            <div class="form-check form-switch p-2 bg-white rounded border border-light-subtle">
                                                <input class="form-check-input ms-0 me-2 edit-permission-checkbox" type="checkbox" name="permissions[]" value="arsip-lamaran" id="edit_perm_lamaran">
                                                <label class="form-check-label small fw-semibold cursor-pointer" for="edit_perm_lamaran">
                                                    <i class="bi bi-person-badge text-primary me-1"></i>Data Pelamar
                                                    <small class="d-block text-muted fw-normal" style="font-size: 0.72rem;">Input pelamar, download CV, verifikasi berkas</small>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-check form-switch p-2 bg-white rounded border border-light-subtle">
                                                <input class="form-check-input ms-0 me-2 edit-permission-checkbox" type="checkbox" name="permissions[]" value="surat" id="edit_perm_surat">
                                                <label class="form-check-label small fw-semibold cursor-pointer" for="edit_perm_surat">
                                                    <i class="bi bi-envelope-paper text-success me-1"></i>Manajemen Surat
                                                    <small class="d-block text-muted fw-normal" style="font-size: 0.72rem;">Input surat masuk/keluar & scan fisik</small>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-check form-switch p-2 bg-white rounded border border-light-subtle">
                                                <input class="form-check-input ms-0 me-2 edit-permission-checkbox" type="checkbox" name="permissions[]" value="approve-disposisi" id="edit_perm_approve">
                                                <label class="form-check-label small fw-semibold cursor-pointer" for="edit_perm_approve">
                                                    <i class="bi bi-shield-check text-warning me-1"></i>Approve Disposisi
                                                    <small class="d-block text-muted fw-normal" style="font-size: 0.72rem;">Setujui atau tolak disposisi antar divisi</small>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-check form-switch p-2 bg-white rounded border border-light-subtle">
                                                <input class="form-check-input ms-0 me-2 edit-permission-checkbox" type="checkbox" name="permissions[]" value="daftar-disposisi" id="edit_perm_disposisi">
                                                <label class="form-check-label small fw-semibold cursor-pointer" for="edit_perm_disposisi">
                                                    <i class="bi bi-inboxes text-warning me-1"></i>Daftar Disposisi
                                                    <small class="d-block text-muted fw-normal" style="font-size: 0.72rem;">Tindak lanjut dan instruksi disposisi</small>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-check form-switch p-2 bg-white rounded border border-light-subtle">
                                                <input class="form-check-input ms-0 me-2 edit-permission-checkbox" type="checkbox" name="permissions[]" value="monitoring" id="edit_perm_monitoring">
                                                <label class="form-check-label small fw-semibold cursor-pointer" for="edit_perm_monitoring">
                                                    <i class="bi bi-activity text-info me-1"></i>Monitoring Surat
                                                    <small class="d-block text-muted fw-normal" style="font-size: 0.72rem;">Pantau perjalanan dan approval surat</small>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-check form-switch p-2 bg-white rounded border border-light-subtle">
                                                <input class="form-check-input ms-0 me-2 edit-permission-checkbox" type="checkbox" name="permissions[]" value="laporan" id="edit_perm_laporan">
                                                <label class="form-check-label small fw-semibold cursor-pointer" for="edit_perm_laporan">
                                                    <i class="bi bi-file-earmark-bar-graph text-secondary me-1"></i>Laporan Rekapitulasi
                                                    <small class="d-block text-muted fw-normal" style="font-size: 0.72rem;">Melihat rekap, cetak PDF, dan download Excel</small>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-light border" data-bs-dismiss="modal">

                        <i class="bi bi-x-circle me-1"></i>
                        Batal

                    </button>

                    <button type="submit" class="btn btn-warning">

                        <i class="bi bi-check-circle me-1"></i>
                        Perbarui Pengguna

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>



<!-- ==================== MODAL DIVISI ==================== -->

<div class="modal fade" id="modalDivisi" data-bs-backdrop="static" tabindex="-1">

    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">

        <div class="modal-content border-0 shadow">

            <div class="modal-header bg-success text-white">

                <h5 class="modal-title">

                    <i class="bi bi-building me-2"></i>

                    Kelola Unit

                </h5>

                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal">
                </button>

            </div>

            <div class="modal-body">

                <!-- FORM TAMBAH -->

                <form action="{{ route('divisi.store') }}" method="POST" class="mb-3" id="formTambahDivisi">

                    @csrf

                    <div class="input-group">

                        <input type="text" name="nama_divisi" id="inputNamaDivisi" class="form-control" placeholder="Masukkan nama unit..." required autocomplete="off">

                        <button class="btn btn-success" type="submit" id="btnSubmitDivisi">

                            <i class="bi bi-plus-lg me-1"></i>

                            Tambah

                        </button>

                    </div>

                </form>

                <!-- SEARCH BOX -->
                <div class="mb-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light text-muted"><i class="bi bi-search"></i></span>
                        <input type="text" id="searchModalDivisi" class="form-control" placeholder="Cari nama unit...">
                    </div>
                </div>

                <!-- TABEL -->

                <div class="table-responsive modal-table-scroll" style="max-height: 360px; overflow-y: auto;">

                    <table class="table table-bordered table-hover align-middle mb-0" id="tableModalDivisi">

                        <thead class="table-light sticky-top">

                            <tr>

                                <th width="10%">No</th>

                                <th>Nama Unit</th>

                                <th width="20%">Aksi</th>

                            </tr>

                        </thead>

                        <tbody>

                            @forelse($divisi as $item)
                            <tr>

                                <td>{{ $loop->iteration }}</td>

                                <td>{{ $item->nama_divisi }}</td>

                                <td>
                                    <div class="btn-action-group">
                                        <button type="button" class="btn btn-sm btn-icon btn-outline-warning text-dark btnEditDivisi" data-id="{{ $item->id }}" data-nama="{{ $item->nama_divisi }}" title="Edit Unit">
                                            <i class="bi bi-pencil-square"></i>
                                        </button>

                                        <form action="{{ route('divisi.destroy', $item) }}" method="POST" class="d-inline formDeleteDivisi">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-sm btn-icon btn-outline-danger" type="submit" title="Hapus Unit">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>

                            </tr>

                            @empty

                            <tr>
                                <td colspan="3" class="text-center py-4 text-muted align-middle">
                                    <div class="d-flex flex-column align-items-center justify-content-center text-center w-100 py-1">
                                        <i class="bi bi-building-exclamation fs-3 mb-2 text-muted"></i>
                                        <span class="fw-medium">Belum ada data divisi.</span>
                                    </div>
                                </td>
                            </tr>
                            @endforelse

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>

</div>


<!-- ==================== MODAL EDIT DIVISI ==================== -->

<div class="modal fade" id="modalEditDivisi" tabindex="-1">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content rounded-0">

            <form id="formEditDivisi" method="POST">

                @csrf
                @method('PUT')

                <div class="modal-header bg-success text-white">

                    <h5 class="modal-title">

                        Edit Divisi

                    </h5>

                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal">
                    </button>

                </div>

                <div class="modal-body">

                    <div class="mb-3">

                        <label class="form-label">

                            Nama Divisi

                        </label>

                        <input type="text" id="editNamaDivisi" name="nama_divisi" class="form-control" required>

                    </div>

                </div>

                <div class="modal-footer">

                    <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">

                        Batal

                    </button>

                    <button class="btn btn-success" type="submit">

                        <i class="bi bi-check-circle"></i>

                        Simpan

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>



<form id="formDeleteMaster" method="POST" style="display:none;">
    @csrf
    @method('DELETE')
</form>




<!-- ================= MODAL KATEGORI ================= -->

<div class="modal fade" id="modalKategori" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow">

            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="bi bi-tags me-2"></i>
                    Kelola Kategori Surat
                </h5>

                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal">
                </button>
            </div>

            <div class="modal-body">

                <!-- FORM TAMBAH -->

                <form action="{{ route('kategori-surat.store') }}" method="POST" class="mb-3" id="formTambahKategori">

                    @csrf

                    <div class="input-group">

                        <input type="text" name="nama_kategori" id="inputNamaKategori" class="form-control" placeholder="Masukkan kategori baru" required>

                        <button class="btn btn-success" type="submit" id="btnSubmitKategori">
                            <i class="bi bi-plus-lg me-1"></i>
                            Tambah
                        </button>

                    </div>

                </form>

                <!-- SEARCH BOX -->
                <div class="mb-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light text-muted"><i class="bi bi-search"></i></span>
                        <input type="text" id="searchModalKategori" class="form-control" placeholder="Cari kategori surat...">
                    </div>
                </div>

                <!-- TABEL -->

                <div class="table-responsive modal-table-scroll" style="max-height: 360px; overflow-y: auto;">

                    <table class="table table-bordered table-hover align-middle mb-0" id="tableModalKategori">

                        <thead class="table-light sticky-top">

                            <tr>
                                <th width="10%">No</th>
                                <th>Nama Kategori</th>
                                <th width="20%">Aksi</th>
                            </tr>

                        </thead>

                        <tbody>

                            @forelse ($kategoriSurat as $kategori)
                            <tr>

                                <td>{{ $loop->iteration }}</td>

                                <td>{{ $kategori->nama_kategori }}</td>

                                <td>
                                    <div class="btn-action-group">
                                        <button class="btn btn-sm btn-icon btn-outline-warning text-dark btn-edit-kategori" data-id="{{ $kategori->id }}" data-nama="{{ $kategori->nama_kategori }}" title="Edit Kategori">
                                            <i class="bi bi-pencil-square"></i>
                                        </button>

                                        <form action="{{ route('kategori-surat.destroy', $kategori) }}" method="POST" class="d-inline formDeleteKategori">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-icon btn-outline-danger" title="Hapus Kategori">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>

                            </tr>
                            @empty
                            <tr>
                                <td colspan="3" class="text-center py-4 text-muted align-middle">
                                    <div class="d-flex flex-column align-items-center justify-content-center text-center w-100 py-1">
                                        <i class="bi bi-tag fs-3 mb-2 text-muted"></i>
                                        <span class="fw-medium">Belum ada kategori surat.</span>
                                    </div>
                                </td>
                            </tr>
                            @endforelse

                        </tbody>

                    </table>

                </div>

            </div>

        </div>
    </div>
</div>


<!-- ==================== MODAL JENIS SURAT ==================== -->

<div class="modal fade" id="modalJenis" data-bs-backdrop="static" tabindex="-1">

    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">

        <div class="modal-content border-0 shadow">

            <div class="modal-header bg-info text-white">

                <h5 class="modal-title">
                    <i class="bi bi-file-earmark-text me-2"></i>
                    Kelola Jenis Surat
                </h5>

                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal">
                </button>

            </div>

            <div class="modal-body">

                <!-- FORM TAMBAH -->

                <form action="{{ route('jenis-surat.store') }}" method="POST" class="mb-3">

                    @csrf

                    <div class="input-group">

                        <input type="text" name="nama_jenis" class="form-control" placeholder="Contoh: Surat Masuk, Surat Keluar, Internal" required>

                        <button class="btn btn-info text-white" type="submit">

                            <i class="bi bi-plus-lg me-1"></i>
                            Tambah

                        </button>

                    </div>

                </form>

                <!-- SEARCH BOX -->
                <div class="mb-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light text-muted"><i class="bi bi-search"></i></span>
                        <input type="text" id="searchModalJenis" class="form-control" placeholder="Cari jenis surat...">
                    </div>
                </div>

                <!-- TABEL -->

                <div class="table-responsive modal-table-scroll" style="max-height: 360px; overflow-y: auto;">

                    <table class="table table-bordered table-hover align-middle mb-0" id="tableModalJenis">

                        <thead class="table-light sticky-top">

                            <tr>
                                <th width="10%">No</th>
                                <th>Nama Jenis Surat</th>
                                <th width="20%">Aksi</th>
                            </tr>

                        </thead>

                        <tbody>

                            @forelse($jenisSurat as $jenis)
                            <tr>

                                <td>{{ $loop->iteration }}</td>

                                <td>{{ $jenis->nama_jenis }}</td>

                                <td>
                                    <div class="btn-action-group">
                                        <button type="button" class="btn btn-sm btn-icon btn-outline-warning text-dark btnEditJenis" data-id="{{ $jenis->id }}" data-nama="{{ $jenis->nama_jenis }}" title="Edit Jenis Surat">
                                            <i class="bi bi-pencil-square"></i>
                                        </button>

                                        <form action="{{ route('jenis-surat.destroy', $jenis) }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus jenis surat ini?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-icon btn-outline-danger" title="Hapus Jenis Surat">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>

                            </tr>

                            @empty

                            <tr>
                                <td colspan="3" class="text-center py-4 text-muted align-middle">
                                    <div class="d-flex flex-column align-items-center justify-content-center text-center w-100 py-1">
                                        <i class="bi bi-file-earmark-x fs-3 mb-2 text-muted"></i>
                                        <span class="fw-medium">Belum ada jenis surat.</span>
                                    </div>
                                </td>
                            </tr>
                            @endforelse

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>

</div>

<!-- ==================== MODAL EDIT KATEGORI ==================== -->

<div class="modal fade" id="modalEditKategori" tabindex="-1">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content rounded-0">

            <form id="formEditKategori" method="POST">

                @csrf
                @method('PUT')

                <div class="modal-header bg-success text-white">

                    <h5 class="modal-title">
                        Edit Kategori Surat
                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>

                </div>

                <div class="modal-body">

                    <div class="mb-3">

                        <label class="form-label">
                            Nama Kategori
                        </label>

                        <input type="text" name="nama_kategori" id="editNamaKategori" class="form-control" required>

                    </div>

                </div>

                <div class="modal-footer">

                    <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">

                        Batal

                    </button>

                    <button class="btn btn-success" type="submit">

                        <i class="bi bi-check-circle"></i>

                        Simpan

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>

<!-- ==================== MODAL EDIT JENIS SURAT ==================== -->

<div class="modal fade" id="modalEditJenis" tabindex="-1">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content rounded-0">

            <form id="formEditJenis" method="POST">

                @csrf
                @method('PUT')

                <div class="modal-header bg-info text-white">

                    <h5 class="modal-title">
                        Edit Jenis Surat
                    </h5>

                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal">
                    </button>

                </div>

                <div class="modal-body">

                    <div class="mb-3">

                        <label class="form-label">
                            Nama Jenis Surat
                        </label>

                        <input type="text" id="editNamaJenis" name="nama_jenis" class="form-control" required>

                    </div>

                </div>

                <div class="modal-footer">

                    <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">

                        Batal

                    </button>

                    <button class="btn btn-info text-white" type="submit">

                        <i class="bi bi-check-circle"></i>

                        Simpan

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>

@endsection

@push('scripts')
<script>
    // ===================== EDIT DIVISI =====================

    document.querySelectorAll('.btnEditDivisi').forEach(button => {

        button.addEventListener('click', function() {

            let id = this.dataset.id;
            let nama = this.dataset.nama;

            // Isi textbox
            document.getElementById('editNamaDivisi').value = nama;

            // Action form
            document.getElementById('formEditDivisi').action =
                "/divisi/" + id;

            // Tampilkan modal
            new bootstrap.Modal(
                document.getElementById('modalEditDivisi')
            ).show();

        });

    });


    document.addEventListener('DOMContentLoaded', function() {
        const adminDivisiId = '{{ auth()->user()->divisi_id }}';

        // Handle Role & Permissions di Modal Tambah
        const tambahRoleSelect = document.getElementById('tambah_role');
        const tambahPermContainer = document.getElementById('tambah_permissions_container');
        const tambahDivisiSelect = document.getElementById('tambah_divisi');
        const hintDivisiTambah = document.getElementById('hint_asisten_divisi_tambah');
        if (tambahRoleSelect && tambahPermContainer) {
            tambahRoleSelect.addEventListener('change', function() {
                const selectedText = this.options[this.selectedIndex] ? this.options[this.selectedIndex].text.toLowerCase() : '';
                if (selectedText.includes('asisten')) {
                    tambahPermContainer.style.display = 'block';
                    if (adminDivisiId && tambahDivisiSelect) {
                        tambahDivisiSelect.value = adminDivisiId;
                    }
                    if (hintDivisiTambah) hintDivisiTambah.style.display = 'block';
                } else {
                    tambahPermContainer.style.display = 'none';
                    if (hintDivisiTambah) hintDivisiTambah.style.display = 'none';
                    document.querySelectorAll('.tambah-permission-checkbox').forEach(cb => cb.checked = false);
                }
            });

            document.getElementById('btnSelectAllTambah')?.addEventListener('click', function() {
                document.querySelectorAll('.tambah-permission-checkbox').forEach(cb => cb.checked = true);
            });
            document.getElementById('btnUnselectAllTambah')?.addEventListener('click', function() {
                document.querySelectorAll('.tambah-permission-checkbox').forEach(cb => cb.checked = false);
            });
        }

        // Handle Role & Permissions di Modal Edit
        const editRoleSelect = document.getElementById('edit_role');
        const editPermContainer = document.getElementById('edit_permissions_container');
        const editDivisiSelect = document.getElementById('edit_divisi');
        const hintDivisiEdit = document.getElementById('hint_asisten_divisi_edit');
        if (editRoleSelect && editPermContainer) {
            editRoleSelect.addEventListener('change', function() {
                const selectedText = this.options[this.selectedIndex] ? this.options[this.selectedIndex].text.toLowerCase() : '';
                if (selectedText.includes('asisten')) {
                    editPermContainer.style.display = 'block';
                    if (adminDivisiId && editDivisiSelect) {
                        editDivisiSelect.value = adminDivisiId;
                    }
                    if (hintDivisiEdit) hintDivisiEdit.style.display = 'block';
                } else {
                    editPermContainer.style.display = 'none';
                    if (hintDivisiEdit) hintDivisiEdit.style.display = 'none';
                }
            });

            document.getElementById('btnSelectAllEdit')?.addEventListener('click', function() {
                document.querySelectorAll('.edit-permission-checkbox').forEach(cb => cb.checked = true);
            });
            document.getElementById('btnUnselectAllEdit')?.addEventListener('click', function() {
                document.querySelectorAll('.edit-permission-checkbox').forEach(cb => cb.checked = false);
            });
        }

        document.querySelectorAll('.btn-edit').forEach(button => {
            button.addEventListener('click', function() {
                let id = this.dataset.id;
                window.editCurrentUserId = id;

                document.getElementById('edit_name').value = this.dataset.name;
                document.getElementById('edit_nip').value = this.dataset.nip;
                document.getElementById('edit_email').value = this.dataset.email;
                document.getElementById('edit_role').value = this.dataset.role;
                document.getElementById('edit_divisi').value = this.dataset.divisi;
                document.getElementById('edit_status').value = this.dataset.status;

                // Cek apakah role yang dipilih adalah Asisten Admin
                const selectedRoleOption = document.getElementById('edit_role').options[document.getElementById('edit_role').selectedIndex];
                const selectedRoleText = selectedRoleOption ? selectedRoleOption.text.toLowerCase() : '';
                if (selectedRoleText.includes('asisten')) {
                    if (editPermContainer) editPermContainer.style.display = 'block';
                    if (adminDivisiId && editDivisiSelect) {
                        editDivisiSelect.value = adminDivisiId;
                    }
                    if (hintDivisiEdit) hintDivisiEdit.style.display = 'block';
                } else {
                    if (editPermContainer) editPermContainer.style.display = 'none';
                    if (hintDivisiEdit) hintDivisiEdit.style.display = 'none';
                }

                // Centang checkbox permissions sesuai data pengguna
                let permissions = [];
                try {
                    permissions = JSON.parse(this.dataset.permissions || '[]');
                } catch (e) {
                    permissions = [];
                }
                document.querySelectorAll('.edit-permission-checkbox').forEach(cb => {
                    cb.checked = Array.isArray(permissions) && permissions.includes(cb.value);
                });

                // Reset pesan peringatan jika sebelumnya ada
                const pNipEdit = document.getElementById('pesan_nip_edit');
                if (pNipEdit) { pNipEdit.style.display = 'none'; pNipEdit.innerHTML = ''; }
                const pEmailEdit = document.getElementById('pesan_email_edit');
                if (pEmailEdit) { pEmailEdit.style.display = 'none'; pEmailEdit.innerHTML = ''; }

                // Form action otomatis dihubungkan ke route RESTful /pengguna/{id}
                document.getElementById('editUserForm').action = '/pengguna/' + id;
            });
        });
    });


    // ==================== HAPUS USER ====================

    document.querySelectorAll('.btn-hapus-pengguna').forEach(button => {

        button.addEventListener('click', function() {

            const id = this.dataset.id;
            const nama = this.dataset.name;

            Swal.fire({
                title: 'Apakah Anda yakin?'
                , text: `Pengguna "${nama}" akan dihapus permanen.`
                , icon: 'warning'
                , showCancelButton: true
                , confirmButtonColor: '#dc3545'
                , cancelButtonColor: '#6c757d'
                , confirmButtonText: '<i class="bi bi-trash me-1"></i> Ya, Hapus'
                , cancelButtonText: 'Batal'
                , reverseButtons: true

            }).then((result) => {

                if (result.isConfirmed) {

                    const form = document.getElementById('formDeleteMaster');
                    form.action = '/pengguna/' + id;
                    form.submit();

                }

            });

        });

    });


    // EDIT KATEGORI

    document.querySelectorAll('.btn-edit-kategori')
        .forEach(button => {

            button.addEventListener('click', function() {

                const id = this.dataset.id;
                const nama = this.dataset.nama;

                document
                    .getElementById('editNamaKategori')
                    .value = nama;

                document
                    .getElementById('formEditKategori')
                    .action = `/kategori-surat/${id}`;

                new bootstrap.Modal(
                    document.getElementById('modalEditKategori')
                ).show();

            });

        });

    // =======================
    // EDIT JENIS SURAT
    // =======================

    document.querySelectorAll('.btnEditJenis').forEach(button => {

        button.addEventListener('click', function() {

            let id = this.dataset.id;
            let nama = this.dataset.nama;

            // Isi textbox
            document.getElementById('editNamaJenis').value = nama;

            // Ubah action form
            document.getElementById('formEditJenis').action =
                "/jenis-surat/" + id;

            // Tampilkan modal
            new bootstrap.Modal(
                document.getElementById('modalEditJenis')
            ).show();

        });

    });

    // ==========================================
    // LIVE SEARCH UNTUK MODAL UNIT, KATEGORI & JENIS
    // ==========================================
    function setupModalSearch(inputId, tableId) {
        const input = document.getElementById(inputId);
        const table = document.getElementById(tableId);
        if (input && table) {
            input.addEventListener('input', function() {
                let filter = this.value.toLowerCase().trim();
                let rows = table.querySelectorAll('tbody tr');
                rows.forEach(row => {
                    let text = row.innerText.toLowerCase();
                    if (!filter || text.includes(filter)) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                });
            });
        }
    }
    setupModalSearch('searchModalDivisi', 'tableModalDivisi');
    setupModalSearch('searchModalKategori', 'tableModalKategori');
    setupModalSearch('searchModalJenis', 'tableModalJenis');

    // ==========================================
    // HELPER PENERJEMAH PESAN KE BAHASA INDONESIA
    // ==========================================
    function terjemahkanPesan(msg, key = '') {
        if (!msg) return 'Terjadi kesalahan pada data yang diinput.';
        let m = msg.trim();
        const lower = m.toLowerCase();

        if (lower.includes('already been taken') || lower.includes('has already')) {
            if (key === 'nip' || lower.includes('nip')) return 'NIP ini sudah terdaftar di sistem. Silakan gunakan NIP lain.';
            if (key === 'email' || lower.includes('email')) return 'Alamat email ini sudah terdaftar di sistem. Silakan gunakan email lain.';
            if (key === 'nama_divisi' || lower.includes('nama divisi') || lower.includes('divisi')) return 'Nama unit ini sudah terdaftar di sistem. Silakan gunakan nama lain.';
            return 'Data ini sudah terdaftar di sistem. Silakan gunakan data lain.';
        }
        if (lower.includes('must be at least') || lower.includes('least 8')) {
            return 'Password minimal terdiri dari 8 karakter.';
        }
        if (lower.includes('field is required') || lower.includes('is required')) {
            if (key === 'nip' || lower.includes('nip')) return 'NIP wajib diisi.';
            if (key === 'name' || lower.includes('name')) return 'Nama lengkap wajib diisi.';
            if (key === 'email' || lower.includes('email')) return 'Alamat email wajib diisi.';
            if (key === 'password' || lower.includes('password')) return 'Password wajib diisi.';
            if (key === 'role_id' || lower.includes('role')) return 'Role akses wajib dipilih.';
            if (key === 'divisi_id' || lower.includes('divisi')) return 'Divisi kerja wajib dipilih.';
            if (key === 'nama_divisi' || lower.includes('nama divisi')) return 'Nama unit wajib diisi.';
            return 'Semua kolom wajib diisi dengan benar.';
        }
        if (lower.includes('valid email') || lower.includes('must be a valid email')) {
            return 'Format alamat email tidak valid.';
        }
        if (lower.includes('given data was invalid')) {
            return 'Periksa kembali data yang Anda masukkan.';
        }
        return m;
    }

    // ==========================================
    // AJAX TAMBAH UNIT (MODAL TETAP TERBUKA & AUTO FOKUS)
    // ==========================================
    const formTambahDivisi = document.getElementById('formTambahDivisi');
    const inputNamaDivisi = document.getElementById('inputNamaDivisi');
    const btnSubmitDivisi = document.getElementById('btnSubmitDivisi');

    if (formTambahDivisi && inputNamaDivisi && btnSubmitDivisi) {
        formTambahDivisi.addEventListener('submit', function(e) {
            e.preventDefault();

            const nama = inputNamaDivisi.value.trim();
            if (!nama) return;

            btnSubmitDivisi.disabled = true;
            const originalBtnHtml = btnSubmitDivisi.innerHTML;
            btnSubmitDivisi.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Menambahkan...';

            const formData = new FormData(formTambahDivisi);

            fetch(formTambahDivisi.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => {
                return response.json().then(data => ({
                    status: response.status,
                    body: data
                }));
            })
            .then(result => {
                btnSubmitDivisi.disabled = false;
                btnSubmitDivisi.innerHTML = originalBtnHtml;

                if (result.status >= 200 && result.status < 300 && result.body.success) {
                    const newDivisi = result.body.data;

                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            toast: true,
                            position: 'top-end',
                            icon: 'success',
                            title: `Unit "${newDivisi.nama_divisi}" berhasil ditambahkan!`,
                            showConfirmButton: false,
                            timer: 2000,
                            timerProgressBar: true
                        });
                    }

                    // Reset input & fokuskan cursor kembali agar admin bisa langsung mengetik lagi
                    inputNamaDivisi.value = '';
                    inputNamaDivisi.focus();

                    // Tambahkan baris baru ke tabel
                    const tableBody = document.querySelector('#tableModalDivisi tbody');
                    if (tableBody) {
                        const emptyRow = tableBody.querySelector('td[colspan="3"]');
                        if (emptyRow) {
                            tableBody.innerHTML = '';
                        }

                        const rowCount = tableBody.querySelectorAll('tr').length + 1;
                        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || formData.get('_token');
                        const tr = document.createElement('tr');
                        tr.innerHTML = `
                            <td>${rowCount}</td>
                            <td>${newDivisi.nama_divisi}</td>
                            <td>
                                <div class="btn-action-group">
                                    <button type="button" class="btn btn-sm btn-icon btn-outline-warning text-dark btnEditDivisi" data-id="${newDivisi.id}" data-nama="${newDivisi.nama_divisi}" title="Edit Unit">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>
                                    <form action="/divisi/${newDivisi.id}" method="POST" class="d-inline formDeleteDivisi">
                                        <input type="hidden" name="_token" value="${csrfToken}">
                                        <input type="hidden" name="_method" value="DELETE">
                                        <button class="btn btn-sm btn-icon btn-outline-danger" type="submit" title="Hapus Unit">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        `;
                        tableBody.appendChild(tr);

                        // Event edit untuk baris yang baru ditambahkan
                        tr.querySelector('.btnEditDivisi')?.addEventListener('click', function() {
                            document.getElementById('editNamaDivisi').value = this.dataset.nama;
                            document.getElementById('formEditDivisi').action = "/divisi/" + this.dataset.id;
                            new bootstrap.Modal(document.getElementById('modalEditDivisi')).show();
                        });

                        // Scroll otomatis ke bawah agar unit baru terlihat
                        const scrollContainer = document.querySelector('.modal-table-scroll');
                        if (scrollContainer) {
                            scrollContainer.scrollTop = scrollContainer.scrollHeight;
                        }
                    }

                    // Tambahkan option baru ke select dropdown divisi
                    document.querySelectorAll('select[name="divisi_id"]').forEach(select => {
                        const opt = document.createElement('option');
                        opt.value = newDivisi.id;
                        opt.textContent = newDivisi.nama_divisi;
                        select.appendChild(opt);
                    });

                } else {
                    let errorMsg = 'Gagal menambahkan unit.';
                    if (result.body && result.body.errors && result.body.errors.nama_divisi) {
                        errorMsg = result.body.errors.nama_divisi[0];
                    } else if (result.body && result.body.message) {
                        errorMsg = result.body.message;
                    }

                    errorMsg = terjemahkanPesan(errorMsg, 'nama_divisi');

                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            toast: true,
                            position: 'top-end',
                            icon: 'error',
                            title: errorMsg,
                            showConfirmButton: false,
                            timer: 3500,
                            timerProgressBar: true
                        });
                    } else {
                        alert(errorMsg);
                    }
                    inputNamaDivisi.focus();
                }
            })
            .catch(err => {
                btnSubmitDivisi.disabled = false;
                btnSubmitDivisi.innerHTML = originalBtnHtml;
                console.error(err);
                formTambahDivisi.submit();
            });
        });
    }

    // ==========================================
    // HAPUS UNIT LANGSUNG TANPA KONFIRMASI (LANGSUNG PROSES)
    // ==========================================
    document.addEventListener('submit', function(e) {
        if (e.target && e.target.classList.contains('formDeleteDivisi')) {
            e.preventDefault();
            const form = e.target;
            const btn = form.querySelector('button[type="submit"]');
            if (btn) btn.disabled = true;

            fetch(form.action, {
                method: 'POST',
                body: new FormData(form),
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json().then(data => ({ status: response.status, body: data })))
            .then(result => {
                if (result.status >= 200 && result.status < 300 && result.body.success) {
                    const tr = form.closest('tr');
                    if (tr) {
                        tr.remove();
                    }

                    // Perbarui nomor urut pada tabel modal
                    const rows = document.querySelectorAll('#tableModalDivisi tbody tr');
                    if (rows.length === 0) {
                        const tbody = document.querySelector('#tableModalDivisi tbody');
                        if (tbody) {
                            tbody.innerHTML = `
                                <tr>
                                    <td colspan="3" class="text-center py-4 text-muted align-middle">
                                        <div class="d-flex flex-column align-items-center justify-content-center text-center w-100 py-1">
                                            <i class="bi bi-building-exclamation fs-3 mb-2 text-muted"></i>
                                            <span class="fw-medium">Belum ada data divisi.</span>
                                        </div>
                                    </td>
                                </tr>
                            `;
                        }
                    } else {
                        rows.forEach((row, idx) => {
                            const firstTd = row.querySelector('td:first-child');
                            if (firstTd && !row.querySelector('td[colspan]')) {
                                firstTd.textContent = idx + 1;
                            }
                        });
                    }

                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            toast: true,
                            position: 'top-end',
                            icon: 'success',
                            title: 'Unit berhasil dihapus!',
                            showConfirmButton: false,
                            timer: 2000,
                            timerProgressBar: true
                        });
                    }
                } else {
                    let errorMsg = result.body.message || 'Gagal menghapus unit.';
                    errorMsg = terjemahkanPesan(errorMsg, 'divisi');
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            toast: true,
                            position: 'top-end',
                            icon: 'error',
                            title: errorMsg,
                            showConfirmButton: false,
                            timer: 3500,
                            timerProgressBar: true
                        });
                    } else {
                        alert(errorMsg);
                    }
                    if (btn) btn.disabled = false;
                }
            })
            .catch(err => {
                console.error(err);
                form.submit();
            });
        }
    });

    // Tetap buka modal jika ada session open_modal atau error nama_divisi
    @if(session('open_modal') === 'modalDivisi' || $errors->has('nama_divisi'))
        const modalDivisiEl = document.getElementById('modalDivisi');
        if (modalDivisiEl) {
            const m = bootstrap.Modal.getInstance(modalDivisiEl) || new bootstrap.Modal(modalDivisiEl);
            m.show();
            setTimeout(() => {
                if (inputNamaDivisi) inputNamaDivisi.focus();
            }, 400);
        }
    @endif

    // ==========================================
    // AJAX TAMBAH KATEGORI (MODAL TETAP TERBUKA & AUTO FOKUS)
    // ==========================================
    const formTambahKategori = document.getElementById('formTambahKategori');
    const inputNamaKategori = document.getElementById('inputNamaKategori');
    const btnSubmitKategori = document.getElementById('btnSubmitKategori');

    if (formTambahKategori) {
        formTambahKategori.addEventListener('submit', function(e) {
            e.preventDefault();

            const namaKategoriVal = inputNamaKategori ? inputNamaKategori.value.trim() : '';
            if (!namaKategoriVal) {
                if (inputNamaKategori) inputNamaKategori.focus();
                return;
            }

            if (btnSubmitKategori) btnSubmitKategori.disabled = true;
            const originalBtnHtml = btnSubmitKategori ? btnSubmitKategori.innerHTML : '';
            if (btnSubmitKategori) {
                btnSubmitKategori.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Menyimpan...';
            }

            const formData = new FormData(formTambahKategori);

            fetch(formTambahKategori.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json().then(data => ({ status: response.status, body: data })))
            .then(result => {
                if (btnSubmitKategori) {
                    btnSubmitKategori.disabled = false;
                    btnSubmitKategori.innerHTML = originalBtnHtml;
                }

                if (result.status >= 200 && result.status < 300 && result.body.success) {
                    const newKategori = result.body.data;

                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            toast: true,
                            position: 'top-end',
                            icon: 'success',
                            title: 'Kategori berhasil ditambahkan!',
                            showConfirmButton: false,
                            timer: 2000,
                            timerProgressBar: true
                        });
                    }

                    if (inputNamaKategori) {
                        inputNamaKategori.value = '';
                        inputNamaKategori.focus();
                    }

                    const tableBody = document.querySelector('#tableModalKategori tbody');
                    if (tableBody) {
                        const emptyRow = tableBody.querySelector('td[colspan]');
                        if (emptyRow) {
                            emptyRow.closest('tr').remove();
                        }

                        const currentRows = tableBody.querySelectorAll('tr');
                        const nextNo = currentRows.length + 1;

                        const tr = document.createElement('tr');
                        tr.innerHTML = `
                            <td>${nextNo}</td>
                            <td>${newKategori.nama_kategori}</td>
                            <td>
                                <div class="btn-action-group">
                                    <button class="btn btn-sm btn-icon btn-outline-warning text-dark btn-edit-kategori" data-id="${newKategori.id}" data-nama="${newKategori.nama_kategori}" title="Edit Kategori">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>
                                    <form action="/kategori-surat/${newKategori.id}" method="POST" class="d-inline formDeleteKategori">
                                        <input type="hidden" name="_token" value="${document.querySelector('meta[name="csrf-token"]')?.content || ''}">
                                        <input type="hidden" name="_method" value="DELETE">
                                        <button type="submit" class="btn btn-sm btn-icon btn-outline-danger" title="Hapus Kategori">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        `;
                        tableBody.appendChild(tr);

                        // Event edit untuk baris yang baru ditambahkan
                        tr.querySelector('.btn-edit-kategori')?.addEventListener('click', function() {
                            document.getElementById('editNamaKategori').value = this.dataset.nama;
                            document.getElementById('formEditKategori').action = `/kategori-surat/${this.dataset.id}`;
                            new bootstrap.Modal(document.getElementById('modalEditKategori')).show();
                        });

                        // Scroll otomatis ke bawah agar kategori baru terlihat
                        const scrollContainer = document.querySelector('#modalKategori .modal-table-scroll');
                        if (scrollContainer) {
                            scrollContainer.scrollTop = scrollContainer.scrollHeight;
                        }
                    }

                    // Tambahkan option baru ke select dropdown kategori jika ada
                    document.querySelectorAll('select[name="kategori_id"]').forEach(select => {
                        const opt = document.createElement('option');
                        opt.value = newKategori.id;
                        opt.textContent = newKategori.nama_kategori;
                        select.appendChild(opt);
                    });

                } else {
                    let errorMsg = 'Gagal menambahkan kategori.';
                    if (result.body && result.body.errors && result.body.errors.nama_kategori) {
                        errorMsg = result.body.errors.nama_kategori[0];
                    } else if (result.body && result.body.message) {
                        errorMsg = result.body.message;
                    }

                    errorMsg = terjemahkanPesan(errorMsg, 'nama_kategori');

                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            toast: true,
                            position: 'top-end',
                            icon: 'error',
                            title: errorMsg,
                            showConfirmButton: false,
                            timer: 3500,
                            timerProgressBar: true
                        });
                    } else {
                        alert(errorMsg);
                    }
                    if (inputNamaKategori) inputNamaKategori.focus();
                }
            })
            .catch(err => {
                if (btnSubmitKategori) {
                    btnSubmitKategori.disabled = false;
                    btnSubmitKategori.innerHTML = originalBtnHtml;
                }
                console.error(err);
                formTambahKategori.submit();
            });
        });
    }

    // ==========================================
    // HAPUS KATEGORI LANGSUNG TANPA KONFIRMASI (LANGSUNG PROSES & MODAL TETAP TERBUKA)
    // ==========================================
    document.addEventListener('submit', function(e) {
        if (e.target && e.target.classList.contains('formDeleteKategori')) {
            e.preventDefault();
            const form = e.target;
            const btn = form.querySelector('button[type="submit"]');
            if (btn) btn.disabled = true;

            fetch(form.action, {
                method: 'POST',
                body: new FormData(form),
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json().then(data => ({ status: response.status, body: data })))
            .then(result => {
                if (result.status >= 200 && result.status < 300 && result.body.success) {
                    const tr = form.closest('tr');
                    if (tr) {
                        tr.remove();
                    }

                    // Perbarui nomor urut pada tabel modal
                    const rows = document.querySelectorAll('#tableModalKategori tbody tr');
                    if (rows.length === 0) {
                        const tbody = document.querySelector('#tableModalKategori tbody');
                        if (tbody) {
                            tbody.innerHTML = `
                                <tr>
                                    <td colspan="3" class="text-center py-4 text-muted align-middle">
                                        <div class="d-flex flex-column align-items-center justify-content-center text-center w-100 py-1">
                                            <i class="bi bi-tag fs-3 mb-2 text-muted"></i>
                                            <span class="fw-medium">Belum ada kategori surat.</span>
                                        </div>
                                    </td>
                                </tr>
                            `;
                        }
                    } else {
                        rows.forEach((row, idx) => {
                            const firstTd = row.querySelector('td:first-child');
                            if (firstTd && !row.querySelector('td[colspan]')) {
                                firstTd.textContent = idx + 1;
                            }
                        });
                    }

                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            toast: true,
                            position: 'top-end',
                            icon: 'success',
                            title: 'Kategori berhasil dihapus!',
                            showConfirmButton: false,
                            timer: 2000,
                            timerProgressBar: true
                        });
                    }
                } else {
                    let errorMsg = result.body.message || 'Gagal menghapus kategori.';
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            toast: true,
                            position: 'top-end',
                            icon: 'error',
                            title: errorMsg,
                            showConfirmButton: false,
                            timer: 3500,
                            timerProgressBar: true
                        });
                    } else {
                        alert(errorMsg);
                    }
                    if (btn) btn.disabled = false;
                }
            })
            .catch(err => {
                console.error(err);
                form.submit();
            });
        }
    });

    // Tetap buka modal jika ada session open_modal atau error nama_kategori
    @if(session('open_modal') === 'modalKategori' || $errors->has('nama_kategori'))
        const modalKategoriEl = document.getElementById('modalKategori');
        if (modalKategoriEl) {
            const m = bootstrap.Modal.getInstance(modalKategoriEl) || new bootstrap.Modal(modalKategoriEl);
            m.show();
            setTimeout(() => {
                if (inputNamaKategori) inputNamaKategori.focus();
            }, 400);
        }
    @endif

    // ==========================================
    // AJAX TAMBAH PENGGUNA (MODAL TETAP TERBUKA & AUTO FOKUS)
    // ==========================================
    const formTambahUser = document.getElementById('formTambahUser');
    const tambahNip = document.getElementById('tambah_nip');
    const tambahName = document.getElementById('tambah_name');
    const tambahEmail = document.getElementById('tambah_email');
    const tambahPassword = document.getElementById('tambah_password');
    const btnSubmitUser = document.getElementById('btnSubmitUser');
    const tambahUserModalEl = document.getElementById('tambahUserModal');

    let userBaruDitambahkanCount = 0;

    if (formTambahUser && btnSubmitUser) {
        formTambahUser.addEventListener('submit', function(e) {
            e.preventDefault();

            btnSubmitUser.disabled = true;
            const originalUserBtnHtml = btnSubmitUser.innerHTML;
            btnSubmitUser.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Menyimpan...';

            const formData = new FormData(formTambahUser);

            fetch(formTambahUser.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json().then(data => ({
                status: response.status,
                body: data
            })))
            .then(result => {
                btnSubmitUser.disabled = false;
                btnSubmitUser.innerHTML = originalUserBtnHtml;

                if (result.status >= 200 && result.status < 300 && result.body.success) {
                    userBaruDitambahkanCount++;
                    const userBaru = result.body.data;

                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            toast: true,
                            position: 'top-end',
                            icon: 'success',
                            title: `Pengguna "${userBaru.name}" berhasil ditambahkan!`,
                            showConfirmButton: false,
                            timer: 2500,
                            timerProgressBar: true
                        });
                    }

                    // Sembunyikan pesan peringatan hijau jika sebelumnya ada
                    const pNipSuccess = document.getElementById('pesan_nip_tambah');
                    if (pNipSuccess) { pNipSuccess.style.display = 'none'; pNipSuccess.innerHTML = ''; }
                    const pEmailSuccess = document.getElementById('pesan_email_tambah');
                    if (pEmailSuccess) { pEmailSuccess.style.display = 'none'; pEmailSuccess.innerHTML = ''; }

                    // Kosongkan field input, pertahankan role dan divisi agar mudah input berurutan
                    if (tambahNip) tambahNip.value = '';
                    if (tambahName) tambahName.value = '';
                    if (tambahEmail) tambahEmail.value = '';
                    if (tambahPassword) {
                        tambahPassword.value = '';
                        delete tambahPassword.dataset.manualEdited;
                    }

                    // Fokuskan kembali ke kolom NIP
                    if (tambahNip) tambahNip.focus();

                } else {
                    let errorMsg = 'Gagal menambahkan pengguna.';
                    let errorKey = '';
                    if (result.body && result.body.errors) {
                        const errors = result.body.errors;

                        // Periksa apakah NIP sudah terdaftar
                        if (errors.nip) {
                            const pNip = document.getElementById('pesan_nip_tambah');
                            if (pNip) {
                                pNip.innerHTML = `<em>* ${terjemahkanPesan(errors.nip[0], 'nip')}</em>`;
                                pNip.style.display = 'block';
                            }
                        }

                        // Periksa apakah Email sudah terdaftar
                        if (errors.email) {
                            const pEmail = document.getElementById('pesan_email_tambah');
                            if (pEmail) {
                                pEmail.innerHTML = `<em>* ${terjemahkanPesan(errors.email[0], 'email')}</em>`;
                                pEmail.style.display = 'block';
                            }
                        }

                        const firstKey = Object.keys(errors)[0];
                        if (firstKey) {
                            errorKey = firstKey;
                            errorMsg = errors[firstKey][0];
                            const errorInput = formTambahUser.querySelector(`[name="${firstKey}"]`);
                            if (errorInput) errorInput.focus();
                        }
                    } else if (result.body && result.body.message) {
                        errorMsg = result.body.message;
                    }

                    errorMsg = terjemahkanPesan(errorMsg, errorKey);

                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            toast: true,
                            position: 'top-end',
                            icon: 'error',
                            title: errorMsg,
                            showConfirmButton: false,
                            timer: 3500,
                            timerProgressBar: true
                        });
                    } else {
                        alert(errorMsg);
                    }
                }
            })
            .catch(err => {
                btnSubmitUser.disabled = false;
                btnSubmitUser.innerHTML = originalUserBtnHtml;
                console.error(err);
                formTambahUser.submit();
            });
        });
    }

    // ==========================================
    // REAL-TIME CHECKER NIP & EMAIL TERDAFTAR
    // ==========================================
    function pasangPemeriksaKetersediaan(inputEl, feedbackEl, tipeField, getUserIdFn = () => null) {
        if (!inputEl || !feedbackEl) return;
        let timer;

        inputEl.addEventListener('input', function() {
            clearTimeout(timer);
            const nilai = this.value.trim();

            if (!nilai) {
                feedbackEl.style.display = 'none';
                feedbackEl.innerHTML = '';
                return;
            }

            timer = setTimeout(() => {
                let url = `/pengguna/check-availability?${tipeField}=` + encodeURIComponent(nilai);
                const uid = getUserIdFn();
                if (uid) url += '&user_id=' + encodeURIComponent(uid);

                fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    if (data && data.exists) {
                        feedbackEl.innerHTML = `<em>* ${data.message}</em>`;
                        feedbackEl.style.display = 'block';
                    } else {
                        feedbackEl.style.display = 'none';
                        feedbackEl.innerHTML = '';
                    }
                })
                .catch(() => {});
            }, 350);
        });
    }

    pasangPemeriksaKetersediaan(
        document.getElementById('tambah_nip'),
        document.getElementById('pesan_nip_tambah'),
        'nip'
    );
    pasangPemeriksaKetersediaan(
        document.getElementById('tambah_email'),
        document.getElementById('pesan_email_tambah'),
        'email'
    );

    pasangPemeriksaKetersediaan(
        document.getElementById('edit_nip'),
        document.getElementById('pesan_nip_edit'),
        'nip',
        () => window.editCurrentUserId
    );
    pasangPemeriksaKetersediaan(
        document.getElementById('edit_email'),
        document.getElementById('pesan_email_edit'),
        'email',
        () => window.editCurrentUserId
    );

    // ==========================================
    // AUTO-SYNC PASSWORD DEFAULT DENGAN EMAIL
    // ==========================================
    if (tambahEmail && tambahPassword) {
        tambahEmail.addEventListener('input', function() {
            if (!tambahPassword.dataset.manualEdited) {
                tambahPassword.value = this.value;
            }
        });

        tambahPassword.addEventListener('input', function() {
            if (this.value.trim() !== '') {
                this.dataset.manualEdited = 'true';
            } else {
                delete this.dataset.manualEdited;
                this.value = tambahEmail.value;
            }
        });
    }

    // Saat modal tambah pengguna ditutup, jika ada akun yang baru ditambahkan, refresh halaman
    if (tambahUserModalEl) {
        tambahUserModalEl.addEventListener('hidden.bs.modal', function() {
            const pNip = document.getElementById('pesan_nip_tambah');
            if (pNip) { pNip.style.display = 'none'; pNip.innerHTML = ''; }
            const pEmail = document.getElementById('pesan_email_tambah');
            if (pEmail) { pEmail.style.display = 'none'; pEmail.innerHTML = ''; }
            if (tambahPassword) {
                delete tambahPassword.dataset.manualEdited;
            }

            if (userBaruDitambahkanCount > 0) {
                window.location.reload();
            }
        });
    }

    // Tetap buka modal jika ada session open_modal atau validasi error pengguna
    @if(session('open_modal') === 'tambahUserModal' || ($errors->any() && (old('nip') || old('email'))))
        if (tambahUserModalEl) {
            const mUser = bootstrap.Modal.getInstance(tambahUserModalEl) || new bootstrap.Modal(tambahUserModalEl);
            mUser.show();
            setTimeout(() => {
                if (tambahNip) tambahNip.focus();
            }, 400);
        }
    @endif
</script>
@endpush