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


<style>
    .sphf-page-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.sphf-page-tab {
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #d1d5db;
    color: #374151;
    background: #fff;
    transition: all .15s;
}

.sphf-page-tab:hover { background: #f0fdf4; border-color: #0a9a4c; color: #0a9a4c; }
.sphf-page-tab.is-active { background: #0a9a4c; border-color: #0a9a4c; color: #fff; }
    </style>
@section('content')
<section class="sphf-page sphf-ageing" id="sphfAgeingPage" data-ajax-url="{{ route('theme.sphf.ageing') }}">
    <div class="sphf-page-tabs mt-2">
      <a href="{{ route('theme.sphf.executive') }}" class="sphf-page-tab">Executive</a>
      <a href="{{ route('theme.sphf.ageing') }}" class="sphf-page-tab is-active">Ageing</a>
      <a href="{{ route('theme.sphf.branch') }}" class="sphf-page-tab">Branch</a>
      <a href="{{ route('theme.sphf.ip-performance') }}" class="sphf-page-tab">IP Performance</a>
      <a href="{{ route('theme.sphf.ifi-view') }}" class="sphf-page-tab">IFI View</a>
      <div class="ml-auto">
         <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>
    <!-- <div class="sphf-page__heading-row">

        <div>

            <div class="sphf-page__title-wrap">
                <h1 class="sphf-page__title">Ageing Analysis</h1>
                <span class="sphf-page__badge" id="sphfAgeingUpdatedBadge">Updated {{ $pageUpdatedAt ?? now()->format('d-m-y H:i') }}</span>
            </div>
            <p class="sphf-ageing__subtitle">Real-time ageing analysis across institutional partners and districts.</p>
        </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.ageing-content', [
                'ageing' => $ageing,
                'pageMessages' => $pageMessages ?? [],
            ])
        </div>
    </div>
    {{-- MODALS HAMESHA BAHAR RAHENGE - AJAX inhe kabhi touch nahi karega --}}
    @include('theme.sphf.pages.partials.ageing-modals', [
        'ageing' => $ageing,
    ])
</section>
@endsection

@section('scripts')
<script>
    window.sphfAgeingPayload = @json($ageing['charts'] ?? []);
    window.sphfAgeingAjaxUrl = @json(route('theme.sphf.ageing'));
    window.sphfAgeingModalAlarm = @json($ageing['modal']['alarm'] ?? 'red');
    // Initial load: only lightweight hierarchy maps for fast page render (~3KB).
    // Heavy reverse-lookup maps (beneficiary/UUID) are lazy-loaded asynchronously below.
    window.sphfCascadeMap = @json($ageing['cascade_map'] ?? []);
    // Async lazy-load full cascade map (bank/tehsil/district → beneficiaries/UUIDs)
    // so filter dropdowns cascade correctly without bloating the initial page response.
    (function () {
        const url = @json(route('theme.sphf.ageing.cascade')) + '?mode=completed';
        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);
                    // Re-normalize merged map so cascade dropdowns pick up new keys
                    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 — cascade works without heavy maps */ });
    })();
</script>
<script src="{{ asset('theme/default/assets/js/chart-toolbar.js') }}"></script>
@endsection