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

@section('content')
<section class="sphf-page sphf-under-progress">
    <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>
                        <tr>
                            <td>Tranche released but not withdrawn</td>
                            <td>31,850</td>
                            <td>18</td>
                            <td><span class="sphf-up-status is-red">2,450</span></td>
                            <td>Bank branch delay / beneficiary access</td>
                            <td>Branch-wise management follow-up</td>
                        </tr>
                        <tr>
                            <td>Withdrawal after 1st tranche delayed</td>
                            <td>18,400</td>
                            <td>22</td>
                            <td><span class="sphf-up-status is-red">1,260</span></td>
                            <td>Account activation issue</td>
                            <td>Bank focal person escalation</td>
                        </tr>
                        <tr>
                            <td>Withdrawal after 2nd tranche delayed</td>
                            <td>12,200</td>
                            <td>19</td>
                            <td><span class="sphf-up-status is-red">830</span></td>
                            <td>CNIC/account mismatch</td>
                            <td>Data correction and reprocessing</td>
                        </tr>
                        <tr>
                            <td>Failed or reversed transactions</td>
                            <td>8,400</td>
                            <td>14</td>
                            <td><span class="sphf-up-status is-red">610</span></td>
                            <td>Validation failure</td>
                            <td>Reconcile with bank and MIS</td>
                        </tr>
                        <tr>
                            <td>Withdrawal date missing</td>
                            <td>0</td>
                            <td>0</td>
                            <td><span class="sphf-up-status is-green">0</span></td>
                            <td>Resolved after new data received</td>
                            <td>Keep mandatory field validation</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>
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 = '';

        const chart = new ApexCharts(element, options);
        Promise.resolve(chart.render()).then(function () {
            attachFinancialToolbar(key, chart, containerId, chartTitle);
        });
    };

    renderFinancialChart('sphfFinancialDelayHealthToolbar', '#donutChart', 'sphfFinancialDelayHealthCard', 'Financial Delay Health', {
        chart: { type: 'donut', height: 280, toolbar: { show: false }, fontFamily: 'Inter, sans-serif' },
        series: [73, 17, 7, 3],
        labels: ['Green', 'Yellow', 'Amber', 'Red'],
        colors: ['#16a34a', '#facc15', '#f59e0b', '#ef4444'],
        legend: { position: 'bottom', fontSize: '12px' }
    });

    renderFinancialChart('sphfFinancialTrancheToolbar', '#trancheChart', 'sphfFinancialTrancheCard', 'Tranche Release vs Withdrawal', {
        chart: { type: 'bar', height: 280, toolbar: { show: false }, fontFamily: 'Inter, sans-serif' },
        series: [
            { name: 'Released', data: [195, 148, 102, 62] },
            { name: 'Withdrawn', data: [188, 142, 96, 58] }
        ],
        xaxis: { categories: ['1st', '2nd', '3rd', '4th'] },
        colors: ['#2563eb', '#16a34a'],
        dataLabels: { enabled: false },
        legend: { position: 'top', fontSize: '12px' },
        grid: { borderColor: '#eef2f6', strokeDashArray: 2 }
    });

    renderFinancialChart('sphfFinancialBankToolbar', '#bankChart', 'sphfFinancialBankCard', 'Bank Bottlenecks', {
        chart: { type: 'bar', height: 280, toolbar: { show: false }, fontFamily: 'Inter, sans-serif' },
        series: [{ name: 'Cases', data: [92, 55, 80, 42, 94] }],
        xaxis: { categories: ['HBL', 'Meezan', 'NBP', 'MCB', 'Sindh Bank'] },
        plotOptions: { bar: { horizontal: true, borderRadius: 4 } },
        colors: ['#f97316'],
        dataLabels: { enabled: false },
        grid: { borderColor: '#eef2f6', strokeDashArray: 2 }
    });
});
</script>
@endsection