<!-- views/pinjaman/proses_pengajuan.php -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --teal-900: #0d3d38;
  --teal-800: #0b5a52;
  --teal-700: #0b7a6e;
  --teal-600: #0d9488;
  --teal-500: #14b8a6;
  --teal-400: #2dd4bf;
  --teal-100: #ccfbf1;
  --teal-50:  #f0fdfa;
  --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-100: #dbeafe;
  --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);
}

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

/* ── Page Header ── */
.pp-page-header {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 12px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.pp-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;
}
.pp-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;
}
.pp-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; color: var(--slate-400); flex-wrap: wrap;
}
.pp-breadcrumb a { color: var(--teal-600); text-decoration: none; font-weight: 600; }
.pp-breadcrumb a:hover { text-decoration: underline; }
.pp-breadcrumb .sep { color: var(--slate-300); }
.pp-breadcrumb .current { color: var(--slate-500); font-weight: 600; }

/* ── Dana Alert ── */
.dana-alert {
  display: flex; align-items: flex-start; gap: 14px;
  background: #fff5f5; border: 1px solid #fca5a5;
  border-left: 4px solid var(--red-500);
  border-radius: 12px; padding: 16px 18px;
  margin-bottom: 20px;
  animation: fadeUp .3s ease both;
}
.dana-alert .da-icon { font-size: 1.5rem; color: var(--red-500); flex-shrink: 0; margin-top: 1px; }
.dana-alert .da-text strong { font-size: .9rem; color: #991b1b; display: block; margin-bottom: 6px; }
.dana-alert .da-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.da-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid #fca5a5;
  border-radius: 7px; padding: 4px 10px;
  font-size: .77rem; font-weight: 600; color: #991b1b;
}
.da-chip.danger { background: #fee2e2; border-color: var(--red-500); color: var(--red-600); }
.dana-alert .da-close {
  margin-left: auto; background: none; border: none;
  cursor: pointer; color: #fca5a5; font-size: 1rem;
  flex-shrink: 0; padding: 0; line-height: 1;
}
.dana-alert .da-close:hover { color: var(--red-500); }

/* ── Layout ── */
.pp-layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 20px;
  align-items: start;
}

/* ── Card ── */
.pp-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;
}
.pp-card:last-child { margin-bottom: 0; }
.pp-card-head {
  padding: 15px 20px;
  border-bottom: 1px solid var(--slate-100);
  display: flex; align-items: center; gap: 9px;
}
.pp-card-head.teal   { background: linear-gradient(90deg, var(--teal-50), #fff); border-bottom-color: rgba(13,148,136,.1); }
.pp-card-head.plain  { background: #fff; }
.pp-card-head h5 {
  margin: 0; font-size: .95rem; font-weight: 800; color: var(--slate-900);
  display: flex; align-items: center; gap: 8px;
}
.pp-card-head h5 i.teal   { color: var(--teal-600); }
.pp-card-head h5 i.green  { color: var(--green-500); }
.pp-card-head h5 i.amber  { color: var(--amber-500); }
.pp-card-body { padding: 20px; }
.pp-card-body.compact { padding: 16px; }

/* ── Section ── */
.pp-section { margin-bottom: 20px; }
.pp-section:last-child { margin-bottom: 0; }
.pp-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;
}
.pp-section-title::after { content: ''; flex: 1; height: 1px; background: rgba(13,148,136,.15); }

/* ── Info Grid ── */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.info-grid.cols3 { grid-template-columns: 1fr 1fr 1fr; }
.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.teal  { color: var(--teal-700); font-size: 1rem; font-weight: 800; }
.info-item .val.red   { color: var(--red-500);  font-size: 1rem; font-weight: 800; }
.info-item .val.green { color: var(--green-500);font-size: 1rem; font-weight: 800; }
.info-item .val.big   { font-size: 1.05rem; font-weight: 800; }

.info-box {
  background: var(--slate-50); border-radius: 9px;
  padding: 11px 14px; font-size: .85rem;
  color: var(--slate-700); line-height: 1.55;
  border: 1px solid var(--slate-200);
}

/* badges */
.badge-kode {
  font-family: monospace; font-size: .8rem; font-weight: 700;
  background: var(--teal-50); color: var(--teal-700);
  padding: 3px 9px; border-radius: 5px;
  border: 1px solid rgba(13,148,136,.2);
}
.badge-jenis {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--blue-100); color: var(--blue-500);
  border: 1px solid rgba(59,130,246,.2);
  padding: 3px 9px; border-radius: 20px;
  font-size: .75rem; font-weight: 700;
}
.badge-pending {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--amber-100); color: #92400e;
  border: 1px solid var(--amber-400);
  padding: 3px 9px; border-radius: 20px;
  font-size: .75rem; font-weight: 700;
}
.pp-divider { border: none; border-top: 1px solid var(--slate-100); margin: 18px 0; }

/* ── Form Keputusan ── */
.f-label {
  display: block; font-size: .8rem; font-weight: 700;
  color: var(--slate-700); margin-bottom: 8px;
}
.f-label .req { color: var(--red-500); }

