<!-- views/pinjaman/laporan.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-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-50:   #fff5f5;
  --blue-500: #3b82f6;
  --blue-50:  #eff6ff;
  --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);
}

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

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

.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; white-space: nowrap;
}
.btn-back:hover { background: var(--slate-200); color: var(--slate-800); }

/* ── Filter Card ── */
.lap-filter-card {
  background: #fff; border-radius: 14px;
  border: 1px solid var(--slate-200); box-shadow: var(--card-shadow);
  padding: 18px 20px; margin-bottom: 22px;
  animation: fadeUp .3s ease both;
}
.filter-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.filter-group { display: flex; flex-direction: column; gap: 5px; min-width: 130px; }
.filter-group label { font-size: .76rem; font-weight: 700; color: var(--slate-500); text-transform: uppercase; letter-spacing: .04em; }
.f-select {
  border: 1.5px solid var(--slate-200); border-radius: 8px;
  padding: 8px 32px 8px 12px; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .84rem; color: var(--slate-900); outline: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  transition: border-color .15s;
}
.f-select:focus { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(20,184,166,.1); }
.btn-filter {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--teal-600), var(--teal-500));
  color: #fff; border: none; border-radius: 8px;
  padding: 9px 18px; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(13,148,136,.22); transition: all .15s;
}
.btn-filter:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(13,148,136,.32); }
.btn-print {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green-50); color: var(--green-600);
  border: 1.5px solid #86efac; border-radius: 8px;
  padding: 9px 18px; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: all .15s;
}
.btn-print:hover { background: var(--green-500); color: #fff; border-color: var(--green-500); }

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

.lap-stat-card {
  border-radius: 14px; padding: 20px 18px;
  position: relative; overflow: hidden; color: #fff;
  transition: transform .2s, box-shadow .2s;
  animation: fadeUp .35s ease both;
}
.lap-stat-card:nth-child(1) { animation-delay: .05s; }
.lap-stat-card:nth-child(2) { animation-delay: .10s; }
.lap-stat-card:nth-child(3) { animation-delay: .15s; }
.lap-stat-card:nth-child(4) { animation-delay: .20s; }
.lap-stat-card:hover { transform: translateY(-3px); }
.lap-stat-card::before {
  content: ''; position: absolute; top: -26px; right: -26px;
  width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.1);
}
.lap-stat-card::after {
  content: ''; position: absolute; bottom: -40px; right: 35px;
  width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.06);
}
.lap-stat-card .sc-label {
  font-size: .72rem; font-weight: 600; opacity: .85;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px; position: relative; z-index: 1;
}
.lap-stat-card .sc-value {
  font-size: 1.4rem; font-weight: 800; line-height: 1.2;
  position: relative; z-index: 1;
}
.lap-stat-card .sc-value small { font-size: .58em; font-weight: 600; opacity: .8; }
.lap-stat-card .sc-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.25rem; z-index: 1;
}
.sc-teal   { background: linear-gradient(135deg, var(--teal-800), var(--teal-600), var(--teal-400)); box-shadow: 0 8px 24px rgba(13,148,136,.28); }
.sc-green  { background: linear-gradient(135deg, #059669, #10b981, #34d399); box-shadow: 0 8px 24px rgba(16,185,129,.28); }
.sc-blue   { background: linear-gradient(135deg, #1d4ed8, #3b82f6, #60a5fa); box-shadow: 0 8px 24px rgba(59,130,246,.28); }
.sc-amber  { background: linear-gradient(135deg, #b45309, #d97706, #f59e0b); box-shadow: 0 8px 24px rgba(245,158,11,.28); }

/* ── Content Grid ── */
.lap-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px; margin-bottom: 22px;
}
.lap-content-grid.full { grid-template-columns: 1fr; }

/* ── Card ── */
.lap-card {
  background: #fff; border-radius: 14px;
  border: 1px solid var(--slate-200); box-shadow: var(--card-shadow);
  overflow: hidden;
  animation: fadeUp .4s .2s ease both;
}
.lap-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; border-bottom: 1px solid var(--slate-100);
  gap: 10px;
}
.lap-card-head.teal  { background: linear-gradient(90deg, var(--teal-50), #fff); border-bottom-color: rgba(13,148,136,.1); }
.lap-card-head.green { background: linear-gradient(90deg, var(--green-50), #fff); border-bottom-color: rgba(16,185,129,.1); }
.lap-card-head.red   { background: linear-gradient(90deg, var(--red-50), #fff); border-bottom-color: rgba(239,68,68,.1); }
.lap-card-head.amber { background: linear-gradient(90deg, var(--amber-50), #fff); border-bottom-color: rgba(245,158,11,.1); }

.lap-card-head h5 {
  margin: 0; font-size: .95rem; font-weight: 800;
  display: flex; align-items: center; gap: 8px;
}
.lap-card-head h5.green { color: var(--green-600); }
.lap-card-head h5.red   { color: var(--red-500); }
.lap-card-head h5.teal  { color: var(--teal-700); }
.lap-card-head h5.amber { color: var(--amber-600); }
.lap-card-head h5.info  { color: var(--blue-500); }

.count-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 20px;
  font-size: .73rem; font-weight: 800;
}
.count-pill.green  { background: var(--green-100); color: var(--green-600); }
.count-pill.red    { background: #fee2e2; color: var(--red-500); }
.count-pill.teal   { background: var(--teal-50); color: var(--teal-700); }
.count-pill.amber  { background: var(--amber-100); color: var(--amber-600); }

.lap-card-body { padding: 16px 20px; }

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

.badge-kode {
  font-family: monospace; font-size: .75rem; font-weight: 700;
  background: var(--slate-100); color: var(--slate-600);
  padding: 2px 7px; border-radius: 5px;
}
.badge-kode.green { background: var(--green-100); color: var(--green-600); }
.badge-kode.red   { background: #fee2e2; color: var(--red-500); }

/* ── Angsuran List Items ── */
.angsuran-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 14px; border: 1px solid var(--slate-200);
  border-radius: 10px; margin-bottom: 9px; transition: all .15s;
}
.angsuran-item:last-child { margin-bottom: 0; }
.angsuran-item:hover { border-color: var(--teal-400); background: var(--teal-50); }
.angsuran-item.tunggakan { border-color: #fca5a5; background: var(--red-50); }
.angsuran-item.tunggakan:hover { background: #fee2e2; }
.angsuran-item.lunas { border-color: #86efac; background: var(--green-50); }

.ai-left .ai-kode { font-family: monospace; font-size: .82rem; font-weight: 700; color: var(--teal-700); }
.ai-left .ai-kode.red { color: var(--red-500); }
.ai-left .ai-meta { font-size: .74rem; color: var(--slate-400); margin-top: 2px; }
.ai-left .ai-meta.red { color: var(--red-400); }
.ai-right { text-align: right; }
.ai-right .ai-amount { font-size: .9rem; font-weight: 800; color: var(--teal-700); }
.ai-right .ai-amount.red { color: var(--red-500); }

/* Status badges */
.badge-status {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 20px;
  font-size: .7rem; font-weight: 700; margin-top: 4px;
}
.badge-status.lunas   { background: var(--green-100); color: var(--green-600); }
.badge-status.belum   { background: var(--amber-100); color: #92400e; }
.badge-status.aktif   { background: var(--amber-100); color: #92400e; }
.badge-status.sudah   { background: var(--green-100); color: var(--green-600); }

/* ── Riwayat Warga Table – status + sisa ── */
.sisa-text { font-size: .74rem; color: var(--amber-600); margin-top: 2px; font-weight: 600; }

/* ── Action button ── */
.btn-detail-sm {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--teal-50); color: var(--teal-700);
  border: 1px solid rgba(13,148,136,.25); border-radius: 6px;
  padding: 5px 11px; font-size: .76rem; font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-decoration: none; transition: all .15s;
}
.btn-detail-sm:hover { background: var(--teal-600); color: #fff; border-color: transparent; }
.btn-bayar-sm {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--red-500); color: #fff; border: none; border-radius: 6px;
  padding: 5px 11px; font-size: .76rem; font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif; text-decoration: none;
  transition: all .15s; cursor: pointer;
}
.btn-bayar-sm:hover { background: var(--red-600); color: #fff; }
.btn-ajukan {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--teal-600), var(--teal-500));
  color: #fff; border: none; border-radius: 8px;
  padding: 9px 18px; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 4px 12px rgba(13,148,136,.25); transition: all .15s;
}
.btn-ajukan:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 6px 18px rgba(13,148,136,.35); }

/* ── Mobile Cards ── */
.lap-m-table { display: none; padding: 12px 14px; }
.lap-m-card {
  border: 1px solid var(--slate-200); border-radius: 11px;
  padding: 12px 14px; margin-bottom: 9px;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.05);
  position: relative; overflow: hidden;
}
.lap-m-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 3px 0 0 3px; background: var(--mc, var(--teal-400));
}
.lap-m-card.lunas   { --mc: var(--green-500); }
.lap-m-card.aktif   { --mc: var(--amber-500); }
.lap-m-card.tungg   { --mc: var(--red-500); }
.lap-m-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.lap-m-kode { font-family: monospace; font-size: .82rem; font-weight: 700; }
.lap-m-row { display: flex; justify-content: space-between; font-size: .78rem; margin-bottom: 4px; }
.lap-m-row .r-l { color: var(--slate-400); }
.lap-m-row .r-v { font-weight: 700; }
.lap-m-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; flex-wrap: wrap; gap: 6px; }

/* ── Empty State ── */
.lap-empty {
  padding: 40px 20px; text-align: center; color: var(--slate-400);
}
.lap-empty .ei {
  width: 58px; height: 58px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin: 0 auto 12px;
}
.lap-empty .ei.teal  { background: var(--teal-50); color: var(--teal-400); }
.lap-empty .ei.green { background: var(--green-100); color: var(--green-500); }
.lap-empty p { font-size: .82rem; margin: 6px 0 0; }

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

/* ══════════ PRINT ══════════ */
@media print {
  .lap-filter-card, .btn-back, .btn-print, .btn-detail-sm, .btn-bayar-sm, .btn-ajukan { display: none !important; }
  .lap-card { border: 1px solid #dee2e6 !important; box-shadow: none !important; }
  .lap-stat-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 991px) {
  .lap-summary-grid, .lap-summary-grid.cols3 { grid-template-columns: repeat(2, 1fr); }
  .lap-content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .lap-table-wrap { display: none; }
  .lap-m-table    { display: block; }
  .lap-summary-grid, .lap-summary-grid.cols3 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .lap-stat-card .sc-value { font-size: 1.1rem; }
  .lap-stat-card .sc-icon  { width: 40px; height: 40px; font-size: 1.05rem; right: 12px; }
  .filter-form { flex-direction: column; }
  .filter-group { width: 100%; }
  .btn-filter, .btn-print { width: 100%; justify-content: center; }
  .lap-page-header h4 .page-title { display: none; }
}
@media (max-width: 500px) {
  .lap-summary-grid, .lap-summary-grid.cols3 { grid-template-columns: 1fr 1fr; }
}
</style>

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

  <!-- ── Page Header ── -->
  <div class="lap-page-header">
    <div>
      <h4>
        <div class="head-icon"><i class="bi bi-graph-up"></i></div>
        <span class="page-title"><?php echo is_warga() ? 'Laporan Pinjaman Saya' : 'Laporan Pinjaman'; ?></span>
      </h4>
      <div class="lap-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>
        <span class="current">Laporan</span>
      </div>
    </div>
    <a href="<?php echo base_url('pinjaman'); ?>" class="btn-back">
      <i class="bi bi-arrow-left"></i> Kembali
    </a>
  </div>

  <!-- ── Filter (Admin) ── -->
  <?php if(!is_warga()): ?>
  <div class="lap-filter-card">
    <form method="get" action="<?php echo base_url('pinjaman/laporan'); ?>" class="filter-form">
      <div class="filter-group">
        <label>Bulan</label>
        <select name="bulan" class="f-select">
          <?php for($i = 1; $i <= 12; $i++): ?>
          <option value="<?php echo sprintf('%02d', $i); ?>" <?php echo $bulan == sprintf('%02d', $i) ? 'selected' : ''; ?>>
            <?php echo date('F', mktime(0,0,0,$i,1)); ?>
          </option>
          <?php endfor; ?>
        </select>
      </div>
      <div class="filter-group">
        <label>Tahun</label>
        <select name="tahun" class="f-select">
          <?php for($i = date('Y') - 2; $i <= date('Y') + 1; $i++): ?>
          <option value="<?php echo $i; ?>" <?php echo $tahun == $i ? 'selected' : ''; ?>><?php echo $i; ?></option>
          <?php endfor; ?>
        </select>
      </div>
      <button type="submit" class="btn-filter"><i class="bi bi-search"></i> Tampilkan</button>
      <button type="button" onclick="window.print()" class="btn-print"><i class="bi bi-printer"></i> Cetak</button>
    </form>
  </div>
  <?php endif; ?>

  <!-- ══════════════════════════════════════════
       ADMIN VIEW
  ══════════════════════════════════════════ -->
  <?php if(!is_warga()): ?>

  <!-- Summary Cards Admin -->
  <div class="lap-summary-grid">
    <div class="lap-stat-card sc-teal">
      <div class="sc-label"><i class="bi bi-wallet2 me-1"></i>Total Pinjaman</div>
      <div class="sc-value"><?php echo $statistik->total_pinjaman ?: 0; ?> <small>pinjaman</small></div>
      <div class="sc-icon"><i class="bi bi-wallet2"></i></div>
    </div>
    <div class="lap-stat-card sc-green">
      <div class="sc-label"><i class="bi bi-cash-stack me-1"></i>Total Disetujui</div>
      <div class="sc-value"><small>Rp </small><?php echo number_format($statistik->total_disetujui ?: 0, 0, ',', '.'); ?></div>
      <div class="sc-icon"><i class="bi bi-cash-stack"></i></div>
    </div>
    <div class="lap-stat-card sc-blue">
      <div class="sc-label"><i class="bi bi-check-circle me-1"></i>Total Terbayar</div>
      <div class="sc-value"><small>Rp </small><?php echo number_format($statistik->total_terbayar ?: 0, 0, ',', '.'); ?></div>
      <div class="sc-icon"><i class="bi bi-check-circle-fill"></i></div>
    </div>
    <div class="lap-stat-card sc-amber">
      <div class="sc-label"><i class="bi bi-hourglass-split me-1"></i>Sisa Piutang</div>
      <div class="sc-value"><small>Rp </small><?php echo number_format($statistik->sisa_piutang ?: 0, 0, ',', '.'); ?></div>
      <div class="sc-icon"><i class="bi bi-hourglass-split"></i></div>
    </div>
  </div>

  <!-- Lunas + Tunggakan -->
  <div class="lap-content-grid">

    <!-- Pinjaman Lunas -->
    <div class="lap-card">
      <div class="lap-card-head green">
        <h5 class="green"><i class="bi bi-check-circle-fill"></i> Pinjaman Lunas</h5>
        <span class="count-pill green"><?php echo count($pinjaman_lunas); ?> data</span>
      </div>

      <?php if(empty($pinjaman_lunas)): ?>
      <div class="lap-empty">
        <div class="ei green"><i class="bi bi-inbox"></i></div>
        <p>Tidak ada pinjaman lunas di periode ini</p>
      </div>

      <?php else: ?>
      <!-- Desktop -->
      <div class="lap-table-wrap">
        <table class="lap-table">
          <thead>
            <tr>
              <th>Kode</th>
              <th>Nama</th>
              <th class="text-end">Nominal</th>
              <th>Tgl Lunas</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach($pinjaman_lunas as $pl): ?>
            <tr>
              <td><span class="badge-kode green"><?php echo htmlspecialchars($pl->kode_pinjaman); ?></span></td>
              <td style="font-weight:600;"><?php echo htmlspecialchars($pl->nama_lengkap); ?></td>
              <td class="text-end" style="font-weight:700;color:var(--green-600);">Rp <?php echo number_format($pl->total_pinjaman, 0, ',', '.'); ?></td>
              <td style="font-size:.8rem;color:var(--slate-500);"><?php echo date('d/m/Y', strtotime($pl->updated_at)); ?></td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      </div>
      <!-- Mobile -->
      <div class="lap-m-table">
        <?php foreach($pinjaman_lunas as $pl): ?>
        <div class="lap-m-card lunas">
          <div class="lap-m-top">
            <span class="lap-m-kode" style="color:var(--green-600);"><?php echo htmlspecialchars($pl->kode_pinjaman); ?></span>
            <span class="badge-status lunas"><i class="bi bi-check-circle-fill"></i> Lunas</span>
          </div>
          <div class="lap-m-row"><span class="r-l">Nama</span><span class="r-v"><?php echo htmlspecialchars($pl->nama_lengkap); ?></span></div>
          <div class="lap-m-row">
            <span class="r-l">Nominal</span>
            <span class="r-v" style="color:var(--green-600);">Rp <?php echo number_format($pl->total_pinjaman, 0, ',', '.'); ?></span>
          </div>
          <div class="lap-m-row"><span class="r-l">Tgl Lunas</span><span class="r-v"><?php echo date('d/m/Y', strtotime($pl->updated_at)); ?></span></div>
        </div>
        <?php endforeach; ?>
      </div>
      <?php endif; ?>
    </div>

    <!-- Tunggakan -->
    <div class="lap-card">
      <div class="lap-card-head red">
        <h5 class="red"><i class="bi bi-exclamation-triangle-fill"></i> Tunggakan</h5>
        <span class="count-pill red"><?php echo count($tunggakan); ?> data</span>
      </div>

      <?php if(empty($tunggakan)): ?>
      <div class="lap-empty">
        <div class="ei green"><i class="bi bi-shield-check"></i></div>
        <p>Tidak ada tunggakan saat ini</p>
      </div>

      <?php else: ?>
      <!-- Desktop -->
      <div class="lap-table-wrap">
        <table class="lap-table">
          <thead>
            <tr>
              <th>Kode</th>
              <th>Nama</th>
              <th>Angsuran</th>
              <th>Jatuh Tempo</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach($tunggakan as $t): ?>
            <tr>
              <td><span class="badge-kode red"><?php echo htmlspecialchars($t->kode_pinjaman); ?></span></td>
              <td style="font-weight:600;"><?php echo htmlspecialchars($t->nama_lengkap); ?></td>
              <td><span style="font-size:.8rem;font-weight:600;color:var(--slate-500);">Ke-<?php echo $t->angsuran_ke; ?></span></td>
              <td style="font-weight:700;color:var(--red-500);font-size:.8rem;"><?php echo date('d/m/Y', strtotime($t->tanggal_jatuh_tempo)); ?></td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      </div>
      <!-- Mobile -->
      <div class="lap-m-table">
        <?php foreach($tunggakan as $t): ?>
        <div class="lap-m-card tungg">
          <div class="lap-m-top">
            <span class="lap-m-kode" style="color:var(--red-500);"><?php echo htmlspecialchars($t->kode_pinjaman); ?></span>
            <span class="badge-status belum"><i class="bi bi-clock"></i> Tunggakan</span>
          </div>
          <div class="lap-m-row"><span class="r-l">Nama</span><span class="r-v"><?php echo htmlspecialchars($t->nama_lengkap); ?></span></div>
          <div class="lap-m-row"><span class="r-l">Angsuran</span><span class="r-v">Ke-<?php echo $t->angsuran_ke; ?></span></div>
          <div class="lap-m-row">
            <span class="r-l">Jatuh Tempo</span>
            <span class="r-v" style="color:var(--red-500);"><?php echo date('d/m/Y', strtotime($t->tanggal_jatuh_tempo)); ?></span>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
      <?php endif; ?>
    </div>

  </div><!-- /.lap-content-grid admin -->

  <!-- ══════════════════════════════════════════
       WARGA VIEW
  ══════════════════════════════════════════ -->
  <?php else: ?>

  <!-- Summary Cards Warga -->
  <div class="lap-summary-grid cols3">
    <div class="lap-stat-card sc-teal">
      <div class="sc-label"><i class="bi bi-wallet2 me-1"></i>Total Pinjaman</div>
      <div class="sc-value"><?php echo count($pinjaman_saya); ?> <small>pinjaman</small></div>
      <div class="sc-icon"><i class="bi bi-wallet2"></i></div>
    </div>
    <div class="lap-stat-card sc-green">
      <div class="sc-label"><i class="bi bi-check-circle me-1"></i>Pinjaman Lunas</div>
      <div class="sc-value"><?php echo $pinjaman_lunas_count; ?> <small>pinjaman</small></div>
      <div class="sc-icon"><i class="bi bi-check-circle-fill"></i></div>
    </div>
    <div class="lap-stat-card sc-amber">
      <div class="sc-label"><i class="bi bi-clock-history me-1"></i>Pinjaman Aktif</div>
      <div class="sc-value"><?php echo $pinjaman_aktif_count; ?> <small>pinjaman</small></div>
      <div class="sc-icon"><i class="bi bi-clock-history"></i></div>
    </div>
  </div>

  <!-- Riwayat Pinjaman Warga -->
  <div class="lap-card" style="margin-bottom:18px;">
    <div class="lap-card-head teal">
      <h5 class="teal"><i class="bi bi-clock-history"></i> Riwayat Pinjaman Saya</h5>
      <?php if(!empty($pinjaman_saya)): ?>
      <span class="count-pill teal"><?php echo count($pinjaman_saya); ?> data</span>
      <?php endif; ?>
    </div>

    <?php if(empty($pinjaman_saya)): ?>
    <div class="lap-empty" style="padding:60px 20px;">
      <div class="ei teal"><i class="bi bi-inbox"></i></div>
      <p style="font-size:.88rem;font-weight:600;color:var(--slate-600);">Belum Ada Pinjaman</p>
      <p>Anda belum memiliki riwayat pinjaman.</p>
      <a href="<?php echo base_url('pinjaman/ajukan'); ?>" class="btn-ajukan" style="margin-top:12px;display:inline-flex;">
        <i class="bi bi-plus-circle-fill"></i> Ajukan Pinjaman
      </a>
    </div>

    <?php else: ?>
    <!-- Desktop -->
    <div class="lap-table-wrap">
      <table class="lap-table">
        <thead>
          <tr>
            <th>Kode Pinjaman</th>
            <th>Tanggal</th>
            <th class="text-end">Nominal</th>
            <th class="text-end">Total Pinjaman</th>
            <th>Status</th>
            <th class="text-center">Aksi</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach($pinjaman_saya as $p): ?>
          <tr>
            <td><span class="badge-kode"><?php echo htmlspecialchars($p->kode_pinjaman); ?></span></td>
            <td style="font-size:.8rem;color:var(--slate-500);"><?php echo date('d M Y', strtotime($p->tanggal_pencairan)); ?></td>
            <td class="text-end" style="font-weight:700;color:var(--teal-700);">Rp <?php echo number_format($p->nominal_disetujui, 0, ',', '.'); ?></td>
            <td class="text-end" style="font-weight:700;color:var(--red-500);">Rp <?php echo number_format($p->total_pinjaman, 0, ',', '.'); ?></td>
            <td>
              <?php if($p->status_pinjaman == 'lunas'): ?>
                <span class="badge-status lunas"><i class="bi bi-check-circle-fill"></i> Lunas</span>
              <?php else: ?>
                <span class="badge-status aktif"><i class="bi bi-activity"></i> Aktif</span>
                <div class="sisa-text">Sisa: Rp <?php echo number_format($p->sisa_pinjaman, 0, ',', '.'); ?></div>
              <?php endif; ?>
            </td>
            <td class="text-center">
              <a href="<?php echo base_url('pinjaman/detail/'.$p->id); ?>" class="btn-detail-sm">
                <i class="bi bi-eye"></i> Detail
              </a>
            </td>
          </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>
    <!-- Mobile -->
    <div class="lap-m-table">
      <?php foreach($pinjaman_saya as $p): ?>
      <div class="lap-m-card <?php echo $p->status_pinjaman == 'lunas' ? 'lunas' : 'aktif'; ?>">
        <div class="lap-m-top">
          <span class="lap-m-kode"><?php echo htmlspecialchars($p->kode_pinjaman); ?></span>
          <?php if($p->status_pinjaman == 'lunas'): ?>
            <span class="badge-status lunas"><i class="bi bi-check-circle-fill"></i> Lunas</span>
          <?php else: ?>
            <span class="badge-status aktif"><i class="bi bi-activity"></i> Aktif</span>
          <?php endif; ?>
        </div>
        <div class="lap-m-row"><span class="r-l">Tanggal</span><span class="r-v"><?php echo date('d M Y', strtotime($p->tanggal_pencairan)); ?></span></div>
        <div class="lap-m-row">
          <span class="r-l">Nominal</span>
          <span class="r-v" style="color:var(--teal-700);">Rp <?php echo number_format($p->nominal_disetujui, 0, ',', '.'); ?></span>
        </div>
        <div class="lap-m-row">
          <span class="r-l">Total</span>
          <span class="r-v" style="color:var(--red-500);">Rp <?php echo number_format($p->total_pinjaman, 0, ',', '.'); ?></span>
        </div>
        <?php if($p->status_pinjaman != 'lunas'): ?>
        <div class="lap-m-row">
          <span class="r-l">Sisa</span>
          <span class="r-v" style="color:var(--amber-600);">Rp <?php echo number_format($p->sisa_pinjaman, 0, ',', '.'); ?></span>
        </div>
        <?php endif; ?>
        <div class="lap-m-footer">
          <span></span>
          <a href="<?php echo base_url('pinjaman/detail/'.$p->id); ?>" class="btn-detail-sm"><i class="bi bi-eye"></i> Detail</a>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
    <?php endif; ?>
  </div>

  <!-- Angsuran Bulan Ini + Tunggakan Saya -->
  <?php if(!empty($pinjaman_saya)): ?>
  <div class="lap-content-grid">

    <!-- Jadwal Angsuran Bulan Ini -->
    <div class="lap-card">
      <div class="lap-card-head teal">
        <h5 class="info"><i class="bi bi-calendar-check-fill"></i> Angsuran Bulan Ini</h5>
      </div>
      <div class="lap-card-body">
        <?php if(empty($angsuran_bulan_ini)): ?>
        <div class="lap-empty" style="padding:30px 0;">
          <div class="ei green"><i class="bi bi-check-circle"></i></div>
          <p>Tidak ada angsuran bulan ini</p>
        </div>
        <?php else: ?>
          <?php foreach($angsuran_bulan_ini as $a): ?>
          <div class="angsuran-item <?php echo $a->status_bayar == 'sudah' ? 'lunas' : ''; ?>">
            <div class="ai-left">
              <div class="ai-kode"><?php echo htmlspecialchars($a->kode_pinjaman); ?></div>
              <div class="ai-meta">Angsuran ke-<?php echo $a->angsuran_ke; ?></div>
            </div>
            <div class="ai-right">
              <div class="ai-amount">Rp <?php echo number_format($a->nominal_angsuran, 0, ',', '.'); ?></div>
              <?php if($a->status_bayar == 'belum'): ?>
                <span class="badge-status belum"><i class="bi bi-clock"></i> Belum Bayar</span>
              <?php else: ?>
                <span class="badge-status sudah"><i class="bi bi-check-circle-fill"></i> Sudah Bayar</span>
              <?php endif; ?>
            </div>
          </div>
          <?php endforeach; ?>
        <?php endif; ?>
      </div>
    </div>

    <!-- Tunggakan Saya -->
    <div class="lap-card">
      <div class="lap-card-head red">
        <h5 class="red"><i class="bi bi-exclamation-circle-fill"></i> Tunggakan Saya</h5>
        <?php if(!empty($tunggakan_saya)): ?>
        <span class="count-pill red"><?php echo count($tunggakan_saya); ?></span>
        <?php endif; ?>
      </div>
      <div class="lap-card-body">
        <?php if(empty($tunggakan_saya)): ?>
        <div class="lap-empty" style="padding:30px 0;">
          <div class="ei green"><i class="bi bi-shield-check"></i></div>
          <p>Tidak ada tunggakan. Bagus!</p>
        </div>
        <?php else: ?>
          <?php foreach($tunggakan_saya as $t): ?>
          <div class="angsuran-item tunggakan">
            <div class="ai-left">
              <div class="ai-kode red"><?php echo htmlspecialchars($t->kode_pinjaman); ?></div>
              <div class="ai-meta">Angsuran ke-<?php echo $t->angsuran_ke; ?></div>
              <div class="ai-meta red">Jatuh: <?php echo date('d M Y', strtotime($t->tanggal_jatuh_tempo)); ?></div>
            </div>
            <div class="ai-right">
              <div class="ai-amount red">Rp <?php echo number_format($t->nominal_angsuran, 0, ',', '.'); ?></div>
              <a href="<?php echo base_url('pinjaman/bayar_angsuran/'.$t->id); ?>" class="btn-bayar-sm" style="margin-top:5px;">
                <i class="bi bi-cash-coin"></i> Bayar
              </a>
            </div>
          </div>
          <?php endforeach; ?>
        <?php endif; ?>
      </div>
    </div>

  </div>
  <?php endif; ?>

  <?php endif; // end warga view ?>

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