@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])

@push('css')
<style>
    /* DataTables custom styling */
    #tableResult_wrapper .dataTables_filter {
        float: right;
    }

    #tableResult_wrapper .dataTables_length {
        float: left;
    }

    #tableResult_wrapper .dataTables_info {
        padding-top: 0.85rem;
    }

    #tableResult_wrapper .dataTables_paginate {
        padding-top: 0.5rem;
    }

    /* Make sure footer is always visible */
    #tableResult tfoot {
        background-color: #f8f9fa;
        font-weight: bold;
    }

    #tableResult tfoot td {
        border-top: 2px solid #dee2e6 !important;
        padding: 12px !important;
    }

    /* Improve table header */
    #tableResult thead th {
        background-color: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        font-weight: 600;
        white-space: nowrap;
    }

    #tableResult th,
    #tableResult td {
        font-size: 12pt !important;
    }

    #tableResult thead th {
        font-size: 12pt !important;
    }

    #tableResult tfoot td {
        font-size: 12pt !important;
    }

    /* Hover effect */
    #tableResult tbody tr:hover {
        background-color: #f1f3f5;
    }

    /* DataTables search box styling */
    .dataTables_filter input {
        border: 1px solid #d2d6da;
        border-radius: 0.375rem;
        padding: 0.5rem 0.75rem;
        margin-left: 0.5rem;
    }

    /* DataTables length select styling */
    .dataTables_length select {
        border: 1px solid #d2d6da;
        border-radius: 0.375rem;
        padding: 0.375rem 2rem 0.375rem 0.75rem;
        margin: 0 0.5rem;
    }

    /* Detail row styling */
    .detail-row {
        background-color: #f8f9fa !important;
        display: none;
    }

    .detail-row.show {
        display: table-row;
    }

    .detail-content {
        padding: 15px;
    }

    .detail-table {
        width: 100%;
        margin-bottom: 0;
    }

    .detail-table th {
        background-color: #e9ecef;
        font-weight: 600;
        font-size: 10px;
        text-transform: uppercase;
    }

    .detail-table td {
        font-size: 10px;
        padding: 8px;
    }

    .btn-toggle-detail {
        cursor: pointer;
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    .btn-toggle-detail i {
        transition: transform 0.3s ease;
    }

    .btn-toggle-detail.expanded i {
        transform: rotate(180deg);
    }

</style>
@endpush

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <h6><i class="fas fa-chart-line me-2"></i>Filter Report</h6>
                </div>
                <div class="card-body">
                    <form id="formFilter">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="project_name" class="form-control-label">
                                        Project <span class="text-danger">*</span>
                                    </label>

                                    <input type="hidden" id="project_id" name="project_id" required>

                                    <div class="input-group">
                                        <input type="text" class="form-control" id="project_name" name="project_name"
                                            placeholder="-- Pilih Project --" readonly required>

                                        <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                                            onclick="openSelectProjectModal()" title="Cari Project">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="detail_kategori_name" class="form-control-label">
                                        Detail Kategori
                                    </label>

                                    <input type="hidden" id="detail_kategori_id" name="detail_kategori_id">

                                    <div class="input-group">
                                        <input type="text" class="form-control" id="detail_kategori_name"
                                            name="detail_kategori_name" placeholder="-- Semua Detail Kategori --"
                                            readonly>

                                        <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                                            onclick="openSelectKategoriModal()">
                                            <i class="fas fa-search"></i>
                                        </span>

                                        <span class="input-group-text bg-danger text-light" style="cursor:pointer"
                                            onclick="clearKategori()" title="Clear">
                                            <i class="fas fa-times"></i>
                                        </span>
                                    </div>

                                    <small class="form-text text-muted">
                                        Opsional - Kosongkan untuk melihat semua
                                    </small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="form-control-label">&nbsp;</label>
                                    <div>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-sync-alt me-1"></i> Generate Report
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card" id="resultCard">
                <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">
                        <i class="fas fa-table me-2"></i>Budget vs Actual &mdash; All Projects
                    </h6>

                    <div class="d-flex align-items-center gap-2">
                        <div id="statusFilterWrap" style="display:none;">
                            <label for="filter_status" class="me-2 mb-0">Status Pengisian:</label>
                            <select class="form-control form-control-sm d-inline-block w-auto"
                                id="filter_status" name="filter_status">
                                <option value="">-- Semua Status --</option>
                                <option value="Belum Input Budget dan Actual">Belum Input Budget dan Actual</option>
                                <option value="Belum Input Actual">Belum Input Actual</option>
                                <option value="Belum Input Budget">Belum Input Budget</option>
                                <option value="Sedang Berjalan">Sedang Berjalan</option>
                                <option value="Hampir Selesai">Hampir Selesai</option>
                                <option value="Selesai">Selesai</option>
                            </select>
                        </div>

                        <button type="button" class="btn btn-sm btn-success" id="btnExport" style="margin-top: 15px;">
                            <i class="fas fa-file-excel me-1"></i> Export Excel
                        </button>
                    </div>
                </div>
                <div class="card-body px-0 pt-0 pb-2">
                    
                    <div class="table-responsive p-3">
                        <table class="table align-items-center table-bordered table-hover mb-0" id="tableResult">
                            <thead class="thead-light" id="tableHeader">
                                <tr>
                                    <th class="text-center" width="80">Action</th>
                                    <th class="text-center">Project</th>
                                    <th class="text-center">Total Budget</th>
                                    <th class="text-center">Total Actual</th>
                                    <th class="text-center">Difference</th>
                                    <th class="text-center">% Realisasi</th>
                                    <th class="text-center">Status Pengisian</th>
                                </tr>
                            </thead>
                            <tbody id="tableBody">
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-4">
                                        <i class="fas fa-spinner fa-spin me-1"></i> Memuat data...
                                    </td>
                                </tr>
                            </tbody>
            <tfoot id="tableSummary" style="display: none;">
                <tr class="bg-light font-weight-bold">
                    <td colspan="2" class="text-end text-uppercase text-xs">
                        <strong>GRAND TOTAL</strong>
                    </td>
                    <td class="text-end text-xs"><strong id="summaryBudget"></strong></td>
                    <td class="text-end text-xs"><strong id="summaryActual"></strong></td>
                    <td class="text-end text-xs"><strong id="summaryDifference"></strong></td>
                    <td class="text-end text-xs"><strong id="summaryPersentase"></strong></td>
                    <td class="text-center text-xs"><strong id="summaryStatus"></strong></td>
                </tr>
            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Select Project --}}
