<!-- views/kas/transfer.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;
  --slate-50: #f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-700:#334155;
  --slate-900:#0f172a;
  --red-500:  #ef4444;
  --orange-500:#f97316;
  --card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.06);
}

.tf-wrap {
  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;
}
.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);
}
.ar-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: .77rem; color: #94a3b8; padding-left: 51px;
}
.ar-breadcrumb a { color: #0d9488; text-decoration: none; font-weight: 600; }

/* ── Action Buttons ── */
.header-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.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-transfer-new {
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  color: #fff;
  box-shadow: 0 4px 14px rgba(13,148,136,.28);
}
.btn-transfer-new:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(13,148,136,.38); color: #fff; }
.btn-kembali {
  background: #fff; color: var(--slate-700);
  border: 1.5px solid var(--slate-200);
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.btn-kembali:hover { background: var(--slate-100); border-color: var(--slate-300); color: var(--slate-700); }

/* ── Stats Cards ── */
.tf-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.tf-stat-card {
  border-radius: 14px;
  padding: 18px 18px;
  position: relative;
  overflow: hidden;
  color: #fff;
  transition: transform .2s, box-shadow .2s;
  cursor: default;
  animation: fadeUp .35s ease both;
}
.tf-stat-card:nth-child(1) { animation-delay: .05s; }
.tf-stat-card:nth-child(2) { animation-delay: .12s; }
.tf-stat-card:nth-child(3) { animation-delay: .19s; }
.tf-stat-card:hover { transform: translateY(-3px); }
.tf-stat-card::before {
  content: '';
  position: absolute; top: -30px; right: -30px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
}
.tf-stat-card .st-label {
  font-size: .72rem; font-weight: 600; opacity: .85;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px;
  position: relative; z-index: 1;
}
.tf-stat-card .st-value {
  font-size: 1.3rem; font-weight: 800; line-height: 1.15;
  position: relative; z-index: 1;
}
.tf-stat-card .st-value small { font-size: .6em; font-weight: 600; opacity: .8; }
.tf-stat-card .st-icon {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px;
  background: rgba(255,255,255,.16);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; z-index: 1;
}
.tf-stat-card.st-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);
}
.tf-stat-card.st-blue {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 60%, #60a5fa 100%);
  box-shadow: 0 8px 28px rgba(59,130,246,.28);
}
.tf-stat-card.st-purple {
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 60%, #a78bfa 100%);
  box-shadow: 0 8px 28px rgba(139,92,246,.28);
}

/* ── History Table Card ── */
.tf-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--slate-200);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  animation: fadeUp .4s .22s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.tf-card-head {
  padding: 16px 20px;
  background: linear-gradient(90deg, var(--teal-50), #fff);
  border-bottom: 1px solid rgba(13,148,136,.1);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.tf-card-head .head-left {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: .95rem; color: var(--teal-800);
}
.tf-card-head .head-left i { color: var(--teal-600); font-size: 1.1rem; }

.tf-hist-table-wrap { overflow-x: auto; }
.tf-hist-table {
  width: 100%; border-collapse: collapse;
  font-size: .82rem; min-width: 640px;
}
.tf-hist-table thead th {
  padding: 10px 13px;
  background: var(--slate-50);
  border-bottom: 2px solid var(--slate-200);
  font-weight: 700; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--slate-500); white-space: nowrap;
}
.tf-hist-table tbody tr {
  border-bottom: 1px solid #f8fafc;
  transition: background .12s;
}
.tf-hist-table tbody tr:last-child { border-bottom: none; }
.tf-hist-table tbody tr:hover { background: var(--teal-50); }
.tf-hist-table tbody td { padding: 10px 13px; vertical-align: middle; }
.tf-hist-empty {
  text-align: center; padding: 48px 24px;
  color: var(--slate-400); font-size: .83rem;
}
.tf-hist-empty .empty-icon {
  width: 64px; height: 64px; border-radius: 16px;
  background: var(--teal-50); color: var(--teal-400);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin: 0 auto 12px;
}

/* Chips and arrows */
.kas-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px;
  font-size: .72rem; 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);
}
.tf-arrow-small {
  color: var(--teal-500); font-weight: 700; font-size: .9rem;
}
.tf-nominal {
  font-weight: 700; color: var(--teal-700);
}
.tf-ket-text {
  color: var(--slate-500); max-width: 180px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* DataTables custom styling */
#tabelTransfer_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;
}
#tabelTransfer_wrapper .dataTables_filter input:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(20,184,166,.12);
}
#tabelTransfer_wrapper .dataTables_length select {
  border: 1.5px solid var(--slate-200);
  border-radius: 8px; padding: 5px 8px;
  font-size: .82rem; font-family: 'Plus Jakarta Sans', sans-serif;
}
#tabelTransfer_wrapper .dataTables_info {
  font-size: .78rem; color: var(--slate-400); padding-top: 10px;
}
#tabelTransfer_wrapper .dataTables_paginate { padding-top: 8px; }
#tabelTransfer_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  font-size: .8rem; font-family: 'Plus Jakarta Sans', sans-serif;
}
#tabelTransfer_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--teal-600) !important;
  border-color: var(--teal-600) !important;
  color: #fff !important;
}
#tabelTransfer_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;
}
#tabelTransfer_wrapper .dataTables_filter,
#tabelTransfer_wrapper .dataTables_length { padding: 14px 16px 0; }
#tabelTransfer_wrapper .dataTables_info,
#tabelTransfer_wrapper .dataTables_paginate { padding: 10px 16px 14px; }

