<!-- views/pinjaman/jenis_pinjaman.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;
  --red-500:  #ef4444;
  --red-600:  #dc2626;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --slate-50: #f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --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);
}

.jenis-wrapper {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--slate-900);
  max-width: 1200px;
  margin: 0 auto;
}

/* ─── Page Header ─────────────────── */
.ar-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}
.ar-header-left h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0b5a52;
  margin: 0 0 5px;
  display: flex;
  align-items: center;
  gap: 11px;
  letter-spacing: -.3px;
}
.ar-header-left h4 .hi {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, #0d9488, #14b8a6);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.05rem;
  box-shadow: 0 4px 12px rgba(13,148,136,0.32);
  flex-shrink: 0;
}
.ar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.77rem;
  color: #94a3b8;
  padding-left: 51px;
}
.ar-breadcrumb a { color: #0d9488; text-decoration: none; font-weight: 600; }
.ar-breadcrumb a:hover { text-decoration: underline; }
.ar-breadcrumb .sep { color: #e2e8f0; }

.btn-tambah {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 24px;
  border-radius: 50px;
  border: none;
  background: linear-gradient(135deg, var(--teal-600), var(--teal-500));
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem; font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(13,148,136,.28);
  transition: all .2s;
  border: none;
}
.btn-tambah:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13,148,136,.38);
  color: #fff;
}

/* ─── Stats Cards ─────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  border: 1px solid var(--slate-200);
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform .2s;
}
.stat-card:hover {
  transform: translateY(-2px);
}
.stat-icon {
  width: 50px; height: 50px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.stat-icon.teal { background: var(--teal-50); color: var(--teal-600); }
.stat-icon.green { background: #d1fae5; color: var(--green-500); }
.stat-icon.amber { background: #fef3c7; color: var(--amber-500); }
.stat-info h6 {
  margin: 0 0 4px;
  font-size: .75rem;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.stat-info .value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--slate-900);
  line-height: 1;
}

/* ─── Main Card ─────────────────── */
.main-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--slate-200);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(90deg, var(--teal-50), #fff);
  border-bottom: 1px solid rgba(13,148,136,.1);
}
.card-header h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--slate-900);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-header h5 i { color: var(--teal-600); }

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

/* ─── Badges ─────────────────── */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
}
.badge-status.aktif {
  background: #d1fae5;
  color: var(--green-600);
  border: 1px solid #a7f3d0;
}
.badge-status.nonaktif {
  background: #fee2e2;
  color: var(--red-600);
  border: 1px solid #fecaca;
}
.badge-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge-bunga {
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 700;
  font-family: monospace;
}

.badge-denda {
  background: var(--amber-100);
  color: var(--amber-600);
  border: 1px solid var(--amber-400);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 700;
  font-family: monospace;
}

/* ─── Action Buttons ─────────────────── */
.action-group {
  display: flex;
  gap: 6px;
}
.btn-action {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .15s;
  font-size: .9rem;
}
.btn-edit {
  background: var(--teal-50);
  color: var(--teal-600);
  border: 1px solid var(--teal-200);
}
.btn-edit:hover {
  background: var(--teal-600);
  color: #fff;
  transform: translateY(-1px);
}
.btn-delete {
  background: #fee2e2;
  color: var(--red-500);
  border: 1px solid #fecaca;
}
.btn-delete:hover {
  background: var(--red-500);
  color: #fff;
  transform: translateY(-1px);
}