<div class="modal fade" id="modalSelectProject" tabindex="-1" aria-labelledby="modalSelectProjectLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalSelectProjectLabel">Pilih Project</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" class="form-control" id="searchProject" placeholder="Cari project...">
                </div>
                <div class="table-responsive" style="max-height: 400px;">
                    <table class="table table-sm table-hover">
                        <thead>
                            <tr>
                                <th width="100">Aksi</th>
                                <th width="50">No</th>
                                <th>Nama Project</th>
                                <th>No. SPK</th>
                                <th>Tanggal SPK</th>
                                <th>Nilai SPK</th>
                            </tr>
                        </thead>
                        <tbody id="projectTableBody">
                            <tr>
                                <td colspan="7" class="text-center">Loading...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Select Detail Kategori --}}
<div class="modal fade" id="modalSelectKategori" tabindex="-1" aria-labelledby="modalSelectKategoriLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalSelectKategoriLabel">Pilih Detail Kategori</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" class="form-control" id="searchKategori" placeholder="Cari detail kategori...">
                </div>
                <div class="table-responsive" style="max-height: 400px;">
                    <table class="table table-sm table-hover">
                        <thead>
                            <tr>
                                <th width="100">Aksi</th>
                                <th width="50">No</th>
                                <th>Kode</th>
                                <th>Kategori</th>
                                <th>Detail Kategori</th>
                            </tr>
                        </thead>
                        <tbody id="kategoriTableBody">
                            <tr>
                                <td colspan="5" class="text-center">Loading...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
    let projectsData = [];
    let kategoriData = [];
    let isLoadingProjects = false;
    let isLoadingKategori = false;

    $(document).ready(function() {
        // Auto-load summary all projects on page load
        loadSummaryAll();

        // Handle form submit
        $('#formFilter').on('submit', function(e) {
            e.preventDefault();
            const projectId = $('#project_id').val();
            if (!projectId) {
                Swal.fire({ icon: 'warning', title: 'Warning', text: 'Silakan pilih project terlebih dahulu' });
                return;
            }
            generateReport();
        });

        // Handle export button
        $('#btnExport').on('click', function() {
            exportToExcel();
        });

        // Search handlers
        $('#searchProject').on('keyup', function() {
            const searchTerm = $(this).val().toLowerCase();
            const filteredData = projectsData.filter(item => 
                item.proyek.toLowerCase().includes(searchTerm) ||
                (item.code && item.code.toLowerCase().includes(searchTerm)) ||
                (item.no_spk && item.no_spk.toLowerCase().includes(searchTerm))
            );
            renderProjectTable(filteredData);
        });

        $('#searchKategori').on('keyup', function() {
            const searchTerm = $(this).val().toLowerCase();
            const filteredData = kategoriData.filter(item => 
                item.detail_kategori.toLowerCase().includes(searchTerm) ||
                item.kategori.toLowerCase().includes(searchTerm) ||
                (item.code && item.code.toLowerCase().includes(searchTerm))
            );
            renderKategoriTable(filteredData);
        });

        // Custom filter Status Pengisian (client-side, kolom 6 = Status)
        $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
            if (settings.nTable.id !== 'tableResult') return true;
            const val = $('#filter_status').val();
            if (!val) return true;
            const tr = settings.aoData[dataIndex].nTr;
            const cell = $(tr).children('td').eq(6);
            // Mode filtered (per project) tidak punya kolom status → abaikan filter
            if (!cell.attr('data-status')) return true;
            return cell.attr('data-status') === val;
        });

        // Trigger redraw saat dropdown status berubah
        $('#filter_status').on('change', function() {
            if ($.fn.DataTable.isDataTable('#tableResult')) {
                $('#tableResult').DataTable().draw();
            }
        });
    });

    /**
     * Load summary semua project saat pertama kali halaman dibuka
     */
    function loadSummaryAll() {
        $.ajax({
            url: '{{ route("rptdif.api.summary-all") }}',
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    displaySummaryAll(response.data);
                } else {
                    $('#tableBody').html('<tr><td colspan="5" class="text-center text-danger py-4">Gagal memuat data</td></tr>');
                }
            },
            error: function() {
                setTableHeaders('summary');
                $('#tableBody').html('<tr><td colspan="5" class="text-center text-danger py-4">Error loading data</td></tr>');
            }
        });
    }

    /**
     * Set table header & footer colspans between 7-column (summary) and 7-column (filtered) modes
     */
    function setTableHeaders(mode) {
        const $header = $('#tableHeader tr');
        const $footer = $('#tableSummary tr');

        if (mode === 'summary') {
            // 7 columns: Action, Project, Budget, Actual, Difference, % Realisasi, Status Pengisian
            $header.html(`
                <th class="text-center" width="80">Action</th>
                <th class="text-center">Project</th>
                <th class="text-center">Total Budget</th>
                <th class="text-center">Total Actual (Mutasi)</th>
                <th class="text-center">Difference</th>
                <th class="text-center">% Realisasi</th>
                <th class="text-center">Status Pengisian</th>
            `);
            $footer.find('td:first').attr('colspan', '2').html('<strong style="font-size:13pt;">GRAND TOTAL</strong>');
            $footer.find('td').slice(1, 5).html('').removeAttr('style');
        } else {
            // 7 columns: Action, Project, Kategori, Detail Kategori, Budget, Actual, Difference
            $header.html(`
                <th class="text-center" width="80">Detail</th>
                <th class="text-center">Project</th>
                <th class="text-center">Kategori</th>
                <th class="text-center">Detail Kategori</th>
                <th class="text-center">Total Budget</th>
                <th class="text-center">Total Actual (Mutasi)</th>
                <th class="text-center">Difference</th>
            `);
            $footer.find('td:first').attr('colspan', '4').html('<strong>TOTAL</strong>');
            $('#resultCard .card-header h6').html('<i class="fas fa-table me-2"></i>Report Result');
        }
    }

    /**
     * Display summary ALL projects (1 row = 1 project, 7 columns)
     */
    function displaySummaryAll(data) {
        const summaries = data.summaries;
        const grandTotal = data.grand_total;

        // Reset filter status ke semua status & tampilkan di card-header
        $('#filter_status').val('');
        $('#statusFilterWrap').show();

        if ($.fn.DataTable.isDataTable('#tableResult')) {
            $('#tableResult').DataTable().destroy();
        }

        setTableHeaders('summary');
        $('#tableBody').empty();
        $('.detail-row').remove();

        if (summaries.length === 0) {
            $('#tableBody').html('<tr><td colspan="7" class="text-center text-muted py-4">Tidak ada data</td></tr>');
            $('#tableSummary').hide();
            return;
        }

        // Sort: Belum Input (sortOrder 0) di atas, lalu ascending sortOrder
        const sorted = [...summaries].sort(function(a, b) {
            const sa = getStatusPengisian(a.total_budget, a.total_actual_net, a.is_closed);
            const sb = getStatusPengisian(b.total_budget, b.total_actual_net, b.is_closed);
            if (sa.sortOrder !== sb.sortOrder) return sa.sortOrder - sb.sortOrder;
            return (a.project || '').localeCompare(b.project || '');
        });

        sorted.forEach(function(item, idx) {
            const diffClass = item.total_difference >= 0 ? 'text-success' : 'text-danger';
            const diffIcon = item.total_difference >= 0 ? 'fa-arrow-up' : 'fa-arrow-down';

            const pct = getPersentase(item.total_budget, item.total_actual_net);
            const pctDisplay = pct !== null ? pct.toFixed(2) + '%' : '-';
            const pctOrder = pct !== null ? pct : -1;

            const status = getStatusPengisian(item.total_budget, item.total_actual_net, item.is_closed);
const gradientStyles = {
    'secondary': 'background: linear-gradient(90deg, #4b5563 0%, #6b7280 50%, #374151 100%); color: white;',

    'primary': 'background: linear-gradient(90deg, #0042f7 0%, #3b82f6 100%); color: white;',

    'purple': 'background: linear-gradient(90deg, #f55a00 0%, #f79350 100%); color: white;',

    'info': 'background: linear-gradient(90deg, #2282d1 0%, #0ea5e9 100%); color: white;',

    'warning': 'background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%); color: white;',

    'success': 'background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%); color: white;',

    'danger': 'background: linear-gradient(90deg, #ff0000 0%, #fa5a32 100%); color: white;'
};
            const badgeStyle = gradientStyles[status.color] || gradientStyles['secondary'];
            const badgeHtml = '<span class="badge" style="' + badgeStyle + '">' + status.label + '</span>';

                const tr = `
                <tr class="main-row" data-project-id="${item.project_id}" data-row-idx="${idx}">
                    <td class="text-center">
                        <button class="btn btn-sm btn-primary btn-toggle-detail"
                                onclick="toggleProjectDetail(${item.project_id}, this)"
                                title="Lihat Detail Kategori">
                            <i class="fas fa-chevron-down"></i>
                        </button>
                    </td>
                    <td class="fw-semibold">${item.project || '-'}</td>
                    <td class="text-end" data-order="${item.total_budget}">${formatRupiah(item.total_budget)}</td>
                    <td class="text-end" data-order="${item.total_actual_net}">${formatRupiah(item.total_actual_net)}</td>
                    <td class="text-end ${diffClass}" data-order="${item.total_difference}">
                        <i class="fas ${diffIcon} me-1"></i>${formatRupiah(item.total_difference)}
                    </td>
                    <td class="text-end" data-order="${pctOrder}">${pctDisplay}</td>
                    <td class="text-center" data-order="${status.sortOrder}" data-status="${status.label}">${badgeHtml}</td>
                </tr>
            `;
            $('#tableBody').append(tr);
        });

        // Grand total footer
        const grandDiffValue = grandTotal.total_difference ?? 0;
        const grandDiffClass = grandDiffValue >= 0 ? 'text-success' : 'text-danger';
        const grandDiffIcon = grandDiffValue >= 0 ? 'fa-arrow-up' : 'fa-arrow-down';

        const grandPct = getPersentase(grandTotal.total_budget, grandTotal.total_actual_net);
        const grandPctDisplay = grandPct.toFixed(2) + '%' ;

        // Rebuild footer for 7 columns
        const $footer = $('#tableSummary tr');
        $footer.html(`
            <td colspan="2" class="text-end text-uppercase text-xs"><strong style="font-size:13pt;">GRAND TOTAL</strong></td>
            <td class="text-end text-xs"><strong id="summaryBudget" style="font-size:13pt;">${formatRupiah(grandTotal.total_budget)}</strong></td>
            <td class="text-end text-xs"><strong id="summaryActual" style="font-size:13pt;">${formatRupiah(grandTotal.total_actual_net)}</strong></td>
            <td class="text-end text-xs"><strong id="summaryDifference" class="${grandDiffClass}" style="font-size:13pt;"><i class="fas ${grandDiffIcon} me-1"></i>${formatRupiah(grandDiffValue)}</strong></td>
            <td class="text-end text-xs"><strong id="summaryPersentase" style="font-size:13pt;">${grandPctDisplay}</strong></td>
            <td class="text-center text-xs"><strong id="summaryStatus" style="font-size:13pt;">&nbsp;</strong></td>
        `);
        $('#tableSummary').show();

        // Init DataTable
        $('#tableResult').DataTable({
            language: {
                url: '{{ asset("assets/datatables/id.json") }}'
            },
            pageLength: 25,
            order: [[6, 'asc'], [1, 'asc']],
            columnDefs: [
                { orderable: false, targets: [0] },
                { className: 'text-center', targets: [0, 6] }
            ],
            drawCallback: function() {
                $('.detail-row').remove();
                $('.btn-toggle-detail').removeClass('expanded').find('i')
                    .removeClass('fa-chevron-up').addClass('fa-chevron-down');
            }
        });

        showStatusFilter();
    }

    /**
     * Tampilkan filter status (dipanggil pada mode summary all projects)
     */
    function showStatusFilter() {
        $('#statusFilterWrap').show();
    }

    /**
     * Sembunyikan filter status (dipanggil pada mode per-project)
     */
    function hideStatusFilter() {
        $('#statusFilterWrap').hide();
    }

    /**
     * Tentukan status pengisian berdasarkan budget, actual, is_closed, dan persentase
     * Return: { label, color, sortOrder }
     */
    function getStatusPengisian(budget, actual, is_closed) {
        const b = parseFloat(budget) || 0;
        const a = parseFloat(actual) || 0;
        const pct = getPersentase(b, a);
        

        
        // Selesai → is_closed = true (paling akhir)
        if (is_closed) {
            return { label: 'Selesai', color: 'success', sortOrder: 5 };
        } else{
            // Belum Input Budget dan Actual → Budget = 0 dan Actual = 0
        if (b === 0 && a === 0) {
            return { label: 'Belum Input Budget dan Actual', color: 'danger', sortOrder: 0 };
        }
        // Belum Input Actual → Budget > 0 dan Actual = 0
        if (b > 0 && a === 0) {
            return { label: 'Belum Input Actual', color: 'warning', sortOrder: 1 };
        }
        // Belum Input Budget → Budget = 0 dan Actual > 0
        if (b === 0 && a > 0) {
            return { label: 'Belum Input Budget', color: 'warning', sortOrder: 2 };
        }
        // Sedang Berjalan → Budget > 0 dan Actual > 0 dan persentase < 90%
        if (pct < 90) {
            return { label: 'Sedang Berjalan', color: 'info', sortOrder: 3 };
        }
        // Hampir Selesai → persentase >= 90%
        if (pct >= 90) {
            return { label: 'Hampir Selesai', color: 'primary', sortOrder: 4 };
        }
        }
        // Fallback
        return { label: 'Tidak Diketahui', color: 'secondary', sortOrder: 6 };
    }

    /**
     * Toggle expand project to show kategori breakdown per project
     */
    function toggleProjectDetail(projectId, btn) {
        const mainRow = $(btn).closest('tr');
        const detailRow = mainRow.next('.detail-row');
        const button = $(btn);

        if (detailRow.length && detailRow.hasClass('show')) {
            detailRow.removeClass('show').hide();
            button.removeClass('expanded').find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
            return;
        }

        $('.detail-row.show').removeClass('show').hide();
        $('.btn-toggle-detail.expanded').removeClass('expanded').find('i')
            .removeClass('fa-chevron-up').addClass('fa-chevron-down');

        if (detailRow.length === 0) {
            const html = `
                <tr class="detail-row" style="display:none;">
                    <td colspan="7" class="detail-content">
                        <div class="text-center py-3"><i class="fas fa-spinner fa-spin me-1"></i>Loading detail kategori...</div>
                    </td>
                </tr>
            `;
            mainRow.after(html);
            const newRow = mainRow.next('.detail-row');
            newRow.addClass('show').show();
            button.addClass('expanded').find('i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
            loadProjectKategoriDetail(projectId, newRow);
        } else {
            detailRow.addClass('show').show();
            button.addClass('expanded').find('i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
            if (!detailRow.hasClass('loaded')) loadProjectKategoriDetail(projectId, detailRow);
        }
    }

    /**
     * Load kategori breakdown for a project (inside summary expand)
     */
    function loadProjectKategoriDetail(projectId, detailRow) {
        const content = detailRow.find('.detail-content');
        $.ajax({
            url: '{{ route("rptdif.generate") }}',
            type: 'POST',
            data: { _token: '{{ csrf_token() }}', project_id: projectId, detail_kategori_id: null },
            dataType: 'json',
            success: function(res) {
                if (res.success && res.data.details.length > 0) {
                    const det = res.data.details;
                    const sum = res.data.summary;
                    let totalBudget = 0;
                    let totalActualNet = 0;
                    let totalDiff = 0;
                    det.forEach(function(d) {
                        totalBudget += parseFloat(d.amount_budget) || 0;
                        totalActualNet += parseFloat(d.actual_net) || (parseFloat(d.total_actual) + (parseFloat(d.total_ppn) || 0));
                        totalDiff += parseFloat(d.difference) || 0;
                    });
                    let h = '<div class="p-2"><h6 class="mb-2" style="font-size:10pt;"><i class="fas fa-list-ul me-2"></i>Detail Kategori &mdash; ' + sum.project + '</h6>';
                    h += '<table class="table table-sm table-bordered mb-0" style="font-size:10pt;"><thead style="background-color:#e9ecef;"><tr><th class="text-center">No</th><th>Kategori</th><th>Detail Kategori</th><th class="text-end">Budget</th><th class="text-end">Actual</th><th class="text-end">Diff</th></tr></thead><tbody>';
                    det.forEach(function(d, i) {
                        const diffVal = parseFloat(d.difference) || 0;
                        const dc = diffVal >= 0 ? 'text-success' : 'text-danger';
                        const di = diffVal >= 0 ? 'fa-arrow-up' : 'fa-arrow-down';
                        const rowActualNet = parseFloat(d.actual_net) || (parseFloat(d.total_actual) + (parseFloat(d.total_ppn) || 0));
                        h += '<tr><td style="border:1px solid #dee2e6;" class="text-center">'+(i+1)+'</td><td style="border:1px solid #dee2e6;">'+d.kategori+'</td><td style="border:1px solid #dee2e6;">'+d.detail_kategori+'</td><td style="border:1px solid #dee2e6;" class="text-end">'+(d.amount_budget<=0?'<span class="text-danger fw-bold">Unplanned</span>':formatRupiah(d.amount_budget))+'</td><td style="border:1px solid #dee2e6;" class="text-end">'+formatRupiah(rowActualNet)+'</td><td style="border:1px solid #dee2e6;" class="text-end '+dc+'"><i class="fas '+di+' me-1"></i>'+formatRupiah(diffVal)+'</td></tr>';
                    });
                    const totalDiffClass = totalDiff >= 0 ? 'text-success' : 'text-danger';
                    h += '</tbody><tfoot><tr class="bg-light fw-bold">';
                    h += '<td style="border:1px solid #dee2e6;" colspan="3" class="text-center">TOTAL</td>';
                    h += '<td style="border:1px solid #dee2e6;" class="text-end">'+formatRupiah(totalBudget)+'</td>';
                    h += '<td style="border:1px solid #dee2e6;" class="text-end">'+formatRupiah(totalActualNet)+'</td>';
                    h += '<td style="border:1px solid #dee2e6;" class="text-end '+totalDiffClass+'">'+formatRupiah(totalDiff)+'</td>';
                    h += '</tr></tfoot></table></div>';
                    content.html(h);
                } else {
                    content.html('<div class="p-3 text-center text-muted"><i class="fas fa-info-circle me-2"></i>Tidak ada data kategori</div>');
                }
                detailRow.addClass('loaded');
            },
            error: function() {
                
                content.html('<div class="p-3 text-center text-danger"><i class="fas fa-exclamation-circle me-2"></i>Gagal memuat detail</div>');
            }
        });
    }

    /**
     * Load projects from server
     */
    function loadProjects() {
        isLoadingProjects = true;
        renderProjectTable(projectsData);
        
        $.ajax({
            url: '{{ route("rptdif.api.projects") }}',
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                isLoadingProjects = false;
                if (response.success) {
                    projectsData = response.data;
                    renderProjectTable(projectsData);
                }
            },
            error: function(xhr) {
                isLoadingProjects = false;
                renderProjectTable([]);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to load projects'
                });
            }
        });
    }

    /**
     * Load detail kategori based on selected project
     */
    function loadDetailKategori(projectId) {
        isLoadingKategori = true;
        renderKategoriTable(kategoriData);
        
        $.ajax({
            url: '{{ route("rptdif.api.detail-kategori") }}',
            type: 'GET',
            data: { project_id: projectId },
            dataType: 'json',
            success: function(response) {
                isLoadingKategori = false;
                if (response.success) {
                    kategoriData = response.data;
                    renderKategoriTable(kategoriData);
                }
            },
            error: function(xhr) {
                isLoadingKategori = false;
                renderKategoriTable([]);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to load detail kategori'
                });
            }
        });
    }

    /**
     * Render project table
     */
    function renderProjectTable(data) {
        const tbody = $('#projectTableBody');
        tbody.empty();

        if (isLoadingProjects) {
            tbody.append('<tr><td colspan="7" class="text-center">Loading...</td></tr>');
            return;
        }

        if (data.length === 0) {
            tbody.append('<tr><td colspan="7" class="text-center">Tidak ada data</td></tr>');
            return;
        }

        data.forEach((item, index) => {
            const tr = `<tr>
                <td>
                    <button class="btn btn-primary btn-sm" onclick="selectProject(${item.id}, '${item.proyek.replace(/'/g, "\\'")}')">
                        <i class="fas fa-check"></i> Pilih
                    </button>
                </td>
                <td class="text-center">${index + 1}</td>
                <td>${item.proyek}</td>
                <td>${item.no_spk || '-'}</td>
                <td>${item.tgl_spk || '-'}</td>
                <td>${item.nilai_spk ? formatRupiah(item.nilai_spk) : '-'}</td>
            </tr>`;
            tbody.append(tr);
        });
    }

    /**
     * Render kategori table
     */
    function renderKategoriTable(data) {
        const tbody = $('#kategoriTableBody');
        tbody.empty();

        if (isLoadingKategori) {
            tbody.append('<tr><td colspan="5" class="text-center">Loading...</td></tr>');
            return;
        }

        if (data.length === 0) {
            tbody.append('<tr><td colspan="5" class="text-center">Tidak ada data</td></tr>');
            return;
        }

        data.forEach((item, index) => {
            const tr = `<tr>
                <td>
                    <button class="btn btn-primary btn-sm" onclick="selectKategori(${item.id}, '${item.full_name.replace(/'/g, "\\'")}')">
                        <i class="fas fa-check"></i> Pilih
                    </button>
                </td>
                <td>${index + 1}</td>
                <td>${item.code || '-'}</td>
                <td>${item.kategori}</td>
                <td>${item.detail_kategori}</td>
            </tr>`;
            tbody.append(tr);
        });
    }

    /**
     * Open modal select project
     */
    function openSelectProjectModal() {
        loadProjects();
        $('#searchProject').val('');
        $('#modalSelectProject').modal('show');
    }

    /**
     * Open modal select kategori
     */
    function openSelectKategoriModal() {
        const projectId = $('#project_id').val();
        if (!projectId) {
            Swal.fire({
                icon: 'warning',
                title: 'Warning',
                text: 'Silakan pilih project terlebih dahulu'
            });
            return;
        }
        loadDetailKategori(projectId);
        $('#searchKategori').val('');
        $('#modalSelectKategori').modal('show');
    }

    /**
     * Select project
     */
    function selectProject(id, proyek) {
        $('#project_id').val(id);
        $('#project_name').val(proyek);
        $('#btnClearProject').show();
        
        // Clear kategori jika ada
        clearKategori();
        
        $('#modalSelectProject').modal('hide');
    }

    /**
     * Select kategori
     */
    function selectKategori(id, fullName) {
        $('#detail_kategori_id').val(id);
        $('#detail_kategori_name').val(fullName);
        $('#btnClearKategori').show();
        $('#modalSelectKategori').modal('hide');
    }

    /**
     * Clear project
     */
    function clearProject() {
        $('#project_id').val('');
        $('#project_name').val('');
        $('#btnClearProject').hide();
        clearKategori();
    }

    /**
     * Clear kategori
     */
    function clearKategori() {
        $('#detail_kategori_id').val('');
        $('#detail_kategori_name').val('');
        $('#btnClearKategori').hide();
    }

    /**
     * Generate report based on selected project
     */
    function generateReport() {
        const projectId = $('#project_id').val();
        const detailKategoriId = $('#detail_kategori_id').val();

        if (!projectId) {
            Swal.fire({
                icon: 'warning',
                title: 'Warning',
                text: 'Silakan pilih project terlebih dahulu'
            });
            return;
        }

        // Show loading
        Swal.fire({
            title: 'Loading...',
            html: 'Generating report, please wait...',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        $.ajax({
            url: '{{ route("rptdif.generate") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                project_id: projectId,
                detail_kategori_id: detailKategoriId || null
            },
            dataType: 'json',
            success: function(response) {
                Swal.close();
                
                if (response.success) {
                    displayReport(response.data);
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message || 'Failed to generate report'
                    });
                }
            },
            error: function(xhr) {
                Swal.close();
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: xhr.responseJSON?.message || 'Failed to generate report'
                });
            }
        });
    }

    /**
     * Display report data in table
     */
