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

/* ── Page wrapper ── */
.tp {
  background: var(--bg);
  min-height: 100vh;
  padding: 20px 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media(min-width:768px){
  .tp {
    height: 100vh;
    overflow: hidden;
    padding: 14px 24px;
    justify-content: flex-start;
  }
}

/* ── Top bar ── */
.tp-top {
  width: 100%; max-width: 1060px;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 10px; flex-shrink: 0;
}
.tp-back {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: color .15s;
}
.tp-back:hover { color: var(--teal-dk); }

/* Steps */
.tp-steps { display: flex; align-items: center; flex: 1; }
.tp-step  { display: flex; align-items: center; gap: 5px; }
.tp-dot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--muted);
  flex-shrink: 0; transition: all .2s;
}
.tp-step.active .tp-dot { border-color: var(--amber); background: var(--amber); color: #fff; }
.tp-step.done   .tp-dot { border-color: var(--amber); background: var(--amber); color: #fff; }
.tp-slbl { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tp-step.active .tp-slbl { color: var(--amber-dk); }
.tp-ln { flex: 1; height: 2px; background: var(--border); margin: 0 8px; transition: background .2s; }
.tp-ln.done { background: var(--amber); }

/* ── Card ── */
.tp-card {
  background: var(--white);
  border-radius: var(--rad);
  box-shadow: var(--shd);
  border: 1px solid var(--border);
  width: 100%; max-width: 1060px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
@media(min-width:768px){
  .tp-card { flex: 1; min-height: 0; }
}

/* ── Card header ── */
.tp-hdr {
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.tp-hdr-ico {
  width: 38px; height: 38px; border-radius: var(--rad-s);
  background: var(--amber-lt);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tp-hdr-ico i { font-size: 18px; color: var(--amber-dk); }
.tp-hdr-t { font-size: 14.5px; font-weight: 700; color: var(--txt); margin: 0; }
.tp-hdr-s { font-size: 12px; color: var(--muted); margin: 0; }

/* ── Scrollable body ── */
.tp-body {
  flex: 1; padding: 20px 28px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.tp-body::-webkit-scrollbar { width: 4px; }
.tp-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
@media(max-width:480px){ .tp-body { padding: 14px; } }

/* ── Sticky footer ── */
.tp-foot {
  padding: 12px 28px;
  border-top: 1px solid var(--border);
  background: var(--white);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-shrink: 0; flex-wrap: wrap;
}
@media(max-width:480px){ .tp-foot { padding: 10px 14px; } }
.tp-foot-note {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted);
}
.tp-foot-note i { color: var(--amber); font-size: 13px; }
.tp-foot-btns { display: flex; gap: 8px; align-items: center; }
.btn-bk {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 15px; border-radius: var(--rad-s);
  border: 1.5px solid var(--border); background: var(--white);
  color: var(--muted); font-size: 13px; font-weight: 600;
  text-decoration: none; transition: all .15s;
}
.btn-bk:hover { border-color: var(--muted); color: var(--txt); }
.btn-sb {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 22px; border-radius: var(--rad-s);
  background: var(--amber); border: none; color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.btn-sb:hover { background: var(--amber-dk); }
.btn-sb:disabled { opacity: .65; cursor: not-allowed; }

/* ── 2-col grid ── */
.fg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media(max-width:640px){ .fg2 { grid-template-columns: 1fr; } }
.col-l { padding-right: 28px; }
.col-r { border-left: 1px solid var(--border); padding-left: 28px; }
@media(max-width:640px){
  .col-l { padding-right: 0; }
  .col-r { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
}

/* ── Section label ── */
.slbl {
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 12px; padding-bottom: 7px; border-bottom: 1px solid var(--border);
}

/* ── Form groups ── */
.fg  { margin-bottom: 13px; }
.fg:last-child { margin-bottom: 0; }
.fl  { display: block; font-size: 12.5px; font-weight: 600; color: var(--txt); margin-bottom: 5px; }
.req { color: var(--danger); }
.fh  { font-size: 11px; color: var(--muted); margin-top: 4px; }

.fi, .fs, .fta {
  width: 100%; padding: 8px 12px;
  border: 1.5px solid var(--border); border-radius: var(--rad-s);
  font-size: 13.5px; color: var(--txt); background: #fff;
  outline: none; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.fi:focus, .fs:focus, .fta:focus {
  border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,158,11,.14);
}
.fi[readonly] { background: var(--bg); color: var(--muted); cursor: not-allowed; }
.fta { resize: vertical; min-height: 76px; }
.fs {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px;
}
input[type=number].fi { -moz-appearance: textfield; }
input[type=number].fi::-webkit-inner-spin-button,
input[type=number].fi::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── Saldo card ── */
.saldo-card {
  background: linear-gradient(135deg, var(--s-bg) 0%, #dcfce7 100%);
  border: 1.5px solid var(--s-bdr);
  border-radius: var(--rad-s);
  padding: 14px 16px;
  margin-bottom: 13px;
}
.saldo-label { font-size: 11px; font-weight: 600; color: var(--s-txt); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.saldo-value { font-size: 22px; font-weight: 800; color: var(--txt); line-height: 1; }
.saldo-sub   { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ── Chips ── */
.chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.chip {
  padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600;
  border: 1.5px solid var(--border); background: #fff; color: var(--muted);
  cursor: pointer; transition: all .15s;
}
.chip:hover, .chip.on { border-color: var(--amber); color: var(--amber-dk); background: var(--amber-xl); }

/* ── Alerts ── */
.al {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--rad-s); font-size: 12.5px;
}
.al i { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.al-danger { background: var(--d-bg); border: 1px solid var(--d-bdr); color: #b91c1c; margin-bottom: 14px; }
.al-amber  { background: var(--amber-lt); border: 1px solid #fcd34d; color: #92400e; }

/* ── Warga saldo select info ── */
.warga-saldo-info {
  margin-top: 8px; padding: 10px 12px;
  border-radius: var(--rad-s);
  background: var(--s-bg); border: 1px solid var(--s-bdr);
  display: none;
  align-items: center; gap: 10px;
}
.warga-saldo-name  { font-size: 13px; font-weight: 700; color: var(--txt); }
.warga-saldo-amt   { font-size: 12px; color: var(--s-txt); font-weight: 600; }

/* ── Progress bar saldo ── */
.saldo-bar-wrap { margin-top: 10px; }
.saldo-bar-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.saldo-bar-track { height: 6px; background: var(--border); border-radius: 10px; overflow: hidden; }
.saldo-bar-fill  { height: 100%; background: var(--amber); border-radius: 10px; transition: width .3s ease; }

/* ── Mini divider ── */
.mdiv { height: 1px; background: var(--border); margin: 13px 0; }

/* ── Konfirmasi summary box (kanan bawah) ── */
.konfirm-box {
  background: var(--amber-xl);
  border: 1.5px solid #fcd34d;
  border-radius: var(--rad-s);
  padding: 14px 16px;
  margin-top: 0;
}
.konfirm-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--amber-dk); margin-bottom: 10px; display: flex; align-items: center; gap: 5px; }
.konfirm-row   { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; padding: 5px 0; border-bottom: 1px dashed #fcd34d; }
.konfirm-row:last-child { border-bottom: none; }
.konfirm-row .k-lbl  { color: var(--muted); }
.konfirm-row .k-val  { font-weight: 700; color: var(--txt); }
.konfirm-row .k-val.danger { color: var(--danger); }
</style>

<div class="tp">

  <!-- Top bar -->
  <div class="tp-top">
    <a href="<?php echo base_url('tabungan'); ?>" class="tp-back">
      <i class="bi bi-arrow-left"></i> Kembali
    </a>
    <div class="tp-steps">
      <div class="tp-step active" id="s1">
        <div class="tp-dot">1</div>
        <span class="tp-slbl">Data</span>
      </div>
      <div class="tp-ln" id="l1"></div>
      <div class="tp-step" id="s2">
        <div class="tp-dot">2</div>
        <span class="tp-slbl">Nominal</span>
      </div>
      <div class="tp-ln" id="l2"></div>
      <div class="tp-step" id="s3">
        <div class="tp-dot"><i class="bi bi-check" style="font-size:10px;"></i></div>
        <span class="tp-slbl">Konfirmasi</span>
      </div>
    </div>
  </div>

  <!-- Card -->
  <div class="tp-card">

    <!-- Header -->
    <div class="tp-hdr">
      <div class="tp-hdr-ico"><i class="bi bi-dash-circle"></i></div>
      <div>
        <p class="tp-hdr-t">Pengajuan Penarikan Tabungan</p>
        <p class="tp-hdr-s">Isi formulir penarikan, lalu klik Ajukan Penarikan</p>
      </div>
    </div>

    <!-- Body -->
    <div class="tp-body">

      <?php if(validation_errors()): ?>
      <div class="al al-danger"><i class="bi bi-exclamation-circle-fill"></i><div><?php echo validation_errors(); ?></div></div>
      <?php endif; ?>
      <?php if($this->session->flashdata('error')): ?>
      <div class="al al-danger"><i class="bi bi-exclamation-circle-fill"></i><div><?php echo $this->session->flashdata('error'); ?></div></div>
      <?php endif; ?>

      <form action="<?php echo base_url('tabungan/tarik'); ?>" method="post" id="tarikForm">

        <div class="fg2">

          <!-- ══ KOLOM KIRI ══ -->
          <div class="col-l">

            <?php if($user_role == 'warga'): ?>
            <p class="slbl">Identitas Penabung</p>

            <!-- Saldo card -->
            <div class="saldo-card">
              <div class="saldo-label"><i class="bi bi-wallet2 me-1"></i> Saldo Tersedia</div>
              <div class="saldo-value">Rp <?php echo number_format(isset($saldo_saya) ? $saldo_saya : 0, 0, ',', '.'); ?></div>
              <div class="saldo-sub"><?php echo isset($warga_saya) ? htmlspecialchars($warga_saya->nama_lengkap) : ''; ?></div>
            </div>
            <input type="hidden" name="warga_id" value="<?php echo isset($warga_saya) ? $warga_saya->id : ''; ?>">

            <?php else: ?>
            <p class="slbl">Pilih Warga</p>
            <div class="fg">
              <label class="fl">Warga <span class="req">*</span></label>
              <select name="warga_id" class="fs" id="wargaSelect" required onchange="onWargaChange(this)">
                <option value="">— Pilih Warga —</option>
                <?php foreach($warga as $w):
                  // Saldo dijamin ada karena controller sudah JOIN tabungan (INNER JOIN)
                  // Warga tanpa tabungan tidak akan muncul di sini
                  $saldo_w = isset($w->saldo) ? (int)$w->saldo : 0;
                ?>
                <option value="<?php echo $w->id; ?>"
                  data-nama="<?php echo htmlspecialchars($w->nama_lengkap); ?>"
                  data-saldo="<?php echo $saldo_w; ?>">
                  <?php echo htmlspecialchars($w->nama_lengkap); ?> — Rp <?php echo number_format($saldo_w, 0, ',', '.'); ?>
                </option>
                <?php endforeach; ?>
              </select>
              <!-- Info saldo warga terpilih -->
              <div class="warga-saldo-info" id="wargaInfo" style="display:none;">
                <div>
                  <div class="warga-saldo-name" id="wargaName"></div>
                  <div class="warga-saldo-amt">Saldo: Rp <span id="wargaSaldoText"></span></div>
                </div>
              </div>
            </div>
            <?php endif; ?>

            <div class="mdiv"></div>
            <p class="slbl">Detail Penarikan</p>

            <div class="fg">
              <label class="fl">Nominal Tarik <span class="req">*</span></label>
              <input type="number" name="nominal" class="fi" id="nominalInput"
                min="10000"
                <?php if($user_role == 'warga'): ?>max="<?php echo isset($saldo_saya) ? (int)$saldo_saya : 0; ?>"<?php endif; ?>
                value="<?php echo set_value('nominal'); ?>"
                required placeholder="Contoh: 100000"
                oninput="onNominalChange()">
              <!-- Quick chips -->
              <?php
                $saldo_w_val = isset($saldo_saya) ? (int)$saldo_saya : 0;
                if($user_role == 'warga' && $saldo_w_val > 0):
              ?>
              <div class="chips">
                <?php
                  $amounts = [50000, 100000, 200000, 500000];
                  foreach($amounts as $a): if($a <= $saldo_w_val): ?>
                  <button type="button" class="chip" onclick="setNom(<?php echo $a; ?>)">Rp <?php echo number_format($a,0,',','.'); ?></button>
                <?php endif; endforeach; ?>
                <button type="button" class="chip" onclick="setNom(<?php echo $saldo_w_val; ?>)">Semua</button>
              </div>
              <?php else: ?>
              <div class="chips">
                <button type="button" class="chip" onclick="setNom(50000)">Rp 50.000</button>
                <button type="button" class="chip" onclick="setNom(100000)">Rp 100.000</button>
                <button type="button" class="chip" onclick="setNom(200000)">Rp 200.000</button>
                <button type="button" class="chip" onclick="setNom(500000)">Rp 500.000</button>
              </div>
              <?php endif; ?>
              <div class="fh" id="nomHint">
                <?php if($user_role == 'warga'): ?>
                  Minimal Rp 10.000 &nbsp;·&nbsp; Maksimal Rp <?php echo number_format($saldo_w_val, 0, ',', '.'); ?>
                <?php else: ?>
                  Minimal Rp 10.000. Pastikan saldo mencukupi.
                <?php endif; ?>
              </div>
            </div>

            <!-- Saldo progress bar (warga only) -->
            <?php if($user_role == 'warga'): ?>
            <div class="saldo-bar-wrap" id="barWrap" style="display:none;">
              <div class="saldo-bar-label">
                <span>Ditarik</span>
                <span id="barPct">0%</span>
              </div>
              <div class="saldo-bar-track">
                <div class="saldo-bar-fill" id="barFill" style="width:0%"></div>
              </div>
            </div>
            <?php endif; ?>

          </div><!-- /col-l -->

          <!-- ══ KOLOM KANAN ══ -->
          <div class="col-r">
            <p class="slbl">Alasan Penarikan</p>

            <div class="fg">
              <label class="fl">Keterangan <span class="req">*</span></label>
              <textarea name="keterangan" class="fta" rows="4"
                required placeholder="Contoh: Kebutuhan mendesak, biaya sekolah, dll..."
                oninput="checkProgress()"><?php echo set_value('keterangan'); ?></textarea>
              <div class="fh">Wajib diisi. Akan ditampilkan kepada admin untuk persetujuan.</div>
            </div>

            <div class="mdiv"></div>

            <!-- Ringkasan penarikan -->
            <div class="konfirm-box" id="konfirmBox" style="opacity:.4;transition:opacity .3s;">
              <div class="konfirm-title">
                <i class="bi bi-receipt"></i> Ringkasan Penarikan
              </div>
              <div class="konfirm-row">
                <span class="k-lbl">Nama Warga</span>
                <span class="k-val" id="ks-nama">—</span>
              </div>
              <div class="konfirm-row">
                <span class="k-lbl">Saldo Saat Ini</span>
                <span class="k-val" id="ks-saldo">—</span>
              </div>
              <div class="konfirm-row">
                <span class="k-lbl">Nominal Tarik</span>
                <span class="k-val danger" id="ks-nominal">—</span>
              </div>
              <div class="konfirm-row">
                <span class="k-lbl">Sisa Saldo</span>
                <span class="k-val" id="ks-sisa">—</span>
              </div>
            </div>

            <div class="mdiv"></div>

            <div class="al al-amber">
              <i class="bi bi-clock-fill" style="color:var(--amber-dk);"></i>
              <div>Penarikan diproses setelah disetujui admin dalam <strong>1×24 jam</strong>.</div>
            </div>

          </div><!-- /col-r -->
        </div><!-- /fg2 -->

      </form>
    </div><!-- /tp-body -->

    <!-- ══ STICKY FOOTER ══ -->
    <div class="tp-foot">
      <div class="tp-foot-note">
        <i class="bi bi-shield-exclamation"></i>
        Pastikan nominal dan alasan penarikan sudah benar sebelum mengajukan.
      </div>
      <div class="tp-foot-btns">
        <a href="<?php echo base_url('tabungan'); ?>" class="btn-bk">
          <i class="bi bi-arrow-left"></i> Kembali
        </a>
        <button type="submit" form="tarikForm" class="btn-sb" id="submitBtn">
          <i class="bi bi-send"></i> Ajukan Penarikan
        </button>
      </div>
    </div>

  </div><!-- /tp-card -->
</div>

<script>
// ── Data dari PHP ──
const userRole    = '<?php echo $user_role; ?>';
const saldoSaya   = <?php echo ($user_role == 'warga' && isset($saldo_saya) ? (int)$saldo_saya : 0); ?>;
const namaSaya    = '<?php echo ($user_role == 'warga' && isset($warga_saya) ? addslashes($warga_saya->nama_lengkap) : ''); ?>';

let currentSaldo = saldoSaya;
let currentNama  = namaSaya;

// Init ringkasan untuk warga
if (userRole === 'warga') {
  document.getElementById('ks-nama').textContent  = namaSaya;
  document.getElementById('ks-saldo').textContent = 'Rp ' + fmt(saldoSaya);
}

// ── Pilih warga (admin) ──
function onWargaChange(sel) {
  const opt = sel.options[sel.selectedIndex];
  const infoBox = document.getElementById('wargaInfo');
  if (sel.value) {
    currentSaldo = parseInt(opt.dataset.saldo) || 0;
    currentNama  = opt.dataset.nama || '';
    document.getElementById('wargaName').textContent     = currentNama;
    document.getElementById('wargaSaldoText').textContent = fmt(currentSaldo);
    infoBox.style.display = 'flex';
    document.getElementById('ks-nama').textContent  = currentNama;
    document.getElementById('ks-saldo').textContent = 'Rp ' + fmt(currentSaldo);
  } else {
    currentSaldo = 0; currentNama = '';
    infoBox.style.display = 'none';
    document.getElementById('ks-nama').textContent  = '—';
    document.getElementById('ks-saldo').textContent = '—';
  }
  onNominalChange();
}

// ── Nominal ──
function setNom(v) {
  const el = document.getElementById('nominalInput');
  el.value = v;
  document.querySelectorAll('.chip').forEach(c => {
    const cv = parseInt(c.textContent.replace(/\D/g,''));
    c.classList.toggle('on', cv === v || (c.textContent.trim() === 'Semua' && v === saldoSaya));
  });
  onNominalChange();
}

function onNominalChange() {
  document.querySelectorAll('.chip').forEach(c => c.classList.remove('on'));
  const nomEl = document.getElementById('nominalInput');
  const nom   = parseInt(nomEl.value) || 0;

  // Update ringkasan
  document.getElementById('ks-nominal').textContent = nom > 0 ? '- Rp ' + fmt(nom) : '—';
  const sisa = currentSaldo - nom;
  const sisaEl = document.getElementById('ks-sisa');
  sisaEl.textContent = nom > 0 ? 'Rp ' + fmt(Math.max(0, sisa)) : '—';
  sisaEl.style.color = sisa < 0 ? 'var(--danger)' : 'var(--txt)';

  // Progress bar (warga)
  if (userRole === 'warga' && saldoSaya > 0) {
    const barWrap = document.getElementById('barWrap');
    const pct     = Math.min(100, Math.round((nom / saldoSaya) * 100));
    barWrap.style.display = nom > 0 ? 'block' : 'none';
    document.getElementById('barFill').style.width = pct + '%';
    document.getElementById('barFill').style.background = pct > 90 ? 'var(--danger)' : 'var(--amber)';
    document.getElementById('barPct').textContent = pct + '%';
  }

  checkProgress();
}

// ── Progress steps ──
function activateStep(n) {
  ['s1','s2','s3'].forEach((id, i) => {
    const el = document.getElementById(id);
    el.classList.remove('active','done');
    if (i < n) el.classList.add('done');
    else if (i === n) el.classList.add('active');
  });
  ['l1','l2'].forEach((id, i) => {
    const el = document.getElementById(id);
    if (el) el.classList.toggle('done', n > i + 1 || (n === i + 1 && i === 0 ? false : n > i));
  });
  // simpler line logic
  const l1 = document.getElementById('l1');
  const l2 = document.getElementById('l2');
  if (l1) l1.classList.toggle('done', n >= 1);
  if (l2) l2.classList.toggle('done', n >= 2);
}

function checkProgress() {
  const nomEl   = document.getElementById('nominalInput');
  const nom     = parseInt((nomEl && nomEl.value) || 0);
  const ket     = document.querySelector('textarea[name=keterangan]');
  const ketOk   = ket && ket.value.trim().length > 3;
  const wargaOk = userRole === 'warga' || (document.getElementById('wargaSelect') && document.getElementById('wargaSelect').value !== '');
  const nomOk   = nom >= 10000 && (userRole !== 'warga' || nom <= saldoSaya);

  // Activate konfirm box
  const kb = document.getElementById('konfirmBox');
  if (kb) kb.style.opacity = (nomOk && wargaOk) ? '1' : '0.4';

  if (nomOk && ketOk && wargaOk) activateStep(2);
  else if (nomOk || wargaOk) activateStep(1);
  else activateStep(0);
}

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

// ── Submit ──
document.getElementById('tarikForm').addEventListener('submit', function () {
  const btn = document.getElementById('submitBtn');
  btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span> Mengirim...';
  btn.disabled = true;
});

// Init
checkProgress();
</script>