@php
    $drilldown = $ipPerformance['drilldown'] ?? [];
    $ddTotal       = (int) ($drilldown['total'] ?? 0);
    $ddPerPage     = (int) ($drilldown['per_page'] ?? 25);
    $ddCurrentPage = (int) ($drilldown['current_page'] ?? 1);
    $ddLastPage    = (int) ($drilldown['last_page'] ?? 1);
    $ddFrom        = (int) ($drilldown['from'] ?? 0);
    $ddTo          = (int) ($drilldown['to'] ?? 0);
    $debugSnapshot = $ipPerformance['debug'] ?? null;
    $debugEnabled = request()->boolean('debug');

    $baseQuery = request()->except('page', 'ajax');
    $pageUrl = fn(int $p) => url()->current() . '?' . http_build_query(array_merge($baseQuery, ['page' => $p]));
@endphp

@if(!empty($pageMessages ?? []))
    <div class="mb-4 rounded border border-yellow-300 bg-yellow-50 px-4 py-3 text-sm text-yellow-800">
        {{ implode(' ', $pageMessages) }}
    </div>
@endif

@if($debugEnabled)
    <section class="sphf-table-card" style="margin-bottom:10px; border:1px dashed #f59e0b;">
        <div class="sphf-table-card__header" style="display:flex;justify-content:space-between;gap:10px;align-items:center;">
            <span>Filter Debug Snapshot</span>
            <a class="sphf-filter-chip" href="{{ route('theme.sphf.ip-performance.debug', request()->query()) }}" target="_blank" rel="noopener">
                Open JSON Debug
            </a>
        </div>
        <div class="sphf-table-wrap">
            @if(is_array($debugSnapshot))
                <div style="padding:10px 12px;font-size:12px;color:#334155;display:flex;gap:18px;flex-wrap:wrap;">
                    <span><strong>DB:</strong> {{ $debugSnapshot['database'] ?? '-' }}</span>
                    <span><strong>Base Rows:</strong> {{ number_format((int) ($debugSnapshot['base_row_count'] ?? 0)) }}</span>
                    <span><strong>Final Rows:</strong> {{ number_format((int) ($debugSnapshot['final_row_count'] ?? 0)) }}</span>
                    <span><strong>Tables:</strong> {{ implode(', ', $debugSnapshot['tables'] ?? []) }}</span>
                </div>
                <table class="sphf-table">
                    <thead>
                        <tr>
                            <th>FILTER</th>
                            <th>SELECTED VALUES</th>
                            <th>ISOLATED MATCH</th>
                            <th>CUMULATIVE MATCH</th>
                            <th>SAMPLE (TOP 5)</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach(($debugSnapshot['per_filter'] ?? []) as $filterKey => $row)
                            <tr>
                                <td><strong>{{ $filterKey }}</strong></td>
                                <td>{{ implode(', ', $row['selected_values'] ?? []) ?: '-' }}</td>
                                <td>{{ number_format((int) ($row['isolated_match_count'] ?? 0)) }}</td>
                                <td>{{ number_format((int) ($row['cumulative_match_count'] ?? 0)) }}</td>
                                <td>
                                    @if(!empty($row['sample_rows']))
                                        <details>
                                            <summary style="cursor:pointer;color:#0f766e;font-weight:600;">View 5 rows</summary>
                                            <div style="margin-top:6px;display:grid;gap:6px;max-height:220px;overflow:auto;">
                                                @foreach($row['sample_rows'] as $sample)
                                                    <div style="border:1px solid #e2e8f0;border-radius:6px;padding:6px 8px;font-size:11px;line-height:1.35;color:#334155;background:#f8fafc;">
                                                        <div><strong>{{ $sample['beneficiary_name'] }}</strong> ({{ $sample['beneficiary_cnic'] }})</div>
                                                        <div>IP: {{ $sample['ip'] }} | District/Tehsil: {{ $sample['district'] }} / {{ $sample['tehsil'] }}</div>
                                                        <div>Bank/Branch: {{ $sample['bank_name'] }} / {{ $sample['branch_name'] }}</div>
                                                        <div>Stage: {{ $sample['pending_stage'] }} | Ageing: {{ number_format((float) ($sample['ageing_days'] ?? 0), 1) }} | Alarm: {{ strtoupper($sample['alarm_level'] ?? '-') }}</div>
                                                        <div>UUID: {{ $sample['uuid'] }} | Slot: {{ $sample['time_slot'] }}</div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </details>
                                    @else
                                        <span class="text-muted-foreground">-</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="text-center text-muted-foreground" style="padding:12px;">Debug data unavailable.</div>
            @endif
        </div>
    </section>
