<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --teal:#20c997;--teal-dark:#0fa37f;--teal-light:#d1fae5;
  --red:#ef4444;
  --g50:#f9fafb;--g100:#f3f4f6;--g200:#e5e7eb;
  --g400:#9ca3af;--g500:#6b7280;--g700:#374151;--g900:#111827;
  --rsm:8px;--rmd:12px;--rlg:14px;
}

/* ===== DESKTOP SHELL ===== */
.shell{
  display:grid;
  grid-template-rows:52px 1fr;
  grid-template-columns:250px 1fr 270px;
  height:calc(100vh - 60px); /* sesuaikan dengan tinggi navbar */
  font-family:system-ui,sans-serif;
  font-size:13px;
  color:var(--g900);
  background:var(--g50);
}
.topbar{grid-column:1/-1;grid-row:1;background:#fff;border-bottom:1.5px solid var(--g200);display:flex;align-items:center;gap:12px;padding:0 18px;flex-shrink:0}
.topbar-icon{width:30px;height:30px;background:var(--teal-light);border-radius:var(--rmd);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.topbar-icon i{font-size:.82rem;color:var(--teal-dark)}
.topbar-title{font-size:.9rem;font-weight:800;color:var(--g900)}
.topbar-sub{font-size:.7rem;color:var(--g500);margin-left:5px}
.topbar-badge{margin-left:auto;border-radius:999px;font-size:.66rem;font-weight:700;padding:3px 10px;white-space:nowrap}

.col-left{grid-column:1;grid-row:2;background:#fff;border-right:1.5px solid var(--g200);display:flex;flex-direction:column;overflow:hidden;min-height:0}
.col-mid{grid-column:2;grid-row:2;padding:12px;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.col-right{grid-column:3;grid-row:2;background:#fff;border-left:1.5px solid var(--g200);display:flex;flex-direction:column;overflow:hidden;min-height:0}

.panel-head{padding:9px 14px;border-bottom:1.5px solid var(--g100);background:var(--g50);display:flex;align-items:center;gap:6px;flex-shrink:0}
.panel-head i{font-size:.78rem;color:var(--teal)}
.section-label{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--g500)}
.panel-body{padding:12px 14px;flex:1;display:flex;flex-direction:column;gap:10px;overflow:hidden;min-height:0}

.tagihan-name{font-weight:800;font-size:.9rem;color:var(--g900);line-height:1.3}
.tagihan-meta{font-size:.7rem;color:var(--g500);margin-top:2px}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;flex-shrink:0}
.stat-box{background:var(--g50);border-radius:var(--rsm);border:1px solid var(--g100);padding:8px 10px}
.stat-box .lbl{font-size:.62rem;color:var(--g500);margin-bottom:2px;text-transform:uppercase;letter-spacing:.04em}
.stat-box .val{font-size:.83rem;font-weight:800}
.val-green{color:#16a34a}.val-red{color:#dc2626}

.prog-track{background:var(--g100);border-radius:999px;height:7px;overflow:hidden;flex-shrink:0}
.prog-fill{background:var(--teal);height:100%;border-radius:999px}
.prog-lbl{font-size:.64rem;color:var(--g500);text-align:center;margin-top:3px}

.info-box{background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:var(--rmd);padding:9px 12px;font-size:.69rem;color:#1e40af;line-height:1.6;margin-top:auto;flex-shrink:0}
.info-box .info-ttl{font-weight:700;margin-bottom:4px;font-size:.7rem}
.info-box ul{padding-left:13px}
.info-box li+li{margin-top:2px}
.status-pill{display:inline-flex;align-items:center;gap:3px;background:#fee2e2;color:#991b1b;border-radius:999px;padding:1px 6px;font-size:.62rem;font-weight:700}

.form-inner{background:#fff;border-radius:var(--rlg);border:1.5px solid var(--g100);overflow:hidden;flex:1;display:flex;flex-direction:column;min-height:0}
.field-grp{display:flex;flex-direction:column;gap:3px;flex-shrink:0}
.field-lbl{font-size:.7rem;font-weight:700;color:var(--g700)}
.field-lbl .req{color:var(--red);margin-left:2px}
.fc{border:1.5px solid var(--g200);border-radius:var(--rsm);font-size:.8rem;padding:6px 9px;color:var(--g900);background:#fff;width:100%;outline:none;transition:border-color .2s,box-shadow .2s;font-family:inherit}
.fc:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(32,201,151,.13)}
textarea.fc{resize:none;height:52px}
.fc-hint{font-size:.62rem;color:var(--g400);margin-top:2px}
.nom-wrap{display:flex}
.nom-pre{background:var(--g100);border:1.5px solid var(--g200);border-right:none;border-radius:var(--rsm) 0 0 var(--rsm);padding:0 9px;display:flex;align-items:center;font-size:.76rem;font-weight:700;color:var(--g500);white-space:nowrap}
.nom-wrap .fc{border-radius:0 var(--rsm) var(--rsm) 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px;flex-shrink:0}
.wrap-bukti{display:none;flex-direction:column;gap:3px;flex-shrink:0}

.action-bar{padding:10px 14px;border-top:1.5px solid var(--g100);background:var(--g50);display:flex;gap:7px;flex-shrink:0;align-items:center}
.btn-back{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:var(--rsm);font-size:.78rem;font-weight:700;border:1.5px solid var(--g200);background:#fff;color:var(--g500);text-decoration:none;cursor:pointer;transition:all .15s;white-space:nowrap}
.btn-back:hover{border-color:var(--g400);color:var(--g700)}
.btn-save{display:inline-flex;align-items:center;gap:5px;padding:7px 16px;border-radius:var(--rsm);font-size:.8rem;font-weight:700;border:none;background:var(--teal);color:#fff;cursor:pointer;margin-left:auto;box-shadow:0 2px 8px rgba(32,201,151,.28);transition:background .15s,transform .1s;white-space:nowrap}
.btn-save:hover{background:var(--teal-dark);transform:translateY(-1px)}

.hist-list{flex:1;overflow-y:auto;padding:4px 14px 0;min-height:0}
.hist-list::-webkit-scrollbar{width:3px}
.hist-list::-webkit-scrollbar-thumb{background:var(--g200);border-radius:4px}
.hist-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--g100)}
.hist-row:last-child{border-bottom:none}
.badge-ke{background:var(--g100);color:var(--g700);border-radius:999px;font-size:.61rem;font-weight:700;padding:2px 6px;margin-right:4px}
.badge-wait{background:#fef3c7;color:#92400e;border-radius:999px;font-size:.61rem;font-weight:700;padding:2px 6px;margin-left:3px}
.hist-nom{font-weight:700;font-size:.8rem;color:#16a34a;white-space:nowrap}
.hist-meta{font-size:.67rem;color:var(--g500);margin-top:2px}

/* ===== MOBILE ===== */
.mobile-shell{display:none;flex-direction:column;font-family:system-ui,sans-serif;font-size:13px;color:var(--g900);background:var(--g50);min-height:100vh}
.mob-topbar{background:#fff;border-bottom:1.5px solid var(--g200);display:flex;align-items:center;gap:10px;padding:12px 16px;flex-shrink:0}
.mob-topbar-icon{width:32px;height:32px;background:var(--teal-light);border-radius:var(--rmd);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mob-topbar-icon i{font-size:.82rem;color:var(--teal-dark)}
.mob-title{font-size:.9rem;font-weight:800;color:var(--g900)}
.mob-sub{font-size:.68rem;color:var(--g500);margin-top:1px}
.mob-badge{margin-left:auto;border-radius:999px;font-size:.64rem;font-weight:700;padding:3px 9px;white-space:nowrap;flex-shrink:0}
.mob-content{padding:12px;display:flex;flex-direction:column;gap:12px}
.mob-card{background:#fff;border-radius:var(--rlg);border:1.5px solid var(--g100);overflow:hidden}
.mob-card-head{padding:9px 14px;border-bottom:1.5px solid var(--g100);background:var(--g50);display:flex;align-items:center;gap:6px}
.mob-card-head i{font-size:.78rem;color:var(--teal)}
.mob-card-head span{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--g500)}
.mob-card-body{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.mob-tagihan-row{display:flex;justify-content:space-between;align-items:flex-start}
.mob-tagihan-name{font-weight:800;font-size:.92rem;color:var(--g900)}
.mob-tagihan-meta{font-size:.7rem;color:var(--g500);margin-top:2px}
.mob-total-lbl{font-size:.63rem;color:var(--g400);text-align:right}
.mob-total-val{font-size:1rem;font-weight:800;color:var(--g900)}
.mob-field-grp{display:flex;flex-direction:column;gap:4px}
.mob-field-lbl{font-size:.72rem;font-weight:700;color:var(--g700)}
.mob-field-lbl .req{color:var(--red);margin-left:2px}
.mob-fc{border:1.5px solid var(--g200);border-radius:var(--rsm);font-size:.84rem;padding:8px 10px;color:var(--g900);background:#fff;width:100%;outline:none;transition:border-color .2s,box-shadow .2s;font-family:inherit}
.mob-fc:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(32,201,151,.13)}
textarea.mob-fc{resize:none;height:60px}
.mob-fc-hint{font-size:.65rem;color:var(--g400);margin-top:2px}
.mob-nom-wrap{display:flex}
.mob-nom-pre{background:var(--g100);border:1.5px solid var(--g200);border-right:none;border-radius:var(--rsm) 0 0 var(--rsm);padding:0 10px;display:flex;align-items:center;font-size:.78rem;font-weight:700;color:var(--g500);white-space:nowrap}
.mob-nom-wrap .mob-fc{border-radius:0 var(--rsm) var(--rsm) 0}
.mob-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mob-wrap-bukti{display:none}
.mob-action-bar{display:flex;gap:8px;padding:12px 14px;border-top:1.5px solid var(--g100);background:var(--g50)}
.mob-btn-back{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:9px;border-radius:var(--rsm);font-size:.82rem;font-weight:700;border:1.5px solid var(--g200);background:#fff;color:var(--g500);text-decoration:none;cursor:pointer}
.mob-btn-save{flex:2;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:var(--rsm);font-size:.84rem;font-weight:700;border:none;background:var(--teal);color:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(32,201,151,.28)}
.mob-hist-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--g100)}
.mob-hist-row:last-child{border-bottom:none}
.mob-info-box{background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:var(--rmd);padding:10px 13px;font-size:.71rem;color:#1e40af;line-height:1.65}
.mob-info-box .ttl{font-weight:700;margin-bottom:5px;font-size:.72rem}
.mob-info-box ul{padding-left:14px}
.mob-info-box li+li{margin-top:3px}

@media(max-width:767px){
  .shell{display:none}
  .mobile-shell{display:flex}
}
</style>

<?php
  $total_terbayar = $iuran->total_terbayar ?: 0;
  $sisa           = $iuran->nominal - $total_terbayar;
  $persen         = ($iuran->nominal > 0) ? round(($total_terbayar / $iuran->nominal) * 100) : 0;
  $bulan_nama     = ['','Januari','Februari','Maret','April','Mei','Juni',
                     'Juli','Agustus','September','Oktober','November','Desember'];
  $jumlah_cicilan = count($cicilan);
  $last_bayar     = !empty($cicilan) ? date('d M Y', strtotime(end($cicilan)->tanggal_bayar)) : '—';
  $status_label   = ($iuran->status === 'lunas') ? 'Lunas' : 'Belum Lunas';
  $badge_style    = ($iuran->status === 'lunas') ? 'background:#d1fae5;color:#065f46' : 'background:#fef3c7;color:#92400e';
?>

<!-- ============================================================ -->
<!-- DESKTOP LAYOUT (>= 768px)                                    -->
<!-- ============================================================ -->
<div class="shell">

  <!-- Topbar -->
  <div class="topbar">
    <div class="topbar-icon"><i class="bi bi-credit-card-fill"></i></div>
    <span class="topbar-title">Cicilan Iuran</span>
    <small class="topbar-sub">Kelola pembayaran cicilan tagihan warga</small>
    <span class="topbar-badge" style="<?php echo $badge_style; ?>"><?php echo $status_label; ?></span>
  </div>

  <!-- Kolom Kiri: Info Tagihan -->
  <div class="col-left">
    <div class="panel-head">
      <i class="bi bi-receipt"></i>
      <span class="section-label">Info Tagihan</span>
    </div>
    <div class="panel-body">
      <div>
        <div class="tagihan-name"><?php echo $iuran->nama_iuran; ?></div>
        <div class="tagihan-meta"><?php echo $iuran->nama_lengkap; ?> &bull; <?php echo $bulan_nama[(int)$iuran->periode_bulan] . ' ' . $iuran->periode_tahun; ?></div>
        <div style="display:flex;justify-content:flex-end;margin-top:6px">
          <div>
            <div style="font-size:.62rem;color:var(--g400);text-align:right">Total Tagihan</div>
            <div style="font-size:1rem;font-weight:800;color:var(--g900)">Rp <?php echo number_format($iuran->nominal,0,',','.'); ?></div>
          </div>
        </div>
      </div>
      <div class="stat-grid">
        <div class="stat-box">
          <div class="lbl">Terbayar</div>
          <div class="val val-green">Rp <?php echo number_format($total_terbayar,0,',','.'); ?></div>
        </div>
        <div class="stat-box">
          <div class="lbl">Sisa</div>
          <div class="val val-red">Rp <?php echo number_format($sisa,0,',','.'); ?></div>
        </div>
      </div>
      <div>
        <div class="prog-track"><div class="prog-fill" style="width:<?php echo $persen; ?>%"></div></div>
        <div class="prog-lbl"><?php echo $persen; ?>% terbayar</div>
      </div>
      <div class="info-box">
        <div class="info-ttl"><i class="bi bi-info-circle-fill"></i> Informasi</div>
        <ul>
          <li>Status: <span class="status-pill"><i class="bi bi-exclamation-triangle"></i> Belum Dibayar</span></li>
          <li>Warga mendapat notifikasi otomatis</li>
          <li>Cicilan dapat dilakukan lebih dari sekali</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Kolom Tengah: Form Cicilan -->
  <div class="col-mid">
    <?php if($iuran->status !== 'lunas'): ?>
    <div class="form-inner">
      <div class="panel-head">
        <i class="bi bi-plus-circle"></i>
        <span class="section-label">Tambah Cicilan</span>
      </div>
      <div class="panel-body">
        <?php echo validation_errors('<div style="background:#fee2e2;border:1.5px solid #fecaca;border-radius:8px;padding:8px 12px;font-size:.78rem;color:#991b1b;flex-shrink:0">', '</div>'); ?>
        <form id="cicilForm" action="<?php echo base_url('iuran/proses_cicil'); ?>" method="post" enctype="multipart/form-data"
              style="flex:1;display:flex;flex-direction:column;gap:9px;min-height:0;overflow:hidden">
          <input type="hidden" name="pembayaran_iuran_id" value="<?php echo $iuran->id; ?>">
          <div class="grid2">
            <div class="field-grp">
              <label class="field-lbl">Nominal cicilan <span class="req">*</span></label>
              <div class="nom-wrap">
                <span class="nom-pre">Rp</span>
                <input type="number" name="nominal_cicilan" class="fc" placeholder="0" max="<?php echo $sisa; ?>" required>
              </div>
              <div class="fc-hint">Maks: Rp <?php echo number_format($sisa,0,',','.'); ?></div>
            </div>
            <div class="field-grp">
              <label class="field-lbl">Tanggal bayar <span class="req">*</span></label>
              <input type="date" name="tanggal_bayar" class="fc" value="<?php echo date('Y-m-d'); ?>" required>
            </div>
          </div>
          <div class="grid2">
            <div class="field-grp">
              <label class="field-lbl">Metode pembayaran</label>
              <select name="metode_pembayaran" id="metode_cicil" class="fc">
                <option value="tunai">Tunai</option>
                <option value="transfer">Transfer Bank</option>
              </select>
            </div>
            <?php if(!is_warga()): ?>
            <div class="field-grp">
              <label class="field-lbl">Kas tujuan <span class="req">*</span></label>
              <select name="master_kas_id" class="fc" required>
                <option value="">-- Pilih Kas --</option>
                <?php foreach($kas_list as $k): ?>
                  <option value="<?php echo $k->id; ?>"><?php echo $k->nama; ?></option>
                <?php endforeach; ?>
              </select>
            </div>
            <?php endif; ?>
          </div>
         <div class="field-grp <?php echo is_warga() ? '' : 'wrap-bukti'; ?>" id="wrap_bukti"
     <?php echo is_warga() ? '' : 'style="display:none"'; ?>>
  <label class="field-lbl">
    Bukti pembayaran <?php echo is_warga() ? '<span class="req">*</span>' : ''; ?>
  </label>
  <input type="file" name="bukti_transfer" class="fc" accept=".jpg,.jpeg,.png,.pdf"
         <?php echo is_warga() ? 'required' : ''; ?>>
  <div class="fc-hint">Format: JPG, PNG, PDF. Maks 2MB</div>
</div>
          <div class="field-grp">
            <label class="field-lbl">Keterangan</label>
            <textarea name="keterangan" class="fc" style="height:52px" placeholder="Catatan tambahan..."></textarea>
          </div>
        </form>
      </div>
      <div class="action-bar">
        <a href="<?php echo base_url('iuran/history_cicilan/' . $iuran->id); ?>" class="btn-back">
          <i class="bi bi-arrow-left"></i> History
        </a>
        <button type="submit" form="cicilForm" class="btn-save">
          <i class="bi bi-save2-fill"></i> Simpan Cicilan
        </button>
      </div>
    </div>
    <?php endif; ?>
  </div>

  <!-- Kolom Kanan: Riwayat -->
  <div class="col-right">
    <div class="panel-head">
      <i class="bi bi-clock-history"></i>
      <span class="section-label">Riwayat Cicilan</span>
    </div>
    <div class="hist-list">
      <?php if(!empty($cicilan)): ?>
        <?php foreach($cicilan as $c): ?>
        <div class="hist-row">
          <div>
            <span class="badge-ke">Ke-<?php echo $c->ke; ?></span>
            <?php if($c->status === 'menunggu_verifikasi'): ?>
              <span class="badge-wait">Menunggu</span>
            <?php endif; ?>
            <div class="hist-meta"><?php echo date('d/m/Y', strtotime($c->tanggal_bayar)); ?> &bull; <?php echo ucfirst($c->metode_pembayaran); ?></div>
          </div>
          <span class="hist-nom">Rp <?php echo number_format($c->nominal_cicilan,0,',','.'); ?></span>
        </div>
        <?php endforeach; ?>
      <?php else: ?>
        <div style="padding:20px 0;text-align:center;font-size:.75rem;color:var(--g400)">Belum ada cicilan</div>
      <?php endif; ?>
    </div>
    <div style="padding:10px 14px;border-top:1.5px solid var(--g100);flex-shrink:0">
      <div class="stat-grid">
        <div class="stat-box">
          <div class="lbl">Total Cicilan</div>
          <div class="val" style="color:var(--g900)"><?php echo $jumlah_cicilan; ?> kali</div>
        </div>
        <div class="stat-box">
          <div class="lbl">Terakhir Bayar</div>
          <div class="val" style="color:var(--g900);font-size:.72rem"><?php echo $last_bayar; ?></div>
        </div>
      </div>
    </div>
  </div>

</div><!-- end .shell -->


<!-- ============================================================ -->
<!-- MOBILE LAYOUT (< 768px)                                      -->
<!-- ============================================================ -->
<div class="mobile-shell">

  <!-- Topbar Mobile -->
  <div class="mob-topbar">
    <div class="mob-topbar-icon"><i class="bi bi-credit-card-fill"></i></div>
    <div>
      <div class="mob-title">Cicilan Iuran</div>
      <div class="mob-sub">Kelola pembayaran cicilan</div>
    </div>
    <span class="mob-badge" style="<?php echo $badge_style; ?>"><?php echo $status_label; ?></span>
  </div>

  <div class="mob-content">

    <!-- Info Tagihan -->
    <div class="mob-card">
      <div class="mob-card-head">
        <i class="bi bi-receipt"></i>
        <span>Info Tagihan</span>
      </div>
      <div class="mob-card-body">
        <div class="mob-tagihan-row">
          <div>
            <div class="mob-tagihan-name"><?php echo $iuran->nama_iuran; ?></div>
            <div class="mob-tagihan-meta"><?php echo $iuran->nama_lengkap; ?> &bull; <?php echo $bulan_nama[(int)$iuran->periode_bulan] . ' ' . $iuran->periode_tahun; ?></div>
          </div>
          <div style="text-align:right;flex-shrink:0;margin-left:12px">
            <div class="mob-total-lbl">Total</div>
            <div class="mob-total-val">Rp <?php echo number_format($iuran->nominal,0,',','.'); ?></div>
          </div>
        </div>
        <div class="stat-grid">
          <div class="stat-box">
            <div class="lbl">Terbayar</div>
            <div class="val val-green">Rp <?php echo number_format($total_terbayar,0,',','.'); ?></div>
          </div>
          <div class="stat-box">
            <div class="lbl">Sisa</div>
            <div class="val val-red">Rp <?php echo number_format($sisa,0,',','.'); ?></div>
          </div>
        </div>
        <div>
          <div class="prog-track"><div class="prog-fill" style="width:<?php echo $persen; ?>%"></div></div>
          <div class="prog-lbl"><?php echo $persen; ?>% terbayar</div>
        </div>
      </div>
    </div>

    <!-- Form Cicilan Mobile -->
    <?php if($iuran->status !== 'lunas'): ?>
    <div class="mob-card">
      <div class="mob-card-head">
        <i class="bi bi-plus-circle"></i>
        <span>Tambah Cicilan</span>
      </div>
      <form id="cicilFormMob" action="<?php echo base_url('iuran/proses_cicil'); ?>" method="post" enctype="multipart/form-data">
        <div class="mob-card-body">
          <?php echo validation_errors('<div style="background:#fee2e2;border:1.5px solid #fecaca;border-radius:8px;padding:9px 12px;font-size:.8rem;color:#991b1b">', '</div>'); ?>
          <input type="hidden" name="pembayaran_iuran_id" value="<?php echo $iuran->id; ?>">
          <div class="mob-grid2">
            <div class="mob-field-grp">
              <label class="mob-field-lbl">Nominal <span class="req">*</span></label>
              <div class="mob-nom-wrap">
                <span class="mob-nom-pre">Rp</span>
                <input type="number" name="nominal_cicilan" class="mob-fc" placeholder="0" max="<?php echo $sisa; ?>" required>
              </div>
              <div class="mob-fc-hint">Maks: Rp <?php echo number_format($sisa,0,',','.'); ?></div>
            </div>
            <div class="mob-field-grp">
              <label class="mob-field-lbl">Tanggal Bayar <span class="req">*</span></label>
              <input type="date" name="tanggal_bayar" class="mob-fc" value="<?php echo date('Y-m-d'); ?>" required>
            </div>
          </div>
          <div class="mob-grid2">
            <div class="mob-field-grp">
              <label class="mob-field-lbl">Metode</label>
              <select name="metode_pembayaran" id="mob_metode_cicil" class="mob-fc">
                <option value="tunai">Tunai</option>
                <option value="transfer">Transfer Bank</option>
              </select>
            </div>
            <?php if(!is_warga()): ?>
            <div class="mob-field-grp">
              <label class="mob-field-lbl">Kas Tujuan <span class="req">*</span></label>
              <select name="master_kas_id" class="mob-fc" required>
                <option value="">-- Pilih --</option>
                <?php foreach($kas_list as $k): ?>
                  <option value="<?php echo $k->id; ?>"><?php echo $k->nama; ?></option>
                <?php endforeach; ?>
              </select>
            </div>
            <?php endif; ?>
          </div>
          <div class="mob-field-grp mob-wrap-bukti" id="mob_wrap_bukti">
            <label class="mob-field-lbl">Bukti Transfer <span class="req">*</span></label>
            <input type="file" name="bukti_transfer" class="mob-fc" accept=".jpg,.jpeg,.png,.pdf">
          </div>
          <div class="mob-field-grp">
            <label class="mob-field-lbl">Keterangan</label>
            <textarea name="keterangan" class="mob-fc" placeholder="Catatan tambahan..."></textarea>
          </div>
        </div>
        <div class="mob-action-bar">
          <a href="<?php echo base_url('iuran/history_cicilan/' . $iuran->id); ?>" class="mob-btn-back">
            <i class="bi bi-arrow-left"></i> History
          </a>
          <button type="submit" class="mob-btn-save">
            <i class="bi bi-save2-fill"></i> Simpan Cicilan
          </button>
        </div>
      </form>
    </div>
    <?php endif; ?>

    <!-- Riwayat Mobile -->
    <div class="mob-card">
      <div class="mob-card-head">
        <i class="bi bi-clock-history"></i>
        <span>Riwayat Cicilan</span>
      </div>
      <div style="padding:0 14px">
        <?php if(!empty($cicilan)): ?>
          <?php foreach($cicilan as $c): ?>
          <div class="mob-hist-row">
            <div>
              <div style="display:flex;align-items:center;gap:4px;margin-bottom:3px">
                <span class="badge-ke">Ke-<?php echo $c->ke; ?></span>
                <?php if($c->status === 'menunggu_verifikasi'): ?>
                  <span class="badge-wait">Menunggu</span>
                <?php endif; ?>
              </div>
              <div style="font-size:.7rem;color:var(--g500)"><?php echo date('d/m/Y', strtotime($c->tanggal_bayar)); ?> &bull; <?php echo ucfirst($c->metode_pembayaran); ?></div>
            </div>
            <span class="hist-nom">Rp <?php echo number_format($c->nominal_cicilan,0,',','.'); ?></span>
          </div>
          <?php endforeach; ?>
        <?php else: ?>
          <div style="padding:18px 0;text-align:center;font-size:.78rem;color:var(--g400)">Belum ada cicilan</div>
        <?php endif; ?>
      </div>
      <div style="padding:10px 14px;border-top:1.5px solid var(--g100)">
        <div class="stat-grid">
          <div class="stat-box">
            <div class="lbl">Total Cicilan</div>
            <div class="val" style="color:var(--g900)"><?php echo $jumlah_cicilan; ?> kali</div>
          </div>
          <div class="stat-box">
            <div class="lbl">Terakhir Bayar</div>
            <div class="val" style="color:var(--g900);font-size:.72rem"><?php echo $last_bayar; ?></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Info Box Mobile -->
    <div class="mob-info-box">
      <div class="ttl"><i class="bi bi-info-circle-fill"></i> Informasi</div>
      <ul>
        <li>Tagihan berstatus <strong>Belum Dibayar</strong></li>
        <li>Warga mendapat notifikasi otomatis</li>
        <li>Cicilan dapat dilakukan lebih dari sekali</li>
      </ul>
    </div>

  </div>
</div><!-- end .mobile-shell -->

<script>
// Desktop
document.getElementById('metode_cicil').addEventListener('change', function(){
  const el = document.getElementById('wrap_bukti');
  <?php if(is_warga()): ?>
  // Warga: bukti selalu tampil, tidak perlu toggle
  <?php else: ?>
  el.style.display = this.value === 'transfer' ? 'flex' : 'none';
  <?php endif; ?>
});

// Mobile
document.getElementById('mob_metode_cicil').addEventListener('change', function(){
  const el = document.getElementById('mob_wrap_bukti');
  <?php if(is_warga()): ?>
  // Warga: bukti selalu tampil, tidak perlu toggle
  <?php else: ?>
  el.style.display = this.value === 'transfer' ? 'flex' : 'none';
  el.style.flexDirection = 'column';
  el.style.gap = '4px';
  <?php endif; ?>
});
</script>