@extends('layout.appdas')

@section('title', 'Laporan Rekapitulasi Surat')
@section('content')

<style>
.stat-hover-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-hover-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.btn-preset-period {
    width: auto !important;
    height: auto !important;
    min-height: 28px !important;
    padding: 0.28rem 0.75rem !important;
    font-size: 0.76rem !important;
    border-radius: 50rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-weight: 500 !important;
}
@media (max-width: 767.98px) {
    .laporan-header-icon {
        width: 38px !important;
        height: 38px !important;
    }
}
.table tbody tr.empty-state-row:hover,
.table tbody tr.empty-state-row:hover > * {
    background-color: transparent !important;
    background: transparent !important;
    cursor: default !important;
    box-shadow: none !important;
}
</style>

{{-- MASTER CARD: LAPORAN REKAPITULASI SURAT & DISPOSISI --}}
<div class="card table-card mb-0 shadow-sm border-0 rounded-0 overflow-hidden">
    {{-- Header Laporan --}}
    <div class="card-header bg-white border-bottom py-3 px-3 px-md-4">
        <div class="d-flex justify-content-between align-items-start align-items-md-center flex-column flex-md-row gap-2.5 gap-md-3">
            <div class="d-flex align-items-center gap-2.5 gap-md-3">
                <div class="rounded-3 bg-primary bg-opacity-10 text-primary p-2 p-md-2.5 d-flex align-items-center justify-content-center shadow-xs flex-shrink-0 align-self-start align-self-md-center laporan-header-icon" style="width: 42px; height: 42px;">
                    <i class="bi bi-journal-text fs-5"></i>
                </div>
                <div>
                    <h5 class="mb-0.5 fw-bold text-dark fs-6 fs-md-5">Laporan Rekapitulasi Surat & Disposisi</h5>
                    <small class="text-muted d-block" style="font-size: 0.78rem; line-height: 1.35;">Saring, tampilkan, dan ekspor data arsip persuratan digital kampus secara lengkap dan profesional.</small>
                </div>
            </div>

            <div class="w-100 w-md-auto d-flex align-items-center gap-2 mt-1 mt-md-0">
                <a href="{{ route('laporan.print', request()->query()) }}" target="_blank" class="btn btn-outline-primary btn-sm rounded-pill px-2.5 px-md-3 py-1.5 fw-semibold d-inline-flex align-items-center justify-content-center shadow-xs flex-fill flex-md-grow-0 text-center" style="font-size: 0.82rem;" title="Buka format cetak resmi / PDF">
                    <i class="bi bi-printer me-1.5"></i> <span>Cetak / PDF</span>
                </a>
                <button type="submit" form="filterForm" formaction="{{ route('laporan.export', request()->query()) }}" formmethod="GET" class="btn btn-success btn-sm rounded-pill px-2.5 px-md-3 py-1.5 fw-semibold d-inline-flex align-items-center justify-content-center shadow-xs flex-fill flex-md-grow-0 text-center text-nowrap" style="font-size: 0.82rem;" title="Ekspor data ke format spreadsheet Excel">
                    <i class="bi bi-file-earmark-excel me-1.5"></i> <span><span class="d-none d-sm-inline">Download </span>Excel<span class="d-none d-sm-inline"> (.xlsx)</span></span>
                </button>
            </div>
        </div>
    </div>

    <div class="card-body p-3 p-md-4 d-flex flex-column">
        {{-- REKAP STATISTIK GLOBAL --}}
        <div class="row g-2 g-md-3 mb-3 mb-md-4">
            <div class="col-12 col-sm-4 col-lg">
                <div class="border rounded-3 p-2.5 p-sm-3 h-100 bg-light shadow-2xs stat-hover-card">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block mb-1 fw-semibold text-truncate">Total Berkas</small>
                            <h3 class="fw-bold mb-0 text-dark fs-4 fs-md-3">{{ $totalSurat }}</h3>
                        </div>
                        <div class="stat-icon bg-soft-primary p-2 rounded-3 text-primary flex-shrink-0">
                            <i class="bi bi-file-earmark-text-fill fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-6 col-sm-4 col-lg">
                <div class="border rounded-3 p-2.5 p-sm-3 h-100 bg-light shadow-2xs stat-hover-card">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block mb-1 fw-semibold text-truncate">Surat Masuk</small>
                            <h3 class="fw-bold mb-0 text-success fs-4 fs-md-3">{{ $totalMasuk }}</h3>
                        </div>
                        <div class="stat-icon bg-soft-success p-2 rounded-3 text-success flex-shrink-0">
                            <i class="bi bi-box-arrow-in-down fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-6 col-sm-4 col-lg">
                <div class="border rounded-3 p-2.5 p-sm-3 h-100 bg-light shadow-2xs stat-hover-card">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block mb-1 fw-semibold text-truncate">Surat Keluar</small>
                            <h3 class="fw-bold mb-0 text-danger fs-4 fs-md-3">{{ $totalKeluar }}</h3>
                        </div>
                        <div class="stat-icon bg-soft-danger p-2 rounded-3 text-danger flex-shrink-0">
                            <i class="bi bi-box-arrow-up fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-6 col-sm-6 col-lg">
                <div class="border rounded-3 p-2.5 p-sm-3 h-100 bg-light shadow-2xs stat-hover-card">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block mb-1 fw-semibold text-truncate">Surat Internal</small>
                            <h3 class="fw-bold mb-0 text-warning fs-4 fs-md-3">{{ $totalInternal }}</h3>
                        </div>
                        <div class="stat-icon bg-soft-warning p-2 rounded-3 text-warning flex-shrink-0">
                            <i class="bi bi-building fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-6 col-sm-6 col-lg">
                <div class="border rounded-3 p-2.5 p-sm-3 h-100 bg-light shadow-2xs stat-hover-card">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block mb-1 fw-semibold text-truncate">Terdisposisi</small>
                            <h3 class="fw-bold mb-0 text-info fs-4 fs-md-3">{{ $totalDisposisi }}</h3>
                        </div>
                        <div class="stat-icon bg-soft-info p-2 rounded-3 text-info flex-shrink-0">
                            <i class="bi bi-send-check fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- FORM FILTER TERPADU --}}
        <div class="bg-light p-2.5 p-md-3 rounded-3 border mb-3 mb-md-4">
            <form action="{{ route('laporan.index') }}" method="GET" id="filterForm">
                {{-- Quick Period Presets --}}
                <div class="mb-2.5 pb-2 border-bottom">
                    <div class="d-flex align-items-center justify-content-between mb-1.5">
                        <span class="small fw-semibold text-muted d-inline-flex align-items-center">
                            <i class="bi bi-lightning-charge-fill me-1 text-warning"></i> Periode Cepat:
                        </span>
                    </div>
                    <div class="d-flex align-items-center gap-1.5 overflow-x-auto text-nowrap pb-1" style="-webkit-overflow-scrolling: touch; scrollbar-width: none;">
                        <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill btn-preset-period" data-period="today">Hari Ini</button>
                        <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill btn-preset-period" data-period="this_week">Minggu Ini</button>
                        <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill btn-preset-period" data-period="this_month">Bulan Ini</button>
                        <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill btn-preset-period" data-period="last_month">Bulan Lalu</button>
                        <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill btn-preset-period" data-period="this_year">Tahun Ini</button>
                    </div>
                </div>

                <div class="row g-2 align-items-end">
                    <div class="col-6 col-md-2">
                        <label class="form-label fw-semibold text-secondary small mb-1">Tanggal Awal</label>
                        <input type="date" name="tanggal_awal" id="inputTanggalAwal" class="form-control form-control-sm" value="{{ request('tanggal_awal') }}">
                    </div>
                    <div class="col-6 col-md-2">
                        <label class="form-label fw-semibold text-secondary small mb-1">Tanggal Akhir</label>
                        <input type="date" name="tanggal_akhir" id="inputTanggalAkhir" class="form-control form-control-sm" value="{{ request('tanggal_akhir') }}">
                    </div>
                    <div class="col-12 col-md-2">
                        <label class="form-label fw-semibold text-secondary small mb-1">Jenis Surat</label>
                        <select name="jenis_surat_id" class="form-select form-select-sm">
                            <option value="">Semua Jenis</option>
                            @foreach($jenisSurat as $jenis)
                            <option value="{{ $jenis->id }}" {{ request('jenis_surat_id') == $jenis->id ? 'selected' : '' }}>
                                {{ $jenis->nama_jenis }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-md-2">
                        <label class="form-label fw-semibold text-secondary small mb-1">Kategori Surat</label>
                        <select name="kategori_id" class="form-select form-select-sm">
                            <option value="">Semua Kategori</option>
                            @foreach($kategoriSurat as $kat)
                            <option value="{{ $kat->id }}" {{ request('kategori_id') == $kat->id ? 'selected' : '' }}>
                                {{ $kat->nama_kategori }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-md-2">
                        <label class="form-label fw-semibold text-secondary small mb-1">Status Disposisi</label>
                        <select name="status" class="form-select form-select-sm">
                            <option value="">Semua Status</option>
                            <option value="diterima" {{ strtolower(request('status'))=='diterima'?'selected':'' }}>Diterima</option>
                            <option value="diterima_sebagian" {{ strtolower(request('status'))=='diterima_sebagian'?'selected':'' }}>Diterima Sebagian</option>
                            <option value="terkirim" {{ strtolower(request('status'))=='terkirim'?'selected':'' }}>Terkirim</option>
                            <option value="pending" {{ strtolower(request('status'))=='pending'?'selected':'' }}>Pending</option>
                            <option value="diproses" {{ strtolower(request('status'))=='diproses'?'selected':'' }}>Diproses</option>
                            <option value="ditolak" {{ strtolower(request('status'))=='ditolak'?'selected':'' }}>Ditolak</option>
                        </select>
                    </div>
                    <div class="col-12 col-md-2">
                        <label class="form-label fw-semibold text-secondary small mb-1">Unit / Divisi</label>
                        <select name="divisi_id" class="form-select form-select-sm">
                            <option value="">Semua Unit</option>
                            @foreach($divisi as $d)
                            <option value="{{ $d->id }}" {{ request('divisi_id')==$d->id?'selected':'' }}>
                                {{ $d->nama_divisi }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="d-flex align-items-center justify-content-between gap-2 mt-3 pt-2 border-top flex-wrap">
                    <div class="text-muted small">
                        @if(request()->anyFilled(['tanggal_awal', 'tanggal_akhir', 'jenis_surat_id', 'kategori_id', 'status', 'divisi_id']))
                            <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2 py-1">
                                <i class="bi bi-funnel me-1"></i>Filter Aktif Diterapkan
                            </span>
                        @endif
                    </div>
                    <div class="d-flex gap-2 w-100 w-md-auto justify-content-end">
                        <a href="{{ route('laporan.index') }}" class="btn btn-sm btn-reset-custom px-3 flex-fill flex-md-grow-0 d-inline-flex align-items-center justify-content-center" id="btnReset" title="Reset Filter">
                            <i class="bi bi-arrow-counterclockwise me-1"></i> <span>Reset Filter</span>
                        </a>
                        <button type="submit" class="btn btn-sm btn-primary px-3 fw-semibold rounded-2 flex-fill flex-md-grow-0 d-inline-flex align-items-center justify-content-center">
                            <i class="bi bi-funnel-fill me-1"></i> <span>Terapkan Filter</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>

        {{-- TABEL DATA REKAPITULASI --}}
        <div class="table-responsive" style="overflow-x: auto; overflow-y: visible !important;">
            <table class="table table-hover align-middle mb-0 text-nowrap">
                <thead class="table-light text-uppercase fs-7 text-secondary">
                    <tr>
                        <th class="text-center py-2 ps-3" style="width: 3%">No</th>
                        <th style="width: 13%">Nomor Surat</th>
                        <th>Perihal / Judul Dokumen</th>
                        <th style="width: 8%">Kategori</th>
                        <th style="width: 6%">Jenis</th>
                        <th style="width: 10%">Unit Asal</th>
                        <th style="width: 20%">Tujuan & Disposisi</th>
                        <th style="width: 10%">Tanggal</th>
                        <th class="text-center" style="width: 9%">Status</th>
                        <th class="text-center pe-3" style="width: 6%">Aksi</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($laporan as $index => $item)
                    <tr>
                        <td class="text-center ps-3 text-muted">
                            {{ $laporan->firstItem() + $index }}
                        </td>

                        <td class="fw-semibold text-dark">
                            {{ $item->nomor_surat }}
                        </td>

                        <td>
                            <div class="text-truncate" style="max-width:220px;" title="{{ $item->perihal }}">
                                {{ $item->perihal }}
                            </div>
                        </td>

                        <td>
                            <span class="badge bg-secondary-subtle text-secondary-emphasis border border-secondary-subtle rounded-pill px-2 py-0.5 fs-8">
                                <i class="bi bi-tag me-1"></i>{{ $item->kategori->nama_kategori ?? '-' }}
                            </span>
                        </td>

                        <td>
                            @if($item->display_jenis === '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($item->display_jenis === '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($item->display_jenis === '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">
                                    {{ $item->display_jenis }}
                                </span>
                            @endif
                        </td>

                        <td>
                            @if($item->display_unit_asal === 'Pihak Eksternal')
                                <span class="badge bg-secondary-subtle text-secondary-emphasis border border-secondary-subtle px-2 py-1 fs-7" title="Berasal dari pihak eksternal / instansi luar">
                                    <i class="bi bi-building me-1"></i>Pihak Eksternal
                                </span>
                            @else
                                <span class="badge bg-light text-dark border px-2 py-1 fs-7 text-truncate" style="max-width: 120px;" title="{{ $item->display_unit_asal }}">
                                    {{ $item->display_unit_asal }}
                                </span>
                            @endif
                        </td>

                        <td>
                            @if($item->display_jenis === 'Masuk')
                                <span class="badge bg-light text-dark border px-2 py-1 fs-7 text-truncate" style="max-width: 160px;" title="{{ $item->display_unit_tujuan }}">
                                    <i class="bi bi-building text-secondary me-1"></i>{{ $item->display_unit_tujuan }}
                                </span>
                            @elseif(isset($item->disposisi_list) && $item->disposisi_list->isNotEmpty())
                                <div class="d-flex flex-wrap gap-1 align-items-center">
                                    @foreach($item->disposisi_list as $dispItem)
                                        @php
                                            $st = strtolower($dispItem['status'] ?? 'pending');
                                            $isUnitTerima = in_array($st, ['diterima', 'selesai']);
                                            $isUnitTolak = ($st === 'ditolak');
                                            $unitBadgeClass = $isUnitTerima ? 'badge bg-success-subtle text-success border border-success-subtle' : ($isUnitTolak ? 'badge bg-danger-subtle text-danger border border-danger-subtle' : 'badge bg-secondary-subtle text-secondary border border-secondary-subtle');
                                        @endphp
                                        <span class="badge bg-light text-dark border px-2 py-1 fs-7 d-inline-flex align-items-center gap-1" title="{{ !empty($dispItem['catatan']) ? ('Catatan: ' . $dispItem['catatan']) : '' }}">
                                            <i class="bi bi-building text-secondary"></i>
                                            <span class="text-truncate" style="max-width: 140px;">{{ $dispItem['unit'] }}</span>
                                            <span class="{{ $unitBadgeClass }} rounded-pill ms-0.5" style="font-size: 0.65rem; padding: 2px 6px;">
                                                {{ $dispItem['status'] }}
                                            </span>
                                        </span>
                                    @endforeach
                                </div>
                            @elseif(isset($item->disposisi_units) && $item->disposisi_units->isNotEmpty())
                                <div class="d-flex flex-wrap gap-1 align-items-center">
                                    @foreach($item->disposisi_units as $unitName)
                                        <span class="badge bg-light text-dark border px-2 py-1 fs-7 text-truncate" style="max-width: 160px;" title="{{ $unitName }}">
                                            <i class="bi bi-building text-secondary me-1"></i>{{ $unitName }}
                                        </span>
                                    @endforeach
                                </div>
                            @elseif($item->display_unit_tujuan === 'Pihak Eksternal')
                                <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2 py-1 fs-7" title="Ditujukan ke pihak eksternal / luar kampus">
                                    <i class="bi bi-building-up me-1"></i>Pihak Eksternal
                                </span>
                            @else
                                <span class="badge bg-light text-dark border px-2 py-1 fs-7 text-truncate" style="max-width: 160px;" title="{{ $item->display_unit_tujuan }}">
                                    <i class="bi bi-building text-secondary me-1"></i>{{ $item->display_unit_tujuan }}
                                </span>
                            @endif
                        </td>

                        <td>
                            <div class="d-flex flex-column">
                                <span class="small fw-semibold text-dark" title="Tanggal Surat">
                                    <i class="bi bi-calendar-event me-1 text-primary"></i>{{ \Carbon\Carbon::parse($item->tanggal_surat)->translatedFormat('d M Y') }}
                                </span>
                                @if($item->tanggal_terima)
                                <span class="fs-8 text-muted" title="Tanggal Diterima Arsip">
                                    <i class="bi bi-box-arrow-in-down me-1 text-success"></i>{{ \Carbon\Carbon::parse($item->tanggal_terima)->translatedFormat('d M Y') }}
                                </span>
                                @endif
                            </div>
                        </td>

                        <td class="text-center">
                            @if($item->display_status === 'Menunggu Disposisi')
                                <span class="badge rounded-pill bg-warning-subtle text-warning-emphasis border border-warning-subtle px-2.5 py-1">
                                    <i class="bi bi-hourglass-split me-1"></i> Menunggu Disposisi
                                </span>
                            @elseif($item->display_status === 'Terkirim')
                                <span class="badge rounded-pill bg-info-subtle text-info border border-info-subtle px-3 py-1">
                                    <i class="bi bi-send-check-fill me-1"></i> Terkirim
                                </span>
                            @elseif($item->display_status === 'Pending')
                                <span class="badge rounded-pill bg-secondary-subtle text-secondary border border-secondary-subtle px-3 py-1">
                                    <i class="bi bi-clock-history me-1"></i> Pending
                                </span>
                            @elseif($item->display_status === 'Diterima Sebagian')
                                <span class="badge rounded-pill bg-warning-subtle text-warning-emphasis border border-warning-subtle px-2.5 py-1">
                                    <i class="bi bi-pie-chart-fill me-1"></i> Diterima Sebagian
                                </span>
                                @if(!empty($item->display_status_detail))
                                    <small class="d-block text-muted mt-0.5" style="font-size: 0.7rem; font-weight: 500;">
                                        {{ $item->display_status_detail }}
                                    </small>
                                @endif
                            @elseif($item->display_status === 'Diterima')
                                <span class="badge rounded-pill bg-success-subtle text-success border border-success-subtle px-3 py-1">
                                    <i class="bi bi-check-circle-fill me-1"></i> Diterima
                                </span>
                            @elseif($item->display_status === 'Diproses')
                                <span class="badge rounded-pill bg-primary-subtle text-primary border border-primary-subtle px-3 py-1">
                                    <i class="bi bi-gear-wide-connected me-1"></i> Diproses
                                </span>
                            @elseif($item->display_status === 'Ditolak')
                                <span class="badge rounded-pill bg-danger-subtle text-danger border border-danger-subtle px-3 py-1">
                                    <i class="bi bi-x-circle-fill me-1"></i> Ditolak
                                </span>
                            @elseif($item->display_status === 'Internal')
                                <span class="badge rounded-pill bg-warning-subtle text-warning-emphasis border border-warning-subtle px-3 py-1">
                                    <i class="bi bi-building me-1"></i> Internal
                                </span>
                            @else
                                <span class="badge rounded-pill bg-secondary px-3 py-1">
                                    {{ $item->display_status }}
                                </span>
                            @endif
                        </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 class="empty-state-row">
                        <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-inbox fs-2 mb-2 text-muted"></i>
                                <span class="fw-semibold">Tidak ada data laporan persuratan yang sesuai dengan filter Anda.</span>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const isMobile = window.innerWidth <= 768;
        const Toast = Swal.mixin({
            toast: true,
            position: isMobile ? 'top' : 'top-end',
            showConfirmButton: false,
            timer: isMobile ? 2000 : 3000,
            timerProgressBar: true,
            customClass: {
                popup: isMobile ? 'swal-notch-toast' : ''
            },
            showClass: {
                popup: isMobile ? 'swal-notch-drop-in' : 'swal2-show'
            },
            hideClass: {
                popup: isMobile ? 'swal-notch-slide-up' : 'swal2-hide'
            },
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        });

        @if(session('filter_active'))
        Toast.fire({
            icon: 'success',
            title: "{{ session('filter_active') }}"
        });
        @endif

        const btnReset = document.getElementById('btnReset');
        if (btnReset) {
            btnReset.addEventListener('click', function(e) {
                Toast.fire({
                    icon: 'info',
                    title: 'Membersihkan filter laporan...'
                });
            });
        }

        // Handler Preset Periode Cepat
        document.querySelectorAll('.btn-preset-period').forEach(btn => {
            btn.addEventListener('click', function() {
                const period = this.dataset.period;
                const now = new Date();
                let start = new Date();
                let end = new Date();

                const formatDate = (d) => {
                    const year = d.getFullYear();
                    const month = String(d.getMonth() + 1).padStart(2, '0');
                    const day = String(d.getDate()).padStart(2, '0');
                    return `${year}-${month}-${day}`;
                };

                if (period === 'today') {
                    // start & end = today
                } else if (period === 'this_week') {
                    const dayOfWeek = now.getDay() || 7; // 1 (Mon) - 7 (Sun)
                    start.setDate(now.getDate() - (dayOfWeek - 1));
                    end.setDate(start.getDate() + 6);
                } else if (period === 'this_month') {
                    start = new Date(now.getFullYear(), now.getMonth(), 1);
                    end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
                } else if (period === 'last_month') {
                    start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
                    end = new Date(now.getFullYear(), now.getMonth(), 0);
                } else if (period === 'this_year') {
                    start = new Date(now.getFullYear(), 0, 1);
                    end = new Date(now.getFullYear(), 11, 31);
                }

                const tglAwal = document.getElementById('inputTanggalAwal');
                const tglAkhir = document.getElementById('inputTanggalAkhir');
                if (tglAwal && tglAkhir) {
                    tglAwal.value = formatDate(start);
                    tglAkhir.value = formatDate(end);
                    Toast.fire({
                        icon: 'info',
                        title: 'Menerapkan periode ' + this.textContent.trim() + '...'
                    });
                    document.getElementById('filterForm').submit();
                }
            });
        });
    });
</script>
@endpush