@extends(request()->has('_sphf_partial') ? 'theme.sphf.layouts.partial' : 'theme.sphf.layouts.app')

@section('content')
<section class="sphf-page sphf-under-progress" id="sphfFinancialDelaysPage" data-ajax-url="{{ route('theme.sphf.financial-delays') }}">
    <div class="sphf-page-tabs mt-2">
        <a href="{{ route('theme.sphf.live-dss') }}"
           class="sphf-page-tab {{ request()->routeIs('theme.sphf.live-dss') ? 'is-active' : '' }}">
            Live DSS
        </a>

        <a href="{{ route('theme.sphf.stage-bottlenecks') }}"
           class="sphf-page-tab {{ request()->routeIs('theme.sphf.stage-bottlenecks') ? 'is-active' : '' }}">
            Stage Bottlenecks
        </a>
        <a href="{{ route('theme.sphf.financial-delays') }}"
           class="sphf-page-tab {{ request()->routeIs('theme.sphf.financial-delays') ? 'is-active' : '' }}">
            Financial Delays
        </a>
        <div style="margin-left:auto;">
            <button type="button" class="sphf-export-btn" data-sphf-export-btn="true" data-export-target="#sphfFinancialExportArea" data-export-file="SPHF_Financial_Delays_Report" data-export-bg="#f3f5f6">
                <i class="ki-filled ki-exit-down"></i>
                <span>Export</span>
            </button>
        </div>
    </div>

    <div class="sphf-export-area" id="sphfFinancialExportArea">
        @include('theme.sphf.partials.filter-bar', [
            'options' => $filterOptions ?? [],
            'selected' => $selectedFilters ?? [],
        ])

        <div class="sphf-up-financial-grid">
            <article class="sphf-up-card sphf-up-card--chart" id="sphfFinancialDelayHealthCard">
                <div class="sphf-up-card__header">
                    <h3 class="sphf-up-card__title">Financial Delay Health</h3>
                </div>
                <div class="sphf-up-card__body sphf-up-card__body--chart">
                    <div id="donutChart" class="sphf-up-chart"></div>
                </div>
            </article>

            <article class="sphf-up-card sphf-up-card--chart" id="sphfFinancialTrancheCard">
                <div class="sphf-up-card__header">
                    <h3 class="sphf-up-card__title">Tranche Release vs Withdrawal</h3>
                </div>
                <div class="sphf-up-card__body sphf-up-card__body--chart">
                    <div id="trancheChart" class="sphf-up-chart"></div>
                </div>
            </article>

            <article class="sphf-up-card sphf-up-card--chart" id="sphfFinancialBankCard">
                <div class="sphf-up-card__header">
                    <h3 class="sphf-up-card__title">Bank Bottlenecks</h3>
                </div>
                <div class="sphf-up-card__body sphf-up-card__body--chart">
                    <div id="bankChart" class="sphf-up-chart"></div>
                </div>
            </article>


        </div>

        <section class="sphf-up-table-card">
            <div class="sphf-up-table-card__header">
                <h3 class="sphf-up-table-card__title">Withdrawal Date Based Financial Alerts</h3>
                <span class="sphf-up-badge is-green">Now Possible</span>
            </div>
            <div class="sphf-table-wrap">
                <table class="sphf-table">
                    <thead>
                        <tr>
                            <th>Financial Event</th>
                            <th>Cases</th>
                            <th>Avg Days</th>
                            <th>Red Cases</th>
                            <th>Likely Reason</th>
                            <th>Decision</th>
                        </tr>
                    </thead>
                    <tbody id="financialAlertsBody">
                        <tr>
                            <td colspan="6" class="sphf-rbmf-preview__message">Loading...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</section>
@endsection

@section('scripts')
<script src="{{ asset('assets/vendors/apexcharts/apexcharts.min.js') }}"></script>
<script src="{{ asset('theme/default/assets/js/chart-toolbar.js') }}"></script>
<script>
window.sphfFinancialAjaxUrl = @json(route('theme.sphf.financial-delays'));

