<!-- views/kas/index.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-100: #ccfbf1;
  --teal-50:  #f0fdfa;
  --green-500: #10b981;
  --green-600: #059669;
  --red-400:  #f87171;
  --red-500:  #ef4444;
  --red-600:  #dc2626;
  --slate-50: #f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-700:#334155;
  --slate-900:#0f172a;
  --card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.06);
  --card-shadow-hover: 0 4px 8px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.1);
}

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

/* ─── PAGE HEADER ─────────────────────────────────────────── */
.ar-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}
.ar-header-left h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0b5a52;
  margin: 0 0 5px;
  display: flex;
  align-items: center;
  gap: 11px;
  letter-spacing: -.3px;
}
.ar-header-left h4 .hi {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, #0d9488, #14b8a6);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.05rem;
  box-shadow: 0 4px 12px rgba(13,148,136,0.32);
  flex-shrink: 0;
}
.ar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.77rem;
  color: #94a3b8;
  padding-left: 51px;
}
.ar-breadcrumb a { color: #0d9488; text-decoration: none; font-weight: 600; }
.ar-breadcrumb a:hover { text-decoration: underline; }
.ar-breadcrumb .sep { color: #e2e8f0; }

/* ── Action Buttons ── */
.btn-action {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 50px;
  padding: 10px 20px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .85rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn-action:active { transform: scale(.97); }

.btn-pemasukan {
  background: linear-gradient(135deg, var(--green-500), var(--green-600));
  color: #fff;
  box-shadow: 0 4px 12px rgba(16,185,129,.28);
}
.btn-pemasukan:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,185,129,.38); color: #fff; }

.btn-pengeluaran {
  background: linear-gradient(135deg, var(--red-400), var(--red-600));
  color: #fff;
  box-shadow: 0 4px 12px rgba(239,68,68,.26);
}
.btn-pengeluaran:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(239,68,68,.36); color: #fff; }

.btn-master {
  background: #fff;
  color: var(--teal-700);
  border: 2px solid var(--teal-500);
  box-shadow: 0 2px 6px rgba(13,148,136,.1);
}
.btn-master:hover { background: var(--teal-700); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(13,148,136,.25); }

.header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Summary Cards ── */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.summary-card {
  border-radius: 14px;
  padding: 22px 20px;
  position: relative;
  overflow: hidden;
  color: #fff;
  transition: transform .2s, box-shadow .2s;
  cursor: default;
}
.summary-card:hover { transform: translateY(-4px); }
.summary-card::before {
  content: '';
  position: absolute; top: -30px; right: -30px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
}
.summary-card::after {
  content: '';
  position: absolute; bottom: -50px; right: 50px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.summary-card .sc-label {
  font-size: .75rem; font-weight: 600; opacity: .85;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 10px;
  position: relative; z-index: 1;
}
.summary-card .sc-value {
  font-size: 1.45rem; font-weight: 800; line-height: 1.15;
  position: relative; z-index: 1;
}
.summary-card .sc-value small { font-size: .65em; font-weight: 600; opacity: .8; }
.summary-card .sc-icon {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px;
  background: rgba(255,255,255,.16);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  z-index: 1;
}
.summary-card.sc-green {
  background: linear-gradient(135deg, #059669 0%, #10b981 60%, #34d399 100%);
  box-shadow: 0 8px 28px rgba(16,185,129,.30);
}
.summary-card.sc-red {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 60%, #f87171 100%);
  box-shadow: 0 8px 28px rgba(239,68,68,.28);
}
.summary-card.sc-teal {
  background: linear-gradient(135deg, var(--teal-800) 0%, var(--teal-600) 60%, var(--teal-400) 100%);
  box-shadow: 0 8px 28px rgba(13,148,136,.30);
}

/* ── Saldo Rekening ── */
.rekening-wrap {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--slate-200);
  box-shadow: var(--card-shadow);
  margin-bottom: 20px;
  overflow: hidden;
}
.rekening-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px;
  background: linear-gradient(90deg, var(--teal-50), #fff);
  border-bottom: 1px solid rgba(13,148,136,.1);
  font-weight: 700; font-size: .88rem; color: var(--teal-800);
}
.rekening-head i { color: var(--teal-600); font-size: 1rem; }
.rekening-body { padding: 14px 16px; }
.rek-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 10px;
}
.rek-item {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--teal-50), #fff);
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(13,148,136,.12);
  transition: box-shadow .15s, transform .15s;
}
.rek-item:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(13,148,136,.14); }
.rek-icon {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  background: color-mix(in srgb, var(--warna, #14b8a6) 15%, white);
  color: var(--warna, #14b8a6);
}
.rek-kode {
  font-size: .68rem; font-weight: 700;
  padding: 2px 7px; border-radius: 20px;
  background: color-mix(in srgb, var(--warna, #14b8a6) 12%, white);
  color: var(--warna, #14b8a6);
  border: 1px solid color-mix(in srgb, var(--warna, #14b8a6) 22%, white);
  display: inline-block; margin-bottom: 3px;
}
.rek-saldo {
  font-size: .8rem; font-weight: 700; color: var(--teal-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rek-saldo.negatif { color: var(--red-500); }

/* ── Riwayat Transaksi Card ── */
.trx-wrap {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--slate-200);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.trx-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--slate-100);
}
.trx-head h5 {
  margin: 0; font-size: 1rem; font-weight: 800; color: var(--slate-900);
  display: flex; align-items: center; gap: 8px;
}
.trx-head h5 i { color: var(--teal-600); }

.btn-laporan {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--teal-50); color: var(--teal-700);
  border: 1px solid rgba(13,148,136,.2);
  border-radius: 8px; padding: 7px 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .8rem; font-weight: 700; text-decoration: none;
  transition: all .15s;
}
.btn-laporan:hover { background: var(--teal-700); color: #fff; border-color: transparent; }

/* ── TABLE ── */
.trx-table-wrap { overflow-x: auto; }
.trx-table {
  width: 100%; border-collapse: collapse;
  font-size: .83rem;
  min-width: 780px;
}
.trx-table thead th {
  padding: 12px 14px;
  background: #f8fffe;
  border-bottom: 1.5px solid #e5e7eb;
  font-weight: 700; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .04em;
  color: #6b7280; white-space: nowrap;
}
.trx-table tbody tr {
  transition: background .12s;
}
.trx-table tbody tr:last-child { border-bottom: none; }
.trx-table tbody tr:hover { background: #f8fffe; }
.trx-table tbody td { 
  padding: 12px 14px; 
  vertical-align: middle; 
  border-bottom: 1px solid #dee2e6;
}
.trx-table tfoot td {
  padding: 12px 14px;
  background: linear-gradient(90deg, var(--teal-50), #fff);
  border-top: 2px solid rgba(13,148,136,.15);
  font-weight: 700;
}

/* Badge jenis */
.badge-masuk, .badge-keluar {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 20px;
  font-size: .73rem; font-weight: 700; white-space: nowrap;
}
.badge-masuk {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #065f46; border: 1px solid rgba(16,185,129,.22);
}
.badge-keluar {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b; border: 1px solid rgba(239,68,68,.22);
}

/* Kas pill */
.kas-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 20px; font-size: .73rem; font-weight: 700;
  background: color-mix(in srgb, var(--warna, #14b8a6) 12%, white);
  color: var(--warna, #14b8a6);
  border: 1px solid color-mix(in srgb, var(--warna, #14b8a6) 22%, white);
}
.nominal-masuk  { color: var(--teal-700); font-weight: 700; }
.nominal-keluar { color: var(--red-500); font-weight: 700; }
.nominal-kosong { color: var(--slate-200); }

/* ── DataTables custom styling ── */
#tabelKas_wrapper .dataTables_filter input {
  border: 1.5px solid var(--slate-200);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: .82rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  outline: none;
  transition: border-color .2s;
}
#tabelKas_wrapper .dataTables_filter input:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(20,184,166,.12);
}
#tabelKas_wrapper .dataTables_length select {
  border: 1.5px solid var(--slate-200);
  border-radius: 8px;
  padding: 5px 30px 5px 12px;
  min-width: 70px;
  font-size: .82rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
}
#tabelKas_wrapper .dataTables_info {
  font-size: .78rem;
  color: var(--slate-400);
  padding-top: 10px;
}
#tabelKas_wrapper .dataTables_paginate {
  padding-top: 8px;
}
#tabelKas_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  font-size: .8rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
#tabelKas_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--teal-600) !important;
  border-color: var(--teal-600) !important;
  color: #fff !important;
}
#tabelKas_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
  background: var(--teal-50) !important;
  border-color: var(--teal-200) !important;
  color: var(--teal-700) !important;
}
#tabelKas_wrapper .dataTables_processing {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.1) !important;
  font-size: .83rem;
  color: var(--teal-700);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
/* Padding wrapper DataTables */
#tabelKas_wrapper .dataTables_filter,
#tabelKas_wrapper .dataTables_length { padding: 14px 16px 0; }
#tabelKas_wrapper .dataTables_info,
#tabelKas_wrapper .dataTables_paginate { padding: 10px 16px 14px; }

/* ── MOBILE CARDS ── */
.trx-mobile { display: none; padding: 12px 14px; }
.trx-m-card {
  border: 1px solid var(--slate-200);
  border-radius: 12px; padding: 13px 14px;
  margin-bottom: 10px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  position: relative;
  overflow: hidden;
}
.trx-m-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent-color, var(--teal-500));
  border-radius: 3px 0 0 3px;
}
.trx-m-card.masuk  { --accent-color: var(--green-500); }
.trx-m-card.keluar { --accent-color: var(--red-500); }
.trx-m-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.trx-m-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.trx-m-date { font-size: .73rem; color: var(--slate-400); font-weight: 600; }
.trx-m-kategori { font-size: .83rem; font-weight: 700; color: var(--slate-700); margin-bottom: 2px; }
.trx-m-ket { font-size: .77rem; color: var(--slate-500); }
.trx-m-nominal {
  font-size: 1rem; font-weight: 800;
  text-align: right; white-space: nowrap;
}
.trx-m-nominal.masuk  { color: var(--teal-700); }
.trx-m-nominal.keluar { color: var(--red-500); }
.trx-m-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trx-m-petugas { font-size: .72rem; color: var(--slate-400); display: flex; align-items: center; gap: 4px; }

/* ── Empty state ── */
.empty-state {
  padding: 64px 24px; text-align: center; color: var(--slate-400);
}
.empty-state .empty-icon {
  width: 72px; height: 72px; border-radius: 20px;
  background: var(--teal-50); color: var(--teal-400);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin: 0 auto 16px;
}
.empty-state h5 { color: var(--slate-700); font-weight: 700; margin-bottom: 6px; }
.empty-state p { font-size: .85rem; margin: 0; }

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.summary-card { animation: fadeUp .35s ease both; }
.summary-card:nth-child(1) { animation-delay: .05s; }
.summary-card:nth-child(2) { animation-delay: .12s; }
.summary-card:nth-child(3) { animation-delay: .19s; }
.rekening-wrap { animation: fadeUp .4s .22s ease both; }
.trx-wrap { animation: fadeUp .4s .28s ease both; }

/* ══════════════════════════════
   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-value { font-size: 1.15rem; }
  .summary-card .sc-icon { width: 42px; height: 42px; font-size: 1.1rem; right: 14px; }

  /* Mobile: sembunyikan tabel desktop, tampilkan mobile card */
  .trx-table-wrap { display: none !important; }
  .trx-mobile { display: block; }
  .trx-wrap tfoot { display: none; }

  /* Header mobile */
  .ar-page-header { flex-direction: column; align-items: flex-start; }
  .header-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .header-actions .btn-action { justify-content: center; }
  .header-actions .btn-action:last-child { grid-column: 1 / -1; }

  .rek-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .summary-card.sc-teal { grid-column: 1 / -1; }
}

@media (max-width: 500px) {
  .summary-grid { grid-template-columns: 1fr; }
  .summary-card.sc-teal { grid-column: auto; }
  .rek-grid { grid-template-columns: 1fr 1fr; }
}
</style>

<div class="kas-wrapper">

  <!-- ── Header ── -->
  <div class="ar-page-header">
    <div class="ar-header-left">
      <h4>
        <span class="hi"><i class="bi bi-bank2"></i></span>
        Kas RT
      </h4>
      <div class="ar-breadcrumb">
        <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
        <span class="sep">/</span>
        <span>Kas RT</span>
      </div>
    </div>
    <div class="header-actions">
      <?php if($this->session->userdata('role') != 'warga'): ?>
      <a href="<?php echo base_url('kas/pemasukan'); ?>" class="btn-action btn-pemasukan">
        <i class="bi bi-plus-circle-fill"></i><span>Pemasukan</span>
      </a>
      <a href="<?php echo base_url('kas/pengeluaran'); ?>" class="btn-action btn-pengeluaran">
        <i class="bi bi-dash-circle-fill"></i><span>Pengeluaran</span>
      </a>
      <?php if($this->session->userdata('role') != 'warga'): ?>
<a href="<?php echo base_url('kas/transfer'); ?>" class="btn-action btn-master">
    <i class="bi bi-arrow-left-right"></i><span>Transfer Kas</span>
</a>
<?php endif; ?>
      <a href="<?php echo base_url('master_kas'); ?>" class="btn-action btn-master">
        <i class="bi bi-wallet2"></i><span>Master Kas</span>
      </a>
      <?php endif; ?>
    </div>
  </div>

  <!-- ── Summary Cards ── -->
  <div class="summary-grid">
    <div class="summary-card sc-green">
      <div class="sc-label"><i class="bi bi-arrow-down-circle me-1"></i>Pemasukan Bulan Ini</div>
      <div class="sc-value"><small>Rp </small><?php echo number_format($pemasukan_bulan_ini, 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>Pengeluaran Bulan Ini</div>
      <div class="sc-value"><small>Rp </small><?php echo number_format($pengeluaran_bulan_ini, 0, ',', '.'); ?></div>
      <div class="sc-icon"><i class="bi bi-arrow-up-circle"></i></div>
    </div>
    <div class="summary-card sc-teal">
      <div class="sc-label"><i class="bi bi-wallet2 me-1"></i>Saldo Kas Saat Ini</div>
      <div class="sc-value"><small>Rp </small><?php echo number_format($saldo, 0, ',', '.'); ?></div>
      <div class="sc-icon"><i class="bi bi-wallet2"></i></div>
    </div>
  </div>

  <!-- ── Saldo per Rekening ── -->
  <?php if (!empty($ringkasan_kas)): ?>
  <div class="rekening-wrap">
    <div class="rekening-head">
      <i class="bi bi-bank2"></i> Saldo per Rekening / Kas
    </div>
    <div class="rekening-body">
      <div class="rek-grid">
        <?php foreach ($ringkasan_kas as $mk): ?>
          <?php if ($mk->status === 'nonaktif') continue; ?>
          <div class="rek-item" style="--warna: <?php echo htmlspecialchars($mk->warna); ?>">
            <div class="rek-icon" style="--warna: <?php echo htmlspecialchars($mk->warna); ?>">
              <i class="bi <?php echo htmlspecialchars($mk->icon); ?>"></i>
            </div>
            <div style="min-width:0;">
              <div class="rek-kode" style="--warna: <?php echo htmlspecialchars($mk->warna); ?>">
                <?php echo htmlspecialchars($mk->kode); ?>
              </div>
              <div class="rek-saldo <?php echo $mk->saldo_realtime < 0 ? 'negatif' : ''; ?>">
                Rp <?php echo number_format($mk->saldo_realtime, 0, ',', '.'); ?>
              </div>
            </div>
          </div>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
  <?php endif; ?>

  <!-- ── Riwayat Transaksi ── -->
  <div class="trx-wrap">
    <div class="trx-head">
      <h5><i class="bi bi-clock-history"></i> Riwayat Transaksi</h5>
      <a href="<?php echo base_url('kas/laporan'); ?>" class="btn-laporan">
        <i class="bi bi-file-earmark-bar-graph"></i> Laporan
      </a>
    </div>

    <!-- DESKTOP TABLE — data diisi via AJAX server-side -->
    <div class="trx-table-wrap">
      <table class="trx-table" id="tabelKas">
        <thead>
          <tr>
            <th width="4%">No</th>
            <th width="10%">Tanggal</th>
            <th width="9%">Jenis</th>
            <th width="14%">Kategori</th>
            <th width="13%">Kas</th>
            <th width="19%">Keterangan</th>
            <th width="13%" class="text-end">Pemasukan</th>
            <th width="13%" class="text-end">Pengeluaran</th>
            <th width="10%">Petugas</th>
            <th width="5%">Aksi</th>
          </tr>
        </thead>
        <tbody>
          <!-- Data diisi otomatis oleh DataTables server-side via AJAX -->
        </tbody>
        <tfoot>
          <tr>
            <td colspan="6" class="text-end" style="font-size:.82rem;color:var(--slate-500);">Total Bulan Ini</td>
            <td class="text-end nominal-masuk">Rp <?php echo number_format($pemasukan_bulan_ini, 0, ',', '.'); ?></td>
            <td class="text-end nominal-keluar">Rp <?php echo number_format($pengeluaran_bulan_ini, 0, ',', '.'); ?></td>
            <td colspan="2"></td>
          </tr>
        </tfoot>
      </table>
    </div>

    <!-- MOBILE CARDS — dirender via AJAX juga lewat drawCallback -->
    <div class="trx-mobile" id="mobileKasList">
      <div class="text-center py-4" style="color:var(--slate-400); font-size:.83rem;">
        <span class="spinner-border spinner-border-sm me-2" style="color:var(--teal-500);"></span>
        Memuat data...
      </div>
    </div>

  </div><!-- /.trx-wrap -->

</div><!-- /.kas-wrapper -->

<!-- ── Modal Hapus Transaksi ── -->
<div class="modal fade" id="modalHapusTrx" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow">
      <div class="modal-header bg-danger text-white border-0">
        <h5 class="modal-title"><i class="bi bi-exclamation-triangle-fill me-2"></i>Konfirmasi Hapus</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body py-4">
        <div class="text-center mb-3">
          <i class="bi bi-trash text-danger" style="font-size: 3rem;"></i>
        </div>
        <p class="text-center mb-0 fw-semibold">Apakah Anda yakin ingin menghapus transaksi ini?</p>
        <p class="text-center text-muted small mt-2">Tindakan ini tidak dapat dibatalkan dan akan memperbarui saldo kas terkait.</p>
      </div>
      <div class="modal-footer border-0 bg-light">
        <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Batal</button>
        <a href="#" id="btnConfirmDelete" class="btn btn-danger px-4 fw-bold shadow-sm">Hapus Sekarang</a>
      </div>
    </div>
  </div>
</div>


<script>
window.addEventListener('load', function () {
    if (typeof $ === 'undefined' || $('#tabelKas').length === 0) return;

    var table = $('#tabelKas').DataTable({
        // ─── SERVER-SIDE ─────────────────────────────────────
        processing : true,
        serverSide : true,
        ajax: {
            url  : '<?php echo base_url("kas/ajax_data"); ?>',
            type : 'POST',
            error: function () {
                alert('Gagal memuat data. Silakan refresh halaman.');
            }
        },

        // ─── DEFINISI KOLOM ──────────────────────────────────
        columns: [
            { data: 0, orderable: false },
            { data: 1 },
            { data: 2, orderable: false },
            { data: 3 },
            { data: 4, orderable: false },
            { data: 5, orderable: false },
            { data: 6, orderable: false, className: 'text-end' },
            { data: 7, orderable: false, className: 'text-end' },
            { data: 8, orderable: false },
            { data: 9, orderable: false },
        ],

        // ─── TAMPILAN ────────────────────────────────────────
        pageLength : 15,
        order      : [[1, 'desc']],
        responsive : true,

        // ─── BAHASA INDONESIA ────────────────────────────────
        language: {
            processing   : '<span class="spinner-border spinner-border-sm me-2" style="color:var(--teal-600);"></span><span style="color:var(--teal-700);font-weight:600;">Memuat data...</span>',
            search       : 'Cari:',
            searchPlaceholder: 'Cari transaksi...',
            lengthMenu   : 'Tampilkan _MENU_ data',
            info         : 'Menampilkan _START_ - _END_ dari _TOTAL_ transaksi',
            infoEmpty    : 'Tidak ada data',
            infoFiltered : '(difilter dari _MAX_ total data)',
            zeroRecords  : '<div class="text-center py-4 text-muted"><i class="bi bi-search d-block fs-3 mb-2 opacity-50"></i>Data tidak ditemukan</div>',
            emptyTable   : '<div class="text-center py-5 text-muted"><i class="bi bi-bank d-block fs-1 mb-2 opacity-50"></i><div class="fw-semibold">Belum ada data transaksi</div></div>',
            paginate: {
                previous: '<i class="bi bi-chevron-left"></i>',
                next    : '<i class="bi bi-chevron-right"></i>',
            }
        },

        // ─── RENDER MOBILE CARDS setelah setiap draw ─────────
        drawCallback: function (settings) {
            var api      = this.api();
            var rows     = api.rows({ page: 'current' }).data();
            var mobileEl = document.getElementById('mobileKasList');
            if (!mobileEl) return;

            // Kosongkan dulu
            mobileEl.innerHTML = '';

            if (rows.length === 0) {
                mobileEl.innerHTML = '<div class="text-center py-5 text-muted"><i class="bi bi-bank fs-1 d-block mb-2 opacity-50"></i><div class="fw-semibold">Belum ada data transaksi</div></div>';
                return;
            }

            rows.each(function (row) {
                // row[2] = jenis HTML, kita deteksi dari teks
                var isMasuk = row[2].indexOf('Masuk') !== -1;
                var jenisCls = isMasuk ? 'masuk' : 'keluar';
                var nominalSign = isMasuk ? '+' : '-';
                var nominalVal  = isMasuk ? row[6] : row[7];

                var card = document.createElement('div');
                card.className = 'trx-m-card ' + jenisCls;
                card.innerHTML =
                    '<div class="trx-m-top">' +
                        '<div>' + row[2] + '</div>' +
                        '<div class="trx-m-date">' + row[1] + '</div>' +
                    '</div>' +
                    '<div class="trx-m-row">' +
                        '<div style="flex:1;min-width:0;">' +
                            '<div class="trx-m-kategori">' + row[3] + '</div>' +
                            '<div class="trx-m-ket">' + row[5] + '</div>' +
                        '</div>' +
                        '<div class="trx-m-nominal ' + jenisCls + '">' + nominalVal + '</div>' +
                    '</div>' +
                    '<div class="trx-m-meta">' +
                        (row[4] !== '—' ? row[4] : '') +
                        (row[8] !== '-' ? '<span class="trx-m-petugas"><i class="bi bi-person-fill"></i>' + row[8] + '</span>' : '') +
                    '</div>' +
                    '<div class="mt-2 pt-2 border-top d-flex justify-content-end">' + row[9] + '</div>';

                mobileEl.appendChild(card);
            });

            // Tambahkan footer total mobile
            var footer = document.createElement('div');
            footer.style.cssText = 'background:var(--teal-50);border-radius:10px;padding:12px 14px;border:1px solid rgba(13,148,136,.12);display:flex;justify-content:space-between;gap:10px;margin-top:4px;';
            footer.innerHTML =
                '<div style="text-align:center;flex:1;">' +
                    '<div style="font-size:.7rem;color:var(--slate-400);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px;">Total Masuk</div>' +
                    '<div class="nominal-masuk" style="font-size:.92rem;">Rp <?php echo number_format($pemasukan_bulan_ini, 0, ",", "."); ?></div>' +
                '</div>' +
                '<div style="width:1px;background:rgba(13,148,136,.15);"></div>' +
                '<div style="text-align:center;flex:1;">' +
                    '<div style="font-size:.7rem;color:var(--slate-400);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px;">Total Keluar</div>' +
                    '<div class="nominal-keluar" style="font-size:.92rem;">Rp <?php echo number_format($pengeluaran_bulan_ini, 0, ",", "."); ?></div>' +
                '</div>';
            mobileEl.appendChild(footer);
        }
    });

    // ─── EVENT LISTENER UNTUK MODAL HAPUS ────────────────────
    // Karena tombol di-render dinamis via AJAX, kita pakai event delegation
    $(document).on('click', '.btn-delete-trx', function (e) {
        e.preventDefault();
        var url = $(this).attr('href');
        $('#btnConfirmDelete').attr('href', url);
        var modal = new bootstrap.Modal(document.getElementById('modalHapusTrx'));
        modal.show();
    });
});
</script>