/* ─── Empty State ─────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--slate-400);
}
.empty-icon {
  width: 80px; height: 80px;
  border-radius: 20px;
  background: var(--teal-50);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-size: 2rem;
  color: var(--teal-400);
}
.empty-state h6 {
  font-size: 1rem;
  color: var(--slate-700);
  margin: 0 0 8px;
}
.empty-state p {
  font-size: .85rem;
  margin: 0;
  max-width: 300px;
  margin: 0 auto;
}

/* ─── Modal ─────────────────── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, .6);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 20px;
  opacity: 0;
  transition: opacity .3s;
}
.modal-overlay.active {
  display: flex;
  opacity: 1;
}
.modal-content {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  transform: scale(.95);
  transition: transform .3s;
}
.modal-overlay.active .modal-content {
  transform: scale(1);
}
.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h5 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--slate-900);
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-header h5 i { color: var(--teal-600); }
.btn-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--slate-100);
  color: var(--slate-500);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.btn-close:hover {
  background: var(--red-100);
  color: var(--red-500);
}
.modal-body {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(90vh - 140px);
}
.form-group {
  margin-bottom: 20px;
}
.form-group:last-child { margin-bottom: 0; }
.form-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--slate-700);
  margin-bottom: 6px;
}
.form-label .required {
  color: var(--red-500);
  margin-left: 2px;
}
.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--slate-200);
  border-radius: 10px;
  font-family: inherit;
  font-size: .9rem;
  color: var(--slate-900);
  transition: all .15s;
  background: #fff;
}
.form-control:focus {
  outline: none;
  border-color: var(--teal-400);
  box-shadow: 0 0 0 3px rgba(13,148,136,.1);
}
.form-control::placeholder { color: var(--slate-400); }
select.form-control {
  cursor: pointer;
  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.14 2.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 12px center;
  padding-right: 40px;
}
.input-group {
  position: relative;
}
.input-group-text {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate-400);
  font-size: .85rem;
  font-weight: 600;
  pointer-events: none;
}
.form-hint {
  font-size: .75rem;
  color: var(--slate-400);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--slate-200);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-secondary {
  background: var(--slate-100);
  color: var(--slate-700);
}
.btn-secondary:hover { background: var(--slate-200); }
.btn-primary {
  background: linear-gradient(135deg, var(--teal-600), var(--teal-500));
  color: #fff;
  box-shadow: 0 4px 12px rgba(13,148,136,.25);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(13,148,136,.35);
}
.btn-danger {
  background: linear-gradient(135deg, var(--red-500), var(--red-600));
  color: #fff;
}

/* ─── Delete Modal Specific ─────────────────── */
.delete-confirm {
  text-align: center;
  padding: 10px 0;
}
.delete-icon {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: #fee2e2;
  color: var(--red-500);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-size: 2rem;
}
.delete-confirm h6 {
  font-size: 1.1rem;
  color: var(--slate-900);
  margin: 0 0 8px;
}
.delete-confirm p {
  font-size: .9rem;
  color: var(--slate-500);
  margin: 0;
}
.delete-detail {
  background: var(--slate-50);
  border-radius: 10px;
  padding: 16px;
  margin: 20px 0;
  text-align: left;
}
.delete-detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: .85rem;
}
.delete-detail-item:last-child { margin-bottom: 0; }
.delete-detail-item span:first-child { color: var(--slate-500); }
.delete-detail-item span:last-child { 
  font-weight: 700; 
  color: var(--slate-900);
  font-family: monospace;
}

/* ─── Toast Notification ─────────────────── */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast {
  background: #fff;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  max-width: 400px;
  animation: slideIn .3s ease;
  border-left: 4px solid;
}
.toast.success { border-left-color: var(--green-500); }
.toast.error { border-left-color: var(--red-500); }
.toast-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.toast.success .toast-icon { background: #d1fae5; color: var(--green-600); }
.toast.error .toast-icon { background: #fee2e2; color: var(--red-600); }
.toast-content h6 {
  margin: 0 0 4px;
  font-size: .9rem;
  font-weight: 700;
}
.toast-content p {
  margin: 0;
  font-size: .82rem;
  color: var(--slate-500);
}
.toast-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--slate-400);
  cursor: pointer;
  padding: 4px;
  font-size: 1.1rem;
  transition: color .15s;
}
.toast-close:hover { color: var(--slate-600); }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ─── Animations ─────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.stats-grid { animation: fadeUp .35s ease both; }
.main-card { animation: fadeUp .4s .1s ease both; }

/* ─── Responsive ─────────────────── */
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: 1fr; }
  .ar-page-header { flex-direction: column; align-items: flex-start; }
  .btn-tambah { width: 100%; justify-content: center; }
  .jenis-table { min-width: 600px; }
  .action-group { flex-direction: column; }
}
</style>

