@extends('layout.appdas')

@section('title', 'Manajemen Surat')

@section('content')
<style>
    .btn-xs {
        padding: 0.2rem 0.55rem;
        font-size: 0.75rem;
        border-radius: 0.25rem;
    }
    .fs-9 {
        font-size: 0.72rem !important;
    }
    .scrollable-preset-list::-webkit-scrollbar {
        width: 6px;
    }
    .scrollable-preset-list::-webkit-scrollbar-thumb {
        background-color: #cbd5e1;
        border-radius: 4px;
    }
    .preset-item-row {
        transition: all 0.15s ease-in-out;
        border: 1px solid transparent !important;
    }
    .preset-item-row:hover {
        background-color: rgba(13, 110, 253, 0.07) !important;
        border-color: rgba(13, 110, 253, 0.2) !important;
    }
    .select-preset-action {
        cursor: pointer;
        user-select: none;
    }
    .select-preset-action:hover .preset-name-text {
        color: #0d6efd !important;
    }
    .btn-action-preset-item {
        width: 26px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        transition: all 0.15s ease-in-out;
    }
    .btn-action-preset-item:hover {
        transform: scale(1.1);
    }
    .btn-toggle-preset {
        transition: all 0.2s ease-in-out;
        cursor: pointer;
    }
    .btn-toggle-preset:hover {
        transform: scale(1.08);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    }
    .btn-toggle-preset:active {
        transform: scale(0.94);
    }
    .cursor-pointer {
        cursor: pointer !important;
    }
    .input-preset-target {
        cursor: pointer !important;
        background-color: #f8fafc !important;
    }
    .input-preset-target:focus {
        background-color: #ffffff !important;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15) !important;
    }
    .form-section-card {
        background-color: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 0.6rem;
        padding: 1.15rem 1.25rem;
        margin-bottom: 1.1rem;
        transition: all 0.2s ease-in-out;
    }
    .form-section-card:hover {
        border-color: #cbd5e1;
    }
    .form-section-card:focus-within {
        background-color: #ffffff;
        border-color: #94a3b8;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
    }
    .upload-dropzone {
        border: 2px dashed #cbd5e1;
        border-radius: 0.6rem;
        background-color: #f8fafc;
        padding: 1.5rem 1rem;
        text-align: center;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
    }
    .upload-dropzone:hover, .upload-dropzone.dragover {
        border-color: #0d6efd !important;
        background-color: #eff6ff !important;
    }
</style>

{{-- MASTER CARD: MANAJEMEN SURAT --}}
<div class="card table-card mb-0 shadow-sm border-0 rounded-0 overflow-hidden">
    <div class="card-header bg-white border-bottom py-3 px-4 surat-master-header">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 surat-header-wrapper">
            <div class="surat-title-info">
                <h5 class="mb-1 fw-bold text-dark d-inline-flex align-items-center">
                    <i class="bi bi-envelope-paper-fill text-primary me-2 fs-5 align-middle"></i>
                    <span>Manajemen Surat</span>
                </h5>
                <p class="text-muted mb-0 small">
                    Kelola arsip surat masuk, surat keluar, disposisi, dan dokumen internal divisi Anda.
                </p>
            </div>

            <div class="d-flex gap-2 flex-wrap align-items-center surat-actions-wrapper">

                @if (!auth()->user()->isAdmin() && !auth()->user()->isAsisten())
                <button type="button" class="btn btn-outline-primary btn-sm px-2.5" data-bs-toggle="modal" data-bs-target="#modalKelolaKategori" title="Kelola Kategori Surat Anda">
                    <i class="bi bi-tags me-1"></i>
                    <span>Kategori Saya</span>
                </button>
                @endif

                <button class="btn btn-primary btn-sm px-3 surat-btn-tambah" data-bs-toggle="modal" data-bs-target="#modalTambahSurat">
                    <i class="bi bi-plus-lg me-1"></i>
                    <span>Tambah Surat</span>
                </button>
            </div>
        </div>
    </div>

    <div class="card-body p-4 d-flex flex-column">
        {{-- REKAP STATISTIK --}}
        <div class="row g-3 mb-4">
            <div class="col-6 col-md-3">
                <div class="border rounded-3 p-3 h-100 bg-light">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block mb-1">Total Surat</small>
                            <h3 class="fw-bold mb-0 text-dark">{{ $totalSurat ?? 0 }}</h3>
                        </div>
                        <div class="stat-icon bg-soft-primary p-2 rounded-3 text-primary">
                            <i class="bi bi-envelope-fill fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="border rounded-3 p-3 h-100 bg-light">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block mb-1">Surat Masuk</small>
                            <h3 class="fw-bold mb-0 text-success">{{ $suratMasuk ?? 0 }}</h3>
                        </div>
                        <div class="stat-icon bg-soft-success p-2 rounded-3 text-success">
                            <i class="bi bi-box-arrow-in-down fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="border rounded-3 p-3 h-100 bg-light">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block mb-1">Surat Keluar</small>
                            <h3 class="fw-bold mb-0 text-danger">{{ $suratKeluar ?? 0 }}</h3>
                        </div>
                        <div class="stat-icon bg-soft-danger p-2 rounded-3 text-danger">
                            <i class="bi bi-box-arrow-up fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="border rounded-3 p-3 h-100 bg-light">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block mb-1">Internal</small>
                            <h3 class="fw-bold mb-0 text-warning">{{ $suratInternal ?? 0 }}</h3>
                        </div>
                        <div class="stat-icon bg-soft-warning p-2 rounded-3 text-warning">
                            <i class="bi bi-building fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- FORM FILTER & PENCARIAN TERPADU --}}
        <div class="row g-2 mb-4 bg-light p-3 rounded-3 border align-items-center">
            <div class="col-md-3">
                <input type="text" id="searchKeyword" class="form-control form-control-sm" placeholder="Cari nomor surat atau perihal...">
            </div>
            <div class="col-md-2">
                <select id="filterKategori" class="form-select form-select-sm">
                    <option value="">-- Semua Kategori --</option>
                    @foreach (($kategoriFilter ?? $kategoriSurat) as $kategori)
                    <option value="{{ $kategori->id }}" {{ request('kategori') == $kategori->id ? 'selected' : '' }}>{{ $kategori->nama_kategori }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select id="filterJenis" class="form-select form-select-sm">
                    <option value="">-- Semua Jenis --</option>
                    @foreach ($jenisSurat as $jenis)
                    <option value="{{ $jenis->id }}">{{ $jenis->nama_jenis }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select id="filterStatusDisposisi" class="form-select form-select-sm">
                    <option value="">-- Status Disposisi --</option>
                    <option value="sudah">Sudah Didisposisikan</option>
                    <option value="belum">Belum Didisposisikan</option>
                </select>
            </div>
            <div class="col-md-2">
                <input type="date" id="filterTanggal" class="form-control form-control-sm">
            </div>
            <div class="col-md-1 d-grid">
                <button type="button" id="btnResetFilter" class="btn btn-reset-custom btn-sm d-flex align-items-center justify-content-center gap-1" title="Reset Filter">
                    <i class="bi bi-arrow-counterclockwise"></i> Reset
                </button>
            </div>
        </div>

        {{-- TABEL DATA SURAT --}}
        <div class="table-responsive">
            <table class="table align-middle mb-0 text-nowrap" id="tableSurat">
                <thead class="table-light text-uppercase fs-7 text-secondary">
                    <tr>
                        <th scope="col" style="width: 4%">No</th>
                        <th scope="col" style="width: 12%">Nomor Surat</th>
                        <th scope="col" style="width: 18%">Perihal</th>
                        <th scope="col" style="width: 9%">Kategori</th>
                        <th scope="col" style="width: 7%">Jenis</th>
                        <th scope="col" style="width: 14%">Asal / Tujuan</th>
                        <th scope="col" style="width: 12%">Unit</th>
                        <th scope="col" style="width: 8%">Tanggal Surat</th>
                        <th scope="col" style="width: 8%">Tanggal Terima</th>
                        <th scope="col" style="width: 8%" class="text-center">Aksi</th>
                    </tr>
                </thead>

                <tbody id="tbodySurat">
                </tbody>
            </table>
        </div>

        {{-- PAGINATION FOOTER --}}
        <div id="paginationContainer" class="mt-auto pt-3 border-top"></div>
    </div>
</div>

@if (!auth()->user()->isAdmin() && !auth()->user()->isAsisten())
{{-- ==================== MODAL KELOLA KATEGORI SAYA ==================== --}}
<div class="modal fade" id="modalKelolaKategori" tabindex="-1" aria-hidden="true" style="z-index: 1065;">
    <div class="modal-dialog modal-dialog-centered modal-md">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-primary text-white py-3">
                <h5 class="modal-title fw-bold fs-6">
                    <i class="bi bi-tags me-2"></i>Kelola Kategori Saya
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <div class="alert alert-info py-2 px-3 mb-3 d-flex align-items-center fs-8">
                    <i class="bi bi-info-circle-fill me-2 fs-6 text-primary flex-shrink-0"></i>
                    <div>Kategori ini bersifat pribadi untuk akun Anda dan digunakan untuk klasifikasi serta filter surat Anda.</div>
                </div>

                {{-- Input Tambah Kategori Baru --}}
                <label class="form-label fw-semibold fs-7 mb-1">Tambah Kategori Baru</label>
                <div class="input-group mb-3">
                    <input type="text" id="inputNamaKategoriBaru" class="form-control" placeholder="Contoh: Undangan, Keputusan, Berita Acara..." maxlength="100">
                    <button type="button" class="btn btn-primary px-3" id="btnSimpanKategoriBaru">
                        <i class="bi bi-plus-lg me-1"></i>Tambah
                    </button>
                </div>

                {{-- Pencarian & Daftar Kategori --}}
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <label class="form-label fw-semibold fs-7 mb-0">Daftar Kategori Anda</label>
                    <span class="badge bg-secondary rounded-pill" id="badgeTotalKategoriUser">{{ count($kategoriSurat) }} Kategori</span>
                </div>
                <div class="input-group input-group-sm mb-2">
                    <span class="input-group-text bg-white"><i class="bi bi-search text-muted"></i></span>
                    <input type="text" id="searchKategoriUser" class="form-control" placeholder="Cari dalam daftar kategori...">
                </div>

                <div class="border rounded-2 p-1" style="max-height: 250px; overflow-y: auto;">
                    <ul class="list-group list-group-flush" id="listKategoriUser">
                        @forelse ($kategoriSurat as $kategori)
                        <li class="list-group-item d-flex justify-content-between align-items-center py-2 px-2 border-bottom item-kategori" data-id="{{ $kategori->id }}" data-nama="{{ $kategori->nama_kategori }}">
                            <div class="d-flex align-items-center text-truncate me-2">
                                <i class="bi bi-tag-fill text-primary me-2 fs-7 flex-shrink-0"></i>
                                <span class="fw-semibold text-dark text-truncate nama-kategori-text">{{ $kategori->nama_kategori }}</span>
                            </div>
                            <div class="btn-group btn-group-sm flex-shrink-0">
                                <button type="button" class="btn btn-sm btn-outline-secondary btn-edit-kategori py-0 px-2" data-id="{{ $kategori->id }}" data-nama="{{ $kategori->nama_kategori }}" title="Ubah Nama">
                                    <i class="bi bi-pencil fs-8"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-danger btn-delete-kategori py-0 px-2" data-id="{{ $kategori->id }}" data-nama="{{ $kategori->nama_kategori }}" title="Hapus Kategori">
                                    <i class="bi bi-trash fs-8"></i>
                                </button>
                            </div>
                        </li>
                        @empty
                        <li class="list-group-item text-center text-muted py-3 empty-kategori-msg">
                            <i class="bi bi-inbox d-block fs-3 mb-1 text-secondary opacity-50"></i>
                            Belum ada kategori. Tambahkan kategori baru di atas.
                        </li>
                        @endforelse
                    </ul>
                </div>
            </div>
            <div class="modal-footer bg-light py-2">
                <button type="button" class="btn btn-secondary btn-sm px-3" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
@endif

{{-- ==================== MODAL TAMBAH SURAT ==================== --}}
<div class="modal fade" id="modalTambahSurat" data-bs-backdrop="static" tabindex="-1" aria-labelledby="modalTambahSuratLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
        <form action="{{ route('surat.store') }}" method="POST" enctype="multipart/form-data" id="formTambahSurat" class="modal-content border-0 shadow-lg rounded-3 overflow-hidden">
            @csrf

            {{-- Modal Header --}}
            <div class="modal-header bg-primary text-white py-3 px-4 border-0 flex-shrink-0">
                <div>
                    <h5 class="modal-title fw-bold fs-6 mb-1 d-flex align-items-center" id="modalTambahSuratLabel">
                        <i class="bi bi-file-earmark-plus fs-5 me-2"></i>
                        <span>Tambah Arsip Surat Baru</span>
                    </h5>
                    <div class="text-white-50 fs-8">
                        Lengkapi parameter metadata dan unggah salinan digital berkas surat
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body p-4 bg-light-subtle" style="overflow-y: auto;">
                    
                    {{-- SEKSI 1: IDENTITAS & TANGGAL PERSURATAN --}}
                    <div class="form-section-card bg-white shadow-2xs">
                        <div class="d-flex align-items-center justify-content-between mb-3 pb-2 border-bottom">
                            <div class="d-flex align-items-center gap-2">
                                <span class="badge bg-primary-subtle text-primary rounded-pill px-2.5 py-1 fs-8 fw-bold">1</span>
                                <span class="fw-bold text-dark fs-7">Identitas & Waktu Persuratan</span>
                            </div>
                            <span class="text-muted fs-8"><span class="text-danger">*</span> Wajib diisi</span>
                        </div>

                        <div class="row g-3">
                            {{-- Nomor Surat --}}
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small mb-1">
                                    Nomor Surat <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light text-muted"><i class="bi bi-hash"></i></span>
                                    <input type="text" name="nomor_surat" class="form-control" placeholder="Contoh: 025/USM-WR2/IX/2026" required autocomplete="off">
                                </div>
                            </div>

                            {{-- Jenis Surat --}}
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small mb-1">
                                    Jenis Surat <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light text-muted"><i class="bi bi-folder2-open"></i></span>
                                    <select name="jenis_surat_id" id="tambah_jenis_surat" class="form-select" required>
                                        <option value="">-- Pilih Jenis Surat --</option>
                                        @foreach ($jenisSurat as $jenis)
                                        <option value="{{ $jenis->id }}" {{ str_contains(strtolower($jenis->nama_jenis), 'internal') ? 'selected' : '' }}>
                                            {{ $jenis->nama_jenis }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            {{-- Tanggal Surat --}}
                            <div class="col-md-6">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <label class="form-label fw-semibold text-secondary small mb-0">
                                        Tanggal Surat <span class="text-danger">*</span>
                                    </label>
                                    <button type="button" class="btn btn-link p-0 text-decoration-none text-primary fs-8 btn-set-today" data-target="tambah_tanggal_surat" title="Isi dengan tanggal hari ini">
                                        <i class="bi bi-calendar-check me-1"></i>Hari Ini
                                    </button>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-text bg-light text-muted"><i class="bi bi-calendar-event"></i></span>
                                    <input type="text" id="tambah_tanggal_surat" name="tanggal_surat" class="form-control input-date-masked" placeholder="HH/BB/TTTT (Contoh: 25/08/2026)" maxlength="10" autocomplete="off" required>
                                    <button type="button" class="btn btn-outline-secondary btn-picker-trigger" tabindex="-1" title="Buka Kalender">
                                        <i class="bi bi-calendar3"></i>
                                    </button>
                                    <input type="date" class="native-hidden-date-picker" style="position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;" tabindex="-1">
                                </div>
                                <div class="form-text fs-8 text-muted mt-1">Format: <code>HH/BB/TTTT</code> (Contoh: 25082026).</div>
                            </div>

                            {{-- Tanggal Terima --}}
                            <div class="col-md-6">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <label class="form-label fw-semibold text-secondary small mb-0">
                                        Tanggal Terima <span class="text-danger">*</span>
                                    </label>
                                    <button type="button" class="btn btn-link p-0 text-decoration-none text-primary fs-8 btn-set-today" data-target="tambah_tanggal_terima" title="Isi dengan tanggal hari ini">
                                        <i class="bi bi-calendar-check me-1"></i>Hari Ini
                                    </button>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-text bg-light text-muted"><i class="bi bi-box-arrow-in-down"></i></span>
                                    <input type="text" id="tambah_tanggal_terima" name="tanggal_terima" class="form-control input-date-masked" placeholder="HH/BB/TTTT (Contoh: 25/08/2026)" maxlength="10" autocomplete="off" required>
                                    <button type="button" class="btn btn-outline-secondary btn-picker-trigger" tabindex="-1" title="Buka Kalender">
                                        <i class="bi bi-calendar3"></i>
                                    </button>
                                    <input type="date" class="native-hidden-date-picker" style="position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;" tabindex="-1">
                                </div>
                                <div class="form-text fs-8 text-muted mt-1">Waktu berkas fisik diterima atau didaftarkan.</div>
                            </div>

                            {{-- Kategori --}}
                            <div class="col-12">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <label class="form-label fw-semibold text-secondary small mb-0">
                                        Kategori Dokumen <span class="text-danger">*</span>
                                    </label>
                                    @if (!auth()->user()->isAdmin() && !auth()->user()->isAsisten())
                                    <button type="button" class="btn btn-link p-0 text-primary fs-8 text-decoration-none btn-buka-kelola-kategori" title="Kelola Kategori Anda">
                                        <i class="bi bi-gear me-1"></i>Kelola Kategori
                                    </button>
                                    @endif
                                </div>
                                <div class="input-group">
                                    <span class="input-group-text bg-light text-muted"><i class="bi bi-tag"></i></span>
                                    <select name="kategori_id" id="tambah_kategori_id" class="form-select select-kategori-surat" required>
                                        <option value="">-- Pilih Kategori Surat --</option>
                                        @foreach ($kategoriSurat as $kategori)
                                        <option value="{{ $kategori->id }}">
                                            {{ $kategori->nama_kategori }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- SEKSI 2: PERIHAL & ASAL / TUJUAN SURAT --}}
                    <div class="form-section-card bg-white shadow-2xs">
                        <div class="d-flex align-items-center gap-2 mb-3 pb-2 border-bottom">
                            <span class="badge bg-primary-subtle text-primary rounded-pill px-2.5 py-1 fs-8 fw-bold">2</span>
                            <span class="fw-bold text-dark fs-7">Rincian Perihal & Asal / Tujuan Surat</span>
                        </div>

                        <div class="row g-3">
                            {{-- Perihal --}}
                            <div class="col-12">
                                <label class="form-label fw-semibold text-secondary small mb-1">
                                    Perihal / Judul Dokumen Surat <span class="text-danger">*</span>
                                </label>
                                <textarea name="perihal" class="form-control" rows="2" placeholder="Tuliskan perihal atau isi ringkas dokumen surat secara jelas..." required style="resize: none;"></textarea>
                            </div>

                            {{-- Asal / Tujuan Surat --}}
                            <div class="col-12" id="wrapper_tambah_asal_tujuan">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <label class="form-label fw-semibold text-secondary small mb-0" id="label_tambah_asal_tujuan">
                                        Asal / Tujuan Surat (Instansi/Pihak Luar)
                                    </label>
                                    <span class="text-muted fs-8"><i class="bi bi-hand-index-thumb me-1"></i>Pilih unit via tombol (+)</span>
                                </div>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="input-group flex-grow-1">
                                        <span class="input-group-text bg-light cursor-pointer btn-toggle-preset" id="icon_tambah_asal_tujuan" data-target-input="tambah_asal_tujuan" data-target-panel="panel_tambah_asal_tujuan" title="Klik untuk memilih unit/instansi">
                                            <i class="bi bi-geo-alt"></i>
                                        </span>
                                        <input type="text" id="tambah_asal_tujuan" name="asal_tujuan" class="form-control input-preset-target" placeholder="-- Klik tombol (+) untuk memilih unit / instansi --" autocomplete="off" readonly data-target-panel="panel_tambah_asal_tujuan">
                                        <button type="button" class="btn btn-outline-secondary btn-clear-input d-none" data-target="tambah_asal_tujuan" title="Hapus pilihan">
                                            <i class="bi bi-x-lg"></i>
                                        </button>
                                    </div>
                                    <button type="button" 
                                        class="btn btn-primary rounded-circle shadow-sm d-flex align-items-center justify-content-center flex-shrink-0 btn-toggle-preset" 
                                        data-target-input="tambah_asal_tujuan" 
                                        data-target-panel="panel_tambah_asal_tujuan" 
                                        style="width: 38px; height: 38px;" 
                                        title="Pilih Unit / Instansi dari Daftar (Scroll)">
                                        <i class="bi bi-plus-lg fs-6 fw-bold"></i>
                                    </button>
                                </div>
                                <div class="form-text fs-8 text-muted mt-1" id="hint_tambah_asal_tujuan">
                                    Tentukan instansi asal pengirim (untuk Surat Masuk) atau instansi tujuan surat (untuk Surat Keluar).
                                </div>

                                {{-- Panel Scrollable Pilihan Unit / Asal-Tujuan --}}
                                <div class="card mt-2 border-primary-subtle shadow-sm d-none panel-preset-asal-tujuan" id="panel_tambah_asal_tujuan">
                                    <div class="card-header bg-primary-subtle py-2 px-3 d-flex justify-content-between align-items-center">
                                        <div class="fw-semibold small text-primary d-flex align-items-center gap-1">
                                            <i class="bi bi-card-checklist"></i> Pilih Unit / Instansi (Scroll untuk memilih)
                                        </div>
                                        <button type="button" class="btn-close fs-9 btn-close-preset" data-target="panel_tambah_asal_tujuan"></button>
                                    </div>
                                    <div class="card-body p-2.5">
                                        {{-- Filter Tabs & Search Bar --}}
                                        <div class="mb-2">
                                            <div class="input-group input-group-sm mb-2">
                                                <span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
                                                <input type="text" class="form-control input-search-preset" placeholder="Cari unit atau nama instansi...">
                                            </div>
                                            <div class="d-flex gap-1 flex-wrap">
                                                <button type="button" class="btn btn-xs btn-outline-primary active btn-category-preset" data-category="all">Semua (<span class="count-all">0</span>)</button>
                                                <button type="button" class="btn btn-xs btn-outline-primary btn-category-preset" data-category="eksternal">Instansi Luar (<span class="count-eksternal">0</span>)</button>
                                                <button type="button" class="btn btn-xs btn-outline-primary btn-category-preset" data-category="internal">Unit Kampus (<span class="count-internal">0</span>)</button>
                                            </div>
                                        </div>

                                        {{-- Scrollable List Container --}}
                                        <div class="scrollable-preset-list border rounded p-1 mb-2 bg-light-subtle" style="max-height: 180px; overflow-y: auto;">
                                            <div class="list-group list-group-flush preset-items-container">
                                                {{-- Akan diisi via JavaScript --}}
                                            </div>
                                        </div>

                                        {{-- Form Tambah Nama Baru ke Daftar --}}
                                        <div class="border-top pt-2">
                                            <div class="preset-add-form-container">
                                                <div class="input-group input-group-sm mb-1">
                                                    <input type="text" class="form-control input-new-preset" placeholder="Tambah nama baru ke daftar pilihan...">
                                                    <button type="button" class="btn btn-primary btn-add-new-preset">
                                                        <i class="bi bi-plus-lg me-1"></i>Tambah
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="preset-add-notice-admin d-none mb-1">
                                                <div class="alert alert-light border py-1.5 px-2 mb-0 text-muted fs-8 rounded d-flex align-items-center">
                                                    <i class="bi bi-shield-lock text-warning me-2 fs-6"></i>
                                                    <span>Unit Kampus dikelola oleh Admin. Silakan pilih unit yang tersedia di atas.</span>
                                                </div>
                                            </div>
                                            <div class="mt-1">
                                                <span class="fs-9 text-muted preset-footer-help"><i class="bi bi-info-circle me-1"></i>Klik nama untuk memilih unit/instansi.</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- SEKSI 3: BERKAS DIGITAL (UPLOAD PDF) --}}
                    <div class="form-section-card bg-white shadow-2xs mb-0">
                        <div class="d-flex align-items-center justify-content-between mb-3 pb-2 border-bottom">
                            <div class="d-flex align-items-center gap-2">
                                <span class="badge bg-primary-subtle text-primary rounded-pill px-2.5 py-1 fs-8 fw-bold">3</span>
                                <span class="fw-bold text-dark fs-7">Lampiran Berkas Dokumen (PDF)</span>
                            </div>
                            <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2 py-0.5 fs-8">Wajib .PDF (Maks 5MB)</span>
                        </div>

                        <div class="upload-dropzone position-relative" id="dropzoneTambahSurat">
                            <input type="file" name="file_surat" id="inputTambahFileSurat" class="position-absolute top-0 start-0 w-100 h-100 opacity-0 cursor-pointer" accept=".pdf" required>
                            
                            {{-- State Awal: Belum ada file dipilih --}}
                            <div id="dropzoneTambahDefault" class="py-2">
                                <div class="mb-2">
                                    <span class="rounded-circle bg-primary-subtle p-3 d-inline-flex align-items-center justify-content-center text-primary">
                                        <i class="bi bi-file-earmark-arrow-up fs-2"></i>
                                    </span>
                                </div>
                                <div class="fw-bold text-dark fs-7">Klik untuk memilih berkas dokumen PDF atau tarik & lepas di sini</div>
                                <div class="text-muted fs-8 mt-1">Dokumen wajib berekstensi <strong>.pdf</strong> dengan ukuran maksimal <strong>5 MB</strong>.</div>
                            </div>

                            {{-- State Terpilih: File sudah dipilih --}}
                            <div id="dropzoneTambahSelected" class="d-none py-1">
                                <div class="d-flex align-items-center justify-content-center gap-3 flex-wrap">
                                    <div class="rounded-3 bg-danger-subtle text-danger p-2 fs-3 flex-shrink-0">
                                        <i class="bi bi-file-earmark-pdf-fill"></i>
                                    </div>
                                    <div class="text-start">
                                        <div class="fw-bold text-dark fs-7 text-truncate" id="tambahFileName" style="max-width: 320px;">dokumen.pdf</div>
                                        <div class="text-muted fs-8" id="tambahFileSize">0 KB</div>
                                    </div>
                                    <button type="button" class="btn btn-outline-danger btn-sm rounded-pill py-1 px-3 fs-8 ms-sm-2" id="btnHapusFileTambah">
                                        <i class="bi bi-arrow-repeat me-1"></i>Ganti File
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                {{-- Modal Footer --}}
                <div class="modal-footer bg-light px-4 py-3 d-flex justify-content-between align-items-center border-top flex-shrink-0">
                    <div class="small text-muted d-none d-sm-flex align-items-center gap-1.5">
                        <i class="bi bi-shield-check text-success fs-6"></i>
                        <span>Pastikan data bertanda (<span class="text-danger">*</span>) telah terisi dengan benar.</span>
                    </div>
                    <div class="d-flex gap-2 ms-auto">
                        <button type="button" class="btn btn-outline-secondary px-3 rounded-2" data-bs-dismiss="modal">
                            <i class="bi bi-x-lg me-1"></i>Batal
                        </button>
                        <button type="submit" class="btn btn-primary px-4 fw-semibold shadow-sm rounded-2" id="btnSimpanTambahSurat">
                            <i class="bi bi-check2-circle me-1"></i>Simpan Dokumen
                        </button>
                    </div>
                </div>

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

