<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); }
.form-control, .form-select { border-radius: 8px; border: 1.5px solid #e5e7eb; font-size: .88rem; padding: 9px 12px; }

/* ===== STATUS BADGES ===== */
.status-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.sb-aktif    { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.sb-nonaktif { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }

/* ===== STAT CARDS ===== */
.stat-card { border-radius:12px; border:none; box-shadow:0 1px 4px rgba(0,0,0,.08); }

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

/* ===== TABLES ===== */
.iuran-table th {
    font-size:.75rem; text-transform:uppercase; letter-spacing:.04em;
    color:#6b7280; font-weight:700; padding:10px 16px;
    background:#f8fffe; border-bottom:1.5px solid #e5e7eb;
    white-space:nowrap;
}
.iuran-table td { padding:10px 16px; vertical-align:middle; font-size:.85rem; border-bottom:1px solid #f3f4f6; }
.iuran-table tbody tr:last-child td { border-bottom:none; }
.iuran-table tbody tr:hover { background:#f8fffe; }

/* ===== FILTER CARD ===== */
.filter-card { border-radius:12px; border:1.5px solid #e5e7eb; box-shadow:none; margin-bottom:20px; }
.filter-card .card-body { padding:16px 20px; }

/* ===== ACTION BUTTONS in table ===== */
.btn-act { font-size:.78rem; padding:5px 10px; border-radius:7px; font-weight:600; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }

/* ===== DESKTOP: tabel tampil, card list sembunyi ===== */
.desktop-table     { display: block; }
.mobile-card-list  { display: none; }

/* ─── PAGE HEADER ─────────────────── */
.ar-page-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 14px; margin-bottom: 20px;
}
.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: #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; white-space: nowrap; cursor: pointer;
}
.btn-tambah:hover {
  background: #0b7a6e; box-shadow: 0 5px 16px rgba(13,148,136,0.38);
  transform: translateY(-1px); color: #fff;
}

/* ===== PERIODE BADGE ===== */
.periode-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px;
    font-size: .75rem; font-weight: 600;
    background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe;
}

/* ===== KODE BADGE ===== */
.kode-badge {
    display: inline-block; padding: 3px 8px; border-radius: 6px;
    font-size: .75rem; font-weight: 700; font-family: monospace;
    background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0;
    letter-spacing: .03em;
}

/* ===== MOBILE ===== */
@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; }
    .header-buttons { width: 100%; }
    .header-buttons .btn-tambah { width: 100%; justify-content: center; }

    /* Stat cards: 2 col */
    .stat-row > [class*='col-'] { flex:0 0 50% !important; max-width:50% !important; }
    .stat-card .card-body { padding:10px 12px !important; }

    /* Filter */
    .filter-row > [class*='col-'] { flex:0 0 100% !important; max-width:100% !important; }
    .filter-row .col-btn { flex:0 0 100% !important; max-width:100% !important; }
    .filter-row .col-btn .btn { width:100%; }

    /* Mobile: sembunyikan tabel, tampilkan card list */
    .desktop-table    { display: none !important; }
    .mobile-card-list { display: flex !important; flex-direction: column; gap: 10px; padding: 12px; }
}
</style>

<!-- ===== FLASH MESSAGES ===== -->
<?php if($this->session->flashdata('success')): ?>
<div class="alert alert-success alert-dismissible fade show d-flex align-items-center gap-2 mb-3" role="alert" style="border-radius:10px; font-size:.88rem; border:1.5px solid #bbf7d0; background:#dcfce7; color:#166534;">
    <i class="bi bi-check-circle-fill flex-shrink-0"></i>
    <div><?php echo $this->session->flashdata('success'); ?></div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>
<?php if($this->session->flashdata('error')): ?>
<div class="alert alert-danger alert-dismissible fade show d-flex align-items-center gap-2 mb-3" role="alert" style="border-radius:10px; font-size:.88rem; border:1.5px solid #fecaca; background:#fee2e2; color:#991b1b;">
    <i class="bi bi-exclamation-triangle-fill flex-shrink-0"></i>
    <div><?php echo $this->session->flashdata('error'); ?></div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>

