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

@php
    $rbmfNumberValue = static function ($value) {
        return ($value !== null && $value !== '' && is_numeric($value)) ? (float) $value : null;
    };

    $rbmfFormatValue = static function ($value) {
        if ($value === null || $value === '') {
            return '-';
        }

        if (! is_numeric($value)) {
            return $value;
        }

        $raw = trim((string) $value);
        $decimals = 0;

        if (str_contains($raw, '.')) {
            $fraction = rtrim(substr($raw, strpos($raw, '.') + 1), '0');
            $decimals = min(strlen($fraction), 4);
        }

        return number_format((float) $value, $decimals);
    };

    $rbmfProgress = static function ($current, $target) use ($rbmfNumberValue) {
        $currentNumber = $rbmfNumberValue($current);
        $targetNumber = $rbmfNumberValue($target);

        if ($currentNumber === null || $targetNumber === null || $targetNumber <= 0) {
            return 0;
        }

        return min(100, round(($currentNumber / $targetNumber) * 100, 1));
    };

    $rbmfDonorTone = static function ($name) {
        $name = strtolower((string) $name);

        if (str_contains($name, 'world')) {
            return '#2563eb';
        }

        if (str_contains($name, 'adb')) {
            return '#10b981';
        }

        if (str_contains($name, 'isdb') || str_contains($name, 'islamic')) {
            return '#f97316';
        }

        return '#0a9a4c';
    };
@endphp

