<!-- views/tabungan/verifikasi.php -->
<style>
:root {
  --teal:      #20c997;
  --teal-dk:   #17a589;
  --teal-lt:   #d1f5ec;
  --teal-xl:   #f0fdf9;
  --amber:     #f59e0b;
  --amber-lt:  #fef3c7;
  --red:       #ef4444;
  --red-lt:    #fef2f2;
  --red-bdr:   #fecaca;
  --green:     #16a34a;
  --green-lt:  #f0fdf4;
  --green-bdr: #bbf7d0;
  --txt:       #1e293b;
  --muted:     #64748b;
  --light:     #94a3b8;
  --border:    #e2e8f0;
  --bg:        #f8fafc;
  --white:     #ffffff;
  --shd-sm:    0 1px 3px rgba(0,0,0,.06);
  --shd-md:    0 4px 14px rgba(0,0,0,.08);
  --rad:       12px;
  --rad-s:     8px;
  --rad-xs:    6px;
}
*, *::before, *::after { box-sizing: border-box; }

/* ── Page ── */
.vp { padding: 4px 0 32px; }

/* ── Page header ── */
.vp-hdr {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.vp-hdr-left { display: flex; align-items: center; gap: 12px; }
.vp-hdr-ico {
  width: 44px; height: 44px; border-radius: var(--rad-s);
  background: var(--teal-lt);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.vp-hdr-ico i { font-size: 20px; color: var(--teal-dk); }
.vp-hdr-t { font-size: 17px; font-weight: 700; color: var(--txt); margin: 0; }
.vp-hdr-s { font-size: 12.5px; color: var(--muted); margin: 0; }
.vp-back {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: var(--rad-s);
  border: 1.5px solid var(--border); background: var(--white);
  color: var(--muted); font-size: 13px; font-weight: 600;
  text-decoration: none; transition: all .15s; white-space: nowrap;
}
.vp-back:hover { border-color: var(--muted); color: var(--txt); }

/* ── Flash alerts ── */
.flash {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: var(--rad-s);
  font-size: 13.5px; margin-bottom: 16px;
}
.flash i { font-size: 15px; flex-shrink: 0; }
.flash-ok  { background: var(--green-lt); border: 1px solid var(--green-bdr); color: var(--green); }
.flash-err { background: var(--red-lt);   border: 1px solid var(--red-bdr);   color: #b91c1c; }
.flash-close {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: inherit; font-size: 16px; opacity: .6; padding: 0;
}
.flash-close:hover { opacity: 1; }

/* ── Stats bar ── */
.stats-bar {
  display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.stat-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 30px;
  border: 1.5px solid var(--border); background: var(--white);
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.stat-pill .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.stat-pill .cnt { font-size: 16px; font-weight: 800; color: var(--txt); }

/* ── Empty state ── */
.empty-state {
  background: var(--white); border-radius: var(--rad);
  border: 1px solid var(--border); box-shadow: var(--shd-sm);
  padding: 60px 24px; text-align: center;
}
.empty-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--green-lt); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.empty-ico i { font-size: 28px; color: var(--green); }
.empty-state h5 { font-size: 15px; font-weight: 700; color: var(--txt); margin-bottom: 5px; }
.empty-state p  { font-size: 13px; color: var(--muted); margin: 0; }

/* ── Cards grid ── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
@media(max-width:480px){ .cards-grid { grid-template-columns: 1fr; } }

/* ── Transaksi card ── */
.trx-card {
  background: var(--white);
  border-radius: var(--rad);
  border: 1px solid var(--border);
  box-shadow: var(--shd-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .2s;
}
.trx-card:hover { box-shadow: var(--shd-md); }
.trx-card-top { height: 4px; }
.trx-card-top.setor { background: var(--teal); }
.trx-card-top.tarik { background: var(--red); }
.trx-card-body { padding: 18px 18px 0; flex: 1; }
.trx-card-foot { padding: 14px 18px 18px; }

/* Jenis badge */
.jenis-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; margin-bottom: 10px;
}
.jenis-badge.setor { background: var(--teal-lt); color: var(--teal-dk); }
.jenis-badge.tarik { background: var(--red-lt);  color: #b91c1c; }

/* Warga info */
.trx-nama  { font-size: 14px; font-weight: 700; color: var(--txt); margin-bottom: 1px; }
.trx-nik   { font-size: 11.5px; color: var(--muted); }

/* Nominal */
.trx-nominal { font-size: 22px; font-weight: 800; line-height: 1; }
.trx-nominal.setor { color: var(--teal-dk); }
.trx-nominal.tarik { color: var(--red); }
.trx-saldo-now { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Divider */
.trx-divider { height: 1px; background: var(--border); margin: 12px 0; }

/* Meta rows */
.trx-meta { font-size: 12px; color: var(--muted); display: flex; align-items: flex-start; gap: 5px; margin-bottom: 6px; }
.trx-meta i { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.trx-meta:last-child { margin-bottom: 0; }

/* Kas info box (setoran - sudah dipilih warga) */
.kas-info-set {
  padding: 10px 12px; border-radius: var(--rad-xs);
  background: var(--teal-xl); border: 1px solid var(--teal-lt);
  margin: 10px 0;
}
.kas-info-set .kas-row { display: flex; align-items: center; gap: 7px; }
.kas-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px; color: #fff;
  font-size: 11px; font-weight: 700;
}
.kas-info-set .kas-name { font-size: 12.5px; font-weight: 700; color: var(--txt); }
.kas-info-set .kas-note { font-size: 11px; color: var(--muted); margin-top: 4px; }
.kas-warn {
  padding: 8px 12px; border-radius: var(--rad-xs);
  background: var(--amber-lt); border: 1px solid #fcd34d;
  font-size: 11.5px; color: #92400e; margin: 10px 0;
  display: flex; align-items: center; gap: 5px;
}

/* ── KAS SELECTOR (untuk penarikan & override setoran) ── */
.kas-selector-wrap {
  margin: 10px 0;
}
.kas-selector-label {
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 6px; display: flex; align-items: center; gap: 5px;
}
.kas-selector-label.required { color: var(--red); }
.kas-selector-label span { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 11px; }

/* Radio-style kas options */
.kas-options { display: flex; flex-direction: column; gap: 5px; }
.kas-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--rad-xs);
  border: 1.5px solid var(--border); cursor: pointer;
  transition: all .15s; background: var(--white);
  position: relative;
}
.kas-opt:hover { border-color: var(--teal); background: var(--teal-xl); }
.kas-opt input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.kas-opt.checked { border-color: var(--teal); background: var(--teal-xl); }
.kas-opt.checked.tarik-kas { border-color: var(--red); background: var(--red-lt); }
.kas-radio-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.kas-opt.checked .kas-radio-dot { border-color: var(--teal); background: var(--teal); }
.kas-opt.checked.tarik-kas .kas-radio-dot { border-color: var(--red); background: var(--red); }
.kas-radio-dot::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; display: none;
}
.kas-opt.checked .kas-radio-dot::after { display: block; }
.kas-opt-icon { font-size: 16px; flex-shrink: 0; }
.kas-opt-info { flex: 1; min-width: 0; }
.kas-opt-name { font-size: 12.5px; font-weight: 700; color: var(--txt); }
.kas-opt-sub  { font-size: 11px; color: var(--muted); }
.kas-opt-badge {
  font-size: 10px; font-weight: 700; padding: 2px 6px;
  border-radius: 10px; background: var(--teal-lt); color: var(--teal-dk);
}
.kas-opt-badge.default { background: var(--green-lt); color: var(--green); }

/* ── Catatan admin ── */
.catatan-field {
  width: 100%; padding: 8px 10px;
  border: 1.5px solid var(--border); border-radius: var(--rad-xs);
  font-size: 12.5px; color: var(--txt); font-family: inherit;
  outline: none; resize: vertical; min-height: 56px;
  transition: border-color .15s;
}
.catatan-field:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(32,201,151,.12); }

/* ── Bukti link ── */
.bukti-link {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 10px; border-radius: var(--rad-xs);
  border: 1.5px solid #bfdbfe; background: #eff6ff;
  color: #1d4ed8; font-size: 12px; font-weight: 600;
  text-decoration: none; transition: all .15s; margin-bottom: 10px;
}
.bukti-link:hover { background: #dbeafe; }

/* ── Action buttons ── */
.action-btns { display: flex; gap: 7px; margin-top: 12px; }
.btn-setuju {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  flex: 1; padding: 9px 8px; border-radius: var(--rad-xs);
  background: var(--teal); border: none; color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.btn-setuju:hover { background: var(--teal-dk); }
.btn-tolak {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 12px; border-radius: var(--rad-xs);
  background: var(--white); border: 1.5px solid var(--red-bdr);
  color: var(--red); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.btn-tolak:hover { background: var(--red-lt); }

/* ── Confirm modal ── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(15,23,42,.45); z-index: 1000;
  align-items: center; justify-content: center; padding: 16px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--white); border-radius: var(--rad);
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  width: 100%; max-width: 400px; overflow: hidden;
}
.modal-hdr {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.modal-hdr-ico { width: 36px; height: 36px; border-radius: var(--rad-s); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.modal-hdr-ico.ok  { background: var(--teal-lt); }
.modal-hdr-ico.ok i  { color: var(--teal-dk); font-size: 17px; }
.modal-hdr-ico.err { background: var(--red-lt); }
.modal-hdr-ico.err i { color: var(--red); font-size: 17px; }
.modal-hdr-t { font-size: 14px; font-weight: 700; color: var(--txt); margin: 0; }
.modal-hdr-s { font-size: 12px; color: var(--muted); margin: 0; }
.modal-body { padding: 16px 20px; }
.modal-detail-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.modal-detail-row:last-child { border-bottom: none; }
.modal-detail-row .k { color: var(--muted); }
.modal-detail-row .v { font-weight: 700; color: var(--txt); }
.modal-detail-row .v.red { color: var(--red); }
.modal-detail-row .v.teal { color: var(--teal-dk); }
.modal-foot { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }
.modal-btn-cancel {
  padding: 8px 16px; border-radius: var(--rad-xs);
  border: 1.5px solid var(--border); background: var(--white);
  color: var(--muted); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.modal-btn-cancel:hover { border-color: var(--muted); color: var(--txt); }
.modal-btn-confirm {
  padding: 8px 18px; border-radius: var(--rad-xs);
  background: var(--teal); border: none; color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.modal-btn-confirm:hover { background: var(--teal-dk); }
.modal-btn-confirm.red { background: var(--red); }
.modal-btn-confirm.red:hover { background: #dc2626; }
</style>

<div class="vp container-fluid">

  <!-- Header -->
  <div class="vp-hdr">
    <div class="vp-hdr-left">
      <div class="vp-hdr-ico"><i class="bi bi-check2-square"></i></div>
      <div>
        <p class="vp-hdr-t">Verifikasi Transaksi Tabungan</p>
        <p class="vp-hdr-s">Tinjau dan setujui atau tolak pengajuan setoran &amp; penarikan warga</p>
      </div>
    </div>
    <a href="<?php echo base_url('tabungan'); ?>" class="vp-back">
      <i class="bi bi-arrow-left"></i> Kembali
    </a>
  </div>

  <!-- Flash messages -->
  <?php if ($this->session->flashdata('success')): ?>
  <div class="flash flash-ok">
    <i class="bi bi-check-circle-fill"></i>
    <span><?php echo $this->session->flashdata('success'); ?></span>
    <button class="flash-close" onclick="this.parentElement.remove()">×</button>
  </div>
  <?php endif; ?>
  <?php if ($this->session->flashdata('error')): ?>
  <div class="flash flash-err">
    <i class="bi bi-exclamation-circle-fill"></i>
    <span><?php echo $this->session->flashdata('error'); ?></span>
    <button class="flash-close" onclick="this.parentElement.remove()">×</button>
  </div>
  <?php endif; ?>

  <?php if (empty($transaksi_pending)): ?>
  <!-- Empty state -->
  <div class="empty-state">
    <div class="empty-ico"><i class="bi bi-check2-all"></i></div>
    <h5>Semua sudah diproses</h5>
    <p>Tidak ada transaksi yang menunggu verifikasi.</p>
  </div>

  <?php else: ?>

  <!-- Stats bar -->
  <?php
    $jml_setor = 0; $jml_tarik = 0;
    foreach ($transaksi_pending as $t) {
      if ($t->jenis_transaksi === 'setor') $jml_setor++;
      else $jml_tarik++;
    }
  ?>
  <div class="stats-bar">
    <div class="stat-pill">
      <div class="dot" style="background:var(--teal);"></div>
      <span class="cnt"><?php echo $jml_setor; ?></span>
      <span>Setoran</span>
    </div>
    <div class="stat-pill">
      <div class="dot" style="background:var(--red);"></div>
      <span class="cnt"><?php echo $jml_tarik; ?></span>
      <span>Penarikan</span>
    </div>
    <div class="stat-pill">
      <div class="dot" style="background:var(--amber);"></div>
      <span class="cnt"><?php echo count($transaksi_pending); ?></span>
      <span>Total Pending</span>
    </div>
  </div>

  <!-- Cards grid -->
  <div class="cards-grid">
    <?php foreach ($transaksi_pending as $idx => $t):
      $is_setor = $t->jenis_transaksi === 'setor';
      $card_id  = 'trx_' . $t->id;
    ?>
    <div class="trx-card">
      <div class="trx-card-top <?php echo $is_setor ? 'setor' : 'tarik'; ?>"></div>
      <div class="trx-card-body">

        <!-- Top row: jenis + nominal -->
        <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:8px;">
          <div>
            <span class="jenis-badge <?php echo $is_setor ? 'setor' : 'tarik'; ?>">
              <i class="bi <?php echo $is_setor ? 'bi-arrow-down-circle' : 'bi-arrow-up-circle'; ?>"></i>
              <?php echo $is_setor ? 'Setoran' : 'Penarikan'; ?>
            </span>
            <div class="trx-nama"><?php echo htmlspecialchars($t->nama_lengkap); ?></div>
            <div class="trx-nik">NIK: <?php echo $t->nik; ?></div>
          </div>
          <div style="text-align:right;flex-shrink:0;">
            <div class="trx-nominal <?php echo $is_setor ? 'setor' : 'tarik'; ?>">
              <?php echo $is_setor ? '+' : '-'; ?>Rp <?php echo number_format($t->nominal, 0, ',', '.'); ?>
            </div>
            <div class="trx-saldo-now">Saldo: Rp <?php echo number_format($t->saldo_saat_ini ?? 0, 0, ',', '.'); ?></div>
          </div>
        </div>

        <div class="trx-divider"></div>

        <!-- Meta -->
        <div class="trx-meta"><i class="bi bi-clock"></i><?php echo date('d M Y, H:i', strtotime($t->tanggal_pengajuan)); ?></div>
        <?php if (!empty($t->keterangan)): ?>
        <div class="trx-meta"><i class="bi bi-chat-left-text"></i><?php echo htmlspecialchars($t->keterangan); ?></div>
        <?php endif; ?>

        <!-- Bukti transfer -->
        <?php if (!empty($t->bukti_transfer)): ?>
        <a href="<?php echo base_url('tabungan/lihat_bukti/' . $t->bukti_transfer); ?>"
           target="_blank" class="bukti-link" style="margin-top:10px;">
          <i class="bi bi-file-earmark-image"></i> Lihat Bukti Transfer
        </a>
        <?php endif; ?>

        <div class="trx-divider"></div>

        <!-- ══ KAS SELECTOR ══ -->
        <?php if ($is_setor): ?>
          <!-- SETORAN: kas sudah dipilih warga, tampilkan + bisa override -->
          <?php if (!empty($t->kode_kas)): ?>
          <div class="kas-info-set">
            <div class="kas-row">
              <span class="kas-pill" style="background:<?php echo $t->warna_kas ?? '#20c997'; ?>">
                <i class="bi <?php echo $t->icon_kas ?? 'bi-wallet2'; ?>"></i>
                <?php echo $t->kode_kas; ?>
              </span>
              <span class="kas-name"><?php echo $t->nama_kas; ?></span>
            </div>
            <div class="kas-note"><i class="bi bi-check-circle me-1"></i>Kas tujuan dipilih oleh warga</div>
          </div>
          <!-- Admin bisa override kas -->
          <details style="margin-bottom:4px;">
            <summary style="font-size:11.5px;color:var(--muted);cursor:pointer;user-select:none;padding:4px 0;">
              <i class="bi bi-pencil" style="font-size:11px;"></i> Ganti kas tujuan (opsional)
            </summary>
            <div class="kas-selector-wrap" style="margin-top:8px;">
              <div class="kas-options" id="kas_opts_<?php echo $t->id; ?>">
                <?php foreach ($kas_list as $ki => $k):
                  $ico = $k->jenis === 'bank' ? 'bi-bank' : ($k->jenis === 'ewallet' ? 'bi-phone-fill' : 'bi-cash-stack');
                  $emo = $k->jenis === 'bank' ? '🏦' : ($k->jenis === 'ewallet' ? '📱' : '💵');
                  $is_default = ($k->id == ($t->master_kas_id ?? null));
                ?>
                <label class="kas-opt <?php echo $is_default ? 'checked' : ''; ?>"
                       onclick="selectKas(this, '<?php echo $t->id; ?>', <?php echo $k->id; ?>)">
                  <input type="radio" name="kas_override_<?php echo $t->id; ?>"
                         value="<?php echo $k->id; ?>"
                         <?php echo $is_default ? 'checked' : ''; ?>>
                  <div class="kas-radio-dot"></div>
                  <span class="kas-opt-icon"><?php echo $emo; ?></span>
                  <div class="kas-opt-info">
                    <div class="kas-opt-name"><?php echo $k->nama; ?> <span style="color:var(--muted);font-weight:400;">(<?php echo $k->kode; ?>)</span></div>
                    <?php if ($k->nomor_rekening): ?>
                    <div class="kas-opt-sub">No. <?php echo $k->nomor_rekening; ?><?php echo $k->atas_nama ? ' · ' . $k->atas_nama : ''; ?></div>
                    <?php endif; ?>
                  </div>
                  <?php if ($is_default): ?>
                  <span class="kas-opt-badge default">Terpilih</span>
                  <?php endif; ?>
                </label>
                <?php endforeach; ?>
              </div>
            </div>
          </details>

          <?php else: ?>
          <div class="kas-warn"><i class="bi bi-exclamation-triangle"></i>Warga tidak memilih kas. Pilih kas tujuan:</div>
          <div class="kas-selector-wrap">
            <div class="kas-selector-label required">
              <i class="bi bi-wallet2"></i> Kas Tujuan <span>— wajib dipilih</span>
            </div>
            <div class="kas-options" id="kas_opts_<?php echo $t->id; ?>">
              <?php foreach ($kas_list as $ki => $k):
                $emo = $k->jenis === 'bank' ? '🏦' : ($k->jenis === 'ewallet' ? '📱' : '💵');
                $is_first = ($ki === 0);
              ?>
              <label class="kas-opt <?php echo $is_first ? 'checked' : ''; ?>"
                     onclick="selectKas(this, '<?php echo $t->id; ?>', <?php echo $k->id; ?>)">
                <input type="radio" name="kas_override_<?php echo $t->id; ?>"
                       value="<?php echo $k->id; ?>"
                       <?php echo $is_first ? 'checked' : ''; ?>>
                <div class="kas-radio-dot"></div>
                <span class="kas-opt-icon"><?php echo $emo; ?></span>
                <div class="kas-opt-info">
                  <div class="kas-opt-name"><?php echo $k->nama; ?> <span style="color:var(--muted);font-weight:400;">(<?php echo $k->kode; ?>)</span></div>
                  <?php if ($k->nomor_rekening): ?>
                  <div class="kas-opt-sub">No. <?php echo $k->nomor_rekening; ?></div>
                  <?php endif; ?>
                </div>
                <?php if ($is_first): ?><span class="kas-opt-badge">Pertama</span><?php endif; ?>
              </label>
              <?php endforeach; ?>
            </div>
          </div>
          <?php endif; ?>

        <?php else: ?>
          <!-- PENARIKAN: admin wajib pilih kas sumber dana -->
          <div class="kas-selector-wrap">
            <div class="kas-selector-label required">
              <i class="bi bi-bank"></i> Sumber Kas Penarikan <span>— dana diambil dari kas ini</span>
            </div>
            <div class="kas-options" id="kas_opts_<?php echo $t->id; ?>">
              <?php
                // Cari "kas tabungan" sebagai default (nama mengandung 'tabungan' atau pertama)
                $default_idx = 0;
                foreach ($kas_list as $ki => $k) {
                  if (stripos($k->nama, 'tabungan') !== false || stripos($k->kode, 'TAB') !== false) {
                    $default_idx = $ki; break;
                  }
                }
                foreach ($kas_list as $ki => $k):
                  $emo = $k->jenis === 'bank' ? '🏦' : ($k->jenis === 'ewallet' ? '📱' : '💵');
                  $is_default = ($ki === $default_idx);
              ?>
              <label class="kas-opt tarik-kas <?php echo $is_default ? 'checked' : ''; ?>"
                     onclick="selectKas(this, '<?php echo $t->id; ?>', <?php echo $k->id; ?>, true)">
                <input type="radio" name="kas_tarik_<?php echo $t->id; ?>"
                       value="<?php echo $k->id; ?>"
                       <?php echo $is_default ? 'checked' : ''; ?>>
                <div class="kas-radio-dot"></div>
                <span class="kas-opt-icon"><?php echo $emo; ?></span>
                <div class="kas-opt-info">
                  <div class="kas-opt-name"><?php echo $k->nama; ?> <span style="color:var(--muted);font-weight:400;">(<?php echo $k->kode; ?>)</span></div>
                  <?php if ($k->nomor_rekening): ?>
                  <div class="kas-opt-sub">No. <?php echo $k->nomor_rekening; ?></div>
                  <?php endif; ?>
                </div>
                <?php if ($is_default): ?><span class="kas-opt-badge default">Default</span><?php endif; ?>
              </label>
              <?php endforeach; ?>
            </div>
          </div>
        <?php endif; ?>

        <div class="trx-divider"></div>

        <!-- Form verifikasi (hidden inputs + catatan) -->
        <form id="form_<?php echo $t->id; ?>"
              action="<?php echo base_url('tabungan/proses_verifikasi/' . $t->id); ?>"
              method="post">
          <!-- kas_id yang dipilih akan diisi JS sebelum submit -->
          <input type="hidden" name="kas_id"  id="kas_id_<?php echo $t->id; ?>"
            value="<?php echo $is_setor ? ($t->master_kas_id ?? '') : ''; ?>">
          <input type="hidden" name="status"  id="status_<?php echo $t->id; ?>" value="">
          <textarea name="catatan_admin" class="catatan-field"
            placeholder="Catatan admin (opsional)..."
            id="catatan_<?php echo $t->id; ?>"></textarea>
        </form>

      </div><!-- /trx-card-body -->

      <div class="trx-card-foot">
        <div class="action-btns">
          <button class="btn-setuju"
            onclick="openModal('setujui', <?php echo $t->id; ?>,
              '<?php echo addslashes($t->nama_lengkap); ?>',
              '<?php echo $is_setor ? 'setor' : 'tarik'; ?>',
              <?php echo $t->nominal; ?>)">
            <i class="bi bi-check-circle"></i> Setujui
          </button>
          <button class="btn-tolak"
            onclick="openModal('tolak', <?php echo $t->id; ?>,
              '<?php echo addslashes($t->nama_lengkap); ?>',
              '<?php echo $is_setor ? 'setor' : 'tarik'; ?>',
              <?php echo $t->nominal; ?>)">
            <i class="bi bi-x-circle"></i> Tolak
          </button>
        </div>
      </div>
    </div><!-- /trx-card -->
    <?php endforeach; ?>
  </div><!-- /cards-grid -->
  <?php endif; ?>
</div>

<!-- ══ CONFIRM MODAL ══ -->
<div class="modal-overlay" id="confirmModal">
  <div class="modal-box">
    <div class="modal-hdr">
      <div class="modal-hdr-ico ok" id="modalIco">
        <i class="bi bi-check-circle-fill"></i>
      </div>
      <div>
        <p class="modal-hdr-t" id="modalTitle">Konfirmasi Persetujuan</p>
        <p class="modal-hdr-s" id="modalSub">Pastikan data sudah benar</p>
      </div>
    </div>
    <div class="modal-body">
      <div class="modal-detail-row"><span class="k">Nama Warga</span><span class="v" id="mdNama">—</span></div>
      <div class="modal-detail-row"><span class="k">Jenis</span><span class="v" id="mdJenis">—</span></div>
      <div class="modal-detail-row"><span class="k">Nominal</span><span class="v" id="mdNominal">—</span></div>
      <div class="modal-detail-row" id="mdKasRow"><span class="k" id="mdKasLabel">Kas Tujuan</span><span class="v teal" id="mdKas">—</span></div>
    </div>
    <div class="modal-foot">
      <button class="modal-btn-cancel" onclick="closeModal()">Batal</button>
      <button class="modal-btn-confirm" id="modalConfirmBtn" onclick="submitForm()">
        <i class="bi bi-check-circle me-1"></i> Ya, Setujui
      </button>
    </div>
  </div>
</div>

<script>
// Track selected kas per transaksi
const selectedKas = {};

function selectKas(el, trxId, kasId, isTarik = false) {
  // Uncheck all in same group
  const container = document.getElementById('kas_opts_' + trxId);
  container.querySelectorAll('.kas-opt').forEach(o => o.classList.remove('checked'));
  el.classList.add('checked');
  el.querySelector('input[type=radio]').checked = true;

  // Store
  selectedKas[trxId] = kasId;

  // Update hidden input
  const hidden = document.getElementById('kas_id_' + trxId);
  if (hidden) hidden.value = kasId;
}

// Init selected kas from pre-checked radios
document.querySelectorAll('.kas-opt.checked input[type=radio]').forEach(function(radio) {
  const name  = radio.name; // kas_override_ID or kas_tarik_ID
  const parts = name.split('_');
  const trxId = parts[parts.length - 1];
  selectedKas[trxId] = parseInt(radio.value);
  const hidden = document.getElementById('kas_id_' + trxId);
  if (hidden && !hidden.value) hidden.value = radio.value;
});

// ── Modal ──
let _modalAction = '';
let _modalTrxId  = '';

function fmt(n) {
  return new Intl.NumberFormat('id-ID').format(n);
}

function getKasName(trxId) {
  const container = document.getElementById('kas_opts_' + trxId);
  if (!container) return '—';
  const checked = container.querySelector('.kas-opt.checked .kas-opt-name');
  return checked ? checked.textContent.trim() : '—';
}

function openModal(action, trxId, nama, jenis, nominal) {
  // Validate kas selected for penarikan
  if (action === 'setujui') {
    const kasContainer = document.getElementById('kas_opts_' + trxId);
    if (kasContainer) {
      const checked = kasContainer.querySelector('.kas-opt.checked');
      if (!checked) {
        alert('Pilih kas terlebih dahulu sebelum menyetujui!');
        return;
      }
    }
  }

  _modalAction = action;
  _modalTrxId  = trxId;

  const isSetujui = action === 'setujui';
  const isSetor   = jenis === 'setor';

  // Icon
  const ico = document.getElementById('modalIco');
  ico.className = 'modal-hdr-ico ' + (isSetujui ? 'ok' : 'err');
  ico.innerHTML = isSetujui
    ? '<i class="bi bi-check-circle-fill"></i>'
    : '<i class="bi bi-x-circle-fill"></i>';

  document.getElementById('modalTitle').textContent = isSetujui ? 'Konfirmasi Persetujuan' : 'Konfirmasi Penolakan';
  document.getElementById('modalSub').textContent   = isSetujui ? 'Transaksi akan diproses dan saldo diperbarui.' : 'Transaksi akan ditolak.';
  document.getElementById('mdNama').textContent     = nama;

  const jenisEl = document.getElementById('mdJenis');
  jenisEl.textContent  = isSetor ? 'Setoran' : 'Penarikan';
  jenisEl.className    = 'v ' + (isSetor ? 'teal' : 'red');

  const nomEl = document.getElementById('mdNominal');
  nomEl.textContent = 'Rp ' + fmt(nominal);
  nomEl.className   = 'v ' + (isSetor ? 'teal' : 'red');

  // Kas row
  const kasRow = document.getElementById('mdKasRow');
  if (isSetujui) {
    kasRow.style.display = 'flex';
    document.getElementById('mdKasLabel').textContent = isSetor ? 'Kas Tujuan' : 'Kas Sumber';
    document.getElementById('mdKas').textContent = getKasName(trxId);
  } else {
    kasRow.style.display = 'none';
  }

  // Confirm button
  const btn = document.getElementById('modalConfirmBtn');
  btn.className = 'modal-btn-confirm' + (isSetujui ? '' : ' red');
  btn.innerHTML = isSetujui
    ? '<i class="bi bi-check-circle me-1"></i> Ya, Setujui'
    : '<i class="bi bi-x-circle me-1"></i> Ya, Tolak';

  document.getElementById('confirmModal').classList.add('open');
}

function closeModal() {
  document.getElementById('confirmModal').classList.remove('open');
}

function submitForm() {
  const form     = document.getElementById('form_' + _modalTrxId);
  const statusEl = document.getElementById('status_' + _modalTrxId);
  if (statusEl) statusEl.value = (_modalAction === 'setujui') ? 'disetujui' : 'ditolak';

  // Sync catatan
  const catatan = document.getElementById('catatan_' + _modalTrxId);

  closeModal();
  form.submit();
}

// Close on overlay click
document.getElementById('confirmModal').addEventListener('click', function(e) {
  if (e.target === this) closeModal();
});
</script>