@extends('layouts.app')

@section('title', 'Ekspor & Arsip Laporan')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="mb-3">
                <a href="{{ route('reports.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-arrow-left"></i> Kembali ke Laporan
                </a>
            </div>

            <div class="card shadow-sm">
                <div class="card-header bg-gradient-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-file-earmark-excel"></i> Ekspor & Arsip Laporan</h5>
                </div>

                <div class="card-body">

                    @php $isStaffDept = auth()->user()->role === 'staff_departemen'; @endphp

                    {{-- LANGKAH 1: Pilih Aksi --}}
                    <div class="mb-4">
                        <label class="form-label fw-bold fs-6 mb-3">
                            <span class="badge bg-primary rounded-pill me-1">1</span> Pilih Jenis Aksi
                        </label>

                        @if($isStaffDept)
                            <div class="alert alert-success d-flex align-items-center mb-0">
                                <i class="bi bi-download fs-4 me-3"></i>
                                <div>
                                    <strong>Export Saja</strong> — Data laporan departemen Anda akan diunduh.
                                    <span class="text-success fw-bold">Data tidak akan dihapus</span> dari sistem.
                                </div>
                            </div>
                        @else
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="action-card border rounded-3 p-3 h-100" id="cardExportOnly"
                                         onclick="selectAction('export_only')">
                                        <div class="d-flex align-items-start">
                                            <input class="form-check-input mt-1 me-3 flex-shrink-0" type="radio"
                                                   name="action_type_display" id="actionExportOnly" value="export_only">
                                            <div>
                                                <label class="fw-bold text-success d-block mb-1" for="actionExportOnly">
                                                    <i class="bi bi-download fs-5"></i> Export Saja
                                                </label>
                                                <small class="text-muted">
                                                    Download data ke file.
                                                    <strong class="text-success">Data tidak dihapus</strong> dari sistem.
                                                    Cocok untuk laporan bulanan atau backup rutin.
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="action-card border rounded-3 p-3 h-100" id="cardExportDelete"
                                         onclick="selectAction('export_delete')">
                                        <div class="d-flex align-items-start">
                                            <input class="form-check-input mt-1 me-3 flex-shrink-0" type="radio"
                                                   name="action_type_display" id="actionExportDelete" value="export_delete">
                                            <div>
                                                <label class="fw-bold text-danger d-block mb-1" for="actionExportDelete">
                                                    <i class="bi bi-archive fs-5"></i> Export + Arsip
                                                </label>
                                                <small class="text-muted">
                                                    Download <strong class="text-danger">lalu hapus</strong> dari sistem.
                                                    Cocok untuk arsip tahunan. Data tidak dapat dikembalikan.
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>

                    @if(!$isStaffDept)
                    <div class="alert alert-danger d-none mb-4" id="warningDelete">
                        <div class="d-flex">
                            <i class="bi bi-exclamation-triangle-fill fs-3 me-3 flex-shrink-0 text-danger"></i>
                            <div>
                                <h6 class="fw-bold mb-2">⚠️ Perhatian — Data Akan Dihapus Permanen</h6>
                                <ul class="mb-0 small">
                                    <li>Laporan yang dipilih akan <strong>dihapus permanen</strong> dari database</li>
                                    <li>Semua foto terkait akan <strong>dihapus dari server</strong></li>
                                    <li>Tindakan ini <strong>TIDAK DAPAT dibatalkan</strong></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    @endif

                    <hr class="my-4">

                    <form action="{{ route('reports.exportAndDeleteByPeriod') }}" method="POST" id="exportForm">
                        @csrf
                        @if($isStaffDept)
                            <input type="hidden" name="action_type" value="export_only">
                        @else
                            <input type="hidden" name="action_type" id="hiddenActionType" value="">
                        @endif

                        {{-- LANGKAH 2: Format Ekspor --}}
                        <div class="mb-4">
                            <label class="form-label fw-bold fs-6 mb-3">
                                <span class="badge bg-primary rounded-pill me-1">2</span> Format Ekspor
                            </label>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="format-card border rounded-3 p-3 h-100 selected-format-excel"
                                         id="cardFormatExcel" onclick="selectFormat('excel')">
                                        <div class="d-flex align-items-start">
                                            <input class="form-check-input mt-1 me-3 flex-shrink-0" type="radio"
                                                   name="export_format" id="format_excel" value="excel" checked>
                                            <div>
                                                <label class="fw-bold text-success d-block mb-1" for="format_excel">
                                                    <i class="bi bi-file-earmark-excel fs-5"></i> Excel
                                                </label>
                                                <small class="text-muted">Data saja, <strong>tanpa gambar</strong>. File lebih kecil.</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="format-card border rounded-3 p-3 h-100"
                                         id="cardFormatPdf" onclick="selectFormat('pdf')">
                                        <div class="d-flex align-items-start">
                                            <input class="form-check-input mt-1 me-3 flex-shrink-0" type="radio"
                                                   name="export_format" id="format_pdf" value="pdf">
                                            <div>
                                                <label class="fw-bold text-danger d-block mb-1" for="format_pdf">
                                                    <i class="bi bi-file-earmark-pdf fs-5"></i> PDF
                                                </label>
                                                <small class="text-muted">Laporan <strong>lengkap dengan gambar</strong>. Ukuran lebih besar.</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-2">
                                <small class="text-muted" id="formatHint">
                                    <i class="bi bi-info-circle"></i> Excel dipilih: data tanpa foto, ukuran file kecil.
                                </small>
                            </div>
                        </div>

                        <hr class="my-4">

                        {{-- LANGKAH 3: Tipe Periode --}}
                        <div class="mb-4">
                            <label class="form-label fw-bold fs-6 mb-3">
                                <span class="badge bg-primary rounded-pill me-1">3</span> Pilih Tipe Periode
                            </label>
                            <div class="btn-group w-100" role="group">
                                <input type="radio" class="btn-check" name="period_type" id="period_month" value="month" required>
                                <label class="btn btn-outline-primary" for="period_month">
                                    <i class="bi bi-calendar-month"></i> Bulanan
                                </label>
                                <input type="radio" class="btn-check" name="period_type" id="period_year" value="year" required>
                                <label class="btn btn-outline-primary" for="period_year">
                                    <i class="bi bi-calendar"></i> Tahunan
                                </label>
                            </div>
                        </div>

                        {{-- Pilih Tahun --}}
                        <div class="mb-4">
                            <label for="year" class="form-label fw-bold">
                                <i class="bi bi-calendar4"></i> Pilih Tahun
                            </label>
                            <select name="year" id="year" class="form-select" required>
                                <option value="">-- Pilih Tahun --</option>
                                @foreach($availableYears as $year)
                                    <option value="{{ $year }}">
                                        {{ $year }} ({{ $reportStats['years'][$year] ?? 0 }} laporan)
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Pilih Bulan --}}
                        <div class="mb-4 d-none" id="monthSelection">
                            <label for="month" class="form-label fw-bold">
                                <i class="bi bi-calendar2-month"></i> Pilih Bulan
                            </label>
                            <select name="month" id="month" class="form-select">
                                <option value="">-- Pilih Bulan --</option>
                                @foreach(range(1, 12) as $m)
                                    <option value="{{ $m }}">{{ date('F', mktime(0, 0, 0, $m, 1)) }}</option>
                                @endforeach
                            </select>
                            <div id="monthReportCount" class="mt-2 small text-muted"></div>
                        </div>

                        {{-- Pratinjau --}}
                        <div class="alert alert-info d-none mb-4" id="previewInfo">
                            <i class="bi bi-info-circle"></i> <strong>Pratinjau:</strong>
                            <div id="previewText" class="mt-1"></div>
                        </div>

                        {{-- Statistik --}}
                        <div class="row g-3 mb-4">
                            <div class="col-6">
                                <div class="card bg-info bg-opacity-10 border-info text-center py-3">
                                    <i class="bi bi-calendar-range fs-2 text-info"></i>
                                    <h4 class="mb-0 mt-1">{{ $availableYears->count() }}</h4>
                                    <small class="text-muted">Tahun Tersedia</small>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card bg-success bg-opacity-10 border-success text-center py-3">
                                    <i class="bi bi-file-earmark-text fs-2 text-success"></i>
                                    <h4 class="mb-0 mt-1">{{ array_sum($reportStats['years'] ?? []) }}</h4>
                                    <small class="text-muted">Total Laporan</small>
                                </div>
                            </div>
                        </div>

                        @if(!$isStaffDept)
                        <div class="mb-4 d-none" id="confirmSection">
                            <div class="form-check p-3 border border-danger rounded-3 bg-danger bg-opacity-10">
                                <input class="form-check-input" type="checkbox" name="confirm_delete"
                                       value="1" id="confirmDelete">
                                <label class="form-check-label fw-bold text-danger" for="confirmDelete">
                                    <i class="bi bi-check-square"></i>
                                    Saya mengerti bahwa data yang dipilih akan dihapus permanen dan tidak dapat dikembalikan
                                </label>
                            </div>
                        </div>
                        @endif

                        <div class="d-grid">
                            <button type="button" class="btn btn-lg btn-secondary" id="submitBtn" disabled onclick="showConfirmModal()">
                                <i class="bi bi-download"></i> Pilih aksi dan periode terlebih dahulu
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- Tabel periode --}}
            <div class="card shadow-sm mt-4">
                <div class="card-header bg-light">
                    <h6 class="mb-0"><i class="bi bi-list-ul"></i> Laporan Tersedia per Periode</h6>
                </div>
                <div class="card-body">
                    @forelse($availableYears as $yr)
                        <div class="mb-3">
                            <h6 class="fw-bold text-primary">
                                <i class="bi bi-calendar-check"></i> {{ $yr }}
                                <span class="badge bg-primary">{{ $reportStats['years'][$yr] ?? 0 }} laporan</span>
                            </h6>
                            @if(isset($reportStats['months'][$yr]))
                                <div class="row g-2 ms-3">
                                    @foreach($reportStats['months'][$yr] as $mon => $count)
                                        <div class="col-6 col-md-4 col-lg-3">
                                            <small class="text-muted">
                                                <i class="bi bi-calendar3"></i>
                                                {{ date('F', mktime(0, 0, 0, $mon, 1)) }}: <strong>{{ $count }}</strong>
                                            </small>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                        @if(!$loop->last)<hr>@endif
                    @empty
                        <p class="text-muted text-center mb-0">Belum ada laporan tersedia</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ════════════════════════════════════════
     CUSTOM CONFIRMATION MODAL
     ════════════════════════════════════════ --}}