<style>
    .sphf-main:has(.sphf-rbmf-page) { background: #f7f3e9; }
    .sphf-rbmf-page {
        min-height: 100vh;
        padding: 20px 16px 28px;
        background: #f7f3e9;
        color: #111827;
    }
    .sphf-rbmf-title {
        margin: 0 0 28px;
        font-size: 28px;
        line-height: 1.05;
        font-weight: 850;
        letter-spacing: 0;
        color: #111827;
    }
    .sphf-rbmf-tabs {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 30px;
        flex-wrap: wrap;
    }
    .sphf-rbmf-tab {
        min-width: 134px;
        min-height: 36px;
        border: 1px solid #c7d0e1;
        border-radius: 999px;
        background: transparent;
        color: #374151;
        padding: 8px 20px;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        transition: background .15s, border-color .15s, color .15s;
    }
    .sphf-rbmf-tab.is-active {
        border-color: #0a9a4c;
        background: #0a9a4c;
        color: #fff;
    }
    .sphf-rbmf-filter-label {
        margin: 0 0 14px 3px;
        font-size: 10px;
        line-height: 1;
        font-weight: 850;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: #747b8d;
    }
    .sphf-rbmf-donors {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-bottom: 25px;
        flex-wrap: wrap;
    }
    .sphf-rbmf-donor-btn {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-height: 41px;
        min-width: 142px;
        border: 1px solid #e1e5ee;
        border-radius: 999px;
        background: #fff;
        color: #4b5563;
        padding: 8px 13px 8px 17px;
        font-size: 13px;
        font-weight: 650;
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
        transition: background .15s, border-color .15s, color .15s;
    }
    .sphf-rbmf-donor-btn.is-active {
        border-color: #20b568;
        background: #e9f7ec;
        color: #0a9a4c;
    }
    .sphf-rbmf-donor-icon {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        color: var(--rbmf-donor-color, #0a9a4c);
    }
    .sphf-rbmf-donor-icon svg {
        display: block;
        width: 100%;
        height: 100%;
    }
    .sphf-rbmf-donor-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sphf-rbmf-donor-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 25px;
        height: 22px;
        margin-left: auto;
        padding: 0 8px;
        border-radius: 999px;
        background: #eef3fa;
        color: #778295;
        font-size: 11px;
        font-weight: 800;
    }
    .sphf-rbmf-donor-btn.is-active .sphf-rbmf-donor-count {
        background: #c8f1d2;
        color: #0a9a4c;
    }
    .sphf-rbmf-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 15px;
    }
    .sphf-rbmf-card {
        min-height: 225px;
        padding: 16px 16px 14px;
        border-radius: 7px;
        border: 1px solid #c9d2e3;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .09);
        cursor: pointer;
        transition: border-color .14s ease, box-shadow .14s ease;
    }
    .sphf-rbmf-card:hover {
        border-color: #9bb2d1;
        box-shadow: 0 6px 14px rgba(15, 23, 42, .09);
    }
    .sphf-rbmf-card__top {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 13px;
    }
    .sphf-rbmf-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 18px;
        border-radius: 4px;
        padding: 3px 9px;
        background: #0E9C4A;
        color: #fff;
        font-size: 10px;
        line-height: 1;
        font-weight: 850;
        letter-spacing: .02em;
    }
    .sphf-rbmf-pill.is-iri { background: #0f172a; }
    .sphf-rbmf-donor {
        display: inline-flex;
        align-items: center;
        min-height: 20px;
        border-radius: 999px;
        padding: 4px 9px;
        background: #e8fbf7;
        color: #009b73;
        font-size: 9px;
        line-height: 1;
        font-weight: 850;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .sphf-rbmf-card h3 {
        min-height: 43px;
        margin: 0 0 20px;
        color: #111827;
        font-size: 13px;
        line-height: 1.28;
        font-weight: 850;
    }
    .sphf-rbmf-values {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: end;
        gap: 12px;
        margin-bottom: 9px;
    }
    .sphf-rbmf-values small {
        display: block;
        margin-bottom: 4px;
        color: #8b93a3;
        font-size: 9px;
        line-height: 1;
        font-weight: 700;
        text-transform: uppercase;
    }
    .sphf-rbmf-values strong {
        display: block;
        color: #111827;
        font-size: 18px;
        line-height: 1;
        font-weight: 850;
        overflow-wrap: anywhere;
    }
    .sphf-rbmf-values .is-target { text-align: right; }
    .sphf-rbmf-values .is-current strong { color: #0a9a4c; }
    .sphf-rbmf-progress {
        height: 5px;
        border-radius: 999px;
        background: #dce4ed;
        overflow: hidden;
    }
    .sphf-rbmf-progress span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: #0a9a4c;
    }
    .sphf-rbmf-achieved {
        margin: 7px 0 0;
        color: #4b5563;
        font-size: 10px;
        line-height: 1;
        font-weight: 750;
    }
    .sphf-rbmf-card__footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 13px;
        padding-top: 11px;
        border-top: 1px solid #e9edf3;
    }
    .sphf-rbmf-card__footer small {
        display: block;
        margin-bottom: 5px;
        color: #9aa2b1;
        font-size: 9px;
        line-height: 1;
        font-weight: 700;
        text-transform: uppercase;
    }
    .sphf-rbmf-card__footer strong {
        display: block;
        color: #111827;
        font-size: 12px;
        line-height: 1;
        font-weight: 850;
        overflow-wrap: anywhere;
    }
    .sphf-rbmf-card__footer .is-frequency { text-align: right; }
    .sphf-rbmf-empty {
        display: none;
        grid-column: 1 / -1;
        border: 1px dashed #cbd5e1;
        border-radius: 8px;
        background: #fff;
        color: #64748b;
        padding: 24px;
        text-align: center;
        font-size: 13px;
        font-weight: 650;
    }
    .sphf-rbmf-empty.is-visible { display: block; }
    .sphf-rbmf-modal {
        width: min(82vw, 900px);
        max-width: 900px;
        border-radius: 8px;
        overflow: hidden;
    }
    .sphf-rbmf-modal .sphf-modal__header {
        min-height: 62px;
        padding: 0 26px 0 25px;
    }
    .sphf-rbmf-modal .sphf-modal__header h3 {
        font-size: 20px;
        line-height: 1.2;
        font-weight: 500;
        color: #1f2937;
    }
    .sphf-rbmf-preview {
        border: 0;
        border-radius: 0;
        overflow: hidden;
        padding: 25px 25px 19px;
    }
    .sphf-rbmf-preview__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 0 0 16px;
        border-bottom: 0;
        background: #fff;
        color: #526783;
        font-size: 11px;
        font-weight: 850;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .sphf-rbmf-preview__tools {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: auto;
    }
    #sphfRbmfModal .sphf-rbmf-search-wrap {
        position: relative;
        display: flex;
        align-items: center;
        width: 222px;
        height: 28px;
        margin: 0;
        line-height: 1;
    }
    #sphfRbmfModal .sphf-rbmf-search-wrap i {
        position: absolute;
        left: 11px;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
        font-size: 13px;
        line-height: 1;
        pointer-events: none;
        z-index: 1;
    }
    #sphfRbmfModal .sphf-rbmf-search {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 28px !important;
        min-height: 28px !important;
        box-sizing: border-box;
        border: 1px solid #e2e8f0 !important;
        border-radius: 6px !important;
        background: #fff !important;
        color: #334155 !important;
        padding: 0 11px 0 31px !important;
        font-size: 11px !important;
        line-height: 28px !important;
        font-weight: 500 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        outline: 0 !important;
        box-shadow: none !important;
        appearance: none !important;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    #sphfRbmfModal .sphf-rbmf-search::placeholder { color: #7c8798 !important; opacity: 1; }
    #sphfRbmfModal .sphf-rbmf-search:focus,
    #sphfRbmfModal .sphf-rbmf-search:focus-visible {
        border-color: #dfe6ee !important;
        outline: 0 !important;
        box-shadow: none !important;
    }
    .sphf-rbmf-export {
        height: 28px;
        border: 0;
        border-radius: 7px;
        background: #0a9a4c;
        color: #fff;
        padding: 0 12px;
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
        white-space: nowrap;
    }
    .sphf-rbmf-export:disabled { opacity: .5; cursor: not-allowed; }
    .sphf-rbmf-export i { margin-right: 6px; font-size: 12px; }
    .sphf-rbmf-export[hidden] { display: none !important; }
    .sphf-rbmf-preview__scroll {
        max-height: 365px;
        overflow: auto;
        border: 1px solid #edf1f5;
        border-radius: 5px;
    }
    .sphf-rbmf-preview table { width: 100%; border-collapse: collapse; font-size: 11px; }
    .sphf-rbmf-preview th,
    .sphf-rbmf-preview td { padding: 12px 20px; border-bottom: 1px solid #f1f5f9; text-align: left; white-space: nowrap; }
    .sphf-rbmf-preview th { background: #eef2f6; color: #64748b; font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
    .sphf-rbmf-preview__message { padding: 18px; color: #64748b; font-size: 13px; }
    .sphf-rbmf-preview__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 18px 0 0;
        background: #fff;
    }
    .sphf-rbmf-preview__status {
        color: #64748b;
        font-size: 12px;
        font-weight: 600;
    }
    .sphf-rbmf-pagination {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        flex-wrap: wrap;
    }
    .sphf-rbmf-page-btn {
        min-width: 34px;
        height: 34px;
        border: 1px solid #dbe3ec;
        border-radius: 4px;
        background: #fff;
        color: #334155;
        padding: 0 9px;
        font-size: 12px;
        font-weight: 750;
        cursor: pointer;
    }
    .sphf-rbmf-page-btn.is-active {
        border-color: #0a9a4c;
        background: #0a9a4c;
        color: #fff;
    }
    .sphf-rbmf-page-btn:disabled { opacity: .45; cursor: not-allowed; }
    @media (max-width: 1180px) {
        .sphf-rbmf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 760px) {
        .sphf-rbmf-page { padding: 18px 14px 26px; }
        .sphf-rbmf-title { font-size: 26px; }
        .sphf-rbmf-tabs { gap: 10px; margin-bottom: 24px; }
        .sphf-rbmf-tab { flex: 1 1 150px; min-width: 0; }
        .sphf-rbmf-donor-btn { min-width: min(100%, 168px); }
        .sphf-rbmf-grid { grid-template-columns: 1fr; }
        .sphf-rbmf-preview__bar,
        .sphf-rbmf-preview__footer { align-items: stretch; flex-direction: column; }
        .sphf-rbmf-preview__tools { width: 100%; margin-left: 0; }
        .sphf-rbmf-search-wrap { width: 100%; }
    }
    @media (max-width: 520px) {
        .sphf-rbmf-donor-btn { width: 100%; }
        .sphf-rbmf-values { grid-template-columns: 1fr; }
        .sphf-rbmf-values .is-target,
        .sphf-rbmf-card__footer .is-frequency { text-align: left; }
    }
</style>

@section('content')
<section class="sphf-page sphf-rbmf-page" id="sphfRbmfPage">
    <h1 class="sphf-rbmf-title">RBMS Dashboard</h1>

    <div class="sphf-rbmf-tabs" role="tablist" aria-label="RBMS indicator level">
        <button type="button" class="sphf-rbmf-tab is-active" data-rbmf-tab="pdo" role="tab" aria-selected="true">PDO Indicators</button>
        <button type="button" class="sphf-rbmf-tab" data-rbmf-tab="iri" role="tab" aria-selected="false">IRI Indicators</button>
    </div>

    <p class="sphf-rbmf-filter-label">Filter By Donor Portfolio</p>

    <div class="sphf-rbmf-donors" aria-label="Donor filters">
        <button type="button" class="sphf-rbmf-donor-btn is-active" data-rbmf-donor="all" aria-pressed="true" style="--rbmf-donor-color: #0a9a4c;">
            <span class="sphf-rbmf-donor-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <path d="M4 7h16M7 12h10M10 17h4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
            </span>
            <span class="sphf-rbmf-donor-label">All Donors</span>
            <span class="sphf-rbmf-donor-count" data-rbmf-donor-count="all">{{ number_format((int) ($allDonorCount ?? 0)) }}</span>
        </button>
        @foreach($donorFilters ?? [] as $donorFilter)
            <button type="button" class="sphf-rbmf-donor-btn" data-rbmf-donor="{{ $donorFilter['id'] }}" aria-pressed="false" style="--rbmf-donor-color: {{ $rbmfDonorTone($donorFilter['name'] ?? '') }};">
                <span class="sphf-rbmf-donor-icon" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none">
                        <path d="M4 10h16M6 10v8M10 10v8M14 10v8M18 10v8M5 18h14M12 5l7 5H5l7-5Z" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </span>
                <span class="sphf-rbmf-donor-label">{{ $donorFilter['name'] }}</span>
                <span class="sphf-rbmf-donor-count" data-rbmf-donor-count="{{ $donorFilter['id'] }}">{{ number_format((int) ($donorFilter['count'] ?? 0)) }}</span>
            </button>
        @endforeach
    </div>

    <div class="sphf-rbmf-grid" id="sphfRbmfGrid">
        @foreach(['pdo' => $pdo ?? collect(), 'iri' => $iri ?? collect()] as $levelKey => $indicators)
            @forelse($indicators as $indicator)
                @php
                    $pct = $rbmfProgress($indicator->computed_result, $indicator->end_target);
                    $prefix = strtoupper($levelKey);
                @endphp
                <article class="sphf-rbmf-card {{ $levelKey === 'iri' ? 'is-hidden' : '' }}"
                         data-rbmf-card="true"
                         data-rbmf-level="{{ $levelKey }}"
                         data-rbmf-donor-id="{{ $indicator->donor_id ?? '' }}"
                         data-rbmf-indicator-id="{{ $indicator->id }}"
                         style="{{ $levelKey === 'iri' ? 'display:none;' : '' }}">
                    <div class="sphf-rbmf-card__top">
                        <span class="sphf-rbmf-pill {{ $levelKey === 'iri' ? 'is-iri' : '' }}">{{ $prefix }}-{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                        <span class="sphf-rbmf-donor">{{ strtoupper($indicator->donor?->name ?? 'No Donor') }}</span>
                    </div>
                    <h3>{{ $indicator->name ?: ($indicator->definition ?: 'No title provided.') }}</h3>
                    <div class="sphf-rbmf-values">
                        <div class="is-current">
                            <small>Current</small>
                            <strong>{{ $rbmfFormatValue($indicator->computed_result) }}</strong>
                        </div>
                        <div class="is-target">
                            <small>Target</small>
                            <strong>{{ $rbmfFormatValue($indicator->end_target) }}</strong>
                        </div>
                    </div>
                    <div class="sphf-rbmf-progress" aria-label="Progress">
                        <span style="width: {{ $pct }}%;"></span>
                    </div>
                    <p class="sphf-rbmf-achieved">{{ $pct }}% achieved</p>
                    <div class="sphf-rbmf-card__footer">
                        <div>
                            <small>Baseline</small>
                            <strong>{{ $rbmfFormatValue($indicator->baseline_value) }}</strong>
                        </div>
                        <div class="is-frequency">
                            <small>Freq.</small>
                            <strong>{{ $indicator->reporting_frequency ?? '-' }}</strong>
                        </div>
                    </div>
                </article>
            @empty
                <div class="sphf-rbmf-empty {{ $levelKey === 'pdo' ? 'is-visible' : '' }}" data-rbmf-empty="{{ $levelKey }}">
                    No {{ strtoupper($levelKey) }} indicators found.
                </div>
            @endforelse
        @endforeach

        <div class="sphf-rbmf-empty" id="sphfRbmfFilteredEmpty">No indicators found for the selected donor.</div>
    </div>
</section>

<div class="sphf-modal-backdrop" id="sphfRbmfModal" aria-hidden="true">
    <div class="sphf-modal sphf-rbmf-modal">
        <div class="sphf-modal__header">
            <h3 id="sphfRbmfModalTitle">RBMF Indicator Detail</h3>
            <button type="button" class="sphf-modal__close" id="sphfRbmfModalClose">
                <i class="ki-filled ki-cross"></i>
            </button>
        </div>

        <div class="sphf-rbmf-preview">
            <div class="sphf-rbmf-preview__bar">
                <span>Configured View Preview</span>
                <div class="sphf-rbmf-preview__tools">
                    <label class="sphf-rbmf-search-wrap" for="sphfRbmfPreviewSearch">
                        <i class="ki-filled ki-magnifier" aria-hidden="true"></i>
                        <input type="text" class="sphf-rbmf-search" id="sphfRbmfPreviewSearch" placeholder="Search records..." autocomplete="off">
                    </label>
                    <button type="button" class="sphf-rbmf-export d-none" id="sphfRbmfExport" disabled hidden>
                        <i class="ki-filled ki-arrow-down" aria-hidden="true"></i>Export CSV
                    </button>
                </div>
            </div>
            <div class="sphf-rbmf-preview__message" id="sphfRbmfPreviewMessage">Select an indicator to view details.</div>
            <div class="sphf-rbmf-preview__scroll" id="sphfRbmfPreviewContainer" style="display:none;">
                <table>
                    <thead id="sphfRbmfPreviewHead"></thead>
                    <tbody id="sphfRbmfPreviewBody"></tbody>
                </table>
            </div>
            <div class="sphf-rbmf-preview__footer">
                <span class="sphf-rbmf-preview__status" id="sphfRbmfPreviewPage"></span>
                <div class="sphf-rbmf-pagination" id="sphfRbmfPagination"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
(function () {
    const indicators = @json($rbmfIndicators ?? []);
    const donorCounts = {
        pdo: { all: {{ (int) ($allPdoCount ?? 0) }}, ...Object.fromEntries(@json($pdoDonorFilters ?? []).map((item) => [String(item.id), item.count])) },
        iri: { all: {{ (int) ($allIriCount ?? 0) }}, ...Object.fromEntries(@json($iriDonorFilters ?? []).map((item) => [String(item.id), item.count])) },
    };

    let activeTab = 'pdo';
    let activeDonor = 'all';

    const grid = document.getElementById('sphfRbmfGrid');
    const filteredEmpty = document.getElementById('sphfRbmfFilteredEmpty');
    const modal = document.getElementById('sphfRbmfModal');
    const modalTitle = document.getElementById('sphfRbmfModalTitle');
    const modalClose = document.getElementById('sphfRbmfModalClose');
    const previewMessage = document.getElementById('sphfRbmfPreviewMessage');
    const previewContainer = document.getElementById('sphfRbmfPreviewContainer');
    const previewHead = document.getElementById('sphfRbmfPreviewHead');
    const previewBody = document.getElementById('sphfRbmfPreviewBody');
    const previewPage = document.getElementById('sphfRbmfPreviewPage');
    const previewSearch = document.getElementById('sphfRbmfPreviewSearch');
    const pagination = document.getElementById('sphfRbmfPagination');
    const exportButton = document.getElementById('sphfRbmfExport');
    const donorContainer = document.querySelector('.sphf-rbmf-donors');

    let activeIndicator = null;
    let previewRows = [];
    let previewColumns = [];
    let previewPayload = null;
    let previewRequestId = 0;
    let searchTimer = null;

    function escapeHtml(value) {
        return String(value ?? '').replace(/[&<>"']/g, function (char) {
            return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[char];
        });
    }

    function formatNumber(value) {
        if (value === null || value === undefined || value === '') return '-';
        const number = Number(value);
        if (Number.isNaN(number)) return String(value);
        return new Intl.NumberFormat('en-US', { maximumFractionDigits: 4 }).format(number);
    }

    function formatLabel(key) {
        return String(key || '').replace(/_/g, ' ').replace(/\b\w/g, function (letter) {
            return letter.toUpperCase();
        });
    }

    function updateDonorCounts() {
        document.querySelectorAll('[data-rbmf-donor-count]').forEach(function (el) {
            const key = String(el.getAttribute('data-rbmf-donor-count') || 'all');
            el.textContent = formatNumber(donorCounts[activeTab]?.[key] ?? 0);
        });
    }

    function sortDonorFilters() {
        if (!donorContainer) return;

        const allButton = donorContainer.querySelector('[data-rbmf-donor="all"]');
        const donorButtons = Array.from(donorContainer.querySelectorAll('[data-rbmf-donor]')).filter(function (button) {
            return button.getAttribute('data-rbmf-donor') !== 'all';
        });

        donorButtons.sort(function (a, b) {
            const donorA = String(a.getAttribute('data-rbmf-donor') || '');
            const donorB = String(b.getAttribute('data-rbmf-donor') || '');
            const countA = Number(donorCounts[activeTab]?.[donorA] ?? 0);
            const countB = Number(donorCounts[activeTab]?.[donorB] ?? 0);

            if (countA !== countB) {
                return countB - countA;
            }

            const labelA = a.querySelector('.sphf-rbmf-donor-label')?.textContent || '';
            const labelB = b.querySelector('.sphf-rbmf-donor-label')?.textContent || '';

            return labelA.localeCompare(labelB);
        });

        if (allButton) {
            donorContainer.appendChild(allButton);
        }

        donorButtons.forEach(function (button) {
            donorContainer.appendChild(button);
        });
    }

    function applyFilters() {
        let visible = 0;

        document.querySelectorAll('[data-rbmf-card="true"]').forEach(function (card) {
            const matchesTab = card.getAttribute('data-rbmf-level') === activeTab;
            const donorId = card.getAttribute('data-rbmf-donor-id') || '';
            const matchesDonor = activeDonor === 'all' || donorId === activeDonor;
            const shouldShow = matchesTab && matchesDonor;

            card.style.display = shouldShow ? '' : 'none';
            if (shouldShow) visible += 1;
        });

        document.querySelectorAll('[data-rbmf-empty]').forEach(function (empty) {
            empty.classList.remove('is-visible');
        });

        if (filteredEmpty) {
            filteredEmpty.classList.toggle('is-visible', visible === 0);
        }
    }

    function setTab(tab) {
        activeTab = tab;
        activeDonor = 'all';

        document.querySelectorAll('[data-rbmf-tab]').forEach(function (button) {
            const isActive = button.getAttribute('data-rbmf-tab') === activeTab;
            button.classList.toggle('is-active', isActive);
            button.setAttribute('aria-selected', isActive ? 'true' : 'false');
        });

        document.querySelectorAll('[data-rbmf-donor]').forEach(function (button) {
            const isActive = button.getAttribute('data-rbmf-donor') === activeDonor;
            button.classList.toggle('is-active', isActive);
            button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
        });

        updateDonorCounts();
        sortDonorFilters();
        applyFilters();
    }

    function setDonor(donorId) {
        activeDonor = String(donorId || 'all');

        document.querySelectorAll('[data-rbmf-donor]').forEach(function (button) {
            const isActive = button.getAttribute('data-rbmf-donor') === activeDonor;
            button.classList.toggle('is-active', isActive);
            button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
        });

        applyFilters();
    }

    function resetPreview(message) {
        previewMessage.textContent = message;
        previewMessage.style.display = 'block';
        previewContainer.style.display = 'none';
        previewHead.innerHTML = '';
        previewBody.innerHTML = '';
        previewPage.textContent = '';
        pagination.innerHTML = '';
        previewRows = [];
        previewColumns = [];
        previewPayload = null;
        exportButton.disabled = true;
    }

    function buildPreviewUrl(indicator, page) {
        const viewKey = String(indicator.view_list || '').trim();
        const limit = 8;
        let url = '/api/databases/' + encodeURIComponent(indicator.database || 'public') + '/views/' + encodeURIComponent(viewKey) + '/preview?limit=' + limit + '&page=' + encodeURIComponent(page);

        if (viewKey.startsWith('tenant:')) {
            url = '/api/views/' + encodeURIComponent(viewKey.replace(/^tenant:/, '')) + '/preview?limit=' + limit + '&page=' + encodeURIComponent(page);
        }

        return url;
    }

    function buildExportUrl(indicator) {
        return buildPreviewUrl(indicator, 1) + '&export=csv';
    }

    function pageWindow(current, total) {
        if (total <= 7) return Array.from({ length: total }, function (_, index) { return index + 1; });

        const pages = [1];
        const start = Math.max(2, current - 1);
        const end = Math.min(total - 1, current + 1);

        if (start > 2) pages.push('...');
        for (let page = start; page <= end; page += 1) pages.push(page);
        if (end < total - 1) pages.push('...');
        pages.push(total);

        return pages;
    }

    function renderPagination(payload) {
        const page = Number(payload.page || 1);
        const totalPages = Math.max(1, Number(payload.totalPages || 1));

        pagination.innerHTML = '';

        const buttons = [
            { label: '‹', page: page - 1, disabled: page <= 1 },
            ...pageWindow(page, totalPages).map(function (item) {
                return item === '...'
                    ? { label: '...', page: null, disabled: true }
                    : { label: String(item), page: item, active: item === page };
            }),
            { label: '›', page: page + 1, disabled: page >= totalPages },
        ];

        pagination.innerHTML = buttons.map(function (button) {
            const attrs = [
                'type="button"',
                'class="sphf-rbmf-page-btn' + (button.active ? ' is-active' : '') + '"',
                button.page ? 'data-rbmf-preview-page="' + button.page + '"' : '',
                button.disabled ? 'disabled' : '',
            ].filter(Boolean).join(' ');

            return '<button ' + attrs + '>' + escapeHtml(button.label) + '</button>';
        }).join('');
    }

    function renderPreview(payload) {
        previewRows = Array.isArray(payload.rows) ? payload.rows : [];
        previewColumns = previewRows.length > 0 ? Object.keys(previewRows[0] || {}) : [];
        previewPayload = payload;

        if (previewRows.length === 0) {
            resetPreview('No data found in the configured view.');
            return;
        }

        previewHead.innerHTML = '<tr>' + previewColumns.map(function (column) {
            return '<th>' + escapeHtml(formatLabel(column)) + '</th>';
        }).join('') + '</tr>';

        renderFilteredPreviewRows();
        renderPagination(payload);
    }

    function renderFilteredPreviewRows() {
        if (!previewPayload || previewColumns.length === 0) return;

        const query = (previewSearch?.value || '').trim().toLowerCase();
        const rows = query
            ? previewRows.filter(function (row) {
                return previewColumns.some(function (column) {
                    return String(row[column] ?? '').toLowerCase().includes(query);
                });
            })
            : previewRows;

        previewBody.innerHTML = rows.map(function (row) {
            return '<tr>' + previewColumns.map(function (column) {
                return '<td>' + escapeHtml(row[column] ?? '-') + '</td>';
            }).join('') + '</tr>';
        }).join('');

        const page = Number(previewPayload.page || 1);
        const limit = Number(previewPayload.limit || previewRows.length);
        const total = Number(previewPayload.total || previewRows.length);
        const from = total === 0 ? 0 : ((page - 1) * limit) + 1;
        const to = Math.min(total, from + previewRows.length - 1);

        previewMessage.style.display = rows.length === 0 ? 'block' : 'none';
        previewMessage.textContent = rows.length === 0 ? 'No loaded records matched your search.' : '';
        previewContainer.style.display = rows.length === 0 ? 'none' : 'block';
        previewPage.textContent = query
            ? 'Displaying ' + formatNumber(rows.length) + ' of ' + formatNumber(previewRows.length) + ' loaded records.'
            : 'Displaying ' + formatNumber(from) + '-' + formatNumber(to) + ' of ' + formatNumber(total) + ' records.';
        exportButton.disabled = false;
    }

    function loadPreview(indicator, page = 1) {
        const viewKey = String(indicator.view_list || '').trim();
        if (!viewKey) {
            resetPreview('No view configured for this indicator.');
            return;
        }

        const requestId = ++previewRequestId;
        const url = buildPreviewUrl(indicator, page);
        resetPreview('Loading view preview...');

        fetch(url, { headers: { 'Accept': 'application/json' } })
            .then(function (response) { return response.json(); })
            .then(function (payload) {
                if (requestId !== previewRequestId) return;

                if (!payload || !payload.success || !Array.isArray(payload.rows)) {
                    resetPreview(payload?.message || 'No data found in the configured view.');
                    return;
                }

                renderPreview(payload);
            })
            .catch(function () {
                if (requestId !== previewRequestId) return;
                resetPreview('Error loading view preview.');
            });
    }

    function openModal(indicatorId) {
        const indicator = indicators[String(indicatorId)] || indicators[indicatorId];
        if (!indicator || !modal) return;

        activeIndicator = indicator;
        if (previewSearch) previewSearch.value = '';
        modalTitle.textContent = (indicator.level || 'RBMF') + ' Indicator Detail';
        loadPreview(indicator, 1);
        console.log(indicator);

        modal.classList.add('is-open');
        modal.setAttribute('aria-hidden', 'false');
        document.body.classList.add('sphf-modal-open');
    }

    function closeModal() {
        if (!modal) return;
        modal.classList.remove('is-open');
        modal.setAttribute('aria-hidden', 'true');
        document.body.classList.remove('sphf-modal-open');
        activeIndicator = null;
        previewRequestId += 1;
    }

    document.querySelectorAll('[data-rbmf-tab]').forEach(function (button) {
        button.addEventListener('click', function () {
            setTab(button.getAttribute('data-rbmf-tab') || 'pdo');
        });
    });

    document.querySelectorAll('[data-rbmf-donor]').forEach(function (button) {
        button.addEventListener('click', function () {
            setDonor(button.getAttribute('data-rbmf-donor') || 'all');
        });
    });

    grid?.addEventListener('click', function (event) {
        const card = event.target.closest('[data-rbmf-card="true"]');
        if (!card) return;
        openModal(card.getAttribute('data-rbmf-indicator-id'));
    });

    pagination?.addEventListener('click', function (event) {
        const button = event.target.closest('[data-rbmf-preview-page]');
        if (!button || !activeIndicator) return;

        loadPreview(activeIndicator, Number(button.getAttribute('data-rbmf-preview-page') || 1));
    });

    previewSearch?.addEventListener('input', function () {
        window.clearTimeout(searchTimer);
        searchTimer = window.setTimeout(function () {
            renderFilteredPreviewRows();
        }, 120);
    });

    exportButton?.addEventListener('click', function () {
        if (!activeIndicator) return;
        window.location.href = buildExportUrl(activeIndicator);
    });

    modalClose?.addEventListener('click', closeModal);
    modal?.addEventListener('click', function (event) {
        if (event.target === modal) closeModal();
    });

    updateDonorCounts();
    sortDonorFilters();
    applyFilters();
})();
</script>
@endsection