<div class="jenis-wrapper">

  <!-- Page Header -->
  <div class="ar-page-header">
    <div class="ar-header-left">
      <h4>
        <span class="hi"><i class="bi bi-tags-fill"></i></span>
        Jenis Pinjaman
      </h4>
      <div class="ar-breadcrumb">
        <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
        <span class="sep">/</span>
        <a href="<?php echo base_url('pinjaman'); ?>">Pinjaman</a>
        <span class="sep">/</span>
        <span>Jenis Pinjaman</span>
      </div>
    </div>
    <button type="button" class="btn-tambah" onclick="openModal('add')">
      <i class="bi bi-plus-circle-fill"></i> Tambah Jenis Pinjaman
    </button>
  </div>

  <!-- Stats Cards -->
  <div class="stats-grid">
    <div class="stat-card">
      <div class="stat-icon teal">
        <i class="bi bi-collection-fill"></i>
      </div>
      <div class="stat-info">
        <h6>Total Jenis</h6>
        <div class="value"><?php echo count($jenis_pinjaman); ?></div>
      </div>
    </div>
    <div class="stat-card">
      <div class="stat-icon green">
        <i class="bi bi-check-circle-fill"></i>
      </div>
      <div class="stat-info">
        <h6>Jenis Aktif</h6>
        <div class="value">
          <?php 
            $aktif_count = array_filter($jenis_pinjaman, function($j) { 
              return $j->status == 'aktif'; 
            });
            echo count($aktif_count);
          ?>
        </div>
      </div>
    </div>
    <div class="stat-card">
      <div class="stat-icon amber">
        <i class="bi bi-percent"></i>
      </div>
      <div class="stat-info">
        <h6>Rata-rata Bunga</h6>
        <div class="value">
          <?php 
            if (count($jenis_pinjaman) > 0) {
              $total_bunga = array_sum(array_column($jenis_pinjaman, 'bunga_persen'));
              echo number_format($total_bunga / count($jenis_pinjaman), 1) . '%';
            } else {
              echo '0%';
            }
          ?>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Card -->
  <div class="main-card">
    <div class="card-header">
      <h5><i class="bi bi-table"></i> Daftar Jenis Pinjaman</h5>
    </div>
    
    <div class="table-responsive">
      <table class="jenis-table">
        <thead>
          <tr>
            <th style="width: 50px;">No</th>
            <th>Nama Jenis Pinjaman</th>
            <th style="width: 120px;">Bunga/Tahun</th>
            <th style="width: 120px;">Denda/Hari</th>
            <th style="width: 120px;">Tenor Maks</th>
            <th style="width: 100px;">Status</th>
            <th style="width: 100px; text-align: center;">Aksi</th>
          </tr>
        </thead>
        <tbody>
  <?php if (empty($jenis_pinjaman)): ?>
    <tr>
      <td colspan="7">
        <div class="empty-state">
          <div class="empty-icon">
            <i class="bi bi-inbox-fill"></i>
          </div>
          <h6>Belum ada data</h6>
          <p>Silakan tambah jenis pinjaman baru untuk memulai</p>
        </div>
      </td>
    </tr>
  <?php else: ?>
    <?php $no = 1; foreach ($jenis_pinjaman as $jenis): ?>
    <tr>
      <td><?php echo $no++; ?></td>
      <td>
        <!-- PERBAIKAN: Gunakan isset() untuk menghindari error -->
        <strong style="color: var(--slate-900);">
          <?php echo isset($jenis->nama_jenis) ? htmlspecialchars($jenis->nama_jenis) : (isset($jenis->nama) ? htmlspecialchars($jenis->nama) : 'Tidak ada nama'); ?>
        </strong>
        <?php if (isset($jenis->keterangan) && $jenis->keterangan): ?>
          <br><small style="color: var(--slate-400);"><?php echo htmlspecialchars($jenis->keterangan); ?></small>
        <?php elseif (isset($jenis->deskripsi) && $jenis->deskripsi): ?>
          <br><small style="color: var(--slate-400);"><?php echo htmlspecialchars($jenis->deskripsi); ?></small>
        <?php endif; ?>
      </td>
      <td>
        <span class="badge-bunga">
          <?php echo isset($jenis->bunga_persen) ? $jenis->bunga_persen : (isset($jenis->bunga) ? $jenis->bunga : 0); ?>%
        </span>
      </td>
      <td>
        <span class="badge-denda">
          <?php echo isset($jenis->denda_persen) ? $jenis->denda_persen : (isset($jenis->denda) ? $jenis->denda : 0); ?>%
        </span>
      </td>
      <td>
        <?php 
          $tenor = isset($jenis->tenor_maksimal) ? $jenis->tenor_maksimal : (isset($jenis->tenor) ? $jenis->tenor : 12);
          echo $tenor . ' bulan';
        ?>
      </td>
      <td>
        <?php 
          $status = isset($jenis->status) ? $jenis->status : 'aktif';
          $status_class = ($status == 'aktif' || $status == 'active') ? 'aktif' : 'nonaktif';
          $status_text = ($status == 'aktif' || $status == 'active') ? 'Aktif' : 'Nonaktif';
        ?>
        <span class="badge-status <?php echo $status_class; ?>">
          <?php echo $status_text; ?>
        </span>
      </td>
      <td style="text-align: center;">
        <div class="action-group">
          <button type="button" class="btn-action btn-edit" 
                  onclick="openModal('edit', <?php echo htmlspecialchars(json_encode($jenis)); ?>)"
                  title="Edit">
            <i class="bi bi-pencil-fill"></i>
          </button>
          <button type="button" class="btn-action btn-delete" 
                  onclick="confirmDelete(<?php echo $jenis->id; ?>, '<?php echo isset($jenis->nama_jenis) ? htmlspecialchars($jenis->nama_jenis) : (isset($jenis->nama) ? htmlspecialchars($jenis->nama) : 'Item'); ?>')"
                  title="Hapus">
            <i class="bi bi-trash-fill"></i>
          </button>
        </div>
      </td>
    </tr>
    <?php endforeach; ?>
  <?php endif; ?>