{{-- ==================== MODAL EDIT SURAT ==================== --}}
<div class="modal fade" id="modalEditSurat" data-bs-backdrop="static" tabindex="-1" aria-labelledby="modalEditSuratLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
        <form id="formEditSurat" method="POST" enctype="multipart/form-data" class="modal-content border-0 shadow-lg rounded-3 overflow-hidden">
            @csrf
            @method('PUT')

            {{-- Modal Header --}}
            <div class="modal-header bg-warning text-dark py-3 px-4 border-0 flex-shrink-0">
                <div>
                    <h5 class="modal-title fw-bold fs-6 mb-1 d-flex align-items-center" id="modalEditSuratLabel">
                        <i class="bi bi-pencil-square fs-5 me-2 text-dark"></i>
                        <span>Ubah Informasi Surat</span>
                    </h5>
                    <div class="text-dark-50 fs-8">
                        Perbarui parameter metadata dan berkas digital dokumen surat
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body p-4 bg-light-subtle" style="overflow-y: auto;">

                {{-- SEKSI 1: IDENTITAS & TANGGAL PERSURATAN --}}
                <div class="form-section-card bg-white shadow-2xs">
                    <div class="d-flex align-items-center justify-content-between mb-3 pb-2 border-bottom">
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge bg-warning-subtle text-warning-emphasis rounded-pill px-2.5 py-1 fs-8 fw-bold">1</span>
                            <span class="fw-bold text-dark fs-7">Identitas & Waktu Persuratan</span>
                        </div>
                        <span class="text-muted fs-8"><span class="text-danger">*</span> Wajib diisi</span>
                    </div>

                    <div class="row g-3">
                        {{-- Nomor Surat --}}
                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary small mb-1">
                                Nomor Surat <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted"><i class="bi bi-hash"></i></span>
                                <input type="text" id="edit_nomor" name="nomor_surat" class="form-control" placeholder="Contoh: 025/USM-WR2/IX/2026" required autocomplete="off">
                            </div>
                        </div>

                        {{-- Jenis Surat --}}
                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary small mb-1">
                                Jenis Surat <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted"><i class="bi bi-folder2-open"></i></span>
                                <select id="edit_jenis" name="jenis_surat_id" class="form-select" required>
                                    <option value="">-- Pilih Jenis Surat --</option>
                                    @foreach ($jenisSurat as $jenis)
                                    <option value="{{ $jenis->id }}">
                                        {{ $jenis->nama_jenis }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Tanggal Surat --}}
                        <div class="col-md-6">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <label class="form-label fw-semibold text-secondary small mb-0">
                                    Tanggal Surat <span class="text-danger">*</span>
                                </label>
                                <button type="button" class="btn btn-link p-0 text-decoration-none text-primary fs-8 btn-set-today" data-target="edit_tanggal" title="Isi dengan tanggal hari ini">
                                    <i class="bi bi-calendar-check me-1"></i>Hari Ini
                                </button>
                            </div>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted"><i class="bi bi-calendar-event"></i></span>
                                <input type="text" id="edit_tanggal" name="tanggal_surat" class="form-control input-date-masked" placeholder="HH/BB/TTTT (Contoh: 25/08/2026)" maxlength="10" autocomplete="off" required>
                                <button type="button" class="btn btn-outline-secondary btn-picker-trigger" tabindex="-1" title="Buka Kalender">
                                    <i class="bi bi-calendar3"></i>
                                </button>
                                <input type="date" class="native-hidden-date-picker" style="position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;" tabindex="-1">
                            </div>
                            <div class="form-text fs-8 text-muted mt-1">Format: <code>HH/BB/TTTT</code> (Contoh: 25082026).</div>
                        </div>

                        {{-- Tanggal Terima --}}
                        <div class="col-md-6">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <label class="form-label fw-semibold text-secondary small mb-0">
                                    Tanggal Terima <span class="text-danger">*</span>
                                </label>
                                <button type="button" class="btn btn-link p-0 text-decoration-none text-primary fs-8 btn-set-today" data-target="edit_tanggal_terima" title="Isi dengan tanggal hari ini">
                                    <i class="bi bi-calendar-check me-1"></i>Hari Ini
                                </button>
                            </div>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted"><i class="bi bi-box-arrow-in-down"></i></span>
                                <input type="text" id="edit_tanggal_terima" name="tanggal_terima" class="form-control input-date-masked" placeholder="HH/BB/TTTT (Contoh: 25/08/2026)" maxlength="10" autocomplete="off" required>
                                <button type="button" class="btn btn-outline-secondary btn-picker-trigger" tabindex="-1" title="Buka Kalender">
                                    <i class="bi bi-calendar3"></i>
                                </button>
                                <input type="date" class="native-hidden-date-picker" style="position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;" tabindex="-1">
                            </div>
                            <div class="form-text fs-8 text-muted mt-1">Waktu berkas fisik diterima atau didaftarkan.</div>
                        </div>

                        {{-- Kategori --}}
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <label class="form-label fw-semibold text-secondary small mb-0">
                                    Kategori Dokumen <span class="text-danger">*</span>
                                </label>
                                @if (!auth()->user()->isAdmin() && !auth()->user()->isAsisten())
                                <button type="button" class="btn btn-link p-0 text-primary fs-8 text-decoration-none btn-buka-kelola-kategori" title="Kelola Kategori Anda">
                                    <i class="bi bi-gear me-1"></i>Kelola Kategori
                                </button>
                                @endif
                            </div>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted"><i class="bi bi-tag"></i></span>
                                <select id="edit_kategori" name="kategori_id" class="form-select select-kategori-surat" required>
                                    <option value="">-- Pilih Kategori Surat --</option>
                                    @foreach ($kategoriSurat as $kategori)
                                    <option value="{{ $kategori->id }}">
                                        {{ $kategori->nama_kategori }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- SEKSI 2: PERIHAL & ASAL / TUJUAN SURAT --}}
                <div class="form-section-card bg-white shadow-2xs">
                    <div class="d-flex align-items-center gap-2 mb-3 pb-2 border-bottom">
                        <span class="badge bg-warning-subtle text-warning-emphasis rounded-pill px-2.5 py-1 fs-8 fw-bold">2</span>
                        <span class="fw-bold text-dark fs-7">Rincian Perihal & Asal / Tujuan Surat</span>
                    </div>

                    <div class="row g-3">
                        {{-- Perihal --}}
                        <div class="col-12">
                            <label class="form-label fw-semibold text-secondary small mb-1">
                                Perihal / Judul Dokumen Surat <span class="text-danger">*</span>
                            </label>
                            <textarea name="perihal" id="edit_perihal" class="form-control" rows="2" placeholder="Tuliskan perihal atau isi ringkas dokumen surat secara jelas..." required style="resize: none;"></textarea>
                        </div>

                        {{-- Asal / Tujuan Surat --}}
                        <div class="col-12" id="wrapper_edit_asal_tujuan">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <label class="form-label fw-semibold text-secondary small mb-0" id="label_edit_asal_tujuan">
                                    Asal / Tujuan Surat (Instansi/Pihak Luar)
                                </label>
                                <span class="text-muted fs-8"><i class="bi bi-hand-index-thumb me-1"></i>Pilih unit via tombol (+)</span>
                            </div>
                            <div class="d-flex align-items-center gap-2">
                                <div class="input-group flex-grow-1">
                                    <span class="input-group-text bg-light cursor-pointer btn-toggle-preset" id="icon_edit_asal_tujuan" data-target-input="edit_asal_tujuan" data-target-panel="panel_edit_asal_tujuan" title="Klik untuk memilih unit/instansi">
                                        <i class="bi bi-geo-alt"></i>
                                    </span>
                                    <input type="text" id="edit_asal_tujuan" name="asal_tujuan" class="form-control input-preset-target" placeholder="-- Klik tombol (+) untuk memilih unit / instansi --" autocomplete="off" readonly data-target-panel="panel_edit_asal_tujuan">
                                    <button type="button" class="btn btn-outline-secondary btn-clear-input d-none" data-target="edit_asal_tujuan" title="Hapus pilihan">
                                        <i class="bi bi-x-lg"></i>
                                    </button>
                                </div>
                                <button type="button" 
                                    class="btn btn-warning text-dark rounded-circle shadow-sm d-flex align-items-center justify-content-center flex-shrink-0 btn-toggle-preset" 
                                    data-target-input="edit_asal_tujuan" 
                                    data-target-panel="panel_edit_asal_tujuan" 
                                    style="width: 38px; height: 38px;" 
                                    title="Pilih Unit / Instansi dari Daftar (Scroll)">
                                    <i class="bi bi-plus-lg fs-6 fw-bold"></i>
                                </button>
                            </div>
                            <div class="form-text fs-8 text-muted mt-1" id="hint_edit_asal_tujuan">
                                Tentukan instansi asal pengirim (untuk Surat Masuk) atau instansi tujuan surat (untuk Surat Keluar).
                            </div>

                            {{-- Panel Scrollable Pilihan Unit / Asal-Tujuan --}}
                            <div class="card mt-2 border-warning-subtle shadow-sm d-none panel-preset-asal-tujuan" id="panel_edit_asal_tujuan">
                                <div class="card-header bg-warning-subtle py-2 px-3 d-flex justify-content-between align-items-center">
                                    <div class="fw-semibold small text-dark d-flex align-items-center gap-1">
                                        <i class="bi bi-card-checklist"></i> Pilih Unit / Instansi (Scroll untuk memilih)
                                    </div>
                                    <button type="button" class="btn-close fs-9 btn-close-preset" data-target="panel_edit_asal_tujuan"></button>
                                </div>
                                <div class="card-body p-2.5">
                                    <div class="mb-2">
                                        <div class="input-group input-group-sm mb-2">
                                            <span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
                                            <input type="text" class="form-control input-search-preset" placeholder="Cari unit atau nama instansi...">
                                        </div>
                                        <div class="d-flex gap-1 flex-wrap">
                                            <button type="button" class="btn btn-xs btn-outline-warning active btn-category-preset" data-category="all">Semua (<span class="count-all">0</span>)</button>
                                            <button type="button" class="btn btn-xs btn-outline-warning btn-category-preset" data-category="eksternal">Instansi Luar (<span class="count-eksternal">0</span>)</button>
                                            <button type="button" class="btn btn-xs btn-outline-warning btn-category-preset" data-category="internal">Unit Kampus (<span class="count-internal">0</span>)</button>
                                        </div>
                                    </div>

                                    <div class="scrollable-preset-list border rounded p-1 mb-2 bg-light-subtle" style="max-height: 180px; overflow-y: auto;">
                                        <div class="list-group list-group-flush preset-items-container">
                                            {{-- Akan diisi via JavaScript --}}
                                        </div>
                                    </div>

                                    <div class="border-top pt-2">
                                        <div class="preset-add-form-container">
                                            <div class="input-group input-group-sm mb-1">
                                                <input type="text" class="form-control input-new-preset" placeholder="Tambah nama baru ke daftar pilihan...">
                                                <button type="button" class="btn btn-warning text-dark btn-add-new-preset">
                                                    <i class="bi bi-plus-lg me-1"></i>Tambah
                                                </button>
                                            </div>
                                        </div>
                                        <div class="preset-add-notice-admin d-none mb-1">
                                            <div class="alert alert-light border py-1.5 px-2 mb-0 text-muted fs-8 rounded d-flex align-items-center">
                                                <i class="bi bi-shield-lock text-warning me-2 fs-6"></i>
                                                <span>Unit Kampus dikelola oleh Admin. Silakan pilih unit yang tersedia di atas.</span>
                                            </div>
                                        </div>
                                        <div class="mt-1">
                                            <span class="fs-9 text-muted preset-footer-help"><i class="bi bi-info-circle me-1"></i>Klik nama untuk memilih unit/instansi.</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- SEKSI 3: BERKAS DIGITAL (UPLOAD PDF OPSIONAL) --}}
                <div class="form-section-card bg-white shadow-2xs mb-0">
                    <div class="d-flex align-items-center justify-content-between mb-3 pb-2 border-bottom">
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge bg-warning-subtle text-warning-emphasis rounded-pill px-2.5 py-1 fs-8 fw-bold">3</span>
                            <span class="fw-bold text-dark fs-7">Pembaruan Berkas Dokumen (PDF)</span>
                        </div>
                        <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle px-2 py-0.5 fs-8">Opsional</span>
                    </div>

                    <div class="upload-dropzone position-relative" id="dropzoneEditSurat">
                        <input type="file" name="file_surat" id="inputEditFileSurat" class="position-absolute top-0 start-0 w-100 h-100 opacity-0 cursor-pointer" accept=".pdf">
                        
                        {{-- State Awal: Belum ada file baru dipilih --}}
                        <div id="dropzoneEditDefault" class="py-2">
                            <div class="mb-2">
                                <span class="rounded-circle bg-warning-subtle p-3 d-inline-flex align-items-center justify-content-center text-dark">
                                    <i class="bi bi-file-earmark-arrow-up fs-2"></i>
                                </span>
                            </div>
                            <div class="fw-bold text-dark fs-7">Pilih berkas PDF baru untuk mengganti dokumen lama</div>
                            <div class="text-muted fs-8 mt-1">Biarkan kosong jika tidak ingin mengganti file. Maksimal ukuran <strong>5 MB</strong>.</div>
                            <div id="editCurrentFileBadge" class="mt-2 d-none">
                                <span class="badge bg-light text-secondary border px-2.5 py-1.5 fs-8 fw-normal">
                                    <i class="bi bi-file-earmark-check text-success me-1"></i>Dokumen saat ini: <span id="editCurrentFileName" class="fw-semibold text-dark"></span>
                                </span>
                            </div>
                        </div>

                        {{-- State Terpilih: File baru sudah dipilih --}}
                        <div id="dropzoneEditSelected" class="d-none py-1">
                            <div class="d-flex align-items-center justify-content-center gap-3 flex-wrap">
                                <div class="rounded-3 bg-danger-subtle text-danger p-2 fs-3 flex-shrink-0">
                                    <i class="bi bi-file-earmark-pdf-fill"></i>
                                </div>
                                <div class="text-start">
                                    <div class="fw-bold text-dark fs-7 text-truncate" id="editFileName" style="max-width: 320px;">dokumen_baru.pdf</div>
                                    <div class="text-muted fs-8" id="editFileSize">0 KB</div>
                                </div>
                                <button type="button" class="btn btn-outline-danger btn-sm rounded-pill py-1 px-3 fs-8 ms-sm-2" id="btnHapusFileEdit">
                                    <i class="bi bi-arrow-repeat me-1"></i>Ganti File
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            {{-- Modal Footer --}}
            <div class="modal-footer bg-light px-4 py-3 d-flex justify-content-between align-items-center border-top flex-shrink-0">
                <div class="small text-muted d-none d-sm-flex align-items-center gap-1.5">
                    <i class="bi bi-info-circle text-warning fs-6"></i>
                    <span>Biarkan berkas kosong jika tidak ingin memperbarui file PDF lama.</span>
                </div>
                <div class="d-flex gap-2 ms-auto">
                    <button type="button" class="btn btn-outline-secondary px-3 rounded-2" data-bs-dismiss="modal">
                        <i class="bi bi-x-lg me-1"></i>Batal
                    </button>
                    <button type="submit" class="btn btn-warning px-4 fw-semibold text-dark shadow-sm rounded-2" id="btnSimpanEditSurat">
                        <i class="bi bi-check2-circle me-1"></i>Perbarui Dokumen
                    </button>
                </div>
            </div>

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