/* ── Mobile Cards ── */
.tf-mobile { display: none; padding: 12px 14px; }
.tf-m-card {
  border: 1px solid var(--slate-200);
  border-radius: 12px; padding: 14px 14px;
  margin-bottom: 10px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  position: relative;
  overflow: hidden;
}
.tf-m-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--teal-500), var(--teal-400));
  border-radius: 3px 0 0 3px;
}
.tf-m-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.tf-m-date { font-size: .73rem; color: var(--slate-400); font-weight: 600; }
.tf-m-flow {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.tf-m-nominal {
  font-size: 1rem; font-weight: 800; color: var(--teal-700);
  margin-bottom: 6px;
}
.tf-m-ket { font-size: .77rem; color: var(--slate-500); }
.tf-m-petugas {
  font-size: .72rem; color: var(--slate-400);
  display: flex; align-items: center; gap: 4px;
  margin-top: 6px;
}

/* ═══════════════════════════════════════════
   MODAL STYLES
═══════════════════════════════════════════ */
#modalTransfer .modal-dialog { max-width: 600px; }
#modalTransfer .modal-content {
  border: none;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 20px rgba(0,0,0,.08);
  overflow: hidden;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
#modalTransfer .modal-header {
  background: linear-gradient(135deg, var(--teal-800), var(--teal-600));
  border: none;
  padding: 22px 24px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
#modalTransfer .modal-header::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}
#modalTransfer .modal-header::after {
  content: '';
  position: absolute; bottom: -60px; left: 30%;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
}
#modalTransfer .modal-title {
  font-weight: 800; font-size: 1.05rem;
  display: flex; align-items: center; gap: 10px;
  position: relative; z-index: 1;
}
#modalTransfer .modal-title .modal-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
#modalTransfer .btn-close {
  filter: brightness(0) invert(1);
  opacity: .7; position: relative; z-index: 1;
}
#modalTransfer .btn-close:hover { opacity: 1; }
#modalTransfer .modal-body { padding: 24px; }
#modalTransfer .modal-footer {
  border-top: 1px solid var(--slate-100);
  padding: 16px 24px;
  gap: 10px;
}

/* ── Transfer visual (from → to) in Modal ── */
.tf-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  padding: 18px;
  background: var(--teal-50);
  border-radius: 12px;
  border: 1px solid rgba(13,148,136,.12);
}
.tf-flow-box {
  text-align: center;
  background: #fff;
  border-radius: 10px;
  padding: 14px 10px;
  border: 2px solid transparent;
  transition: border-color .2s, box-shadow .2s;
  min-height: 72px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
}
.tf-flow-box.active {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 4px rgba(20,184,166,.1);
}
.tf-flow-box .kas-icon {
  width: 34px; height: 34px; border-radius: 9px;
  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);
}
.tf-flow-box .kas-label {
  font-size: .76rem; font-weight: 700; color: var(--slate-700);
}
.tf-flow-box .kas-saldo {
  font-size: .7rem; color: var(--slate-400);
}
.tf-flow-box .kas-placeholder {
  font-size: .76rem; color: var(--slate-400);
  font-style: italic;
}
.tf-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-600), var(--teal-400));
  color: #fff; font-size: 1rem;
  box-shadow: 0 4px 12px rgba(13,148,136,.3);
  flex-shrink: 0;
}