<!-- ===== PAGE HEADER ===== -->
<div class="ar-page-header">
    <div class="ar-header-left">
        <h4>
            <span class="hi"><i class="bi bi-tags"></i></span>
            Jenis Iuran
        </h4>
        <div class="ar-breadcrumb">
            <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
            <span class="sep">/</span>
            <span>Jenis Iuran</span>
        </div>
    </div>
    <div class="header-buttons">
        <a href="<?php echo base_url('jenis_iuran/tambah'); ?>" class="btn-tambah">
            <i class="bi bi-plus-circle"></i> Tambah Jenis Iuran
        </a>
    </div>
</div>

<!-- ===== STAT CARDS ===== -->
<?php
    $total_aktif    = count(array_filter($jenis_iuran, fn($j) => $j->status === 'aktif'));
    $total_nonaktif = count(array_filter($jenis_iuran, fn($j) => $j->status === 'nonaktif'));
    $total_nominal  = array_sum(array_column(array_filter($jenis_iuran, fn($j) => $j->status === 'aktif'), 'nominal'));
?>
<div class="row g-3 mb-4 stat-row">
    <div class="col-md-3 col-6">
        <div class="card stat-card" style="border-left:4px solid #20c997 !important;">
            <div class="card-body d-flex align-items-center py-3">
                <div class="rounded-3 d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width:42px;height:42px;background:#d1fae5;">
                    <i class="bi bi-tags" style="color:#20c997;"></i>
                </div>
                <div>
                    <div class="text-muted small fw-semibold">Total Jenis</div>
                    <div class="fw-bold fs-4 lh-1" style="color:#20c997;"><?php echo count($jenis_iuran); ?></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card stat-card" style="border-left:4px solid #22c55e !important;">
            <div class="card-body d-flex align-items-center py-3">
                <div class="rounded-3 d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width:42px;height:42px;background:#dcfce7;">
                    <i class="bi bi-check-circle text-success"></i>
                </div>
                <div>
                    <div class="text-muted small fw-semibold">Aktif</div>
                    <div class="fw-bold fs-4 lh-1 text-success"><?php echo $total_aktif; ?></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card stat-card" style="border-left:4px solid #ef4444 !important;">
            <div class="card-body d-flex align-items-center py-3">
                <div class="rounded-3 d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width:42px;height:42px;background:#fee2e2;">
                    <i class="bi bi-x-circle text-danger"></i>
                </div>
                <div>
                    <div class="text-muted small fw-semibold">Nonaktif</div>
                    <div class="fw-bold fs-4 lh-1 text-danger"><?php echo $total_nonaktif; ?></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card stat-card" style="border-left:4px solid #f59e0b !important;">
            <div class="card-body d-flex align-items-center py-3">
                <div class="rounded-3 d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width:42px;height:42px;background:#fef3c7;">
                    <i class="bi bi-cash-stack text-warning"></i>
                </div>
                <div>
                    <div class="text-muted small fw-semibold">Total Nominal Aktif</div>
                    <div class="fw-bold lh-1 text-warning" style="font-size:.85rem;">Rp <?php echo number_format($total_nominal, 0, ',', '.'); ?></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ===== FILTER ===== -->