{{-- MASTER FORM HAPUS (Dihubungkan ke SweetAlert2 secara dinamis) --}}
<form id="formDeleteMaster" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>

<!-- ==================== MODAL DISPOSISI ==================== -->
<div class="modal fade" id="modalDisposisi" tabindex="-1">

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

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

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

                <h5 class="modal-title">

                    <i class="bi bi-send-fill me-2"></i>

                    Disposisi Surat

                </h5>

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

            </div>

            <div class="modal-body">

                <input type="hidden" id="disposisi_surat_id">
                <hr>

                <h6 class="fw-bold mb-3">
                    <i class="bi bi-plus-circle me-2"></i>
                    Tambah Disposisi Baru
                </h6>

                {{-- <div class="mb-3">

                    <label class="form-label fw-semibold">

                        Tujuan Disposisi

                    </label>

                    <select id="disposisi_user" class="form-select">

                        <option value="">

                            -- Pilih Tujuan --

                        </option>

                    </select>

                </div> --}}


                <div class="mb-3">

                    <label class="form-label fw-semibold">
                        Tujuan Disposisi
                    </label>

                    <!-- Pencarian -->
                    <input type="text" id="searchDisposisiUser" class="form-control mb-3" placeholder="🔍 Cari nama atau unit...">

                    <!-- Pilih Semua -->
                    <div class="disposisi-toolbar">

                        <div class="form-check m-0">

                            <input class="form-check-input" type="checkbox" id="checkAllDisposisi">

                            <label class="form-check-label fw-semibold" for="checkAllDisposisi">

                                Pilih Semua

                            </label>

                        </div>

                        <span id="jumlahDipilih" class="badge bg-success">

                            0 Dipilih

                        </span>

                    </div>

                    <!-- Daftar User -->
                    <div class="user-container">
                        <div id="disposisi_user_list" class="row g-2">
                        </div>
                    </div>

                </div>

                <div class="mb-3">

                    <label class="form-label fw-semibold">

                        Catatan

                    </label>

                    <textarea id="disposisi_catatan" class="form-control" rows="2"></textarea>

                </div>

                <div class="mb-3">

                    <label class="form-label fw-semibold">

                        Pesan

                    </label>

                    <textarea id="disposisi_pesan" class="form-control" rows="4"></textarea>

                </div>

            </div>

            <div class="modal-footer">

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

                    Batal

                </button>

                <button id="btnKirimDisposisi" class="btn btn-success">

                    <i class="bi bi-send-fill me-1"></i>

                    Kirim Disposisi

                </button>

            </div>

        </div>

    </div>

