<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laporan Kas RT — <?php echo isset($periode_label) ? $periode_label : date('F Y'); ?></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --teal-900: #0b5a52;
  --teal-700: #0b7a6e;
  --teal-600: #0d9488;
  --teal-500: #14b8a6;
  --teal-100: #ccfbf1;
  --teal-50:  #f0fdfa;
  --navy:     #1e3a5f;
  --green-800: #166534;
  --green-700: #15803d;
  --green-100: #dcfce7;
  --green-50:  #f0fdf4;
  --red-800:   #991b1b;
  --red-700:   #b91c1c;
  --red-100:   #fee2e2;
  --red-50:    #fef2f2;
  --slate-900: #0f172a;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50:  #f8fafc;
}

body {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 12px;
  color: var(--slate-900);
  background: #eef2f7;
  line-height: 1.5;
}

.page-wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

/* ─── ACTION BAR ─── */
.action-bar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
  background: #fff; border-radius: 12px;
  padding: 11px 16px; margin-bottom: 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
}
.ab-left { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; color: var(--teal-900); }
.ab-icon {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--teal-600), var(--teal-500));
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px;
}
.ab-right { display: flex; gap: 7px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 50px; border: none;
  font-size: 11.5px; font-weight: 700; cursor: pointer;
  text-decoration: none; font-family: 'Inter', sans-serif;
  transition: all .15s; white-space: nowrap;
}
.btn-back  { background: var(--slate-100); color: var(--slate-700); border: 1.5px solid var(--slate-200); }
.btn-back:hover { background: var(--slate-200); }
.btn-print { background: linear-gradient(135deg, var(--teal-700), var(--teal-500)); color: #fff; }
.btn-print:hover { transform: translateY(-1px); color: #fff; }

/* ─── DOC HEADER ─── */
.doc-header {
  background: #fff; border-radius: 12px;
  padding: 18px 22px 14px; margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  border-top: 4px solid var(--teal-600);
}
.dh-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 14px;
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1.5px solid var(--slate-100);
}
.dh-title { font-size: 17px; font-weight: 900; color: var(--teal-900); letter-spacing: -.3px; margin-bottom: 3px; }
.dh-sub   { font-size: 10.5px; color: var(--slate-500); line-height: 1.7; }
.dh-sub strong { color: var(--slate-700); }
.dh-right { text-align: right; font-size: 10.5px; color: var(--slate-500); line-height: 1.8; }
.dh-right strong { color: var(--slate-700); }
.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 20px; }
.info-item label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-400); display: block; margin-bottom: 1px; }
.info-item span  { font-size: 11px; font-weight: 700; color: var(--slate-900); }

/* ─── SUMMARY STRIP ─── */
.summary-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.s-card { background: #fff; border-radius: 10px; padding: 12px 16px; box-shadow: 0 1px 4px rgba(0,0,0,.06); border: 1px solid var(--slate-200); }
.s-card-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-400); margin-bottom: 3px; }
.s-card-value { font-size: 14px; font-weight: 900; }
.s-card-value.masuk       { color: var(--green-700); }
.s-card-value.keluar      { color: var(--red-700); }
.s-card-value.selisih-pos { color: var(--teal-700); }
.s-card-value.selisih-neg { color: var(--red-700); }

/* ════════════════════════════════════════
   BUKU KAS — LAYOUT KIRI (MASUK) | KANAN (KELUAR)
════════════════════════════════════════ */
.buku-wrap {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.09);
  margin-bottom: 12px;
}

