<!-- views/pinjaman/ajukan.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;
  --amber-500: #f59e0b;
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --red-400:  #f87171;
  --red-500:  #ef4444;
  --blue-500: #3b82f6;
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --slate-50: #f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-300:#cbd5e1;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-700:#334155;
  --slate-900:#0f172a;
  --card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.06);
}

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

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

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

/* ── Card ── */
.ajukan-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--slate-200);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  animation: fadeUp .35s ease both;
}
.ajukan-card-head {
  padding: 18px 22px;
  background: linear-gradient(90deg, var(--teal-50), #fff);
  border-bottom: 1px solid rgba(13,148,136,.1);
  display: flex; align-items: center; gap: 10px;
}
.ajukan-card-head h5 {
  margin: 0; font-size: 1rem; font-weight: 800; color: var(--slate-900);
  display: flex; align-items: center; gap: 8px;
}
.ajukan-card-head h5 i { color: var(--teal-600); }
.ajukan-card-body { padding: 22px; }

/* ── Validation Errors ── */
.val-errors {
  background: #fee2e2; border: 1px solid #fca5a5;
  border-radius: 10px; padding: 13px 16px;
  margin-bottom: 20px; font-size: .84rem; color: #991b1b;
}
.val-errors ul { margin: 6px 0 0 16px; padding: 0; }
.val-errors ul li { margin-bottom: 3px; }

/* ── Warga Info Box ── */
.warga-info-box {
  background: linear-gradient(135deg, var(--blue-50), #fff);
  border: 1px solid rgba(59,130,246,.2);
  border-radius: 12px; padding: 16px 18px;
  margin-bottom: 22px;
  display: flex; align-items: flex-start; gap: 14px;
}
.warga-info-icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--blue-100); color: var(--blue-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.warga-info-content { flex: 1; min-width: 0; }
.warga-info-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--blue-500); margin-bottom: 8px;
}
.warga-info-row {
  display: flex; gap: 6px;
  font-size: .84rem; margin-bottom: 4px; align-items: baseline;
}
.warga-info-row:last-child { margin-bottom: 0; }
.warga-info-row .wi-key {
  width: 60px; color: var(--slate-400); font-size: .78rem;
  flex-shrink: 0;
}
.warga-info-row .wi-val { color: var(--slate-800); font-weight: 600; }

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

/* ── Form Fields ── */
.f-group { margin-bottom: 18px; }
.f-label {
  display: flex; align-items: center; gap: 5px;
  font-size: .8rem; font-weight: 700; color: var(--slate-700);
  margin-bottom: 7px;
}
.f-label .req { color: var(--red-500); font-size: .85rem; }
.f-label .opt {
  font-size: .7rem; font-weight: 500; color: var(--slate-400);
  background: var(--slate-100); padding: 1px 6px; border-radius: 4px;
}

.f-control, .f-select, .f-textarea {
  width: 100%;
  background: #fff;
  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);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.f-control:focus, .f-select:focus, .f-textarea:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(20,184,166,.12);
}
.f-control::placeholder, .f-textarea::placeholder { color: var(--slate-300); }
.f-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.f-textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.f-hint { font-size: .74rem; color: var(--slate-400); margin-top: 5px; display: flex; align-items: center; gap: 4px; }
.f-hint.info { color: var(--teal-600); }

/* 2-col row */
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── Simulasi Box ── */
.simulasi-box {
  background: linear-gradient(135deg, #d1fae5, #ecfdf5);
  border: 1px solid #6ee7b7;
  border-radius: 12px; padding: 18px;
  margin-bottom: 22px;
  display: none;
  animation: fadeUp .25s ease;
}
.simulasi-title {
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: #065f46;
  display: flex; align-items: center; gap: 7px; margin-bottom: 16px;
}
.simulasi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.simulasi-item { text-align: center; }
.simulasi-item .s-label {
  font-size: .7rem; font-weight: 600; color: #059669;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}
.simulasi-item .s-value {
  font-size: 1.05rem; font-weight: 800; line-height: 1.2;
}
.simulasi-item .s-value.red   { color: var(--red-500); }
.simulasi-item .s-value.blue  { color: var(--blue-500); }
.simulasi-item .s-value.green { color: var(--green-600); }
.simulasi-divider {
  width: 1px; background: rgba(16,185,129,.25);
  margin: 0 4px;
}

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

/* ── 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 .1s ease both;
}
.sidebar-card:last-child { margin-bottom: 0; }
.sidebar-card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--slate-100);
  font-size: .82rem; font-weight: 800; color: var(--slate-700);
  display: flex; align-items: center; gap: 7px;
}
.sidebar-card-head i { color: var(--teal-600); }
.sidebar-card-head.amber i { color: var(--amber-500); }
.sidebar-card-body { padding: 16px 18px; }

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

/* Jenis pinjaman info */
.jenis-info-wrap { display: none; }
.jenis-info-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--slate-100);
  font-size: .82rem;
}
.jenis-info-item:last-child { border-bottom: none; padding-bottom: 0; }
.jenis-info-item .ji-label { color: var(--slate-400); font-weight: 600; }
.jenis-info-item .ji-val   { font-weight: 700; color: var(--teal-700); }