@endif

<div class="sphf-ip-chart-grid">
    <article class="sphf-card sphf-card--wide" id="sphfIpRankingCard">
        <div class="sphf-card__header">
            <h3>IP PERFORMANCE RANKING</h3>
        </div>
        <p class="sphf-ageing-card__sub"><span class="legend-dot legend-dot--green"></span>1ST TO 4TH AVERAGE DAYS</p>
        <div id="sphfIpRankingChart" class="sphf-chart sphf-chart--bar"></div>
    </article>

    <article class="sphf-card sphf-card--wide" id="sphfIpStageComparisonCard">
        <div class="sphf-card__header">
            <h3>STAGE WISE COMPARISON</h3>
        </div>
        <div id="sphfIpStageComparisonChart" class="sphf-chart sphf-chart--bar"></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>IP Exception and Ranking Table</span>
    <input type="text" id="sphfIpRankingSearch" class="sphf-modal__search" placeholder="Search IP..." style="max-width:280px;">
</div>
    <div class="sphf-ageing-card__sub sphf-table-subtitle">Aggregated performance indicators by Implementing Partner</div>
    <div class="sphf-table-wrap">
        <table class="sphf-table sphf-ip-ranking-table" data-sphf-datatable="true">
            <thead>
                <tr>
                    <th>IP</th>
                    <th>AVG DAYS</th>
                    <th>DELAYED %</th>
                    <th>RED ALARM CASES</th>
                    <th>WITHDRAWAL EFFICIENCY</th>
                    <th>RANK</th>
                </tr>
            </thead>
            <tbody>
                @forelse(($ipPerformance['ranking_table'] ?? []) as $row)
                    @php
                        $delayColor = $row['delayed_pct'] >= 40 ? '#dc2626' : ($row['delayed_pct'] >= 20 ? '#a16207' : '#16a34a');
                        $rankPillClass = ($row['rank'] ?? 0) === 1 ? 'is-top' : '';
                    @endphp
                    <tr>
                        <td><strong>{{ $row['ip'] }}</strong></td>
                        <td>{{ number_format((float) $row['avg_days'], 1) }}</td>
                        <td>
                            <span class="sphf-progress"><span style="width:{{ min(100, max(0, (float) $row['delayed_pct'])) }}%;background:{{ $delayColor }};"></span></span>
                            <small>{{ number_format((float) $row['delayed_pct'], 1) }}%</small>
                        </td>
                        <td><span class="sphf-num-pill">{{ number_format((int) $row['red_alarm_cases']) }}</span></td>
                        <td>{{ number_format((float) $row['withdrawal_efficiency'], 1) }}%</td>
                        <td><span class="sphf-rank-pill {{ $rankPillClass }}">{{ str_pad((string) $row['rank'], 2, '0', STR_PAD_LEFT) }}</span></td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center text-muted-foreground">No IP ranking data found for selected filters.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</section>

<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
        @if($ddTotal > 0)
            <span class="sphf-table-count">{{ number_format($ddTotal) }} total</span>
        @endif
        </span>
    <input type="text" id="sphfIpDrillSearch" class="sphf-modal__search" value="{{ request('search') }}" placeholder="Search CNIC, Beneficiary, IP..." style="max-width:300px;">