/* ── Form fields in Modal ── */
.tf-field { margin-bottom: 16px; }
.tf-label {
  display: block; font-size: .8rem; font-weight: 700;
  color: var(--slate-700); margin-bottom: 6px;
}
.tf-label .req { color: var(--red-500); margin-left: 2px; }

.tf-select, .tf-input, .tf-textarea {
  width: 100%;
  border: 1.5px solid var(--slate-200);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .87rem;
  color: var(--slate-900);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.tf-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.tf-select:focus, .tf-input:focus, .tf-textarea:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(20,184,166,.12);
}
.tf-textarea { resize: vertical; min-height: 70px; }
.tf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Saldo hint ── */
.tf-saldo-hint {
  margin-top: 5px;
  font-size: .74rem;
  color: var(--teal-700);
  display: flex; align-items: center; gap: 5px;
  display: none;
}
.tf-saldo-hint.show { display: flex; }
.tf-saldo-hint.warn { color: var(--orange-500); }
.tf-saldo-hint.error { color: var(--red-500); }

/* ── Modal Buttons ── */
.btn-tf-submit {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  color: #fff; border: none; border-radius: 50px;
  padding: 11px 28px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .88rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(13,148,136,.28);
  transition: transform .15s, box-shadow .15s;
}
.btn-tf-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(13,148,136,.38); }
.btn-tf-submit:active { transform: scale(.97); }
.btn-tf-cancel-modal {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; color: var(--slate-700);
  border: 1.5px solid var(--slate-200);
  border-radius: 50px; padding: 10px 22px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .88rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-tf-cancel-modal:hover { background: var(--slate-100); border-color: var(--slate-300); }

/* ── Delete Button ── */
.btn-tf-delete {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: #fff; color: var(--red-500);
  border: 1.5px solid rgba(239,68,68,.2);
  border-radius: 8px;
  font-size: .85rem;
  cursor: pointer;
  transition: all .15s;
}
.btn-tf-delete:hover {
  background: #fef2f2; border-color: var(--red-500);
  transform: translateY(-1px); box-shadow: 0 3px 10px rgba(239,68,68,.15);
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .tf-stats-grid { grid-template-columns: 1fr; gap: 10px; }
  .tf-hist-table-wrap { display: none !important; }
  .tf-mobile { display: block; }
  .ar-page-header { flex-direction: column; align-items: flex-start; }
  .header-actions { width: 100%; }
  .header-actions .btn-action { flex: 1; justify-content: center; }
  .tf-row { grid-template-columns: 1fr; }
  .tf-flow { grid-template-columns: 1fr; }
  .tf-arrow { transform: rotate(90deg); margin: 0 auto; }
  #modalTransfer .modal-body { padding: 16px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .tf-stats-grid { grid-template-columns: 1fr 1fr; }
  .tf-stat-card:last-child { grid-column: 1 / -1; }
}
</style>

<div class="tf-wrap">

  <!-- ── Header ── -->
  <div class="ar-page-header">
    <div class="ar-header-left">
      <h4>
        <span class="hi"><i class="bi bi-arrow-left-right"></i></span>
        Transfer Antar Kas
      </h4>
      <div class="ar-breadcrumb">
        <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
        <span>/</span>
        <a href="<?php echo base_url('kas'); ?>">Kas RT</a>
        <span>/</span>
        <span>Transfer</span>
      </div>
    </div>
    <div class="header-actions">
      <?php if($this->session->userdata('role') != 'warga'): ?>
      <button type="button" class="btn-action btn-transfer-new" data-bs-toggle="modal" data-bs-target="#modalTransfer" id="btnOpenTransfer">
        <i class="bi bi-plus-circle-fill"></i> Transfer Baru
      </button>
      <?php endif; ?>
      <a href="<?php echo base_url('kas'); ?>" class="btn-action btn-kembali">
        <i class="bi bi-arrow-left"></i> Kembali
      </a>
    </div>
  </div>

  <!-- ── Stats Cards ── -->
  <div class="tf-stats-grid">
    <div class="tf-stat-card st-teal">
      <div class="st-label"><i class="bi bi-arrow-left-right me-1"></i>Total Transfer</div>
      <div class="st-value"><?php echo count($riwayat_transfer); ?> <small>transaksi</small></div>
      <div class="st-icon"><i class="bi bi-arrow-left-right"></i></div>
    </div>
    <div class="tf-stat-card st-blue">
      <div class="st-label"><i class="bi bi-cash-stack me-1"></i>Total Nominal Transfer</div>
      <div class="st-value"><small>Rp</small> <?php
        $total_nominal = 0;
        foreach($riwayat_transfer as $r) $total_nominal += $r->nominal;
        echo number_format($total_nominal, 0, ',', '.');
      ?></div>
      <div class="st-icon"><i class="bi bi-cash-stack"></i></div>
    </div>
    <div class="tf-stat-card st-purple">
      <div class="st-label"><i class="bi bi-wallet2 me-1"></i>Kas Tersedia</div>
      <div class="st-value"><?php echo count($kas_list); ?> <small>kas aktif</small></div>
      <div class="st-icon"><i class="bi bi-wallet2"></i></div>
    </div>
  </div>

  <!-- ── Riwayat Transfer Table ── -->
  <div class="tf-card">
    <div class="tf-card-head">
      <div class="head-left">
        <i class="bi bi-clock-history"></i>
        Riwayat Transfer
      </div>
    </div>

    <!-- DESKTOP TABLE -->
    <div class="tf-hist-table-wrap">
      <table class="tf-hist-table" id="tabelTransfer">
        <thead>
          <tr>
            <th width="4%">No</th>
            <th width="12%">Tanggal</th>
            <th>Dari</th>
            <th width="4%"></th>
            <th>Ke</th>
            <th class="text-end">Nominal</th>
            <th>Keterangan</th>
            <th>Oleh</th>
            <th width="5%">Aksi</th>
          </tr>
        </thead>
        <tbody>
          <?php if(empty($riwayat_transfer)): ?>
          <tr>
            <td colspan="9" class="tf-hist-empty">
              <div class="empty-icon"><i class="bi bi-arrow-left-right"></i></div>
              <div style="font-weight:700;color:var(--slate-700);margin-bottom:4px;">Belum ada riwayat transfer</div>
              <div>Klik tombol "Transfer Baru" untuk memulai</div>
            </td>
          </tr>
          <?php else: ?>
          <?php $no=1; foreach($riwayat_transfer as $r): ?>
          <tr>
            <td style="color:var(--slate-400);font-size:.77rem;"><?php echo $no++; ?></td>
            <td style="white-space:nowrap;">
              <div style="font-weight:600;"><?php echo date('d/m/Y', strtotime($r->tanggal)); ?></div>
              <div style="font-size:.7rem;color:var(--slate-400);"><?php echo date('H:i', strtotime($r->created_at)); ?></div>
            </td>
            <td>
              <span class="kas-chip" style="--warna:<?php echo htmlspecialchars($r->warna_dari); ?>">
                <i class="bi <?php echo htmlspecialchars($r->icon_dari); ?>"></i>
                <?php echo htmlspecialchars($r->kode_dari); ?>
              </span>
            </td>
            <td class="tf-arrow-small">→</td>
            <td>
              <span class="kas-chip" style="--warna:<?php echo htmlspecialchars($r->warna_ke); ?>">
                <i class="bi <?php echo htmlspecialchars($r->icon_ke); ?>"></i>
                <?php echo htmlspecialchars($r->kode_ke); ?>
              </span>
            </td>
            <td class="text-end tf-nominal">
              Rp <?php echo number_format($r->nominal, 0, ',', '.'); ?>
            </td>
            <td>
              <span class="tf-ket-text" title="<?php echo htmlspecialchars($r->keterangan ?: ''); ?>">
                <?php echo htmlspecialchars($r->keterangan ?: '—'); ?>
              </span>
            </td>
            <td style="color:var(--slate-400);font-size:.77rem;"><?php echo htmlspecialchars($r->nama_petugas); ?></td>
            <td>
              <button type="button" class="btn-tf-delete" title="Hapus transfer"
                onclick="hapusTransfer(<?php echo $r->id; ?>, 'Rp <?php echo number_format($r->nominal,0,',','.'); ?>')">
                <i class="bi bi-trash3"></i>
              </button>
            </td>
          </tr>
          <?php endforeach; ?>
          <?php endif; ?>
        </tbody>
      </table>
    </div>

    <!-- MOBILE CARDS -->
    <div class="tf-mobile" id="mobileTransferList">
      <?php if(empty($riwayat_transfer)): ?>
      <div class="tf-hist-empty">
        <div class="empty-icon"><i class="bi bi-arrow-left-right"></i></div>
        <div style="font-weight:700;color:var(--slate-700);margin-bottom:4px;">Belum ada riwayat transfer</div>
        <div>Klik tombol "Transfer Baru" untuk memulai</div>
      </div>
      <?php else: ?>
      <?php foreach($riwayat_transfer as $r): ?>
      <div class="tf-m-card">
        <div class="tf-m-top">
          <div class="tf-m-nominal">Rp <?php echo number_format($r->nominal, 0, ',', '.'); ?></div>
          <div class="tf-m-date"><?php echo date('d/m/Y H:i', strtotime($r->created_at)); ?></div>
        </div>
        <div class="tf-m-flow">
          <span class="kas-chip" style="--warna:<?php echo htmlspecialchars($r->warna_dari); ?>">
            <i class="bi <?php echo htmlspecialchars($r->icon_dari); ?>"></i>
            <?php echo htmlspecialchars($r->kode_dari); ?>
          </span>
          <span class="tf-arrow-small">→</span>
          <span class="kas-chip" style="--warna:<?php echo htmlspecialchars($r->warna_ke); ?>">
            <i class="bi <?php echo htmlspecialchars($r->icon_ke); ?>"></i>
            <?php echo htmlspecialchars($r->kode_ke); ?>
          </span>
        </div>
        <div class="tf-m-ket"><?php echo htmlspecialchars($r->keterangan ?: '—'); ?></div>
        <div class="tf-m-petugas"><i class="bi bi-person-fill"></i> <?php echo htmlspecialchars($r->nama_petugas); ?></div>
      </div>
      <?php endforeach; ?>
      <?php endif; ?>
    </div>
  </div>

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


<!-- ═══════════════════════════════════════════════════
     MODAL TRANSFER BARU
═══════════════════════════════════════════════════ -->
<div class="modal fade" id="modalTransfer" tabindex="-1" aria-labelledby="modalTransferLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalTransferLabel">
          <span class="modal-icon"><i class="bi bi-arrow-left-right"></i></span>
          Transfer Dana Antar Kas
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <?php echo form_open('kas/proses_transfer', ['id' => 'formTransfer']); ?>
      <div class="modal-body">

        <!-- Visual flow -->
        <div class="tf-flow">
          <div class="tf-flow-box" id="previewDari">
            <div class="kas-placeholder">Pilih kas sumber</div>
          </div>
          <div class="tf-arrow"><i class="bi bi-arrow-right"></i></div>
          <div class="tf-flow-box" id="previewTujuan">
            <div class="kas-placeholder">Pilih kas tujuan</div>
          </div>
        </div>

        <div class="tf-row">
          <!-- Kas Sumber -->
          <div class="tf-field">
            <label class="tf-label">Kas Sumber <span class="req">*</span></label>
            <select name="dari_kas_id" id="dariKas" class="tf-select" required>
              <option value="">-- Pilih Kas Sumber --</option>
              <?php foreach($kas_list as $k): ?>
                <option value="<?php echo $k->id; ?>"
                  data-nama="<?php echo htmlspecialchars($k->nama); ?>"
                  data-kode="<?php echo htmlspecialchars($k->kode); ?>"
                  data-warna="<?php echo htmlspecialchars($k->warna); ?>"
                  data-icon="<?php echo htmlspecialchars($k->icon); ?>"
                  data-saldo="<?php echo $k->saldo_realtime; ?>">
                  [<?php echo htmlspecialchars($k->kode); ?>] <?php echo htmlspecialchars($k->nama); ?>
                  — Rp <?php echo number_format($k->saldo_realtime, 0, ',', '.'); ?>
                </option>
              <?php endforeach; ?>
            </select>
            <div class="tf-saldo-hint" id="hintDari">
              <i class="bi bi-wallet2"></i> <span></span>
            </div>
          </div>

          <!-- Kas Tujuan -->
          <div class="tf-field">
            <label class="tf-label">Kas Tujuan <span class="req">*</span></label>
            <select name="ke_kas_id" id="keKas" class="tf-select" required>
              <option value="">-- Pilih Kas Tujuan --</option>
              <?php foreach($kas_list as $k): ?>
                <option value="<?php echo $k->id; ?>"
                  data-nama="<?php echo htmlspecialchars($k->nama); ?>"
                  data-kode="<?php echo htmlspecialchars($k->kode); ?>"
                  data-warna="<?php echo htmlspecialchars($k->warna); ?>"
                  data-icon="<?php echo htmlspecialchars($k->icon); ?>"
                  data-saldo="<?php echo $k->saldo_realtime; ?>">
                  [<?php echo htmlspecialchars($k->kode); ?>] <?php echo htmlspecialchars($k->nama); ?>
                  — Rp <?php echo number_format($k->saldo_realtime, 0, ',', '.'); ?>
                </option>
              <?php endforeach; ?>
            </select>
            <div class="tf-saldo-hint" id="hintKe">
              <i class="bi bi-wallet2"></i> <span></span>
            </div>
          </div>
        </div>

        <div class="tf-row">
          <!-- Nominal -->
          <div class="tf-field">
            <label class="tf-label">Nominal Transfer <span class="req">*</span></label>
            <input type="number" name="nominal" id="nominalInput"
              class="tf-input" placeholder="0"
              min="1" required>
            <div class="tf-saldo-hint" id="hintNominal">
              <i class="bi bi-exclamation-triangle"></i> <span></span>
            </div>
          </div>

          <!-- Tanggal -->
          <div class="tf-field">
            <label class="tf-label">Tanggal <span class="req">*</span></label>
            <input type="date" name="tanggal" class="tf-input"
              value="<?php echo date('Y-m-d'); ?>" required>
          </div>
        </div>

        <!-- Keterangan -->
        <div class="tf-field">
          <label class="tf-label">Keterangan</label>
          <textarea name="keterangan" class="tf-textarea"
            placeholder="Keterangan transfer (opsional)..."></textarea>
        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn-tf-cancel-modal" data-bs-dismiss="modal">
          <i class="bi bi-x-circle"></i> Batal
        </button>
        <button type="submit" class="btn-tf-submit" id="btnSubmit">
          <i class="bi bi-arrow-left-right"></i> Proses Transfer
        </button>
      </div>
      <?php echo form_close(); ?>
    </div>
  </div>
</div>


<script>
(function() {
  // Data kas dari PHP ke JS
  var kasData = {};
  <?php foreach($kas_list as $k): ?>
  kasData[<?php echo $k->id; ?>] = {
    nama  : <?php echo json_encode($k->nama); ?>,
    kode  : <?php echo json_encode($k->kode); ?>,
    warna : <?php echo json_encode($k->warna); ?>,
    icon  : <?php echo json_encode($k->icon); ?>,
    saldo : <?php echo (float)$k->saldo_realtime; ?>
  };
  <?php endforeach; ?>

  var fmtRp = function(n) {
    return 'Rp ' + n.toLocaleString('id-ID');
  };

  function renderPreview(elId, kas) {
    var el = document.getElementById(elId);
    if (!kas) {
      el.innerHTML = '<div class="kas-placeholder">' + (elId === 'previewDari' ? 'Pilih kas sumber' : 'Pilih kas tujuan') + '</div>';
      el.classList.remove('active');
      return;
    }
    el.innerHTML =
      '<div class="kas-icon" style="--warna:' + kas.warna + '"><i class="bi ' + kas.icon + '"></i></div>' +
      '<div class="kas-label">[' + kas.kode + '] ' + kas.nama + '</div>' +
      '<div class="kas-saldo">' + fmtRp(kas.saldo) + '</div>';
    el.classList.add('active');
  }

  function updateHintDari(kas) {
    var el = document.getElementById('hintDari');
    if (!kas) { el.classList.remove('show'); return; }
    el.querySelector('span').textContent = 'Saldo tersedia: ' + fmtRp(kas.saldo);
    el.className = 'tf-saldo-hint show' + (kas.saldo <= 0 ? ' error' : '');
  }

  function validateNominal() {
    var dariId = document.getElementById('dariKas').value;
    var nominal = parseFloat(document.getElementById('nominalInput').value) || 0;
    var hint = document.getElementById('hintNominal');
    if (!dariId || nominal <= 0) { hint.classList.remove('show'); return; }
    var kas = kasData[dariId];
    if (!kas) return;
    if (nominal > kas.saldo) {
      hint.querySelector('span').textContent = 'Nominal melebihi saldo! Saldo tersedia: ' + fmtRp(kas.saldo);
      hint.className = 'tf-saldo-hint show error';
    } else {
      hint.querySelector('span').textContent = 'Sisa saldo setelah transfer: ' + fmtRp(kas.saldo - nominal);
      hint.className = 'tf-saldo-hint show';
    }
  }

  document.getElementById('dariKas').addEventListener('change', function() {
    var kas = kasData[this.value] || null;
    renderPreview('previewDari', kas);
    updateHintDari(kas);
    validateNominal();
    // filter opsi tujuan
    var keEl = document.getElementById('keKas');
    Array.from(keEl.options).forEach(function(opt) {
      opt.disabled = (opt.value && opt.value === document.getElementById('dariKas').value);
    });
  });

  document.getElementById('keKas').addEventListener('change', function() {
    var kas = kasData[this.value] || null;
    renderPreview('previewTujuan', kas);
    var hintKe = document.getElementById('hintKe');
    if (kas) {
      hintKe.querySelector('span').textContent = 'Saldo sekarang: ' + fmtRp(kas.saldo);
      hintKe.className = 'tf-saldo-hint show';
    } else {
      hintKe.classList.remove('show');
    }
    // filter opsi sumber
    var dariEl = document.getElementById('dariKas');
    Array.from(dariEl.options).forEach(function(opt) {
      opt.disabled = (opt.value && opt.value === document.getElementById('keKas').value);
    });
  });

  document.getElementById('nominalInput').addEventListener('input', validateNominal);

  // Submit guard
  document.getElementById('formTransfer').addEventListener('submit', function(e) {
    var dariId  = document.getElementById('dariKas').value;
    var keId    = document.getElementById('keKas').value;
    var nominal = parseFloat(document.getElementById('nominalInput').value) || 0;

    if (dariId === keId && dariId) {
      e.preventDefault();
      alert('Kas sumber dan tujuan tidak boleh sama!');
      return;
    }
    var kas = kasData[dariId];
    if (kas && nominal > kas.saldo) {
      e.preventDefault();
      alert('Nominal melebihi saldo kas sumber!\nSaldo tersedia: ' + fmtRp(kas.saldo));
      return;
    }
  });

  // Reset form when modal is closed
  var modalEl = document.getElementById('modalTransfer');
  if (modalEl) {
    modalEl.addEventListener('hidden.bs.modal', function() {
      document.getElementById('formTransfer').reset();
      renderPreview('previewDari', null);
      renderPreview('previewTujuan', null);
      document.getElementById('hintDari').classList.remove('show');
      document.getElementById('hintKe').classList.remove('show');
      document.getElementById('hintNominal').classList.remove('show');
      // Re-enable all options
      var dariEl = document.getElementById('dariKas');
      var keEl   = document.getElementById('keKas');
      Array.from(dariEl.options).forEach(function(opt) { opt.disabled = false; });
      Array.from(keEl.options).forEach(function(opt) { opt.disabled = false; });
    });
  }

  // DataTables init for history table
  window.addEventListener('load', function() {
    if (typeof $ === 'undefined' || $('#tabelTransfer').length === 0) return;
    if ($('#tabelTransfer tbody tr td.tf-hist-empty').length > 0) return;

    $('#tabelTransfer').DataTable({
      pageLength: 10,
      order: [[1, 'desc']],
      responsive: true,
      columnDefs: [
        { orderable: false, targets: [0, 3, 8] }
      ],
      language: {
        search: 'Cari:',
        searchPlaceholder: 'Cari transfer...',
        lengthMenu: 'Tampilkan _MENU_ data',
        info: 'Menampilkan _START_ - _END_ dari _TOTAL_ transfer',
        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-arrow-left-right d-block fs-1 mb-2 opacity-50"></i><div class="fw-semibold">Belum ada data transfer</div></div>',
        paginate: {
          previous: '<i class="bi bi-chevron-left"></i>',
          next: '<i class="bi bi-chevron-right"></i>',
        }
      }
    });
  });
})();

// Hapus transfer function
function hapusTransfer(id, nominal) {
  if (confirm('Hapus transfer ' + nominal + '?\n\nData transfer dan transaksi terkait akan dihapus.')) {
    window.location.href = '<?php echo base_url("kas/hapus_transfer/"); ?>' + id;
  }
}
</script>