<div class="filter-card card">
    <div class="card-body">
        <form method="get">
            <div class="row g-2 align-items-end filter-row">
                <div class="col-md-3">
                    <label class="form-label small fw-semibold text-muted mb-1">Status</label>
                    <select name="status" class="form-select form-select-sm">
                        <option value="">Semua Status</option>
                        <option value="aktif"    <?php echo ($this->input->get('status')=='aktif')    ?'selected':''; ?>>Aktif</option>
                        <option value="nonaktif" <?php echo ($this->input->get('status')=='nonaktif') ?'selected':''; ?>>Nonaktif</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label small fw-semibold text-muted mb-1">Periode</label>
                    <select name="periode" class="form-select form-select-sm">
                        <option value="">Semua Periode</option>
                        <option value="bulanan"   <?php echo ($this->input->get('periode')=='bulanan')   ?'selected':''; ?>>Bulanan</option>
                        <option value="tahunan"   <?php echo ($this->input->get('periode')=='tahunan')   ?'selected':''; ?>>Tahunan</option>
                        <option value="insidental" <?php echo ($this->input->get('periode')=='insidental')?'selected':''; ?>>Insidental</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label small fw-semibold text-muted mb-1">Cari Nama</label>
                    <input type="text" name="cari" class="form-control form-control-sm"
                        placeholder="Nama iuran..."
                        value="<?php echo htmlspecialchars($this->input->get('cari') ?? ''); ?>">
                </div>
                <div class="col-md-2 col-btn d-flex gap-2">
                    <button type="submit" class="btn btn-sm fw-semibold d-flex align-items-center gap-1" style="background:#20c997; color:#fff; border:none; border-radius:8px; padding:9px 18px;">
                        <i class="bi bi-funnel"></i> Filter
                    </button>
                    <a href="<?php echo base_url('jenis_iuran'); ?>" class="btn btn-sm fw-semibold d-flex align-items-center gap-1" style="background:#f3f4f6; color:#6b7280; border:none; border-radius:8px; padding:9px 14px;">
                        <i class="bi bi-x"></i>
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- ===== TABEL JENIS IURAN ===== -->
<div class="section-card">
    <div class="section-card-header">
        <div class="title">
            <i class="bi bi-list-ul"></i>
            Daftar Jenis Iuran
            <span class="badge rounded-pill ms-1 fw-bold" style="background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; font-size:.72rem;">
                <?php echo count($jenis_iuran); ?> data
            </span>
        </div>
    </div>

    <?php if(!empty($jenis_iuran)): ?>

    <!-- Desktop: Tabel -->
    <div class="desktop-table table-responsive">
        <table class="table iuran-table mb-0">
            <thead>
                <tr>
                    <th style="width:44px;">No</th>
                    <th>Kode</th>
                    <th>Nama Iuran</th>
                    <th>Deskripsi</th>
                    <th>Periode</th>
                    <th class="text-end">Nominal</th>
                    <th>Status</th>
                    <th>Dibuat</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
            <?php $no = 1; foreach($jenis_iuran as $j): ?>
            <tr>
                <td><?php echo $no++; ?></td>
                <td><span class="kode-badge"><?php echo htmlspecialchars($j->kode); ?></span></td>
                <td class="fw-semibold"><?php echo htmlspecialchars($j->nama_iuran); ?></td>
                <td style="color:#6b7280; max-width:200px;">
                    <?php echo $j->deskripsi ? htmlspecialchars($j->deskripsi) : '<span class="text-muted fst-italic" style="font-size:.8rem;">—</span>'; ?>
                </td>
                <td>
                    <span class="periode-badge">
                        <i class="bi bi-calendar3"></i>
                        <?php echo ucfirst(htmlspecialchars($j->periode)); ?>
                    </span>
                </td>
                <td class="text-end fw-bold" style="color:#20c997;">
                    Rp <?php echo number_format($j->nominal, 0, ',', '.'); ?>
                </td>
                <td>
                    <?php if($j->status === 'aktif'): ?>
                        <span class="status-badge sb-aktif"><i class="bi bi-check-circle"></i>Aktif</span>
                    <?php else: ?>
                        <span class="status-badge sb-nonaktif"><i class="bi bi-x-circle"></i>Nonaktif</span>
                    <?php endif; ?>
                </td>
                <td style="color:#9ca3af; font-size:.8rem;">
                    <?php echo date('d/m/Y', strtotime($j->created_at)); ?>
                </td>
                <td>
                    <div class="d-flex gap-1 flex-wrap">
                        <!-- Toggle Status -->
                        <a href="<?php echo base_url('jenis_iuran/toggle_status/'.$j->id); ?>"
                           class="btn-act btn"
                           style="<?php echo $j->status === 'aktif'
                               ? 'background:#fee2e2; border:1px solid #fecaca; color:#991b1b;'
                               : 'background:#d1fae5; border:1px solid #6ee7b7; color:#065f46;'; ?>"
                           title="<?php echo $j->status === 'aktif' ? 'Nonaktifkan' : 'Aktifkan'; ?>"
                           onclick="return confirm('<?php echo $j->status === 'aktif' ? 'Nonaktifkan' : 'Aktifkan'; ?> jenis iuran ini?')">
                            <i class="bi bi-<?php echo $j->status === 'aktif' ? 'toggle-on' : 'toggle-off'; ?>"></i>
                        </a>
                        <!-- Edit -->
                        <a href="<?php echo base_url('jenis_iuran/edit/'.$j->id); ?>"
                           class="btn-act btn"
                           style="background:#fef3c7; border:1px solid #fde68a; color:#92400e;"
                           title="Edit">
                            <i class="bi bi-pencil"></i>
                        </a>
                        <!-- Hapus -->
                        <a href="<?php echo base_url('jenis_iuran/hapus/'.$j->id); ?>"
                           class="btn-act btn"
                           style="background:#fee2e2; border:1px solid #fecaca; color:#991b1b;"
                           onclick="return confirm('Yakin hapus jenis iuran ini? Data yang sudah dipakai di tagihan tidak bisa dihapus.')"
                           title="Hapus">
                            <i class="bi bi-trash"></i>
                        </a>
                    </div>
                </td>
            </tr>
            <?php endforeach; ?>
            </tbody>
        </table>
    </div>

    <!-- Mobile: Card List -->
    <div class="mobile-card-list">
        <?php foreach($jenis_iuran as $j): ?>
        <div style="border-radius:12px; border:1.5px solid #f1f3f5; background:#fff; padding:13px 14px; border-left:4px solid <?php echo $j->status === 'aktif' ? '#20c997' : '#ef4444'; ?>;">
            <div class="d-flex justify-content-between align-items-start mb-2">
                <div>
                    <div class="d-flex align-items-center gap-2 mb-1">
                        <span class="kode-badge"><?php echo htmlspecialchars($j->kode); ?></span>
                        <?php if($j->status === 'aktif'): ?>
                            <span class="status-badge sb-aktif"><i class="bi bi-check-circle"></i>Aktif</span>
                        <?php else: ?>
                            <span class="status-badge sb-nonaktif"><i class="bi bi-x-circle"></i>Nonaktif</span>
                        <?php endif; ?>
                    </div>
                    <div class="fw-semibold" style="font-size:.9rem;"><?php echo htmlspecialchars($j->nama_iuran); ?></div>
                    <?php if($j->deskripsi): ?>
                    <div style="font-size:.78rem; color:#6b7280; margin-top:2px;"><?php echo htmlspecialchars($j->deskripsi); ?></div>
                    <?php endif; ?>
                </div>
                <div class="text-end flex-shrink-0 ms-2">
                    <div class="fw-bold" style="color:#20c997; font-size:.9rem;">Rp <?php echo number_format($j->nominal, 0, ',', '.'); ?></div>
                    <span class="periode-badge mt-1" style="font-size:.72rem;"><?php echo ucfirst($j->periode); ?></span>
                </div>
            </div>
            <div class="d-flex gap-2" style="border-top:1px solid #f3f4f6; padding-top:10px;">
                <a href="<?php echo base_url('jenis_iuran/toggle_status/'.$j->id); ?>"
                   class="btn flex-fill fw-semibold"
                   style="<?php echo $j->status === 'aktif'
                       ? 'background:#fee2e2; border:1px solid #fecaca; color:#991b1b;'
                       : 'background:#d1fae5; border:1px solid #6ee7b7; color:#065f46;'; ?> border-radius:8px; font-size:.8rem; padding:8px;"
                   onclick="return confirm('<?php echo $j->status === 'aktif' ? 'Nonaktifkan' : 'Aktifkan'; ?> jenis iuran ini?')">
                    <i class="bi bi-<?php echo $j->status === 'aktif' ? 'toggle-on' : 'toggle-off'; ?> me-1"></i>
                    <?php echo $j->status === 'aktif' ? 'Nonaktifkan' : 'Aktifkan'; ?>
                </a>
                <a href="<?php echo base_url('jenis_iuran/edit/'.$j->id); ?>"
                   class="btn fw-semibold"
                   style="background:#fef3c7; border:1px solid #fde68a; color:#92400e; border-radius:8px; font-size:.8rem; padding:8px 12px;">
                    <i class="bi bi-pencil"></i>
                </a>
                <a href="<?php echo base_url('jenis_iuran/hapus/'.$j->id); ?>"
                   class="btn fw-semibold"
                   style="background:#fee2e2; border:1px solid #fecaca; color:#991b1b; border-radius:8px; font-size:.8rem; padding:8px 12px;"
                   onclick="return confirm('Yakin hapus?')">
                    <i class="bi bi-trash"></i>
                </a>
            </div>
        </div>
        <?php endforeach; ?>
    </div>

    <?php else: ?>
    <div class="text-center py-5 text-muted">
        <i class="bi bi-tags fs-1 d-block mb-3 opacity-50"></i>
        <h6>Belum ada jenis iuran</h6>
        <p class="small mb-3">Tambahkan jenis iuran pertama untuk mulai mengelola iuran warga.</p>
        <a href="<?php echo base_url('jenis_iuran/tambah'); ?>" class="btn-tambah" style="display:inline-flex;">
            <i class="bi bi-plus-circle"></i> Tambah Jenis Iuran
        </a>
    </div>
    <?php endif; ?>
</div>