<?php require_once 'layout/header.php';
require_once 'config/icons.php';

$totalSiswa     = $pdo->query("SELECT COUNT(*) FROM siswa WHERE status='aktif'")->fetchColumn();
$totalLunas     = $pdo->query("SELECT COUNT(*) FROM tagihan_spp WHERE status='lunas'")->fetchColumn();
$totalBelum     = $pdo->query("SELECT COUNT(*) FROM tagihan_spp WHERE status='belum_bayar'")->fetchColumn();
$totalPemasukan = $pdo->query("SELECT COALESCE(SUM(jumlah_bayar),0) FROM pembayaran WHERE MONTH(COALESCE(tanggal_bayar,created_at))=MONTH(NOW()) AND YEAR(COALESCE(tanggal_bayar,created_at))=YEAR(NOW())")->fetchColumn();
$riwayatTerbaru = $pdo->query("SELECT p.*, s.nama, s.nis, s.kelas, s.jurusan, s.foto, t.bulan, t.tahun FROM pembayaran p JOIN siswa s ON p.siswa_id=s.id JOIN tagihan_spp t ON p.tagihan_id=t.id ORDER BY COALESCE(p.tanggal_bayar,p.created_at) DESC LIMIT 100")->fetchAll();

$avatarColors  = ['#4F6EF7','#A855F7','#38BDF8','#34D399','#FB923C','#FBBF24','#818CF8','#F472B6'];
$uploadFotoAbs = str_replace('\\','/',dirname(__DIR__)).'/uploads/foto_siswa/';
$uploadFotoUrl = 'uploads/foto_siswa/';