/* Radio options */
.radio-option {
  display: flex; align-items: flex-start; gap: 12px;
  border: 2px solid var(--slate-200);
  border-radius: 10px; padding: 12px 14px;
  margin-bottom: 10px; cursor: pointer;
  transition: all .15s; background: #fff;
}
.radio-option:hover { border-color: var(--slate-300); background: var(--slate-50); }
.radio-option.selected-setuju { border-color: var(--green-500); background: var(--green-50); }
.radio-option.selected-tolak  { border-color: var(--red-500);   background: var(--red-50); }
.radio-option.disabled-opt    { opacity: .55; cursor: not-allowed; background: var(--slate-50); }
.radio-option input[type="radio"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--teal-600); }
.radio-option .ro-title { font-size: .87rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.radio-option .ro-sub   { font-size: .76rem; color: var(--slate-400); margin-top: 2px; }
.radio-option .ro-sub.danger { color: var(--red-500); }

/* Mode Pencairan */
.mode-option {
  display: flex; align-items: flex-start; gap: 11px;
  border: 2px solid var(--slate-200);
  border-radius: 9px; padding: 11px 13px;
  margin-bottom: 9px; cursor: pointer;
  transition: all .15s; background: #fff;
}
.mode-option:hover { border-color: var(--slate-300); }
.mode-option.selected-auto   { border-color: var(--teal-500);  background: var(--teal-50); }
.mode-option.selected-manual { border-color: var(--amber-500); background: var(--amber-50); }
.mode-option input { margin-top: 2px; flex-shrink: 0; accent-color: var(--teal-600); }
.mode-option .mo-title { font-size: .84rem; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.mode-option .mo-sub   { font-size: .74rem; color: var(--slate-400); margin-top: 2px; }

/* Textarea */
.f-textarea {
  width: 100%; border: 1.5px solid var(--slate-200); border-radius: 9px;
  padding: 10px 14px; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .87rem; color: var(--slate-900); outline: none;
  resize: vertical; min-height: 90px; line-height: 1.5;
  transition: border-color .15s, box-shadow .15s;
}
.f-textarea:focus { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(20,184,166,.12); }
.f-textarea::placeholder { color: var(--slate-300); }
.f-hint { font-size: .74rem; color: var(--slate-400); margin-top: 5px; }

/* Preview Auto */
.preview-auto-box {
  background: var(--green-50); border: 1px solid #86efac;
  border-radius: 10px; padding: 14px; margin-top: 12px;
}
.preview-auto-box .pa-title {
  font-size: .76rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--green-600);
  display: flex; align-items: center; gap: 6px; margin-bottom: 11px;
}
.preview-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; gap: 8px;
}
.preview-row:last-child { margin-bottom: 0; }
.preview-row .pr-kas { display: flex; align-items: center; gap: 7px; min-width: 0; }
.preview-row .pr-kas .kas-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--teal-500);
}
.preview-row .pr-kas .kas-kode {
  font-size: .72rem; font-weight: 700; padding: 2px 6px;
  border-radius: 4px; white-space: nowrap;
}
.preview-row .pr-kas .kas-nama {
  font-size: .76rem; color: var(--slate-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.preview-row .pr-nominal { font-size: .82rem; font-weight: 800; color: var(--green-600); white-space: nowrap; flex-shrink: 0; }
.preview-divider { border: none; border-top: 1px solid #86efac; margin: 9px 0; }
.preview-total { display: flex; justify-content: space-between; align-items: center; }
.preview-total .pt-label { font-size: .76rem; font-weight: 700; color: var(--green-600); }
.preview-total .pt-val   { font-size: .88rem; font-weight: 800; color: var(--teal-700); }

/* Manual Form */
.manual-box {
  background: var(--amber-50); border: 1px solid var(--amber-400);
  border-radius: 10px; padding: 14px; margin-top: 12px;
}
.manual-box .mb-title {
  font-size: .76rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--amber-600);
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 11px;
}
.kas-manual-item {
  background: #fff; border: 1px solid var(--slate-200);
  border-radius: 8px; padding: 11px 12px;
  margin-bottom: 9px;
}
.kas-manual-item:last-child { margin-bottom: 0; }
.manual-select, .manual-input {
  width: 100%; border: 1.5px solid var(--slate-200); border-radius: 7px;
  padding: 7px 11px; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; color: var(--slate-900); outline: none;
  transition: border-color .15s; background: #fff; appearance: none;
}
.manual-select { 
  background-image: 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");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 28px; cursor: pointer;
  -webkit-appearance: none;
}
.manual-select:focus, .manual-input:focus {
  border-color: var(--amber-400); box-shadow: 0 0 0 3px rgba(251,191,36,.12);
}
.manual-input-wrap { display: flex; align-items: center; gap: 0; margin-top: 7px; }
.manual-prefix {
  background: var(--slate-100); border: 1.5px solid var(--slate-200);
  border-right: none; border-radius: 7px 0 0 7px;
  padding: 7px 10px; font-size: .8rem; font-weight: 700;
  color: var(--slate-500);
}
.manual-input { border-radius: 0 7px 7px 0; }
.saldo-info { font-size: .73rem; margin-top: 5px; }

.manual-summary {
  background: #fff; border: 1px solid var(--slate-200);
  border-radius: 8px; padding: 11px 12px; margin-top: 10px;
}
.manual-summary-row { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: 5px; }
.manual-summary-row:last-child { margin-bottom: 0; }
.ms-label { color: var(--slate-400); font-weight: 600; }

.alert-manual {
  display: flex; align-items: center; gap: 7px;
  border-radius: 7px; padding: 8px 12px;
  font-size: .78rem; font-weight: 600; margin-top: 8px;
}
.alert-manual.danger  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.alert-manual.success { background: var(--green-100); color: #065f46; border: 1px solid #86efac; }

/* Buttons */
.btn-add-kas {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--amber-500); color: #fff; border: none;
  border-radius: 6px; padding: 5px 11px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .76rem; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.btn-add-kas:hover { background: var(--amber-600); }
.btn-remove-kas {
  background: none; border: 1px solid var(--slate-200); border-radius: 6px;
  padding: 5px 8px; cursor: pointer; color: var(--slate-400);
  font-size: .78rem; transition: all .15s; flex-shrink: 0;
}
.btn-remove-kas:hover { background: #fee2e2; border-color: var(--red-400); color: var(--red-500); }
.btn-autofill {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; background: transparent;
  border: 1.5px dashed var(--amber-400); border-radius: 8px;
  padding: 8px; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem; font-weight: 700; color: var(--amber-600);
  cursor: pointer; margin-top: 9px; transition: all .15s;
}
.btn-autofill:hover { background: var(--amber-50); border-style: solid; }

/* Form footer */
.form-footer-btns { display: flex; flex-direction: column; gap: 9px; padding-top: 18px; border-top: 1px solid var(--slate-100); }
.btn-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--teal-600), var(--teal-500));
  color: #fff; border: none; border-radius: 10px;
  padding: 12px; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .9rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(13,148,136,.28); transition: all .15s;
}
.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(13,148,136,.36); }
.btn-back {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--slate-100); color: var(--slate-600);
  border: 1px solid var(--slate-200); border-radius: 10px;
  padding: 10px; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .84rem; font-weight: 700; text-decoration: none;
  transition: all .15s;
}
.btn-back:hover { background: var(--slate-200); color: var(--slate-800); }

