{{-- Part A §5 — Financial/Physical Progress graphs: §4 FP matrix + §4 overall FP/PP %; physical % = Overall PP % (#report_fp_overall_physical_pct). Chart.js via window.createChart. --}}
@php
    $fpChartYearCols = \App\Support\PlanSchemeAdpDisplay::mecReportFinancialProgressYearColumns();
    $fpChartYearSuffixes = array_column($fpChartYearCols, 'suffix');
    $fpChartYearLabels = array_column($fpChartYearCols, 'chart_head');
@endphp
<div
    id="report-fp-graph-root"
    class="report-fp-graph-panel"
    data-fp-year-suffixes='@json($fpChartYearSuffixes)'
    data-fp-year-labels='@json($fpChartYearLabels)'
>
    <p class="report-fp-graph-unit-note mb-2"><em>(Amounts in PKR, million)</em></p>
    <div class="row no-gutters">
        <div class="col-lg-6 report-fp-graph-col pr-lg-3">
            <h6 class="report-fp-graph-chart-title">Financial Progress (Max. 5 Years) of Visited Site</h6>
            <div class="report-fp-chart-canvas-wrap">
                <canvas id="reportFpFinancialGrouped" aria-label="Financial progress by year"></canvas>
            </div>
        </div>
        <div class="col-lg-6 report-fp-graph-col report-fp-graph-col--divider pl-lg-3 pt-4 pt-lg-0">
            <h6 class="report-fp-graph-chart-title">Overall Progress</h6>
            <div class="report-fp-chart-canvas-wrap report-fp-chart-canvas-wrap--overall">
                <canvas id="reportFpOverallProgress" aria-label="Financial and physical progress percent"></canvas>
            </div>
            <div class="report-fp-legend-below d-flex justify-content-center flex-wrap mt-2">
                <span class="report-fp-legend-item mr-3"><span class="report-fp-swatch report-fp-swatch--fin"></span> Financial Progress in %</span>
                <span class="report-fp-legend-item mr-3"><span class="report-fp-swatch report-fp-swatch--phy"></span> Physical Progress in %</span>
                <span class="report-fp-legend-item report-fp-legend-item--var d-none" id="report-fp-legend-variance">
                    <span class="report-fp-swatch report-fp-swatch--var" id="report-fp-swatch-variance"></span>
                    Variance (FP vs PP) in %
                </span>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
(function () {
    var root = document.getElementById('report-fp-graph-root');
    if (!root) return;

    var charts = { financial: null, overall: null };
    var refreshTimer = null;

    // Fiscal July–June years — same window as §4 table / publish letter (rolls each July).
    var yearSuffixes = @json($fpChartYearSuffixes);
    var yearLabels = @json($fpChartYearLabels);
    if (!Array.isArray(yearSuffixes) || !yearSuffixes.length) {
        yearSuffixes = [];
        yearLabels = [];
    } else {
        yearSuffixes = yearSuffixes.map(String);
        yearLabels = Array.isArray(yearLabels) && yearLabels.length === yearSuffixes.length
            ? yearLabels.map(String)
            : yearSuffixes.map(function (s) {
                return String(s).replace(/^up_to_/, 'Upto ').replace(/^y/, '').replace(/_/g, '-');
            });
    }
    var rowPrefixes = ['allocation', 'releases', 'expenditure'];
    var seriesLabels = ['Allocation', 'Releases', 'Expenditure'];

    // Legend = series (Allocation / Releases / Expenditure), X-axis = years.
    var datasetStyles = [
        { label: seriesLabels[0], backgroundColor: 'rgba(46, 117, 182, 0.92)', borderColor: 'rgba(31, 78, 121, 1)', borderWidth: 1 },
        { label: seriesLabels[1], backgroundColor: 'rgba(197, 90, 17, 0.92)', borderColor: 'rgba(138, 61, 12, 1)', borderWidth: 1 },
        { label: seriesLabels[2], backgroundColor: 'rgba(89, 89, 89, 0.92)', borderColor: 'rgba(60, 60, 60, 1)', borderWidth: 1 }
    ];

    function parseNum(v) {
        if (v === undefined || v === null) return NaN;
        var s = String(v).replace(/,/g, '').trim();
        if (s === '' || s === '—') return NaN;
        var n = parseFloat(s);
        return isNaN(n) ? NaN : n;
    }

    function readFpCell(prefix, suffix) {
        var el = document.getElementById('report_fp_' + prefix + '_' + suffix);
        if (!el) return NaN;
        return parseNum(el.value);
    }

    /**
     * Year-major matrix: matrix[yearIndex] = [allocation, releases, expenditure].
     * Chart datasets are transposed to series-major (3 datasets × 5 years).
     */
    function collectFinancialDatasets() {
        return yearSuffixes.map(function (y) {
            return rowPrefixes.map(function (p) {
                var n = readFpCell(p, y);
                return isNaN(n) ? 0 : n;
            });
        });
    }

    /** Transpose year-major matrix → series arrays for Chart.js datasets. */
    function seriesDataFromYearMatrix(matrix) {
        return rowPrefixes.map(function (_p, seriesIdx) {
            return yearSuffixes.map(function (_y, yearIdx) {
                var row = matrix[yearIdx] || [];
                var v = row[seriesIdx];
                return typeof v === 'number' && isFinite(v) ? v : 0;
            });
        });
    }

    function maxMatrixValue(matrix) {
        var m = 0;
        matrix.forEach(function (row) {
            row.forEach(function (v) {
                if (typeof v === 'number' && isFinite(v) && v > m) m = v;
            });
        });
        return m;
    }

    function yAxisMaxForFinancial(matrix) {
        var m = maxMatrixValue(matrix);
        if (m <= 0) return 12;
        // Headroom so value labels do not collide with the legend.
        return Math.max(12, Math.ceil((m * 1.22) / 10) * 10);
    }

    function baselineApprovedTotal() {
        var a4 = document.getElementById('report-a4-financial-root');
        var b = a4 ? parseNum(a4.getAttribute('data-fp-baseline')) : NaN;
        if (!isNaN(b) && b > 0) return b;
        var capEl = document.getElementById('report_fp_approved_cost_capital');
        var revEl = document.getElementById('report_fp_approved_cost_revenue');
        var totEl = document.getElementById('report_fp_approved_cost_total');
        var cap = capEl ? parseNum(capEl.value) : NaN;
        var rev = revEl ? parseNum(revEl.value) : NaN;
        var tot = totEl ? parseNum(totEl.value) : NaN;
        if (!isNaN(tot) && tot > 0) return tot;
        var s = (!isNaN(cap) ? cap : 0) + (!isNaN(rev) ? rev : 0);
        return s > 0 ? s : NaN;
    }

    /** Same logic as Part A §4 overall %: average of (allocation/released/expenditure TOTAL vs approved baseline) × 100. */
    function computeFinancialProgressPct() {
        var overallEl = document.getElementById('report_fp_overall_pct');
        if (overallEl) {
            var direct = parseNum(overallEl.value);
            if (!isNaN(direct)) return direct;
        }
        var ap = baselineApprovedTotal();
        if (isNaN(ap) || ap <= 0) return NaN;
        var alloc = readFpCell('allocation', 'total');
        var rel = readFpCell('releases', 'total');
        var exp = readFpCell('expenditure', 'total');
        var parts = [];
        if (!isNaN(alloc)) parts.push(100 * alloc / ap);
        if (!isNaN(rel)) parts.push(100 * rel / ap);
        if (!isNaN(exp)) parts.push(100 * exp / ap);
        if (!parts.length) return NaN;
        return parts.reduce(function (a, b) { return a + b; }, 0) / parts.length;
    }

    /** Overall PP % from Part A §4 (`#report_fp_overall_physical_pct`). */
    function computePhysicalProgressPctFromA4() {
        var el = document.getElementById('report_fp_overall_physical_pct');
        if (!el) return NaN;
        return parseNum(el.value);
    }

    function clampPct(n) {
        if (isNaN(n) || !isFinite(n)) return 0;
        return Math.max(0, Math.min(100, n));
    }

    function formatBarAmount(v) {
        var n = Number(v);
        if (!isFinite(n) || n === 0) return '';
        if (Math.abs(n - Math.round(n)) < 0.05) return String(Math.round(n));
        return (Math.round(n * 10) / 10).toFixed(1);
    }

    function formatBarPct(v) {
        var n = Number(v);
        if (!isFinite(n)) return '';
        return Math.round(n) + '%';
    }

    function formatOverallBarLabel(raw, index, labelVals) {
        var n = Number((labelVals && labelVals[index] !== undefined) ? labelVals[index] : raw);
        if (!isFinite(n)) return '';
        // Variance bar (index 2): show signed PP−FP; FP/PP bars stay unsigned.
        if (index === 2) {
            var rounded = Math.round(n);
            return (rounded > 0 ? '+' : '') + rounded + '%';
        }
        return Math.round(n) + '%';
    }

    /**
     * Chart.js v2 — draw value labels (amounts / percentages) above each bar.
     * @param {'amount'|'percent'|'overall'} mode
     */
    function barValueLabelsPlugin(mode) {
        return {
            afterDatasetsDraw: function (chart) {
                var ctx = chart.chart.ctx;
                if (!ctx) return;
                var chartArea = chart.chartArea || {};
                var topLimit = (typeof chartArea.top === 'number' ? chartArea.top : 0) + 2;

                chart.data.datasets.forEach(function (dataset, dsIndex) {
                    var meta = chart.getDatasetMeta(dsIndex);
                    if (!meta || meta.hidden) return;
                    var labelVals = dataset._labelValues;
                    meta.data.forEach(function (element, index) {
                        var raw = dataset.data[index];
                        var label = mode === 'overall'
                            ? formatOverallBarLabel(raw, index, labelVals)
                            : (mode === 'percent' ? formatBarPct(raw) : formatBarAmount(raw));
                        if (!label) return;
                        var model = element._model || element;
                        var x = model.x;
                        var y = model.y;
                        if (typeof x !== 'number' || typeof y !== 'number') return;

                        ctx.save();
                        ctx.font = (mode === 'percent' || mode === 'overall')
                            ? 'bold 11px "Segoe UI", Arial, sans-serif'
                            : 'bold 9px "Segoe UI", Arial, sans-serif';
                        ctx.fillStyle = '#1a1a1a';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';
                        ctx.fillText(label, x, Math.max(y - 4, topLimit + 10));
                        ctx.restore();
                    });
                });
            }
        };
    }

    function destroyCharts() {
        if (charts.financial) {
            charts.financial.destroy();
            charts.financial = null;
        }
        if (charts.overall) {
            charts.overall.destroy();
            charts.overall = null;
        }
    }

    function buildFinancialConfig(matrix) {
        var yMax = yAxisMaxForFinancial(matrix);
        var seriesData = seriesDataFromYearMatrix(matrix);
        var datasets = datasetStyles.map(function (style, i) {
            return {
                label: style.label,
                data: seriesData[i] || yearSuffixes.map(function () { return 0; }),
                backgroundColor: style.backgroundColor,
                borderColor: style.borderColor,
                borderWidth: style.borderWidth
            };
        });

        return {
            type: 'bar',
            data: {
                labels: yearLabels.slice(),
                datasets: datasets
            },
            options: {
                legend: {
                    position: 'top',
                    labels: { boxWidth: 10, padding: 10, fontSize: 10 }
                },
                layout: { padding: { top: 22, bottom: 12, left: 4, right: 4 } },
                scales: {
                    xAxes: [{
                        stacked: false,
                        ticks: {
                            autoSkip: false,
                            maxRotation: 35,
                            minRotation: 0,
                            fontSize: 9,
                            padding: 4
                        },
                        gridLines: { display: false },
                        categoryPercentage: 0.78,
                        barPercentage: 0.82
                    }],
                    yAxes: [{
                        ticks: { beginAtZero: true, max: yMax, fontSize: 10 },
                        gridLines: { color: 'rgba(0,0,0,0.08)' }
                    }]
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                    callbacks: {
                        label: function (tooltipItem, data) {
                            var ds = data.datasets[tooltipItem.datasetIndex];
                            var v = ds.data[tooltipItem.index];
                            return ds.label + ': ' + v + ' M';
                        }
                    }
                }
            },
            plugins: [barValueLabelsPlugin('amount')]
        };
    }

    /** Overall PP % − Overall FP % from Part A §4 (`#report_fp_variance_pp`). */
    function computeVariancePctFromA4() {
        var el = document.getElementById('report_fp_variance_pp');
        if (el) {
            var direct = parseNum(el.value);
            if (!isNaN(direct)) return direct;
        }
        var fin = computeFinancialProgressPct();
        var phy = computePhysicalProgressPctFromA4();
        if (isNaN(fin) || isNaN(phy)) return NaN;
        return clampPct(phy) - clampPct(fin);
    }

    function varianceBarColor(varPct) {
        if (varPct < 0) {
            return {
                backgroundColor: 'rgba(192, 0, 0, 0.92)',
                borderColor: 'rgba(153, 0, 0, 1)'
            };
        }
        return {
            backgroundColor: 'rgba(112, 173, 71, 0.92)',
            borderColor: 'rgba(84, 130, 53, 1)'
        };
    }

    function syncVarianceLegend(hasVar, varPct) {
        var legend = document.getElementById('report-fp-legend-variance');
        var swatch = document.getElementById('report-fp-swatch-variance');
        if (!legend) return;
        if (!hasVar) {
            legend.classList.add('d-none');
            return;
        }
        legend.classList.remove('d-none');
        if (swatch) {
            swatch.classList.toggle('report-fp-swatch--var-neg', varPct < 0);
            swatch.classList.toggle('report-fp-swatch--var-pos', varPct >= 0);
        }
    }

    function buildOverallConfig(finPct, phyPct, varPct) {
        var hasVar = !isNaN(varPct) && isFinite(varPct);
        var labels = ['Financial %', 'Physical %'];
        var data = [finPct, phyPct];
        var labelValues = [finPct, phyPct];
        var bg = ['rgba(102, 187, 106, 0.92)', 'rgba(66, 165, 245, 0.92)'];
        var border = ['rgba(56, 142, 60, 1)', 'rgba(30, 136, 229, 1)'];

        if (hasVar) {
            var colors = varianceBarColor(varPct);
            labels.push('Variance %');
            data.push(Math.min(100, Math.abs(varPct)));
            labelValues.push(varPct);
            bg.push(colors.backgroundColor);
            border.push(colors.borderColor);
        }

        syncVarianceLegend(hasVar, varPct);

        return {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Progress',
                    data: data,
                    _labelValues: labelValues,
                    backgroundColor: bg,
                    borderColor: border,
                    borderWidth: 1
                }]
            },
            options: {
                legend: { display: false },
                layout: { padding: { top: 28, bottom: 10, left: 6, right: 6 } },
                scales: {
                    xAxes: [{
                        ticks: { autoSkip: false, maxRotation: 0, minRotation: 0, fontSize: 10, padding: 6 },
                        gridLines: { display: false },
                        categoryPercentage: 0.72,
                        barPercentage: 0.88
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            max: 100,
                            stepSize: 10,
                            callback: function (value) { return value + '%'; }
                        },
                        gridLines: { color: 'rgba(0,0,0,0.08)' }
                    }]
                },
                tooltips: {
                    callbacks: {
                        label: function (tooltipItem, data) {
                            var ds = data.datasets[0];
                            var idx = tooltipItem.index;
                            var signed = ds._labelValues && ds._labelValues[idx] !== undefined
                                ? ds._labelValues[idx]
                                : ds.data[idx];
                            if (idx === 2) {
                                return formatOverallBarLabel(signed, 2, ds._labelValues);
                            }
                            return Math.round(Number(signed)) + '%';
                        }
                    }
                }
            },
            plugins: [barValueLabelsPlugin('overall')]
        };
    }

    function section5Visible() {
        var panel = document.getElementById('report-panel-1');
        var collapseEl = document.getElementById('report-collapse-p1-s5');
        if (!panel || !collapseEl || !panel.classList.contains('is-active')) return false;
        if (!collapseEl.classList.contains('show')) return false;
        var w = root.offsetWidth;
        return w >= 80;
    }

    function refreshChartsFromDom() {
        if (!section5Visible()) return;
        if (typeof window.createChart !== 'function' || typeof Chart === 'undefined') return;

        var matrix = collectFinancialDatasets();
        var fin = computeFinancialProgressPct();
        var phy = computePhysicalProgressPctFromA4();
        var variance = computeVariancePctFromA4();
        var finC = clampPct(fin);
        var phyC = clampPct(phy);
        var hasVar = !isNaN(variance) && isFinite(variance);
        var varAbs = hasVar ? Math.min(100, Math.abs(variance)) : NaN;

        if (charts.financial && charts.overall) {
            var yMax = yAxisMaxForFinancial(matrix);
            var seriesData = seriesDataFromYearMatrix(matrix);
            charts.financial.data.labels = yearLabels.slice();
            for (var i = 0; i < datasetStyles.length; i++) {
                if (charts.financial.data.datasets[i]) {
                    charts.financial.data.datasets[i].data = seriesData[i];
                }
            }
            if (charts.financial.options.scales && charts.financial.options.scales.yAxes && charts.financial.options.scales.yAxes[0]) {
                charts.financial.options.scales.yAxes[0].ticks = charts.financial.options.scales.yAxes[0].ticks || {};
                charts.financial.options.scales.yAxes[0].ticks.max = yMax;
            }
            charts.financial.update();

            var overallDs = charts.overall.data.datasets[0];
            var expectedLen = hasVar ? 3 : 2;
            var currentLen = (charts.overall.data.labels || []).length;
            if (currentLen !== expectedLen) {
                destroyCharts();
                charts.financial = window.createChart('reportFpFinancialGrouped', buildFinancialConfig(matrix));
                charts.overall = window.createChart('reportFpOverallProgress', buildOverallConfig(finC, phyC, variance));
                if (!charts.financial || !charts.overall) {
                    destroyCharts();
                }
                return;
            }

            charts.overall.data.labels = hasVar
                ? ['Financial %', 'Physical %', 'Variance %']
                : ['Financial %', 'Physical %'];
            overallDs.data = hasVar ? [finC, phyC, varAbs] : [finC, phyC];
            overallDs._labelValues = hasVar ? [finC, phyC, variance] : [finC, phyC];
            if (hasVar) {
                var colors = varianceBarColor(variance);
                overallDs.backgroundColor = ['rgba(102, 187, 106, 0.92)', 'rgba(66, 165, 245, 0.92)', colors.backgroundColor];
                overallDs.borderColor = ['rgba(56, 142, 60, 1)', 'rgba(30, 136, 229, 1)', colors.borderColor];
            } else {
                overallDs.backgroundColor = ['rgba(102, 187, 106, 0.92)', 'rgba(66, 165, 245, 0.92)'];
                overallDs.borderColor = ['rgba(56, 142, 60, 1)', 'rgba(30, 136, 229, 1)'];
            }
            syncVarianceLegend(hasVar, variance);
            charts.overall.update();
            return;
        }

        destroyCharts();
        charts.financial = window.createChart('reportFpFinancialGrouped', buildFinancialConfig(matrix));
        charts.overall = window.createChart('reportFpOverallProgress', buildOverallConfig(finC, phyC, variance));
        if (!charts.financial || !charts.overall) {
            destroyCharts();
        }
    }

    function scheduleRefresh() {
        if (refreshTimer) clearTimeout(refreshTimer);
        refreshTimer = setTimeout(function () {
            refreshTimer = null;
            refreshChartsFromDom();
        }, 80);
    }

    function tryInitOrRefresh() {
        setTimeout(function () {
            if (!section5Visible()) return;
            if (charts.financial && charts.overall) {
                refreshChartsFromDom();
            } else {
                refreshChartsFromDom();
            }
        }, 120);
    }

    function onFpOrB2Input(ev) {
        var t = ev.target;
        if (!t) return;
        if (t.classList && t.classList.contains('report-a4-fp-year-part')) {
            scheduleRefresh();
            return;
        }
        if (t.classList && t.classList.contains('report-a4-fp-total')) {
            scheduleRefresh();
            return;
        }
        if (t.id === 'report_fp_overall_pct' || t.id === 'report_fp_overall_physical_pct' || t.id === 'report_fp_variance_pp') {
            scheduleRefresh();
            return;
        }
    }

    document.addEventListener('input', onFpOrB2Input);
    document.addEventListener('change', onFpOrB2Input);

    var collapseEl = document.getElementById('report-collapse-p1-s5');
    if (collapseEl) {
        collapseEl.addEventListener('shown.bs.collapse', tryInitOrRefresh);
    }

    document.querySelectorAll('.report-wizard-step').forEach(function (btn) {
        btn.addEventListener('click', tryInitOrRefresh);
    });

    function bootCharts() {
        tryInitOrRefresh();
        setTimeout(tryInitOrRefresh, 350);
        setTimeout(tryInitOrRefresh, 800);
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', bootCharts);
    } else {
        bootCharts();
    }
})();
</script>
@endpush