</tbody>
      </table>
    </div>
  </div>

</div>

<!-- Modal Form (Add/Edit) -->
<div class="modal-overlay" id="modalForm">
  <div class="modal-content">
    <div class="modal-header">
      <h5>
        <i class="bi bi-tags-fill"></i>
        <span id="modalTitle">Tambah Jenis Pinjaman</span>
      </h5>
      <button type="button" class="btn-close" onclick="closeModal('modalForm')">
        <i class="bi bi-x-lg"></i>
      </button>
    </div>
    <form id="formJenis" action="<?php echo base_url('pinjaman/simpan_jenis'); ?>" method="post">
      <input type="hidden" name="id" id="jenisId">
      
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">Nama Jenis Pinjaman <span class="required">*</span></label>
          <input type="text" name="nama_jenis" id="namaJenis" class="form-control" 
                 placeholder="Contoh: Pinjaman Usaha, Pinjaman Pendidikan" required>
        </div>
        
        <div class="form-group">
          <label class="form-label">Bunga per Tahun (%) <span class="required">*</span></label>
          <div class="input-group">
            <input type="number" name="bunga_persen" id="bungaPersen" class="form-control" 
                   placeholder="12" step="0.01" min="0" max="100" required>
            <span class="input-group-text">%</span>
          </div>
          <div class="form-hint">
            <i class="bi bi-info-circle"></i> Bunga flat per tahun
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">Denda Keterlambatan (%/hari) <span class="required">*</span></label>
          <div class="input-group">
            <input type="number" name="denda_persen" id="dendaPersen" class="form-control" 
                   placeholder="0.5" step="0.01" min="0" max="100" required>
            <span class="input-group-text">%</span>
          </div>
          <div class="form-hint">
            <i class="bi bi-info-circle"></i> Denda dihitung dari nominal angsuran
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">Tenor Maksimal (Bulan) <span class="required">*</span></label>
          <div class="input-group">
            <input type="number" name="tenor_maksimal" id="tenorMaksimal" class="form-control" 
                   placeholder="12" min="1" max="60" required>
            <span class="input-group-text">bulan</span>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">Status</label>
          <select name="status" id="status" class="form-control">
            <option value="aktif">Aktif</option>
            <option value="nonaktif">Nonaktif</option>
          </select>
          <div class="form-hint">
            <i class="bi bi-info-circle"></i> Jenis nonaktif tidak akan muncul di form pengajuan
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">Keterangan</label>
          <textarea name="keterangan" id="keterangan" class="form-control" rows="3" 
                    placeholder="Keterangan tambahan tentang jenis pinjaman ini..."></textarea>
        </div>
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" onclick="closeModal('modalForm')">
          <i class="bi bi-x-circle"></i> Batal
        </button>
        <button type="submit" class="btn btn-primary">
          <i class="bi bi-check-circle-fill"></i> Simpan
        </button>
      </div>
    </form>
  </div>
</div>

