<!-- views/kas/laporan.php -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --teal-900: #0d3d38;
  --teal-800: #0b5a52;
  --teal-700: #0b7a6e;
  --teal-600: #0d9488;
  --teal-500: #14b8a6;
  --teal-400: #2dd4bf;
  --teal-50:  #f0fdfa;
  --teal-100: #ccfbf1;
  --green-600: #059669;
  --green-500: #10b981;
  --green-50:  #ecfdf5;
  --red-700:  #b91c1c;
  --red-600:  #dc2626;
  --red-500:  #ef4444;
  --red-400:  #f87171;
  --red-50:   #fef2f2;
  --slate-50: #f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-300:#cbd5e1;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-900:#0f172a;
  --card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.06);
}

.laporan-wrapper {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--slate-900);
  padding-bottom: 40px;
}

/* ── Page Header ── */
.lap-page-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; margin-bottom: 24px; flex-wrap: wrap;
}
.lap-page-header h4 {
  font-size: 1.25rem; font-weight: 800; margin: 0 0 3px;
  display: flex; align-items: center; gap: 10px;
}
.lap-page-header h4 .head-icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem;
  box-shadow: 0 4px 12px rgba(13,148,136,.3);
}
.lap-page-header small { color: var(--slate-400); font-size: .8rem; font-weight: 500; }

.btn-back-lap {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 9px;
  border: 1.5px solid var(--teal-500); background: #fff;
  color: var(--teal-700); text-decoration: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; font-weight: 700;
  transition: all .15s; white-space: nowrap;
}
.btn-back-lap:hover { background: var(--teal-700); color: #fff; border-color: var(--teal-700); }

/* ── Filter Card ── */
.filter-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--slate-200);
  border-top: 3px solid var(--teal-500);
  padding: 20px 22px;
  margin-bottom: 20px;
  animation: fadeUp .3s ease both;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:none; }
}

/* ── Quick Filter Buttons ── */
.quick-filter-row {
  display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--slate-100);
}
.qf-label {
  font-size: .72rem; font-weight: 700; color: var(--slate-400);
  text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; margin-right: 4px;
  white-space: nowrap;
}
.btn-qf {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 20px;
  border: 1.5px solid var(--slate-200);
  background: #fff; color: var(--slate-600);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: all .15s; white-space: nowrap;
  text-decoration: none;
}
.btn-qf:hover {
  border-color: var(--teal-500); color: var(--teal-700);
  background: var(--teal-50);
}
.btn-qf.active {
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  color: #fff; border-color: transparent;
  box-shadow: 0 3px 10px rgba(13,148,136,.28);
}

/* ── Filter Row (manual) ── */
.filter-row {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
}
.filter-field { display: flex; flex-direction: column; gap: 5px; }
.filter-field label {
  font-size: .72rem; font-weight: 700; color: var(--slate-400);
  text-transform: uppercase; letter-spacing: .06em;
}
.filter-field select, .filter-field input[type=date] {
  padding: 9px 12px; border-radius: 8px;
  border: 1.5px solid var(--slate-200);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .875rem; color: var(--slate-900); background: #fff;
  outline: none; transition: border-color .15s, box-shadow .15s;
  min-width: 130px;
}
.filter-field select:focus, .filter-field input[type=date]:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(13,148,136,.12);
}
.btn-filter {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  color: #fff; border: none; border-radius: 9px;
  padding: 10px 22px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .875rem; font-weight: 700;
  box-shadow: 0 4px 14px rgba(13,148,136,.28);
  cursor: pointer; transition: transform .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn-filter:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13,148,136,.36); }

/* ── Periode Badge (info aktif) ── */
.periode-info {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--teal-50); color: var(--teal-700);
  border: 1px solid var(--teal-100);
  padding: 5px 12px; border-radius: 20px;
  font-size: .78rem; font-weight: 700;
  margin-left: auto;
}

