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

@section('content')
<section class="sphf-page sphf-ageing" id="sphfAgeingPage" data-ajax-url="{{ route('theme.sphf.ageing.pending') }}">
    <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  class="ml-auto">
        <button type="button" class="sphf-export-btn" data-sphf-export-btn="true" data-export-target="#sphfDashboardExportArea" data-export-file="SPHF_Dashboard_Report" data-export-bg="#f3f5f6">
            <i class="ki-filled ki-exit-down"></i>
            <span>Export</span>
        </button>
    </div>
    </div>
    <!-- <div class="sphf-page__heading-row">
        <div>
            <div class="sphf-page__title-wrap">
                <h1 class="sphf-page__title">SPHF Live Monitoring</h1>
                <span class="sphf-page__badge" id="sphfAgeingUpdatedBadge">Updated {{ $pageUpdatedAt ?? now()->format('d-m-y H:i') }}</span>
            </div>
            <p class="sphf-ageing__subtitle">Under-progress pipeline, stage-wise ageing, alert/alarm counts, bottleneck detection, and notification-ready decision support</p>
        </div>
        <button type="button" class="sphf-export-btn" data-sphf-export-btn="true" data-export-target="#sphfAgeingExportArea" data-export-file="SPHF_Ageing_Report" data-export-bg="#f3f5f6">
            <i class="ki-filled ki-exit-down"></i>
            <span>Export</span>
        </button>
    </div> -->

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

        <div id="sphfAgeingDynamicContent">
            @include('theme.sphf.pages.partials.ageing-content-pending', [
                'ageing' => $ageing,
                'pageMessages' => $pageMessages ?? [],
            ])
        </div>
    </div>
</section>
@endsection

@section('scripts')
<script>
    window.sphfAgeingPayload = @json($ageing['charts'] ?? []);
    window.sphfAgeingAjaxUrl = @json(route('theme.sphf.ageing.pending'));
    window.sphfStageSummaryAjaxUrl = @json(route('theme.sphf.stage-bottlenecks'));
    window.sphfAgeingModalAlarm = @json($ageing['modal']['alarm'] ?? 'red');
    window.sphfCascadeMap = @json($ageing['cascade_map'] ?? []);
    // Async lazy-load full cascade map for filter cascade dropdowns
    (function () {
        const url = @json(route('theme.sphf.ageing.cascade')) + '?mode=pending';
        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function (r) { return r.ok ? r.json() : null; })
            .then(function (data) {
                if (data && data.cascade_map && typeof data.cascade_map === 'object') {
                    Object.assign(window.sphfCascadeMap, data.cascade_map);
                    if (window.sphfNormalizedCascadeMap) {
                        Object.keys(data.cascade_map).forEach(function (k) {
                            window.sphfNormalizedCascadeMap[k] =
                                typeof window.normalizeCascadeMap === 'function'
                                    ? window.normalizeCascadeMap(data.cascade_map[k] || {})
                                    : data.cascade_map[k] || {};
                        });
                    }
                }
            })
            .catch(function () { /* non-critical */ });
    })();
</script>
<script src="{{ asset('theme/default/assets/js/chart-toolbar.js') }}"></script>
@endsection