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

@section('content')
<section class="sphf-page sphf-ageing sphf-under-progress" id="sphfAgeingPage" data-ajax-url="{{ route('theme.sphf.stage-bottlenecks') }}">
    <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="#sphfAgeingExportArea" data-export-file="SPHF_Stage_Bottlenecks_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="sphfAgeingExportArea">
        @include('theme.sphf.partials.filter-bar', [
            'options' => $filterOptions ?? [],
            'selected' => $selectedFilters ?? [],
        ])

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

@section('scripts')
<script>
    window.sphfAgeingPayload = @json($ageing['charts'] ?? []);
    window.sphfAgeingAjaxUrl = @json(route('theme.sphf.stage-bottlenecks'));
    window.sphfAgeingModalAlarm = @json($ageing['modal']['alarm'] ?? 'red');
    window.sphfCascadeMap = @json($ageing['cascade_map'] ?? []);
</script>
<script src="{{ asset('theme/default/assets/js/chart-toolbar.js') }}"></script>

{{-- Disaggregation Modal --}}
@include('theme.sphf.pages.partials.disagg-modal')  {{-- ← adjust path to match your actual file --}}

<script>
window.openDisaggModal = function () {
    if (typeof window.__sphfOpenDisaggModal === 'function') {
        return window.__sphfOpenDisaggModal.apply(window, arguments);
    }
};

window.closeDisaggModal = function () {
    if (typeof window.__sphfCloseDisaggModal === 'function') {
        return window.__sphfCloseDisaggModal.apply(window, arguments);
    }
};
</script>

@endsection