$hariIndo       = ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'];
$bulanIndonesia = ['','Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
$tglHariIni     = $hariIndo[date('w')].', '.date('d').' '.$bulanIndonesia[(int)date('n')].' '.date('Y');
?>

<style>
/* ── View Toggle ── */
.view-toggle {
  display:flex;gap:4px;background:var(--bg3);border-radius:10px;padding:3px;
}
.view-toggle button {
  display:flex;align-items:center;gap:5px;padding:5px 11px;
  border:none;border-radius:8px;background:transparent;color:var(--text3);
  font-size:12px;font-weight:500;cursor:pointer;
  transition:all .18s ease;white-space:nowrap;
}
.view-toggle button svg { flex-shrink:0; }
.view-toggle button.active {
  background:var(--card,#fff);color:var(--indigo);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.view-toggle button:hover:not(.active) { color:var(--text); }

.riwayat-outer {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.riwayat-header {
  flex-shrink: 0;
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  background: var(--card, #fff);
  position: relative; z-index: 3;
}
.riwayat-data-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 520px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.riwayat-data-wrap::-webkit-scrollbar       { width: 5px; }
.riwayat-data-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.riwayat-data-wrap::-webkit-scrollbar-track { background: transparent; }
.riwayat-data-wrap table  { width: 100%; border-collapse: collapse; }
.riwayat-data-wrap thead  { position: sticky; top: 0; z-index: 2; }
.riwayat-data-wrap thead th {
  background: var(--bg2, #f8f9fc);
  box-shadow: 0 1.5px 0 var(--border);
}
.dash-pager {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg2, #f8f9fc);
  flex-shrink: 0;
}
#view-table { display: block; }
#view-cards { display: none;  }

/* ── Card Grid ── */
.payment-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; padding: 16px;
}
.pay-card {
  background: var(--bg2, #f8f9fc);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 15px; display: flex; flex-direction: column; gap: 11px;
  transition: box-shadow .18s, transform .18s;
  animation: cardIn .22s ease both;
}
.pay-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.07); transform: translateY(-2px); }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pay-card-top  { display: flex; align-items: center; gap: 10px; }
.pay-card-idx  {
  margin-left: auto; width: 22px; height: 22px; border-radius: 6px;
  background: var(--bg3); display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--text3); flex-shrink: 0;
}
.pay-card-name { font-weight: 700; font-size: 13.5px; color: var(--text); line-height: 1.2; }
.pay-card-nis  { font-size: 11px; color: var(--text3); }
.pay-card hr   { border: none; border-top: 1px solid var(--border); margin: 0; }
.pay-card-rows { display: flex; flex-direction: column; gap: 7px; }
.pay-card-row  { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.pay-card-row-label     { display: flex; align-items: center; gap: 5px; color: var(--text3); }
.pay-card-row-label svg { flex-shrink: 0; }
.pay-card-amount {
  font-family: 'DM Mono', monospace; font-weight: 600;
  font-size: 15px; color: var(--green); letter-spacing: -.3px;
}

/* ── Avatar ── */
.siswa-ava-wrap {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff;
}
.siswa-ava-wrap img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ── Pagination controls ── */
.pager-info { font-size: 12.5px; color: var(--text2); }
.pager-btns { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pager-btn {
  min-width: 34px; height: 34px; padding: 0 10px;
  border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--card, #fff); color: var(--text);
  font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.pager-btn:hover:not(.pager-disabled):not(.pager-active) {
  background: var(--bg2); border-color: var(--indigo); color: var(--indigo);
}
.pager-btn.pager-active  { background: var(--indigo); color: #fff; border-color: var(--indigo); font-weight: 700; }
.pager-btn.pager-disabled { opacity: .38; cursor: not-allowed; }
.pager-ellipsis { font-size: 13px; color: var(--text3); padding: 0 3px; user-select: none; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .view-toggle button span.toggle-label { display: none; }
  .payment-cards { grid-template-columns: 1fr; }
  .dash-pager { flex-direction: column; align-items: flex-start; }
  .pager-btn  { min-width: 30px; height: 30px; font-size: 12px; }
  .riwayat-data-wrap { max-height: 400px; }
}
</style>

<div class="page-header">
  <div>
    <div class="page-header-title" style="display:flex;align-items:center;gap:10px">
      <span style="width:32px;height:32px;background:var(--indigo-light);border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:var(--indigo);flex-shrink:0"><?= $ICO['dashboard'] ?></span>
      Dashboard
    </div>
    <div class="page-header-sub">Ringkasan sistem SPP &mdash; <?= $tglHariIni ?></div>
  </div>
</div>

<!-- Stat Cards -->
<div class="stats">
  <div class="stat">
    <div class="stat-icon" style="background:var(--indigo-light);color:var(--indigo)"><?= $ICO['siswa'] ?></div>
    <div class="stat-val"><?= number_format($totalSiswa) ?></div>
    <div class="stat-label">Siswa Aktif</div>
  </div>
  <div class="stat">
    <div class="stat-icon" style="background:var(--green-dim);color:var(--green)"><?= $ICO['lunas'] ?></div>
    <div class="stat-val"><?= number_format($totalLunas) ?></div>
    <div class="stat-label">Tagihan Lunas</div>
  </div>
  <div class="stat">
    <div class="stat-icon" style="background:var(--red-dim);color:var(--red)"><?= $ICO['belum'] ?></div>
    <div class="stat-val"><?= number_format($totalBelum) ?></div>
    <div class="stat-label">Belum Bayar</div>
  </div>
  <div class="stat">
    <div class="stat-icon" style="background:var(--amber-dim);color:var(--amber)"><?= $ICO['tunai'] ?></div>
    <div class="stat-val" style="font-size:17px"><?= rupiah((int)$totalPemasukan) ?></div>
    <div class="stat-label">Pemasukan Bulan Ini</div>
  </div>
</div>

<!-- Recent Payments -->
<div class="card" style="padding:0;overflow:hidden">
  <div class="riwayat-outer">

    <!-- Header -->
    <div class="riwayat-header">
      <div style="display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text)">
        <span style="color:var(--indigo)"><?= $ICO['riwayat'] ?></span> Pembayaran Terbaru
        <?php if(!empty($riwayatTerbaru)): ?>
        <span class="pill pill-blue"><?= count($riwayatTerbaru) ?> transaksi</span>
        <?php endif ?>
      </div>
      <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
        <!-- Per page selector -->
        <div style="display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text2)">
          <span>Tampil</span>
          <select id="perPageSel" onchange="onPerPageChange(this.value)"
                  style="padding:4px 8px;border:1.5px solid var(--border);border-radius:7px;
                         font-size:12px;background:var(--card,#fff);color:var(--text);
                         font-family:inherit;cursor:pointer">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="50">50</option>
            <option value="100">100</option>
          </select>
          <span>per halaman</span>
        </div>
        <!-- View toggle -->
        <div class="view-toggle" role="group">
          <button id="btn-table" class="active" onclick="switchView('table')" title="Tampilan tabel">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18M9 3v18"/>
            </svg>
            <span class="toggle-label">Tabel</span>
          </button>
          <button id="btn-cards" onclick="switchView('cards')" title="Tampilan kartu">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="3" width="8" height="8" rx="1.5"/><rect x="13" y="3" width="8" height="8" rx="1.5"/>
              <rect x="3" y="13" width="8" height="8" rx="1.5"/><rect x="13" y="13" width="8" height="8" rx="1.5"/>
            </svg>
            <span class="toggle-label">Kartu</span>
          </button>
        </div>
      </div>
    </div>

    <?php
      $metodeIco  = ['tunai'=>$ICO['tunai'],'transfer'=>$ICO['transfer'],'qris'=>$ICO['qris']];
      $metodePill = ['tunai'=>'pill-orange','transfer'=>'pill-blue','qris'=>'pill-purple'];
    ?>

    <!-- Area scroll -->
    <div class="riwayat-data-wrap" id="riwayat-scroll-area">

      <!-- TABLE VIEW -->
      <div id="view-table">
        <table>
          <thead>
            <tr>
              <th>#</th><th>Siswa</th><th>Kelas</th><th>Periode</th>
              <th>Jumlah</th><th>Metode</th><th>Tanggal</th>
            </tr>
          </thead>
          <tbody id="dash-tbody">
          <?php if(empty($riwayatTerbaru)): ?>
            <tr><td colspan="7">
              <div class="empty-state">
                <div class="empty-state-icon" style="color:var(--text3)"><?= $ICO['list'] ?></div>
                <h4>Belum ada transaksi</h4>
                <p>Data pembayaran akan muncul di sini</p>
              </div>
            </td></tr>
          <?php else:
            foreach($riwayatTerbaru as $i=>$r):
              $col      = $avatarColors[$i % count($avatarColors)];
              $mk       = strtolower($r['metode_bayar']);
              $mIco     = $metodeIco[$mk]  ?? $ICO['pay'];
              $mPill    = $metodePill[$mk] ?? 'pill-purple';
              $fotoFile = $r['foto'] ?? '';
              $hasFoto  = $fotoFile && file_exists($uploadFotoAbs.$fotoFile);
          ?>
            <tr data-row="<?= $i ?>">
              <td><div style="width:26px;height:26px;border-radius:7px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--text3)"><?= $i+1 ?></div></td>
              <td>
                <div style="display:flex;align-items:center;gap:9px">
                  <?php if($hasFoto): ?>
                  <div class="siswa-ava-wrap">
                    <img src="<?= e($uploadFotoUrl.$fotoFile) ?>" alt="<?= e($r['nama']) ?>"
                         onerror="this.parentNode.style.background='<?= $col ?>';this.outerHTML='<?= mb_strtoupper(mb_substr($r['nama'],0,1)) ?>'">
                  </div>
                  <?php else: ?>
                  <div class="siswa-ava-wrap" style="background:<?= $col ?>"><?= mb_strtoupper(mb_substr($r['nama'],0,1)) ?></div>
                  <?php endif ?>
                  <div>
                    <div style="font-weight:600;font-size:13.5px"><?= e($r['nama']) ?></div>
                    <div style="font-size:11px;color:var(--text3)"><?= e($r['nis']) ?></div>
                  </div>
                </div>
              </td>
              <td><span class="pill pill-purple"><?= e($r['kelas'].' '.$r['jurusan']) ?></span></td>
              <td>
                <div style="display:flex;align-items:center;gap:5px;color:var(--text2);font-size:13px">
                  <?= $ICO['calendar'] ?> <?= bulanIndo((int)$r['bulan']).' '.$r['tahun'] ?>
                </div>
              </td>
              <td><span style="font-family:'DM Mono',monospace;font-weight:500;color:var(--green);font-size:13.5px"><?= rupiah((int)$r['jumlah_bayar']) ?></span></td>
              <td><span class="pill <?= $mPill ?>" style="display:inline-flex;align-items:center;gap:5px"><?= $mIco ?> <?= ucfirst($r['metode_bayar']) ?></span></td>
              <td>
                <div style="font-size:12.5px;color:var(--text2)"><?= date('d/m/Y', strtotime($r['tanggal_bayar'] ?? $r['created_at'])) ?></div>
                <div style="font-size:11px;color:var(--text3)"><?= date('H:i', strtotime($r['tanggal_bayar'] ?? $r['created_at'])) ?> WIB</div>
              </td>
            </tr>
          <?php endforeach; endif ?>
          </tbody>
        </table>
      </div>

      <!-- CARD VIEW -->
      <div id="view-cards">
        <?php if(empty($riwayatTerbaru)): ?>
          <div style="padding:32px">
            <div class="empty-state">
              <div class="empty-state-icon" style="color:var(--text3)"><?= $ICO['list'] ?></div>
              <h4>Belum ada transaksi</h4>
              <p>Data pembayaran akan muncul di sini</p>
            </div>
          </div>
        <?php else: ?>
        <div class="payment-cards" id="dash-cards-grid">
          <?php foreach($riwayatTerbaru as $i=>$r):
            $col      = $avatarColors[$i % count($avatarColors)];
            $mk       = strtolower($r['metode_bayar']);
            $mIco     = $metodeIco[$mk]  ?? $ICO['pay'];
            $mPill    = $metodePill[$mk] ?? 'pill-purple';
            $tgl      = date('d/m/Y', strtotime($r['tanggal_bayar'] ?? $r['created_at']));
            $jam      = date('H:i',   strtotime($r['tanggal_bayar'] ?? $r['created_at']));
            $fotoFile = $r['foto'] ?? '';
            $hasFoto  = $fotoFile && file_exists($uploadFotoAbs.$fotoFile);
          ?>
          <div class="pay-card" data-card="<?= $i ?>" style="animation-delay:<?= $i*35 ?>ms">
            <div class="pay-card-top">
              <?php if($hasFoto): ?>
              <div class="siswa-ava-wrap" style="width:36px;height:36px;border-radius:10px">
                <img src="<?= e($uploadFotoUrl.$fotoFile) ?>" alt="<?= e($r['nama']) ?>"
                     onerror="this.parentNode.style.background='<?= $col ?>';this.outerHTML='<?= mb_strtoupper(mb_substr($r['nama'],0,1)) ?>'">
              </div>
              <?php else: ?>
              <div class="avatar" style="background:<?= $col ?>"><?= mb_strtoupper(mb_substr($r['nama'],0,1)) ?></div>
              <?php endif ?>
              <div>
                <div class="pay-card-name"><?= e($r['nama']) ?></div>
                <div class="pay-card-nis"><?= e($r['nis']) ?></div>
              </div>
              <div class="pay-card-idx"><?= $i+1 ?></div>
            </div>
            <hr>
            <div class="pay-card-rows">
              <div class="pay-card-row">
                <span class="pay-card-row-label">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg>
                  Kelas
                </span>
                <span class="pill pill-purple"><?= e($r['kelas'].' '.$r['jurusan']) ?></span>
              </div>
              <div class="pay-card-row">
                <span class="pay-card-row-label"><?= $ICO['calendar'] ?> Periode</span>
                <span style="font-size:12.5px;color:var(--text2)"><?= bulanIndo((int)$r['bulan']).' '.$r['tahun'] ?></span>
              </div>
              <div class="pay-card-row">
                <span class="pay-card-row-label">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                  Tanggal
                </span>
                <span style="font-size:12.5px;color:var(--text2)"><?= $tgl ?> &middot; <?= $jam ?> WIB</span>
              </div>
              <div class="pay-card-row">
                <span class="pay-card-row-label">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
                  Metode
                </span>
                <span class="pill <?= $mPill ?>" style="display:inline-flex;align-items:center;gap:4px"><?= $mIco ?> <?= ucfirst($r['metode_bayar']) ?></span>
              </div>
            </div>
            <hr>
            <div style="display:flex;align-items:center;justify-content:space-between">
              <span style="font-size:11.5px;color:var(--text3);font-weight:500">Total Bayar</span>
              <span class="pay-card-amount"><?= rupiah((int)$r['jumlah_bayar']) ?></span>
            </div>
          </div>
          <?php endforeach; ?>
        </div>
        <?php endif; ?>
      </div>

    </div><!-- end .riwayat-data-wrap -->

    <!-- Pagination tabel -->
    <div id="pager-table"></div>
    <!-- Pagination kartu -->
    <div id="pager-cards"></div>

  </div><!-- end .riwayat-outer -->
</div><!-- end .card -->

<script>
(function () {
  var perPage     = parseInt(localStorage.getItem('dash_per_page') || '10');
  var pageTable   = 0;
  var pageCards   = 0;
  var currentView = localStorage.getItem('riwayat_view') || 'table';

  var sel = document.getElementById('perPageSel');
  if (sel) sel.value = String(perPage);

  function scrollToTop() {
    var el = document.getElementById('riwayat-scroll-area');
    if (el) el.scrollTop = 0;
  }

  function applyView(mode) {
    var isTable = mode === 'table';
    document.getElementById('view-table').style.display = isTable ? 'block' : 'none';
    document.getElementById('view-cards').style.display = isTable ? 'none'  : 'block';
    document.getElementById('btn-table').classList.toggle('active',  isTable);
    document.getElementById('btn-cards').classList.toggle('active', !isTable);
    document.getElementById('pager-table').style.display = isTable ? '' : 'none';
    document.getElementById('pager-cards').style.display = isTable ? 'none' : '';
  }

  window.switchView = function (mode) {
    currentView = mode;
    localStorage.setItem('riwayat_view', mode);
    applyView(mode);
    pageTable = 0; renderTable(0);
    pageCards = 0; renderCards(0);
    scrollToTop();
  };

  window.onPerPageChange = function (val) {
    perPage = parseInt(val);
    localStorage.setItem('dash_per_page', val);
    pageTable = 0; renderTable(0);
    pageCards = 0; renderCards(0);
    scrollToTop();
  };

  function renderTable(p) {
    pageTable = p;
    var rows  = document.querySelectorAll('#dash-tbody tr[data-row]');
    var total = rows.length;
    if (total === 0) return;
    var start = p * perPage;
    rows.forEach(function (r, i) {
      r.style.display = (i >= start && i < start + perPage) ? '' : 'none';
    });
    buildPager('pager-table', total, perPage, p, renderTable);
  }

  function renderCards(p) {
    pageCards = p;
    var cards = document.querySelectorAll('#dash-cards-grid .pay-card[data-card]');
    var total = cards.length;
    if (total === 0) return;
    var start = p * perPage;
    cards.forEach(function (c, i) {
      c.style.display = (i >= start && i < start + perPage) ? '' : 'none';
    });
    buildPager('pager-cards', total, perPage, p, renderCards);
  }

  function buildPager(containerId, total, pp, current, cb) {
    var wrap = document.getElementById(containerId);
    if (!wrap) return;
    var totalPages = Math.ceil(total / pp);
    if (totalPages <= 1) { wrap.innerHTML = ''; return; }

    var from = current * pp + 1;
    var to   = Math.min((current + 1) * pp, total);

    var h = '<div class="dash-pager">';
    h += '<span class="pager-info">Menampilkan <b>' + from + '&ndash;' + to + '</b> dari <b>' + total + '</b> transaksi</span>';
    h += '<div class="pager-btns">';
    h += '<button class="pager-btn' + (current === 0 ? ' pager-disabled' : '') + '" data-p="' + (current - 1) + '"' + (current === 0 ? ' disabled' : '') + '>&#8249; Prev</button>';

    var s = Math.max(0, current - 2);
    var e = Math.min(totalPages - 1, current + 2);
    if (s > 0) { h += '<button class="pager-btn" data-p="0">1</button>'; if (s > 1) h += '<span class="pager-ellipsis">…</span>'; }
    for (var i = s; i <= e; i++) {
      h += '<button class="pager-btn' + (i === current ? ' pager-active' : '') + '" data-p="' + i + '">' + (i + 1) + '</button>';
    }
    if (e < totalPages - 1) { if (e < totalPages - 2) h += '<span class="pager-ellipsis">…</span>'; h += '<button class="pager-btn" data-p="' + (totalPages - 1) + '">' + totalPages + '</button>'; }
    h += '<button class="pager-btn' + (current === totalPages - 1 ? ' pager-disabled' : '') + '" data-p="' + (current + 1) + '"' + (current === totalPages - 1 ? ' disabled' : '') + '>Next &#8250;</button>';
    h += '</div></div>';
    wrap.innerHTML = h;

    wrap.querySelectorAll('.pager-btn:not(.pager-disabled)').forEach(function (btn) {
      btn.addEventListener('click', function () { cb(parseInt(this.dataset.p)); scrollToTop(); });
    });
  }

  applyView(currentView);
  renderTable(0);
  renderCards(0);
})();
</script>

<?php require_once 'layout/footer.php'; ?>