</div>

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Pemicu Fetch Awal Data Surat
        fetchSurat();


        // =======================================
        // KIRIM DISPOSISI
        // =======================================

        document.getElementById('btnKirimDisposisi').addEventListener('click', function() {
            const btn = this;

            if (btn.disabled) return;

            btn.disabled = true;
            const penerima = [];

            document.querySelectorAll('.disposisi-user:checked').forEach(function(item) {
                penerima.push(item.value);
            });

            if (penerima.length === 0) {

                Swal.fire({
                    icon: 'warning'
                    , title: 'Peringatan'
                    , text: 'Silakan pilih minimal satu tujuan disposisi.'
                });

                btn.disabled = false;

                return;
            }

            fetch('/chat-disposisi', {

                    method: 'POST',

                    headers: {

                        'Content-Type': 'application/json',

                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                            .content

                    },



                    body: JSON.stringify({

                        surat_id: document.getElementById('disposisi_surat_id').value,

                        penerima_id: penerima,

                        catatan: document.getElementById('disposisi_catatan').value,

                        pesan: document.getElementById('disposisi_pesan').value

                    })

                })

                .then(res => res.json())

                .then(result => {

                    if (result.success) {

                        Swal.fire({

                            icon: 'success',

                            title: 'Berhasil',

                            text: result.message,

                            timer: 1800,

                            showConfirmButton: false

                        });

                        bootstrap.Modal
                            .getInstance(document.getElementById('modalDisposisi'))
                            .hide();

                        document.querySelectorAll('.disposisi-user').forEach(function(item) {
                            item.checked = false;
                        });

                        document.getElementById('checkAllDisposisi').checked = false;

                        document.getElementById('jumlahDipilih').innerHTML =
                            "Dipilih : 0 tujuan";
                        document.getElementById('disposisi_catatan').value = '';
                        document.getElementById('disposisi_pesan').value = '';

                        fetchSurat();
                        btn.disabled = false;

                    } else {

                        Swal.fire({

                            icon: 'error',

                            title: 'Gagal',

                            text: result.message

                        });
                        btn.disabled = false;

                    }

                })

                .catch(error => {

                    console.error(error);

                    btn.disabled = false;

                });

        });

        let searchDebounceTimer = null;
        document.getElementById('searchKeyword').addEventListener('input', () => {
            clearTimeout(searchDebounceTimer);
            searchDebounceTimer = setTimeout(() => {
                fetchSurat(1);
            }, 300);
        });

        document.getElementById('filterKategori')
            .addEventListener('change', () => fetchSurat(1));

        document.getElementById('filterJenis')
            .addEventListener('change', () => fetchSurat(1));

        document.getElementById('filterStatusDisposisi')
            .addEventListener('change', () => fetchSurat(1));

        document.getElementById('filterTanggal')
            .addEventListener('change', () => fetchSurat(1));

        // Tombol Reset Filter
        document.getElementById('btnResetFilter').addEventListener('click', function() {
            document.getElementById('searchKeyword').value = '';
            document.getElementById('filterKategori').value = '';
            document.getElementById('filterJenis').value = '';
            document.getElementById('filterStatusDisposisi').value = '';
            document.getElementById('filterTanggal').value = '';
            fetchSurat();
        });

        // Inisialisasi event listener pada baris tabel bawaan saat halaman pertama kali dimuat
        // Helper Format Tanggal Indonesia Bersih (Menghilangkan T17:00:00.000000Z)
        function formatTanggalIndo(dateString) {
            if (!dateString) return '-';
            let cleanDate = String(dateString).split('T')[0].trim();
            let parts = cleanDate.split('-');
            if (parts.length === 3) {
                const months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
                const day = parseInt(parts[2], 10);
                const monthIndex = parseInt(parts[1], 10) - 1;
                const year = parts[0];
                if (!isNaN(day) && monthIndex >= 0 && monthIndex < 12) {
                    return `${day < 10 ? '0' + day : day} ${months[monthIndex]} ${year}`;
                }
            }
            return cleanDate;
        }

        function extractDateOnly(dateString) {
            if (!dateString) return '';
            return String(dateString).split('T')[0].trim();
        }

        // Helper Sinkronisasi UI Dinamis Field Asal / Tujuan Surat
        function updateAsalTujuanUI(selectEl, inputEl, labelEl, iconEl, hintEl) {
            if (!selectEl || !inputEl) return;
            inputEl.readOnly = true;
            const selectedText = (selectEl.options[selectEl.selectedIndex]?.text || '').toLowerCase();

            if (selectedText.includes('masuk')) {
                if (labelEl) labelEl.innerHTML = 'Asal Surat / Instansi Pengirim (Pihak Luar) <span class="text-danger">*</span>';
                inputEl.placeholder = '-- Klik tombol (+) untuk memilih asal pengirim --';
                if (iconEl) iconEl.innerHTML = '<i class="bi bi-arrow-down-left text-success"></i>';
                if (hintEl) hintEl.textContent = 'Klik tombol (+) di samping atau klik kolom ini untuk memilih instansi asal pengirim dari daftar.';
            } else if (selectedText.includes('keluar')) {
                if (labelEl) labelEl.innerHTML = 'Tujuan Surat / Instansi Penerima (Pihak Luar) <span class="text-danger">*</span>';
                inputEl.placeholder = '-- Klik tombol (+) untuk memilih tujuan surat --';
                if (iconEl) iconEl.innerHTML = '<i class="bi bi-arrow-up-right text-danger"></i>';
                if (hintEl) hintEl.textContent = 'Klik tombol (+) di samping atau klik kolom ini untuk memilih instansi tujuan surat dari daftar.';
            } else {
                if (labelEl) labelEl.innerHTML = 'Referensi Asal / Tujuan (Opsional)';
                inputEl.placeholder = '-- Klik tombol (+) untuk memilih unit/referensi --';
                if (iconEl) iconEl.innerHTML = '<i class="bi bi-arrow-left-right text-warning"></i>';
                if (hintEl) hintEl.textContent = 'Klik tombol (+) di samping atau klik kolom ini untuk memilih unit atau instansi referensi dari daftar.';
            }
        }

        // Listener perubahan dropdown Jenis Surat pada Modal Tambah
        const selectTambahJenis = document.getElementById('tambah_jenis_surat');
        if (selectTambahJenis) {
            selectTambahJenis.addEventListener('change', function() {
                updateAsalTujuanUI(
                    this,
                    document.getElementById('tambah_asal_tujuan'),
                    document.getElementById('label_tambah_asal_tujuan'),
                    document.getElementById('icon_tambah_asal_tujuan'),
                    document.getElementById('hint_tambah_asal_tujuan')
                );
            });
        }

        // Listener perubahan dropdown Jenis Surat pada Modal Edit
        const selectEditJenis = document.getElementById('edit_jenis');
        if (selectEditJenis) {
            selectEditJenis.addEventListener('change', function() {
                updateAsalTujuanUI(
                    this,
                    document.getElementById('edit_asal_tujuan'),
                    document.getElementById('label_edit_asal_tujuan'),
                    document.getElementById('icon_edit_asal_tujuan'),
                    document.getElementById('hint_edit_asal_tujuan')
                );
            });
        }

        // Pemicu otomatis saat modal tambah surat dibuka
        const modalTambahEl = document.getElementById('modalTambahSurat');
        if (modalTambahEl) {
            modalTambahEl.addEventListener('show.bs.modal', function() {
                try {
                    updateAsalTujuanUI(
                        document.getElementById('tambah_jenis_surat'),
                        document.getElementById('tambah_asal_tujuan'),
                        document.getElementById('label_tambah_asal_tujuan'),
                        document.getElementById('icon_tambah_asal_tujuan'),
                        document.getElementById('hint_tambah_asal_tujuan')
                    );
                } catch (err) {
                    console.error('Error on modalTambah show.bs.modal:', err);
                }
                const panel = document.getElementById('panel_tambah_asal_tujuan');
                if (panel) panel.classList.add('d-none');
            });
        }

        // AJAX FETCH DATA SURAT
        function fetchSurat(page = 1) {
            const keyword = document.getElementById('searchKeyword').value;
            const kategori = document.getElementById('filterKategori').value;
            const jenis = document.getElementById('filterJenis').value;
            const statusDisposisi = document.getElementById('filterStatusDisposisi').value;
            const tanggal = document.getElementById('filterTanggal').value;

            // Membangun Query URL yang cocok dengan parameter SuratController@search / filter
            let url =
                `{{ route('surat.filter') }}?search=${encodeURIComponent(keyword)}&kategori=${kategori}&jenis_surat_id=${jenis}&status_disposisi=${statusDisposisi}&tanggal=${tanggal}&page=${page}`;

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    const tbody = document.getElementById('tbodySurat');
                    let html = '';
                    const items = data.data;

                    if (items.length === 0) {
                        html = `<tr>
                            <td colspan="10" 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-folder-x fs-2 mb-2 text-muted"></i>
                                    <span class="fw-medium">Tidak ada data surat yang ditemukan.</span>
                                </div>
                            </td>
                        </tr>`;
                    } else {
                        let nomorAwal = data.from || 0;
                        const currentDivisiId = {{ auth()->user()->getEffectiveDivisiId() ?? 'null' }};
                        const currentUserRole = '{{ auth()->user()->role->nama_role }}';
                        const isAsistenAdmin = {{ auth()->user()->isAsisten() ? 'true' : 'false' }};

                        items.forEach((item, index) => {
                            let badgeDisposisi = '';
                            // Badge status distribusi disposisi/internal hanya ditampilkan jika user adalah pemilik/pembuat surat asli
                            const isPemilikSurat = (currentDivisiId && item.divisi_id == currentDivisiId) || (currentUserRole === 'Admin' && !currentDivisiId);
                            if (isPemilikSurat) {
                                badgeDisposisi = (item.penerima_count > 0)
                                    ? `<div><span class="badge bg-primary-subtle text-primary border border-primary-subtle rounded-pill mt-1" style="font-size: 11px;"><i class="bi bi-send-check-fill me-1"></i>Didisposisikan (${item.penerima_count} Unit)</span></div>`
                                    : `<div><span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle rounded-pill mt-1" style="font-size: 11px;"><i class="bi bi-building me-1"></i>Internal Divisi</span></div>`;
                            } else if (item.disposisi_keluar_count > 0) {
                                badgeDisposisi = `<div><span class="badge bg-info-subtle text-info border border-info-subtle rounded-pill mt-1" style="font-size: 11px;"><i class="bi bi-arrow-right-circle me-1"></i>Diteruskan (${item.disposisi_keluar_count} Unit)</span></div>`;
                            }

                            let namaJenis = '';
                            if (currentDivisiId && item.divisi_id != currentDivisiId) {
                                namaJenis = 'Masuk';
                            } else {
                                namaJenis = item.display_jenis_surat || (item.jenis_surat ? item.jenis_surat.nama_jenis : '-');
                            }

                            let badgeJenisHtml = '';
                            if (namaJenis.includes('Masuk')) {
                                badgeJenisHtml = `<span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2.5 py-1"><i class="bi bi-box-arrow-in-down me-1"></i>Masuk</span>`;
                            } else if (namaJenis.includes('Keluar')) {
                                badgeJenisHtml = `<span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-2.5 py-1"><i class="bi bi-box-arrow-up me-1"></i>Keluar</span>`;
                            } else if (namaJenis.includes('Internal')) {
                                badgeJenisHtml = `<span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill px-2.5 py-1"><i class="bi bi-building me-1"></i>Internal</span>`;
                            } else {
                                badgeJenisHtml = `<span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle rounded-pill px-2.5 py-1">${namaJenis}</span>`;
                            }

                            // Format Kolom Asal / Tujuan (Clean & Ringkas dengan Ikon Panah Kecil)
                            let asalTujuanHtml = '';
                            let rawAsal = item.asal_tujuan ? item.asal_tujuan.trim() : '';

                            if (namaJenis.includes('Masuk')) {
                                const iconMasuk = `<span class="badge bg-success-subtle text-success rounded-circle p-0 d-inline-flex align-items-center justify-content-center flex-shrink-0" style="width: 20px; height: 20px;" title="Surat Masuk (Asal Pengirim)"><i class="bi bi-arrow-down-left fw-bold" style="font-size: 10px;"></i></span>`;
                                if (currentDivisiId && item.divisi_id != currentDivisiId) {
                                    const namaDivisiPengirim = item.display_asal_tujuan || (item.divisi ? item.divisi.nama_divisi : 'Unit Pengirim');
                                    asalTujuanHtml = `
                                        <div class="d-flex align-items-center gap-2">
                                            ${iconMasuk}
                                            <div class="text-truncate" style="max-width: 220px;" title="Asal Pengirim: ${namaDivisiPengirim}${rawAsal ? ' (' + rawAsal + ')' : ''}">
                                                <span class="fw-semibold text-dark">${namaDivisiPengirim}</span>
                                                ${rawAsal ? `<small class="text-muted ms-1" style="font-size: 11px;">(${rawAsal})</small>` : ''}
                                            </div>
                                        </div>`;
                                } else if (rawAsal) {
                                    asalTujuanHtml = `
                                        <div class="d-flex align-items-center gap-2">
                                            ${iconMasuk}
                                            <span class="fw-semibold text-dark text-truncate" style="max-width: 220px;" title="Asal Pengirim: ${rawAsal}">
                                                ${rawAsal}
                                            </span>
                                        </div>`;
                                } else {
                                    asalTujuanHtml = `
                                        <div class="d-flex align-items-center gap-2">
                                            ${iconMasuk}
                                            <span class="text-muted small fst-italic">Pihak Luar / Eksternal</span>
                                        </div>`;
                                }
                            } else if (namaJenis.includes('Keluar')) {
                                const iconKeluar = `<span class="badge bg-danger-subtle text-danger rounded-circle p-0 d-inline-flex align-items-center justify-content-center flex-shrink-0" style="width: 20px; height: 20px;" title="Surat Keluar (Tujuan Penerima)"><i class="bi bi-arrow-up-right fw-bold" style="font-size: 10px;"></i></span>`;
                                if (item.penerima_count > 0 || item.tujuan_unit_nama) {
                                    const targetTujuan = item.tujuan_unit_nama || rawAsal || `Disposisi (${item.penerima_count} Unit)`;
                                    const allUnitTooltip = (item.tujuan_unit_list && item.tujuan_unit_list.length > 0)
                                        ? `Tujuan: ${item.tujuan_unit_list.join(', ')}` + (rawAsal && !item.tujuan_unit_list.includes(rawAsal) ? ` (${rawAsal})` : '')
                                        : `Tujuan: ${targetTujuan}`;
                                    asalTujuanHtml = `
                                        <div class="d-flex align-items-center gap-2">
                                            ${iconKeluar}
                                            <div class="text-truncate" style="max-width: 220px;" title="${allUnitTooltip}">
                                                <span class="fw-semibold text-dark">${targetTujuan}</span>
                                                ${rawAsal && item.tujuan_unit_nama && rawAsal !== item.tujuan_unit_nama ? `<small class="text-muted ms-1" style="font-size: 11px;">(${rawAsal})</small>` : ''}
                                            </div>
                                        </div>`;
                                } else if (rawAsal) {
                                    asalTujuanHtml = `
                                        <div class="d-flex align-items-center gap-2">
                                            ${iconKeluar}
                                            <span class="fw-semibold text-dark text-truncate" style="max-width: 220px;" title="Tujuan Penerima: ${rawAsal}">
                                                ${rawAsal}
                                            </span>
                                        </div>`;
                                } else {
                                    asalTujuanHtml = `
                                        <div class="d-flex align-items-center gap-2">
                                            ${iconKeluar}
                                            <span class="text-muted small fst-italic">Pihak Luar / Eksternal</span>
                                        </div>`;
                                }
                            } else {
                                const iconInternal = `<span class="badge bg-warning-subtle text-warning-emphasis rounded-circle p-0 d-inline-flex align-items-center justify-content-center flex-shrink-0" style="width: 20px; height: 20px;" title="Surat Internal"><i class="bi bi-arrow-left-right fw-bold" style="font-size: 10px;"></i></span>`;
                                if (rawAsal) {
                                    asalTujuanHtml = `
                                        <div class="d-flex align-items-center gap-2">
                                            ${iconInternal}
                                            <span class="fw-semibold text-dark text-truncate" style="max-width: 220px;" title="Internal: ${rawAsal}">
                                                ${rawAsal}
                                            </span>
                                        </div>`;
                                } else {
                                    const divName = item.divisi ? item.divisi.nama_divisi : '';
                                    asalTujuanHtml = `
                                        <div class="d-flex align-items-center gap-2">
                                            ${iconInternal}
                                            <span class="text-muted small fst-italic text-truncate" style="max-width: 220px;" title="Internal ${divName}">Internal ${divName}</span>
                                        </div>`;
                                }
                            }

                            const cleanTanggalSurat = extractDateOnly(item.tanggal_surat);
                            const cleanTanggalTerima = extractDateOnly(item.tanggal_terima);

                            html += `
                                <tr>
                                    <td><span class="text-muted fw-bold">${nomorAwal + index}</span></td>
                                    <td>
                                        <strong class="text-dark">${item.nomor_surat}</strong>
                                    </td>
                                    <td>
                                        <div class="text-truncate" style="max-width: 290px;" title="${item.perihal}">
                                            ${item.perihal}
                                        </div>
                                        ${badgeDisposisi}
                                    </td>
                                    <td>
                                        <span class="d-block small text-dark fw-semibold">${item.kategori ? item.kategori.nama_kategori : '-'}</span>
                                    </td>
                                    <td>
                                        ${badgeJenisHtml}
                                    </td>
                                    <td>
                                        ${asalTujuanHtml}
                                    </td>
                                    <td>
                                        <div class="fw-semibold text-dark text-truncate" style="max-width: 170px;" title="${item.divisi ? item.divisi.nama_divisi : '-'}">
                                            <i class="bi bi-building me-1 text-primary"></i>${item.divisi ? item.divisi.nama_divisi : '-'}
                                        </div>
                                        ${item.user ? `<small class="text-muted d-block text-truncate" style="font-size: 11px; max-width: 170px;" title="Pengunggah: ${item.user.name}"><i class="bi bi-person me-1"></i>${item.user.name}</small>` : ''}
                                    </td>

                                    <td><small class="text-muted fw-medium">${formatTanggalIndo(item.tanggal_surat)}</small></td>
                                    <td><small class="text-muted fw-medium">${formatTanggalIndo(item.tanggal_terima)}</small></td>

                                    <td class="text-center">
                                        <div class="btn-action-group">
                                            <a href="/surat/${item.id}/view" target="_blank" class="btn btn-sm btn-icon btn-outline-secondary" title="Lihat Berkas">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            <a href="/surat/${item.id}/download" class="btn btn-sm btn-icon btn-outline-primary" title="Unduh Berkas">
                                                <i class="bi bi-download"></i>
                                            </a>
                                            <button class="btn btn-sm btn-icon btn-outline-success btn-disposisi" data-id="${item.id}" title="Disposisi">
                                                <i class="bi bi-send-fill"></i>
                                            </button>
                                            ${(item.divisi_id == currentDivisiId) ? `
                                            <button class="btn btn-sm btn-icon btn-outline-warning btn-edit"
                                                data-id="${item.id}"
                                                data-divisi-id="${item.divisi_id}"
                                                data-nomor="${item.nomor_surat}"
                                                data-perihal="${item.perihal}"
                                                data-asal-tujuan="${(item.asal_tujuan || '').replace(/"/g, '&quot;')}"
                                                data-tanggal="${cleanTanggalSurat}"
                                                data-tanggal-terima="${cleanTanggalTerima}"
                                                data-kategori="${item.kategori_id}"
                                                data-jenis="${item.jenis_surat_id}"
                                                data-status="${item.status}"
                                                data-file="${(item.file_surat || '').split('/').pop()}"
                                                title="Ubah Data">
                                                <i class="bi bi-pencil-square text-dark"></i>
                                            </button>` : ''}
                                            <button class="btn btn-sm btn-icon btn-outline-danger btn-delete"
                                                data-id="${item.id}"
                                                data-nomor="${item.nomor_surat}"
                                                title="Hapus Surat">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>`;
                        });
                    }
                    tbody.innerHTML = html;
                    renderPagination(data);
                    registerDynamicEvents(); // Registrasi ulang event handler tombol dinamis
                })
                .catch(error => {
                    console.error('Error:', error);
                    document.getElementById('tbodySurat').innerHTML = `<tr>
                        <td colspan="10" class="text-center text-danger py-4 align-middle">
                            <div class="d-flex flex-column align-items-center justify-content-center text-center w-100">
                                <i class="bi bi-exclamation-triangle-fill fs-3 mb-2"></i>
                                <span>Gagal memuat arsip data.</span>
                            </div>
                        </td>
                    </tr>`;
                });
        }



        function renderPagination(data) {
            let html = '';
            if (data && data.total > 0) {
                let from = data.from || 0;
                let to = data.to || 0;
                let total = data.total || 0;

                html += `
                    <div class="pagination-wrapper d-flex align-items-center justify-content-between flex-wrap gap-2 pt-2">
                        <div class="pagination-info text-muted small">
                            Menampilkan <strong>${from}</strong> - <strong>${to}</strong> dari <strong>${total}</strong> Arsip Surat
                        </div>
                `;

                if (data.last_page > 1) {
                    html += `<nav><ul class="pagination pagination-sm mb-0 align-items-center gap-1">`;

                    if (data.current_page > 1) {
                        html += `<li class="page-item"><a href="#" class="page-link pagination-link rounded-3 px-3 shadow-none" data-page="${data.current_page - 1}"><i class="bi bi-chevron-left me-1"></i> Prev</a></li>`;
                    } else {
                        html += `<li class="page-item disabled"><span class="page-link rounded-3 px-3 shadow-none"><i class="bi bi-chevron-left me-1"></i> Prev</span></li>`;
                    }

                    html += `
                        <li class="page-item active" aria-current="page">
                            <span class="page-link rounded-3 px-3 fw-bold bg-primary text-white border-primary shadow-sm">
                                Halaman ${data.current_page} / ${data.last_page}
                            </span>
                        </li>
                    `;

                    if (data.current_page < data.last_page) {
                        html += `<li class="page-item"><a href="#" class="page-link pagination-link rounded-3 px-3 shadow-none" data-page="${data.current_page + 1}">Next <i class="bi bi-chevron-right ms-1"></i></a></li>`;
                    } else {
                        html += `<li class="page-item disabled"><span class="page-link rounded-3 px-3 shadow-none">Next <i class="bi bi-chevron-right ms-1"></i></span></li>`;
                    }

                    html += `</ul></nav>`;
                }

                html += `</div>`;
            }

            document.getElementById('paginationContainer').innerHTML = html;

            document.querySelectorAll('.pagination-link').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const page = this.dataset.page;
                    if (page) {
                        fetchSurat(page);
                    }
                });
            });
        }

        // REGISTRASI EVENT TOMBOL EDIT & HAPUS DINAMIS (KARENA HASIL AJAX)
        function registerDynamicEvents() {
            // Event Modal Edit Data
            document.querySelectorAll('.btn-edit').forEach(button => {
                button.addEventListener('click', function() {
                    const divisiIdSurat = this.dataset.divisiId;
                    const currentDivisiId = {{ auth()->user()->divisi_id ?? 'null' }};
                    const currentUserRole = '{{ auth()->user()->role->nama_role }}';

                    if (currentUserRole !== 'Admin' && divisiIdSurat && divisiIdSurat != currentDivisiId) {
                        Swal.fire({
                            title: 'Perhatian!',
                            text: 'Maaf surat tidak dapat di edit karena ini surat divisi lain.',
                            icon: 'warning',
                            confirmButtonColor: '#0d6efd',
                            confirmButtonText: 'OK'
                        });
                        return;
                    }

                    const id = this.dataset.id;
                    document.getElementById('edit_nomor').value = this.dataset.nomor;

                    const cleanTglSurat = extractDateOnly(this.dataset.tanggal);
                    const cleanTglTerima = extractDateOnly(this.dataset.tanggalTerima);
                    const editTglInput = document.getElementById('edit_tanggal');
                    const editTglTerimaInput = document.getElementById('edit_tanggal_terima');

                    if (editTglInput) {
                        editTglInput.value = formatToIndoDateInput(cleanTglSurat);
                        editTglInput.classList.remove('is-invalid');
                        const hiddenPicker = editTglInput.closest('.input-group')?.querySelector('.native-hidden-date-picker');
                        if (hiddenPicker) hiddenPicker.value = cleanTglSurat;
                    }
                    if (editTglTerimaInput) {
                        editTglTerimaInput.value = formatToIndoDateInput(cleanTglTerima);
                        editTglTerimaInput.classList.remove('is-invalid');
                        const hiddenPicker = editTglTerimaInput.closest('.input-group')?.querySelector('.native-hidden-date-picker');
                        if (hiddenPicker) hiddenPicker.value = cleanTglTerima;
                    }

                    document.getElementById('edit_perihal').value = this.dataset.perihal;
                    document.getElementById('edit_kategori').value = this.dataset.kategori;
                    document.getElementById('edit_jenis').value = this.dataset.jenis;
                    document.getElementById('edit_asal_tujuan').value = this.dataset.asalTujuan || '';

                    // Sembunyikan panel preset jika sedang terbuka
                    const editPresetPanel = document.getElementById('panel_edit_asal_tujuan');
                    if (editPresetPanel) editPresetPanel.classList.add('d-none');

                    // Sinkronkan tombol clear pada input asal / tujuan
                    const clearBtnEdit = document.querySelector('.btn-clear-input[data-target="edit_asal_tujuan"]');
                    if (clearBtnEdit) {
                        if ((this.dataset.asalTujuan || '').trim().length > 0) {
                            clearBtnEdit.classList.remove('d-none');
                        } else {
                            clearBtnEdit.classList.add('d-none');
                        }
                    }

                    // Reset dropzone file baru
                    if (typeof resetFileSelectEdit === 'function') {
                        resetFileSelectEdit();
                    }

                    // Tampilkan badge nama berkas digital lama jika sudah ada
                    const existingFileName = this.dataset.file;
                    const badgeEl = document.getElementById('editCurrentFileBadge');
                    const badgeNameEl = document.getElementById('editCurrentFileName');
                    if (badgeEl && badgeNameEl) {
                        if (existingFileName && existingFileName.trim() !== '') {
                            badgeNameEl.textContent = existingFileName;
                            badgeEl.classList.remove('d-none');
                        } else {
                            badgeEl.classList.add('d-none');
                        }
                    }

                    // Sinkronisasi label & placeholder asal/tujuan pada modal edit
                    updateAsalTujuanUI(
                        document.getElementById('edit_jenis'),
                        document.getElementById('edit_asal_tujuan'),
                        document.getElementById('label_edit_asal_tujuan'),
                        document.getElementById('icon_edit_asal_tujuan'),
                        document.getElementById('hint_edit_asal_tujuan')
                    );

                    // Set dynamic action route update
                    document.getElementById('formEditSurat').action = `/surat/${id}`;

                    // Tampilkan modal edit secara manual
                    const modalEdit = new bootstrap.Modal(document.getElementById(
                        'modalEditSurat'));
                    modalEdit.show();
                });
            });

            // =========================
            // TOMBOL DISPOSISI
            // =========================
            document.querySelectorAll('.btn-disposisi').forEach(button => {

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

                    // simpan id surat
                    document.getElementById('disposisi_surat_id').value =
                        this.dataset.id;

                    let suratId = this.dataset.id;

                    fetch('/chat-disposisi/riwayat/' + suratId)

                        .then(res => res.json())

                        .then(result => {

                            let html = '';

                            if (result.data.length === 0) {

                                html = `
                <div class="text-center text-muted py-3">
                    Belum ada riwayat disposisi
                </div>
            `;

                            } else {

                                result.data.forEach(function(item, idx) {

                                    let adminBadge = '';
                                    if (item.admin_approval_status === 'pending') {
                                        adminBadge = `<span class="badge bg-warning text-dark me-1"><i class="bi bi-clock me-1"></i>Menunggu Admin</span>`;
                                    } else if (item.admin_approval_status === 'approved') {
                                        adminBadge = `<span class="badge bg-success me-1"><i class="bi bi-check-circle me-1"></i>Disetujui Admin</span>`;
                                    } else {
                                        adminBadge = `<span class="badge bg-danger me-1"><i class="bi bi-x-circle me-1"></i>Ditolak Admin</span>`;
                                    }

                                    let stText = item.penerima_status || item.status || 'Pending';
                                    let statusBadge = `<span class="badge bg-secondary">${stText}</span>`;

                                    const kepadaDivisi = (item.kepada && item.kepada.divisi) ? item.kepada.divisi.nama_divisi : 'Tanpa Unit';
                                    const kepadaNama = item.kepada ? item.kepada.name : 'Penerima';
                                    const dariDivisi = (item.dari && item.dari.divisi) ? item.dari.divisi.nama_divisi : 'Tanpa Unit';
                                    const dariNama = item.dari ? item.dari.name : 'Pengirim';

                                    html += `
                                    <div class="border rounded-3 p-2.5 mb-2 bg-white shadow-2xs">
                                        <div class="d-flex justify-content-between align-items-center mb-1">
                                            <span class="badge bg-light text-dark border fw-bold" style="font-size: 10px;">Tahap ${idx + 1}</span>
                                            <small class="text-muted" style="font-size: 11px;">${item.tanggal_disposisi ? new Date(item.tanggal_disposisi).toLocaleDateString('id-ID') : ''}</small>
                                        </div>
                                        <div class="d-flex align-items-center gap-1.5 flex-wrap">
                                            <span class="fw-semibold text-dark">${dariDivisi}</span>
                                            <span class="text-muted small">(${dariNama})</span>
                                            <i class="bi bi-arrow-right text-primary mx-1"></i>
                                            <span class="fw-bold text-primary">${kepadaDivisi}</span>
                                            <span class="text-muted small">(${kepadaNama})</span>
                                        </div>
                                        ${item.catatan ? `<div class="small text-secondary mt-1 fst-italic"><i class="bi bi-chat-left-text me-1"></i>"${item.catatan}"</div>` : ''}
                                        <div class="mt-2">
                                            ${adminBadge}
                                            ${statusBadge}
                                        </div>
                                    </div>
                                    `;

                                });

                            }

                            document.getElementById('riwayatDisposisi').innerHTML = html;

                        });

                    // buka modal
                    const modal = new bootstrap.Modal(
                        document.getElementById('modalDisposisi')
                    );

                    fetch('/chat-disposisi')

                        .then(res => res.json())

                        .then(result => {
                            let list = document.getElementById('disposisi_user_list');

                            list.innerHTML = '';

                            result.users.forEach(function(user) {

                                list.innerHTML += `

<div class="col-lg-6 col-md-6 col-12 user-item">

    <label class="disposisi-card" for="user_${user.id}">

        <input
            class="form-check-input disposisi-user"
            type="checkbox"
            value="${user.id}"
            id="user_${user.id}">

        <div class="ms-2 flex-grow-1">

            <div class="fw-bold">

                ${user.name}

            </div>

            <small class="text-muted">

                ${user.divisi ? user.divisi.nama_divisi : 'Tanpa Divisi'}

            </small>

        </div>

    </label>

</div>

`;

                            });

                            initDisposisiUI();
                        });

                    modal.show();

                });

            });

            // Event Konfirmasi Hapus Modern (SweetAlert2)
            document.querySelectorAll('.btn-delete').forEach(button => {
                button.addEventListener('click', function() {
                    const id = this.dataset.id;
                    const nomorSurat = this.dataset.nomor;
                    const formDelete = document.getElementById('formDeleteMaster');

                    Swal.fire({
                        title: 'Apakah Anda Yakin?'
                        , text: `Surat dengan nomor "${nomorSurat}" akan dihapus permanen dari arsip!`
                        , icon: 'warning'
                        , showCancelButton: true
                        , confirmButtonColor: '#dc3545', // Red Danger Bootstrap
                        cancelButtonColor: '#6c757d', // Gray Secondary
                        confirmButtonText: '<i class="bi bi-trash me-1"></i> Ya, Hapus!'
                        , cancelButtonText: 'Batal'
                        , reverseButtons: true
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // Set dynamic action route destroy & eksekusi submit
                            formDelete.action = `/surat/${id}`;
                            formDelete.submit();
                        }
                    });
                });
            });
        }

        function initDisposisiUI() {

            const search = document.getElementById('searchDisposisiUser');

            const checkAll = document.getElementById('checkAllDisposisi');

            const counter = document.getElementById('jumlahDipilih');

            function updateCounter() {

                let total =
                    document.querySelectorAll('.disposisi-user:checked').length;

                counter.innerHTML =
                    "Dipilih : " + total + " tujuan";
            }

            // ===========================
            // Pilih Semua
            // ===========================

            checkAll.onchange = function() {

                document
                    .querySelectorAll('.disposisi-user')
                    .forEach(function(item) {

                        item.checked = checkAll.checked;

                    });

                updateCounter();

            };

            // ===========================
            // Hitung jumlah dipilih
            // ===========================

            document
                .querySelectorAll('.disposisi-user')
                .forEach(function(item) {

                    item.onchange = function() {

                        updateCounter();

                    };

                });

            // ===========================
            // Search
            // ===========================

            search.onkeyup = function() {

                let keyword =
                    this.value.toLowerCase();

                document
                    .querySelectorAll('.user-item')
                    .forEach(function(item) {

                        item.style.display =
                            item.innerText
                            .toLowerCase()
                            .includes(keyword) ?
                            '' :
                            'none';

                    });

            };

            updateCounter();

        }

        // =========================================================
        // SMART DATE MASKING & QUICK DATE ACTIONS (KETIK LANGSUNG)
        // =========================================================
        function formatToIndoDateInput(dateString) {
            if (!dateString) return '';
            const clean = String(dateString).split('T')[0].trim();
            const parts = clean.split('-');
            if (parts.length === 3) {
                return `${parts[2]}/${parts[1]}/${parts[0]}`;
            }
            return clean;
        }

        function applyDateMask(input) {
            if (!input) return;

            input.addEventListener('keydown', function(e) {
                // Allow backspace, tab, enter, escape, delete
                if ([8, 9, 13, 27, 46].includes(e.keyCode) ||
                    // Allow Ctrl/Cmd + A, C, V, X
                    ([65, 67, 86, 88].includes(e.keyCode) && (e.ctrlKey || e.metaKey)) ||
                    // Allow Home, End, Arrow keys
                    (e.keyCode >= 35 && e.keyCode <= 40)) {
                    return;
                }
                // Allow numbers (0-9) and Numpad (0-9)
                const isDigit = (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105);
                // Allow slash /
                const isSlash = e.key === '/' || e.keyCode === 191 || e.keyCode === 111;

                if (!isDigit && !isSlash) {
                    e.preventDefault();
                }
            });

            input.addEventListener('input', function(e) {
                let val = this.value.replace(/[^0-9]/g, '');
                const isDeleting = e.inputType === 'deleteContentBackward' || e.inputType === 'deleteContentForward';

                if (val.length > 8) {
                    val = val.substring(0, 8);
                }

                let formatted = '';
                if (val.length > 0) {
                    let day = val.substring(0, 2);
                    if (day.length === 2) {
                        let d = parseInt(day, 10);
                        if (d > 31) day = '31';
                        else if (d === 0) day = '01';
                    }
                    formatted = day;

                    if (val.length > 2 || (val.length === 2 && !isDeleting)) {
                        let month = val.substring(2, 4);
                        if (month.length === 2) {
                            let m = parseInt(month, 10);
                            if (m > 12) month = '12';
                            else if (m === 0) month = '01';
                        }
                        formatted += '/' + month;
                    }

                    if (val.length > 4 || (val.length === 4 && !isDeleting)) {
                        let year = val.substring(4, 8);
                        formatted += '/' + year;
                    }
                }

                this.value = formatted;

                // Sync ke hidden native picker jika sudah 10 karakter (DD/MM/YYYY)
                const group = this.closest('.input-group');
                if (group) {
                    const picker = group.querySelector('.native-hidden-date-picker');
                    if (picker) {
                        const parts = formatted.split('/');
                        if (parts.length === 3 && parts[2].length === 4) {
                            picker.value = `${parts[2]}-${parts[1]}-${parts[0]}`;
                            this.classList.remove('is-invalid');
                        }
                    }
                }
            });

            input.addEventListener('paste', function(e) {
                e.preventDefault();
                const text = (e.clipboardData || window.clipboardData).getData('text').trim();
                if (!text) return;

                if (/^\d{4}[-/]\d{1,2}[-/]\d{1,2}$/.test(text)) {
                    const p = text.split(/[-/]/);
                    const d = p[2].padStart(2, '0');
                    const m = p[1].padStart(2, '0');
                    const y = p[0];
                    this.value = `${d}/${m}/${y}`;
                } else {
                    let digits = text.replace(/[^0-9]/g, '');
                    if (digits.length >= 8) {
                        this.value = `${digits.substring(0,2)}/${digits.substring(2,4)}/${digits.substring(4,8)}`;
                    } else {
                        this.value = digits;
                    }
                }
                this.dispatchEvent(new Event('input'));
            });

            input.addEventListener('blur', function() {
                const val = this.value.trim();
                if (val && val.length < 10) {
                    this.classList.add('is-invalid');
                } else {
                    this.classList.remove('is-invalid');
                }
            });
        }

        // Inisialisasi masking ke seluruh elemen .input-date-masked
        document.querySelectorAll('.input-date-masked').forEach(applyDateMask);

        // Handler Tombol "Hari Ini"
        document.addEventListener('click', function(e) {
            const btnToday = e.target.closest('.btn-set-today');
            if (btnToday) {
                e.preventDefault();
                const targetId = btnToday.dataset.target;
                const targetInput = document.getElementById(targetId);
                if (targetInput) {
                    const now = new Date();
                    const d = String(now.getDate()).padStart(2, '0');
                    const m = String(now.getMonth() + 1).padStart(2, '0');
                    const y = now.getFullYear();
                    targetInput.value = `${d}/${m}/${y}`;
                    targetInput.classList.remove('is-invalid');
                    targetInput.dispatchEvent(new Event('input'));
                    targetInput.focus();
                }
            }
        });

        // Handler Tombol Trigger Kalender Native
        document.addEventListener('click', function(e) {
            const btnPicker = e.target.closest('.btn-picker-trigger');
            if (btnPicker) {
                e.preventDefault();
                const group = btnPicker.closest('.input-group');
                if (group) {
                    const picker = group.querySelector('.native-hidden-date-picker');
                    const maskedInput = group.querySelector('.input-date-masked');
                    if (picker) {
                        if (maskedInput && maskedInput.value) {
                            const parts = maskedInput.value.split('/');
                            if (parts.length === 3 && parts[2].length === 4) {
                                picker.value = `${parts[2]}-${parts[1]}-${parts[0]}`;
                            }
                        }
                        if (typeof picker.showPicker === 'function') {
                            picker.showPicker();
                        } else {
                            picker.click();
                        }
                    }
                }
            }
        });

        // Sinkronisasi dari Kalender Native ke Input Masked
        document.querySelectorAll('.native-hidden-date-picker').forEach(picker => {
            picker.addEventListener('change', function() {
                const group = this.closest('.input-group');
                if (group && this.value) {
                    const maskedInput = group.querySelector('.input-date-masked');
                    if (maskedInput) {
                        maskedInput.value = formatToIndoDateInput(this.value);
                        maskedInput.classList.remove('is-invalid');
                        maskedInput.dispatchEvent(new Event('input'));
                    }
                }
            });
        });

        // Validasi format tanggal sebelum submit form (Tambah Surat & Edit Surat)
        ['modalTambahSurat', 'modalEditSurat'].forEach(modalId => {
            const modalEl = document.getElementById(modalId);
            if (modalEl) {
                const form = modalEl.querySelector('form');
                if (form) {
                    form.addEventListener('submit', function(e) {
                        const maskedDates = form.querySelectorAll('.input-date-masked');
                        let hasError = false;
                        maskedDates.forEach(input => {
                            if (input.required && input.value.trim().length !== 10) {
                                hasError = true;
                                input.classList.add('is-invalid');
                                input.focus();
                            } else {
                                input.classList.remove('is-invalid');
                            }
                        });
                        if (hasError) {
                            e.preventDefault();
                            if (typeof Swal !== 'undefined') {
                                Swal.fire({
                                    toast: true,
                                    position: 'top-end',
                                    icon: 'warning',
                                    title: 'Format tanggal harus lengkap: HH/BB/TTTT (8 digit angka)',
                                    showConfirmButton: false,
                                    timer: 3500
                                });
                            } else {
                                alert('Format tanggal harus lengkap: HH/BB/TTTT (Contoh: 25/08/2026)');
                            }
                        }
                    });
                }
            }
        });

        // =========================================================
        // PRESET MANAGER: ASAL / TUJUAN SCROLLABLE QUICK SELECT (FULL CRUD)
        // Unit Kampus: SINKRON DENGAN KELOLA UNIT (DATABASE DIVISI) - KHUSUS ADMIN
        // Instansi Luar: PRESET MANDIRI TERPISAH (USER & ADMIN MEMILIKI DAFTAR MASING-MASING)
        // =========================================================
        const IS_USER_ADMIN = {{ (auth()->user() && (auth()->user()->isAdmin() || auth()->user()->isAsisten())) ? 'true' : 'false' }};
        const CURRENT_USER_ID = {{ auth()->user()->getKategoriOwnerId() ?? (auth()->id() ?? 0) }};
        const USER_PRESET_SCOPE = IS_USER_ADMIN ? 'admin' : ('user_' + CURRENT_USER_ID);

        let masterInternalDivisi = {!! $divisiSurat->map(fn($d) => ['id' => $d->id, 'nama_divisi' => $d->nama_divisi])->values()->toJson() !!};
        const masterDbReferensi = {!! ($referensiList ?? collect())->toJson() !!};
        const masterDefaultEksternal = [
            "LLDIKTI Wilayah I Sumatera Utara",
            "Kemendikbudristek RI",
            "Kementerian Kesehatan RI",
            "Kementerian Agama RI",
            "Dinas Pendidikan Provinsi Sumatera Utara",
            "Dinas Kesehatan Provinsi Sumatera Utara",
            "Yayasan Sari Mutiara Medan",
            "Bank Mandiri (Persero) Tbk",
            "Bank BNI (Persero) Tbk",
            "Bank BRI (Persero) Tbk",
            "Bank Sumut",
            "BPJS Kesehatan",
            "BPJS Ketenagakerjaan",
            "RS Columbia Asia Medan",
            "RSUP H. Adam Malik",
            "Polrestabes Medan",
            "KPP Pratama Medan Barat"
        ];

        // Storage Key terisolasi per akun / role (Admin vs masing-masing User)
        const STORAGE_CUSTOM = `surat_presets_custom_${USER_PRESET_SCOPE}_v4`;
        const STORAGE_DELETED = `surat_presets_deleted_${USER_PRESET_SCOPE}_v4`;
        const STORAGE_RENAMED = `surat_presets_renamed_${USER_PRESET_SCOPE}_v4`;

        // Migrasi halus jika Admin sebelumnya pernah menyimpan data di v3
        if (IS_USER_ADMIN && localStorage.getItem(STORAGE_CUSTOM) === null && localStorage.getItem('surat_presets_custom_v3')) {
            try {
                localStorage.setItem(STORAGE_CUSTOM, localStorage.getItem('surat_presets_custom_v3'));
                if (localStorage.getItem('surat_presets_deleted_v3')) {
                    localStorage.setItem(STORAGE_DELETED, localStorage.getItem('surat_presets_deleted_v3'));
                }
                if (localStorage.getItem('surat_presets_renamed_v3')) {
                    localStorage.setItem(STORAGE_RENAMED, localStorage.getItem('surat_presets_renamed_v3'));
                }
            } catch(e) {}
        }

        function getCustomList() {
            try { return JSON.parse(localStorage.getItem(STORAGE_CUSTOM)) || []; } catch(e) { return []; }
        }
        function getDeletedList() {
            try { return JSON.parse(localStorage.getItem(STORAGE_DELETED)) || []; } catch(e) { return []; }
        }
        function getRenamedMap() {
            try { return JSON.parse(localStorage.getItem(STORAGE_RENAMED)) || {}; } catch(e) { return {}; }
        }

        // Khusus Instansi Luar (Simpan ke Local Storage masing-masing)
        function saveCustomPreset(name, category = 'eksternal') {
            if (!name || !name.trim()) return false;
            name = name.trim();
            const lower = name.toLowerCase();

            let deleted = getDeletedList().filter(d => d.toLowerCase() !== lower);
            localStorage.setItem(STORAGE_DELETED, JSON.stringify(deleted));

            let custom = getCustomList();
            const exists = custom.some(item => item.name.toLowerCase() === lower);
            if (!exists) {
                custom.unshift({ name, category: 'eksternal' });
                localStorage.setItem(STORAGE_CUSTOM, JSON.stringify(custom));
                return true;
            }
            return false;
        }

        function deleteExternalPreset(origKey, currentDisplayName) {
            const origLower = origKey.toLowerCase();
            const displayLower = (currentDisplayName || origKey).toLowerCase();

            let custom = getCustomList().filter(i => i.name.toLowerCase() !== origLower && i.name.toLowerCase() !== displayLower);
            localStorage.setItem(STORAGE_CUSTOM, JSON.stringify(custom));

            let renamed = getRenamedMap();
            delete renamed[origLower];
            localStorage.setItem(STORAGE_RENAMED, JSON.stringify(renamed));

            let deleted = getDeletedList();
            if (!deleted.some(d => d.toLowerCase() === origLower)) deleted.push(origLower);
            if (!deleted.some(d => d.toLowerCase() === displayLower)) deleted.push(displayLower);
            localStorage.setItem(STORAGE_DELETED, JSON.stringify(deleted));
            return true;
        }

        function resetPresetsToDefault() {
            localStorage.removeItem(STORAGE_CUSTOM);
            localStorage.removeItem(STORAGE_DELETED);
            localStorage.removeItem(STORAGE_RENAMED);

            // Refresh data Unit Kampus langsung dari database Kelola Unit via AJAX
            fetch('/divisi', {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(res => res.json())
            .then(res => {
                if (res.success && Array.isArray(res.data)) {
                    masterInternalDivisi = res.data.map(d => ({ id: d.id, nama_divisi: d.nama_divisi }));
                    renderAllPresetPanels();
                }
            })
            .catch(() => {});
        }

        function getAllPresets() {
            const deleted = new Set(getDeletedList().map(s => s.toLowerCase()));
            const renamed = getRenamedMap();
            const custom = getCustomList();

            const list = [];
            const seen = new Set();

            // Kumpulkan nama unit kampus agar tidak terduplikasi atau salah masuk ke kategori eksternal
            const internalNames = new Set();
            (masterInternalDivisi || []).forEach(divisi => {
                if (divisi && divisi.nama_divisi) {
                    internalNames.add(String(divisi.nama_divisi).trim().toLowerCase());
                }
            });

            // 1. UNIT KAMPUS: LANGSUNG DARI DATABASE KELOLA UNIT (divisi)
            // Selalu bersumber dari database dan tidak dipengaruhi localStorage
            (masterInternalDivisi || []).forEach(divisi => {
                if (!divisi || !divisi.nama_divisi) return;
                const cleanName = String(divisi.nama_divisi).trim();
                const displayLower = cleanName.toLowerCase();
                if (seen.has(displayLower)) return;

                seen.add(displayLower);
                list.push({
                    id: divisi.id,
                    origKey: cleanName,
                    name: cleanName,
                    category: 'internal'
                });
            });

            function addExternal(origName) {
                if (!origName) return;
                const cleanOrig = String(origName).trim();
                const origLower = cleanOrig.toLowerCase();
                if (deleted.has(origLower)) return;

                // Jangan masukkan jika nama ini adalah unit kampus internal
                if (internalNames.has(origLower)) return;

                const displayName = renamed[origLower] || cleanOrig;
                const displayLower = displayName.toLowerCase();
                if (deleted.has(displayLower)) return;
                if (internalNames.has(displayLower)) return;
                if (seen.has(displayLower)) return;

                seen.add(displayLower);
                list.push({ id: null, origKey: cleanOrig, name: displayName, category: 'eksternal' });
            }

            // 2. Custom Instansi Luar milik user/admin saat ini (Personal / Scoped)
            custom.forEach(item => addExternal(item.name));

            // 3. Database Presets Riwayat Surat (Sudah disaring di controller: Admin seluruhnya, User divisi masing-masing)
            (masterDbReferensi || []).forEach(name => addExternal(name));

            // 4. Default Instansi Luar Bawaan
            masterDefaultEksternal.forEach(name => addExternal(name));

            return list;
        }

        const panelRenderers = [];
        function renderAllPresetPanels() {
            panelRenderers.forEach(fn => fn());
        }

        function initPresetPanels() {
            panelRenderers.length = 0;

            document.querySelectorAll('.panel-preset-asal-tujuan').forEach(panel => {
                const inputTargetId = panel.id === 'panel_tambah_asal_tujuan' ? 'tambah_asal_tujuan' : 'edit_asal_tujuan';
                const inputTarget = document.getElementById(inputTargetId);
                const searchInput = panel.querySelector('.input-search-preset');
                const categoryButtons = panel.querySelectorAll('.btn-category-preset');
                const itemsContainer = panel.querySelector('.preset-items-container');
                const newPresetInput = panel.querySelector('.input-new-preset');
                const addPresetBtn = panel.querySelector('.btn-add-new-preset');

                let currentCategory = 'all';
                let currentSearch = '';

                function render() {
                    const all = getAllPresets();
                    const countAll = all.length;
                    const countEks = all.filter(i => i.category === 'eksternal').length;
                    const countInt = all.filter(i => i.category === 'internal').length;

                    const countAllEl = panel.querySelector('.count-all');
                    const countEksEl = panel.querySelector('.count-eksternal');
                    const countIntEl = panel.querySelector('.count-internal');
                    if (countAllEl) countAllEl.textContent = countAll;
                    if (countEksEl) countEksEl.textContent = countEks;
                    if (countIntEl) countIntEl.textContent = countInt;

                    let filtered = all;
                    if (currentCategory !== 'all') {
                        filtered = filtered.filter(i => i.category === currentCategory);
                    }
                    if (currentSearch) {
                        const q = currentSearch.toLowerCase();
                        filtered = filtered.filter(i => i.name.toLowerCase().includes(q));
                    }

                    if (filtered.length === 0) {
                        itemsContainer.innerHTML = `
                            <div class="text-center py-3 text-muted fs-8">
                                <i class="bi bi-search me-1"></i> Tidak ditemukan hasil yang cocok.<br>
                                <span class="fs-9">Ketik nama di bawah lalu klik Tambah.</span>
                            </div>
                        `;
                        return;
                    }

                    let html = '';
                    filtered.forEach(item => {
                        const isInternal = item.category === 'internal';
                        const badgeClass = isInternal ? 'bg-primary-subtle text-primary border-primary-subtle' : 'bg-success-subtle text-success border-success-subtle';
                        const badgeLabel = isInternal ? 'Unit Kampus' : 'Eksternal';
                        const iconClass = isInternal ? 'bi-building text-primary' : 'bi-geo-alt text-success';
                        const safeOrigKey = (item.origKey || item.name).replace(/"/g, '&quot;');
                        const safeName = item.name.replace(/"/g, '&quot;');
                        const itemId = item.id || '';
                        const tooltipDelete = isInternal ? 'Hapus Unit (Sinkron ke Kelola Unit)' : 'Hapus dari Daftar';

                        // Otorisasi: Untuk Unit Kampus, HANYA ADMIN yang boleh Hapus.
                        // Pengguna non-admin hanya bisa memilih ("yang lain hanya mengikut").
                        // Untuk Instansi Luar, setiap pengguna dapat mengelola instansinya masing-masing.
                        const canManageItem = !isInternal || IS_USER_ADMIN;

                        let actionButtonsHtml = '';
                        if (canManageItem) {
                            actionButtonsHtml = `
                                <div class="preset-action-btns d-flex align-items-center gap-1 flex-shrink-0 ms-2">
                                    <button type="button" class="btn btn-sm btn-outline-danger border-0 p-1 btn-action-preset-item btn-delete-preset" 
                                        data-origkey="${safeOrigKey}" 
                                        data-currentname="${safeName}" 
                                        data-category="${item.category}" 
                                        data-id="${itemId}" 
                                        title="${tooltipDelete}">
                                        <i class="bi bi-trash fs-7"></i>
                                    </button>
                                </div>
                            `;
                        }

                        html += `
                            <div class="list-group-item d-flex justify-content-between align-items-center py-1.5 px-2 fs-7 border-0 rounded-2 mb-1 preset-item-row">
                                <div class="d-flex align-items-center text-truncate flex-grow-1 select-preset-action py-1" role="button" data-value="${safeName}" title="Pilih: ${safeName}">
                                    <i class="bi ${iconClass} me-2 flex-shrink-0"></i>
                                    <span class="text-truncate fw-medium text-dark preset-name-text me-2">${item.name}</span>
                                    <span class="badge ${badgeClass} border rounded-pill fs-9 flex-shrink-0">${badgeLabel}</span>
                                </div>
                                ${actionButtonsHtml}
                            </div>
                        `;
                    });

                    itemsContainer.innerHTML = html;
                }

                // Event delegation untuk klik item dan hapus pada container preset
                if (itemsContainer) {
                    itemsContainer.addEventListener('click', function(e) {
                        const deleteBtn = e.target.closest('.btn-delete-preset');
                        const selectEl = e.target.closest('.select-preset-action');

                    // 2. Event Hapus Preset
                    if (deleteBtn) {
                        e.preventDefault();
                        e.stopPropagation();
                        const origKey = deleteBtn.dataset.origkey;
                        const currentName = deleteBtn.dataset.currentname;
                        const category = deleteBtn.dataset.category;
                        const divisiId = deleteBtn.dataset.id;

                        if (category === 'internal' && divisiId) {
                            if (!IS_USER_ADMIN) {
                                if (typeof Swal !== 'undefined') {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Akses Ditolak',
                                        text: 'Hanya Admin yang dapat menghapus Unit Kampus.'
                                    });
                                }
                                return;
                            }

                            // HAPUS UNIT KAMPUS (SINKRON DENGAN KELOLA UNIT)
                            if (typeof Swal !== 'undefined') {
                                Swal.fire({
                                    title: 'Hapus Unit Kampus?',
                                    html: `Unit <b>"${currentName}"</b> akan dihapus permanen dari database <b>Kelola Unit</b>.<br><br><small class="text-muted"><i class="bi bi-info-circle me-1"></i>Catatan: Unit tidak dapat dihapus jika masih digunakan oleh akun pengguna atau arsip surat.</small>`,
                                    icon: 'warning',
                                    showCancelButton: true,
                                    confirmButtonColor: '#dc3545',
                                    confirmButtonText: '<i class="bi bi-trash me-1"></i>Ya, Hapus dari Kelola Unit',
                                    cancelButtonColor: '#6c757d',
                                    cancelButtonText: 'Batal'
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
                                        fetch(`/divisi/${divisiId}`, {
                                            method: 'DELETE',
                                            headers: {
                                                'Content-Type': 'application/json',
                                                'X-CSRF-TOKEN': csrfToken,
                                                'Accept': 'application/json',
                                                'X-Requested-With': 'XMLHttpRequest'
                                            }
                                        })
                                        .then(res => res.json().then(data => ({ ok: res.ok, status: res.status, data })))
                                        .then(res => {
                                            if (res.ok && res.data.success) {
                                                masterInternalDivisi = masterInternalDivisi.filter(d => d.id != divisiId);
                                                renderAllPresetPanels();

                                                if (inputTarget && inputTarget.value.trim().toLowerCase() === currentName.toLowerCase()) {
                                                    inputTarget.value = '';
                                                    inputTarget.dispatchEvent(new Event('input'));
                                                    const clearBtn = document.querySelector(`.btn-clear-input[data-target="${inputTargetId}"]`);
                                                    if (clearBtn) clearBtn.classList.add('d-none');
                                                }

                                                Swal.fire({
                                                    toast: true,
                                                    position: 'top-end',
                                                    icon: 'success',
                                                    title: 'Unit kampus berhasil dihapus dari Kelola Unit',
                                                    showConfirmButton: false,
                                                    timer: 2500
                                                });
                                            } else {
                                                Swal.fire({
                                                    icon: 'error',
                                                    title: 'Tidak Dapat Dihapus',
                                                    text: res.data.message || 'Unit tidak dapat dihapus karena masih digunakan di sistem.'
                                                });
                                            }
                                        })
                                        .catch(err => {
                                            Swal.fire({
                                                icon: 'error',
                                                title: 'Kesalahan Sistem',
                                                text: err.message || 'Tidak dapat terhubung ke server.'
                                            });
                                        });
                                    }
                                });
                            } else {
                                if (confirm(`Hapus unit "${currentName}" dari Kelola Unit?`)) {
                                    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
                                    fetch(`/divisi/${divisiId}`, {
                                        method: 'DELETE',
                                        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }
                                    }).then(() => location.reload());
                                }
                            }
                        } else {
                            // HAPUS INSTANSI LUAR (HANYA DARI LOCAL PRESET)
                            if (typeof Swal !== 'undefined') {
                                Swal.fire({
                                    title: 'Hapus Instansi Luar?',
                                    text: `"${currentName}" akan dihapus dari daftar pilihan instansi luar. Anda dapat menambahkannya lagi kapan saja.`,
                                    icon: 'warning',
                                    showCancelButton: true,
                                    confirmButtonColor: '#dc3545',
                                    confirmButtonText: '<i class="bi bi-trash me-1"></i>Ya, Hapus',
                                    cancelButtonColor: '#6c757d',
                                    cancelButtonText: 'Batal'
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        deleteExternalPreset(origKey, currentName);
                                        renderAllPresetPanels();

                                        if (inputTarget && inputTarget.value.trim().toLowerCase() === currentName.toLowerCase()) {
                                            inputTarget.value = '';
                                            inputTarget.dispatchEvent(new Event('input'));
                                            const clearBtn = document.querySelector(`.btn-clear-input[data-target="${inputTargetId}"]`);
                                            if (clearBtn) clearBtn.classList.add('d-none');
                                        }

                                        Swal.fire({
                                            toast: true,
                                            position: 'top-end',
                                            icon: 'success',
                                            title: 'Instansi berhasil dihapus dari daftar',
                                            showConfirmButton: false,
                                            timer: 2000
                                        });
                                    }
                                });
                            } else {
                                if (confirm(`Hapus "${currentName}" dari daftar pilihan?`)) {
                                    deleteExternalPreset(origKey, currentName);
                                    renderAllPresetPanels();
                                }
                            }
                        }
                        return;
                    }

                    // 3. Event Klik Pilih Preset
                    if (selectEl) {
                        e.preventDefault();
                        const val = selectEl.dataset.value;
                        if (inputTarget) {
                            inputTarget.value = val;
                            inputTarget.classList.remove('is-invalid');
                            inputTarget.dispatchEvent(new Event('input'));
                            inputTarget.focus();

                            const clearBtn = document.querySelector(`.btn-clear-input[data-target="${inputTargetId}"]`);
                            if (clearBtn) clearBtn.classList.remove('d-none');
                        }
                        panel.classList.add('d-none');
                        return;
                    }
                });
            }

                panelRenderers.push(render);

                if (searchInput) {
                    searchInput.addEventListener('input', function() {
                        currentSearch = this.value.trim();
                        render();
                    });
                }

                categoryButtons.forEach(btn => {
                    btn.addEventListener('click', function() {
                        categoryButtons.forEach(b => b.classList.remove('active'));
                        this.classList.add('active');
                        currentCategory = this.dataset.category;

                        const addFormContainer = panel.querySelector('.preset-add-form-container');
                        const addNoticeContainer = panel.querySelector('.preset-add-notice-admin');

                        if (currentCategory === 'internal' && !IS_USER_ADMIN) {
                            if (addFormContainer) addFormContainer.classList.add('d-none');
                            if (addNoticeContainer) addNoticeContainer.classList.remove('d-none');
                        } else {
                            if (addFormContainer) addFormContainer.classList.remove('d-none');
                            if (addNoticeContainer) addNoticeContainer.classList.add('d-none');

                            if (newPresetInput) {
                                if (currentCategory === 'internal') {
                                    newPresetInput.placeholder = 'Tambah Unit Kampus baru (ke Kelola Unit)...';
                                } else if (currentCategory === 'eksternal') {
                                    newPresetInput.placeholder = IS_USER_ADMIN 
                                        ? 'Tambah nama Instansi Luar baru...' 
                                        : 'Tambah nama Instansi Luar ke daftar Anda...';
                                } else {
                                    newPresetInput.placeholder = IS_USER_ADMIN 
                                        ? 'Tambah nama baru ke daftar pilihan...' 
                                        : 'Tambah nama Instansi Luar baru...';
                                }
                            }
                        }
                        render();
                    });
                });

                function saveUnitKampusAjax(name) {
                    if (!IS_USER_ADMIN) {
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Akses Ditolak',
                                text: 'Hanya Admin yang memiliki hak untuk menambah Unit Kampus baru.'
                            });
                        }
                        return;
                    }

                    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
                    fetch('/divisi', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: JSON.stringify({ nama_divisi: name })
                    })
                    .then(res => res.json().then(data => ({ ok: res.ok, status: res.status, data })))
                    .then(res => {
                        if (res.ok && res.data.success) {
                            const newDivisi = res.data.data;
                            masterInternalDivisi.push({ id: newDivisi.id, nama_divisi: newDivisi.nama_divisi });
                            masterInternalDivisi.sort((a, b) => a.nama_divisi.localeCompare(b.nama_divisi));
                            if (newPresetInput) newPresetInput.value = '';
                            renderAllPresetPanels();

                            if (inputTarget) {
                                inputTarget.value = newDivisi.nama_divisi;
                                inputTarget.dispatchEvent(new Event('input'));
                                const clearBtn = document.querySelector(`.btn-clear-input[data-target="${inputTargetId}"]`);
                                if (clearBtn) clearBtn.classList.remove('d-none');
                            }
                            panel.classList.add('d-none');

                            Swal.fire({
                                toast: true,
                                position: 'top-end',
                                icon: 'success',
                                title: `Unit "${newDivisi.nama_divisi}" berhasil disimpan ke Kelola Unit & dipilih`,
                                showConfirmButton: false,
                                timer: 2500
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal Menambahkan Unit',
                                text: res.data.message || (res.data.errors ? Object.values(res.data.errors).flat().join('\n') : 'Nama unit sudah terdaftar atau tidak valid.')
                            });
                        }
                    })
                    .catch(err => {
                        Swal.fire({
                            icon: 'error',
                            title: 'Kesalahan Jaringan',
                            text: err.message || 'Tidak dapat terhubung ke server.'
                        });
                    });
                }

                function saveInstansiLuarLocal(name) {
                    saveCustomPreset(name, 'eksternal');
                    if (newPresetInput) newPresetInput.value = '';
                    renderAllPresetPanels();

                    if (inputTarget) {
                        inputTarget.value = name;
                        inputTarget.dispatchEvent(new Event('input'));
                        const clearBtn = document.querySelector(`.btn-clear-input[data-target="${inputTargetId}"]`);
                        if (clearBtn) clearBtn.classList.remove('d-none');
                    }
                    panel.classList.add('d-none');

                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'success',
                        title: IS_USER_ADMIN 
                            ? `Instansi "${name}" berhasil ditambahkan & dipilih`
                            : `Instansi "${name}" ditambahkan ke daftar Anda & dipilih`,
                        showConfirmButton: false,
                        timer: 2000
                    });
                }

                function handleAddPreset() {
                    if (!newPresetInput) return;
                    const val = newPresetInput.value.trim();
                    if (!val) {
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                toast: true,
                                position: 'top-end',
                                icon: 'warning',
                                title: 'Ketik nama unit / instansi terlebih dahulu',
                                showConfirmButton: false,
                                timer: 2000
                            });
                        }
                        newPresetInput.focus();
                        return;
                    }

                    if (currentCategory === 'internal') {
                        if (!IS_USER_ADMIN) {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Akses Terbatas',
                                text: 'Hanya Admin yang dapat menambahkan Unit Kampus baru. Silakan pilih unit yang tersedia di atas atau simpan sebagai Instansi Luar.'
                            });
                            return;
                        }
                        saveUnitKampusAjax(val);
                    } else if (currentCategory === 'eksternal') {
                        saveInstansiLuarLocal(val);
                    } else {
                        // Kategori "Semua"
                        if (!IS_USER_ADMIN) {
                            // Pengguna biasa langsung tersimpan ke daftar instansi luar pribadi masing-masing
                            saveInstansiLuarLocal(val);
                        } else {
                            // Admin ditanyakan apakah ingin disimpan sebagai Unit Kampus (Kelola Unit) atau Instansi Luar
                            if (typeof Swal !== 'undefined') {
                                Swal.fire({
                                    title: 'Simpan Sebagai?',
                                    html: `Pilih kategori untuk <b>"${val}"</b>:`,
                                    icon: 'question',
                                    showCancelButton: true,
                                    showDenyButton: true,
                                    confirmButtonColor: '#0d6efd',
                                    confirmButtonText: '<i class="bi bi-building me-1"></i>Unit Kampus (Kelola Unit)',
                                    denyButtonColor: '#198754',
                                    denyButtonText: '<i class="bi bi-geo-alt me-1"></i>Instansi Luar',
                                    cancelButtonColor: '#6c757d',
                                    cancelButtonText: 'Batal'
                                }).then((choice) => {
                                    if (choice.isConfirmed) {
                                        saveUnitKampusAjax(val);
                                    } else if (choice.isDenied) {
                                        saveInstansiLuarLocal(val);
                                    }
                                });
                            } else {
                                saveInstansiLuarLocal(val);
                            }
                        }
                    }
                }

                if (addPresetBtn) {
                    addPresetBtn.addEventListener('click', function(e) {
                        e.preventDefault();
                        handleAddPreset();
                    });
                }
                if (newPresetInput) {
                    newPresetInput.addEventListener('keydown', function(e) {
                        if (e.key === 'Enter') {
                            e.preventDefault();
                            handleAddPreset();
                        }
                    });
                }


                render();
            });

            // Handler Global untuk Tombol Toggle (+) Preset & Kolom Input Readonly (Menggunakan Event Delegation)
            document.addEventListener('click', function(e) {
                const toggleBtn = e.target.closest('.btn-toggle-preset') || e.target.closest('.input-preset-target');
                if (toggleBtn) {
                    e.preventDefault();
                    e.stopPropagation();
                    const panelId = toggleBtn.dataset.targetPanel;
                    const panel = document.getElementById(panelId);
                    if (panel) {
                        const isHidden = panel.classList.contains('d-none');
                        document.querySelectorAll('.panel-preset-asal-tujuan').forEach(p => p.classList.add('d-none'));
                        if (isHidden) {
                            panel.classList.remove('d-none');
                            const search = panel.querySelector('.input-search-preset');
                            if (search) {
                                search.value = '';
                                search.dispatchEvent(new Event('input'));
                                setTimeout(() => search.focus(), 60);
                            }
                        }
                    }
                    return;
                }

                const closeBtn = e.target.closest('.btn-close-preset');
                if (closeBtn) {
                    e.preventDefault();
                    e.stopPropagation();
                    const panelId = closeBtn.dataset.target;
                    const panel = document.getElementById(panelId);
                    if (panel) panel.classList.add('d-none');
                    return;
                }

                const clearBtn = e.target.closest('.btn-clear-input');
                if (clearBtn) {
                    e.preventDefault();
                    const targetId = clearBtn.dataset.target;
                    const targetInput = document.getElementById(targetId);
                    if (targetInput) {
                        targetInput.value = '';
                        targetInput.dispatchEvent(new Event('input'));
                        targetInput.focus();
                        clearBtn.classList.add('d-none');
                    }
                    return;
                }

                // Tutup panel jika klik di luar panel preset
                if (!e.target.closest('.panel-preset-asal-tujuan') && !e.target.closest('.swal2-container')) {
                    document.querySelectorAll('.panel-preset-asal-tujuan').forEach(p => p.classList.add('d-none'));
                }
            });

            // Listener input asal-tujuan untuk tombol clear
            ['tambah_asal_tujuan', 'edit_asal_tujuan'].forEach(id => {
                const input = document.getElementById(id);
                const clearBtn = document.querySelector(`.btn-clear-input[data-target="${id}"]`);
                if (input && clearBtn) {
                    input.addEventListener('input', function() {
                        if (this.value.trim().length > 0) {
                            clearBtn.classList.remove('d-none');
                        } else {
                            clearBtn.classList.add('d-none');
                        }
                    });
                }
            });
        }

        initPresetPanels();

        // ==================== PENGELOLAAN KATEGORI SURAT PRIBADI ====================
        function initKelolaKategori() {
            const modalEl = document.getElementById('modalKelolaKategori');
            if (!modalEl) return;

            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}';
            const inputBaru = document.getElementById('inputNamaKategoriBaru');
            const btnSimpan = document.getElementById('btnSimpanKategoriBaru');
            const listEl = document.getElementById('listKategoriUser');
            const searchInput = document.getElementById('searchKategoriUser');
            const badgeTotal = document.getElementById('badgeTotalKategoriUser');

            function escapeHtml(str) {
                if (!str) return '';
                return String(str)
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            // Sync ke semua dropdown kategori (Tambah, Edit, Filter)
            function syncAllKategoriDropdowns(categories, selectedForTambah = null) {
                // 1. Dropdown Tambah
                const tambahSelect = document.getElementById('tambah_kategori_id');
                if (tambahSelect) {
                    const prevVal = selectedForTambah || tambahSelect.value;
                    let opts = '<option value="">-- Pilih Kategori --</option>';
                    categories.forEach(c => {
                        opts += `<option value="${c.id}" ${c.id == prevVal ? 'selected' : ''}>${escapeHtml(c.nama_kategori)}</option>`;
                    });
                    tambahSelect.innerHTML = opts;
                    if (selectedForTambah) tambahSelect.value = selectedForTambah;
                }

                // 2. Dropdown Edit
                const editSelect = document.getElementById('edit_kategori');
                if (editSelect) {
                    const prevVal = editSelect.value;
                    let opts = '';
                    categories.forEach(c => {
                        opts += `<option value="${c.id}" ${c.id == prevVal ? 'selected' : ''}>${escapeHtml(c.nama_kategori)}</option>`;
                    });
                    editSelect.innerHTML = opts;
                    if (prevVal) editSelect.value = prevVal;
                }

                // 3. Dropdown Filter Tabel
                const filterSelect = document.getElementById('filterKategori');
                if (filterSelect) {
                    const prevVal = filterSelect.value;
                    let opts = '<option value="">-- Semua Kategori --</option>';
                    categories.forEach(c => {
                        opts += `<option value="${c.id}" ${c.id == prevVal ? 'selected' : ''}>${escapeHtml(c.nama_kategori)}</option>`;
                    });
                    filterSelect.innerHTML = opts;
                    if (prevVal) filterSelect.value = prevVal;
                }
            }

            function renderKategoriList(categories) {
                if (badgeTotal) badgeTotal.textContent = `${categories.length} Kategori`;

                if (!categories || categories.length === 0) {
                    listEl.innerHTML = `
                        <li class="list-group-item text-center text-muted py-3 empty-kategori-msg">
                            <i class="bi bi-inbox d-block fs-3 mb-1 text-secondary opacity-50"></i>
                            Belum ada kategori. Tambahkan kategori baru di atas.
                        </li>
                    `;
                    return;
                }

                let html = '';
                categories.forEach(c => {
                    html += `
                        <li class="list-group-item d-flex justify-content-between align-items-center py-2 px-2 border-bottom item-kategori" data-id="${c.id}" data-nama="${escapeHtml(c.nama_kategori)}">
                            <div class="d-flex align-items-center text-truncate me-2">
                                <i class="bi bi-tag-fill text-primary me-2 fs-7 flex-shrink-0"></i>
                                <span class="fw-semibold text-dark text-truncate nama-kategori-text">${escapeHtml(c.nama_kategori)}</span>
                            </div>
                            <div class="btn-group btn-group-sm flex-shrink-0">
                                <button type="button" class="btn btn-sm btn-outline-secondary btn-edit-kategori py-0 px-2" data-id="${c.id}" data-nama="${escapeHtml(c.nama_kategori)}" title="Ubah Nama">
                                    <i class="bi bi-pencil fs-8"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-danger btn-delete-kategori py-0 px-2" data-id="${c.id}" data-nama="${escapeHtml(c.nama_kategori)}" title="Hapus Kategori">
                                    <i class="bi bi-trash fs-8"></i>
                                </button>
                            </div>
                        </li>
                    `;
                });
                listEl.innerHTML = html;

                if (searchInput && searchInput.value.trim()) {
                    searchInput.dispatchEvent(new Event('input'));
                }
            }

            async function loadKategoriData(selectedForTambah = null) {
                try {
                    const res = await fetch('{{ route('kategori-surat.index') }}', {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });
                    const json = await res.json();
                    if (json.success && Array.isArray(json.data)) {
                        renderKategoriList(json.data);
                        syncAllKategoriDropdowns(json.data, selectedForTambah);
                    }
                } catch (err) {
                    console.error('Gagal memuat kategori:', err);
                }
            }

            // Atur z-index stacking saat modal kelola kategori dibuka dari modal lain
            modalEl.addEventListener('show.bs.modal', function () {
                setTimeout(() => {
                    const backdrops = document.querySelectorAll('.modal-backdrop');
                    if (backdrops.length > 1) {
                        backdrops[backdrops.length - 1].style.zIndex = '1060';
                    }
                }, 10);
            });

            modalEl.addEventListener('hidden.bs.modal', function () {
                if (document.querySelector('.modal.show')) {
                    document.body.classList.add('modal-open');
                }
            });

            // Trigger buka modal kelola kategori dari button link di modal tambah / edit
            document.addEventListener('click', function(e) {
                const trigger = e.target.closest('.btn-buka-kelola-kategori');
                if (trigger) {
                    e.preventDefault();
                    bootstrap.Modal.getOrCreateInstance(modalEl).show();
                }
            });

            // Tambah Kategori Baru
            async function handleTambahKategori() {
                if (!inputBaru) return;
                const nama = inputBaru.value.trim();
                if (!nama) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Perhatian',
                        text: 'Silakan masukkan nama kategori terlebih dahulu.',
                        target: '#modalKelolaKategori'
                    });
                    inputBaru.focus();
                    return;
                }

                if (btnSimpan) {
                    btnSimpan.disabled = true;
                    btnSimpan.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...';
                }

                try {
                    const res = await fetch('{{ route('kategori-surat.store') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: JSON.stringify({ nama_kategori: nama })
                    });

                    const json = await res.json();
                    if (res.ok && json.success) {
                        inputBaru.value = '';
                        await loadKategoriData(json.data?.id);
                        Swal.fire({
                            toast: true,
                            position: 'top-end',
                            icon: 'success',
                            title: json.message || 'Kategori berhasil ditambahkan',
                            showConfirmButton: false,
                            timer: 2000,
                            target: '#modalKelolaKategori'
                        });
                    } else {
                        const errMsg = json.errors?.nama_kategori?.[0] || json.message || 'Gagal menambahkan kategori.';
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: errMsg,
                            target: '#modalKelolaKategori'
                        });
                    }
                } catch (err) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Terjadi kesalahan sistem saat menyimpan kategori.',
                        target: '#modalKelolaKategori'
                    });
                } finally {
                    if (btnSimpan) {
                        btnSimpan.disabled = false;
                        btnSimpan.innerHTML = '<i class="bi bi-plus-lg me-1"></i>Tambah';
                    }
                }
            }

            if (btnSimpan) {
                btnSimpan.addEventListener('click', handleTambahKategori);
            }

            if (inputBaru) {
                inputBaru.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        handleTambahKategori();
                    }
                });
            }

            // Edit & Hapus Kategori (Event Delegation)
            if (listEl) {
                listEl.addEventListener('click', async function(e) {
                    // Edit
                    const editBtn = e.target.closest('.btn-edit-kategori');
                    if (editBtn) {
                        e.preventDefault();
                        const id = editBtn.dataset.id;
                        const currentNama = editBtn.dataset.nama;

                        const { value: newNama } = await Swal.fire({
                            title: 'Ubah Nama Kategori',
                            input: 'text',
                            inputLabel: 'Nama Kategori',
                            inputValue: currentNama,
                            showCancelButton: true,
                            confirmButtonText: 'Simpan',
                            cancelButtonText: 'Batal',
                            confirmButtonColor: '#0d6efd',
                            target: '#modalKelolaKategori',
                            inputValidator: (val) => {
                                if (!val || !val.trim()) {
                                    return 'Nama kategori tidak boleh kosong!';
                                }
                            }
                        });

                        if (newNama && newNama.trim() !== currentNama) {
                            try {
                                const res = await fetch(`/kategori-surat/${id}`, {
                                    method: 'PUT',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'Accept': 'application/json',
                                        'X-CSRF-TOKEN': csrfToken,
                                        'X-Requested-With': 'XMLHttpRequest'
                                    },
                                    body: JSON.stringify({ nama_kategori: newNama.trim() })
                                });

                                const json = await res.json();
                                if (res.ok && json.success) {
                                    await loadKategoriData();
                                    Swal.fire({
                                        toast: true,
                                        position: 'top-end',
                                        icon: 'success',
                                        title: json.message || 'Kategori berhasil diperbarui',
                                        showConfirmButton: false,
                                        timer: 2000,
                                        target: '#modalKelolaKategori'
                                    });
                                } else {
                                    const errMsg = json.errors?.nama_kategori?.[0] || json.message || 'Gagal memperbarui kategori.';
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Gagal',
                                        text: errMsg,
                                        target: '#modalKelolaKategori'
                                    });
                                }
                            } catch (err) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'Terjadi kesalahan sistem saat memperbarui kategori.',
                                    target: '#modalKelolaKategori'
                                });
                            }
                        }
                        return;
                    }

                    // Hapus
                    const delBtn = e.target.closest('.btn-delete-kategori');
                    if (delBtn) {
                        e.preventDefault();
                        const id = delBtn.dataset.id;
                        const nama = delBtn.dataset.nama;

                        const confirmResult = await Swal.fire({
                            title: 'Hapus Kategori?',
                            html: `Apakah Anda yakin ingin menghapus kategori <strong>${escapeHtml(nama)}</strong>?<br><small class="text-muted">Kategori hanya dapat dihapus jika tidak digunakan oleh arsip surat.</small>`,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#dc3545',
                            cancelButtonColor: '#6c757d',
                            confirmButtonText: 'Ya, Hapus',
                            cancelButtonText: 'Batal',
                            target: '#modalKelolaKategori'
                        });

                        if (confirmResult.isConfirmed) {
                            try {
                                const res = await fetch(`/kategori-surat/${id}`, {
                                    method: 'DELETE',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'Accept': 'application/json',
                                        'X-CSRF-TOKEN': csrfToken,
                                        'X-Requested-With': 'XMLHttpRequest'
                                    }
                                });

                                const json = await res.json();
                                if (res.ok && json.success) {
                                    await loadKategoriData();
                                    Swal.fire({
                                        toast: true,
                                        position: 'top-end',
                                        icon: 'success',
                                        title: json.message || 'Kategori berhasil dihapus',
                                        showConfirmButton: false,
                                        timer: 2000,
                                        target: '#modalKelolaKategori'
                                    });
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Tidak Dapat Dihapus',
                                        text: json.message || 'Kategori masih digunakan oleh arsip surat.',
                                        target: '#modalKelolaKategori'
                                    });
                                }
                            } catch (err) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'Terjadi kesalahan saat menghapus kategori.',
                                    target: '#modalKelolaKategori'
                                });
                            }
                        }
                        return;
                    }
                });
            }

            // Pencarian live pada daftar kategori
            if (searchInput) {
                searchInput.addEventListener('input', function() {
                    const q = this.value.toLowerCase().trim();
                    const items = listEl.querySelectorAll('.item-kategori');
                    let matchCount = 0;
                    items.forEach(item => {
                        const nama = (item.dataset.nama || '').toLowerCase();
                        if (nama.includes(q)) {
                            item.style.removeProperty('display');
                            matchCount++;
                        } else {
                            item.style.setProperty('display', 'none', 'important');
                        }
                    });

                    let emptyMsg = listEl.querySelector('.empty-search-kategori');
                    if (matchCount === 0 && items.length > 0) {
                        if (!emptyMsg) {
                            emptyMsg = document.createElement('li');
                            emptyMsg.className = 'list-group-item text-center text-muted py-3 empty-search-kategori';
                            emptyMsg.innerHTML = '<i class="bi bi-search d-block fs-4 mb-1 text-secondary opacity-50"></i>Kategori tidak ditemukan.';
                            listEl.appendChild(emptyMsg);
                        }
                    } else if (emptyMsg) {
                        emptyMsg.remove();
                    }
                });
            }
        }

        // =======================================
        // INTERAKTIF UPLOAD DROPZONE MODAL TAMBAH SURAT
        // =======================================
        const inputTambahFile = document.getElementById('inputTambahFileSurat');
        const dropzoneTambah = document.getElementById('dropzoneTambahSurat');
        const defaultView = document.getElementById('dropzoneTambahDefault');
        const selectedView = document.getElementById('dropzoneTambahSelected');
        const fileNameEl = document.getElementById('tambahFileName');
        const fileSizeEl = document.getElementById('tambahFileSize');
        const btnHapusFile = document.getElementById('btnHapusFileTambah');

        function formatBytes(bytes, decimals = 1) {
            if (!bytes || bytes === 0) return '0 Bytes';
            const k = 1024;
            const dm = decimals < 0 ? 0 : decimals;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
        }

        function handleFileSelect(file) {
            if (!file) return;
            if (!file.name.toLowerCase().endsWith('.pdf')) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Format File Tidak Sesuai',
                        text: 'File dokumen harus berekstensi .pdf',
                    });
                } else {
                    alert('File dokumen harus berekstensi .pdf');
                }
                resetFileSelect();
                return;
            }
            if (file.size > 5 * 1024 * 1024) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Ukuran File Terlalu Besar',
                        text: 'Ukuran file dokumen maksimal 5 MB. Ukuran file Anda: ' + formatBytes(file.size),
                    });
                } else {
                    alert('Ukuran file dokumen maksimal 5 MB.');
                }
                resetFileSelect();
                return;
            }

            if (fileNameEl) fileNameEl.textContent = file.name;
            if (fileSizeEl) fileSizeEl.textContent = formatBytes(file.size);
            if (defaultView) defaultView.classList.add('d-none');
            if (selectedView) selectedView.classList.remove('d-none');
        }

        function resetFileSelect() {
            if (inputTambahFile) inputTambahFile.value = '';
            if (defaultView) defaultView.classList.remove('d-none');
            if (selectedView) selectedView.classList.add('d-none');
            if (fileNameEl) fileNameEl.textContent = '';
            if (fileSizeEl) fileSizeEl.textContent = '';
        }

        if (inputTambahFile) {
            inputTambahFile.addEventListener('change', function() {
                if (this.files && this.files[0]) {
                    handleFileSelect(this.files[0]);
                } else {
                    resetFileSelect();
                }
            });
        }

        if (btnHapusFile) {
            btnHapusFile.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                resetFileSelect();
                if (inputTambahFile) inputTambahFile.click();
            });
        }

        if (dropzoneTambah) {
            ['dragenter', 'dragover'].forEach(eventName => {
                dropzoneTambah.addEventListener(eventName, (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    dropzoneTambah.classList.add('dragover');
                }, false);
            });

            ['dragleave', 'drop'].forEach(eventName => {
                dropzoneTambah.addEventListener(eventName, (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    dropzoneTambah.classList.remove('dragover');
                }, false);
            });

            dropzoneTambah.addEventListener('drop', (e) => {
                const dt = e.dataTransfer;
                const files = dt ? dt.files : null;
                if (files && files.length > 0) {
                    if (inputTambahFile) {
                        inputTambahFile.files = files;
                        handleFileSelect(files[0]);
                    }
                }
            }, false);
        }

        const modalTambahSuratEl = document.getElementById('modalTambahSurat');
        if (modalTambahSuratEl) {
            modalTambahSuratEl.addEventListener('hidden.bs.modal', function() {
                resetFileSelect();
            });
        }

        // =======================================
        // INTERAKTIF UPLOAD DROPZONE MODAL EDIT SURAT
        // =======================================
        const inputEditFile = document.getElementById('inputEditFileSurat');
        const dropzoneEdit = document.getElementById('dropzoneEditSurat');
        const defaultEditView = document.getElementById('dropzoneEditDefault');
        const selectedEditView = document.getElementById('dropzoneEditSelected');
        const editFileNameEl = document.getElementById('editFileName');
        const editFileSizeEl = document.getElementById('editFileSize');
        const btnHapusFileEdit = document.getElementById('btnHapusFileEdit');

        function handleFileSelectEdit(file) {
            if (!file) return;
            if (!file.name.toLowerCase().endsWith('.pdf')) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Format File Tidak Sesuai',
                        text: 'File dokumen harus berekstensi .pdf',
                    });
                } else {
                    alert('File dokumen harus berekstensi .pdf');
                }
                resetFileSelectEdit();
                return;
            }
            if (file.size > 5 * 1024 * 1024) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Ukuran File Terlalu Besar',
                        text: 'Ukuran file dokumen maksimal 5 MB. Ukuran file Anda: ' + formatBytes(file.size),
                    });
                } else {
                    alert('Ukuran file dokumen maksimal 5 MB.');
                }
                resetFileSelectEdit();
                return;
            }

            if (editFileNameEl) editFileNameEl.textContent = file.name;
            if (editFileSizeEl) editFileSizeEl.textContent = formatBytes(file.size);
            if (defaultEditView) defaultEditView.classList.add('d-none');
            if (selectedEditView) selectedEditView.classList.remove('d-none');
        }

        function resetFileSelectEdit() {
            if (inputEditFile) inputEditFile.value = '';
            if (defaultEditView) defaultEditView.classList.remove('d-none');
            if (selectedEditView) selectedEditView.classList.add('d-none');
            if (editFileNameEl) editFileNameEl.textContent = '';
            if (editFileSizeEl) editFileSizeEl.textContent = '';
        }

        if (inputEditFile) {
            inputEditFile.addEventListener('change', function() {
                if (this.files && this.files[0]) {
                    handleFileSelectEdit(this.files[0]);
                } else {
                    resetFileSelectEdit();
                }
            });
        }

        if (btnHapusFileEdit) {
            btnHapusFileEdit.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                resetFileSelectEdit();
                if (inputEditFile) inputEditFile.click();
            });
        }

        if (dropzoneEdit) {
            ['dragenter', 'dragover'].forEach(eventName => {
                dropzoneEdit.addEventListener(eventName, (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    dropzoneEdit.classList.add('dragover');
                }, false);
            });

            ['dragleave', 'drop'].forEach(eventName => {
                dropzoneEdit.addEventListener(eventName, (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    dropzoneEdit.classList.remove('dragover');
                }, false);
            });

            dropzoneEdit.addEventListener('drop', (e) => {
                const dt = e.dataTransfer;
                const files = dt ? dt.files : null;
                if (files && files.length > 0) {
                    if (inputEditFile) {
                        inputEditFile.files = files;
                        handleFileSelectEdit(files[0]);
                    }
                }
            }, false);
        }

        const modalEditSuratEl = document.getElementById('modalEditSurat');
        if (modalEditSuratEl) {
            modalEditSuratEl.addEventListener('hidden.bs.modal', function() {
                resetFileSelectEdit();
                const editPresetPanel = document.getElementById('panel_edit_asal_tujuan');
                if (editPresetPanel) editPresetPanel.classList.add('d-none');
            });
        }

        initKelolaKategori();

        @if(session('open_modal'))
            const targetModalEl = document.getElementById("{{ session('open_modal') }}");
            if (targetModalEl) {
                const targetModal = bootstrap.Modal.getOrCreateInstance(targetModalEl);
                targetModal.show();
            }
        @endif
    });

</script>
@endpush