<!-- Modal Delete Confirmation -->
<div class="modal-overlay" id="modalDelete">
  <div class="modal-content" style="max-width: 400px;">
    <div class="modal-header">
      <h5>
        <i class="bi bi-exclamation-triangle-fill" style="color: var(--red-500);"></i>
        Konfirmasi Hapus
      </h5>
      <button type="button" class="btn-close" onclick="closeModal('modalDelete')">
        <i class="bi bi-x-lg"></i>
      </button>
    </div>
    <div class="modal-body">
      <div class="delete-confirm">
        <div class="delete-icon">
          <i class="bi bi-trash-fill"></i>
        </div>
        <h6>Hapus Jenis Pinjaman?</h6>
        <p>Data yang dihapus tidak dapat dikembalikan</p>
        
        <div class="delete-detail">
          <div class="delete-detail-item">
            <span>Nama:</span>
            <span id="deleteNama">-</span>
          </div>
          <div class="delete-detail-item">
            <span>Bunga:</span>
            <span id="deleteBunga">-</span>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer" style="justify-content: center;">
      <button type="button" class="btn btn-secondary" onclick="closeModal('modalDelete')">
        <i class="bi bi-x-circle"></i> Batal
      </button>
      <a href="#" id="btnConfirmDelete" class="btn btn-danger">
        <i class="bi bi-trash-fill"></i> Ya, Hapus
      </a>
    </div>
  </div>
</div>

<!-- Toast Container -->
<div class="toast-container" id="toastContainer"></div>

<script>


// PERBAIKAN: Fungsi openModal dengan pengecekan field
function closeModal(id) {
  var modal = document.getElementById(id);
  if(modal) {
    modal.classList.remove('active');
    document.body.style.overflow = '';
  }
}

function openModal(type, data = null) {
  const modal = document.getElementById('modalForm');
  const title = document.getElementById('modalTitle');
  const form = document.getElementById('formJenis');
  
  
  const getValue = (obj, keys, defaultVal = '') => {
    for (let key of keys) {
      if (obj && obj[key] !== undefined && obj[key] !== null) return obj[key];
    }
    return defaultVal;
  };

  if (type === 'add') {
    title.textContent = 'Tambah Jenis Pinjaman';
    form.action = '<?php echo base_url('pinjaman/simpan_jenis'); ?>';
    document.getElementById('jenisId').value = '';
    document.getElementById('namaJenis').value = '';
    document.getElementById('bungaPersen').value = '';
    document.getElementById('dendaPersen').value = '';
    document.getElementById('tenorMaksimal').value = '12';
    document.getElementById('status').value = 'aktif';
    document.getElementById('keterangan').value = '';
  } else if (type === 'edit' && data) {
    title.textContent = 'Edit Jenis Pinjaman';
    form.action = '<?php echo base_url('pinjaman/update_jenis'); ?>';
    document.getElementById('jenisId').value = data.id || '';
    document.getElementById('namaJenis').value = getValue(data, ['nama_jenis', 'nama'], '');
    document.getElementById('bungaPersen').value = getValue(data, ['bunga_persen', 'bunga'], 0);
    document.getElementById('dendaPersen').value = getValue(data, ['denda_persen', 'denda'], 0);
    document.getElementById('tenorMaksimal').value = getValue(data, ['tenor_maksimal', 'tenor'], 12);
    document.getElementById('status').value = getValue(data, ['status'], 'aktif');
    document.getElementById('keterangan').value = getValue(data, ['keterangan', 'deskripsi'], '');
  }
  
  modal.classList.add('active');
  document.body.style.overflow = 'hidden';
}

// PERBAIKAN: Fungsi confirmDelete dengan pengecekan
function confirmDelete(id, nama) {
  const modal = document.getElementById('modalDelete');
  document.getElementById('deleteNama').textContent = nama || 'Tidak ada nama';
  
  // Cari bunga dari data tabel dengan pengecekan
  const rows = document.querySelectorAll('.jenis-table tbody tr');
  let bunga = '-';
  rows.forEach(row => {
    const deleteBtn = row.querySelector('.btn-delete');
    if (deleteBtn && deleteBtn.getAttribute('onclick') && deleteBtn.getAttribute('onclick').includes("'" + id + "'")) {
      const bungaBadge = row.querySelector('.badge-bunga');
      if (bungaBadge) bunga = bungaBadge.textContent;
    }
  });
  document.getElementById('deleteBunga').textContent = bunga;
  
  document.getElementById('btnConfirmDelete').href = 
    '<?php echo base_url('pinjaman/hapus_jenis/'); ?>' + id;
  
  modal.classList.add('active');
  document.body.style.overflow = 'hidden';
}
</script>