function displayReport(data) {
    const details = data.details;
    const summary = data.summary;

    // Sembunyikan filter status di mode per-project (tidak ada kolom status)
    $('#statusFilterWrap').hide();

    if ($.fn.DataTable.isDataTable('#tableResult')) {
        $('#tableResult').DataTable().destroy();
    }

    setTableHeaders('filtered');
    $('#tableBody').empty();
    $('.detail-row').remove();

    if (details.length > 0) {
        let rowIndex = 0;

        details.forEach(function(row) {

            const diffValue = row.difference ?? 0;
            const diffClass = diffValue >= 0 ? 'text-success' : 'text-danger';
            const diffIcon = diffValue >= 0 ? 'fa-arrow-up' : 'fa-arrow-down';
            const uniqueId = `row-${rowIndex}`;

            const dkId = row.detail_kategori_id != null ? row.detail_kategori_id : 0;
            const actualNet = row.actual_net ?? (row.total_actual + (row.total_ppn || 0));

            const tr = `
                <tr class="main-row" data-row-id="${uniqueId}" data-detail-kategori-id="${dkId}" style="font-size:11pt;">
                    <td class="text-center">
                        <button class="btn btn-sm btn-primary btn-toggle-detail"
                                                    onclick="toggleDetail('${uniqueId}', ${$('#project_id').val()}, ${row.detail_kategori_id ?? 0})"
                                title="Lihat Detail Mutasi">
                            <i class="fas fa-chevron-down"></i>
                        </button>
                    </td>

                    <td style="font-size:11pt;">${row.project}</td>
                    <td style="font-size:11pt;">${row.kategori}</td>
                    <td style="font-size:11pt;">${row.detail_kategori}</td>

                    <td class="text-end" data-order="${row.amount_budget}" style="font-size:11pt;">
                        ${
                            row.amount_budget <= 0
                                ? '<span class="text-danger fw-bold">Unplanned</span>'
                                : formatRupiah(row.amount_budget)
                        }
                    </td>

                    <td class="text-end" data-order="${actualNet}" style="font-size:11pt;">
                        ${formatRupiah(actualNet)}
                    </td>

                    <td class="text-end ${diffClass}" data-order="${diffValue}" style="font-size:11pt;">
                        <i class="fas ${diffIcon} me-1"></i>${formatRupiah(diffValue)}
                    </td>
                </tr>
            `;

            $('#tableBody').append(tr);
            rowIndex++;
        });

        const summaryDiffValue = summary.total_difference ?? 0;
        const summaryDiffClass = summaryDiffValue >= 0 ? 'text-success' : 'text-danger';
        const summaryDiffIcon = summaryDiffValue >= 0 ? 'fa-arrow-up' : 'fa-arrow-down';

        const projectName = summary.project || '';
        if (projectName) {
            $('#resultCard .card-header h6').html(`<i class="fas fa-table me-2"></i>Budget vs Actual - ${projectName}`);
        }
        
        // Update footer for filtered mode - align with 7 columns: Action|Project|Kategori|Detail|Budget|Actual|Diff
        const $footer = $('#tableSummary tr');
        $footer.find('td').remove();
        $footer.append(`
            <td></td>
            <td colspan="3" class="text-center text-uppercase text-xs" style="text-align:center;"><strong style="font-size:13pt;">TOTAL </strong></td>
            <td class="text-end text-xs" style="text-align:right;"><strong style="font-size:13pt;" id="summaryBudget"></strong></td>
            <td class="text-end text-xs" style="text-align:right;"><strong style="font-size:13pt;" id="summaryActual"></strong></td>
            <td class="text-end text-xs" style="text-align:right;"><strong style="font-size:13pt;" id="summaryDifference"></strong></td>
        `);
        
        $('#summaryProjectName').text(summary.project);
        $('#summaryBudget').text(formatRupiah(summary.total_budget));
        $('#summaryActual').text(formatRupiah(summary.total_actual_net));

        $('#summaryDifference').html(`
            <strong class="${summaryDiffClass}" style="font-size:13pt;">
                <i class="fas ${summaryDiffIcon} me-1"></i>${formatRupiah(summaryDiffValue)}
            </strong>
        `);

        $('#tableSummary').show();

        $('#tableResult').DataTable({
            language: {
                url: '{{ asset("assets/datatables/id.json") }}'
            },
            pageLength: 25,
            order: [[2, 'asc'], [3, 'asc']],
            columnDefs: [
                { orderable: false, targets: [0] },
                { className: 'text-center', targets: [0] }
            ],
            responsive: false,
            autoWidth: false,
            drawCallback: function(settings) {
                $('.detail-row').remove();
                $('.btn-toggle-detail').removeClass('expanded');
                $('.btn-toggle-detail i')
                    .removeClass('fa-chevron-up')
                    .addClass('fa-chevron-down');
            }
        });

        // Sembunyikan filter status di mode per-project (tidak ada kolom status)
        $('#statusFilterWrap').hide();
        if ($.fn.DataTable.isDataTable('#tableResult')) {
            $('#tableResult').DataTable().draw();
        }

        $('#resultCard').fadeIn();

    } else {

        Swal.fire({
            icon: 'info',
            title: 'No Data',
            text: 'Tidak ada data untuk project yang dipilih'
        });

        $('#resultCard').hide();
    }
}
    /**
     * Toggle detail row untuk melihat detail mutasi
     */
    function toggleDetail(rowId, projectId, detailKategoriId) {
        let detailRow = $(`#detail-${rowId}`);
        const button = $(`.main-row[data-row-id="${rowId}"] .btn-toggle-detail`);
        const mainRow = $(`.main-row[data-row-id="${rowId}"]`);
        
        // Jika detail row belum ada, buat dulu
        if (detailRow.length === 0) {
            const detailRowHtml = `
                <tr class="detail-row" id="detail-${rowId}" style="display: none;">
                    <td colspan="7" class="detail-content">
                        <div class="loading-detail">
                            <i class="fas fa-spinner fa-spin"></i> Loading detail...
                        </div>
                    </td>
                </tr>
            `;
            mainRow.after(detailRowHtml);
            detailRow = $(`#detail-${rowId}`);
        }
        
        // Toggle visibility
        if (detailRow.hasClass('show')) {
            // Hide detail
            detailRow.removeClass('show').hide();
            button.removeClass('expanded');
            button.find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
        } else {
            // Show detail and load data if not loaded yet
            detailRow.addClass('show').show();
            button.addClass('expanded');
            button.find('i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
            
            // Check if already loaded
            if (!detailRow.hasClass('loaded')) {
                loadDetailMutasi(rowId, projectId, detailKategoriId);
            }
        }
    }

    /**
     * Load detail mutasi dari server
     */
   function loadDetailMutasi(rowId, projectId, detailKategoriId) {
    const detailRow = $(`#detail-${rowId}`);
    const contentCell = detailRow.find('.detail-content');
    
    $.ajax({
        url: '{{ route("rptdif.api.detail-mutasi") }}',
        type: 'GET',
        data: {
            project_id: projectId,
            detail_kategori_id: detailKategoriId
        },
        dataType: 'json',
        success: function(response) {
            if (response.success) {
                const allDetails = response.data;
                // Hanya tampilkan mutasi keluar (is_in = 0)
                const details = allDetails.filter(function(item) {
                    return parseInt(item.is_in) === 0;
                });
                
                if (details.length > 0) {

                    // Determine if this is Non-PO (no po_number)
                    const isNonPO = details[0].keterangan !== null && details[0].keterangan !== undefined;
                    const totalColspan = isNonPO ? 12 : 11;

                    let tableHtml = `
                        <style>
                            .detail-table th,
                            .detail-table td{
                                font-size:10pt !important;
                                padding:4px 4px !important;
                                vertical-align:middle;
                            }
                        </style>

                        <div class="p-2">
                            <h6 class="mb-3" style="font-size:10pt !important;">
                                <i class="fas fa-list-ul me-2"></i>
                                Detail Mutasi Keluar ${isNonPO ? '- Non PO' : ''}
                            </h6>

                            <table class="table table-sm table-bordered detail-table" style="font-size:10pt !important; white-space: nowrap;">
                                <thead>
                                    <tr>
                                        <th class="text-center" style="width:36px">No</th>
                                        <th class="text-center" style="width:120px">Tanggal</th>
                                        ${isNonPO ? '<th class="text-center" style="min-width:140px">Keterangan</th>' : ''}
                                        <th class="text-center" style="min-width:120px">Bank</th>
                                        <th class="text-center" style="min-width:120px">No. Rekening</th>
                                        <th class="text-center" style="min-width:130px">No. Bukti</th>
                                        <th class="text-center" style="min-width:115px">Kode Mutasi</th>
                                        <th class="text-center" style="min-width:115px">No. PO</th>
                                        <th class="text-center" style="width:130px">Gross Amount</th>
                                        <th class="text-center" style="width:130px">Potongan Bon</th>
                                        <th class="text-center" style="width:130px">Diskon</th>

                                        <th class="text-center" style="width:130px">Net Amount</th>
                                        <th class="text-center" style="width:100px">PPN</th>
                                    </tr>
                                </thead>
                                <tbody>
                    `;
                    
                    let totalAmount = 0;
                    let totalPpn = 0;

                    details.forEach(function(item, index) {
                        const amount = parseFloat(item.amount) || 0;
                        const ppn = parseFloat(item.ppn_amount) || 0;
                        totalAmount += amount;
                        totalPpn += ppn;

                        const grossAmount = parseFloat(item.gross_amount_rupiah) || 0;
                        const diskon = parseFloat(item.diskon) || 0;
                        const potonganBon = parseFloat(item.potongan_bon) || 0;

                        tableHtml += `
                            <tr style="background-color:#ffe6f0;">
                                <td class="text-center">${index + 1}</td>
                                <td>${formatDate(item.tgl_mutasi)}</td>
                                ${isNonPO ? `<td>${item.keterangan || '-'}</td>` : ''}
                                <td>${item.bank_name || '-'}</td>
                                <td>${item.nomor_akun || '-'}</td>
                                <td>${item.ref_number || '-'}</td>
                                <td>${item.kode_mutasi || '-'}</td>
                                <td class="${item.po_number ? 'text-start' : 'text-center'}">${item.po_number || '-'}</td>
                                <td class="text-end">${formatRupiah(grossAmount)}</td>
                                <td class="text-end">${formatRupiah(diskon)}</td>
                                <td class="text-end">${formatRupiah(potonganBon)}</td>
                                <td class="text-end">${formatRupiah(item.amount)}</td>
                                <td class="text-end">${formatRupiah(item.ppn_amount || 0)}</td>
                            </tr>
                        `;
                    });

                    const totalNet = totalAmount + totalPpn;

                    tableHtml += `
                                </tbody>
                                <tfoot>
                                    <tr class="bg-light">
                                        <td colspan="${totalColspan}" class="text-end">
                                            <strong>TOTAL KELUAR (Net Amount + PPN) : </strong>
                                        </td>
                                        <td class="text-end text-danger">
                                            <strong>${formatRupiah(totalNet)}</strong>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    `;

                    contentCell.html(tableHtml);

                } else {
                    contentCell.html('<div class="p-3 text-center text-muted"><i class="fas fa-info-circle me-2"></i>Tidak ada detail mutasi</div>');
                }
                
                detailRow.addClass('loaded');

            } else {
                contentCell.html('<div class="p-3 text-center text-danger"><i class="fas fa-exclamation-circle me-2"></i>Error: ' + response.message + '</div>');
            }
        },
        error: function(xhr) {
            contentCell.html('<div class="p-3 text-center text-danger"><i class="fas fa-exclamation-circle me-2"></i>Error loading detail</div>');
        }
    });
}

    /**
     * Format date to Indonesian format
     */
    function formatDate(dateString) {
        const date = new Date(dateString);

        const bulan = ["Jan","Feb","Mar","Apr","Mei","Jun","Jul","Agu","Sep","Okt","Nov","Des"];

        const day = date.getDate();
        const month = bulan[date.getMonth()];
        const year = date.getFullYear();

        let hours = date.getHours();
        const minutes = String(date.getMinutes()).padStart(2, '0');

        const ampm = hours >= 12 ? 'PM' : 'AM';
        hours = hours % 12 || 12;

        return `${day}-${month}-${year} ${String(hours).padStart(2,'0')}:${minutes} ${ampm}`;
    }

    /**
     * Hitung persentase realisasi (Actual / Budget * 100)
     * Jika Budget = 0, return null (tampilkan "-")
     */
    function getPersentase(budget, actual) {
        const b = parseFloat(budget) || 0;
        const a = parseFloat(actual) || 0;
        if (b <= 0) return 0;
        return (a / b) * 100;
    }

    /**
     * Format number to Rupiah
     */
    function formatRupiah(amount) {
        const number = parseFloat(amount);
        const formatted = new Intl.NumberFormat('id-ID', {
            style: 'currency',
            currency: 'IDR',
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        }).format(number);
        return formatted;
    }

    /**
     * Export table to Excel
     */
function exportToExcel() {

    const projectId = $('#project_id').val();
    const isAllProject = !projectId || projectId === '';

    const projectName = $('#project_name').val() || 'All_Projects';
    const detailKategori = $('#detail_kategori_name').val();

    const filterText = (detailKategori && detailKategori !== '')
        ? `_${detailKategori.replace(/[^a-zA-Z0-9]/g, '_')}`
        : '';

    const fileName = `Report_Budget_vs_Actual_${projectName.replace(/[^a-zA-Z0-9]/g, '_')}${filterText}_${new Date().getTime()}.xls`;

    let htmlContent = `
        <html>
        <head><meta charset="UTF-8"></head>
        <body>
        <table border="1">
    `;

    // =========================
    // HEADER
    // =========================
    htmlContent += '<thead><tr style="background:#d3d3d3;font-weight:bold;">';

    if (isAllProject) {
        htmlContent += `
            <th>Project</th>
            <th>Total  Budget</th>
            <th>Total Actual</th>
            <th>Difference</th>
            <th>% Realisasi</th>
            <th>Status Pengisian</th>
        `;
    } else {
        htmlContent += `
            <th>Project</th>
            <th>Kategori</th>
            <th>Detail Kategori</th>
            <th>Total Budget</th>
            <th>Total Actual (Mutasi)</th>
            <th>Difference</th>
        `;
    }

    htmlContent += '</tr></thead>';

    // =========================
    // BODY
    // =========================
    htmlContent += '<tbody>';

    const table = $('#tableResult').DataTable();

    table.rows().every(function () {

        const rowNode = this.node();
        const cells = $(rowNode).find('td');

        htmlContent += '<tr>';

        cells.each(function (index) {

            // skip action column
            if (index === 0) return;

            const text = $(this)
                .clone()
                .find('i,button')
                .remove()
                .end()
                .text()
                .trim();

            if (isAllProject) {

                // ALL PROJECT:
                // index: 1=Project, 2=Budget, 3=Actual, 4=Diff, 5=%Realisasi, 6=Status

                if (index === 2 || index === 3 || index === 4) {
                    let num = text.replace(/[^\d,-]/g, '').replace(',', '.');
                    htmlContent += `<td style="text-align:right;mso-number-format:'#,##0.00';">${num}</td>`;
                } else if (index === 5) {
                    htmlContent += `<td style="text-align:right;">${text}</td>`;
                } else if (index === 6) {
                    htmlContent += `<td style="text-align:center;">${text}</td>`;
                } else {
                    htmlContent += `<td>${text}</td>`;
                }

            } else {

                // FILTER MODE:
                // index: 1=Project,2=Kategori,3=Detail,4+=angka

                if (index >= 4) {
                    let num = text.replace(/[^\d,-]/g, '').replace(',', '.');
                    htmlContent += `<td style="text-align:right;mso-number-format:'#,##0.00';">${num}</td>`;
                } else {
                    htmlContent += `<td>${text}</td>`;
                }
            }

        });

        htmlContent += '</tr>';
    });

    htmlContent += '</tbody>';

    // =========================
    // FOOTER
    // =========================
    htmlContent += '<tfoot>';
    htmlContent += '<tr style="background:#d3d3d3;font-weight:bold;">';

    const budget = $('#summaryBudget').text().replace(/[^\d,-]/g, '').replace(',', '.');
    const actual = $('#summaryActual').text().replace(/[^\d,-]/g, '').replace(',', '.');
    let diff = $('#summaryDifference').text().replace(/[^\d,-]/g, '').replace(',', '.');

    if ($('#summaryDifference').text().includes('-') && !diff.startsWith('-')) {
        diff = '-' + diff;
    }

    if (isAllProject) {

        // Get grand total % from footer ID (hasil fix #3)
        const grandPctText = $('#summaryPersentase').text().trim() || '-';

        htmlContent += `
            <td style="text-align:center;">TOTAL</td>
            <td style="text-align:right;mso-number-format:'#,##0.00';">${budget}</td>
            <td style="text-align:right;mso-number-format:'#,##0.00';">${actual}</td>
            <td style="text-align:right;mso-number-format:'#,##0.00';">${diff}</td>
            <td style="text-align:right;">${grandPctText}</td>
            <td style="text-align:center;">&nbsp;</td>
        `;

    } else {

        htmlContent += `
            <td colspan="3" style="text-align:center;">
                TOTAL
            </td>
            <td style="text-align:right;mso-number-format:'#,##0.00';">${budget}</td>
            <td style="text-align:right;mso-number-format:'#,##0.00';">${actual}</td>
            <td style="text-align:right;mso-number-format:'#,##0.00';">${diff}</td>
        `;
    }

    htmlContent += '</tr>';
    htmlContent += '</tfoot>';

    // =========================
    // CLOSE
    // =========================
    htmlContent += `
        </table>
        </body>
        </html>
    `;

    // =========================
    // DOWNLOAD
    // =========================
    const blob = new Blob([htmlContent], {
        type: 'application/vnd.ms-excel'
    });

    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    link.click();

    Swal.fire({
        icon: 'success',
        title: 'Success',
        text: 'Report exported successfully',
        timer: 1500,
        showConfirmButton: false
    });
}
</script>
@endpush