document.addEventListener('DOMContentLoaded', function () {
    const attachFinancialToolbar = function (key, chartInstance, containerId, chartTitle, retries = 8) {
        const container = document.getElementById(containerId);
        if (!chartInstance || !container || typeof window.ChartToolbar === 'undefined') {
            if (retries > 0) {
                window.setTimeout(function () {
                    attachFinancialToolbar(key, chartInstance, containerId, chartTitle, retries - 1);
                }, 150);
            }
            return;
        }

        if (window[key] && typeof window[key].destroy === 'function') {
            window[key].destroy();
        }

        container.querySelectorAll('.ct-toolbar, .ct-table-wrapper, .ct-back-btn').forEach(function (el) {
            el.remove();
        });

        window[key] = new window.ChartToolbar({
            chartInstance: chartInstance,
            container: container,
            chartTitle: chartTitle,
        });
    };

    const renderFinancialChart = function (key, selector, containerId, chartTitle, options) {
        const element = document.querySelector(selector);
        if (!element || typeof ApexCharts === 'undefined') {
            return;
        }

        element.innerHTML = '';

        // Destroy stored chart instance for this key if exists
        try {
            const existing = window[key + 'ChartInstance'];
            if (existing && typeof existing.destroy === 'function') {
                try { existing.destroy(); } catch (e) { /* ignore */ }
            }
        } catch (e) {}

        const chart = new ApexCharts(element, options);
        Promise.resolve(chart.render()).then(function () {
            attachFinancialToolbar(key, chart, containerId, chartTitle);
            try { window[key + 'ChartInstance'] = chart; } catch (e) {}
        });

        return chart;
    };

    // Render demo placeholders immediately so page isn't empty while AJAX loads
    (function renderDemoPlaceholders() {
        try {
            // Demo tranche chart
            renderFinancialChart('sphfFinancialTrancheToolbar', '#trancheChart', 'sphfFinancialTrancheCard', 'Tranche Release vs Withdrawal', {
                chart: { type: 'bar', height: 220, toolbar: { show: false }, fontFamily: 'Inter, sans-serif' },
                series: [
                    { name: 'Released', data: [1200, 980, 760, 430] },
                    { name: 'Withdrawn', data: [900, 740, 560, 310] }
                ],
                xaxis: { categories: ['1st','2nd','3rd','4th'] },
                colors: ['#2563eb', '#16a34a'],
                dataLabels: { enabled: false },
                legend: { position: 'top', fontSize: '12px' },
                grid: { borderColor: '#eef2f6', strokeDashArray: 2 }
            });

            // Demo health donut
            renderFinancialChart('sphfFinancialDelayHealthToolbar', '#donutChart', 'sphfFinancialDelayHealthCard', 'Financial Delay Health', {
                chart: { type: 'donut', height: 220, toolbar: { show: false }, fontFamily: 'Inter, sans-serif' },
                series: [55, 20, 15, 10],
                labels: ['Green','Yellow','Amber','Red'],
                colors: ['#16a34a', '#facc15', '#f59e0b', '#ef4444'],
                legend: { position: 'bottom', fontSize: '12px' }
            });

            // Demo bank chart (top-5)
            renderFinancialChart('sphfFinancialBankToolbar', '#bankChart', 'sphfFinancialBankCard', 'Bank Bottlenecks', {
                chart: { type: 'bar', height: 360, toolbar: { show: false }, fontFamily: 'Inter, sans-serif' },
                series: [{ name: 'Cases', data: [480, 420, 360, 310, 280] }],
                xaxis: { categories: ['Bank A','Bank B','Bank C','Bank D','Bank E'] },
                plotOptions: { bar: { horizontal: true, borderRadius: 4 } },
                colors: ['#f97316'],
                dataLabels: { enabled: false },
                grid: { borderColor: '#eef2f6', strokeDashArray: 2 }
            });

            // Store demo top-5 table HTML so fullscreen exit restores the demo compact view until real data arrives.
            try {
                window._sphfBankTop5TableHtml = (function demoBankTable() {
                    const cats = ['Bank A','Bank B','Bank C','Bank D','Bank E'];
                    const series = [{ name: 'Cases', data: [480,420,360,310,280] }];
                    const hdrCols = ['Bank'].concat(series.map(s => escHtml(s.name || '')));
                    const rows = cats.map(function (cat, idx) {
                        const cols = [escHtml(cat)];
                        series.forEach(function (s) { cols.push(escHtml(String((s.data||[])[idx] || 0))); });
                        return '<tr>' + cols.map(function (c) { return '<td>' + c + '</td>'; }).join('') + '</tr>';
                    });
                    return '<div class="ct-table-wrapper"><table class="ct-table"><thead><tr>' + hdrCols.map(function (c) { return '<th>' + c + '</th>'; }).join('') + '</tr></thead><tbody>' + rows.join('') + '</tbody></table></div>';
                })();
            } catch (e) { /* ignore */ }

            // Demo table rows
            const tbody = document.getElementById('financialAlertsBody');
            if (tbody) {
                tbody.innerHTML = [
                    '<tr><td>Withdrawal after 1st tranche delayed</td><td>1,234</td><td>42</td><td><span class="sphf-up-status is-red">123</span></td><td>Account activation issue</td><td>Escalate to bank focal person</td></tr>',
                    '<tr><td>Withdrawal after 2nd tranche delayed</td><td>678</td><td>28</td><td><span class="sphf-up-status is-green">12</span></td><td>CNIC mismatch</td><td>Data correction</td></tr>'
                ].join('');
            }
        } catch (e) {
            // ignore demo render errors
        }
    })();

    // Process server-provided or AJAX data into charts/tables
    function processFinancialData(data) {
        if (!data) return;

        const trancheData = (data.charts || {}).tranche_release_vs_withdrawal || null;
        if (trancheData) {
            renderFinancialChart('sphfFinancialTrancheToolbar', '#trancheChart', 'sphfFinancialTrancheCard', 'Tranche Release vs Withdrawal', {
                chart: { type: 'bar', height: 220, toolbar: { show: false }, fontFamily: 'Inter, sans-serif' },
                series: trancheData.series || [],
                xaxis: { categories: trancheData.categories || [] },
                colors: ['#2563eb', '#16a34a'],
                dataLabels: { enabled: false },
                legend: { position: 'top', fontSize: '12px' },
                grid: { borderColor: '#eef2f6', strokeDashArray: 2 }
            });
        }

        // Populate the Withdrawal Date Based Financial Alerts table
        const alerts = (data.table || {}).withdrawal_alerts || null;
        if (alerts && Array.isArray(alerts)) {
            const tbody = document.getElementById('financialAlertsBody');
            if (tbody) {
                if (alerts.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="6" class="sphf-rbmf-preview__message">No alerts</td></tr>';
                } else {
                    tbody.innerHTML = alerts.map(function (row) {
                        const severity = row.red_cases && row.red_cases > 0 ? 'is-red' : 'is-green';
                        return '<tr>' +
                            '<td>' + (row.financial_event || '') + '</td>' +
                            '<td>' + (row.cases || 0).toLocaleString() + '</td>' +
                            '<td>' + (row.avg_days || 0) + '</td>' +
                            '<td><span class="sphf-up-status ' + severity + '">' + (row.red_cases || 0).toLocaleString() + '</span></td>' +
                            '<td>' + (row.likely_reason || '') + '</td>' +
                            '<td>' + (row.decision || '') + '</td>' +
                            '</tr>';
                    }).join('');
                }
            }
        }

        const health = (data.charts || {}).financial_delay_health || null;
        if (health) {
            const options = {
                chart: { type: 'donut', height: 220, toolbar: { show: false }, fontFamily: 'Inter, sans-serif' },
                series: health.series || [0,0,0,0],
                labels: health.labels || ['Green','Yellow','Amber','Red'],
                colors: ['#16a34a', '#facc15', '#f59e0b', '#ef4444'],
                legend: { position: 'bottom', fontSize: '12px' }
            };
            renderFinancialChart('sphfFinancialDelayHealthToolbar', '#donutChart', 'sphfFinancialDelayHealthCard', 'Financial Delay Health', options);
        }

        const bankChartData = (data.charts || {}).bank_bottlenecks || null;
        // store full dataset for potential fullscreen rendering
        window._sphfBankFullData = bankChartData || null;
        if (bankChartData) {
            // Render top-5 entries in the card for compact view
            const maxVisible = 5;
            const fullCats = bankChartData.categories || [];
            const visibleCats = fullCats.slice(0, maxVisible);

            const fullSeries = (bankChartData.series || []).map(s => ({ name: s.name, data: s.data || [] }));
            const visibleSeries = fullSeries.map(s => ({ name: s.name, data: (s.data || []).slice(0, maxVisible) }));

            // Build and store a compact top-5 HTML table representation for the bank card.
            // This will be used to restore the table when exiting fullscreen to avoid demo/dummy rows.
            try {
                window._sphfBankTop5TableHtml = (function buildBankTableHtml(categories, series) {
                    const hdrCols = ['Bank'].concat(series.map(s => escHtml(s.name || '')));
                    const rows = (categories || []).map(function (cat, idx) {
                        const cols = [escHtml(String(cat || ''))];
                        series.forEach(function (s) { cols.push(escHtml(String((s.data||[])[idx] || 0))); });
                        return '<tr>' + cols.map(function (c) { return '<td>' + c + '</td>'; }).join('') + '</tr>';
                    });
                    return '<div class="ct-table-wrapper">'
                        + '<table class="ct-table">'
                        + '<thead><tr>' + hdrCols.map(function (c) { return '<th>' + c + '</th>'; }).join('') + '</tr></thead>'
                        + '<tbody>' + rows.join('') + '</tbody>'
                        + '</table></div>';
                })(visibleCats, visibleSeries);
            } catch (e) {
                // ignore table build errors
            }

            const catCount = Math.max(visibleCats.length, 1);
            const computedHeight = Math.min(1400, Math.max(360, catCount * 30 + 100));

            const existingChart = window['sphfFinancialBankToolbarChartInstance'];
            if (existingChart && typeof existingChart.updateOptions === 'function') {
                try {
                    existingChart.updateOptions({ chart: { height: computedHeight }, xaxis: { categories: visibleCats } }, false, true);
                    existingChart.updateSeries(visibleSeries, true);
                } catch (e) {
                    renderFinancialChart('sphfFinancialBankToolbar', '#bankChart', 'sphfFinancialBankCard', 'Bank Bottlenecks', {
                        chart: { type: 'bar', height: computedHeight, toolbar: { show: false }, fontFamily: 'Inter, sans-serif' },
                        series: visibleSeries,
                        xaxis: { categories: visibleCats },
                        plotOptions: { bar: { horizontal: true, borderRadius: 4 } },
                        colors: ['#f97316'],
                        dataLabels: { enabled: false },
                        grid: { borderColor: '#eef2f6', strokeDashArray: 2 }
                    });
                }
            } else {
                renderFinancialChart('sphfFinancialBankToolbar', '#bankChart', 'sphfFinancialBankCard', 'Bank Bottlenecks', {
                    chart: { type: 'bar', height: computedHeight, toolbar: { show: false }, fontFamily: 'Inter, sans-serif' },
                    series: visibleSeries,
                    xaxis: { categories: visibleCats },
                    plotOptions: { bar: { horizontal: true, borderRadius: 4 } },
                    colors: ['#f97316'],
                    dataLabels: { enabled: false },
                    grid: { borderColor: '#eef2f6', strokeDashArray: 2 }
                });
            }
        }

        // Listen for fullscreen changes once; when the bank card enters fullscreen
        // update the existing chart instance with full dataset, and revert to top-5 when exiting.
        if (!window._sphfBankFsListenerAdded) {
            window._sphfBankFsListenerAdded = true;
            document.addEventListener('fullscreenchange', function () {
            const bankCard = document.getElementById('sphfFinancialBankCard');
            const isFs = (document.fullscreenElement === bankCard || document.webkitFullscreenElement === bankCard);
            const fullData = window._sphfBankFullData;
            if (!fullData) return;

            const chartInst = window['sphfFinancialBankToolbarChartInstance'];
            if (!chartInst || typeof chartInst.updateOptions !== 'function') return;

            if (isFs) {
                const fullCats = fullData.categories || [];
                const fullSeries = (fullData.series || []).map(s => ({ name: s.name, data: s.data || [] }));
                const catCount = Math.max(fullCats.length, 1);
                const computedHeight = Math.min(1400, Math.max(480, catCount * 30 + 160));

                try {
                    chartInst.updateOptions({ chart: { height: computedHeight }, xaxis: { categories: fullCats } }, false, true);
                    chartInst.updateSeries(fullSeries, true);
                } catch (e) {
                    // fallback: re-render
                    renderFinancialChart('sphfFinancialBankToolbar', '#bankChart', 'sphfFinancialBankCard', 'Bank Bottlenecks', {
                        chart: { type: 'bar', height: computedHeight, toolbar: { show: false }, fontFamily: 'Inter, sans-serif' },
                        series: fullSeries,
                        xaxis: { categories: fullCats },
                        plotOptions: { bar: { horizontal: true, borderRadius: 4 } },
                        colors: ['#f97316'],
                        dataLabels: { enabled: false },
                        grid: { borderColor: '#eef2f6', strokeDashArray: 2 }
                    });
                }
            } else {
                // revert to top-5
                const maxVisible = 5;
                const fullCats = fullData.categories || [];
                const visibleCats = fullCats.slice(0, maxVisible);
                const fullSeries = (fullData.series || []).map(s => ({ name: s.name, data: s.data || [] }));
                const visibleSeries = fullSeries.map(s => ({ name: s.name, data: (s.data || []).slice(0, maxVisible) }));
                const catCount = Math.max(visibleCats.length, 1);
                const computedHeight = Math.min(1400, Math.max(360, catCount * 30 + 100));

                try {
                    chartInst.updateOptions({ chart: { height: computedHeight }, xaxis: { categories: visibleCats } }, false, true);
                    chartInst.updateSeries(visibleSeries, true);
                } catch (e) {
                    renderFinancialChart('sphfFinancialBankToolbar', '#bankChart', 'sphfFinancialBankCard', 'Bank Bottlenecks', {
                        chart: { type: 'bar', height: computedHeight, toolbar: { show: false }, fontFamily: 'Inter, sans-serif' },
                        series: visibleSeries,
                        xaxis: { categories: visibleCats },
                        plotOptions: { bar: { horizontal: true, borderRadius: 4 } },
                        colors: ['#f97316'],
                        dataLabels: { enabled: false },
                        grid: { borderColor: '#eef2f6', strokeDashArray: 2 }
                    });
                }

                // Restore the saved compact top-5 table HTML (if any) to avoid demo/dummy rows.
                try {
                    const tableWrapper = bankCard ? bankCard.querySelector('.ct-table-wrapper') : null;
                    if (tableWrapper && window._sphfBankTop5TableHtml) tableWrapper.innerHTML = window._sphfBankTop5TableHtml;
                } catch (e) { /* ignore */ }
                // Try again shortly after in case the toolbar/table is (re)attached asynchronously.
                try { setTimeout(function () {
                    const tableWrapper2 = bankCard ? bankCard.querySelector('.ct-table-wrapper') : null;
                    if (tableWrapper2 && window._sphfBankTop5TableHtml) tableWrapper2.innerHTML = window._sphfBankTop5TableHtml;
                }, 150); } catch (e) { /* ignore */ }
            }
        });
        }
    } // end processFinancialData

    // ── Filter helpers (same pattern as IP Performance) ──────────────────────

    function escHtml(str) {
        return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    function buildFilterParams(form) {
        const params = new URLSearchParams();
        form.querySelectorAll('.sphf-filter-item').forEach(function (item) {
            const checkboxes = item.querySelectorAll('input.filter-item[name]');
            if (!checkboxes.length) return;
            const name = checkboxes[0].getAttribute('name') || '';
            const selected = [];
            checkboxes.forEach(function (cb) { if (cb.checked) selected.push(String(cb.value||'').trim()); });
            const total = checkboxes.length;
            if (selected.length === 0 || selected.length === total) return;
            selected.forEach(function (v) { params.append(name, v); });
        });
        return params;
    }

    function refreshFilterOptions(form, filterOptions) {
        if (!form || !filterOptions) return;
        const filterMap = {
            'ifi-name':'ifi_name','ip-wise':'ip_wise','districts':'districts','tehsils':'tehsils',
            'bank-name':'bank_name','branches':'branches','beneficiary':'beneficiary','uuid':'uuid',
        };
        Object.entries(filterMap).forEach(function ([filterName, optionKey]) {
            const options = Array.isArray(filterOptions[optionKey]) ? filterOptions[optionKey] : [];
            if (!options.length) return;
            const item = form.querySelector('.sphf-filter-item[data-filter-name="' + filterName + '"]');
            if (!item) return;
            const list = item.querySelector('ul.dropdown-list');
            if (!list) return;
            const existingCb = item.querySelector('input.filter-item[name]');
            if (!existingCb) return;
            const inputName = existingCb.getAttribute('name');
            const allLi = list.querySelector('li:first-child');
            Array.from(list.querySelectorAll('li')).forEach(function (li) { if (li !== allLi) li.remove(); });
            options.forEach(function (option) {
                const optStr = String(option);
                const slug = optStr.toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,'');
                const id = filterName + '-' + slug;
                const li = document.createElement('li');
                li.className = 'dropdown-list-item flex items-center gap-2.5 px-3 py-2 mx-1 my-0.5 rounded-md hover:bg-[#eaf5ef] cursor-pointer transition-colors duration-150';
                li.innerHTML = '<input id="'+escHtml(id)+'" type="checkbox" class="filter-item w-4 h-4 rounded border-gray-300 text-[#0a9a4c] focus:ring-[#0a9a4c] cursor-pointer" value="'+escHtml(optStr)+'" name="'+escHtml(inputName)+'" checked>'
                    +'<label for="'+escHtml(id)+'" class="cursor-pointer flex-1 text-[13px] font-semibold text-[#1e293b] select-none m-0">'+escHtml(optStr)+'</label>';
                list.appendChild(li);
            });
            const selectAllCb = allLi ? allLi.querySelector('input.filter-all') : null;
            if (selectAllCb) selectAllCb.checked = true;
            const perPage = parseInt(item.dataset.filterPerPage || '50', 10);
            const looksTruncated = options.length >= perPage;
            item.dataset.filterLoaded  = String(options.length);
            item.dataset.filterTotal   = String(options.length);
            item.dataset.filterHasMore = looksTruncated ? 'true' : 'false';
            item.dataset.filterPage    = '2';
            item.dataset.filterStale   = 'true';
        });
    }

    function syncFilterFormFromUrl(urlLike) {
        const form = document.getElementById('sphfFilterForm');
        if (!form) return;
        const url = new URL(urlLike || window.location.href, window.location.origin);
        const state = new Map();
        url.searchParams.forEach(function (value, key) {
            const m = key.match(/^filters\[([^\]]+)\]\[\]$/);
            if (!m) return;
            if (!state.has(m[1])) state.set(m[1], new Set());
            state.get(m[1]).add(String(value).trim());
        });
        form.querySelectorAll('.sphf-filter-item').forEach(function (item) {
            const checkboxes = item.querySelectorAll('input.filter-item[name]');
            if (!checkboxes.length) return;
            const name = (checkboxes[0].getAttribute('name') || '').match(/^filters\[([^\]]+)\]\[\]$/);
            if (!name) return;
            const filterKey = name[1];
            const selectedSet = state.get(filterKey) || new Set();
            const hasExplicit = selectedSet.size > 0;
            checkboxes.forEach(function (cb) {
                cb.checked = hasExplicit ? selectedSet.has(String(cb.value||'').trim()) : true;
            });
            const selectAll = item.querySelector('input.filter-all');
            if (selectAll) {
                const checked = item.querySelectorAll('input.filter-item:checked').length;
                selectAll.checked = checkboxes.length > 0 && checked === checkboxes.length;
            }
        });
        const badge = document.getElementById('sphfActiveFiltersBadge');
        if (badge) {
            let count = 0;
            form.querySelectorAll('.sphf-filter-item').forEach(function (item) {
                const cbs = item.querySelectorAll('input.filter-item[name]');
                let sel = 0; cbs.forEach(function (cb) { if (cb.checked) sel++; });
                if (sel > 0 && sel < cbs.length) count++;
            });
            badge.textContent = 'Active: ' + count;
        }
    }

    function setLoadingState(isLoading) {
        const page = document.getElementById('sphfFinancialDelaysPage');
        if (page) {
            page.style.opacity = isLoading ? '0.6' : '1';
            page.style.pointerEvents = isLoading ? 'none' : 'auto';
        }
        let loader = document.getElementById('sphfFilterLoader');
        if (!loader) {
            loader = document.createElement('div');
            loader.id = 'sphfFilterLoader';
            const spinner = document.createElement('div');
            spinner.id = 'sphfFilterSpinner';
            loader.appendChild(spinner);
            document.body.appendChild(loader);
        }
        if (isLoading) {
            loader.classList.add('is-active');
        } else {
            loader.classList.remove('is-active');
        }
    }

    function fetchWithFilters(url, pushState) {
        const reqUrl = new URL(url, window.location.origin);
        reqUrl.searchParams.set('ajax', '1');

        setLoadingState(true);

        fetch(reqUrl.toString(), { headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                processFinancialData(data);
                const form = document.getElementById('sphfFilterForm');
                if (form && data.filter_options) refreshFilterOptions(form, data.filter_options);
                const browserUrl = new URL(reqUrl.toString());
                browserUrl.searchParams.delete('ajax');
                if (pushState) window.history.pushState({}, '', browserUrl.toString());
                syncFilterFormFromUrl(browserUrl.toString());
            })
            .catch(function (e) { console.error('[Financial Delays AJAX]', e); })
            .finally(function () { setLoadingState(false); });
    }

    // ── Bind filter form ───────────────────────────────────────────────────────
    (function bindFilters() {
        const form = document.getElementById('sphfFilterForm');
        if (!form) return;

        let debounceTimer = null;
        let hasPending = false;
        let isSubmitting = false;

        const submit = function () {
            if (isSubmitting) return;
            isSubmitting = true;
            hasPending = false;
            clearTimeout(debounceTimer);
            const params = buildFilterParams(form);
            params.set('page', '1');
            const ajaxUrl = window.sphfFinancialAjaxUrl || form.action;
            fetchWithFilters(ajaxUrl + '?' + params.toString(), true);
            setTimeout(function () { isSubmitting = false; }, 1000);
        };

        form.addEventListener('submit', function (e) { e.preventDefault(); submit(); });

        form.addEventListener('change', function (e) {
            if (!e.target.matches('input.filter-item, input.filter-all')) return;
            hasPending = true;
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(function () { if (hasPending) submit(); }, 900);
        });

        document.addEventListener('mousedown', function (e) {
            if (!hasPending) return;
            if (form.contains(e.target)) return;
            if (e.target.closest('a.sphf-page-tab[href]')) { hasPending = false; clearTimeout(debounceTimer); return; }
            submit();
        });

        form.addEventListener('click', function (e) {
            const resetLink = e.target.closest('a.sphf-reset-btn[href]');
            if (!resetLink) return;
            e.preventDefault();
            const resetUrl = new URL(resetLink.href, window.location.origin);
            syncFilterFormFromUrl(resetUrl.toString());
            fetchWithFilters(resetUrl.toString(), true);
        });

        window.addEventListener('popstate', function () {
            syncFilterFormFromUrl(window.location.href);
            fetchWithFilters(window.location.href, false);
        });
    })();

    // ── Initial data load ──────────────────────────────────────────────────────
    try {
        const initial = @json($financialDelays ?? null);
        if (initial) {
            processFinancialData(initial);
        } else {
            fetchWithFilters(window.sphfFinancialAjaxUrl, false);
        }
    } catch (e) {
        fetchWithFilters(window.sphfFinancialAjaxUrl, false);
    }

    syncFilterFormFromUrl(window.location.href);

}); // end DOMContentLoaded
</script>
@endsection