@extends('layout.appdas')

@section('title', 'Dashboard')

@section('content')
{{-- MASTER CARD: DASHBOARD PENGAWASAN & KINERJA --}}
<div class="card table-card mb-0 shadow-sm border-0 rounded-0 overflow-hidden">
    {{-- 1. HEADER DASHBOARD --}}
    <div class="card-header bg-white border-bottom py-3 px-4">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div>
                <h5 class="mb-1 fw-bold text-dark d-inline-flex align-items-center">
                    <i class="bi bi-speedometer2 text-primary me-2 fs-5 align-middle"></i>
                    <span>Dashboard Pengawasan</span>
                </h5>
                <p class="text-muted mb-0 small">
                    Ringkasan statistik kinerja persuratan dan pemantauan berkas disposisi aktif.
                </p>
            </div>

            <div class="d-flex gap-2 flex-wrap align-items-center">
                @if(auth()->user()->hasPermission('surat'))
                <a href="{{ route('surat.index') }}" class="btn btn-primary btn-sm px-3 shadow-sm rounded-2 fw-semibold">
                    <i class="bi bi-plus-lg me-1"></i> Buat Surat Baru
                </a>
                @endif
                @if(auth()->user()->hasPermission('daftar-disposisi'))
                <a href="{{ route('daftar-disposisi.index') }}" class="btn btn-outline-secondary btn-sm px-3 rounded-2 fw-semibold">
                    <i class="bi bi-inbox-fill me-1"></i> Kotak Disposisi
                </a>
                @endif
            </div>
        </div>
    </div>

    <div class="card-body p-4 d-flex flex-column">
        {{-- 2. GREETING & STATUS BANNER --}}
        <div class="alert alert-light border rounded-3 p-3 mb-4 d-flex justify-content-between align-items-center flex-wrap gap-3 dashboard-greeting-card">
            <div class="d-flex align-items-center gap-3">
                <div class="d-flex align-items-center justify-content-center bg-primary-subtle text-primary rounded-3 flex-shrink-0 shadow-none border border-primary-subtle" style="width: 46px; height: 46px; font-size: 1.35rem;">
                    @if(str_contains(strtolower($greeting), 'pagi'))
                        <i class="bi bi-sunrise-fill text-warning"></i>
                    @elseif(str_contains(strtolower($greeting), 'siang'))
                        <i class="bi bi-sun-fill text-warning"></i>
                    @elseif(str_contains(strtolower($greeting), 'sore'))
                        <i class="bi bi-sunset-fill text-warning-emphasis"></i>
                    @else
                        <i class="bi bi-moon-stars-fill text-primary"></i>
                    @endif
                </div>
                <div>
                    <div class="d-flex align-items-center gap-2 mb-1 flex-wrap">
                        <h6 class="fw-bold text-dark mb-0">
                            @if(auth()->user()->isAdmin())
                                {{ $greeting }}
                            @else
                                {{ $greeting }}, {{ auth()->user()->name }}
                            @endif
                        </h6>
                        @if(!auth()->user()->isAdmin())
                        <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2 py-0.5 rounded-pill fs-8">
                            <i class="bi bi-shield-check me-1"></i>{{ auth()->user()->role->nama_role }}
                        </span>
                        @endif
                        <span class="badge bg-light text-dark border px-2 py-0.5 rounded-pill fs-8">
                            <i class="bi bi-building me-1 text-secondary"></i>{{ auth()->user()->divisi->nama_divisi ?? 'Unit Kampus' }}
                        </span>
                    </div>
                    <small class="text-muted d-block">
                        @if(!auth()->user()->hasPermission('surat'))
                            <span class="text-secondary fw-semibold">
                                <i class="bi bi-lock-fill me-1 text-muted"></i>Akses berkas surat dinonaktifkan.
                            </span> Administrator belum mengaktifkan izin kelola surat untuk akun Anda.
                        @elseif($pendingDisposisi->count() > 0)
                            <span class="text-warning-emphasis fw-semibold">
                                <i class="bi bi-exclamation-circle-fill me-1 text-warning"></i>Ada {{ $pendingDisposisi->count() }} surat disposisi
                            </span> yang memerlukan respon atau tindakan dari unit Anda.
                        @else
                            <span class="text-success fw-semibold">
                                <i class="bi bi-check-circle-fill me-1 text-success"></i>Semua disposisi lancar.
                            </span> Tidak ada antrean surat pending yang mendesak saat ini.
                        @endif
                    </small>
                </div>
            </div>

            <div class="text-end text-muted small d-none d-md-block">
                <i class="bi bi-calendar3 me-1"></i>{{ \Carbon\Carbon::now()->translatedFormat('l, d F Y') }}
            </div>
        </div>

        {{-- 3. REKAP STATISTIK KPI CARDS --}}
        <div class="row g-3 mb-4 dashboard-kpi-row">
            {{-- Card 1: Total Berkas --}}
            <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 fw-semibold">Total Berkas Terdata</small>
                            <h3 class="fw-bold mb-0 text-dark">{{ $totalSurat }}</h3>
                        </div>
                        <div class="d-flex align-items-center justify-content-center bg-soft-primary text-primary rounded-3 flex-shrink-0" style="width: 44px; height: 44px; font-size: 1.25rem;">
                            <i class="bi bi-file-earmark-text-fill"></i>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Card 2: Surat Masuk --}}
            <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 fw-semibold">Surat Masuk</small>
                            <h3 class="fw-bold mb-0 text-success">{{ $suratMasuk }}</h3>
                        </div>
                        <div class="d-flex align-items-center justify-content-center bg-soft-success text-success rounded-3 flex-shrink-0" style="width: 44px; height: 44px; font-size: 1.25rem;">
                            <i class="bi bi-box-arrow-in-down"></i>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Card 3: Surat Keluar --}}
            <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 fw-semibold">Surat Keluar</small>
                            <h3 class="fw-bold mb-0 text-danger">{{ $suratKeluar }}</h3>
                        </div>
                        <div class="d-flex align-items-center justify-content-center bg-soft-danger text-danger rounded-3 flex-shrink-0" style="width: 44px; height: 44px; font-size: 1.25rem;">
                            <i class="bi bi-box-arrow-up"></i>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Card 4: Surat Internal --}}
            <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 fw-semibold">Dokumen Internal</small>
                            <h3 class="fw-bold mb-0 text-warning">{{ $suratInternal }}</h3>
                        </div>
                        <div class="d-flex align-items-center justify-content-center bg-soft-warning text-warning rounded-3 flex-shrink-0" style="width: 44px; height: 44px; font-size: 1.25rem;">
                            <i class="bi bi-building"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- 4. SPLIT LAYOUT 2-KOLOM (8:4) --}}
        <div class="row g-4 dashboard-content-row">
            {{-- KOLOM UTAMA KIRI: ARSIP SURAT TERBARU (8/12) --}}
            <div class="col-lg-8 dashboard-surat-col">
                <div class="border rounded-3 p-3 bg-white h-100 d-flex flex-column dashboard-card dashboard-surat-card">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3 pb-2 border-bottom">
                        <div>
                            <h6 class="fw-bold text-dark mb-0 d-flex align-items-center">
                                <i class="bi bi-clock-history text-primary me-2"></i>
                                <span>Arsip Surat Terbaru</span>
                            </h6>
                            <small class="text-muted">Menampilkan arsip surat termutakhir di unit Anda</small>
                        </div>
                        @if(auth()->user()->hasPermission('surat'))
                        <a href="{{ route('surat.index') }}" class="btn btn-sm btn-light border px-2.5 py-1 text-secondary fw-semibold">
                            Kelola Semua <i class="bi bi-arrow-right ms-1"></i>
                        </a>
                        @endif
                    </div>

                    {{-- SMART FILTER & PENCARIAN TERPADU --}}
                    <div class="bg-light p-2.5 rounded-3 border mb-3">
                        <div class="row g-2 align-items-center">
                            {{-- Field Pencarian Keyword --}}
                            <div class="col-12 col-md-5">
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text bg-white border-end-0 text-muted ps-2.5 pe-2">
                                        <i class="bi bi-search"></i>
                                    </span>
                                    <input type="text" id="keyword_search" class="form-control form-control-sm border-start-0 ps-1 bg-white" placeholder="Cari nomor atau perihal surat...">
                                </div>
                            </div>

                            {{-- Dropdown Kategori --}}
                            <div class="col-6 col-md-3">
                                <select id="kategori_id" class="form-select form-select-sm bg-white">
                                    <option value="">Semua Kategori</option>
                                    @foreach ($kategoriSurat as $kategori)
                                    <option value="{{ $kategori->id }}">{{ $kategori->nama_kategori }}</option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- Dropdown Jenis Surat --}}
                            <div class="col-6 col-md-3">
                                <select id="jenis_surat_id" class="form-select form-select-sm bg-white">
                                    <option value="">Semua Jenis</option>
                                    @foreach ($jenisSurat as $jenis)
                                    <option value="{{ $jenis->id }}">{{ $jenis->nama_jenis }}</option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- Tombol Reset Filter --}}
                            <div class="col-12 col-md-1">
                                <button type="button" id="resetFilter" class="btn btn-sm btn-white border w-100 d-flex align-items-center justify-content-center bg-white text-secondary hover-bg-light" title="Reset Filter Pencarian">
                                    <i class="bi bi-arrow-counterclockwise"></i>
                                    <span class="d-md-none ms-1.5 small fw-medium">Reset</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    {{-- TABEL DATA SURAT --}}
                    <div class="table-responsive flex-grow-1">
                        <table class="table align-middle mb-0 text-nowrap">
                            <thead class="table-light text-uppercase fs-7 text-secondary">
                                <tr>
                                    <th style="width: 5%;" class="ps-3 text-center">No</th>
                                    <th style="width: 20%;">Nomor Surat</th>
                                    <th>Perihal Dokumen</th>
                                    <th style="width: 14%;">Jenis Surat</th>
                                    <th style="width: 16%;">Unit Pembuat</th>
                                    <th style="width: 14%;">Tanggal</th>
                                    <th style="width: 10%;" class="text-center pe-3">Aksi</th>
                                </tr>
                            </thead>
                            <tbody id="suratTable">
                                @forelse ($suratTerbaru as $index => $item)
                                <tr>
                                    <td class="ps-3 text-center text-muted">{{ $index + $suratTerbaru->firstItem() }}</td>
                                    <td class="fw-semibold text-dark">{{ $item->nomor_surat }}</td>
                                    <td>
                                        <div class="text-truncate" style="max-width: 200px;" title="{{ $item->perihal }}">
                                            {{ $item->perihal }}
                                        </div>
                                    </td>
                                    <td>
                                        @php
                                            $rawJenis = strtolower($item->jenisSurat->nama_jenis ?? '');
                                            $hasDisposisi = ($item->penerima_count ?? 0) > 0 || ($item->penerima && $item->penerima->where('is_cancelled', false)->isNotEmpty());

                                            if ($item->divisi_id != auth()->user()->divisi_id) {
                                                $namaJenis = 'Masuk';
                                            } elseif ($hasDisposisi || str_contains($rawJenis, 'keluar')) {
                                                $namaJenis = 'Keluar';
                                            } elseif (str_contains($rawJenis, 'masuk')) {
                                                $namaJenis = 'Masuk';
                                            } else {
                                                $namaJenis = 'Internal';
                                            }
                                        @endphp

                                        @if($namaJenis === 'Masuk')
                                            <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>
                                        @elseif($namaJenis === 'Keluar')
                                            <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>
                                        @elseif($namaJenis === 'Internal')
                                            <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
                                            <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle rounded-pill px-2.5 py-1">
                                                {{ $namaJenis }}
                                            </span>
                                        @endif
                                    </td>

                                    <td>
                                        <span class="badge bg-light text-dark border px-2 py-1 fs-7 text-truncate" style="max-width: 120px;" title="{{ $item->divisi->nama_divisi ?? '-' }}">
                                            {{ $item->divisi->nama_divisi ?? '-' }}
                                        </span>
                                    </td>

                                    <td>
                                        <small class="text-muted">
                                            {{ \Carbon\Carbon::parse($item->tanggal_surat)->translatedFormat('d M Y') }}
                                        </small>
                                    </td>

                                    <td class="text-center pe-3">
                                        <div class="btn-action-group justify-content-center">
                                            <a href="{{ route('surat.view', $item->id) }}" target="_blank" class="btn btn-sm btn-icon btn-outline-secondary" title="Lihat Berkas">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            <a href="{{ route('surat.download', $item->id) }}" class="btn btn-sm btn-icon btn-outline-primary btn-download-action" title="Unduh Berkas">
                                                <i class="bi bi-download"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="7" 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-3">
                                            <i class="bi bi-envelope-open fs-2 mb-2 text-muted"></i>
                                            <span class="fw-medium">Tidak ada data berkas surat yang tersedia.</span>
                                            @if(!auth()->user()->hasPermission('surat'))
                                                <small class="text-muted mt-1">Akses menu kelola surat dinonaktifkan oleh Administrator.</small>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

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

            {{-- KOLOM WIDGET KANAN: DISPOSISI PERLU TINDAKAN & DISTRIBUSI ARSIP (4/12) --}}
            <div class="col-lg-4 d-flex flex-column gap-3 dashboard-widget-col">
                {{-- WIDGET 1: DISPOSISI MENUNGGU TINDAKAN --}}
                <div class="border rounded-3 p-3 bg-white dashboard-card dashboard-disposisi-card">
                    <div class="d-flex justify-content-between align-items-center pb-2 mb-2.5 border-bottom">
                        <h6 class="fw-bold text-dark mb-0 d-flex align-items-center">
                            <i class="bi bi-bell-fill text-warning me-2"></i>
                            <span>Disposisi Perlu Tindakan</span>
                        </h6>
                        <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill px-2 py-0.5 fs-8">
                            {{ $pendingDisposisi->count() }} Menunggu
                        </span>
                    </div>

                    @if($pendingDisposisi->isEmpty())
                        <div class="text-center py-3 text-muted">
                            <i class="bi bi-check-circle-fill text-success fs-3 mb-1.5 d-block"></i>
                            <span class="fw-semibold text-dark d-block small">Semua Surat Beres!</span>
                            <small class="text-muted fs-8">Tidak ada antrean surat pending saat ini.</small>
                        </div>
                    @else
                        <div class="d-flex flex-column gap-2 mb-2.5">
                            @foreach($pendingDisposisi as $dispo)
                            <div class="p-2 rounded-2 border bg-light">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    @php
                                        $unitPengirim = $dispo->surat->divisi->nama_divisi ?? 'Unit Pengirim';
                                        $perihalText = $dispo->surat->perihal ?? ($dispo->surat->nomor_surat ?? 'Disposisi Surat Masuk');
                                    @endphp
                                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle fs-8 text-truncate" style="max-width: 140px;" title="{{ $unitPengirim }}">
                                        <i class="bi bi-send me-1"></i>{{ $unitPengirim }}
                                    </span>
                                    <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle fs-8 rounded-pill">
                                        Pending
                                    </span>
                                </div>
                                <h6 class="fw-semibold text-dark mb-1 fs-7 text-truncate" title="{{ $perihalText }}">
                                    {{ $perihalText }}
                                </h6>
                                <div class="d-flex justify-content-between align-items-center mt-1.5 pt-1.5 border-top border-light-subtle">
                                    <small class="text-muted fs-8">
                                        <i class="bi bi-clock me-1"></i>{{ $dispo->created_at ? $dispo->created_at->diffForHumans() : 'Baru saja' }}
                                    </small>
                                    <a href="{{ route('daftar-disposisi.index') }}" class="btn btn-xs btn-primary px-2 py-0.5 fs-8 rounded-1 fw-semibold">
                                        Tindak Lanjuti <i class="bi bi-arrow-right ms-0.5"></i>
                                    </a>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @endif

                    @if(auth()->user()->hasPermission('daftar-disposisi'))
                    <a href="{{ route('daftar-disposisi.index') }}" class="btn btn-sm btn-outline-primary w-100 fw-semibold rounded-2 py-1">
                        Buka Seluruh Disposisi <i class="bi bi-chevron-right ms-1"></i>
                    </a>
                    @endif
                </div>

                {{-- WIDGET 2: RINGKASAN DISTRIBUSI ARSIP DOKUMEN --}}
                <div class="border rounded-3 p-3 bg-white dashboard-card dashboard-distribusi-card">
                    <h6 class="fw-bold text-dark mb-3 pb-2 border-bottom d-flex align-items-center">
                        <i class="bi bi-pie-chart-fill text-info me-2"></i>
                        <span>Distribusi Berkas Divisi</span>
                    </h6>

                    {{-- Multi-Segment Stacked Progress Bar --}}
                    <div class="progress mb-3" style="height: 8px; border-radius: 4px;">
                        <div class="progress-bar bg-success" role="progressbar" style="width: {{ $persenMasuk }}%" title="Masuk: {{ $persenMasuk }}%"></div>
                        <div class="progress-bar bg-danger" role="progressbar" style="width: {{ $persenKeluar }}%" title="Keluar: {{ $persenKeluar }}%"></div>
                        <div class="progress-bar bg-warning" role="progressbar" style="width: {{ $persenInternal }}%" title="Internal: {{ $persenInternal }}%"></div>
                    </div>

                    {{-- Legend List --}}
                    <div class="d-flex flex-column gap-2">
                        <div class="d-flex justify-content-between align-items-center p-2 rounded-2 bg-light border">
                            <div class="d-flex align-items-center gap-2">
                                <span class="rounded-circle d-inline-block bg-success" style="width: 8px; height: 8px;"></span>
                                <span class="small fw-semibold text-dark">Surat Masuk</span>
                            </div>
                            <div class="text-end">
                                <span class="fw-bold text-success fs-7">{{ $suratMasuk }}</span>
                                <small class="text-muted ms-1">({{ $persenMasuk }}%)</small>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center p-2 rounded-2 bg-light border">
                            <div class="d-flex align-items-center gap-2">
                                <span class="rounded-circle d-inline-block bg-danger" style="width: 8px; height: 8px;"></span>
                                <span class="small fw-semibold text-dark">Surat Keluar</span>
                            </div>
                            <div class="text-end">
                                <span class="fw-bold text-danger fs-7">{{ $suratKeluar }}</span>
                                <small class="text-muted ms-1">({{ $persenKeluar }}%)</small>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center p-2 rounded-2 bg-light border">
                            <div class="d-flex align-items-center gap-2">
                                <span class="rounded-circle d-inline-block bg-warning" style="width: 8px; height: 8px;"></span>
                                <span class="small fw-semibold text-dark">Dokumen Internal</span>
                            </div>
                            <div class="text-end">
                                <span class="fw-bold text-warning-emphasis fs-7">{{ $suratInternal }}</span>
                                <small class="text-muted ms-1">({{ $persenInternal }}%)</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const keywordInput = document.getElementById('keyword_search');
        const kategoriSelect = document.getElementById('kategori_id');
        const jenisSuratSelect = document.getElementById('jenis_surat_id');
        const tableBody = document.getElementById('suratTable');

        function fetchData(page = 1) {
            let params = new URLSearchParams({
                perihal: keywordInput.value,
                nomor_surat: keywordInput.value,
                kategori_id: kategoriSelect.value,
                jenis_surat_id: jenisSuratSelect.value,
                page: page
            });

            tableBody.innerHTML = `
                <tr>
                    <td colspan="7" class="text-center py-4 align-middle">
                        <div class="d-flex align-items-center justify-content-center">
                            <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
                            <span class="ms-2 text-muted small">Memuat berkas terbaru...</span>
                        </div>
                    </td>
                </tr>
            `;

            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;
            }

            fetch(`{{ route('dashboard.search') }}?${params.toString()}`)
                .then(response => response.json())
                .then(data => {
                    let html = '';
                    let items = Array.isArray(data) ? data : (data.data ? data.data : []);

                    if (items.length === 0) {
                        html = `
                            <tr>
                                <td colspan="7" 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-search-heart fs-3 mb-2 text-muted"></i>
                                        <span class="fw-medium">Tidak ditemukan arsip surat yang cocok dengan kata kunci Anda.</span>
                                    </div>
                                </td>
                            </tr>
                        `;
                    } else {
                        items.forEach((item, index) => {
                            let displayJenis = item.display_jenis_surat || (item.jenis_surat ? item.jenis_surat.nama_jenis : '-');
                            let jenisBadge = '';
                            if (displayJenis === 'Masuk') {
                                jenisBadge = `<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 (displayJenis === 'Keluar') {
                                jenisBadge = `<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 (displayJenis === 'Internal') {
                                jenisBadge = `<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 {
                                jenisBadge = `<span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle rounded-pill px-2.5 py-1">${displayJenis}</span>`;
                            }

                            html += `
                                <tr>
                                    <td class="ps-3 text-center text-muted">${data.from + index}</td>
                                    <td class="fw-semibold text-dark">${item.nomor_surat}</td>
                                    <td>
                                        <div class="text-truncate" style="max-width: 200px;" title="${item.perihal}">
                                            ${item.perihal}
                                        </div>
                                    </td>
                                    <td>
                                        ${jenisBadge}
                                    </td>
                                    <td>
                                        <span class="badge bg-light text-dark border px-2 py-1 fs-7 text-truncate" style="max-width: 120px;" title="${item.divisi ? item.divisi.nama_divisi : '-'}">
                                            ${item.divisi ? item.divisi.nama_divisi : '-'}
                                        </span>
                                    </td>
                                    <td class="text-muted"><small class="fw-medium">${formatTanggalIndo(item.tanggal_surat)}</small></td>
                                    <td class="text-center pe-3">
                                        <div class="btn-action-group justify-content-center">
                                            <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 btn-download-action" title="Unduh Berkas">
                                                <i class="bi bi-download"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            `;
                        });
                    }
                    tableBody.innerHTML = html;
                    renderPagination(data);
                    registerDynamicEvents();
                })
                .catch(error => {
                    console.error('Error fetching search data:', error);
                    tableBody.innerHTML = `
                        <tr>
                            <td colspan="7" 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-octagon fs-3 mb-2"></i>
                                    <span>Gagal memuat arsip data surat.</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 border-0 mt-0 pt-0 w-100">
                        <div class="pagination-info text-muted small">
                            Menampilkan <strong>${from}</strong> - <strong>${to}</strong> dari <strong>${total}</strong> Arsip
                        </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();
                    fetchData(this.dataset.page);
                });
            });
        }

        function debounce(func, delay) {
            let timer;
            return function() {
                const ctx = this;
                const args = arguments;
                clearTimeout(timer);
                timer = setTimeout(() => func.apply(ctx, args), delay);
            };
        }

        keywordInput.addEventListener('input', debounce(fetchData, 400));
        kategoriSelect.addEventListener('change', fetchData);
        jenisSuratSelect.addEventListener('change', fetchData);

        document.getElementById('resetFilter').addEventListener('click', function() {
            keywordInput.value = '';
            kategoriSelect.value = '';
            jenisSuratSelect.value = '';
            fetchData();
        });

        function registerDynamicEvents() {
            document.querySelectorAll('.btn-download-action').forEach(btn => {
                btn.addEventListener('click', function() {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'info',
                        title: 'Permintaan unduhan diproses...',
                        showConfirmButton: false,
                        timer: 2000,
                        timerProgressBar: true
                    });
                });
            });
        }

        registerDynamicEvents();
    });
</script>
@endpush