@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">
    <!-- <div class="sphf-page__heading-row">
        <div class="sphf-page__title-wrap">
            <h1 class="sphf-page__title">Dashboard Summary</h1>
            <span class="sphf-page__badge">Updated 10-03-26</span>
        </div>
    </div>
     -->

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

        <div class="sphf-kpi-grid">
        <article class="sphf-kpi-card is-highlight" data-dashboard-kpi="disbursed">
            <p class="sphf-kpi-card__label">TOTAL DISBURSED</p>
            <p class="sphf-kpi-card__value">$42.8M <span>+12%</span></p>
            <p class="sphf-kpi-card__meta">VS PREVIOUS QUARTER</p>
        </article>

        <article class="sphf-kpi-card" data-dashboard-kpi="completion">
            <p class="sphf-kpi-card__label">AVG COMPLETION</p>
            <p class="sphf-kpi-card__value">4.2 Days <span class="is-dot">●</span></p>
            <p class="sphf-kpi-card__meta">92% WITHIN SLA</p>
        </article>

        <article class="sphf-kpi-card" data-dashboard-kpi="delays">
            <p class="sphf-kpi-card__label">DELAYED CASES</p>
            <p class="sphf-kpi-card__value">124 <span class="is-alert">▲4%</span></p>
            <p class="sphf-kpi-card__meta">REQUIRES ATTENTION</p>
        </article>

        <article class="sphf-kpi-card" data-dashboard-kpi="alarms">
            <p class="sphf-kpi-card__label">HIGH RISK ALARMS</p>
            <p class="sphf-kpi-card__value">18 <span class="is-warning">●</span></p>
            <p class="sphf-kpi-card__meta">8 CRITICAL SYSTEMS</p>
        </article>

        <article class="sphf-kpi-card" data-dashboard-kpi="efficiency">
            <p class="sphf-kpi-card__label">WITHDRAWAL EFFICIENCY</p>
            <p class="sphf-kpi-card__value">98.4% <span class="is-good">●</span></p>
            <p class="sphf-kpi-card__meta">PEAK PERFORMANCE</p>
        </article>
    </div>

    <!-- <div class="sphf-stage-row">
        <section class="sphf-stage-switcher">
            <button type="button" class="sphf-stage-switcher__btn is-active">All Stages</button>
            <button type="button" class="sphf-stage-switcher__btn">1st to 2nd</button>
            <button type="button" class="sphf-stage-switcher__btn">2nd to 3rd</button>
            <button type="button" class="sphf-stage-switcher__btn">3rd to Final</button>
        </section>
    </div> -->

    <div class="sphf-card-row">
        <article class="sphf-card" id="sphfInteractiveBarCard">
          <div class="sphf-card__header" style="flex-direction:column; align-items:flex-start; gap:8px;">
    <h3>INTERACTIVE FILTERS SNAPSHOT</h3>
    <section class="sphf-stage-switcher">
        <button type="button" class="sphf-stage-switcher__btn is-active">All Stages</button>
        <button type="button" class="sphf-stage-switcher__btn">1st to 2nd</button>
        <button type="button" class="sphf-stage-switcher__btn">2nd to 3rd</button>
        <button type="button" class="sphf-stage-switcher__btn">3rd to Final</button>
    </section>
