@extends('layouts.demo10.base')

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

    $formatRbmsValue = 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);
    };
@endphp

    {{-- ── Page Header ── --}}
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">RBMF Dashboard</h1>
        <p class="text-sm text-gray-500 mt-1">
            <a href="#" class="hover:underline">Home</a>
            <span class="mx-1">/</span>
            <span>Dashboard</span>
        </p>
    </div>

{{-- ── Tab Buttons ── --}}
<div class="flex items-center gap-3 mb-6">
    {{-- @can('view.pdo') --}}
    <button onclick="switchTab('pdo')" id="tab-pdo"
        class="px-6 py-2.5 rounded-full text-sm font-semibold transition-all bg-blue-700 text-white shadow-sm">
        PDO Indicators
    </button>
    {{-- @endcan --}}
    {{-- @can('view.iri') --}}
    <button onclick="switchTab('iri')" id="tab-iri"
        class="px-6 py-2.5 rounded-full text-sm font-semibold transition-all bg-white text-gray-700 border border-gray-300 hover:bg-gray-50">
        IRI Indicators
    </button>
    {{-- @endcan --}}
</div>

{{-- ── Donor Filter ── --}}
<div class="mb-7">
    <p class="text-xs font-semibold text-gray-400 tracking-widest mb-3">FILTER BY DONOR PORTFOLIO</p>
    <div class="flex items-center gap-3 flex-wrap">

        <button type="button" data-donor-filter="all" onclick="setDonorFilter('all')"
            class="donor-filter-btn flex items-center gap-2 px-4 py-2 rounded-full bg-blue-50 border border-blue-200 text-blue-700 text-sm font-medium transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L13 13.414V19a1 1 0 01-.553.894l-4 2A1 1 0 017 21v-7.586L3.293 6.707A1 1 0 013 6V4z"/>
            </svg>
            All Donors
            <span class="donor-filter-count bg-blue-600 text-white text-xs rounded-full px-2 py-0.5 font-bold leading-none">{{ $allDonorCount }}</span>
        </button>

        @foreach($donorFilters as $donorFilter)
            <button type="button" data-donor-filter="{{ $donorFilter['id'] }}" onclick="setDonorFilter('{{ $donorFilter['id'] }}')"
                class="donor-filter-btn flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-gray-200 text-gray-700 text-sm font-medium hover:bg-gray-50 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 3L2 8v2h20V8L12 3zm-7 7v8h3v-8H5zm5 0v8h4v-8h-4zm6 0v8h3v-8h-3zM2 20h20v2H2v-2z"/>
                </svg>
                {{ $donorFilter['name'] }}
                <span class="donor-filter-count text-gray-500 text-xs font-semibold">{{ $donorFilter['count'] }}</span>
            </button>
        @endforeach

    </div>
</div>