<div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">

            {{-- Header dinamis --}}
            <div class="modal-header border-0 pb-0 pt-4 px-4" id="modalHeader">
                <div class="d-flex align-items-center gap-3 w-100">
                    <div class="modal-icon-wrap" id="modalIconWrap">
                        <i class="bi" id="modalIcon"></i>
                    </div>
                    <div>
                        <h5 class="modal-title fw-bold mb-0" id="modalTitle"></h5>
                        <small class="text-muted" id="modalSubtitle"></small>
                    </div>
                </div>
            </div>

            <div class="modal-body px-4 py-3">
                {{-- Detail info --}}
                <div class="confirm-detail-box rounded-3 p-3 mb-3" id="modalDetailBox">
                    <div class="row g-2" id="modalDetailRows"></div>
                </div>

                {{-- Peringatan hapus --}}
                <div class="alert alert-danger mb-0 d-none" id="modalDeleteWarning">
                    <div class="d-flex align-items-start gap-2">
                        <i class="bi bi-exclamation-triangle-fill text-danger mt-1 flex-shrink-0"></i>
                        <div>
                            <strong class="d-block mb-1">Tindakan ini tidak dapat dibatalkan!</strong>
                            <ul class="mb-0 small ps-3">
                                <li>Semua laporan pada periode ini akan dihapus dari database</li>
                                <li>Seluruh foto terkait akan dihapus dari server</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer border-0 pt-0 px-4 pb-4 gap-2">
                <button type="button" class="btn btn-outline-secondary flex-fill" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle"></i> Batal
                </button>
                <button type="button" class="btn flex-fill fw-bold" id="modalConfirmBtn" onclick="doSubmit()">
                    <i class="bi bi-check-circle"></i> <span id="modalConfirmText">Konfirmasi</span>
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<style>
    .bg-gradient-primary { background: linear-gradient(135deg, #065F46 0%, #047857 100%); }
    .card { border: none; border-radius: 10px; }
    .card-header { border-radius: 10px 10px 0 0 !important; }

    .action-card, .format-card {
        cursor: pointer;
        transition: all 0.2s;
        border-color: #dee2e6 !important;
    }
    .action-card:hover, .format-card:hover { background: #f8f9fa; }
    .action-card.selected-export, .format-card.selected-format-excel { border-color: #198754 !important; background: rgba(25,135,84,0.06); }
    .action-card.selected-delete, .format-card.selected-format-pdf   { border-color: #dc3545 !important; background: rgba(220,53,69,0.06); }

    .btn-check:checked + .btn-outline-primary { background-color: #047857; border-color: #047857; }

    /* ── Modal Styling ── */
    #confirmModal .modal-content {
        animation: modalSlideIn 0.25s ease;
    }
    @keyframes modalSlideIn {
        from { opacity: 0; transform: translateY(-20px) scale(0.97); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    .modal-icon-wrap {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        flex-shrink: 0;
    }
    .modal-icon-wrap.success-icon { background: rgba(25,135,84,0.12); color: #198754; }
    .modal-icon-wrap.danger-icon  { background: rgba(220,53,69,0.12);  color: #dc3545; }

    .confirm-detail-box {
        background: #f8fafc;
        border: 1px solid #E5E7EB;
    }
    .detail-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        font-size: 0.875rem;
        border-bottom: 1px dashed #e5e7eb;
    }
    .detail-row:last-child { border-bottom: none; }
    .detail-label { color: #6B7280; font-weight: 500; }
    .detail-value { font-weight: 600; color: #111827; }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const stats       = @json($reportStats);
    const isStaffDept = {{ auth()->user()->role === 'staff_departemen' ? 'true' : 'false' }};
    const bulan       = ['','Januari','Februari','Maret','April','Mei','Juni',
                         'Juli','Agustus','September','Oktober','November','Desember'];
    let curAction = isStaffDept ? 'export_only' : '';
    let curFormat = 'excel';

    // ── Pilih Format ──
    window.selectFormat = function (fmt) {
        curFormat = fmt;
        document.getElementById('format_excel').checked = (fmt === 'excel');
        document.getElementById('format_pdf').checked   = (fmt === 'pdf');
        document.getElementById('cardFormatExcel').className =
            'format-card border rounded-3 p-3 h-100' + (fmt === 'excel' ? ' selected-format-excel' : '');
        document.getElementById('cardFormatPdf').className =
            'format-card border rounded-3 p-3 h-100' + (fmt === 'pdf' ? ' selected-format-pdf' : '');
        const hint = document.getElementById('formatHint');
        hint.innerHTML = fmt === 'pdf'
            ? '<i class="bi bi-info-circle text-danger"></i> PDF dipilih: laporan lengkap dengan semua foto, ukuran file lebih besar.'
            : '<i class="bi bi-info-circle"></i> Excel dipilih: data tanpa foto, ukuran file kecil.';
        refreshBtn();
    };
    document.getElementById('format_excel').addEventListener('change', () => selectFormat('excel'));
    document.getElementById('format_pdf').addEventListener('change',   () => selectFormat('pdf'));

    // ── Pilih Aksi ──
    if (!isStaffDept) {
        window.selectAction = function (type) {
            curAction = type;
            document.getElementById('hiddenActionType').value = type;
            document.getElementById('actionExportOnly').checked   = (type === 'export_only');
            document.getElementById('actionExportDelete').checked = (type === 'export_delete');
            document.getElementById('cardExportOnly').className =
                'action-card border rounded-3 p-3 h-100' + (type === 'export_only' ? ' selected-export' : '');
            document.getElementById('cardExportDelete').className =
                'action-card border rounded-3 p-3 h-100' + (type === 'export_delete' ? ' selected-delete' : '');
            document.getElementById('warningDelete').classList.toggle('d-none', type !== 'export_delete');
            document.getElementById('confirmSection').classList.toggle('d-none', type !== 'export_delete');
            if (type === 'export_only') document.getElementById('confirmDelete').checked = false;
            refreshBtn();
        };
        document.getElementById('actionExportOnly').addEventListener('change',  () => selectAction('export_only'));
        document.getElementById('actionExportDelete').addEventListener('change', () => selectAction('export_delete'));
    }

    // ── Periode ──
    document.getElementById('period_month').addEventListener('change', function () {
        document.getElementById('monthSelection').classList.remove('d-none');
        document.getElementById('month').required = true;
        updatePreview();
    });
    document.getElementById('period_year').addEventListener('change', function () {
        document.getElementById('monthSelection').classList.add('d-none');
        document.getElementById('month').required = false;
        document.getElementById('month').value = '';
        updatePreview();
    });
    document.getElementById('year').addEventListener('change', function () { updatePreview(); refreshMonthOpts(); });
    document.getElementById('month').addEventListener('change', function () { updatePreview(); refreshMonthCount(); });

    if (!isStaffDept) {
        document.getElementById('confirmDelete').addEventListener('change', refreshBtn);
    }

    function refreshMonthOpts() {
        const yr = document.getElementById('year').value;
        if (!yr) return;
        Array.from(document.getElementById('month').options).forEach(opt => {
            if (!opt.value) return;
            const m = parseInt(opt.value);
            const c = stats.months?.[yr]?.[m] || 0;
            opt.text     = c > 0 ? `${bulan[m]} (${c} laporan)` : `${bulan[m]} (Tidak ada)`;
            opt.disabled = c === 0;
        });
    }

    function refreshMonthCount() {
        const yr = document.getElementById('year').value;
        const mo = document.getElementById('month').value;
        if (yr && mo) {
            const c = stats.months?.[yr]?.[parseInt(mo)] || 0;
            document.getElementById('monthReportCount').innerHTML =
                `<i class="bi bi-info-circle"></i> <strong>${c}</strong> laporan pada periode ini`;
        }
    }

    function updatePreview() {
        const pType = document.querySelector('input[name="period_type"]:checked')?.value;
        const yr    = document.getElementById('year').value;
        const mo    = document.getElementById('month').value;
        if (!pType || !yr || (pType === 'month' && !mo)) {
            document.getElementById('previewInfo').classList.add('d-none');
            refreshBtn(); return;
        }
        let count, label;
        if (pType === 'year') {
            count = stats.years?.[yr] || 0;
            label = `Tahun ${yr}`;
        } else {
            count = stats.months?.[yr]?.[parseInt(mo)] || 0;
            label = `${bulan[parseInt(mo)]} ${yr}`;
        }
        const fmtLabel = curFormat === 'pdf'
            ? '<span class="badge bg-danger ms-2"><i class="bi bi-file-earmark-pdf"></i> PDF</span>'
            : '<span class="badge bg-success ms-2"><i class="bi bi-file-earmark-excel"></i> Excel</span>';
        document.getElementById('previewText').innerHTML =
            `Periode: <strong>${label}</strong> — <strong class="text-primary">${count} laporan</strong>${fmtLabel}`;
        document.getElementById('previewInfo').classList.remove('d-none');
        refreshBtn();
    }

    function refreshBtn() {
        const btn     = document.getElementById('submitBtn');
        const pType   = document.querySelector('input[name="period_type"]:checked')?.value;
        const yr      = document.getElementById('year').value;
        const mo      = document.getElementById('month').value;
        const checked = (!isStaffDept && document.getElementById('confirmDelete'))
                        ? document.getElementById('confirmDelete').checked
                        : true;
        const periodOk  = pType === 'year' ? !!yr : (!!yr && !!mo);
        const confirmOk = curAction === 'export_delete' ? checked : true;
        const ready     = !!curAction && periodOk && confirmOk;
        btn.disabled = !ready;
        if (!ready) {
            btn.className = 'btn btn-lg btn-secondary';
            btn.innerHTML = '<i class="bi bi-download"></i> Pilih periode terlebih dahulu';
            return;
        }
        const fmtIcon = curFormat === 'pdf' ? 'bi-file-earmark-pdf' : 'bi-file-earmark-excel';
        if (curAction === 'export_only') {
            btn.className = 'btn btn-lg btn-success';
            btn.innerHTML = `<i class="bi ${fmtIcon}"></i> Export ke ${curFormat.toUpperCase()}`;
        } else {
            btn.className = 'btn btn-lg btn-danger';
            btn.innerHTML = `<i class="bi bi-archive"></i> Export ${curFormat.toUpperCase()} + Hapus dari Sistem`;
        }
        updatePreview();
    }

    // ── Modal Konfirmasi ──
    window.showConfirmModal = function () {
        const pType = document.querySelector('input[name="period_type"]:checked')?.value;
        const yr    = document.getElementById('year').value;
        const mo    = document.getElementById('month').value;
        let label, count;
        if (pType === 'year') {
            label = `Tahun ${yr}`;
            count = stats.years?.[yr] || 0;
        } else {
            label = `${bulan[parseInt(mo)]} ${yr}`;
            count = stats.months?.[yr]?.[parseInt(mo)] || 0;
        }

        const isDelete  = curAction === 'export_delete';
        const fmtText   = curFormat === 'pdf' ? 'PDF (dengan foto)' : 'Excel (tanpa foto)';
        const fmtBadge  = curFormat === 'pdf'
            ? '<span class="badge bg-danger">PDF</span>'
            : '<span class="badge bg-success">Excel</span>';

        // Set icon & warna header
        document.getElementById('modalIconWrap').className =
            'modal-icon-wrap ' + (isDelete ? 'danger-icon' : 'success-icon');
        document.getElementById('modalIcon').className =
            'bi ' + (isDelete ? 'bi-archive-fill' : 'bi-download');
        document.getElementById('modalTitle').textContent =
            isDelete ? 'Konfirmasi Export + Arsip' : 'Konfirmasi Export';
        document.getElementById('modalSubtitle').textContent =
            isDelete ? 'Data akan diekspor lalu dihapus permanen' : 'Data akan diekspor tanpa dihapus';

        // Detail rows
        document.getElementById('modalDetailRows').innerHTML = `
            <div class="col-12">
                <div class="detail-row">
                    <span class="detail-label"><i class="bi bi-calendar3 me-1"></i> Periode</span>
                    <span class="detail-value">${label}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label"><i class="bi bi-file-earmark-text me-1"></i> Jumlah Laporan</span>
                    <span class="detail-value text-primary">${count} laporan</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label"><i class="bi bi-file-earmark me-1"></i> Format File</span>
                    <span class="detail-value">${fmtBadge}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label"><i class="bi bi-gear me-1"></i> Aksi</span>
                    <span class="detail-value ${isDelete ? 'text-danger' : 'text-success'}">
                        ${isDelete ? '<i class="bi bi-trash3"></i> Export & Hapus' : '<i class="bi bi-download"></i> Export Saja'}
                    </span>
                </div>
            </div>
        `;

        // Warning hapus
        document.getElementById('modalDeleteWarning').classList.toggle('d-none', !isDelete);

        // Tombol konfirmasi
        const confirmBtn = document.getElementById('modalConfirmBtn');
        confirmBtn.className = 'btn flex-fill fw-bold ' + (isDelete ? 'btn-danger' : 'btn-success');
        document.getElementById('modalConfirmText').textContent =
            isDelete ? 'Ya, Export & Hapus' : 'Ya, Export Sekarang';

        new bootstrap.Modal(document.getElementById('confirmModal')).show();
    };

    window.doSubmit = function () {
        bootstrap.Modal.getInstance(document.getElementById('confirmModal')).hide();
        // Loading state
        const btn = document.getElementById('submitBtn');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Memproses...';
        document.getElementById('exportForm').submit();
    };
});
</script>
@endpush