<style>
/* ========== CSS Variables ========== */
:root {
  --teal-primary:   #20c997;
  --teal-dark:      #17a589;
  --teal-light:     #d1f5ec;
  --teal-xlight:    #f0fdf9;
  --blue-accent:    #0d9488;
  --text-main:      #1e293b;
  --text-muted:     #64748b;
  --text-light:     #94a3b8;
  --border:         #e2e8f0;
  --card-bg:        #ffffff;
  --page-bg:        #f8fafc;
  --danger:         #ef4444;
  --warning-bg:     #fff7ed;
  --warning-text:   #ea580c;
  --success-bg:     #f0fdf4;
  --success-text:   #16a34a;
  --info-bg:        #eff6ff;
  --info-text:      #2563eb;
  --badge-wajib-bg: #dbeafe;
  --badge-wajib:    #1d4ed8;
  --badge-arisan-bg:#fef9c3;
  --badge-arisan:   #a16207;
  --badge-sukarela-bg: #d1fae5;
  --badge-sukarela: #065f46;
  --shadow-sm:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:      0 4px 12px rgba(0,0,0,.08);
  --radius:         12px;
  --radius-sm:      8px;
}

/* ========== Page Layout ========== */
.tab-page { background: var(--page-bg); min-height: 100vh; }

/* ─── PAGE HEADER (samakan dengan arisan) ─────────────────── */
.ar-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
}
.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;
}
.btn-tambah-outline {
  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;
  transition: all .2s;
  white-space: nowrap;
  cursor: pointer;
}
.btn-tambah-outline:hover {
  background: #0d9488;
  color: #fff;
  transform: translateY(-1px);
}

/* ========== Summary Cards ========== */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.summary-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}
.summary-card-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.summary-card-value { font-size: 22px; font-weight: 800; color: var(--text-main); }
.summary-card-sub { font-size: 12px; color: var(--text-light); }
.summary-card.accent { border-left: 4px solid var(--teal-primary); }

/* ========== Filter Bar ========== */
.filter-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.filter-grid { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.filter-group { display: flex; flex-direction: column; gap: 5px; min-width: 140px; flex: 1; }
.filter-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.filter-select, .filter-input {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 13.5px; color: var(--text-main);
  background: #fff; outline: none; transition: border-color .15s;
  appearance: none; -webkit-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.14L2.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 10px center; padding-right: 32px;
}
.filter-select:focus, .filter-input:focus { border-color: var(--teal-primary); box-shadow: 0 0 0 3px rgba(32,201,151,.15); }
.btn-filter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; background: var(--teal-primary); color: #fff;
  border: none; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background .15s; white-space: nowrap;
}
.btn-filter:hover { background: var(--teal-dark); }

/* ========== Table Card ========== */
.table-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
}
.table-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px;
}
.table-card-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text-main); }
.table-card-title i { color: var(--teal-primary); }

/* DataTable overrides */
.dataTables_wrapper { padding: 16px 20px; }
.dataTables_filter input {
  border: 1.5px solid var(--border) !important; border-radius: var(--radius-sm) !important;
  padding: 7px 12px !important; font-size: 13px !important; outline: none;
}
.dataTables_filter input:focus { border-color: var(--teal-primary) !important; box-shadow: 0 0 0 3px rgba(32,201,151,.12) !important; }
.dataTables_length select {
  border: 1.5px solid var(--border) !important; border-radius: var(--radius-sm) !important;
  padding: 5px 28px 5px 10px !important; font-size: 13px !important;
}