</div>
            <div class="sphf-card__legend sphf-card__legend--bars" aria-label="Interactive filters legend">
                <span class="sphf-legend-item"><i class="is-green"></i>1 to 3 Months</span>
                <span class="sphf-legend-item"><i class="is-orange"></i>3 to 6 Months</span>
                <span class="sphf-legend-item"><i class="is-slate"></i>6 to 9 Months</span>
                <span class="sphf-legend-item"><i class="is-red"></i>9 to 12 Months</span>
                <span class="sphf-legend-item"><i class="is-blue"></i>1 Year +</span>
            </div>
            <div id="sphfInteractiveBarChart" class="sphf-chart sphf-chart--dashboard"></div>
        </article>

        <article class="sphf-card" id="sphfPhaseDonutCard">
            <div class="sphf-card__header">
                <h3>PHASE WISE DISTRIBUTION</h3>
            </div>
            <div class="sphf-card__legend sphf-card__legend--donut" aria-label="Phase wise distribution legend">
                <span class="sphf-legend-item"><i class="is-blue"></i>1ST TO 2ND</span>
                <span class="sphf-legend-item"><i class="is-orange"></i>2ND TO 3RD</span>
                <span class="sphf-legend-item"><i class="is-slate"></i>3RD TO 4TH</span>
            </div>
            <div id="sphfPhaseDonutChart" class="sphf-chart sphf-chart--dashboard sphf-chart--donut"></div>
        </article>

        <article class="sphf-card sphf-card--alarm">
            <div class="sphf-card__header">
                <h3>ALARM ENGINE</h3>
            </div>
            <div class="sphf-alarm-list">
                <div class="sphf-alarm-item is-critical">
                    <div class="sphf-alarm-item__top">
                        <p class="sphf-alarm-item__title">Critical Delay: ID-9042</p>
                        <span class="sphf-alarm-item__time">2m ago</span>
                    </div>
                    <p class="sphf-alarm-item__desc">Finance clearance pending for over 72 hours in District North.</p>
                    <div class="sphf-alarm-item__footer"><span class="is-alert">Escalate</span><span>Dismiss</span></div>
                </div>
                <div class="sphf-alarm-item is-high">
                    <div class="sphf-alarm-item__top">
                        <p class="sphf-alarm-item__title">High Volatility Alert</p>
                        <span class="sphf-alarm-item__time">15m ago</span>
                    </div>
                    <p class="sphf-alarm-item__desc">Unexpected spike in withdrawal requests from Sub-Unit 4.</p>
                </div>
                <div class="sphf-alarm-item is-medium">
                    <div class="sphf-alarm-item__top">
                        <p class="sphf-alarm-item__title">SLA Warning</p>
                        <span class="sphf-alarm-item__time">45m ago</span>
                    </div>
                    <p class="sphf-alarm-item__desc">Project Delta approaching cycle limit (95% consumed).</p>
                </div>
                <div class="sphf-alarm-note">
                    <span>System update: Audit logs for batch #22 successfully archived.</span>
                    <span class="sphf-alarm-item__time">2h ago</span>
                </div>
            </div>
        </article>
    </div>

    <section class="sphf-heatmap">
        <h3>Heatmap Summary by Monitoring Lens</h3>
        <div class="sphf-heatmap-grid">
            <article class="sphf-heatmap-tile is-green">
                <p>Total Disbursed</p>
                <h4>645,045</h4>
                <span>Year to date performance baseline</span>
            </article>
            <article class="sphf-heatmap-tile is-teal">
                <p>Average Completion Days</p>
                <h4>330</h4>
                <span>For last 12 allocations</span>
            </article>
            <article class="sphf-heatmap-tile is-blue">
                <p>Delayed Cases</p>
                <h4>38%</h4>
                <span>Above quarterly target threshold</span>
            </article>
            <article class="sphf-heatmap-tile is-orange">
                <p>High Risk Alarms</p>
                <h4>12,78</h4>
                <span>For the same period</span>
            </article>
            <article class="sphf-heatmap-tile is-red">
                <p>Withdrawl Efficiency</p>
                <h4>78%</h4>
                <span>Below week-to-week benchmark spread</span>
            </article>
        </div>
    </section>

    <div class="sphf-card-row sphf-card-row--bottom">
        <article class="sphf-card sphf-card--wide" id="sphfDistrictLineCard">
            <div class="sphf-card__header">
                <h3>DISTRICT WISE - AVERAGE DAYS</h3>
            </div>
            <div id="sphfDistrictLineChart" class="sphf-chart sphf-chart--line"></div>
        </article>

        <article class="sphf-card sphf-card--wide" id="sphfMonthlyBarCard">
            <div class="sphf-card__header">
                <h3>Monthly Disbursement &amp; Withdrawal</h3>
            </div>
            <div id="sphfMonthlyBarChart" class="sphf-chart sphf-chart--line"></div>
        </article>
    </div>

    <section class="sphf-table-card">
        <div class="sphf-table-card__header" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;">
    <span>Drill-down Table: Exception and Delay Cases</span>
    <input type="text" id="sphfDashboardDrillSearch" class="sphf-modal__search" placeholder="Search Beneficiary, District..." style="max-width:280px;">
</div>
        <div class="sphf-table-wrap">
            <table class="sphf-table sphf-dashboard-drill-table">
                <thead>
                    <tr>
                        <th>BENEFICIARY ID</th>
                        <th>DISTRICT</th>
                        <th>CURRENT STAGE</th>
                        <th>AGEING DAYS</th>
                        <th>ALARM STATUS</th>
                        <th>ACTIONS</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>BEN-PK-9201</td>
                        <td>Thatta</td>
                        <td>Verification (IP)</td>
                        <td class="is-critical">142</td>
                        <td><span class="sphf-status-tag is-escalated">ESCALATED</span></td>
                        <td><a href="javascript:void(0)">Review</a></td>
                    </tr>
                    <tr>
                        <td>BEN-PK-1104</td>
                        <td>Badin</td>
                        <td>Auth (Stage 2)</td>
                        <td class="is-warning">98</td>
                        <td><span class="sphf-status-tag is-watch">WATCHLIST</span></td>
                        <td><a href="javascript:void(0)">Review</a></td>
                    </tr>
                    <tr>
                        <td>BEN-PK-4432</td>
                        <td>Sukkur</td>
                        <td>Withdrawal</td>
                        <td class="is-healthy">12</td>
                        <td><span class="sphf-status-tag is-healthy">HEALTHY</span></td>
                        <td><a href="javascript:void(0)">Review</a></td>
                    </tr>
                    <tr>
                        <td>BEN-PK-8871</td>
                        <td>Larkana</td>
                        <td>Verification (IP)</td>
                        <td class="is-critical">156</td>
                        <td><span class="sphf-status-tag is-escalated">ESCALATED</span></td>
                        <td><a href="javascript:void(0)">Review</a></td>
                    </tr>
                    <tr>
                        <td>BEN-PK-2290</td>
                        <td>Karachi</td>
                        <td>Disbursement</td>
                        <td class="is-warning">91</td>
                        <td><span class="sphf-status-tag is-watch">WATCHLIST</span></td>
                        <td><a href="javascript:void(0)">Review</a></td>
                    </tr>
                    <tr>
                        <td>BEN-PK-0056</td>
                        <td>Hyderabad</td>
                        <td>Processing</td>
                        <td class="is-healthy">44</td>
                        <td><span class="sphf-status-tag is-healthy">HEALTHY</span></td>
                        <td><a href="javascript:void(0)">Review</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>
    </div>