{{-- ══════════════════════════════════════════
     PDO Tab
══════════════════════════════════════════ --}}
<div id="content-pdo">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
        @forelse($pdo as $indicator)
            @php
                $num      = str_pad($loop->iteration, 2, '0', STR_PAD_LEFT);
                $current  = $rbmsNumberValue($indicator->computed_result);
                $baseline = is_numeric($indicator->baseline_value) ? (float) $indicator->baseline_value : null;
                $target   = is_numeric($indicator->end_target)     ? (float) $indicator->end_target     : null;
                $rawPct   = ($current !== null && $target !== null && $target > 0) ? min(100, ($current / $target) * 100) : 0;
                $pct      = rtrim(rtrim(number_format($rawPct, 2, '.', ''), '0'), '.');
            @endphp
            <div onclick="openModal({{ $indicator->id }})" data-donor-id="{{ $indicator->donor_id ?? '' }}"
                class="rbms-indicator-card bg-white rounded-2xl border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200 cursor-pointer">

                {{-- Badge row --}}
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-2">
                        <span class="bg-gray-900 text-white text-xs font-bold px-3 py-1 rounded-full">
                            PDO-{{ $num }}
                        </span>
                        <span class="text-blue-600 text-xs font-semibold border border-blue-200 bg-blue-50 px-2.5 py-0.5 rounded-full tracking-wide">
                            {{ strtoupper($indicator->donor?->name ?? 'NO DONOR') }}
                        </span>
                    </div>
                    <button onclick="event.stopPropagation()" class="text-gray-400 hover:text-gray-600 p-1 rounded">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                            <circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/>
                        </svg>
                    </button>
                </div>

                {{-- Title --}}
                <p class="text-gray-900 text-sm font-semibold leading-snug mb-5 min-h-[40px]">
                    {{ $indicator->name ?: ($indicator->definition ?: 'No title provided.') }}
                </p>

                {{-- Current + Target --}}
                <div class="flex items-end justify-between mb-2">
                    <div>
                        <p class="text-xs text-gray-400 font-medium tracking-wider mb-1">CURRENT</p>
                        <p class="text-2xl font-bold text-blue-600">{{ $formatRbmsValue($indicator->computed_result) }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-xs text-gray-400 font-medium tracking-wider mb-1">TARGET</p>
                        <p class="text-2xl font-bold text-gray-900">{{ $formatRbmsValue($indicator->end_target) }}</p>
                    </div>
                </div>

                {{-- Progress bar --}}
                <div class="w-full bg-gray-200 rounded-full h-1.5 mb-1">
                    <div class="bg-blue-600 h-1.5 rounded-full transition-all" style="width: {{ $pct }}%"></div>
                </div>
                <p class="text-xs text-gray-500 mb-4">{{ $pct }}% achieved</p>

                {{-- Baseline + Freq --}}
                <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                    <div>
                        <p class="text-xs text-gray-400 font-medium tracking-wider mb-0.5">BASELINE</p>
                        <p class="text-sm font-bold text-gray-900">{{ $formatRbmsValue($indicator->baseline_value) }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-xs text-gray-400 font-medium tracking-wider mb-0.5">FREQ.</p>
                        <p class="text-sm font-bold text-gray-900">{{ $indicator->reporting_frequency ?? '-' }}</p>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-span-3 bg-white p-6 rounded-xl border border-gray-200 text-center text-gray-500 text-sm">
                No PDO indicators found.
            </div>
        @endforelse
        @if($pdo->isNotEmpty())
            <div id="empty-pdo-filter" class="hidden col-span-3 bg-white p-6 rounded-xl border border-gray-200 text-center text-gray-500 text-sm">
                No PDO indicators found for selected donor.
            </div>
        @endif
    </div>
</div>

{{-- ══════════════════════════════════════════
     IRI Tab  (hidden by default)
══════════════════════════════════════════ --}}
<div id="content-iri" class="hidden">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
        @forelse($iri as $indicator)
            @php
                $num      = str_pad($loop->iteration, 2, '0', STR_PAD_LEFT);
                $current  = $rbmsNumberValue($indicator->computed_result);
                $baseline = is_numeric($indicator->baseline_value) ? (float) $indicator->baseline_value : null;
                $target   = is_numeric($indicator->end_target)     ? (float) $indicator->end_target     : null;
                $rawPct   = ($current !== null && $target !== null && $target > 0) ? min(100, ($current / $target) * 100) : 0;
                $pct      = rtrim(rtrim(number_format($rawPct, 2, '.', ''), '0'), '.');
            @endphp
            <div onclick="openModal({{ $indicator->id }})" data-donor-id="{{ $indicator->donor_id ?? '' }}"
                class="rbms-indicator-card bg-white rounded-2xl border border-gray-200 p-5 hover:shadow-md transition-shadow duration-200 cursor-pointer">

                {{-- Badge row --}}
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-2">
                        <span class="bg-gray-900 text-white text-xs font-bold px-3 py-1 rounded-full">
                            IRI-{{ $num }}
                        </span>
                        <span class="text-blue-600 text-xs font-semibold border border-blue-200 bg-blue-50 px-2.5 py-0.5 rounded-full tracking-wide">
                            {{ strtoupper($indicator->donor?->name ?? 'NO DONOR') }}
                        </span>
                    </div>
                    <button onclick="event.stopPropagation()" class="text-gray-400 hover:text-gray-600 p-1 rounded">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                            <circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/>
                        </svg>
                    </button>
                </div>

                {{-- Title --}}
                <p class="text-gray-900 text-sm font-semibold leading-snug mb-5 min-h-[40px]">
                    {{ $indicator->name ?: ($indicator->definition ?: 'No title provided.') }}
                </p>

                {{-- Current + Target --}}
                <div class="flex items-end justify-between mb-2">
                    <div>
                        <p class="text-xs text-gray-400 font-medium tracking-wider mb-1">CURRENT</p>
                        <p class="text-2xl font-bold text-blue-600">{{ $formatRbmsValue($indicator->computed_result) }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-xs text-gray-400 font-medium tracking-wider mb-1">TARGET</p>
                        <p class="text-2xl font-bold text-gray-900">{{ $formatRbmsValue($indicator->end_target) }}</p>
                    </div>
                </div>

                {{-- Progress bar --}}
                <div class="w-full bg-gray-200 rounded-full h-1.5 mb-1">
                    <div class="bg-blue-600 h-1.5 rounded-full transition-all" style="width: {{ $pct }}%"></div>
                </div>
                <p class="text-xs text-gray-500 mb-4">{{ $pct }}% achieved</p>

                {{-- Baseline + Freq --}}
                <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                    <div>
                        <p class="text-xs text-gray-400 font-medium tracking-wider mb-0.5">BASELINE</p>
                        <p class="text-sm font-bold text-gray-900">{{ $formatRbmsValue($indicator->baseline_value) }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-xs text-gray-400 font-medium tracking-wider mb-0.5">FREQ.</p>
                        <p class="text-sm font-bold text-gray-900">{{ $indicator->reporting_frequency ?? '-' }}</p>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-span-3 bg-white p-6 rounded-xl border border-gray-200 text-center text-gray-500 text-sm">
                No IRI indicators found.
            </div>
        @endforelse
        @if($iri->isNotEmpty())
            <div id="empty-iri-filter" class="hidden col-span-3 bg-white p-6 rounded-xl border border-gray-200 text-center text-gray-500 text-sm">
                No IRI indicators found for selected donor.
            </div>
        @endif
    </div>
</div>

{{-- ══════════════════════════════════════════════════════════
     Detail Modal
══════════════════════════════════════════════════════════ --}}
<div id="tableModal"
    class="fixed inset-0 z-50 hidden items-center justify-center p-4"
    style="background: rgba(0,0,0,0.45);">

    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-3xl p-6 relative max-h-[85vh] overflow-hidden">

        {{-- Header --}}
        <div class="flex items-center justify-between mb-5">
            <div class="flex items-center gap-3">
                <span id="modalBadge"
                    class="text-white text-xs font-semibold px-3 py-1 rounded-full">
                </span>
                <h2 class="text-xl font-semibold text-gray-800" id="modalCardTitle"></h2>
            </div>
            <button onclick="closeModal()"
                class="text-gray-400 hover:text-gray-700 text-2xl leading-none font-bold">&times;</button>
        </div>

        {{-- Metadata --}}
        <div id="indicatorMeta" class="overflow-x-auto rounded-xl border border-gray-200 mb-5">
            <table class="w-full text-sm">
                <tbody id="indicatorMetaBody"></tbody>
            </table>
        </div>

        {{-- Table view preview --}}
        <div id="indicatorViewPreview" class="mt-2">
            <div id="viewPagination" class="mb-3 flex items-center gap-2 text-xs" style="display:none;">
                <button id="prevPageBtn" onclick="changePreviewPage(-1)" class="px-3 py-1 rounded border text-gray-600 hover:bg-gray-100">Prev</button>
                <span id="pageInfo" class="text-gray-700">Page 1</span>
                <button id="nextPageBtn" onclick="changePreviewPage(1)" class="px-3 py-1 rounded border text-gray-600 hover:bg-gray-100">Next</button>
                <span id="totalInfo" class="text-gray-500">(total 0)</span>
            </div>

            <div id="viewPreviewMessage" class="p-3 text-gray-500 text-sm">Loading view preview…</div>
            <div class="overflow-x-auto rounded-xl border border-gray-200 max-h-72 overflow-y-auto" id="viewPreviewContainer" style="display:none;">
                <table class="w-full text-sm">
                    <thead id="viewPreviewHead"></thead>
                    <tbody id="viewPreviewBody"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
/* ── Indicator data map keyed by id ── */
const rbmsIndicators = @json($rbmsIndicators);
let currentPreviewIndicatorId = null;
let previewPage = 1;
const previewLimit = 20;
let previewTotal = 0;
let activeDonorFilter = 'all';

const donorButtonActiveClasses = ['bg-blue-50', 'border-blue-200', 'text-blue-700'];
const donorButtonInactiveClasses = ['bg-white', 'border-gray-200', 'text-gray-700', 'hover:bg-gray-50'];
const donorCountActiveClasses = ['bg-blue-600', 'text-white', 'rounded-full', 'px-2', 'py-0.5', 'font-bold', 'leading-none'];
const donorCountInactiveClasses = ['text-gray-500', 'font-semibold'];

/* ── Tab switching ── */
const activeTabClasses = ['bg-blue-700', 'text-white', 'shadow-sm'];
const inactiveTabClasses = ['bg-white', 'text-gray-700', 'border', 'border-gray-300', 'hover:bg-gray-50'];

function setDonorButtonState(button, isActive) {
    const count = button.querySelector('.donor-filter-count');

    button.classList.remove(...donorButtonActiveClasses, ...donorButtonInactiveClasses);
    button.classList.add(...(isActive ? donorButtonActiveClasses : donorButtonInactiveClasses));

    if (count) {
        count.classList.remove(...donorCountActiveClasses, ...donorCountInactiveClasses);
        count.classList.add(...(isActive ? donorCountActiveClasses : donorCountInactiveClasses));
    }
}

function updateFilteredEmptyState(tab) {
    const content = document.getElementById('content-' + tab);
    const empty = document.getElementById('empty-' + tab + '-filter');

    if (!content || !empty) return;

    const cards = Array.from(content.querySelectorAll('.rbms-indicator-card'));
    const hasVisibleCards = cards.some(card => !card.classList.contains('hidden'));
    empty.classList.toggle('hidden', hasVisibleCards);
}

function setDonorFilter(donorId) {
    activeDonorFilter = String(donorId || 'all');

    document.querySelectorAll('.rbms-indicator-card').forEach(card => {
        const cardDonorId = card.dataset.donorId || '';
        const shouldShow = activeDonorFilter === 'all' || cardDonorId === activeDonorFilter;
        card.classList.toggle('hidden', !shouldShow);
    });

    document.querySelectorAll('.donor-filter-btn').forEach(button => {
        setDonorButtonState(button, button.dataset.donorFilter === activeDonorFilter);
    });

    updateFilteredEmptyState('pdo');
    updateFilteredEmptyState('iri');
}

function setTabButtonState(button, isActive) {
    button.classList.remove(...activeTabClasses, ...inactiveTabClasses);
    button.classList.add(...(isActive ? activeTabClasses : inactiveTabClasses));
}

function switchTab(tab) {
    document.querySelectorAll('[id^="content-"]').forEach(el => el.classList.add('hidden'));
    document.querySelectorAll('[id^="tab-"]').forEach(btn => {
        setTabButtonState(btn, false);
    });
    document.getElementById('content-' + tab).classList.remove('hidden');
    setTabButtonState(document.getElementById('tab-' + tab), true);
    updateFilteredEmptyState(tab);
}

/* ── Modal ── */
function openModal(indicatorId) {
    const ind = rbmsIndicators[indicatorId];
    if (!ind) return;

    const isPdo = ind.level === 'PDO';

    const badge = document.getElementById('modalBadge');
    badge.textContent = isPdo ? 'PDO' : 'IRI';
    badge.style.background = isPdo ? '#111827' : '#2563eb';

    document.getElementById('modalCardTitle').textContent =
        `Table View — ${isPdo ? 'PDO' : 'IRI'}-${String(ind.id).padStart(2, '0')}`;

    renderIndicatorMeta(ind);

    currentPreviewIndicatorId = indicatorId;
    previewPage = 1;
    previewTotal = 0;
    loadIndicatorViewPreview(ind, previewPage);

    const modal = document.getElementById('tableModal');
    modal.classList.remove('hidden');
    modal.classList.add('flex');
}

function formatLabel(key) {
    return key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
}

function formatDisplayNumber(value) {
    if (value === null || value === undefined || value === '') return '-';

    const raw = String(value).trim();
    if (raw === '' || Number.isNaN(Number(raw))) return value;

    const fraction = raw.includes('.') ? raw.split('.')[1].replace(/0+$/, '') : '';
    const maximumFractionDigits = Math.min(fraction.length, 4);

    return new Intl.NumberFormat('en-US', {
        minimumFractionDigits: 0,
        maximumFractionDigits,
    }).format(Number(raw));
}

function formatValue(key, value) {
    if (value === null || value === undefined || value === '') return '-';
    if (key === 'gender') {
        return `<span class="px-3 py-1 text-xs rounded-full bg-blue-100 text-blue-700">♂ ${value}</span>`;
    }
    if (key === 'age_group') {
        return `<span class="px-3 py-1 text-xs rounded-full bg-gray-100">${value}</span>`;
    }
    if (key === 'beneficiary_type') {
        return `<span class="px-3 py-1 text-xs rounded-full bg-teal-600 text-white">👤 ${value}</span>`;
    }
    if (key === 'disability_status') {
        return value === 'Yes'
            ? `<span class="px-3 py-1 text-xs rounded-full bg-green-100 text-green-700">Yes</span>`
            : `<span class="px-3 py-1 text-xs rounded-full bg-gray-200 text-gray-600">No</span>`;
    }
    return formatDisplayNumber(value);
}

function renderIndicatorMeta(indicator) {
    // kept empty intentionally (same as before)
}

function updateViewPagination(page, total, totalPages) {
    const pagination = document.getElementById('viewPagination');
    const pageInfo   = document.getElementById('pageInfo');
    const totalInfo  = document.getElementById('totalInfo');
    const prevBtn    = document.getElementById('prevPageBtn');
    const nextBtn    = document.getElementById('nextPageBtn');

    if (!pagination || total <= 0) {
        pagination.style.display = 'none';
        return;
    }

    pagination.style.display = 'flex';
    pageInfo.textContent = `Page ${page} of ${totalPages}`;
    totalInfo.textContent = `(total ${formatDisplayNumber(total)})`;
    prevBtn.disabled = page <= 1;
    nextBtn.disabled = page >= totalPages;
    prevBtn.classList.toggle('opacity-50', page <= 1);
    nextBtn.classList.toggle('opacity-50', page >= totalPages);
}

function loadIndicatorViewPreview(indicator, page = 1) {
    previewPage = page;
    const message   = document.getElementById('viewPreviewMessage');
    const container = document.getElementById('viewPreviewContainer');
    const head      = document.getElementById('viewPreviewHead');
    const body      = document.getElementById('viewPreviewBody');

    message.textContent = 'Loading view preview…';
    message.style.display = 'block';
    container.style.display = 'none';
    head.innerHTML = '';
    body.innerHTML = '';

    const viewKey = (indicator.view_list || '').trim();
    if (!viewKey) {
        message.textContent = 'No view configured for this indicator.';
        updateViewPagination(0, 0, 0);
        return;
    }

    const db    = indicator.database || 'public';
    const limit = previewLimit;
    let url = `/api/databases/${encodeURIComponent(db)}/views/${encodeURIComponent(viewKey)}/preview?limit=${limit}&page=${page}`;
    if (viewKey.startsWith('tenant:')) {
        const tenantViewId = viewKey.replace(/^tenant:/, '');
        url = `/api/views/${encodeURIComponent(tenantViewId)}/preview?limit=${limit}&page=${page}`;
    }

    fetch(url)
        .then(res => res.json())
        .then(res => {
            if (!res.success || !Array.isArray(res.rows) || res.rows.length === 0) {
                message.textContent = 'No data found in view preview.';
                updateViewPagination(page, res.total || 0, res.totalPages || 0);
                previewTotal = res.total || 0;
                return;
            }

            previewTotal = res.total || res.rows.length;
            const totalPages = res.totalPages || Math.max(1, Math.ceil(previewTotal / limit));
            updateViewPagination(page, previewTotal, totalPages);

            const allCols      = Object.keys(res.rows[0] || {});
            const selectedCols = new Set();

            if (Array.isArray(indicator.disaggregations) && indicator.disaggregations.length) {
                indicator.disaggregations.forEach(c => selectedCols.add(String(c)));
            }
            if (indicator.field_to_aggregate) {
                selectedCols.add(String(indicator.field_to_aggregate));
            }

            const cols = selectedCols.size
                ? allCols.filter(col => selectedCols.has(col) || col === indicator.field_to_aggregate)
                : allCols;

            if (!cols.length) {
                message.textContent = 'No matching columns found for disaggregations/aggregate field.';
                container.style.display = 'none';
                return;
            }

            head.innerHTML = `<tr class="bg-gray-900 text-white">${cols.map(col => `<th class="px-4 py-3 text-left font-semibold text-sm">↕ ${formatLabel(col)}</th>`).join('')}</tr>`;
            body.innerHTML = res.rows.map(row => `<tr class="border-b hover:bg-gray-50">${cols.map(col => `<td class="px-4 py-3">${formatValue(col, row[col])}</td>`).join('')}</tr>`).join('');

            message.style.display = 'none';
            container.style.display = 'block';
        })
        .catch(err => {
            console.error('View preview error:', err);
            message.textContent = 'Error loading view preview.';
            updateViewPagination(page, 0, 0);
        });
}

function changePreviewPage(delta) {
    if (!currentPreviewIndicatorId) return;
    const totalPages = previewLimit > 0 ? Math.ceil(previewTotal / previewLimit) : 1;
    const nextPage   = Math.min(Math.max(1, previewPage + delta), totalPages);
    if (nextPage === previewPage) return;
    previewPage = nextPage;
    const indicator = rbmsIndicators[currentPreviewIndicatorId];
    if (indicator) loadIndicatorViewPreview(indicator, previewPage);
}

function closeModal() {
    const modal = document.getElementById('tableModal');
    modal.classList.add('hidden');
    modal.classList.remove('flex');
}

setDonorFilter('all');

document.getElementById('tableModal').addEventListener('click', function (e) {
    if (e.target === this) closeModal();
});
</script>
@endsection