<!-- views/pinjaman/detail.php -->
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<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;
  --green-50: #f0fdf4; --green-100: #dcfce7;
  --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706;
  --amber-50: #fffbeb; --amber-100: #fef3c7;
  --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626;
  --red-50: #fff5f5;
  --blue-500: #3b82f6; --blue-50: #eff6ff; --blue-100: #dbeafe;
  --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0;
  --slate-300: #cbd5e1; --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);
}

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

/* ── Page Header ── */
.det-page-header {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 12px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.det-page-header h4 {
  font-size: 1.3rem; font-weight: 800; color: var(--slate-900);
  margin: 0 0 6px; display: flex; align-items: center; gap: 10px;
}
.det-page-header h4 .head-icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.05rem;
  box-shadow: 0 4px 12px rgba(13,148,136,.3); flex-shrink: 0;
}
.det-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; color: var(--slate-400); flex-wrap: wrap;
}
.det-breadcrumb a { color: var(--teal-600); text-decoration: none; font-weight: 600; }
.det-breadcrumb a:hover { text-decoration: underline; }
.det-breadcrumb .sep { color: var(--slate-300); }
.det-breadcrumb .current { color: var(--slate-500); font-weight: 600; }

.header-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--slate-100); color: var(--slate-600);
  border: 1px solid var(--slate-200); border-radius: 8px;
  padding: 8px 16px; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; font-weight: 700; text-decoration: none; transition: all .15s;
}
.btn-back:hover { background: var(--slate-200); color: var(--slate-800); }
.btn-pelunasan {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--green-500), var(--green-600));
  color: #fff; border: none; border-radius: 8px;
  padding: 8px 16px; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 3px 10px rgba(16,185,129,.22); transition: all .15s;
}
.btn-pelunasan:hover { transform: translateY(-1px); color: #fff; }

/* ── Alert Boxes ── */
.det-alert {
  border-radius: 12px; padding: 15px 18px;
  margin-bottom: 18px; display: flex; align-items: flex-start; gap: 13px;
  animation: fadeUp .3s ease both;
}
.det-alert.info  { background: var(--blue-50);  border: 1px solid rgba(59,130,246,.2); border-left: 4px solid var(--blue-500); }
.det-alert.amber { background: var(--amber-50); border: 1px solid rgba(245,158,11,.25); border-left: 4px solid var(--amber-500); }
.det-alert .al-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
.det-alert.info  .al-icon { color: var(--blue-500); }
.det-alert.amber .al-icon { color: var(--amber-500); }
.det-alert .al-body {}
.det-alert .al-title { font-size: .88rem; font-weight: 800; margin-bottom: 3px; }
.det-alert.info  .al-title { color: #1e40af; }
.det-alert.amber .al-title { color: #92400e; }
.det-alert .al-text { font-size: .82rem; color: var(--slate-600); }
.det-alert .al-text strong { color: var(--slate-800); }

/* ── Main Layout ── */
.det-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 18px; margin-bottom: 18px; align-items: start;
}

/* ── Card ── */
.det-card {
  background: #fff; border-radius: 14px;
  border: 1px solid var(--slate-200); box-shadow: var(--card-shadow);
  overflow: hidden; margin-bottom: 18px;
  animation: fadeUp .35s ease both;
}
.det-card:last-child { margin-bottom: 0; }
.det-card-head {
  padding: 15px 20px; border-bottom: 1px solid var(--slate-100);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.det-card-head.teal { background: linear-gradient(90deg, var(--teal-50), #fff); border-bottom-color: rgba(13,148,136,.1); }
.det-card-head.plain { background: #fff; }
.det-card-head h5 {
  margin: 0; font-size: .95rem; font-weight: 800;
  display: flex; align-items: center; gap: 8px;
}
.det-card-head h5 i.teal  { color: var(--teal-600); }
.det-card-head h5 i.amber { color: var(--amber-500); }
.det-card-head h5 i.green { color: var(--green-500); }
.det-card-body { padding: 20px; }

/* ── Kode + Status Header ── */
.pinjaman-head-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.badge-kode-lg {
  font-family: monospace; font-size: .95rem; font-weight: 800;
  color: var(--teal-700); background: var(--teal-50);
  border: 1px solid rgba(13,148,136,.2);
  padding: 5px 12px; border-radius: 8px;
}
.badge-status-lg {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 14px; border-radius: 20px; font-size: .82rem; font-weight: 800;
}
.badge-status-lg.aktif { background: var(--amber-100); color: #92400e; border: 1px solid var(--amber-400); }
.badge-status-lg.lunas { background: var(--green-100); color: var(--green-600); border: 1px solid #6ee7b7; }
.badge-status-lg.macet { background: #fee2e2; color: var(--red-600); border: 1px solid #fca5a5; }

/* ── Info Grid ── */
.det-divider { border: none; border-top: 1px solid var(--slate-100); margin: 18px 0; }
.det-section-title {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--teal-600);
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.det-section-title::after { content: ''; flex: 1; height: 1px; background: rgba(13,148,136,.15); }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.info-item label {
  display: block; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--slate-400); margin-bottom: 3px;
}
.info-item .val { font-size: .87rem; font-weight: 600; color: var(--slate-800); }
.info-item .val.sub { font-size: .76rem; color: var(--slate-400); margin-top: 2px; font-weight: 500; }

/* ── Nominal Cards ── */
.nominal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.nominal-card {
  border-radius: 10px; padding: 12px 14px; text-align: center;
  border: 1px solid var(--slate-100);
}
.nominal-card label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-400); display: block; margin-bottom: 5px; }
.nominal-card .nom-val { font-size: .88rem; font-weight: 800; }
.nominal-card.teal  { background: var(--teal-50);  } .nominal-card.teal  .nom-val { color: var(--teal-700); }
.nominal-card.blue  { background: var(--blue-50);  } .nominal-card.blue  .nom-val { color: var(--blue-500); }
.nominal-card.red   { background: var(--red-50);   } .nominal-card.red   .nom-val { color: var(--red-500); }
.nominal-card.green { background: var(--green-50); } .nominal-card.green .nom-val { color: var(--green-600); }

/* ── Sisa Pinjaman Bar ── */
.sisa-bar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px;
}
.sisa-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-radius: 11px;
}
.sisa-item.amber { background: var(--amber-50); border: 1px solid rgba(245,158,11,.2); }
.sisa-item.info  { background: var(--blue-50);  border: 1px solid rgba(59,130,246,.2); }
.sisa-item .si-label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.sisa-item.amber .si-label { color: var(--amber-600); }
.sisa-item.info  .si-label { color: var(--blue-500); }
.sisa-item .si-val { font-size: 1.05rem; font-weight: 800; }
.sisa-item.amber .si-val { color: var(--amber-600); }
.sisa-item.info  .si-val  { color: var(--blue-500); }
.sisa-item .si-icon { font-size: 1.5rem; opacity: .35; }

/* ── Ringkasan Sidebar ── */
.ring-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 11px; margin-bottom: 10px;
}
.ring-item.green { background: var(--green-50); border: 1px solid #86efac; }
.ring-item.amber { background: var(--amber-50); border: 1px solid var(--amber-400); }
.ring-item .ri-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.ring-item.green .ri-label { color: var(--green-600); }
.ring-item.amber .ri-label { color: var(--amber-600); }
.ring-item .ri-val { font-size: 1.2rem; font-weight: 800; }
.ring-item.green .ri-val { color: var(--green-600); }
.ring-item.amber .ri-val { color: var(--amber-600); }
.ring-item .ri-icon { font-size: 1.5rem; opacity: .35; }

.progress-track { height: 7px; background: var(--slate-100); border-radius: 10px; overflow: hidden; margin: 12px 0 6px; }
.progress-fill {
  height: 100%; border-radius: 10px;
  background: linear-gradient(90deg, var(--green-500), #34d399); transition: width .5s ease;
}
.progress-pct { text-align: center; font-size: .78rem; font-weight: 800; color: var(--green-600); }

.pembayaran-terakhir {
  border: 1px solid var(--slate-200); border-radius: 10px;
  padding: 11px 13px; display: flex; align-items: center; gap: 10px; margin-top: 14px;
}
.pt-icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--green-50); display: flex; align-items: center; justify-content: center;
  color: var(--green-500); font-size: 1rem; flex-shrink: 0;
}
.pt-body .pt-date { font-size: .72rem; color: var(--slate-400); margin-bottom: 2px; }
.pt-body .pt-nom  { font-size: .9rem; font-weight: 800; color: var(--teal-700); }

/* ── Pending Payments ── */
.pending-mini-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.pending-mini-table thead th {
  padding: 8px 12px; background: rgba(245,158,11,.08);
  border-bottom: 1px solid rgba(245,158,11,.2);
  font-weight: 700; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--amber-600);
}
.pending-mini-table tbody tr { border-bottom: 1px solid var(--slate-100); }
.pending-mini-table tbody tr:last-child { border-bottom: none; }
.pending-mini-table tbody td { padding: 9px 12px; vertical-align: middle; }

/* ── Jadwal Angsuran Table ── */
.ang-table-wrap { overflow-x: auto; }
.ang-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.ang-table thead th {
  padding: 10px 14px; background: var(--slate-50);
  border-bottom: 2px solid var(--slate-200);
  font-weight: 700; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--slate-500); white-space: nowrap;
}
.ang-table tbody tr { border-bottom: 1px solid #f8fafc; transition: background .12s; }
.ang-table tbody tr:last-child { border-bottom: none; }
.ang-table tbody td { padding: 10px 14px; vertical-align: middle; }

.ang-table tbody tr.row-lunas  td { background: rgba(16,185,129,.04); }
.ang-table tbody tr.row-pending td { background: rgba(245,158,11,.06); }
.ang-table tbody tr.row-telat  td { background: rgba(239,68,68,.04); }
.ang-table tbody tr.row-lunas:hover  td { background: var(--green-50); }
.ang-table tbody tr.row-pending:hover td { background: var(--amber-50); }
.ang-table tbody tr.row-telat:hover  td { background: var(--red-50); }

.badge-ke {
  display: inline-block; font-size: .72rem; font-weight: 800;
  background: var(--slate-100); color: var(--slate-600);
  padding: 2px 8px; border-radius: 5px;
}
.badge-ang-status {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 20px; font-size: .7rem; font-weight: 700;
}
.badge-ang-status.lunas   { background: var(--green-100); color: var(--green-600); }
.badge-ang-status.pending { background: var(--amber-100); color: #92400e; }
.badge-ang-status.telat   { background: #fee2e2; color: var(--red-500); }
.badge-ang-status.hari-ini{ background: var(--amber-100); color: #92400e; }
.badge-ang-status.belum   { background: var(--slate-100); color: var(--slate-500); }

.pending-time { font-size: .7rem; color: var(--slate-400); margin-top: 2px; }
.denda-note   { font-size: .72rem; color: var(--red-500); margin-top: 2px; }

/* Action buttons in table */
.btn-ang-sm {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 6px; padding: 5px 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .74rem; font-weight: 700; cursor: pointer;
  text-decoration: none; border: none; white-space: nowrap;
  transition: all .15s; margin-bottom: 4px;
}
.btn-ang-sm:last-child { margin-bottom: 0; }
.btn-ang-sm.lunas   { background: var(--green-50); color: var(--green-600); border: 1px solid #86efac; cursor: default; }
.btn-ang-sm.bayar-w { background: linear-gradient(135deg, var(--blue-500), #60a5fa); color: #fff; box-shadow: 0 2px 8px rgba(59,130,246,.22); }
.btn-ang-sm.bayar-w:hover { transform: translateY(-1px); color: #fff; }
.btn-ang-sm.bayar-a { background: linear-gradient(135deg, var(--teal-600), var(--teal-500)); color: #fff; box-shadow: 0 2px 8px rgba(13,148,136,.22); }
.btn-ang-sm.bayar-a:hover { transform: translateY(-1px); color: #fff; }
.btn-ang-sm.verif   { background: linear-gradient(135deg, var(--green-500), var(--green-600)); color: #fff; box-shadow: 0 2px 8px rgba(16,185,129,.22); }
.btn-ang-sm.verif:hover { transform: translateY(-1px); color: #fff; }
.btn-ang-sm.bukti   { background: var(--blue-50); color: var(--blue-500); border: 1px solid rgba(59,130,246,.2); }
.btn-ang-sm.bukti:hover { background: var(--blue-500); color: #fff; border-color: transparent; }
.btn-ang-sm.menunggu{ background: var(--amber-50); color: var(--amber-600); border: 1px solid var(--amber-400); cursor: default; }

.ang-action-wrap { display: flex; flex-direction: column; gap: 4px; }

/* ── Mobile Angsuran Cards ── */
.ang-mobile { display: none; padding: 12px 14px; }
.ang-m-card {
  border: 1px solid var(--slate-200); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px;
  background: #fff; position: relative; overflow: hidden;
}
.ang-m-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 3px 0 0 3px; background: var(--mc, var(--slate-300));
}
.ang-m-card.lunas  { --mc: var(--green-500); }
.ang-m-card.pending{ --mc: var(--amber-500); }
.ang-m-card.telat  { --mc: var(--red-500); }
.ang-m-card.belum  { --mc: var(--slate-300); }
.ang-m-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ang-m-row { display: flex; justify-content: space-between; font-size: .78rem; margin-bottom: 5px; align-items: center; }
.ang-m-row .r-l { color: var(--slate-400); font-size: .75rem; }
.ang-m-row .r-v { font-weight: 700; }
.ang-m-footer { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Riwayat Table ── */
.riw-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.riw-table thead th {
  padding: 10px 14px; background: var(--slate-50);
  border-bottom: 2px solid var(--slate-200);
  font-weight: 700; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--slate-500);
}
.riw-table tbody tr { border-bottom: 1px solid #f8fafc; transition: background .12s; }
.riw-table tbody tr:last-child { border-bottom: none; }
.riw-table tbody tr:hover td { background: var(--teal-50); }
.riw-table tbody td { padding: 10px 14px; vertical-align: middle; }

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 1099px) {
  .det-layout { grid-template-columns: 1fr; }
  .det-sidebar { order: -1; }
  .ring-item { display: inline-flex; flex-direction: column; }
  /* show sidebar as horizontal 2-col */
  .sidebar-rings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ring-item { margin-bottom: 0 !important; }
}
@media (max-width: 767px) {
  .ang-table-wrap { display: none; }
  .ang-mobile { display: block; }
  .nominal-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sisa-bar { grid-template-columns: 1fr; gap: 9px; }
  .info-grid { grid-template-columns: 1fr; gap: 10px; }
  .pending-mini-table thead { display: none; }
  .pending-mini-table tbody tr {
    display: block; border: 1px solid rgba(245,158,11,.2);
    border-radius: 8px; margin-bottom: 8px; padding: 8px 12px;
  }
  .pending-mini-table tbody td {
    display: flex; justify-content: space-between;
    border: none; padding: 3px 0; font-size: .78rem;
  }
  .pending-mini-table tbody td::before {
    content: attr(data-label); font-weight: 700;
    color: var(--slate-400); font-size: .7rem; margin-right: 8px;
  }
  .det-page-header h4 .page-title { display: none; }
  .header-actions { width: 100%; }
  .btn-back, .btn-pelunasan { flex: 1; justify-content: center; }
}
@media (max-width: 500px) {
  .nominal-grid { grid-template-columns: 1fr 1fr; }
  .det-card-body { padding: 14px; }
}
</style>

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

  <!-- ── Page Header ── -->
  <div class="det-page-header">
    <div>
      <h4>
        <div class="head-icon"><i class="bi bi-file-earmark-text-fill"></i></div>
        <span class="page-title">Detail Pinjaman</span>
      </h4>
      <div class="det-breadcrumb">
        <a href="<?php echo base_url('dashboard'); ?>"><i class="bi bi-grid-1x2-fill me-1"></i>Dashboard</a>
        <span class="sep">›</span>
        <a href="<?php echo base_url('pinjaman'); ?>">Pinjaman</a>
        <span class="sep">›</span>
        <a href="<?php echo base_url('pinjaman/data_pinjaman'); ?>">Data Pinjaman</a>
        <span class="sep">›</span>
        <span class="current">Detail</span>
      </div>
    </div>
    <div class="header-actions">
      <a href="<?php echo base_url('pinjaman/data_pinjaman'); ?>" class="btn-back">
        <i class="bi bi-arrow-left"></i> Kembali
      </a>
      <?php if(!is_warga() && $pinjaman->status_pinjaman == 'aktif'): ?>
      <a href="<?php echo base_url('pinjaman/pelunasan_dipercepat/'.$pinjaman->id); ?>" class="btn-pelunasan">
        <i class="bi bi-check-circle-fill"></i> Pelunasan Dipercepat
      </a>
      <?php endif; ?>
    </div>
  </div>

  <!-- ── Alert Sisa Angsuran (Warga) ── -->
  <?php if(is_warga() && $pinjaman->status_pinjaman == 'aktif'): ?>
  <div class="det-alert info">
    <i class="bi bi-info-circle-fill al-icon"></i>
    <div class="al-body">
      <div class="al-title">Ringkasan Sisa Angsuran Anda</div>
      <div class="al-text">
        Sisa <strong><?php echo $sisa_angsuran_count; ?></strong> kali angsuran &nbsp;|&nbsp;
        Total sisa pembayaran: <strong>Rp <?php echo number_format($total_sisa_bayar, 0, ',', '.'); ?></strong>
      </div>
    </div>
  </div>
  <?php endif; ?>

  <!-- ── Alert Pending Payments ── -->
  <?php if(!empty($pending_payments) && $pinjaman->status_pinjaman == 'aktif'): ?>
  <div class="det-alert amber">
    <i class="bi bi-clock-history al-icon"></i>
    <div class="al-body" style="width:100%;">
      <div class="al-title">
        <?php echo is_warga() ? 'Pembayaran Menunggu Verifikasi' : count($pending_payments).' Pembayaran Perlu Diverifikasi'; ?>
      </div>
      <div class="al-text" style="margin-bottom:12px;">
        <?php echo is_warga()
          ? 'Pembayaran Anda sedang menunggu verifikasi admin.'
          : 'Berikut pembayaran transfer dari warga yang masuk:'; ?>
      </div>
      <table class="pending-mini-table">
        <thead>
          <tr>
            <th>Angsuran Ke</th>
            <th class="text-end">Nominal</th>
            <th>Waktu</th>
            <th>Metode</th>
            <?php if(!is_warga()): ?><th>Aksi</th><?php endif; ?>
          </tr>
        </thead>
        <tbody>
          <?php foreach($pending_payments as $pp): ?>
          <tr>
            <td data-label="Angsuran">Ke-<?php echo $pp->angsuran_ke; ?></td>
            <td data-label="Nominal" class="text-end" style="font-weight:700;color:var(--amber-600);">
              Rp <?php echo number_format($pp->nominal_bayar, 0, ',', '.'); ?>
            </td>
            <td data-label="Waktu" style="font-size:.78rem;">
              <?php echo date('d M Y H:i', strtotime($pp->created_at)); ?>
            </td>
            <td data-label="Metode"><?php echo ucfirst(str_replace('_', ' ', $pp->metode_bayar ?? '-')); ?></td>
            <?php if(!is_warga()): ?>
            <td data-label="Aksi">
              <a href="<?php echo base_url('pinjaman/verifikasi_pembayaran/'.$pp->id); ?>" class="btn-ang-sm verif">
                <i class="bi bi-check-lg"></i> Verifikasi
              </a>
            </td>
            <?php endif; ?>
          </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
      <?php if(!is_warga() && count($pending_payments) > 0): ?>
      <div style="margin-top:10px;text-align:right;">
        <a href="<?php echo base_url('pinjaman/verifikasi_pembayaran_list'); ?>" style="font-size:.78rem;font-weight:700;color:var(--amber-600);text-decoration:none;">
          <i class="bi bi-list-check me-1"></i>Lihat Semua Pending →
        </a>
      </div>
      <?php endif; ?>
    </div>
  </div>
  <?php endif; ?>

  <!-- ── Main Layout ── -->
  <div class="det-layout">

    <!-- LEFT: Info Pinjaman -->
    <div class="det-main">
      <div class="det-card">
        <div class="det-card-head teal">
          <div class="pinjaman-head-bar">
            <h5>
              <i class="bi bi-wallet2 teal"></i>
              <span class="badge-kode-lg"><?php echo htmlspecialchars($pinjaman->kode_pinjaman); ?></span>
            </h5>
          </div>
          <?php
          $st = $pinjaman->status_pinjaman;
          $st_label = $st == 'aktif' ? 'Aktif' : ($st == 'lunas' ? 'Lunas' : 'Macet');
          $st_icon  = $st == 'aktif' ? 'bi-activity' : ($st == 'lunas' ? 'bi-check-circle-fill' : 'bi-exclamation-triangle-fill');
          ?>
          <span class="badge-status-lg <?php echo $st; ?>">
            <i class="bi <?php echo $st_icon; ?>"></i> <?php echo $st_label; ?>
          </span>
        </div>
        <div class="det-card-body">

          <!-- Data Peminjam -->
          <div class="det-section-title"><i class="bi bi-person-fill"></i> Data Peminjam</div>
          <div class="info-grid">
            <div class="info-item">
              <label>Nama Lengkap</label>
              <div class="val"><?php echo htmlspecialchars($warga->nama_lengkap); ?></div>
              <div class="val sub">NIK: <?php echo $warga->nik ?? '-'; ?></div>
            </div>
            <div class="info-item">
              <label>No. HP</label>
              <div class="val"><?php echo !empty($warga->no_hp) ? $warga->no_hp : '-'; ?></div>
            </div>
            <div class="info-item">
              <label>Alamat</label>
              <!-- FIX: Guard against undefined $warga->alamat -->
              <div class="val"><?php echo isset($warga->alamat) && !empty($warga->alamat) ? htmlspecialchars($warga->alamat) : '-'; ?></div>
            </div>
            <div class="info-item">
              <label>Tanggal Pencairan</label>
              <div class="val"><?php echo date('d F Y', strtotime($pinjaman->tanggal_pencairan)); ?></div>
            </div>
            <div class="info-item">
              <label>Jenis Pinjaman</label>
              <div class="val"><?php echo htmlspecialchars($pinjaman->nama_pinjaman ?? '-'); ?></div>
              <div class="val sub">Bunga: <?php echo $pinjaman->bunga_persen; ?>% / bulan</div>
            </div>
            <div class="info-item">
              <label>Keperluan</label>
              <div class="val"><?php echo htmlspecialchars($pinjaman->keperluan ?: '-'); ?></div>
            </div>
          </div>

          <hr class="det-divider">

          <!-- Nominal Detail -->
          <div class="det-section-title"><i class="bi bi-cash-coin"></i> Rincian Pinjaman</div>
          <div class="nominal-grid">
            <div class="nominal-card teal">
              <label>Nominal Disetujui</label>
              <div class="nom-val">Rp <?php echo number_format($pinjaman->nominal_disetujui, 0, ',', '.'); ?></div>
            </div>
            <div class="nominal-card blue">
              <label>Bunga Total</label>
              <div class="nom-val">Rp <?php echo number_format($pinjaman->bunga_total, 0, ',', '.'); ?></div>
            </div>
            <div class="nominal-card red">
              <label>Total Pinjaman</label>
              <div class="nom-val">Rp <?php echo number_format($pinjaman->total_pinjaman, 0, ',', '.'); ?></div>
            </div>
            <div class="nominal-card green">
              <label>Angsuran/Bulan</label>
              <div class="nom-val">Rp <?php echo number_format($pinjaman->angsuran_per_bulan, 0, ',', '.'); ?></div>
            </div>
          </div>

          <?php if($pinjaman->status_pinjaman == 'aktif'): ?>
          <div class="sisa-bar">
            <div class="sisa-item amber">
              <div>
                <div class="si-label">Sisa Pinjaman</div>
                <div class="si-val">Rp <?php echo number_format($pinjaman->sisa_pinjaman, 0, ',', '.'); ?></div>
              </div>
              <i class="bi bi-hourglass-split si-icon" style="color:var(--amber-500);"></i>
            </div>
            <div class="sisa-item info">
              <div>
                <div class="si-label">Sisa Tenor</div>
                <div class="si-val"><?php echo $pinjaman->sisa_tenor; ?> bulan</div>
              </div>
              <i class="bi bi-calendar-event si-icon" style="color:var(--blue-500);"></i>
            </div>
          </div>
          <?php endif; ?>

        </div>
      </div>
    </div><!-- /.det-main -->

    <!-- RIGHT: Ringkasan Sidebar -->
    <div class="det-sidebar">
      <div class="det-card">
        <div class="det-card-head plain">
          <h5><i class="bi bi-receipt-cutoff green"></i> Ringkasan Pembayaran</h5>
        </div>
        <div class="det-card-body">
          <?php
          $total_angsuran = count($angsuran);
          $sudah_bayar = 0; $belum_bayar = 0;
          foreach($angsuran as $a) {
            if($a->status_bayar == 'dibayar') $sudah_bayar++;
            else $belum_bayar++;
          }
          $progress = $total_angsuran > 0 ? ($sudah_bayar / $total_angsuran * 100) : 0;
          ?>

          <div class="sidebar-rings">
            <div class="ring-item green" style="margin-bottom:10px;">
              <div>
                <div class="ri-label"><i class="bi bi-check-circle-fill me-1"></i>Sudah Bayar</div>
                <div class="ri-val"><?php echo $sudah_bayar; ?> kali</div>
              </div>
              <i class="bi bi-check-circle-fill ri-icon" style="color:var(--green-500);"></i>
            </div>
            <div class="ring-item amber" style="margin-bottom:10px;">
              <div>
                <div class="ri-label"><i class="bi bi-clock-history me-1"></i>Belum Bayar</div>
                <div class="ri-val"><?php echo $belum_bayar; ?> kali</div>
              </div>
              <i class="bi bi-clock-history ri-icon" style="color:var(--amber-500);"></i>
            </div>
          </div>

          <div class="progress-track">
            <div class="progress-fill" style="width:<?php echo $progress; ?>%"></div>
          </div>
          <div class="progress-pct"><?php echo round($progress, 1); ?>% Terlunasi</div>

          <?php if(!empty($riwayat_bayar)): ?>
          <div class="pembayaran-terakhir">
            <div class="pt-icon"><i class="bi bi-check-lg"></i></div>
            <div class="pt-body">
              <div class="pt-date">Pembayaran Terakhir</div>
              <div class="pt-nom">Rp <?php echo number_format($riwayat_bayar[0]->nominal_bayar, 0, ',', '.'); ?></div>
              <div style="font-size:.72rem;color:var(--slate-400);"><?php echo date('d M Y', strtotime($riwayat_bayar[0]->tanggal_bayar)); ?></div>
            </div>
          </div>
          <?php endif; ?>
        </div>
      </div>
    </div><!-- /.det-sidebar -->

  </div><!-- /.det-layout -->

  <!-- ── Jadwal Angsuran ── -->
  <div class="det-card">
    <div class="det-card-head teal">
      <h5><i class="bi bi-calendar3 teal"></i> Jadwal Angsuran</h5>
      <?php if(is_warga() && $pinjaman->status_pinjaman == 'aktif'): ?>
        <span style="font-size:.74rem;font-weight:700;color:var(--blue-500);background:var(--blue-50);padding:4px 10px;border-radius:20px;border:1px solid rgba(59,130,246,.2);">
          <i class="bi bi-phone me-1"></i>Bayar via Transfer Online
        </span>
      <?php elseif(!is_warga() && !empty($pending_payments)): ?>
        <span style="font-size:.74rem;font-weight:700;color:#92400e;background:var(--amber-100);padding:4px 10px;border-radius:20px;border:1px solid var(--amber-400);">
          <i class="bi bi-clock-history me-1"></i><?php echo count($pending_payments); ?> Menunggu Verifikasi
        </span>
      <?php endif; ?>
    </div>

    <!-- Desktop Table -->
    <div class="ang-table-wrap">
      <table class="ang-table">
        <thead>
          <tr>
            <th>Ke</th>
            <th>Jatuh Tempo</th>
            <th class="text-end">Nominal</th>
            <th class="text-center">Status</th>
            <th>Tgl Bayar</th>
            <th class="text-end">Total Bayar</th>
            <?php if(!is_warga()): ?><th>Petugas</th><?php endif; ?>
            <th class="text-center">Aksi</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach($angsuran as $a):
            $is_pending  = false; $pending_data = null;
            if(!empty($pending_payments)) {
              foreach($pending_payments as $pp) {
                if($pp->angsuran_id == $a->id) { $is_pending = true; $pending_data = $pp; break; }
              }
            }
            $is_telat = $a->status_bayar == 'belum' && $a->tanggal_jatuh_tempo < date('Y-m-d');
            $is_hari_ini = $a->status_bayar == 'belum' && $a->tanggal_jatuh_tempo == date('Y-m-d');
            $row_class = '';
            if($a->status_bayar == 'dibayar') $row_class = 'row-lunas';
            elseif($is_pending) $row_class = 'row-pending';
            elseif($is_telat)   $row_class = 'row-telat';
          ?>
          <tr class="<?php echo $row_class; ?>">
            <td><span class="badge-ke">Ke-<?php echo $a->angsuran_ke; ?></span></td>
            <td>
              <div><?php echo date('d M Y', strtotime($a->tanggal_jatuh_tempo)); ?></div>
              <?php if($is_telat): ?>
                <span class="badge-ang-status telat"><i class="bi bi-alarm-fill"></i> Terlambat</span>
              <?php elseif($is_hari_ini): ?>
                <span class="badge-ang-status hari-ini"><i class="bi bi-alarm"></i> Hari Ini</span>
              <?php endif; ?>
            </td>
            <td class="text-end" style="font-weight:700;">Rp <?php echo number_format($a->nominal_angsuran, 0, ',', '.'); ?></td>
            <td class="text-center">
              <?php if($a->status_bayar == 'dibayar'): ?>
                <span class="badge-ang-status lunas"><i class="bi bi-check-circle-fill"></i> Lunas</span>
              <?php elseif($is_pending): ?>
                <span class="badge-ang-status pending"><i class="bi bi-clock-history"></i> Pending</span>
                <div class="pending-time"><?php echo date('d M H:i', strtotime($pending_data->created_at)); ?></div>
              <?php elseif($is_telat): ?>
                <span class="badge-ang-status telat"><i class="bi bi-exclamation-circle-fill"></i> Telat</span>
              <?php else: ?>
                <span class="badge-ang-status belum"><i class="bi bi-clock"></i> Belum</span>
              <?php endif; ?>
            </td>
            <td style="font-size:.8rem;color:var(--slate-500);">
              <?php echo $a->tanggal_bayar ? date('d M Y', strtotime($a->tanggal_bayar)) : '-'; ?>
            </td>
            <td class="text-end">
              <?php if($is_pending): ?>
                <div style="font-weight:700;color:var(--amber-600);">Rp <?php echo number_format($pending_data->nominal_bayar, 0, ',', '.'); ?></div>
                <?php if(isset($pending_data->denda) && $pending_data->denda > 0): ?>
                <div class="denda-note">+Denda Rp <?php echo number_format($pending_data->denda, 0, ',', '.'); ?></div>
                <?php endif; ?>
              <?php elseif($a->total_bayar): ?>
                <div style="font-weight:700;">Rp <?php echo number_format($a->total_bayar, 0, ',', '.'); ?></div>
                <?php if(!empty($a->denda) && $a->denda > 0): ?>
                <div class="denda-note">+Denda Rp <?php echo number_format($a->denda, 0, ',', '.'); ?></div>
                <?php endif; ?>
              <?php else: ?>
                <span style="color:var(--slate-400);">—</span>
              <?php endif; ?>
            </td>
            <?php if(!is_warga()): ?>
            <td style="font-size:.78rem;color:var(--slate-500);">
              <?php if($is_pending): ?>
                <span style="background:var(--blue-50);color:var(--blue-500);border-radius:5px;padding:2px 7px;font-size:.7rem;font-weight:700;">
                  <i class="bi bi-upload me-1"></i>Online
                </span>
              <?php else: ?>
                <?php echo !empty($a->petugas_id) ? 'Ptgs #'.$a->petugas_id : '—'; ?>
              <?php endif; ?>
            </td>
            <?php endif; ?>
            <td class="text-center">
              <div class="ang-action-wrap">
                <?php if($a->status_bayar == 'dibayar'): ?>
                  <span class="btn-ang-sm lunas"><i class="bi bi-check-lg"></i> Lunas</span>
                <?php elseif($is_pending): ?>
                  <?php if(is_warga()): ?>
                    <span class="btn-ang-sm menunggu"><i class="bi bi-clock-history"></i> Menunggu</span>
                  <?php else: ?>
                    <a href="<?php echo base_url('pinjaman/verifikasi_pembayaran/'.$pending_data->id); ?>" class="btn-ang-sm verif">
                      <i class="bi bi-check-lg"></i> Verifikasi
                    </a>
                    <a href="<?php echo base_url('pinjaman/lihat_bukti/'.$pending_data->id); ?>" target="_blank" class="btn-ang-sm bukti">
                      <i class="bi bi-eye"></i> Bukti
                    </a>
                  <?php endif; ?>
                <?php else: ?>
                  <?php if(is_warga()): ?>
                    <a href="<?php echo base_url('pinjaman/bayar_angsuran/'.$a->id); ?>" class="btn-ang-sm bayar-w">
                      <i class="bi bi-credit-card"></i> Bayar Online
                    </a>
                  <?php else: ?>
                    <a href="<?php echo base_url('pinjaman/bayar_angsuran/'.$a->id); ?>" class="btn-ang-sm bayar-a">
                      <i class="bi bi-cash-coin"></i> Bayar Tunai
                    </a>
                  <?php endif; ?>
                <?php endif; ?>
              </div>
            </td>
          </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>

    <!-- Mobile Cards -->
    <div class="ang-mobile">
      <?php foreach($angsuran as $a):
        $is_pending  = false; $pending_data = null;
        if(!empty($pending_payments)) {
          foreach($pending_payments as $pp) {
            if($pp->angsuran_id == $a->id) { $is_pending = true; $pending_data = $pp; break; }
          }
        }
        $is_telat = $a->status_bayar == 'belum' && $a->tanggal_jatuh_tempo < date('Y-m-d');
        $is_hari_ini = $a->status_bayar == 'belum' && $a->tanggal_jatuh_tempo == date('Y-m-d');
        $m_class = $a->status_bayar == 'dibayar' ? 'lunas' : ($is_pending ? 'pending' : ($is_telat ? 'telat' : 'belum'));
      ?>
      <div class="ang-m-card <?php echo $m_class; ?>">
        <div class="ang-m-top">
          <span class="badge-ke">Ke-<?php echo $a->angsuran_ke; ?></span>
          <?php if($a->status_bayar == 'dibayar'): ?>
            <span class="badge-ang-status lunas"><i class="bi bi-check-circle-fill"></i> Lunas</span>
          <?php elseif($is_pending): ?>
            <span class="badge-ang-status pending"><i class="bi bi-clock-history"></i> Pending</span>
          <?php elseif($is_telat): ?>
            <span class="badge-ang-status telat"><i class="bi bi-alarm-fill"></i> Terlambat</span>
          <?php elseif($is_hari_ini): ?>
            <span class="badge-ang-status hari-ini"><i class="bi bi-alarm"></i> Hari Ini</span>
          <?php else: ?>
            <span class="badge-ang-status belum"><i class="bi bi-clock"></i> Belum</span>
          <?php endif; ?>
        </div>
        <div class="ang-m-row">
          <span class="r-l">Jatuh Tempo</span>
          <span class="r-v"><?php echo date('d M Y', strtotime($a->tanggal_jatuh_tempo)); ?></span>
        </div>
        <div class="ang-m-row">
          <span class="r-l">Nominal</span>
          <span class="r-v">Rp <?php echo number_format($a->nominal_angsuran, 0, ',', '.'); ?></span>
        </div>
        <?php if($a->status_bayar == 'dibayar' || $is_pending): ?>
        <div class="ang-m-row">
          <span class="r-l">Total Bayar</span>
          <span class="r-v" style="color:var(--green-600);">
            Rp <?php echo number_format($is_pending ? $pending_data->nominal_bayar : $a->total_bayar, 0, ',', '.'); ?>
          </span>
        </div>
        <?php endif; ?>
        <?php if($a->status_bayar == 'dibayar' && $a->tanggal_bayar): ?>
        <div class="ang-m-row">
          <span class="r-l">Tgl Bayar</span>
          <span class="r-v"><?php echo date('d M Y', strtotime($a->tanggal_bayar)); ?></span>
        </div>
        <?php endif; ?>
        <?php if($is_pending && !is_warga()): ?>
        <div class="ang-m-row">
          <span class="r-l">Waktu Upload</span>
          <span class="r-v" style="font-size:.73rem;"><?php echo date('d M H:i', strtotime($pending_data->created_at)); ?></span>
        </div>
        <?php endif; ?>
        <div class="ang-m-footer">
          <?php if($a->status_bayar == 'dibayar'): ?>
            <!-- no action -->
          <?php elseif($is_pending): ?>
            <?php if(is_warga()): ?>
              <span class="btn-ang-sm menunggu"><i class="bi bi-clock-history"></i> Menunggu</span>
            <?php else: ?>
              <a href="<?php echo base_url('pinjaman/verifikasi_pembayaran/'.$pending_data->id); ?>" class="btn-ang-sm verif">
                <i class="bi bi-check-lg"></i> Verifikasi
              </a>
              <a href="<?php echo base_url('pinjaman/lihat_bukti/'.$pending_data->id); ?>" target="_blank" class="btn-ang-sm bukti">
                <i class="bi bi-eye"></i> Bukti
              </a>
            <?php endif; ?>
          <?php else: ?>
            <?php if(is_warga()): ?>
              <a href="<?php echo base_url('pinjaman/bayar_angsuran/'.$a->id); ?>" class="btn-ang-sm bayar-w">
                <i class="bi bi-credit-card"></i> Bayar Online
              </a>
            <?php else: ?>
              <a href="<?php echo base_url('pinjaman/bayar_angsuran/'.$a->id); ?>" class="btn-ang-sm bayar-a">
                <i class="bi bi-cash-coin"></i> Bayar Tunai
              </a>
            <?php endif; ?>
          <?php endif; ?>
        </div>
      </div>
      <?php endforeach; ?>
    </div>

  </div><!-- /.det-card jadwal -->

  <!-- ── Riwayat Pembayaran ── -->
  <?php if(!empty($riwayat_bayar)): ?>
  <div class="det-card">
    <div class="det-card-head teal">
      <h5><i class="bi bi-clock-history teal"></i> Riwayat Pembayaran</h5>
      <span style="font-size:.74rem;font-weight:700;color:var(--teal-600);background:var(--teal-50);padding:3px 10px;border-radius:20px;border:1px solid rgba(13,148,136,.2);">
        <?php echo count($riwayat_bayar); ?> transaksi
      </span>
    </div>
    <div style="overflow-x:auto;">
      <table class="riw-table">
        <thead>
          <tr>
            <th width="46px">No</th>
            <th>Tanggal</th>
            <th>Angsuran Ke</th>
            <th class="text-end">Nominal</th>
            <th>Metode</th>
            <th>Petugas</th>
          </tr>
        </thead>
        <tbody>
          <?php $no = 1; foreach($riwayat_bayar as $r): ?>
          <tr>
            <td style="color:var(--slate-400);font-size:.78rem;"><?php echo $no++; ?></td>
            <td style="font-size:.8rem;">
              <?php echo date('d M Y', strtotime($r->tanggal_bayar)); ?>
              <div style="font-size:.72rem;color:var(--slate-400);"><?php echo date('H:i', strtotime($r->tanggal_bayar)); ?></div>
            </td>
            <td>
              <?php
              $ang_ke = '—';
              foreach($angsuran as $a) {
                if($a->id == $r->angsuran_id) { $ang_ke = $a->angsuran_ke; break; }
              }
              ?>
              <span class="badge-ke">Ke-<?php echo $ang_ke; ?></span>
            </td>
            <td class="text-end" style="font-weight:800;color:var(--teal-700);">
              Rp <?php echo number_format($r->nominal_bayar, 0, ',', '.'); ?>
            </td>
            <td style="font-size:.8rem;text-transform:capitalize;">
              <?php echo $r->metode ?: 'Tunai'; ?>
            </td>
            <td style="font-size:.8rem;color:var(--slate-500);">
              <?php echo htmlspecialchars($r->petugas ?? '-'); ?>
            </td>
          </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>
  </div>
  <?php endif; ?>

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