/* Sidebar cards */
.sidebar-card {
  background: #fff; border-radius: 14px;
  border: 1px solid var(--slate-200); box-shadow: var(--card-shadow);
  overflow: hidden; margin-bottom: 16px;
  animation: fadeUp .4s .15s ease both;
}
.sidebar-card:last-child { margin-bottom: 0; }
.sidebar-card-head {
  padding: 13px 16px; border-bottom: 1px solid var(--slate-100);
  font-size: .84rem; font-weight: 800; color: var(--slate-700);
  display: flex; align-items: center; gap: 7px;
}
.sidebar-card-head i.teal  { color: var(--teal-600); }
.sidebar-card-head i.amber { color: var(--amber-500); }
.sidebar-card-body { padding: 14px 16px; }

/* Tips list */
.tips-list { list-style: none; margin: 0; padding: 0; }
.tips-list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .8rem; color: var(--slate-600); line-height: 1.45;
  padding: 6px 0; border-bottom: 1px solid var(--slate-100);
}
.tips-list li:last-child { border-bottom: none; padding-bottom: 0; }
.tips-list li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal-400); flex-shrink: 0; margin-top: 6px;
}

/* Kas saldo item */
.kas-saldo-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--slate-100);
  gap: 8px;
}
.kas-saldo-item:last-child { border-bottom: none; }
.kas-saldo-item .kas-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: .7rem; font-weight: 700;
}
.kas-saldo-item .saldo-val { font-size: .82rem; font-weight: 700; }
.kas-saldo-item .saldo-val.pos { color: var(--green-500); }
.kas-saldo-item .saldo-val.neg { color: var(--red-500); }

.ks-subtotal {
  display: flex; justify-content: space-between;
  padding: 7px 0 0; margin-top: 4px;
  border-top: 1px dashed var(--slate-200);
  font-size: .78rem;
}
.ks-subtotal .st-label { color: var(--slate-400); font-weight: 600; }
.ks-subtotal .st-val   { font-weight: 800; color: var(--slate-700); }

.kas-group-label {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--slate-400); margin: 12px 0 6px;
}
.kas-group-label:first-child { margin-top: 0; }