</div>
    <div class="sphf-table-wrap">
        <table class="sphf-table sphf-table--drilldown">
            <thead>
                <tr>
                    <th>BENEFICIARY/CNIC</th>
                    <th>IP</th>
                    <th>DISTRICT</th>
                    <th>TEHSIL</th>
                    <th>PENDING STAGE</th>
                    <th>AGEING DAYS</th>
                    <th>ALARM</th>
                </tr>
            </thead>
            <tbody>
                @forelse(($drilldown['rows'] ?? []) as $row)
                    @php
                        $ageClass = $row['ageing_days'] >= 120 ? 'is-critical' : ($row['ageing_days'] >= 60 ? 'is-warning' : 'is-healthy');
                        $alarmClass = match ($row['alarm_level']) {
                            'red' => 'is-red',
                            'orange' => 'is-orange',
                            'yellow' => 'is-yellow',
                            default => 'is-green',
                        };
                    @endphp
                    <tr>
                        <td><strong>{{ $row['beneficiary_name'] }}</strong><br><small>{{ $row['beneficiary_cnic'] }}</small></td>
                        <td>{{ $row['ip'] }}</td>
                        <td>{{ $row['district'] }}</td>
                        <td>{{ $row['tehsil'] }}</td>
                        <td><span class="sphf-stage-pill">{{ $row['pending_stage'] }}</span></td>
                        <td class="{{ $ageClass }}">{{ (int) $row['ageing_days'] }}</td>
                        <td><span class="alarm-dot {{ $alarmClass }}"></span></td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center text-muted-foreground py-4">No exception rows found for selected filters.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        @if($ddLastPage > 1)
        <div class="sphf-table-footer sphf-pagination-footer">
            <span class="sphf-pagination-info">
                Showing {{ number_format($ddFrom) }}–{{ number_format($ddTo) }} of {{ number_format($ddTotal) }}
            </span>
            <nav class="sphf-pager" aria-label="Drilldown pagination">
                @if($ddCurrentPage > 1)
                    <a href="{{ $pageUrl($ddCurrentPage - 1) }}" class="sphf-pager__btn" aria-label="Previous">&lsaquo;</a>
                @else
                    <span class="sphf-pager__btn is-disabled">&lsaquo;</span>
                @endif

                @php
                    $startPage = max(1, $ddCurrentPage - 2);
                    $endPage   = min($ddLastPage, $ddCurrentPage + 2);
                    if ($endPage - $startPage < 4) {
                        $startPage = max(1, $endPage - 4);
                    }
                @endphp
                @if($startPage > 1)
                    <a href="{{ $pageUrl(1) }}" class="sphf-pager__btn">1</a>
                    @if($startPage > 2)<span class="sphf-pager__ellipsis">&hellip;</span>@endif
                @endif
                @for($p = $startPage; $p <= $endPage; $p++)
                    @if($p === $ddCurrentPage)
                        <span class="sphf-pager__btn active">{{ $p }}</span>
                    @else
                        <a href="{{ $pageUrl($p) }}" class="sphf-pager__btn">{{ $p }}</a>
                    @endif
                @endfor
                @if($endPage < $ddLastPage)
                    @if($endPage < $ddLastPage - 1)<span class="sphf-pager__ellipsis">&hellip;</span>@endif
                    <a href="{{ $pageUrl($ddLastPage) }}" class="sphf-pager__btn">{{ $ddLastPage }}</a>
                @endif

                @if($ddCurrentPage < $ddLastPage)
                    <a href="{{ $pageUrl($ddCurrentPage + 1) }}" class="sphf-pager__btn" aria-label="Next">&rsaquo;</a>
                @else
                    <span class="sphf-pager__btn is-disabled">&rsaquo;</span>
                @endif
            </nav>

            <div class="sphf-per-page">
                @foreach([10, 25, 50, 100] as $opt)
                    @if($opt === $ddPerPage)
                        <span class="sphf-per-page__btn active">{{ $opt }}</span>
                    @else
                        <a href="{{ url()->current() . '?' . http_build_query(array_merge($baseQuery, ['per_page' => $opt, 'page' => 1])) }}" class="sphf-per-page__btn">{{ $opt }}</a>
                    @endif
                @endforeach
                <span class="sphf-per-page__label">/ page</span>
            </div>
        </div>
        @elseif($ddTotal > 0)
        <div class="sphf-table-footer">
            <span>Showing all {{ number_format($ddTotal) }} exception{{ $ddTotal !== 1 ? 's' : '' }}</span>
        </div>
        @endif
    </div>
</section>

<script>
// Table 1 — client-side
const ipRankingSearch = document.getElementById('sphfIpRankingSearch');
if (ipRankingSearch) {
    ipRankingSearch.addEventListener('input', () => {
        const q = ipRankingSearch.value.toLowerCase();
        document.querySelectorAll('.sphf-ip-ranking-table tbody tr').forEach(row => {
            row.style.display = row.textContent.toLowerCase().includes(q) ? '' : 'none';
        });
    });
}

// Table 2 — server-side
const ipDrillSearch = document.getElementById('sphfIpDrillSearch');
if (ipDrillSearch) {
    let timer;
    ipDrillSearch.addEventListener('input', () => {
        clearTimeout(timer);
        timer = setTimeout(() => {
            const url = new URL(window.location.href);
            url.searchParams.set('search', ipDrillSearch.value);
            url.searchParams.delete('page');
            window.location.href = url.toString();
        }, 600);
    });
}
</script>