/* ── Print Button ── */
.btn-print {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 9px;
  border: 1.5px solid var(--slate-200); background: #fff;
  color: var(--slate-600);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.btn-print:hover { background: var(--slate-100); border-color: var(--slate-300); }

/* ── Summary Cards ── */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.summary-card {
  border-radius: 14px; padding: 20px 18px;
  color: #fff; position: relative; overflow: hidden;
  transition: transform .18s, box-shadow .18s;
  animation: fadeUp .35s ease both;
}
.summary-card:nth-child(1) { animation-delay: .05s; }
.summary-card:nth-child(2) { animation-delay: .1s; }
.summary-card:nth-child(3) { animation-delay: .15s; }
.summary-card:hover { transform: translateY(-3px); }
.summary-card::before {
  content: ''; position: absolute; top: -25px; right: -25px;
  width: 110px; height: 110px; border-radius: 50%;
  background: rgba(255,255,255,.10);
}
.summary-card::after {
  content: ''; position: absolute; bottom: -40px; right: 50px;
  width: 150px; height: 150px; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.summary-card .sc-label {
  font-size: .72rem; font-weight: 700; opacity: .82;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px; position: relative; z-index: 1;
}
.summary-card .sc-amount {
  font-size: 1.3rem; font-weight: 800; line-height: 1.2;
  position: relative; z-index: 1;
}
.summary-card .sc-amount small { font-size: .62em; font-weight: 600; opacity: .8; }
.summary-card .sc-icon {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  background: rgba(255,255,255,.16); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; z-index: 1;
}
.summary-card.sc-green {
  background: linear-gradient(135deg, #059669, #10b981, #34d399);
  box-shadow: 0 8px 26px rgba(16,185,129,.28);
}
.summary-card.sc-red {
  background: linear-gradient(135deg, var(--red-700), var(--red-500), var(--red-400));
  box-shadow: 0 8px 26px rgba(239,68,68,.26);
}
.summary-card.sc-teal {
  background: linear-gradient(135deg, var(--teal-800), var(--teal-600), var(--teal-400));
  box-shadow: 0 8px 26px rgba(13,148,136,.28);
}
.summary-card.sc-teal.negatif {
  background: linear-gradient(135deg, var(--red-700), var(--red-600), var(--red-400));
  box-shadow: 0 8px 26px rgba(239,68,68,.26);
}

/* ── Detail Grid ── */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  animation: fadeUp .4s .2s ease both;
}

.detail-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--slate-200);
  overflow: hidden;
}
.detail-head {
  padding: 14px 18px;
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: .9rem;
  border-bottom: 1px solid transparent;
}
.detail-head.green {
  background: linear-gradient(90deg, var(--green-50), #fff);
  border-bottom-color: rgba(16,185,129,.14);
  color: #065f46;
}
.detail-head.red {
  background: linear-gradient(90deg, var(--red-50), #fff);
  border-bottom-color: rgba(239,68,68,.14);
  color: var(--red-700);
}
.detail-head .dh-badge {
  margin-left: auto; font-size: .72rem; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
}
.detail-head.green .dh-badge { background: rgba(16,185,129,.12); color: var(--green-600); }
.detail-head.red   .dh-badge { background: rgba(239,68,68,.1);   color: var(--red-600); }

.detail-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.detail-table thead th {
  padding: 10px 14px;
  background: var(--slate-50);
  border-bottom: 2px solid var(--slate-200);
  font-size: .73rem; font-weight: 700; color: var(--slate-400);
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.detail-table tbody tr {
  border-bottom: 1px solid #f8fafc;
  transition: background .1s;
}
.detail-table tbody tr:last-child { border-bottom: none; }
.detail-table tbody tr:hover { background: var(--teal-50); }
.detail-table tbody td {
  padding: 10px 14px; vertical-align: middle; color: var(--slate-700);
}
.detail-table tfoot td {
  padding: 11px 14px; font-weight: 800;
  background: linear-gradient(90deg, var(--teal-50), #fff);
  border-top: 2px solid rgba(13,148,136,.15);
}
.nominal-masuk  { color: var(--teal-700); font-weight: 700; }
.nominal-keluar { color: var(--red-500); font-weight: 700; }
.empty-row td {
  padding: 36px 14px !important;
  text-align: center;
  color: var(--slate-300) !important;
  font-size: .85rem;
}

/* ── Mobile transaction cards ── */
.mobile-trx-list { display: none; }
.m-trx-item {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid var(--slate-100);
  gap: 10px;
}
.m-trx-item:last-child { border-bottom: none; }
.m-trx-date { font-size: .72rem; color: var(--slate-400); font-weight: 600; margin-bottom: 2px; }
.m-trx-kat  { font-size: .83rem; font-weight: 700; color: var(--slate-700); }
.m-trx-ket  { font-size: .75rem; color: var(--slate-400); margin-top: 1px; }
.m-trx-nom  { font-size: .9rem; font-weight: 800; white-space: nowrap; flex-shrink: 0; }

/* ══════════════════════
   PRINT STYLES
══════════════════════ */
@media print {
  @page { size: A4 portrait; margin: 10mm 8mm; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .filter-card,
  .btn-back-lap,
  .btn-print,
  .no-print { display: none !important; }

  .laporan-wrapper { padding-bottom: 0; }

  /* Print Header */
  .print-header {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--teal-500);
    margin-bottom: 14px;
  }
  .print-header .ph-title {
    font-size: 15px; font-weight: 900; color: var(--teal-900);
  }
  .print-header .ph-sub {
    font-size: 10px; color: var(--slate-500); margin-top: 2px;
  }
  .print-header .ph-right {
    text-align: right; font-size: 9.5px; color: var(--slate-500); line-height: 1.7;
  }

  .summary-grid { gap: 8px; margin-bottom: 12px; }
  .summary-card { border-radius: 8px; padding: 12px 14px; }
  .summary-card .sc-amount { font-size: 1rem; }
  .summary-card .sc-icon { width: 36px; height: 36px; font-size: 1rem; }

  .detail-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .detail-card { border-radius: 8px; }
  .detail-table thead th { padding: 7px 10px; font-size: .68rem; }
  .detail-table tbody td { padding: 6px 10px; font-size: .78rem; }
  .detail-table tfoot td { padding: 7px 10px; }
  .mobile-trx-list { display: none !important; }

  .lap-page-header { display: none; }
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .summary-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .summary-card.sc-teal { grid-column: 1 / -1; }
  .summary-card .sc-amount { font-size: 1.1rem; }
  .detail-grid { grid-template-columns: 1fr; gap: 14px; }
  .detail-table { display: none; }
  .mobile-trx-list { display: block; padding: 0 14px 14px; }
  .filter-row { flex-direction: column; align-items: stretch; }
  .filter-field select, .filter-field input[type=date] { min-width: unset; }
  .btn-filter { width: 100%; justify-content: center; }
  .lap-page-header { flex-direction: column; align-items: flex-start; }
  .quick-filter-row { gap: 5px; }
  .btn-qf { font-size: .72rem; padding: 5px 10px; }
  .periode-info { margin-left: 0; }
}
@media (max-width: 480px) {
  .summary-grid { grid-template-columns: 1fr; }
  .summary-card.sc-teal { grid-column: auto; }
}
</style>

<?php
// ── Hitung periode label untuk ditampilkan ──────────────────────
$preset  = $this->input->get('preset') ?: '';
$tgl_dari = $this->input->get('tgl_dari') ?: '';
$tgl_sampai = $this->input->get('tgl_sampai') ?: '';

// Mapping label preset
$preset_labels = [
  'hari_ini'    => 'Hari Ini, ' . date('d/m/Y'),
  'minggu_ini'  => 'Minggu Ini',
  'bulan_ini'   => 'Bulan Ini, ' . date('F Y'),
  'bulan_lalu'  => 'Bulan Lalu, ' . date('F Y', strtotime('first day of last month')),
  'tahun_ini'   => 'Tahun ' . date('Y'),
];

if ($preset && isset($preset_labels[$preset])) {
  $periode_label = $preset_labels[$preset];
} elseif ($tgl_dari && $tgl_sampai) {
  $periode_label = date('d/m/Y', strtotime($tgl_dari)) . ' – ' . date('d/m/Y', strtotime($tgl_sampai));
} elseif (isset($bulan) && isset($tahun)) {
  $periode_label = date('F', mktime(0,0,0,$bulan,1)) . ' ' . $tahun;
} else {
  $periode_label = date('F Y');
}
?>

<div class="container-fluid laporan-wrapper">

  <!-- PRINT HEADER (hanya tampil saat cetak) -->
  <div class="print-header" style="display:none;">
    <div>
      <div class="ph-title">LAPORAN KAS RT — <?php echo strtoupper($periode_label); ?></div>
      <div class="ph-sub">Periode: <strong><?php echo $periode_label; ?></strong></div>
    </div>
    <div class="ph-right">
      Dicetak: <?php echo date('d/m/Y H:i'); ?> WIB<br>
      Pemasukan: <strong>Rp <?php echo number_format($total_pemasukan, 0, ',', '.'); ?></strong> &nbsp;|&nbsp;
      Pengeluaran: <strong>Rp <?php echo number_format($total_pengeluaran, 0, ',', '.'); ?></strong>
    </div>
  </div>

  <!-- ── Header ── -->
  <div class="lap-page-header no-print">
    <div>
      <h4>
        <div class="head-icon"><i class="bi bi-file-earmark-bar-graph"></i></div>
        Laporan Kas RT
      </h4>
      <small>Rekap pemasukan dan pengeluaran kas per periode</small>
    </div>
    <div style="display:flex;gap:8px;flex-wrap:wrap;">
      <button class="btn-print" onclick="
    document.title = 'Laporan Kas RT - <?php echo addslashes($periode_label); ?>';
    window.print();
    document.title = 'Laporan Kas RT';
  ">
        <i class="bi bi-printer"></i> Cetak / PDF
      </button>
      <a href="<?php echo base_url('kas'); ?>" class="btn-back-lap">
        <i class="bi bi-arrow-left"></i> Kembali
      </a>
    </div>
  </div>

  <!-- ── Filter Card ── -->
  <div class="filter-card no-print">

    <!-- Quick Filter SELECT + Tombol Cetak -->
    <div class="quick-filter-row">
      <span class="qf-label"><i class="bi bi-lightning-charge-fill me-1"></i>Filter Cepat:</span>

      <select id="selectPreset" onchange="applyPreset(this.value)"
        style="padding:6px 32px 6px 12px; border-radius:20px; border:1.5px solid var(--slate-200);
               font-family:'Plus Jakarta Sans',sans-serif; font-size:.82rem; font-weight:700;
               color:var(--slate-700); background:#fff; outline:none; cursor:pointer;
               appearance:none; -webkit-appearance:none;
               background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E\");
               background-repeat:no-repeat; background-position:right 10px center;
               transition:border-color .15s, box-shadow .15s;">
        <option value="">— Pilih Periode —</option>
        <option value="hari_ini"   <?php echo $preset === 'hari_ini'   ? 'selected' : ''; ?>>📅 Hari Ini</option>
        <option value="minggu_ini" <?php echo $preset === 'minggu_ini' ? 'selected' : ''; ?>>📅 Minggu Ini</option>
        <option value="bulan_ini"  <?php echo $preset === 'bulan_ini'  ? 'selected' : ''; ?>>📅 Bulan Ini</option>
        <option value="bulan_lalu" <?php echo $preset === 'bulan_lalu' ? 'selected' : ''; ?>>📅 Bulan Lalu</option>
        <option value="tahun_ini"  <?php echo $preset === 'tahun_ini'  ? 'selected' : ''; ?>>📅 Tahun Ini</option>
      </select>

      <?php if ($periode_label): ?>
      <span class="periode-info">
        <i class="bi bi-calendar-check"></i>
        <?php echo $periode_label; ?>
      </span>
      <?php endif; ?>

      <!-- Tombol Cetak Laporan -->
      <a href="<?php echo base_url('kas/cetak_laporan') . '?' . http_build_query([
          'preset'      => $preset,
          'tgl_dari'    => $tgl_dari,
          'tgl_sampai'  => $tgl_sampai,
          'bulan'       => $bulan,
          'tahun'       => $tahun,
        ]); ?>"
         target="_blank"
         style="display:inline-flex;align-items:center;gap:7px;margin-left:auto;
                background:linear-gradient(135deg,#0b7a6e,#14a897);
                color:#fff;border:none;border-radius:6px;
                padding:8px 18px;font-size:.82rem;font-weight:700;
                text-decoration:none;
                box-shadow:0 4px 14px rgba(20,168,151,0.32);
                transition:transform .15s,box-shadow .15s;"
         onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 8px 20px rgba(20,168,151,0.4)'"
         onmouseout="this.style.transform='';this.style.boxShadow='0 4px 14px rgba(20,168,151,0.32)'">
        <i class="bi bi-printer-fill"></i> Cetak Laporan
      </a>
    </div>

    <script>
    function applyPreset(val) {
      if (!val) return;
      window.location.href = '<?php echo base_url('kas/laporan'); ?>?preset=' + val;
    }
    // Highlight select jika ada preset aktif
    (function(){
      var sel = document.getElementById('selectPreset');
      if (sel && sel.value) {
        sel.style.borderColor = '#0d9488';
        sel.style.background = '#f0fdfa';
        sel.style.color = '#0b7a6e';
        sel.style.boxShadow = '0 0 0 3px rgba(13,148,136,.12)';
      }
    })();
    </script>

    <!-- Manual Filter -->
    <form method="get" action="<?php echo base_url('kas/laporan'); ?>">
      <div class="filter-row">
        <div class="filter-field">
          <label>Bulan</label>
          <select name="bulan">
            <?php for($i = 1; $i <= 12; $i++): ?>
              <option value="<?php echo sprintf('%02d', $i); ?>"
                      <?php echo (isset($bulan) && $bulan == sprintf('%02d', $i)) ? 'selected' : ''; ?>>
                <?php echo date('F', mktime(0,0,0,$i,1)); ?>
              </option>
            <?php endfor; ?>
          </select>
        </div>
        <div class="filter-field">
          <label>Tahun</label>
          <select name="tahun">
            <?php for($i = date('Y') - 2; $i <= date('Y') + 1; $i++): ?>
              <option value="<?php echo $i; ?>" <?php echo (isset($tahun) && $tahun == $i) ? 'selected' : ''; ?>>
                <?php echo $i; ?>
              </option>
            <?php endfor; ?>
          </select>
        </div>
        <div style="display:flex;align-items:flex-end;gap:6px;">
          <div class="filter-field">
            <label>Dari Tanggal</label>
            <input type="date" name="tgl_dari" value="<?php echo $tgl_dari; ?>">
          </div>
          <div class="filter-field">
            <label>Sampai</label>
            <input type="date" name="tgl_sampai" value="<?php echo $tgl_sampai; ?>">
          </div>
        </div>
        <button type="submit" class="btn-filter">
          <i class="bi bi-search"></i> Tampilkan
        </button>
      </div>
    </form>
  </div>

  <!-- ── Summary Cards ── -->
  <?php $selisih = $total_pemasukan - $total_pengeluaran; ?>
  <div class="summary-grid">
    <div class="summary-card sc-green">
      <div class="sc-label"><i class="bi bi-arrow-down-circle me-1"></i>Total Pemasukan</div>
      <div class="sc-amount"><small>Rp </small><?php echo number_format($total_pemasukan, 0, ',', '.'); ?></div>
      <div class="sc-icon"><i class="bi bi-arrow-down-circle"></i></div>
    </div>
    <div class="summary-card sc-red">
      <div class="sc-label"><i class="bi bi-arrow-up-circle me-1"></i>Total Pengeluaran</div>
      <div class="sc-amount"><small>Rp </small><?php echo number_format($total_pengeluaran, 0, ',', '.'); ?></div>
      <div class="sc-icon"><i class="bi bi-arrow-up-circle"></i></div>
    </div>
    <div class="summary-card sc-teal <?php echo $selisih < 0 ? 'negatif' : ''; ?>">
      <div class="sc-label"><i class="bi bi-wallet2 me-1"></i>Selisih Periode</div>
      <div class="sc-amount">
        <?php echo $selisih < 0 ? '−' : '+'; ?><small>Rp </small><?php echo number_format(abs($selisih), 0, ',', '.'); ?>
      </div>
      <div class="sc-icon"><i class="bi bi-wallet2"></i></div>
    </div>
  </div>

  <!-- ── Detail Tables ── -->
  <div class="detail-grid">

    <!-- Pemasukan -->
    <div class="detail-card">
      <div class="detail-head green">
        <i class="bi bi-arrow-down-circle-fill"></i>
        Detail Pemasukan
        <?php if(!empty($pemasukan)): ?>
          <span class="dh-badge"><?php echo count($pemasukan); ?> transaksi</span>
        <?php endif; ?>
      </div>
      <div class="table-responsive">
        <table class="detail-table">
          <thead>
            <tr>
              <th>Tanggal</th>
              <th>Kategori</th>
              <th>Kas</th>
              <th>Keterangan</th>
              <th class="text-end">Nominal</th>
            </tr>
          </thead>
          <tbody>
            <?php if(!empty($pemasukan)): ?>
              <?php foreach($pemasukan as $p): ?>
              <tr>
                <td style="white-space:nowrap;color:var(--slate-400);font-size:.78rem;"><?php echo date('d/m/Y', strtotime($p->tanggal)); ?></td>
                <td style="font-weight:600;"><?php echo htmlspecialchars($p->kategori); ?></td>
                <td style="font-size:.78rem;color:var(--slate-500);"><?php echo isset($p->nama_kas) ? htmlspecialchars($p->nama_kas) : '—'; ?></td>
                <td style="color:var(--slate-400);font-size:.8rem;"><?php echo htmlspecialchars($p->keterangan ?? '—'); ?></td>
                <td class="text-end nominal-masuk">Rp <?php echo number_format($p->nominal, 0, ',', '.'); ?></td>
              </tr>
              <?php endforeach; ?>
            <?php else: ?>
              <tr class="empty-row"><td colspan="5"><i class="bi bi-inbox me-2"></i>Tidak ada data pemasukan</td></tr>
            <?php endif; ?>
          </tbody>
          <?php if(!empty($pemasukan)): ?>
          <tfoot>
            <tr>
              <td colspan="4" class="text-end" style="color:var(--slate-400);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;">Total</td>
              <td class="text-end nominal-masuk">Rp <?php echo number_format($total_pemasukan, 0, ',', '.'); ?></td>
            </tr>
          </tfoot>
          <?php endif; ?>
        </table>
      </div>
      <!-- Mobile List -->
      <div class="mobile-trx-list">
        <?php if(!empty($pemasukan)): ?>
          <?php foreach($pemasukan as $p): ?>
          <div class="m-trx-item">
            <div>
              <div class="m-trx-date"><?php echo date('d/m/Y', strtotime($p->tanggal)); ?></div>
              <div class="m-trx-kat"><?php echo htmlspecialchars($p->kategori); ?></div>
              <?php if(!empty($p->keterangan)): ?>
                <div class="m-trx-ket"><?php echo htmlspecialchars($p->keterangan); ?></div>
              <?php endif; ?>
            </div>
            <div class="m-trx-nom nominal-masuk">+Rp <?php echo number_format($p->nominal, 0, ',', '.'); ?></div>
          </div>
          <?php endforeach; ?>
          <div style="padding:10px 0 0;border-top:2px solid rgba(13,148,136,.15);display:flex;justify-content:space-between;font-weight:800;">
            <span style="color:var(--slate-400);font-size:.78rem;text-transform:uppercase;">Total</span>
            <span class="nominal-masuk">Rp <?php echo number_format($total_pemasukan, 0, ',', '.'); ?></span>
          </div>
        <?php else: ?>
          <div style="text-align:center;padding:28px 0;color:var(--slate-300);font-size:.84rem;">
            <i class="bi bi-inbox d-block mb-2" style="font-size:1.4rem;"></i>Tidak ada data
          </div>
        <?php endif; ?>
      </div>
    </div>

    <!-- Pengeluaran -->
    <div class="detail-card">
      <div class="detail-head red">
        <i class="bi bi-arrow-up-circle-fill"></i>
        Detail Pengeluaran
        <?php if(!empty($pengeluaran)): ?>
          <span class="dh-badge"><?php echo count($pengeluaran); ?> transaksi</span>
        <?php endif; ?>
      </div>
      <div class="table-responsive">
        <table class="detail-table">
          <thead>
            <tr>
              <th>Tanggal</th>
              <th>Kategori</th>
              <th>Kas</th>
              <th>Keterangan</th>
              <th class="text-end">Nominal</th>
            </tr>
          </thead>
          <tbody>
            <?php if(!empty($pengeluaran)): ?>
              <?php foreach($pengeluaran as $p): ?>
              <tr>
                <td style="white-space:nowrap;color:var(--slate-400);font-size:.78rem;"><?php echo date('d/m/Y', strtotime($p->tanggal)); ?></td>
                <td style="font-weight:600;"><?php echo htmlspecialchars($p->kategori); ?></td>
                <td style="font-size:.78rem;color:var(--slate-500);"><?php echo isset($p->nama_kas) ? htmlspecialchars($p->nama_kas) : '—'; ?></td>
                <td style="color:var(--slate-400);font-size:.8rem;"><?php echo htmlspecialchars($p->keterangan ?? '—'); ?></td>
                <td class="text-end nominal-keluar">Rp <?php echo number_format($p->nominal, 0, ',', '.'); ?></td>
              </tr>
              <?php endforeach; ?>
            <?php else: ?>
              <tr class="empty-row"><td colspan="5"><i class="bi bi-inbox me-2"></i>Tidak ada data pengeluaran</td></tr>
            <?php endif; ?>
          </tbody>
          <?php if(!empty($pengeluaran)): ?>
          <tfoot>
            <tr>
              <td colspan="4" class="text-end" style="color:var(--slate-400);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;">Total</td>
              <td class="text-end nominal-keluar">Rp <?php echo number_format($total_pengeluaran, 0, ',', '.'); ?></td>
            </tr>
          </tfoot>
          <?php endif; ?>
        </table>
      </div>
      <!-- Mobile List -->
      <div class="mobile-trx-list">
        <?php if(!empty($pengeluaran)): ?>
          <?php foreach($pengeluaran as $p): ?>
          <div class="m-trx-item">
            <div>
              <div class="m-trx-date"><?php echo date('d/m/Y', strtotime($p->tanggal)); ?></div>
              <div class="m-trx-kat"><?php echo htmlspecialchars($p->kategori); ?></div>
              <?php if(!empty($p->keterangan)): ?>
                <div class="m-trx-ket"><?php echo htmlspecialchars($p->keterangan); ?></div>
              <?php endif; ?>
            </div>
            <div class="m-trx-nom nominal-keluar">−Rp <?php echo number_format($p->nominal, 0, ',', '.'); ?></div>
          </div>
          <?php endforeach; ?>
          <div style="padding:10px 0 0;border-top:2px solid rgba(239,68,68,.15);display:flex;justify-content:space-between;font-weight:800;">
            <span style="color:var(--slate-400);font-size:.78rem;text-transform:uppercase;">Total</span>
            <span class="nominal-keluar">Rp <?php echo number_format($total_pengeluaran, 0, ',', '.'); ?></span>
          </div>
        <?php else: ?>
          <div style="text-align:center;padding:28px 0;color:var(--slate-300);font-size:.84rem;">
            <i class="bi bi-inbox d-block mb-2" style="font-size:1.4rem;"></i>Tidak ada data
          </div>
        <?php endif; ?>
      </div>
    </div>

  </div><!-- /detail-grid -->
</div>