</section>

<div class="sphf-modal-backdrop" id="sphfDashboardModal" aria-hidden="true">
    <div class="sphf-modal">
        <div class="sphf-modal__header">
            <h3 id="sphfDashboardModalTitle">Dashboard KPI Details</h3>
            <button type="button" class="sphf-modal__close" id="sphfDashboardModalClose">
                <i class="ki-filled ki-cross"></i>
            </button>
        </div>

        <div class="sphf-modal__toolbar">
            <input type="text" placeholder="Search beneficiary, district, or stage..." class="sphf-modal__search">
            <div class="sphf-modal__toolbar-actions">
                <button type="button" class="sphf-modal__btn">Filters</button>
                <button type="button" class="sphf-modal__btn is-primary">Export Data</button>
            </div>
        </div>

        <div class="sphf-table-wrap">
            <table class="sphf-table" id="sphfDashboardDataTable">
                <thead>
                    <tr>
                        <th>BENEFICIARY</th>
                        <th>DISTRICT</th>
                        <th>CURRENT STAGE</th>
                        <th>DAYS</th>
                        <th>VALUE</th>
                        <th>STATUS</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><strong>Ahmed Khan</strong><br><small>42101-2391291-1</small></td>
                        <td>Thatta</td>
                        <td>Verification</td>
                        <td>142</td>
                        <td>$12,400</td>
                        <td><span class="sphf-status-tag is-escalated">Delayed</span></td>
                    </tr>
                    <tr>
                        <td><strong>Sara Williams</strong><br><small>42101-9921122-4</small></td>
                        <td>Badin</td>
                        <td>Approval</td>
                        <td>98</td>
                        <td>$8,200</td>
                        <td><span class="sphf-status-tag is-watch">Watchlist</span></td>
                    </tr>
                    <tr>
                        <td><strong>John Doe</strong><br><small>42201-1122334-7</small></td>
                        <td>Sukkur</td>
                        <td>Withdrawal</td>
                        <td>12</td>
                        <td>$25,100</td>
                        <td><span class="sphf-status-tag is-healthy">Healthy</span></td>
                    </tr>
                    <tr>
                        <td><strong>Fatima Bi</strong><br><small>42101-3344556-9</small></td>
                        <td>Larkana</td>
                        <td>Verification</td>
                        <td>156</td>
                        <td>$9,840</td>
                        <td><span class="sphf-status-tag is-escalated">Delayed</span></td>
                    </tr>
                    <tr>
                        <td><strong>Hina Tariq</strong><br><small>35102-7766554-2</small></td>
                        <td>Hyderabad</td>
                        <td>Biometric</td>
                        <td>31</td>
                        <td>$6,300</td>
                        <td><span class="sphf-status-tag is-watch">Review</span></td>
                    </tr>
                    <tr>
                        <td><strong>Imran Ali</strong><br><small>42101-4433221-6</small></td>
                        <td>Thatta</td>
                        <td>Processing</td>
                        <td>29</td>
                        <td>$5,100</td>
                        <td><span class="sphf-status-tag is-healthy">Healthy</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

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

<script>
// Drill-down table
const dashDrillSearch = document.getElementById('sphfDashboardDrillSearch');
if (dashDrillSearch) {
    dashDrillSearch.addEventListener('input', () => {
        const q = dashDrillSearch.value.toLowerCase();
        document.querySelectorAll('.sphf-dashboard-drill-table tbody tr').forEach(row => {
            row.style.display = row.textContent.toLowerCase().includes(q) ? '' : 'none';
        });
    });
}

// Modal table
const dashModalSearch = document.querySelector('#sphfDashboardModal .sphf-modal__search');
if (dashModalSearch) {
    dashModalSearch.addEventListener('input', () => {
        const q = dashModalSearch.value.toLowerCase();
        document.querySelectorAll('#sphfDashboardDataTable tbody tr').forEach(row => {
            row.style.display = row.textContent.toLowerCase().includes(q) ? '' : 'none';
        });
    });
}
</script>
@endsection