@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; }

/* IFI Stat Cards */
.sphf-ifi-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
@media (max-width: 1100px) { .sphf-ifi-stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .sphf-ifi-stat-grid { grid-template-columns: repeat(2, 1fr); } }

.sphf-ifi-stat-card {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-top: 3px solid var(--ifi-tone, #3b82f6);
    border-radius: 6px;
    padding: 15px 13px 13px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 112px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 18px rgba(15, 23, 42, .04);
}
.sphf-ifi-stat-card__label {
    font-size: 10px;
    font-weight: 700;
    color: #5f6874;
    letter-spacing: 0;
    text-transform: uppercase;
}
.sphf-ifi-stat-card__value {
    font-size: 25px;
    font-weight: 800;
    color: #17201a;
    line-height: 1;
}
.sphf-ifi-stat-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}
.sphf-ifi-stat-card__footer-label {
    font-size: 11px;
    color: #4f5a66;
    font-weight: 500;
}
.sphf-ifi-pct-badge {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 4px;
    background: var(--ifi-badge-bg, #eff6ff);
    color: var(--ifi-badge-text, #2563eb);
}
.sphf-ifi-stat-card.tone-blue {
    --ifi-tone: #3b82f6;
    --ifi-badge-bg: #eef5ff;
    --ifi-badge-text: #2563eb;
}
.sphf-ifi-stat-card.tone-purple {
    --ifi-tone: #8b5cf6;
    --ifi-badge-bg: #f2ecff;
    --ifi-badge-text: #6d28d9;
}
.sphf-ifi-stat-card.tone-green {
    --ifi-tone: #059669;
    --ifi-badge-bg: #e9f8f1;
    --ifi-badge-text: #047857;
}
.sphf-ifi-stat-card.tone-orange {
    --ifi-tone: #f59e0b;
    --ifi-badge-bg: #fff3e3;
    --ifi-badge-text: #c2410c;
}
.sphf-ifi-stat-card.tone-cyan {
    --ifi-tone: #06b6d4;
    --ifi-badge-bg: #e8faff;
    --ifi-badge-text: #0e7490;
}

/* Chart + Table grid */
.sphf-ifi-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
}
@media (max-width: 900px) { .sphf-ifi-main-grid { grid-template-columns: 1fr; } }

/* Disbursement table */
.sphf-ifi-disb-table {
    width: 100%;
    border-collapse: collapse;
}
.sphf-ifi-disb-table thead tr th {
    font-size: 10px;
    font-weight: 700;
    color: #8d98a7;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-bottom: 1px solid #edf1f4;
    text-align: left;
}
.sphf-ifi-disb-table tbody tr td {
    font-size: 13px;
    color: #334155;
    padding: 10px 10px;
    border-bottom: 1px solid #f3f5f7;
}
.sphf-ifi-disb-table tbody tr:last-child td { border-bottom: none; }
.sphf-ifi-disb-table td:nth-child(2),
.sphf-ifi-disb-table td:nth-child(3) { font-weight: 600; }
.sphf-ifi-disb-pct {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}
.sphf-ifi-disb-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 0;
    margin-top: 4px;
    border-top: 1px solid #edf1f4;
}
.sphf-ifi-disb-footer span { font-size: 10px; color: #8d98a7; font-style: italic; }
.sphf-ifi-disb-footer a    { font-size: 11px; font-weight: 600; color: #0a9a4c; text-decoration: none; }
</style>

@section('content')
<section class="sphf-page sphf-ifi-view" id="sphfIfiViewPage">
    <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">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 is-active">IFI View</a>
        <div class="ml-auto">
            <button type="button" class="sphf-export-btn" data-sphf-export-btn="true" data-export-target="#sphfIfiViewExportArea" data-export-file="SPHF_IFI_View_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="sphfIfiViewExportArea">
        @include('theme.sphf.partials.filter-bar', [
            'options' => $filterOptions ?? [],
            'selected' => $selectedFilters ?? [],
        ])

        @include('theme.sphf.pages.partials.ifi-view-content', [
            'ifiView' => $ifiView,
            'pageMessages' => $pageMessages ?? [],
        ])
    </div>
</section>
@endsection

@section('scripts')
<script src="{{ asset('theme/default/assets/js/chart-toolbar.js') }}"></script>
@endsection