/* Judul buku kas */
.buku-title-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 11px 16px;
  background: linear-gradient(90deg, var(--navy), #1e3d6e);
  color: #fff;
}
.buku-title-bar .bt-left {
  font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 8px;
}
.buku-title-bar .bt-right { display: flex; gap: 8px; flex-wrap: wrap; }
.bt-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
}
.bt-pill.green { background: rgba(22,163,74,.25); color: #86efac; border: 1px solid rgba(134,239,172,.3); }
.bt-pill.red   { background: rgba(220,38,38,.25);  color: #fca5a5; border: 1px solid rgba(252,165,165,.3); }

/* Grid 2 kolom utama */
.buku-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: start;
}
.buku-divider { background: var(--slate-200); }

/* Header kolom */
.col-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 2px solid;
}
.col-label.masuk  { background: linear-gradient(90deg, var(--green-50), #fff); border-color: var(--green-100); color: var(--green-800); }
.col-label.keluar { background: linear-gradient(90deg, var(--red-50),   #fff); border-color: var(--red-100);   color: var(--red-800);   }
.col-label .cl-title { font-size: 11.5px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.col-label .cl-badge {
  font-size: 9.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
}
.col-label.masuk  .cl-badge { background: var(--green-100); color: var(--green-700); }
.col-label.keluar .cl-badge { background: var(--red-100);   color: var(--red-700); }

/* Tabel dalam kolom */
.col-tbl { width: 100%; border-collapse: collapse; }
.col-tbl thead tr { background: #f8fafc; }
.col-tbl thead th {
  padding: 7px 9px;
  font-size: 7.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--slate-400);
  border-bottom: 1.5px solid var(--slate-200);
  text-align: left; white-space: nowrap;
}
.col-tbl thead th.right { text-align: right; }
.col-tbl tbody tr { border-bottom: 1px solid #f1f5f9; transition: background .1s; }
.col-tbl tbody tr:last-child { border-bottom: none; }
.col-tbl tbody tr:hover { background: #f8fafc !important; }
.col-tbl tbody td { padding: 6px 9px; font-size: 10.5px; vertical-align: middle; color: var(--slate-700); }
.col-tbl tfoot td {
  padding: 8px 9px; font-weight: 800; font-size: 11px;
  border-top: 2px solid;
}
.col-tbl.masuk-tbl  tfoot td { background: var(--green-50); color: var(--green-800); border-color: var(--green-100); }
.col-tbl.keluar-tbl tfoot td { background: var(--red-50);   color: var(--red-800);   border-color: var(--red-100); }

/* Cell helpers */
.tc  { text-align: center; }
.tr  { text-align: right; }
.num { color: var(--slate-400); font-weight: 700; font-size: 9px; }
.amt-masuk  { font-weight: 700; color: var(--green-700); }
.amt-keluar { font-weight: 700; color: var(--red-700); }
.kas-badge {
  display: inline-block; padding: 1.5px 7px; border-radius: 999px;
  font-size: 8.5px; font-weight: 700;
  background: var(--teal-50); color: var(--teal-700);
  border: 1px solid var(--teal-100);
}

/* Empty state */
.empty-cell { padding: 36px 16px !important; text-align: center; color: var(--slate-300) !important; font-size: 11px; }

/* ─── SALDO AKHIR FULL-WIDTH ─── */
.saldo-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(90deg, var(--teal-50), #fff);
  border-top: 2px solid var(--teal-500);
}
.saldo-bar .sb-label {
  font-size: 12px; font-weight: 800; color: var(--teal-900);
  display: flex; align-items: center; gap: 7px;
}
.saldo-bar .sb-label i { color: var(--teal-500); font-size: 14px; }
.sb-nums { display: flex; align-items: center; gap: 18px; }
.sb-item { text-align: right; }
.sb-item .sb-key { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-400); margin-bottom: 1px; }
.sb-item .sb-val { font-size: 13px; font-weight: 900; }
.sb-item .sb-val.pos { color: var(--teal-700); }
.sb-item .sb-val.neg { color: var(--red-700); }
.sb-sep { width: 1px; height: 32px; background: var(--slate-200); }

/* ─── FOOTER ─── */
.doc-footer {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 10px;
  background: #fff; border-radius: 10px; padding: 11px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  font-size: 10px; color: var(--slate-500); line-height: 1.7;
  margin-bottom: 10px;
}
.doc-footer strong { color: var(--slate-700); }

/* ─── TTD ─── */
.ttd-section {
  background: #fff; border-radius: 10px;
  padding: 16px 20px; box-shadow: 0 1px 4px rgba(0,0,0,.06);
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;
}
.ttd-box { text-align: center; }
.ttd-label { font-size: 10px; font-weight: 600; color: var(--slate-600); }
.ttd-space { height: 52px; margin: 8px 0; }
.ttd-name  { font-size: 10.5px; font-weight: 700; color: var(--slate-900); border-top: 1px solid var(--slate-300); padding-top: 5px; }

/* ══════ PRINT ══════ */
@media print {
  @page { size: A4 landscape; margin: 8mm 7mm; }
  body  { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .action-bar { display: none !important; }
  .page-wrap  { padding: 0; max-width: 100%; }

  .doc-header  { border-radius: 0; padding: 7px 10px 6px; margin-bottom: 6px; box-shadow: none; }
  .dh-title    { font-size: 13px; }
  .dh-sub, .dh-right { font-size: 8px; }
  .info-item label { font-size: 7px; }
  .info-item span  { font-size: 9px; }

  .summary-strip { gap: 5px; margin-bottom: 6px; }
  .s-card { padding: 6px 9px; border-radius: 5px; box-shadow: none; }
  .s-card-label { font-size: 7px; }
  .s-card-value { font-size: 10px; }

  .buku-wrap { border-radius: 0; box-shadow: none; border: 1px solid var(--slate-200); margin-bottom: 6px; }
  .buku-title-bar { padding: 7px 10px; }
  .buku-title-bar .bt-left { font-size: 10px; }
  .bt-pill { font-size: 8.5px; padding: 2px 8px; }

  .col-label { padding: 6px 8px; }
  .col-label .cl-title { font-size: 9.5px; }
  .col-label .cl-badge { font-size: 8px; padding: 1px 6px; }
  .col-tbl thead th { padding: 5px 6px; font-size: 6.5px; }
  .col-tbl tbody td { padding: 4px 6px; font-size: 8.5px; }
  .col-tbl tfoot td { padding: 5px 6px; font-size: 9px; }
  .kas-badge { font-size: 7.5px; padding: 1px 5px; }

  .saldo-bar { padding: 7px 10px; }
  .saldo-bar .sb-label { font-size: 10px; }
  .sb-item .sb-val { font-size: 11px; }
  .sb-item .sb-key { font-size: 7px; }

  .doc-footer  { padding: 6px 10px; border-radius: 0; box-shadow: none; font-size: 7.5px; margin-bottom: 6px; }
  .ttd-section { border-radius: 0; box-shadow: none; padding: 10px 14px; }
  .ttd-label, .ttd-name { font-size: 8px; }
  .ttd-space { height: 38px; }

  tbody tr { page-break-inside: avoid; }
}

/* ── Mobile stack ── */
@media (max-width: 680px) {
  .buku-grid { grid-template-columns: 1fr; }
  .buku-divider { display: none; }
  .page-wrap { max-width: 100%; }
}
</style>
</head>
<body>

<?php
$total_pemasukan   = isset($total_pemasukan)   ? (float)$total_pemasukan   : 0;
$total_pengeluaran = isset($total_pengeluaran) ? (float)$total_pengeluaran : 0;
$selisih           = $total_pemasukan - $total_pengeluaran;
$periode_label     = isset($periode_label) ? $periode_label : date('F Y');
$tgl_dari          = isset($tgl_dari)      ? $tgl_dari      : '';
$tgl_sampai        = isset($tgl_sampai)    ? $tgl_sampai    : '';
$jml_pemasukan     = isset($pemasukan)   ? count($pemasukan)   : 0;
$jml_pengeluaran   = isset($pengeluaran) ? count($pengeluaran) : 0;
?>

<div class="page-wrap">

  <!-- ACTION BAR -->
  <div class="action-bar">
    <div class="ab-left">
      <div class="ab-icon"><i class="bi bi-book-half"></i></div>
      Cetak Buku Kas RT — <?php echo $periode_label; ?>
    </div>
    <div class="ab-right">
      <a href="<?php echo base_url('kas/laporan') . ($tgl_dari ? '?tgl_dari='.$tgl_dari.'&tgl_sampai='.$tgl_sampai : ''); ?>"
         class="btn btn-back">
        <i class="bi bi-arrow-left"></i> Kembali
      </a>
      <button onclick="
        document.title = 'Buku Kas RT - <?php echo addslashes($periode_label); ?>';
        window.print();
        document.title = 'Cetak Buku Kas RT';
      " class="btn btn-print">
        <i class="bi bi-printer-fill"></i> Cetak / PDF
      </button>
    </div>
  </div>

  <!-- DOC HEADER -->
  <div class="doc-header">
    <div class="dh-top">
      <div>
        <div class="dh-title">BUKU KAS RT</div>
        <div class="dh-sub">
          Periode: <strong><?php echo $periode_label; ?></strong>
          <?php if ($tgl_dari && $tgl_sampai): ?>
          &nbsp;·&nbsp; <strong><?php echo date('d/m/Y', strtotime($tgl_dari)); ?></strong>
          s/d <strong><?php echo date('d/m/Y', strtotime($tgl_sampai)); ?></strong>
          <?php endif; ?>
          &nbsp;·&nbsp; Pemasukan: <strong><?php echo $jml_pemasukan; ?> trx</strong>
          &nbsp;·&nbsp; Pengeluaran: <strong><?php echo $jml_pengeluaran; ?> trx</strong>
        </div>
      </div>
      <div class="dh-right">
        Dicetak: <strong><?php echo date('d/m/Y H:i'); ?> WIB</strong><br>
        <strong><?php echo date('d F Y'); ?></strong>
      </div>
    </div>
    <div class="info-grid">
      <div class="info-item">
        <label>Periode</label>
        <span><?php echo $periode_label; ?></span>
      </div>
      <div class="info-item">
        <label>Total Pemasukan</label>
        <span style="color:var(--green-700);">Rp <?php echo number_format($total_pemasukan, 0, ',', '.'); ?></span>
      </div>
      <div class="info-item">
        <label>Total Pengeluaran</label>
        <span style="color:var(--red-700);">Rp <?php echo number_format($total_pengeluaran, 0, ',', '.'); ?></span>
      </div>
      <div class="info-item">
        <label>Selisih / Saldo</label>
        <span style="color:<?php echo $selisih >= 0 ? 'var(--teal-700)' : 'var(--red-700)'; ?>;font-size:12px;font-weight:800;">
          <?php echo $selisih >= 0 ? '+' : '−'; ?>Rp <?php echo number_format(abs($selisih), 0, ',', '.'); ?>
        </span>
      </div>
    </div>
  </div>

  <!-- SUMMARY STRIP -->
  <div class="summary-strip">
    <div class="s-card" style="border-left:3px solid var(--green-700);">
      <div class="s-card-label"><i class="bi bi-arrow-down-circle me-1"></i>Total Pemasukan</div>
      <div class="s-card-value masuk">Rp <?php echo number_format($total_pemasukan, 0, ',', '.'); ?></div>
    </div>
    <div class="s-card" style="border-left:3px solid var(--red-700);">
      <div class="s-card-label"><i class="bi bi-arrow-up-circle me-1"></i>Total Pengeluaran</div>
      <div class="s-card-value keluar">Rp <?php echo number_format($total_pengeluaran, 0, ',', '.'); ?></div>
    </div>
    <div class="s-card" style="border-left:3px solid var(--teal-500);">
      <div class="s-card-label"><i class="bi bi-wallet2 me-1"></i>Selisih / Saldo</div>
      <div class="s-card-value <?php echo $selisih >= 0 ? 'selisih-pos' : 'selisih-neg'; ?>">
        <?php echo $selisih >= 0 ? '+' : '−'; ?>Rp <?php echo number_format(abs($selisih), 0, ',', '.'); ?>
      </div>
    </div>
  </div>

  <!-- ═══════════ BUKU KAS KIRI | KANAN ═══════════ -->
  <div class="buku-wrap">

    <!-- Judul -->
    <div class="buku-title-bar">
      <div class="bt-left">
        <i class="bi bi-journal-bookmark-fill"></i>
        BUKU KAS — <?php echo strtoupper($periode_label); ?>
      </div>
      <div class="bt-right">
        <span class="bt-pill green">
          <i class="bi bi-arrow-down-circle-fill"></i>
          Pemasukan: Rp <?php echo number_format($total_pemasukan, 0, ',', '.'); ?>
        </span>
        <span class="bt-pill red">
          <i class="bi bi-arrow-up-circle-fill"></i>
          Pengeluaran: Rp <?php echo number_format($total_pengeluaran, 0, ',', '.'); ?>
        </span>
      </div>
    </div>

    <!-- Dua kolom -->
    <div class="buku-grid">

      <!-- ══ KOLOM KIRI: PEMASUKAN ══ -->
      <div>
        <div class="col-label masuk">
          <div class="cl-title">
            <i class="bi bi-arrow-down-circle-fill" style="color:var(--green-700);"></i>
            PEMASUKAN / DEBIT
          </div>
          <span class="cl-badge"><?php echo $jml_pemasukan; ?> transaksi</span>
        </div>
        <table class="col-tbl masuk-tbl">
          <thead>
            <tr>
              <th style="width:24px;">No</th>
              <th style="width:74px;">Tanggal</th>
              <th>Uraian</th>
              <th style="width:76px;">Kas</th>
              <th style="width:100px;" class="right">Nominal (Rp)</th>
            </tr>
          </thead>
          <tbody>
            <?php if (!empty($pemasukan)):
              $no = 1;
              foreach ($pemasukan as $p):
                $bg = $no % 2 === 0 ? '#f0fdf4' : '#fff';
            ?>
            <tr style="background:<?php echo $bg; ?>">
              <td class="tc num"><?php echo $no++; ?></td>
              <td style="font-size:9.5px; color:var(--slate-500); white-space:nowrap;">
                <?php echo date('d/m/Y', strtotime($p->tanggal)); ?>
              </td>
              <td>
                <div style="font-weight:600; font-size:10.5px; color:var(--slate-900);">
                  <?php echo htmlspecialchars($p->kategori ?? '-'); ?>
                </div>
                <?php if (!empty($p->keterangan)): ?>
                <div style="font-size:9px; color:var(--slate-400); margin-top:1px;">
                  <?php echo htmlspecialchars($p->keterangan); ?>
                </div>
                <?php endif; ?>
              </td>
              <td>
                <?php if (!empty($p->nama_kas)): ?>
                  <span class="kas-badge"><?php echo htmlspecialchars($p->nama_kas); ?></span>
                <?php else: ?>
                  <span style="color:var(--slate-300);">—</span>
                <?php endif; ?>
              </td>
              <td class="tr amt-masuk">
                <?php echo number_format($p->nominal, 0, ',', '.'); ?>
              </td>
            </tr>
            <?php endforeach;
            else: ?>
            <tr><td colspan="5" class="empty-cell">
              <i class="bi bi-inbox" style="display:block;font-size:22px;margin-bottom:4px;"></i>
              Tidak ada data pemasukan
            </td></tr>
            <?php endif; ?>
          </tbody>
          <?php if (!empty($pemasukan)): ?>
          <tfoot>
            <tr>
              <td colspan="4" class="tr" style="font-size:9px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;">
                Total Pemasukan
              </td>
              <td class="tr" style="font-size:12px; color:var(--green-700);">
                <?php echo number_format($total_pemasukan, 0, ',', '.'); ?>
              </td>
            </tr>
          </tfoot>
          <?php endif; ?>
        </table>
      </div>

      <!-- Garis pembatas vertikal -->
      <div class="buku-divider"></div>

      <!-- ══ KOLOM KANAN: PENGELUARAN ══ -->
      <div>
        <div class="col-label keluar">
          <div class="cl-title">
            <i class="bi bi-arrow-up-circle-fill" style="color:var(--red-700);"></i>
            PENGELUARAN / KREDIT
          </div>
          <span class="cl-badge"><?php echo $jml_pengeluaran; ?> transaksi</span>
        </div>
        <table class="col-tbl keluar-tbl">
          <thead>
            <tr>
              <th style="width:24px;">No</th>
              <th style="width:74px;">Tanggal</th>
              <th>Uraian</th>
              <th style="width:76px;">Kas</th>
              <th style="width:100px;" class="right">Nominal (Rp)</th>
            </tr>
          </thead>
          <tbody>
            <?php if (!empty($pengeluaran)):
              $no = 1;
              foreach ($pengeluaran as $p):
                $bg = $no % 2 === 0 ? '#fef2f2' : '#fff';
            ?>
            <tr style="background:<?php echo $bg; ?>">
              <td class="tc num"><?php echo $no++; ?></td>
              <td style="font-size:9.5px; color:var(--slate-500); white-space:nowrap;">
                <?php echo date('d/m/Y', strtotime($p->tanggal)); ?>
              </td>
              <td>
                <div style="font-weight:600; font-size:10.5px; color:var(--slate-900);">
                  <?php echo htmlspecialchars($p->kategori ?? '-'); ?>
                </div>
                <?php if (!empty($p->keterangan)): ?>
                <div style="font-size:9px; color:var(--slate-400); margin-top:1px;">
                  <?php echo htmlspecialchars($p->keterangan); ?>
                </div>
                <?php endif; ?>
              </td>
              <td>
                <?php if (!empty($p->nama_kas)): ?>
                  <span class="kas-badge"><?php echo htmlspecialchars($p->nama_kas); ?></span>
                <?php else: ?>
                  <span style="color:var(--slate-300);">—</span>
                <?php endif; ?>
              </td>
              <td class="tr amt-keluar">
                <?php echo number_format($p->nominal, 0, ',', '.'); ?>
              </td>
            </tr>
            <?php endforeach;
            else: ?>
            <tr><td colspan="5" class="empty-cell">
              <i class="bi bi-inbox" style="display:block;font-size:22px;margin-bottom:4px;"></i>
              Tidak ada data pengeluaran
            </td></tr>
            <?php endif; ?>
          </tbody>
          <?php if (!empty($pengeluaran)): ?>
          <tfoot>
            <tr>
              <td colspan="4" class="tr" style="font-size:9px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;">
                Total Pengeluaran
              </td>
              <td class="tr" style="font-size:12px; color:var(--red-700);">
                <?php echo number_format($total_pengeluaran, 0, ',', '.'); ?>
              </td>
            </tr>
          </tfoot>
          <?php endif; ?>
        </table>
      </div>

    </div><!-- /buku-grid -->

    <!-- SALDO AKHIR full-width -->
    <div class="saldo-bar">
      <div class="sb-label">
        <i class="bi bi-bookmark-star-fill"></i>
        SALDO AKHIR PERIODE
      </div>
      <div class="sb-nums">
        <div class="sb-item">
          <div class="sb-key">Total Masuk</div>
          <div class="sb-val" style="color:var(--green-700);">
            Rp <?php echo number_format($total_pemasukan, 0, ',', '.'); ?>
          </div>
        </div>
        <div class="sb-sep"></div>
        <div class="sb-item">
          <div class="sb-key">Total Keluar</div>
          <div class="sb-val" style="color:var(--red-700);">
            Rp <?php echo number_format($total_pengeluaran, 0, ',', '.'); ?>
          </div>
        </div>
        <div class="sb-sep"></div>
        <div class="sb-item">
          <div class="sb-key">Selisih / Saldo</div>
          <div class="sb-val <?php echo $selisih >= 0 ? 'pos' : 'neg'; ?>" style="font-size:16px;">
            <?php echo $selisih >= 0 ? '+' : '−'; ?>Rp <?php echo number_format(abs($selisih), 0, ',', '.'); ?>
          </div>
        </div>
      </div>
    </div>

  </div><!-- /buku-wrap -->

  <!-- FOOTER -->
  <div class="doc-footer">
    <div>
      Laporan kas resmi RT. Data otomatis dari sistem.<br>
      Periode: <strong><?php echo $periode_label; ?></strong>
      &nbsp;·&nbsp; Selisih: <strong>
        <?php echo $selisih >= 0 ? '+' : '−'; ?>Rp <?php echo number_format(abs($selisih), 0, ',', '.'); ?>
      </strong>
    </div>
    <div style="text-align:right;">
      Dicetak: <?php echo date('d F Y, H:i'); ?> WIB
    </div>
  </div>

  <!-- TTD -->
  <div class="ttd-section">
    <div class="ttd-box">
      <div class="ttd-label">Bendahara RT</div>
      <div class="ttd-space"></div>
      <div class="ttd-name">(__________________________)</div>
    </div>
    <div class="ttd-box">
      <div class="ttd-label">Ketua RT</div>
      <div class="ttd-space"></div>
      <div class="ttd-name">(__________________________)</div>
    </div>
    <div class="ttd-box">
      <div class="ttd-label">Mengetahui</div>
      <div class="ttd-space"></div>
      <div class="ttd-name">(__________________________)</div>
    </div>
  </div>

</div>
</body>
</html>