<style>
/* ===== RESET FOCUS ===== */
.btn:focus, .form-control:focus, .form-select:focus { box-shadow: none; }
.form-control:focus, .form-select:focus { border-color: #20c997; box-shadow: 0 0 0 3px rgba(32,201,151,.12); }

/* ===== STATUS BADGES ===== */
.status-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 11px; border-radius: 999px;
    font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.sb-aktif    { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.sb-nonaktif { background:#f3f4f6; color:#6b7280; border:1px solid #e5e7eb; }

/* ===== PERIODE BADGE ===== */
.badge-periode {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 9px; border-radius: 6px;
    font-size: .72rem; font-weight: 700;
    background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
}

/* ===== 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; }

/* ===== BUTTONS ===== */
.btn-tambah {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 24px; border-radius: 50px; border: none;
    background: #0d9488; color: #fff; font-size: 0.85rem; font-weight: 700;
    text-decoration: none; box-shadow: 0 3px 12px rgba(13,148,136,0.28);
    transition: all .2s; cursor: pointer;
}
.btn-tambah:hover { background: #0b7a6e; color: #fff; transform: translateY(-1px); box-shadow: 0 5px 16px rgba(13,148,136,0.38); }

/* ===== STAT CARDS ===== */
.stat-card {
    border-radius: 14px; border: none; box-shadow: 0 1px 6px rgba(0,0,0,.08);
    background: #fff; padding: 18px 20px;
    display: flex; align-items: center; gap: 14px;
}
.stat-icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}
.stat-label { font-size: .77rem; font-weight: 600; color: #6b7280; margin-bottom: 2px; }
.stat-val   { font-size: 1.5rem; font-weight: 800; line-height: 1; }

/* ===== TABLE CARD ===== */
.table-card {
    border-radius: 14px; border: none;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
    overflow: hidden; background: #fff;
}
.table-card-header {
    padding: 14px 20px; display: flex; align-items: center;
    justify-content: space-between; border-bottom: 1px solid #f1f3f5;
}
.table-card-header .title { font-size: .87rem; font-weight: 700; color: #374151; display: flex; align-items: center; gap: 7px; }
.table-card-header .title i { color: #20c997; }

.ji-table th {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
    color: #6b7280; font-weight: 700; padding: 11px 16px;
    background: #f8fffe; border-bottom: 1.5px solid #e5e7eb; white-space: nowrap;
}
.ji-table td { padding: 12px 16px; vertical-align: middle; font-size: .86rem; border-bottom: 1px solid #f3f4f6; }
.ji-table tbody tr:last-child td { border-bottom: none; }
.ji-table tbody tr:hover { background: #f8fffe; }

/* Kode pill */
.kode-pill {
    display: inline-block; padding: 3px 10px; border-radius: 6px;
    font-size: .75rem; font-weight: 800; letter-spacing: .04em;
    background: #f0fdf9; color: #0d9488; border: 1px solid #99f6e4;
    font-family: 'Courier New', monospace;
}

/* Nominal */
.nominal-val {
    font-weight: 800; color: #0d9488; font-size: .9rem;
}

/* ===== ACTION BUTTONS ===== */
.btn-act {
    font-size: .77rem; padding: 5px 11px; border-radius: 7px;
    font-weight: 600; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid;
    cursor: pointer; text-decoration: none; transition: all .15s;
}
.btn-edit   { background:#fef3c7; border-color:#fde68a; color:#92400e; }
.btn-edit:hover { background:#fde68a; color:#78350f; }
.btn-del    { background:#fee2e2; border-color:#fecaca; color:#991b1b; }
.btn-del:hover  { background:#fecaca; color:#7f1d1d; }
.btn-toggle-on  { background:#dcfce7; border-color:#bbf7d0; color:#166534; }
.btn-toggle-on:hover  { background:#bbf7d0; color:#14532d; }
.btn-toggle-off { background:#f3f4f6; border-color:#e5e7eb; color:#6b7280; }
.btn-toggle-off:hover { background:#e5e7eb; color:#374151; }

/* ===== MODAL ===== */
.modal-header-custom {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    padding: 18px 22px; border-radius: 14px 14px 0 0;
}
.modal-header-custom .modal-title { color: #fff; font-weight: 800; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.modal-header-custom .btn-close   { filter: brightness(0) invert(1); opacity: .8; }

.modal-content { border-radius: 14px; border: none; box-shadow: 0 20px 60px rgba(0,0,0,.18); overflow: hidden; }
.modal-body    { padding: 22px; }
.modal-footer  { padding: 14px 22px; border-top: 1px solid #f1f3f5; }

.field-label  { font-size: .8rem; font-weight: 700; color: #374151; margin-bottom: 5px; display: block; }
.field-label .req { color: #ef4444; }
.form-control, .form-select { border-radius: 8px; border: 1.5px solid #e5e7eb; font-size: .88rem; padding: 9px 12px; }
.form-control:focus, .form-select:focus { border-color: #20c997; box-shadow: 0 0 0 3px rgba(32,201,151,.12); }
.form-control::placeholder { color: #9ca3af; }

.btn-save {
    background: #0d9488; border: none; color: #fff;
    border-radius: 8px; padding: 9px 22px; font-weight: 700; font-size: .88rem;
    display: inline-flex; align-items: center; gap: 6px;
}
.btn-save:hover { background: #0b7a6e; color: #fff; }
.btn-cancel { background: #f3f4f6; border: 1.5px solid #e5e7eb; color: #6b7280; border-radius: 8px; padding: 9px 18px; font-weight: 600; font-size: .88rem; }
.btn-cancel:hover { background: #e5e7eb; color: #374151; }

/* Search */
.search-box {
    position: relative; max-width: 260px;
}
.search-box input {
    border-radius: 20px; border: 1.5px solid #e5e7eb;
    padding: 7px 14px 7px 34px; font-size: .83rem; width: 100%;
}
.search-box input:focus { border-color: #20c997; box-shadow: 0 0 0 3px rgba(32,201,151,.1); outline: none; }
.search-box i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: .85rem; }

/* Empty state */
.empty-state { text-align: center; padding: 48px 20px; }
.empty-state i { font-size: 2.5rem; color: #d1d5db; display: block; margin-bottom: 12px; }
.empty-state p { color: #9ca3af; font-size: .88rem; }

/* Mobile */
.desktop-table   { display: block; }
.mobile-ji-list  { display: none; }

@media (max-width: 767.98px) {
    .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
    .ar-page-header  { flex-direction: column; align-items: flex-start; }
    .btn-tambah      { width: 100%; justify-content: center; }
    .stat-grid > [class*="col-"] { flex: 0 0 50% !important; max-width: 50% !important; }
    .desktop-table   { display: none !important; }
    .mobile-ji-list  { display: flex !important; flex-direction: column; gap: 10px; padding: 12px; }
    .search-box      { max-width: 100%; }
}
</style>

<div class="container-fluid px-4 py-3">

    <!-- Header -->
    <div class="ar-page-header">
        <div class="ar-header-left">
            <h4>
                <span class="hi"><i class="bi bi-tags-fill"></i></span>
                Jenis Iuran
            </h4>
            <div class="ar-breadcrumb">
                <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
                <span class="sep">/</span>
                <a href="<?php echo base_url('iuran'); ?>">Iuran</a>
                <span class="sep">/</span>
                <span>Jenis Iuran</span>
            </div>
        </div>
        <div class="header-buttons" style="display:flex; gap:8px;">
    <a href="<?php echo base_url('iuran'); ?>" style="display:inline-flex; align-items:center; gap:7px; padding:10px 24px; border-radius:50px; border:2px solid #0d9488; background:transparent; color:#0d9488; font-size:0.85rem; font-weight:700; text-decoration:none; white-space:nowrap;">
        <i class="bi bi-arrow-left"></i> Kembali ke Iuran
    </a>
    <button type="button" class="btn-tambah" data-bs-toggle="modal" data-bs-target="#modalForm" onclick="openTambah()">
        <i class="bi bi-plus-circle"></i> Tambah Jenis Iuran
    </button>
</div>
    </div>

    <!-- Flash Messages -->
    <?php if($this->session->flashdata('success')): ?>
    <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm mb-3" style="border-radius:10px; background:#dcfce7; color:#166534; border-left:4px solid #20c997 !important;">
        <i class="bi bi-check-circle-fill me-2"></i><?php echo $this->session->flashdata('success'); ?>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <?php endif; ?>
    <?php if($this->session->flashdata('error')): ?>
    <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm mb-3" style="border-radius:10px;">
        <i class="bi bi-exclamation-triangle-fill me-2"></i><?php echo $this->session->flashdata('error'); ?>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <?php endif; ?>

    <!-- Stat Cards -->
    <?php
        $total_jenis  = count($jenis_iuran);
        $total_aktif  = count(array_filter($jenis_iuran, fn($j) => $j->status === 'aktif'));
        $total_nonaktif = $total_jenis - $total_aktif;
        $total_nominal = array_sum(array_map(fn($j) => $j->nominal, $jenis_iuran));
    ?>
    <div class="row g-3 mb-4 stat-grid">
        <div class="col-6 col-md-3">
            <div class="stat-card">
                <div class="stat-icon" style="background:#f0fdf9;">
                    <i class="bi bi-tags" style="color:#0d9488;"></i>
                </div>
                <div>
                    <div class="stat-label">Total Jenis</div>
                    <div class="stat-val" style="color:#0d9488;"><?php echo $total_jenis; ?></div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="stat-card">
                <div class="stat-icon" style="background:#dcfce7;">
                    <i class="bi bi-check-circle" style="color:#166534;"></i>
                </div>
                <div>
                    <div class="stat-label">Aktif</div>
                    <div class="stat-val" style="color:#166534;"><?php echo $total_aktif; ?></div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="stat-card">
                <div class="stat-icon" style="background:#f3f4f6;">
                    <i class="bi bi-pause-circle" style="color:#6b7280;"></i>
                </div>
                <div>
                    <div class="stat-label">Nonaktif</div>
                    <div class="stat-val" style="color:#6b7280;"><?php echo $total_nonaktif; ?></div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="stat-card">
                <div class="stat-icon" style="background:#eff6ff;">
                    <i class="bi bi-cash-stack" style="color:#1d4ed8;"></i>
                </div>
                <div>
                    <div class="stat-label">Total Nominal/Bulan</div>
                    <div class="stat-val" style="color:#1d4ed8; font-size:1rem;">Rp <?php echo number_format($total_nominal, 0, ',', '.'); ?></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Table Card -->
    <div class="table-card">
        <div class="table-card-header">
            <div class="title">
                <i class="bi bi-list-ul"></i> Daftar Jenis Iuran
            </div>
            <div class="search-box">
                <i class="bi bi-search"></i>
                <input type="text" id="searchInput" placeholder="Cari nama / kode..." oninput="filterTable()">
            </div>
        </div>

        <?php if(empty($jenis_iuran)): ?>
        <div class="empty-state">
            <i class="bi bi-tags"></i>
            <p>Belum ada jenis iuran.<br>Klik tombol <strong>Tambah Jenis Iuran</strong> untuk menambahkan.</p>
        </div>
        <?php else: ?>

        <!-- Desktop Table -->
        <div class="desktop-table table-responsive">
            <table class="table ji-table mb-0" id="jiTable">
                <thead>
                    <tr>
                        <th style="width:44px;">No</th>
                        <th style="width:80px;">Kode</th>
                        <th>Nama Iuran</th>
                        <th>Deskripsi</th>
                        <th>Periode</th>
                        <th class="text-end">Nominal</th>
                        <th>Status</th>
                        <th>Tagihan</th>
                        <th style="width:160px;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                <?php $no = 1; foreach($jenis_iuran as $j): ?>
                <tr data-search="<?php echo strtolower($j->nama_iuran . ' ' . $j->kode); ?>">
                    <td class="text-muted"><?php echo $no++; ?></td>
                    <td><span class="kode-pill"><?php echo htmlspecialchars($j->kode); ?></span></td>
                    <td><strong><?php echo htmlspecialchars($j->nama_iuran); ?></strong></td>
                    <td class="text-muted" style="max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="<?php echo htmlspecialchars($j->deskripsi ?? ''); ?>">
                        <?php echo $j->deskripsi ? htmlspecialchars($j->deskripsi) : '<span style="color:#d1d5db;">—</span>'; ?>
                    </td>
                    <td><span class="badge-periode"><i class="bi bi-calendar3"></i><?php echo ucfirst($j->periode); ?></span></td>
                    <td class="text-end"><span class="nominal-val">Rp <?php echo number_format($j->nominal, 0, ',', '.'); ?></span></td>
                    <td>
                        <?php if($j->status === 'aktif'): ?>
                        <span class="status-badge sb-aktif"><i class="bi bi-check-circle-fill"></i>Aktif</span>
                        <?php else: ?>
                        <span class="status-badge sb-nonaktif"><i class="bi bi-pause-circle-fill"></i>Nonaktif</span>
                        <?php endif; ?>
                    </td>
                    <td>
                        <?php
                            $this->load->model('Jenis_iuran_model');
                            $cnt = $this->Jenis_iuran_model->count_tagihan($j->id);
                        ?>
                        <span style="font-size:.82rem; font-weight:700; color:<?php echo $cnt > 0 ? '#0d9488' : '#9ca3af'; ?>">
                            <?php echo $cnt; ?> tagihan
                        </span>
                    </td>
                    <td>
                        <div class="d-flex gap-1 flex-wrap">
                            <!-- Edit -->
                            <button type="button" class="btn-act btn-edit"
                                onclick="openEdit(<?php echo $j->id; ?>, '<?php echo addslashes($j->nama_iuran); ?>', '<?php echo $j->kode; ?>', '<?php echo addslashes($j->deskripsi ?? ''); ?>', '<?php echo $j->nominal; ?>', '<?php echo $j->periode; ?>', '<?php echo $j->status; ?>')">
                                <i class="bi bi-pencil"></i> Edit
                            </button>
                            <!-- Toggle Status -->
                            <a href="<?php echo base_url('jenis_iuran/toggle_status/' . $j->id); ?>"
                               class="btn-act <?php echo $j->status === 'aktif' ? 'btn-toggle-on' : 'btn-toggle-off'; ?>"
                               onclick="return confirm('<?php echo $j->status === 'aktif' ? 'Nonaktifkan' : 'Aktifkan'; ?> jenis iuran ini?')">
                                <i class="bi bi-<?php echo $j->status === 'aktif' ? 'pause' : 'play'; ?>"></i>
                            </a>
                            <!-- Hapus -->
                            <a href="<?php echo base_url('jenis_iuran/hapus/' . $j->id); ?>"
                               class="btn-act btn-del"
                               onclick="return confirm('Hapus jenis iuran ini? Data yang sudah terkait tidak akan ikut terhapus.')">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                <?php endforeach; ?>
                </tbody>
            </table>
        </div>

        <!-- Mobile Card List -->
        <div class="mobile-ji-list" id="mobileList">
            <?php foreach($jenis_iuran as $j): ?>
            <div style="border-radius:12px; border:1.5px solid #e5e7eb; background:#fff; padding:14px;"
                 data-search="<?php echo strtolower($j->nama_iuran . ' ' . $j->kode); ?>">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <div class="d-flex align-items-center gap-2">
                        <span class="kode-pill"><?php echo htmlspecialchars($j->kode); ?></span>
                        <strong style="font-size:.88rem;"><?php echo htmlspecialchars($j->nama_iuran); ?></strong>
                    </div>
                    <?php if($j->status === 'aktif'): ?>
                    <span class="status-badge sb-aktif"><i class="bi bi-check-circle-fill"></i>Aktif</span>
                    <?php else: ?>
                    <span class="status-badge sb-nonaktif"><i class="bi bi-pause-circle-fill"></i>Nonaktif</span>
                    <?php endif; ?>
                </div>
                <?php if($j->deskripsi): ?>
                <p style="font-size:.78rem; color:#6b7280; margin:0 0 8px;"><?php echo htmlspecialchars($j->deskripsi); ?></p>
                <?php endif; ?>
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="badge-periode"><i class="bi bi-calendar3"></i><?php echo ucfirst($j->periode); ?></span>
                    <span class="nominal-val">Rp <?php echo number_format($j->nominal, 0, ',', '.'); ?></span>
                </div>
                <div class="d-flex gap-2" style="border-top:1px solid #f3f4f6; padding-top:10px;">
                    <button type="button" class="btn flex-fill fw-semibold btn-act btn-edit"
                        onclick="openEdit(<?php echo $j->id; ?>, '<?php echo addslashes($j->nama_iuran); ?>', '<?php echo $j->kode; ?>', '<?php echo addslashes($j->deskripsi ?? ''); ?>', '<?php echo $j->nominal; ?>', '<?php echo $j->periode; ?>', '<?php echo $j->status; ?>')"
                        style="justify-content:center; border-radius:8px; padding:8px;">
                        <i class="bi bi-pencil me-1"></i>Edit
                    </button>
                    <a href="<?php echo base_url('jenis_iuran/toggle_status/' . $j->id); ?>"
                       class="btn fw-semibold btn-act <?php echo $j->status === 'aktif' ? 'btn-toggle-on' : 'btn-toggle-off'; ?>"
                       onclick="return confirm('<?php echo $j->status === 'aktif' ? 'Nonaktifkan' : 'Aktifkan'; ?> jenis iuran ini?')"
                       style="border-radius:8px; padding:8px 14px;">
                        <i class="bi bi-<?php echo $j->status === 'aktif' ? 'pause' : 'play'; ?>"></i>
                    </a>
                    <a href="<?php echo base_url('jenis_iuran/hapus/' . $j->id); ?>"
                       class="btn fw-semibold btn-act btn-del"
                       onclick="return confirm('Hapus jenis iuran ini?')"
                       style="border-radius:8px; padding:8px 14px;">
                        <i class="bi bi-trash"></i>
                    </a>
                </div>
            </div>
            <?php endforeach; ?>
        </div>

        <?php endif; ?>
    </div><!-- /table-card -->

</div><!-- /container -->

<!-- ===== MODAL FORM TAMBAH / EDIT ===== -->
<div class="modal fade" id="modalForm" tabindex="-1" aria-labelledby="modalFormLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width:520px;">
        <div class="modal-content">
            <form id="formJenis" method="post">
                <!-- Header -->
                <div class="modal-header-custom">
                    <div class="modal-title" id="modalFormLabel">
                        <i class="bi bi-tags-fill"></i>
                        <span id="modalTitleText">Tambah Jenis Iuran</span>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- Body -->
                <div class="modal-body">
                    <div class="row g-3">

                        <!-- Nama Iuran -->
                        <div class="col-12">
                            <label class="field-label">Nama Iuran <span class="req">*</span></label>
                            <input type="text" name="nama_iuran" id="f_nama" class="form-control"
                                   placeholder="contoh: Iuran Kebersihan" required>
                        </div>

                        <!-- Kode + Periode -->
                        <div class="col-6">
                            <label class="field-label">Kode <span class="req">*</span></label>
                            <input type="text" name="kode" id="f_kode" class="form-control"
                                   placeholder="IKB" maxlength="10"
                                   style="font-family:'Courier New',monospace; text-transform:uppercase; font-weight:700; letter-spacing:.05em;"
                                   oninput="this.value=this.value.toUpperCase()" required>
                            <small class="text-muted" style="font-size:.73rem;">Maks. 10 karakter, huruf kapital</small>
                        </div>
                        <div class="col-6">
                            <label class="field-label">Periode <span class="req">*</span></label>
                            <select name="periode" id="f_periode" class="form-select" required>
                                <option value="">-- Pilih --</option>
                                <option value="harian">Harian</option>
                                <option value="mingguan">Mingguan</option>
                                <option value="bulanan">Bulanan</option>
                                <option value="triwulan">Triwulan</option>
                                <option value="semester">Semester</option>
                                <option value="tahunan">Tahunan</option>
                                <option value="insidental">Insidental</option>
                            </select>
                        </div>

                        <!-- Nominal -->
                        <div class="col-12">
                            <label class="field-label">Nominal (Rp) <span class="req">*</span></label>
                            <div style="position:relative;">
                                <span style="position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:.78rem; font-weight:700; color:#20c997; pointer-events:none;">Rp</span>
                                <input type="number" name="nominal" id="f_nominal" class="form-control"
                                       placeholder="0" min="1" step="any" required style="padding-left:30px;">
                            </div>
                        </div>

                        <!-- Deskripsi -->
                        <div class="col-12">
                            <label class="field-label">Deskripsi</label>
                            <textarea name="deskripsi" id="f_deskripsi" class="form-control" rows="2"
                                      placeholder="Keterangan singkat (opsional)"></textarea>
                        </div>

                        <!-- Status -->
                        <div class="col-12">
                            <label class="field-label">Status <span class="req">*</span></label>
                            <div class="d-flex gap-3">
                                <label style="display:flex; align-items:center; gap:7px; cursor:pointer; font-size:.88rem; font-weight:600; color:#374151;">
                                    <input type="radio" name="status" value="aktif" id="f_status_aktif" style="accent-color:#20c997; width:16px; height:16px;"> Aktif
                                </label>
                                <label style="display:flex; align-items:center; gap:7px; cursor:pointer; font-size:.88rem; font-weight:600; color:#374151;">
                                    <input type="radio" name="status" value="nonaktif" id="f_status_nonaktif" style="accent-color:#6b7280; width:16px; height:16px;"> Nonaktif
                                </label>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- Footer -->
                <div class="modal-footer">
                    <button type="button" class="btn-cancel btn" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn-save btn">
                        <i class="bi bi-check-lg"></i> <span id="btnSaveText">Simpan</span>
                    </button>
                </div>

            </form>
        </div>
    </div>
</div>

<script>
var BASE = '<?php echo base_url(); ?>';

function openTambah() {
    document.getElementById('modalTitleText').textContent = 'Tambah Jenis Iuran';
    document.getElementById('btnSaveText').textContent = 'Simpan';
    document.getElementById('formJenis').action = BASE + 'jenis_iuran/tambah';
    document.getElementById('f_nama').value      = '';
    document.getElementById('f_kode').value      = '';
    document.getElementById('f_nominal').value   = '';
    document.getElementById('f_deskripsi').value = '';
    document.getElementById('f_periode').value   = '';
    document.getElementById('f_status_aktif').checked = true;
}

function openEdit(id, nama, kode, deskripsi, nominal, periode, status) {
    document.getElementById('modalTitleText').textContent = 'Edit Jenis Iuran';
    document.getElementById('btnSaveText').textContent = 'Perbarui';
    document.getElementById('formJenis').action = BASE + 'jenis_iuran/edit/' + id;
    document.getElementById('f_nama').value      = nama;
    document.getElementById('f_kode').value      = kode;
    document.getElementById('f_nominal').value   = nominal;
    document.getElementById('f_deskripsi').value = deskripsi;
    document.getElementById('f_periode').value   = periode;
    if(status === 'aktif') {
        document.getElementById('f_status_aktif').checked = true;
    } else {
        document.getElementById('f_status_nonaktif').checked = true;
    }
    var modal = new bootstrap.Modal(document.getElementById('modalForm'));
    modal.show();
}

// Search / filter tabel
function filterTable() {
    var q = document.getElementById('searchInput').value.toLowerCase();

    // Desktop rows
    document.querySelectorAll('#jiTable tbody tr').forEach(function(row) {
        var s = row.getAttribute('data-search') || '';
        row.style.display = s.includes(q) ? '' : 'none';
    });

    // Mobile cards
    document.querySelectorAll('#mobileList > div').forEach(function(card) {
        var s = card.getAttribute('data-search') || '';
        card.style.display = s.includes(q) ? '' : 'none';
    });
}

// Buka modal edit jika ada error flash (saat redirect balik dari edit)
<?php if($this->session->flashdata('error') && $this->input->post('nama_iuran')): ?>
window.addEventListener('DOMContentLoaded', function() {
    var modal = new bootstrap.Modal(document.getElementById('modalForm'));
    modal.show();
});
<?php endif; ?>
</script>