.jenis-empty {
  text-align: center; padding: 16px 0;
  color: var(--slate-300); font-size: .82rem;
}
.jenis-empty i { font-size: 1.4rem; display: block; margin-bottom: 6px; }

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

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 991px) {
  .ajukan-layout {
    grid-template-columns: 1fr;
  }
  /* sidebar goes below form on tablet/mobile */
  .ajukan-sidebar { order: 2; }
  .ajukan-main    { order: 1; }
}

@media (max-width: 575px) {
  .f-row { grid-template-columns: 1fr; gap: 0; }
  .simulasi-grid { grid-template-columns: 1fr; gap: 10px; }
  .simulasi-item { text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .simulasi-item .s-label { margin-bottom: 0; }
  .simulasi-item .s-value { font-size: .95rem; }
  .form-footer { flex-direction: column-reverse; }
  .form-footer .btn-back,
  .form-footer .btn-submit { width: 100%; justify-content: center; }
  .warga-info-box { flex-direction: column; gap: 10px; }
  .ajukan-card-body { padding: 16px; }
}
</style>

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

  <!-- ── Page Header ── -->
  <div class="ajukan-page-header">
    <div>
      <h4>
        <div class="head-icon"><i class="bi bi-plus-circle-fill"></i></div>
        <span>Form Pengajuan Pinjaman</span>
      </h4>
      <div class="ajukan-breadcrumb">
        <a href="<?php echo base_url('dashboard'); ?>"><i class="bi bi-grid-1x2-fill me-1"></i>Dashboard</a>
        <span class="sep">›</span>
        <a href="<?php echo base_url('pinjaman'); ?>">Pinjaman</a>
        <span class="sep">›</span>
        <span class="current">Ajukan Pinjaman</span>
      </div>
    </div>
  </div>

  <!-- ── Layout ── -->
  <div class="ajukan-layout">

    <!-- MAIN FORM -->
    <div class="ajukan-main">
      <div class="ajukan-card">
        <div class="ajukan-card-head">
          <h5><i class="bi bi-file-earmark-plus-fill"></i> Detail Pengajuan</h5>
        </div>
        <div class="ajukan-card-body">

          <!-- Validation errors -->
          <?php $ve = validation_errors(); if($ve): ?>
          <div class="val-errors">
            <strong><i class="bi bi-exclamation-triangle-fill me-2"></i>Mohon perbaiki data berikut:</strong>
            <?php echo validation_errors('<ul><li>', '</li></ul>'); ?>
          </div>
          <?php endif; ?>

          <!-- Warga Info (role warga) -->
          <?php if(!is_admin()): ?>
          <div class="warga-info-box">
            <div class="warga-info-icon"><i class="bi bi-person-fill"></i></div>
            <div class="warga-info-content">
              <div class="warga-info-label"><i class="bi bi-person-badge me-1"></i>Data Pemohon</div>
              <div class="warga-info-row">
                <span class="wi-key">Nama</span>
                <span class="wi-val"><?php echo htmlspecialchars($warga_saya->nama_lengkap); ?></span>
              </div>
              <div class="warga-info-row">
                <span class="wi-key">NIK</span>
                <span class="wi-val"><?php echo htmlspecialchars($warga_saya->nik); ?></span>
              </div>
              <div class="warga-info-row">
                <span class="wi-key">Alamat</span>
                <span class="wi-val"><?php echo htmlspecialchars($warga_saya->alamat); ?></span>
              </div>
            </div>
          </div>
          <?php endif; ?>

          <form action="" method="post" id="formPengajuan">

            <!-- Pilih Warga (Admin only) -->
            <?php if(is_admin()): ?>
            <div class="form-section">
              <div class="form-section-title"><i class="bi bi-people-fill"></i> Pemohon</div>
              <div class="f-group">
                <label class="f-label">Pilih Warga <span class="req">*</span></label>
                <select name="warga_id" class="f-select" required>
                  <option value="">-- Pilih Warga --</option>
                  <?php foreach($warga as $w): ?>
                  <option value="<?php echo $w->id; ?>">
                    <?php echo htmlspecialchars($w->nama_lengkap); ?> (NIK: <?php echo $w->nik; ?>)
                  </option>
                  <?php endforeach; ?>
                </select>
              </div>
            </div>
            <?php endif; ?>

            <!-- Jenis & Nominal -->
            <div class="form-section">
              <div class="form-section-title"><i class="bi bi-cash-coin"></i> Informasi Pinjaman</div>

              <div class="f-row">
                <div class="f-group">
                  <label class="f-label">Jenis Pinjaman <span class="req">*</span></label>
                  <select name="jenis_pinjaman_id" class="f-select" id="jenisPinjaman" required>
                    <option value="">-- Pilih Jenis --</option>
                    <?php foreach($jenis_pinjaman as $jp): ?>
                    <option value="<?php echo $jp->id; ?>"
                      data-bunga="<?php echo $jp->bunga_persen; ?>"
                      data-max="<?php echo $jp->plafon_max; ?>"
                      data-tenor="<?php echo $jp->tenor_max; ?>">
                      <?php echo htmlspecialchars($jp->nama_pinjaman); ?> (<?php echo $jp->bunga_persen; ?>%/bln)
                    </option>
                    <?php endforeach; ?>
                  </select>
                </div>

                <div class="f-group">
                  <label class="f-label">Nominal Pengajuan <span class="req">*</span></label>
                  <input type="number" name="nominal_pengajuan" class="f-control"
                    id="nominal" required min="100000"
                    placeholder="Contoh: 5000000">
                  <div class="f-hint info" id="infoPlafon" style="display:none;">
                    <i class="bi bi-info-circle"></i> <span></span>
                  </div>
                </div>
              </div>

              <div class="f-group">
                <label class="f-label">Tenor / Jangka Waktu <span class="req">*</span></label>
                <input type="number" name="tenor" class="f-control"
                  id="tenor" required min="1" max="60"
                  placeholder="Contoh: 12 (dalam bulan)">
                <div class="f-hint info" id="infoTenor" style="display:none;">
                  <i class="bi bi-info-circle"></i> <span></span>
                </div>
              </div>
            </div>

            <!-- Simulasi -->
            <div class="simulasi-box" id="simulasiBox">
              <div class="simulasi-title">
                <i class="bi bi-calculator-fill"></i> Simulasi Perhitungan
              </div>
              <div class="simulasi-grid">
                <div class="simulasi-item">
                  <div class="s-label">Total Bunga</div>
                  <div class="s-value red" id="bungaTotal">Rp 0</div>
                </div>
                <div class="simulasi-item">
                  <div class="s-label">Total Pinjaman</div>
                  <div class="s-value blue" id="totalPinjaman">Rp 0</div>
                </div>
                <div class="simulasi-item">
                  <div class="s-label">Angsuran/Bulan</div>
                  <div class="s-value green" id="angsuranPerBulan">Rp 0</div>
                </div>
              </div>
            </div>

            <!-- Keperluan & Jaminan -->
            <div class="form-section">
              <div class="form-section-title"><i class="bi bi-card-text"></i> Keterangan</div>

              <div class="f-group">
                <label class="f-label">Keperluan Pinjaman <span class="req">*</span></label>
                <textarea name="keperluan" class="f-textarea" required
                  placeholder="Jelaskan keperluan pinjaman, contoh: biaya pendidikan, renovasi rumah, modal usaha..."></textarea>
              </div>

              <div class="f-group" style="margin-bottom:0;">
                <label class="f-label">Jaminan <span class="opt">opsional</span></label>
                <textarea name="jaminan" class="f-textarea" rows="2"
                  placeholder="Contoh: Sertifikat tanah, BPKB motor/mobil, dll."></textarea>
                <div class="f-hint"><i class="bi bi-dash-circle"></i> Kosongkan jika tidak ada jaminan</div>
              </div>
            </div>

            <!-- Footer -->
            <div class="form-footer">
              <a href="<?php echo base_url('pinjaman'); ?>" class="btn-back">
                <i class="bi bi-arrow-left"></i> Kembali
              </a>
              <button type="submit" class="btn-submit">
                <i class="bi bi-send-fill"></i> Ajukan Pinjaman
              </button>
            </div>

          </form>
        </div>
      </div>
    </div><!-- /.ajukan-main -->

    <!-- SIDEBAR -->
    <div class="ajukan-sidebar">

      <!-- Info Jenis Pinjaman -->
      <div class="sidebar-card">
        <div class="sidebar-card-head">
          <i class="bi bi-tag-fill"></i> Info Jenis Pinjaman
        </div>
        <div class="sidebar-card-body">
          <div class="jenis-empty" id="jenisEmpty">
            <i class="bi bi-hand-index-thumb"></i>
            Pilih jenis pinjaman untuk melihat detail
          </div>
          <div class="jenis-info-wrap" id="jenisInfoWrap">
            <div class="jenis-info-item">
              <span class="ji-label">Plafon Maks</span>
              <span class="ji-val" id="ji-plafon">—</span>
            </div>
            <div class="jenis-info-item">
              <span class="ji-label">Tenor Maks</span>
              <span class="ji-val" id="ji-tenor">—</span>
            </div>
            <div class="jenis-info-item">
              <span class="ji-label">Bunga</span>
              <span class="ji-val" id="ji-bunga">—</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Catatan Penting -->
      <div class="sidebar-card">
        <div class="sidebar-card-head amber">
          <i class="bi bi-exclamation-triangle-fill"></i> Catatan Penting
        </div>
        <div class="sidebar-card-body">
          <ul class="catatan-list">
            <li>Pastikan semua data yang diisi benar dan sesuai</li>
            <li>Pengajuan akan diproses maksimal 3 hari kerja</li>
            <li>Anda akan dihubungi jika pengajuan disetujui atau ditolak</li>
            <li>Angsuran dibayarkan setiap tanggal 5 tiap bulan</li>
          </ul>
        </div>
      </div>

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

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

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

<script>
const elJenis  = document.getElementById('jenisPinjaman');
const elNominal = document.getElementById('nominal');
const elTenor  = document.getElementById('tenor');

function fmt(n) { return 'Rp ' + Math.round(n).toLocaleString('id-ID'); }

function updateSidebar() {
  const wrap  = document.getElementById('jenisInfoWrap');
  const empty = document.getElementById('jenisEmpty');
  if (!elJenis.value) {
    wrap.style.display  = 'none';
    empty.style.display = 'block';
    return;
  }
  const sel = elJenis.options[elJenis.selectedIndex];
  document.getElementById('ji-plafon').textContent = fmt(sel.dataset.max);
  document.getElementById('ji-tenor').textContent  = sel.dataset.tenor + ' bulan';
  document.getElementById('ji-bunga').textContent  = sel.dataset.bunga + '% / bulan';
  wrap.style.display  = 'block';
  empty.style.display = 'none';
}

function updateSimulasi() {
  updateSidebar();

  const nominal = parseFloat(elNominal.value) || 0;
  const tenor   = parseInt(elTenor.value)   || 0;
  const box     = document.getElementById('simulasiBox');

  const infoPlafon = document.getElementById('infoPlafon');
  const infoTenor  = document.getElementById('infoTenor');

  if (!elJenis.value || nominal <= 0 || tenor <= 0) {
    box.style.display = 'none';
    return;
  }

  const sel      = elJenis.options[elJenis.selectedIndex];
  const bunga    = parseFloat(sel.dataset.bunga);
  const max      = parseFloat(sel.dataset.max);
  const maxTenor = parseInt(sel.dataset.tenor);

  // Show plafon/tenor hints
  infoPlafon.style.display = 'flex';
  infoPlafon.querySelector('span').textContent = 'Maksimal: ' + fmt(max);
  infoTenor.style.display = 'flex';
  infoTenor.querySelector('span').textContent  = 'Maksimal: ' + maxTenor + ' bulan';

  // Validasi plafon
  if (nominal > max) {
    elNominal.value = max;
    elNominal.style.borderColor = 'var(--red-400)';
    setTimeout(() => elNominal.style.borderColor = '', 1500);
    updateSimulasi();
    return;
  } else {
    elNominal.style.borderColor = '';
  }

  // Validasi tenor
  if (tenor > maxTenor) {
    elTenor.value = maxTenor;
    elTenor.style.borderColor = 'var(--red-400)';
    setTimeout(() => elTenor.style.borderColor = '', 1500);
    updateSimulasi();
    return;
  } else {
    elTenor.style.borderColor = '';
  }

  const bungaTotal = (nominal * bunga / 100) * tenor;
  const total      = nominal + bungaTotal;
  const angsuran   = total / tenor;

  document.getElementById('bungaTotal').textContent      = fmt(bungaTotal);
  document.getElementById('totalPinjaman').textContent   = fmt(total);
  document.getElementById('angsuranPerBulan').textContent = fmt(angsuran);
  box.style.display = 'block';
}

elJenis.addEventListener('change', updateSimulasi);
elNominal.addEventListener('input', updateSimulasi);
elTenor.addEventListener('input', updateSimulasi);
</script>