table.dataTable { border-collapse: collapse !important; width: 100% !important; }
table.dataTable thead th {
  background: #f8fafc; font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-muted); padding: 12px 14px;
  border-bottom: 2px solid var(--border) !important; border-top: none !important;
}
table.dataTable tbody td { padding: 14px; font-size: 13.5px; color: var(--text-main); border-bottom: 1px solid var(--border) !important; vertical-align: middle; }
table.dataTable tbody tr:last-child td { border-bottom: none !important; }
table.dataTable tbody tr:hover td { background: var(--teal-xlight); }
.dataTables_paginate .paginate_button { border-radius: var(--radius-sm) !important; font-size: 13px !important; }
.dataTables_paginate .paginate_button.current { background: var(--teal-primary) !important; border-color: var(--teal-primary) !important; color: #fff !important; }
.dataTables_paginate .paginate_button:hover { background: var(--teal-light) !important; border-color: var(--teal-light) !important; color: var(--teal-dark) !important; }

/* ========== Badges ========== */
.tab-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.badge-aktif    { background: var(--success-bg); color: var(--success-text); }
.badge-nonaktif { background: #f1f5f9; color: var(--text-muted); }
.badge-wajib    { background: var(--badge-wajib-bg); color: var(--badge-wajib); }
.badge-arisan   { background: var(--badge-arisan-bg); color: var(--badge-arisan); }
.badge-sukarela { background: var(--badge-sukarela-bg); color: var(--badge-sukarela); }

/* ========== Saldo ========== */
.saldo-text { font-weight: 700; color: var(--text-main); font-size: 14px; }

/* ========== Action Buttons ========== */
.action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: 1.5px solid transparent; cursor: pointer; transition: all .15s; text-decoration: none;
  font-size: 14px;
}
.action-btn-info { background: var(--info-bg); color: var(--info-text); border-color: #bfdbfe; }
.action-btn-info:hover { background: #dbeafe; color: var(--info-text); }

/* ========== Empty State ========== */
.empty-state { padding: 60px 20px; text-align: center; }
.empty-state-icon {
  width: 72px; height: 72px; background: var(--teal-light); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.empty-state-icon i { font-size: 32px; color: var(--teal-dark); }
.empty-state h5 { font-size: 16px; font-weight: 700; color: var(--text-main); margin-bottom: 6px; }
.empty-state p { font-size: 13.5px; color: var(--text-muted); }

/* ========== MOBILE CARD VIEW ========== */
@media (max-width: 767px) {
  .desktop-table { display: none !important; }
  .mobile-cards { display: block !important; }
  .summary-card-value { font-size: 18px; }
  .filter-group { min-width: 0; }

  /* Header mobile */
  .ar-page-header { flex-direction: column; align-items: flex-start; }
  .tab-header-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px; }
  .tab-header-actions .btn-tambah,
  .tab-header-actions .btn-tambah-outline { width: 100%; justify-content: center; }
  .tab-header-actions .btn-tambah:last-child { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  .mobile-cards { display: none !important; }
  .desktop-table { display: block !important; }
}

/* Mobile card item */
.m-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.m-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 8px; }
.m-card-name { font-size: 14.5px; font-weight: 700; color: var(--text-main); }
.m-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.m-card-field label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; display: block; margin-bottom: 2px; }
.m-card-field span { font-size: 13px; color: var(--text-main); }
.m-card-field .saldo-text { font-size: 15px; }
.m-card-footer { display: flex; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--border); }
.btn-detail-mobile {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; background: var(--info-bg); color: var(--info-text);
  border: 1.5px solid #bfdbfe; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; text-decoration: none; transition: all .15s;
}
.btn-detail-mobile:hover { background: #dbeafe; color: var(--info-text); }
.m-card-no { width: 26px; height: 26px; background: var(--teal-light); color: var(--teal-dark); border-radius: 50%; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
</style>

<div class="tab-page">

  <!-- ===== HEADER ===== -->
<!-- Header -->
<div class="ar-page-header">
    <div class="ar-header-left">
        <h4>
            <span class="hi"><i class="bi bi-wallet2"></i></span>
            <?php echo $user_role == 'warga' ? 'Tabungan Saya' : 'Data Tabungan Warga'; ?>
        </h4>
        <div class="ar-breadcrumb">
            <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
            <span class="sep">/</span>
            <span><?php echo $user_role == 'warga' ? 'Tabungan Saya' : 'Tabungan Warga'; ?></span>
        </div>
    </div>
    <div class="tab-header-actions" style="display:flex; gap:8px; flex-wrap:wrap;">
        <?php if($user_role == 'admin'): ?>
        <a href="<?php echo base_url('tabungan/verifikasi'); ?>" class="btn-tambah-outline">
            <i class="bi bi-check2-square"></i> Verifikasi
        </a>
        <?php endif; ?>
        <a href="<?php echo base_url('tabungan/setor'); ?>" class="btn-tambah-outline">
            <i class="bi bi-arrow-down-circle"></i> Setoran
        </a>
        <a href="<?php echo base_url('tabungan/tarik'); ?>" class="btn-tambah">
            <i class="bi bi-plus-circle"></i> Penarikan
        </a>
    </div>
</div>

  <?php
    $hasData = isset($tabungan) && is_array($tabungan) && count($tabungan) > 0;
    // Summary calculations
    $total_saldo = 0;
    $total_aktif = 0;
    $total_warga = [];
    if($hasData) {
      foreach($tabungan as $t) {
        $total_saldo += isset($t->saldo) ? $t->saldo : 0;
        if(isset($t->status) && $t->status == 'aktif') $total_aktif++;
        if(isset($t->warga_id)) $total_warga[$t->warga_id] = true;
      }
    }
  ?>

  <!-- ===== SUMMARY CARDS ===== -->
  <?php if($hasData): ?>
  <div class="summary-grid">
    <div class="summary-card accent">
      <span class="summary-card-label">Total Saldo</span>
      <span class="summary-card-value">Rp <?php echo number_format($total_saldo, 0, ',', '.'); ?></span>
      <span class="summary-card-sub">Seluruh tabungan</span>
    </div>
    <div class="summary-card">
      <span class="summary-card-label">Total Rekening</span>
      <span class="summary-card-value"><?php echo count($tabungan); ?></span>
      <span class="summary-card-sub">Rekening terdaftar</span>
    </div>
    <div class="summary-card">
      <span class="summary-card-label">Rekening Aktif</span>
      <span class="summary-card-value"><?php echo $total_aktif; ?></span>
      <span class="summary-card-sub">Status aktif</span>
    </div>
    <?php if($user_role == 'admin'): ?>
    <div class="summary-card">
      <span class="summary-card-label">Total Warga</span>
      <span class="summary-card-value"><?php echo count($total_warga); ?></span>
      <span class="summary-card-sub">Warga menabung</span>
    </div>
    <?php endif; ?>
  </div>
  <?php endif; ?>

  <!-- ===== FILTER BAR ===== -->
  <div class="filter-card">
    <div class="filter-grid">
      <div class="filter-group">
        <label class="filter-label">Jenis Tabungan</label>
        <select class="filter-select" id="filterJenis" onchange="applyFilters()">
          <option value="">Semua Jenis</option>
          <option value="wajib">Wajib</option>
          <option value="sukarela">Sukarela</option>
          <option value="arisan">Arisan</option>
        </select>
      </div>
      <div class="filter-group">
        <label class="filter-label">Status</label>
        <select class="filter-select" id="filterStatus" onchange="applyFilters()">
          <option value="">Semua Status</option>
          <option value="aktif">Aktif</option>
          <option value="nonaktif">Nonaktif</option>
        </select>
      </div>
      <?php if($user_role == 'admin'): ?>
      <div class="filter-group">
        <label class="filter-label">Cari Warga</label>
        <input type="text" class="filter-input" id="filterSearch" placeholder="Nama warga..." oninput="applyFilters()">
      </div>
      <?php endif; ?>
      <div>
        <button class="btn-filter" onclick="resetFilters()">
          <i class="bi bi-arrow-counterclockwise"></i>
          Reset
        </button>
        
      </div>
    </div>
  </div>

  <!-- ===== MAIN TABLE CARD ===== -->
  <div class="table-card">
    <div class="table-card-header">
      <div class="table-card-title">
        <i class="bi bi-list-ul"></i>
        Semua Data Tabungan
      </div>
    </div>

    <?php if($hasData): ?>

    <!-- DESKTOP TABLE -->
    <div class="desktop-table">
      <div style="padding:0 20px 20px;">
        <div class="table-responsive" style="overflow-x:auto;">
          <table class="table table-hover" id="tabelTabungan" style="width:100%">
            <thead>
              <tr>
                <th>No</th>
                <?php if($user_role == 'admin'): ?>
                <th>Nama Warga</th>
                <th>No HP</th>
                <?php endif; ?>
                <th>Jenis Tabungan</th>
                <th>Saldo</th>
                <th>Status</th>
                <th>Aksi</th>
              </tr>
            </thead>
            <tbody>
              <?php $no = 1; foreach($tabungan as $t): ?>
              <?php
                $jenis = isset($t->jenis_tabungan) ? strtolower($t->jenis_tabungan) : 'sukarela';
                $status = isset($t->status) ? strtolower($t->status) : 'aktif';
                $nama = isset($t->nama_lengkap) ? $t->nama_lengkap : '-';
                $nohp = isset($t->no_hp) ? $t->no_hp : '-';
                $saldo = isset($t->saldo) ? $t->saldo : 0;
              ?>
              <tr>
                <td style="color:var(--text-muted);font-size:13px;"><?php echo $no++; ?></td>
                <?php if($user_role == 'admin'): ?>
                <td><strong><?php echo $nama; ?></strong></td>
                <td style="color:var(--text-muted);"><?php echo $nohp; ?></td>
                <?php endif; ?>
                <td>
                  <span class="tab-badge badge-<?php echo $jenis; ?>">
                    <?php echo ucfirst($jenis); ?>
                  </span>
                </td>
                <td>
                  <span class="saldo-text">Rp <?php echo number_format($saldo, 0, ',', '.'); ?></span>
                </td>
                <td>
                  <span class="tab-badge badge-<?php echo $status; ?>">
                    <?php if($status == 'aktif'): ?><i class="bi bi-check-circle-fill" style="font-size:10px;"></i><?php endif; ?>
                    <?php echo ucfirst($status); ?>
                  </span>
                </td>
                <td>
                  <a href="<?php echo base_url('tabungan/detail/'.$t->warga_id); ?>" class="action-btn action-btn-info" title="Lihat Detail">
                    <i class="bi bi-eye"></i>
                  </a>
                </td>
              </tr>
              <?php endforeach; ?>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- MOBILE CARDS -->
    <div class="mobile-cards" style="padding:12px 16px 16px;" id="mobileCardList">
      <?php $no = 1; foreach($tabungan as $t): ?>
      <?php
        $jenis  = isset($t->jenis_tabungan) ? strtolower($t->jenis_tabungan) : 'sukarela';
        $status = isset($t->status) ? strtolower($t->status) : 'aktif';
        $nama   = isset($t->nama_lengkap) ? $t->nama_lengkap : '-';
        $nohp   = isset($t->no_hp) ? $t->no_hp : '-';
        $saldo  = isset($t->saldo) ? $t->saldo : 0;
      ?>
      <div class="m-card" 
        data-jenis="<?php echo $jenis; ?>" 
        data-status="<?php echo $status; ?>"
        data-nama="<?php echo strtolower($nama); ?>">
        <div class="m-card-header">
          <div style="display:flex;align-items:center;gap:10px;">
            <div class="m-card-no"><?php echo $no++; ?></div>
            <div>
              <div class="m-card-name"><?php echo $user_role == 'admin' ? $nama : 'Tabungan #'.($no-1); ?></div>
              <?php if($user_role == 'admin'): ?>
              <div style="font-size:12px;color:var(--text-muted);"><?php echo $nohp; ?></div>
              <?php endif; ?>
            </div>
          </div>
          <span class="tab-badge badge-<?php echo $jenis; ?>"><?php echo ucfirst($jenis); ?></span>
        </div>
        <div class="m-card-body">
          <div class="m-card-field">
            <label>Saldo</label>
            <span class="saldo-text">Rp <?php echo number_format($saldo, 0, ',', '.'); ?></span>
          </div>
          <div class="m-card-field">
            <label>Status</label>
            <span class="tab-badge badge-<?php echo $status; ?>" style="display:inline-flex;">
              <?php if($status == 'aktif'): ?><i class="bi bi-check-circle-fill" style="font-size:10px;"></i><?php endif; ?>
              <?php echo ucfirst($status); ?>
            </span>
          </div>
        </div>
        <div class="m-card-footer">
          <a href="<?php echo base_url('tabungan/detail/'.$t->warga_id); ?>" class="btn-detail-mobile">
            <i class="bi bi-eye"></i> Lihat Detail
          </a>
        </div>
      </div>
      <?php endforeach; ?>
    </div>

    <!-- Mobile no result -->
    <div id="mobileNoResult" style="display:none; padding:40px 20px; text-align:center;">
      <div style="color:var(--text-muted); font-size:14px;"><i class="bi bi-search" style="font-size:28px;display:block;margin-bottom:8px;"></i>Tidak ada data yang cocok</div>
    </div>

    <?php else: ?>
    <!-- EMPTY STATE -->
    <div class="empty-state">
      <div class="empty-state-icon"><i class="bi bi-wallet2"></i></div>
      <h5>Belum ada data tabungan</h5>
      <p>
        <?php if($user_role == 'warga'): ?>
          Klik tombol <strong>Setoran</strong> untuk mulai menabung
        <?php else: ?>
          Belum ada warga yang memiliki tabungan
        <?php endif; ?>
      </p>
     

       <a href="<?php echo base_url('tabungan/setor'); ?>" class="btn-tambah-outline">
            <i class="bi bi-plus-circle"></i> Mulai Menabung
        </a>

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

</div><!-- /tab-page -->

<script>
document.addEventListener('DOMContentLoaded', function() {
  // ── DataTable (desktop) ──
  if (typeof jQuery !== 'undefined' && jQuery('#tabelTabungan').length > 0) {
   jQuery('#tabelTabungan').DataTable({
  responsive: false,
  language: { url: '<?php echo base_url("assets/json/id.json"); ?>' },
  pageLength: 10,
  order: [[0, 'asc']],
  dom: "<'row mb-3'<'col-sm-6'l><'col-sm-6 d-flex justify-content-end'f>>" +
       "<'row'<'col-12'tr>>" +
       "<'row mt-3'<'col-sm-5'i><'col-sm-7 d-flex justify-content-end'p>>",
  columnDefs: [
    { orderable: false, targets: <?php echo $user_role == 'admin' ? '[0,6]' : '[0,4]'; ?> }
  ]
});
  }

  // ── Mobile filter ──
  applyFilters();
});

function applyFilters() {
  var jenis  = (document.getElementById('filterJenis')  || {}).value || '';
  var status = (document.getElementById('filterStatus') || {}).value || '';
  var search = ((document.getElementById('filterSearch') || {}).value || '').toLowerCase().trim();

  // DataTable column filter (desktop)
  if (typeof jQuery !== 'undefined' && jQuery.fn.DataTable && jQuery('#tabelTabungan').length > 0) {
    var dt = jQuery('#tabelTabungan').DataTable();
    // Use global search for name, column search for jenis/status via data attr approach
    dt.search(search).draw(false);
  }

  // Mobile cards
  var cards = document.querySelectorAll('#mobileCardList .m-card');
  var visible = 0;
  cards.forEach(function(card) {
    var j = card.dataset.jenis  || '';
    var s = card.dataset.status || '';
    var n = card.dataset.nama   || '';
    var show = (!jenis  || j === jenis)
            && (!status || s === status)
            && (!search || n.includes(search));
    card.style.display = show ? '' : 'none';
    if(show) visible++;
  });
  var noResult = document.getElementById('mobileNoResult');
  if(noResult) noResult.style.display = (cards.length > 0 && visible === 0) ? 'block' : 'none';
}

function resetFilters() {
  var el;
  if((el = document.getElementById('filterJenis')))  el.value = '';
  if((el = document.getElementById('filterStatus'))) el.value = '';
  if((el = document.getElementById('filterSearch'))) el.value = '';
  applyFilters();
}
</script>