.total-tersedia {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-radius: 9px; margin-top: 10px;
}
.total-tersedia.ok  { background: var(--green-50);  border: 1px solid #86efac; }
.total-tersedia.err { background: var(--red-50); border: 1px solid #fca5a5; }
.total-tersedia .tt-label { font-size: .78rem; font-weight: 700; color: var(--slate-600); }
.total-tersedia .tt-val   { font-size: .88rem; font-weight: 800; }
.total-tersedia.ok  .tt-val { color: var(--green-600); }
.total-tersedia.err .tt-val { color: var(--red-500); }
.kekurangan-note {
  text-align: center; margin-top: 7px;
  font-size: .76rem; color: var(--red-500); font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}

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

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 1099px) {
  .pp-layout { grid-template-columns: 1fr; }
  .pp-sidebar { order: -1; }
  .pp-sidebar .sidebar-card { animation-delay: 0s; }
}
@media (max-width: 767px) {
  .info-grid { grid-template-columns: 1fr; gap: 10px; }
  .info-grid.cols3 { grid-template-columns: 1fr 1fr; }
  .pp-page-header h4 .page-title { display: none; }
}
@media (max-width: 500px) {
  .info-grid.cols3 { grid-template-columns: 1fr; }
  .da-chips { flex-direction: column; }
  .pp-card-body { padding: 14px; }
}
</style>

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

  <!-- ── Page Header ── -->
  <div class="pp-page-header">
    <div>
      <h4>
        <div class="head-icon"><i class="bi bi-check2-circle"></i></div>
        <span class="page-title"><?php echo $title; ?></span>
      </h4>
      <div class="pp-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/pengajuan'); ?>">Pengajuan</a>
        <span class="sep">›</span>
        <span class="current">Proses</span>
      </div>
    </div>
  </div>

  <!-- ── Alert Dana Tidak Mencukupi ── -->
  <?php if(!$dana_mencukupi): ?>
  <div class="dana-alert" id="danaAlert">
    <i class="bi bi-exclamation-octagon-fill da-icon"></i>
    <div class="da-text">
      <strong><i class="bi bi-lock me-1"></i>Dana Kas Tidak Mencukupi — Pengajuan Tidak Dapat Disetujui</strong>
      <div class="da-chips">
        <span class="da-chip"><i class="bi bi-arrow-down-circle"></i> Dibutuhkan: <strong>Rp <?php echo number_format($pengajuan->nominal_pengajuan, 0, ',', '.'); ?></strong></span>
        <span class="da-chip"><i class="bi bi-wallet2"></i> Tersedia: <strong>Rp <?php echo number_format($cek_dana['total_tersedia'], 0, ',', '.'); ?></strong></span>
        <span class="da-chip danger"><i class="bi bi-exclamation-triangle"></i> Kekurangan: <strong>Rp <?php echo number_format($cek_dana['kekurangan'], 0, ',', '.'); ?></strong></span>
      </div>
    </div>
    <button class="da-close" onclick="this.closest('.dana-alert').remove()"><i class="bi bi-x-lg"></i></button>
  </div>
  <?php endif; ?>

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

    <!-- LEFT: Detail Pengajuan + Form Keputusan -->
    <div class="pp-main">

      <!-- Detail Pengajuan -->
      <div class="pp-card">
        <div class="pp-card-head teal">
          <h5>
            <i class="bi bi-file-earmark-text-fill teal"></i>
            Detail Pengajuan
            <span class="badge-kode ms-1"><?php echo htmlspecialchars($pengajuan->kode_pengajuan); ?></span>
          </h5>
          <span class="badge-pending ms-auto"><i class="bi bi-clock"></i> Pending</span>
        </div>
        <div class="pp-card-body">

          <!-- Info Umum -->
          <div class="pp-section">
            <div class="info-grid">
              <div class="info-item">
                <label>Tanggal Pengajuan</label>
                <div class="val"><?php echo date('d F Y', strtotime($pengajuan->tanggal_pengajuan)); ?></div>
              </div>
              <div class="info-item">
                <label>Jenis Pinjaman</label>
                <div class="val"><span class="badge-jenis"><i class="bi bi-tag-fill"></i><?php echo htmlspecialchars($jenis->nama_pinjaman); ?></span></div>
              </div>
            </div>
          </div>

          <hr class="pp-divider">

          <!-- Data Pemohon -->
          <div class="pp-section">
            <div class="pp-section-title"><i class="bi bi-person-fill"></i> Data Pemohon</div>
            <div class="info-grid">
              <div class="info-item">
                <label>Nama Lengkap</label>
                <div class="val"><?php echo htmlspecialchars($warga->nama_lengkap); ?></div>
              </div>
              <div class="info-item">
                <label>NIK</label>
                <div class="val"><?php echo $warga->nik ?? '-'; ?></div>
              </div>
              <div class="info-item">
                <label>Alamat</label>
                <div class="val"><?php echo htmlspecialchars($warga->alamat ?? '-'); ?></div>
              </div>
              <div class="info-item">
                <label>No. Telepon</label>
                <div class="val"><?php echo $warga->no_telepon ?? $warga->no_hp ?? '-'; ?></div>
              </div>
            </div>
          </div>

          <hr class="pp-divider">

          <!-- Detail Pinjaman -->
          <div class="pp-section">
            <div class="pp-section-title"><i class="bi bi-cash-coin"></i> Detail Pinjaman</div>
            <div class="info-grid cols3" style="margin-bottom:14px;">
              <div class="info-item">
                <label>Nominal Pengajuan</label>
                <div class="val teal">Rp <?php echo number_format($pengajuan->nominal_pengajuan, 0, ',', '.'); ?></div>
              </div>
              <div class="info-item">
                <label>Tenor</label>
                <div class="val big"><?php echo $pengajuan->tenor; ?> bulan</div>
              </div>
              <div class="info-item">
                <label>Bunga</label>
                <div class="val big"><?php echo $pengajuan->bunga_persen; ?>% / bulan</div>
              </div>
              <div class="info-item">
                <label>Total Bunga</label>
                <div class="val red">Rp <?php echo number_format($pengajuan->total_pinjaman - $pengajuan->nominal_pengajuan, 0, ',', '.'); ?></div>
              </div>
              <div class="info-item">
                <label>Total Pinjaman</label>
                <div class="val red">Rp <?php echo number_format($pengajuan->total_pinjaman, 0, ',', '.'); ?></div>
              </div>
              <div class="info-item">
                <label>Angsuran / Bulan</label>
                <div class="val green">Rp <?php echo number_format($pengajuan->angsuran_per_bulan, 0, ',', '.'); ?></div>
              </div>
            </div>

            <div class="info-item" style="margin-bottom:12px;">
              <label>Keperluan Pinjaman</label>
              <div class="info-box"><?php echo nl2br(htmlspecialchars($pengajuan->keperluan)); ?></div>
            </div>

            <?php if(!empty($pengajuan->jaminan)): ?>
            <div class="info-item">
              <label>Jaminan</label>
              <div class="info-box"><?php echo nl2br(htmlspecialchars($pengajuan->jaminan)); ?></div>
            </div>
            <?php endif; ?>
          </div>

        </div>
      </div><!-- /.pp-card detail -->

      <!-- Form Keputusan -->
      <div class="pp-card">
        <div class="pp-card-head plain">
          <h5><i class="bi bi-check2-circle green"></i> Form Keputusan</h5>
        </div>
        <div class="pp-card-body">
          <form method="post" id="formKeputusan">

            <!-- Status -->
            <div style="margin-bottom:18px;">
              <div class="f-label">Status Keputusan <span class="req">*</span></div>

              <label class="radio-option" id="labelSetuju">
                <input type="radio" name="status_pengajuan" id="setuju" value="disetujui"
                  <?php echo !$dana_mencukupi ? 'disabled' : ''; ?> required>
                <div>
                  <div class="ro-title"><i class="bi bi-check-circle-fill" style="color:var(--green-500);"></i> Setujui Pengajuan</div>
                  <?php if(!$dana_mencukupi): ?>
                  <div class="ro-sub danger"><i class="bi bi-lock me-1"></i>Terkunci – dana kas tidak mencukupi</div>
                  <?php else: ?>
                  <div class="ro-sub">Pinjaman akan disetujui dan dicairkan dari kas</div>
                  <?php endif; ?>
                </div>
              </label>

              <label class="radio-option" id="labelTolak">
                <input type="radio" name="status_pengajuan" id="tolak" value="ditolak" required>
                <div>
                  <div class="ro-title"><i class="bi bi-x-circle-fill" style="color:var(--red-500);"></i> Tolak Pengajuan</div>
                  <div class="ro-sub">Pengajuan ditolak, alasan akan disampaikan ke pemohon</div>
                </div>
              </label>
            </div>

            <!-- Alasan Penolakan -->
            <div id="boxPenolakan" style="display:none;margin-bottom:18px;">
              <div class="f-label">Alasan Penolakan <span class="req">*</span></div>
              <textarea name="keterangan_penolakan" class="f-textarea"
                placeholder="Jelaskan alasan penolakan kepada pemohon..."></textarea>
              <div class="f-hint"><i class="bi bi-info-circle me-1"></i>Alasan ini akan disampaikan kepada pemohon</div>
            </div>

            <!-- Persetujuan: Mode Pencairan -->
            <div id="boxSetuju" style="display:none;">
              <div class="f-label">Mode Pencairan</div>

              <label class="mode-option selected-auto" id="lblModeAuto">
                <input type="radio" name="mode_pencairan" id="modeAuto" value="auto" checked>
                <div>
                  <div class="mo-title"><i class="bi bi-magic" style="color:var(--teal-500);"></i> Otomatis</div>
                  <div class="mo-sub">Sistem memilih kas terbaik secara otomatis</div>
                </div>
              </label>

              <label class="mode-option" id="lblModeManual">
                <input type="radio" name="mode_pencairan" id="modeManual" value="manual">
                <div>
                  <div class="mo-title"><i class="bi bi-hand-index-thumb" style="color:var(--amber-500);"></i> Manual (Multi Kas)</div>
                  <div class="mo-sub">Pilih sendiri sumber kas dan nominalnya</div>
                </div>
              </label>

              <!-- Preview Otomatis -->
              <div class="preview-auto-box" id="previewAuto">
                <div class="pa-title"><i class="bi bi-coin"></i> Sumber Dana (Otomatis)</div>
                <div id="previewAutoList">
                  <div style="text-align:center;color:var(--slate-400);font-size:.8rem;padding:6px 0;">
                    <i class="bi bi-arrow-clockwise me-1"></i>Menghitung...
                  </div>
                </div>
              </div>

              <!-- Manual -->
              <div class="manual-box" id="formManual" style="display:none;">
                <div class="mb-title">
                  <span><i class="bi bi-wallet2 me-1"></i>Pilih Sumber Kas</span>
                  <button type="button" class="btn-add-kas" id="btnTambahKas">
                    <i class="bi bi-plus-circle"></i> Tambah Kas
                  </button>
                </div>
                <div id="kasManualContainer"></div>

                <div class="manual-summary" id="manualSummary">
                  <div class="manual-summary-row">
                    <span class="ms-label">Target pencairan</span>
                    <strong style="color:var(--teal-700);">Rp <?php echo number_format($pengajuan->nominal_pengajuan, 0, ',', '.'); ?></strong>
                  </div>
                  <div class="manual-summary-row">
                    <span class="ms-label">Total input</span>
                    <strong id="totalManualText" style="color:var(--slate-400);">Rp 0</strong>
                  </div>
                </div>

                <div class="alert-manual danger" id="warningManual" style="display:none;">
                  <i class="bi bi-exclamation-triangle"></i>
                  <span id="warningManualText"></span>
                </div>
                <div class="alert-manual success" id="successManual" style="display:none;">
                  <i class="bi bi-check-circle-fill"></i> Total sudah sesuai!
                </div>

                <button type="button" class="btn-autofill" id="btnAutoFill">
                  <i class="bi bi-magic"></i> Isi Otomatis dari Kas Terbaik
                </button>
              </div>

            </div><!-- /#boxSetuju -->

            <!-- Footer -->
            <div class="form-footer-btns">
              <button type="submit" class="btn-submit" id="btnSubmit">
                <i class="bi bi-send-fill"></i> Simpan Keputusan
              </button>
              <a href="<?php echo base_url('pinjaman/pengajuan'); ?>" class="btn-back">
                <i class="bi bi-arrow-left"></i> Kembali ke Pengajuan
              </a>
            </div>

          </form>
        </div>
      </div><!-- /.pp-card form -->

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

    <!-- RIGHT SIDEBAR -->
    <div class="pp-sidebar">

      <!-- Tips Verifikasi -->
      <div class="sidebar-card">
        <div class="sidebar-card-head">
          <i class="bi bi-lightbulb-fill amber"></i> Tips Verifikasi
        </div>
        <div class="sidebar-card-body">
          <ul class="tips-list">
            <li>Periksa kemampuan bayar pemohon berdasarkan penghasilan</li>
            <li>Cek riwayat pinjaman sebelumnya di sistem</li>
            <li>Verifikasi keaslian dan nilai jaminan yang diberikan</li>
            <li>Pertimbangkan keperluan pinjaman apakah wajar</li>
          </ul>
        </div>
      </div>

      <!-- Ketersediaan Kas -->
      <div class="sidebar-card">
        <div class="sidebar-card-head">
          <i class="bi bi-bank2 teal"></i> Ketersediaan Kas
        </div>
        <div class="sidebar-card-body">

          <?php if(!empty($kas_tabungan_list)): ?>
          <div class="kas-group-label">Kas Tabungan Warga</div>
          <?php foreach($kas_tabungan_list as $k): ?>
          <div class="kas-saldo-item">
            <span class="kas-pill" style="background:<?php echo $k->warna; ?>22;color:<?php echo $k->warna; ?>;border:1px solid <?php echo $k->warna; ?>44;">
              <i class="bi <?php echo $k->icon ?? 'bi-wallet2'; ?>"></i> <?php echo $k->kode; ?>
            </span>
            <span class="saldo-val <?php echo $k->saldo_realtime < 0 ? 'neg' : 'pos'; ?>">
              Rp <?php echo number_format($k->saldo_realtime, 0, ',', '.'); ?>
            </span>
          </div>
          <?php endforeach; ?>
          <div class="ks-subtotal">
            <span class="st-label">Total tabungan</span>
            <span class="st-val">Rp <?php echo number_format($cek_dana['total_tabungan'], 0, ',', '.'); ?></span>
          </div>
          <?php endif; ?>

          <?php if(!empty($kas_operasional_list)): ?>
          <div class="kas-group-label" style="margin-top:14px;">Kas RT / Operasional</div>
          <?php foreach($kas_operasional_list as $k): ?>
          <div class="kas-saldo-item">
            <span class="kas-pill" style="background:<?php echo $k->warna; ?>22;color:<?php echo $k->warna; ?>;border:1px solid <?php echo $k->warna; ?>44;">
              <i class="bi <?php echo $k->icon ?? 'bi-wallet2'; ?>"></i> <?php echo $k->kode; ?>
            </span>
            <span class="saldo-val <?php echo $k->saldo_realtime < 0 ? 'neg' : 'pos'; ?>">
              Rp <?php echo number_format($k->saldo_realtime, 0, ',', '.'); ?>
            </span>
          </div>
          <?php endforeach; ?>
          <div class="ks-subtotal">
            <span class="st-label">Total kas RT</span>
            <span class="st-val">Rp <?php echo number_format($cek_dana['total_rt'], 0, ',', '.'); ?></span>
          </div>
          <?php endif; ?>

          <div class="total-tersedia <?php echo $dana_mencukupi ? 'ok' : 'err'; ?>">
            <span class="tt-label">Total Dana Tersedia</span>
            <span class="tt-val">Rp <?php echo number_format($cek_dana['total_tersedia'], 0, ',', '.'); ?></span>
          </div>

          <?php if(!$dana_mencukupi): ?>
          <div class="kekurangan-note">
            <i class="bi bi-exclamation-triangle-fill"></i>
            Kurang Rp <?php echo number_format($cek_dana['kekurangan'], 0, ',', '.'); ?>
          </div>
          <?php endif; ?>

        </div>
      </div>

    </div><!-- /.pp-sidebar -->

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

</div><!-- /.pp-wrapper -->
<!-- Modal Konfirmasi Keputusan Pinjaman -->
<div class="modal fade" id="modalKonfirmasiKeputusan" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
    <div class="modal-content" style="border-radius:16px;border:none;overflow:hidden;font-family:'Plus Jakarta Sans',sans-serif;">
      <div class="modal-header" id="modalKeputusanHeader" style="padding:18px 20px;">
        <div class="d-flex align-items-center gap-2">
          <div id="modalKeputusanIconWrap" style="width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;">
            <i id="modalKeputusanIcon" class="bi" style="font-size:1rem;"></i>
          </div>
          <h6 class="modal-title mb-0 fw-bold" id="modalKeputusanTitle" style="font-size:.95rem;"></h6>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body" style="padding:20px;">
        <div id="modalKeputusanBody" style="font-size:.85rem;color:#334155;line-height:1.6;"></div>
      </div>
      <div class="modal-footer" style="border:none;padding:0 20px 18px;gap:8px;">
        <button type="button" class="btn" data-bs-dismiss="modal"
          style="border-radius:8px;border:1.5px solid #e5e7eb;font-size:.82rem;font-weight:600;color:#64748b;padding:7px 18px;flex:1;">
          <i class="bi bi-x-lg me-1"></i>Batal
        </button>
        <button type="button" id="btnKonfirmasiKeputusan"
          style="border-radius:8px;border:none;font-size:.82rem;font-weight:700;color:#fff;padding:7px 18px;flex:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;">
          <i id="btnKeputusanIcon" class="bi"></i>
          <span id="btnKeputusanLabel">Ya</span>
        </button>
      </div>
    </div>
  </div>
</div>
<script>
// ── Data PHP ──────────────────────────────────────────────────────────────
const kasTabungan    = <?php echo json_encode(array_values($kas_tabungan_list)); ?>;
const kasOperasional = <?php echo json_encode(array_values($kas_operasional_list)); ?>;
const semuaKas       = [...kasTabungan, ...kasOperasional];
const nominalCair    = <?php echo (float)$pengajuan->nominal_pengajuan; ?>;
const danaOk         = <?php echo $dana_mencukupi ? 'true' : 'false'; ?>;

// ── Helpers ───────────────────────────────────────────────────────────────
function fmt(n) { return Math.round(n).toLocaleString('id-ID'); }

// ── Radio Setuju / Tolak ──────────────────────────────────────────────────
const radioSetuju  = document.getElementById('setuju');
const radioTolak   = document.getElementById('tolak');
const boxPenolakan = document.getElementById('boxPenolakan');
const boxSetuju    = document.getElementById('boxSetuju');
const lblSetuju    = document.getElementById('labelSetuju');
const lblTolak     = document.getElementById('labelTolak');

function handleRadioChange() {
  const val = document.querySelector('[name="status_pengajuan"]:checked')?.value;

  lblSetuju.className = 'radio-option' + (val === 'disetujui' ? ' selected-setuju' : '') + (!danaOk ? ' disabled-opt' : '');
  lblTolak.className  = 'radio-option' + (val === 'ditolak'   ? ' selected-tolak'  : '');

  if (val === 'disetujui') {
    boxPenolakan.style.display = 'none';
    boxSetuju.style.display    = 'block';
    document.querySelector('[name="keterangan_penolakan"]').removeAttribute('required');
    updatePreviewAuto();
  } else if (val === 'ditolak') {
    boxPenolakan.style.display = 'block';
    boxSetuju.style.display    = 'none';
    document.querySelector('[name="keterangan_penolakan"]').setAttribute('required', 'required');
  }
}

radioSetuju?.addEventListener('change', handleRadioChange);
radioTolak.addEventListener('change', handleRadioChange);

// ── Mode Pencairan ────────────────────────────────────────────────────────
const elModeAuto   = document.getElementById('modeAuto');
const elModeManual = document.getElementById('modeManual');
const lblModeAuto  = document.getElementById('lblModeAuto');
const lblModeManual= document.getElementById('lblModeManual');
const elPreviewAuto= document.getElementById('previewAuto');
const elFormManual = document.getElementById('formManual');

elModeAuto.addEventListener('change', function() {
  if (!this.checked) return;
  elPreviewAuto.style.display  = 'block';
  elFormManual.style.display   = 'none';
  lblModeAuto.className   = 'mode-option selected-auto';
  lblModeManual.className = 'mode-option';
});

elModeManual.addEventListener('change', function() {
  if (!this.checked) return;
  elPreviewAuto.style.display  = 'none';
  elFormManual.style.display   = 'block';
  lblModeAuto.className   = 'mode-option';
  lblModeManual.className = 'mode-option selected-manual';
  if (!document.querySelectorAll('.kas-manual-item').length) tambahKasManual();
});

// ── Hitung Otomatis ───────────────────────────────────────────────────────
function hitungOtomatis(nominal) {
  let sisa = nominal;
  const hasil = [];

  const tabSorted = [...kasTabungan].sort((a, b) => b.saldo_realtime - a.saldo_realtime);
  for (const kas of tabSorted) {
    if (sisa <= 0) break;
    const tersedia = Math.max(0, Number(kas.saldo_realtime));
    if (tersedia > 0) {
      const ambil = Math.min(sisa, tersedia);
      hasil.push({ kas, nominal: ambil });
      sisa -= ambil;
    }
  }

  if (sisa > 0) {
    const rtSorted = [...kasOperasional].sort((a, b) => {
      if (a.kode.toUpperCase() === 'TUNAI') return -1;
      if (b.kode.toUpperCase() === 'TUNAI') return 1;
      return Number(b.saldo_realtime) - Number(a.saldo_realtime);
    });
    for (const kas of rtSorted) {
      if (sisa <= 0) break;
      const tersedia = Math.max(0, Number(kas.saldo_realtime));
      if (tersedia > 0) {
        const ambil = Math.min(sisa, tersedia);
        hasil.push({ kas, nominal: ambil });
        sisa -= ambil;
      }
    }
  }

  return { detail: hasil, sisa };
}

// ── Preview Otomatis UI ───────────────────────────────────────────────────
function updatePreviewAuto() {
  const result = hitungOtomatis(nominalCair);
  const el     = document.getElementById('previewAutoList');
  let html     = '';

  if (!result.detail.length) {
    html = `<div class="alert-manual danger"><i class="bi bi-exclamation-triangle"></i> Tidak ada kas tersedia!</div>`;
  } else {
    result.detail.forEach(item => {
      const warna = item.kas.warna || '#14b8a6';
      html += `
        <div class="preview-row">
          <div class="pr-kas">
            <div class="kas-dot" style="background:${warna};"></div>
            <span class="kas-kode" style="background:${warna}22;color:${warna};">${item.kas.kode}</span>
            <span class="kas-nama">${item.kas.nama}</span>
          </div>
          <span class="pr-nominal">Rp ${fmt(item.nominal)}</span>
        </div>`;
    });

    if (result.sisa > 0) {
      html += `<div class="alert-manual danger mt-2"><i class="bi bi-exclamation-triangle"></i> Dana kurang Rp ${fmt(result.sisa)}</div>`;
    } else {
      html += `
        <div class="preview-divider"></div>
        <div class="preview-total">
          <span class="pt-label"><i class="bi bi-check-circle-fill me-1"></i>Total dicairkan</span>
          <span class="pt-val">Rp ${fmt(nominalCair)}</span>
        </div>`;
    }
  }
  el.innerHTML = html;
}

// ── Manual Kas ────────────────────────────────────────────────────────────
let kasCounter = 0;

document.getElementById('btnTambahKas').addEventListener('click', () => tambahKasManual());

function tambahKasManual(kasId = '', nominal = 0) {
  kasCounter++;
  const idx = kasCounter;
  const container = document.getElementById('kasManualContainer');

  const optHtml = semuaKas.map(k => {
    const sp = Math.max(0, Number(k.saldo_realtime));
    const dis = sp <= 0 ? 'disabled' : '';
    const lbl = sp <= 0
      ? `${k.kode} — ${k.nama} (Saldo kosong)`
      : `${k.kode} — ${k.nama} (Rp ${fmt(k.saldo_realtime)})`;
    return `<option value="${k.id}" data-saldo="${k.saldo_realtime}" data-kode="${k.kode}" data-nama="${k.nama}" ${dis} ${k.id == kasId ? 'selected' : ''}>${lbl}</option>`;
  }).join('');

  const div = document.createElement('div');
  div.className = 'kas-manual-item';
  div.dataset.index = idx;
  div.innerHTML = `
    <div style="display:flex;gap:8px;align-items:flex-start;">
      <div style="flex:1;min-width:0;">
        <select name="kas_id[]" class="manual-select kas-select" required>
          <option value="">-- Pilih Kas --</option>
          ${optHtml}
        </select>
        <div class="manual-input-wrap">
          <span class="manual-prefix">Rp</span>
          <input type="number" name="kas_nominal[]" class="manual-input kas-nominal"
            placeholder="0" value="${nominal}" min="1" step="1" required>
        </div>
        <div class="saldo-info"></div>
      </div>
      <button type="button" class="btn-remove-kas" onclick="hapusKasManual(${idx})">
        <i class="bi bi-trash"></i>
      </button>
    </div>`;

  container.appendChild(div);

  const sel = div.querySelector('.kas-select');
  const inp = div.querySelector('.kas-nominal');

  sel.addEventListener('change', function() {
    const opt   = this.options[this.selectedIndex];
    const saldo = parseFloat(opt.dataset.saldo || 0);
    inp.max     = Math.max(0, saldo);
    const info  = div.querySelector('.saldo-info');
    if (saldo < 0) {
      info.innerHTML = `<span style="color:var(--red-500);">⚠ Saldo minus, tidak dapat digunakan</span>`;
    } else {
      info.innerHTML = `<span style="color:var(--green-500);">Tersedia: Rp ${fmt(Math.max(0, saldo))}</span>`;
    }
    updateTotalManual();
  });

  inp.addEventListener('input', updateTotalManual);
  if (kasId) sel.dispatchEvent(new Event('change'));
  updateTotalManual();
}

function hapusKasManual(idx) {
  const el = document.querySelector(`.kas-manual-item[data-index="${idx}"]`);
  if (el) { el.remove(); updateTotalManual(); }
}

function updateTotalManual() {
  let total = 0;
  document.querySelectorAll('.kas-manual-item').forEach(item => {
    total += parseFloat(item.querySelector('.kas-nominal').value) || 0;
  });

  const txtEl  = document.getElementById('totalManualText');
  const warnEl = document.getElementById('warningManual');
  const warnTx = document.getElementById('warningManualText');
  const okEl   = document.getElementById('successManual');

  txtEl.textContent = 'Rp ' + fmt(total);

  if (Math.abs(total - nominalCair) <= 1) {
    warnEl.style.display = 'none';
    okEl.style.display   = 'flex';
    txtEl.style.color    = 'var(--green-600)';
  } else {
    okEl.style.display   = 'none';
    warnEl.style.display = 'flex';
    txtEl.style.color    = 'var(--red-500)';
    warnTx.textContent   = total < nominalCair
      ? `Kurang Rp ${fmt(nominalCair - total)}`
      : `Kelebihan Rp ${fmt(total - nominalCair)}`;
  }
}

document.getElementById('btnAutoFill').addEventListener('click', function() {
  document.querySelectorAll('.kas-manual-item').forEach(el => el.remove());
  const result = hitungOtomatis(nominalCair);
  if (!result.detail.length) { alert('Tidak ada kas yang tersedia!'); return; }
  result.detail.forEach(item => tambahKasManual(item.kas.id, item.nominal));
});

// ── Submit Validasi ───────────────────────────────────────────────────────
// ── Submit Validasi ───────────────────────────────────────────────────────
var _bsModalKeputusan = null;
var _pendingSubmit    = false;

function showKonfirmasiKeputusan(cfg, onConfirm) {
  var modalEl = document.getElementById('modalKonfirmasiKeputusan');
  if (!modalEl) return;

  // Header
  var header = document.getElementById('modalKeputusanHeader');
  if (header) { header.style.background = cfg.headerBg; header.style.borderBottom = '1.5px solid ' + cfg.headerBorder; }

  // Icon
  var iconWrap = document.getElementById('modalKeputusanIconWrap');
  if (iconWrap) { iconWrap.style.background = cfg.iconBg; }
  var icon = document.getElementById('modalKeputusanIcon');
  if (icon) { icon.className = 'bi ' + cfg.icon; icon.style.color = cfg.iconColor; }

  // Title
  var title = document.getElementById('modalKeputusanTitle');
  if (title) { title.textContent = cfg.title; title.style.color = cfg.titleColor; }

  // Body
  var body = document.getElementById('modalKeputusanBody');
  if (body) body.innerHTML = cfg.body;

  // Button
  var btn = document.getElementById('btnKonfirmasiKeputusan');
  if (btn) { btn.style.background = cfg.btnBg; btn.style.boxShadow = '0 4px 12px ' + cfg.btnShadow; }
  var btnIcon = document.getElementById('btnKeputusanIcon');
  if (btnIcon) btnIcon.className = 'bi ' + cfg.btnIcon;
  var btnLabel = document.getElementById('btnKeputusanLabel');
  if (btnLabel) btnLabel.textContent = cfg.btnLabel;

  // Confirm handler
  var confirmBtn = document.getElementById('btnKonfirmasiKeputusan');
  var newBtn = confirmBtn.cloneNode(true); // hapus listener lama
  confirmBtn.parentNode.replaceChild(newBtn, confirmBtn);
  document.getElementById('btnKonfirmasiKeputusan').style.background   = cfg.btnBg;
  document.getElementById('btnKonfirmasiKeputusan').style.boxShadow    = '0 4px 12px ' + cfg.btnShadow;
  document.getElementById('btnKonfirmasiKeputusan').addEventListener('click', function() {
    if (_bsModalKeputusan) _bsModalKeputusan.hide();
    onConfirm();
  });
  // Re-set icon & label di newBtn
  var newBtnIcon = document.getElementById('btnKonfirmasiKeputusan').querySelector('i');
  if (newBtnIcon) newBtnIcon.className = 'bi ' + cfg.btnIcon;
  var newBtnLabel = document.getElementById('btnKonfirmasiKeputusan').querySelector('span');
  if (newBtnLabel) newBtnLabel.textContent = cfg.btnLabel;

  if (!_bsModalKeputusan) _bsModalKeputusan = new bootstrap.Modal(modalEl);
  _bsModalKeputusan.show();
}

document.getElementById('formKeputusan').addEventListener('submit', function(e) {
  e.preventDefault(); // selalu prevent dulu

  var statusEl = document.querySelector('[name="status_pengajuan"]:checked');
  if (!statusEl) { alert('Pilih status keputusan terlebih dahulu!'); return; }

  if (statusEl.value === 'disetujui') {
    var mode = document.querySelector('[name="mode_pencairan"]:checked').value;

    if (mode === 'manual') {
      var items = document.querySelectorAll('.kas-manual-item');
      if (!items.length) { alert('Pilih minimal 1 sumber kas!'); return; }

      var total = 0, allValid = true;
      items.forEach(function(item) {
        var kasId = item.querySelector('.kas-select').value;
        var nom   = parseFloat(item.querySelector('.kas-nominal').value) || 0;
        if (!kasId || nom <= 0) allValid = false;
        total += nom;
      });

      if (!allValid) { alert('Setiap baris kas harus dipilih dan nominal > 0!'); return; }
      if (Math.abs(total - nominalCair) > 1) {
        alert('Total tidak sesuai!\nTarget: Rp ' + fmt(nominalCair) + '\nTotal : Rp ' + fmt(total));
        return;
      }

      showKonfirmasiKeputusan({
        title:       'Konfirmasi Pencairan Manual',
        titleColor:  '#92400e',
        headerBg:    '#fffbeb',
        headerBorder:'#fde68a',
        iconBg:      '#fef3c7',
        iconColor:   '#d97706',
        icon:        'bi-hand-index-thumb-fill',
        body:        '<p style="margin-bottom:10px;">Anda akan mencairkan pinjaman secara <strong>manual</strong> dari ' + items.length + ' sumber kas.</p>'
                   + '<div style="background:#fef3c7;border:1.5px solid #fde68a;border-radius:8px;padding:10px 14px;font-weight:700;color:#92400e;">'
                   + '<i class="bi bi-wallet2 me-1"></i>Total: Rp ' + fmt(total) + '</div>',
        btnBg:       'linear-gradient(135deg,#d97706,#f59e0b)',
        btnShadow:   'rgba(245,158,11,.28)',
        btnIcon:     'bi-check-circle-fill',
        btnLabel:    'Ya, Cairkan',
      }, function() {
        document.getElementById('formKeputusan').submit();
      });

    } else {
      var result = hitungOtomatis(nominalCair);
      if (result.sisa > 0) { alert('Dana tidak mencukupi! Kekurangan: Rp ' + fmt(result.sisa)); return; }

      showKonfirmasiKeputusan({
        title:       'Setujui Pengajuan',
        titleColor:  '#166534',
        headerBg:    '#f0fdf4',
        headerBorder:'#bbf7d0',
        iconBg:      '#dcfce7',
        iconColor:   '#16a34a',
        icon:        'bi-check-circle-fill',
        body:        '<p style="margin-bottom:10px;">Anda akan <strong>menyetujui</strong> pengajuan ini dengan pencairan <strong>otomatis</strong>.</p>'
                   + '<div style="background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:8px;padding:10px 14px;font-size:.82rem;color:#166534;">'
                   + '<i class="bi bi-magic me-1"></i>Sistem akan memilih kas terbaik secara otomatis.</div>',
        btnBg:       'linear-gradient(135deg,#059669,#10b981)',
        btnShadow:   'rgba(16,185,129,.28)',
        btnIcon:     'bi-check-circle-fill',
        btnLabel:    'Ya, Setujui',
      }, function() {
        document.getElementById('formKeputusan').submit();
      });
    }

  } else {
    var alasan = document.querySelector('[name="keterangan_penolakan"]').value.trim();
    if (!alasan) { alert('Alasan penolakan wajib diisi!'); return; }

    showKonfirmasiKeputusan({
      title:       'Tolak Pengajuan',
      titleColor:  '#991b1b',
      headerBg:    '#fef2f2',
      headerBorder:'#fecaca',
      iconBg:      '#fee2e2',
      iconColor:   '#dc2626',
      icon:        'bi-x-circle-fill',
      body:        '<p style="margin-bottom:10px;">Anda akan <strong>menolak</strong> pengajuan ini.</p>'
                 + '<div style="background:#fef2f2;border:1.5px solid #fecaca;border-radius:8px;padding:10px 14px;font-size:.82rem;color:#991b1b;">'
                 + '<i class="bi bi-info-circle me-1"></i>Pemohon akan diberitahu alasan penolakan.</div>',
      btnBg:       'linear-gradient(135deg,#dc2626,#ef4444)',
      btnShadow:   'rgba(220,38,38,.28)',
      btnIcon:     'bi-x-circle-fill',
      btnLabel:    'Ya, Tolak',
    }, function() {
      document.getElementById('formKeputusan').submit();
    });
  }
});

// ── Init ──────────────────────────────────────────────────────────────────
updatePreviewAuto();
</script>