<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<style>
:root{--t8:#0b5a52;--t7:#0b7a6e;--t6:#0d9488;--t5:#14b8a6;--t4:#2dd4bf;--t1:#ccfbf1;--t0:#f0fdfa;--a5:#fffbeb;--a4:#fef3c7;--a3:#fbbf24;--a2:#d97706;--r5:#ef4444;--r0:#fef2f2;--r1:#fee2e2;--g5:#10b981;--g0:#f0fdf4;--g1:#dcfce7;--b0:#eff6ff;--b1:#dbeafe;--b5:#3b82f6;--p0:#f5f3ff;--p1:#ede9fe;--p5:#8b5cf6;--s0:#f8fafc;--s1:#f1f5f9;--s2:#e2e8f0;--s4:#94a3b8;--s5:#64748b;--s7:#334155;--s9:#0f172a;--rad:14px;--rsm:9px;--rxs:6px;--sha:0 4px 24px rgba(13,148,136,0.10),0 1px 4px rgba(0,0,0,0.05);--shs:0 1px 3px rgba(0,0,0,.06),0 4px 20px rgba(0,0,0,.06);}
.bsi-hdr{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px;margin-bottom:20px;}
.bsi-hdr-l h4{font-size:1.25rem;font-weight:800;color:var(--t8);margin:0 0 5px;display:flex;align-items:center;gap:11px;letter-spacing:-.3px;}
.bsi-hdr-l 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;}
.bsi-bc{display:flex;align-items:center;gap:6px;font-size:0.77rem;color:var(--s4);padding-left:51px;}
.bsi-bc a{color:var(--t6);text-decoration:none;font-weight:600;}
.bsi-bc .sep{color:var(--s2);}
.btn-add{display:inline-flex;align-items:center;gap:7px;padding:10px 22px;border-radius:50px;border:none;background:var(--t6);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;}
.btn-add:hover{background:var(--t7);transform:translateY(-1px);color:#fff;}
.privacy-notice{display:flex;align-items:flex-start;gap:10px;background:var(--b0);border-left:4px solid var(--b5);border-radius:var(--rsm);padding:12px 16px;margin-bottom:18px;font-size:0.83rem;color:#1e3a5f;}
.privacy-notice i{color:var(--b5);flex-shrink:0;margin-top:1px;}
.bs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.bs-stat{background:#fff;border-radius:var(--rsm);box-shadow:var(--shs);border:1.5px solid var(--s1);padding:14px 16px;display:flex;align-items:center;gap:12px;}
.bsi-ico{width:42px;height:42px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem;}
.ic-t{background:var(--t0);color:var(--t6);} .ic-g{background:var(--g0);color:var(--g5);} .ic-a{background:var(--a5);color:var(--a2);} .ic-p{background:var(--p0);color:var(--p5);}
.sv{font-size:1.4rem;font-weight:800;color:var(--s9);line-height:1;} .sl{font-size:0.72rem;color:var(--s4);font-weight:600;margin-top:2px;}
.yr-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;align-items:center;}
.yr-tab{padding:6px 16px;border-radius:50px;font-size:0.81rem;font-weight:700;border:1.5px solid var(--s2);background:#fff;color:var(--s5);text-decoration:none;transition:all .18s;}
.yr-tab:hover{border-color:var(--t4);color:var(--t7);}
.yr-tab.active{background:var(--t6);border-color:var(--t6);color:#fff;}
.bs-fbar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center;}
.bs-sel{padding:7px 12px;border-radius:var(--rsm);border:1.5px solid var(--s2);font-size:0.82rem;color:var(--s7);background:#fff;cursor:pointer;transition:border-color .18s;}
.bs-sel:focus{border-color:var(--t5);outline:none;}
.bs-sw{position:relative;flex:1;min-width:200px;}
.bs-sw i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--s4);pointer-events:none;font-size:0.85rem;}
.bs-srch{width:100%;padding:7px 12px 7px 32px;border-radius:var(--rsm);border:1.5px solid var(--s2);font-size:0.82rem;color:var(--s7);background:#fff;box-sizing:border-box;transition:border-color .18s;}
.bs-srch:focus{border-color:var(--t5);outline:none;}
.bsc{background:#fff;border-radius:var(--rad);box-shadow:var(--sha);border:1.5px solid var(--s1);overflow:hidden;}
.bsc-h{display:flex;align-items:center;justify-content:space-between;padding:15px 22px;border-bottom:1.5px solid var(--s1);background:var(--s0);flex-wrap:wrap;gap:8px;}
.bsc-h h5{font-size:0.9rem;font-weight:700;color:var(--t8);margin:0;display:flex;align-items:center;gap:7px;}
.bt-wrap{overflow-x:auto;}
.bt{width:100%;border-collapse:collapse;min-width:680px;}
.bt thead tr{background:var(--s0);border-bottom:2px solid var(--s2);}
.bt thead th{padding:10px 14px;font-size:0.69rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--s4);white-space:nowrap;}
.bt tbody tr{border-bottom:1px solid var(--s1);transition:background .15s;}
.bt tbody tr:hover{background:var(--t0);}
.bt tbody tr:last-child{border-bottom:none;}
.bt tbody td{padding:12px 14px;font-size:0.85rem;color:var(--s7);vertical-align:middle;}
.nc{font-weight:700;color:var(--s9);} .nikc{font-size:0.74rem;color:var(--s4);font-family:monospace;}
.jp{display:inline-flex;align-items:center;gap:4px;border-radius:50px;padding:3px 9px;font-size:0.69rem;font-weight:700;margin:2px 2px 0 0;white-space:nowrap;}
.jp-blt{background:#fef2f2;color:var(--r5);border:1px solid var(--r1);}
.jp-sembako{background:var(--g0);color:var(--g5);border:1px solid var(--g1);}
.jp-lansia{background:var(--p0);color:var(--p5);border:1px solid var(--p1);}
.jp-pkh{background:var(--b0);color:var(--b5);border:1px solid var(--b1);}
.jp-bpnt{background:var(--a5);color:var(--a2);border:1px solid var(--a4);}
.jp-lainnya{background:var(--s1);color:var(--s5);border:1px solid var(--s2);}
.sp{display:inline-flex;align-items:center;gap:4px;border-radius:50px;padding:3px 10px;font-size:0.69rem;font-weight:700;}
.sp-a{background:var(--t0);color:var(--t7);border:1px solid var(--t1);}
.sp-n{background:var(--s1);color:var(--s5);border:1px solid var(--s2);}
.sp-d{background:var(--a5);color:var(--a2);border:1px solid var(--a4);}
.mine-badge{display:inline-flex;align-items:center;gap:4px;font-size:0.67rem;font-weight:700;color:var(--t7);background:var(--t1);border-radius:50px;padding:2px 7px;}
.ab{display:flex;gap:5px;}
.a-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:var(--rxs);border:1.5px solid var(--s2);background:#fff;color:var(--s5);font-size:0.74rem;font-weight:600;text-decoration:none;transition:all .15s;cursor:pointer;}
.a-btn:hover{background:var(--s0);border-color:var(--s4);}
.a-btn.d{border-color:var(--r1);color:var(--r5);}
.a-btn.d:hover{background:var(--r0);}
.a-btn.r{border-color:var(--t1);color:var(--t6);}
.a-btn.r:hover{background:var(--t0);}
.empty-s{text-align:center;padding:56px 24px;}
.em-ico{width:72px;height:72px;border-radius:50%;background:var(--t0);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--t5);font-size:1.8rem;}
.empty-s h6{font-weight:700;color:var(--s7);margin-bottom:4px;}
.empty-s p{font-size:0.83rem;color:var(--s4);}
.flash{display:flex;align-items:flex-start;gap:10px;border-radius:var(--rsm);padding:13px 16px;margin-bottom:18px;font-size:0.85rem;}
.fl-s{background:var(--t0);border-left:4px solid var(--t6);color:var(--t8);}
.fl-e{background:var(--r0);border-left:4px solid var(--r5);color:#7f1d1d;}
.flash .fc{margin-left:auto;cursor:pointer;background:none;border:none;color:inherit;opacity:.55;}
.bm-list{display:none;padding:12px;}
.bm-card{background:#fff;border:1.5px solid var(--s2);border-radius:var(--rsm);padding:14px;margin-bottom:10px;}
.bm-card.mine{border-color:var(--t1);border-left:4px solid var(--t5);}
.btn-fab{display:none;position:fixed;bottom:24px;right:20px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--t8),var(--t5));color:#fff;align-items:center;justify-content:center;font-size:1.4rem;text-decoration:none;box-shadow:0 6px 20px rgba(13,148,136,0.45);z-index:200;transition:all .2s;}
.btn-fab:hover{transform:scale(1.08);color:#fff;}
@media(max-width:767px){.bsi-hdr{flex-direction:column;align-items:flex-start;}.btn-add{display:none;}.btn-fab{display:flex !important;}.bs-stats{grid-template-columns:repeat(2,1fr);}.bt-wrap{display:none;}.bm-list{display:block;}}
@media(min-width:768px){.btn-fab{display:none !important;}}
</style>

<div class="pg-wrapper">

<div class="bsi-hdr">
  <div class="bsi-hdr-l">
    <h4><span class="hi"><i class="bi bi-heart-pulse-fill"></i></span>Bantuan Sosial Warga</h4>
    <div class="bsi-bc">
      <a href="<?php echo base_url('dashboard');?>">Dashboard</a><span class="sep">/</span><span>Bantuan Sosial</span>
    </div>
  </div>
<?php if($is_admin):?>
  <div style="display:flex;gap:8px;flex-wrap:wrap;">
    <a href="<?php echo base_url('warga_kurang_mampu');?>" class="btn-add" style="background:linear-gradient(135deg,#d97706,#f59e0b);box-shadow:0 3px 12px rgba(217,119,6,0.28);"><i class="bi bi-house-heart-fill"></i> Warga Kurang Mampu</a>
    <a href="<?php echo base_url('bansos/tambah');?>" class="btn-add"><i class="bi bi-plus-circle"></i> Tambah Penerima</a>
  </div>
  <?php endif;?>
</div>

<?php if($this->session->flashdata('success')):?>
<div class="flash fl-s" id="flashMsg"><i class="bi bi-check-circle-fill"></i><span><?php echo $this->session->flashdata('success');?></span><button class="fc" onclick="this.parentElement.remove()">✕</button></div>
<?php endif;?>
<?php if($this->session->flashdata('error')):?>
<div class="flash fl-e" id="flashMsg"><i class="bi bi-x-circle-fill"></i><span><?php echo $this->session->flashdata('error');?></span><button class="fc" onclick="this.parentElement.remove()">✕</button></div>
<?php endif;?>

<?php if(!$is_admin):?>
<div class="privacy-notice">
  <i class="bi bi-shield-lock-fill"></i>
  <div><strong>Data Pribadi</strong> — Halaman ini hanya menampilkan data bantuan sosial milik Anda. Informasi ini bersifat <strong>privasi</strong> dan tidak dapat dilihat warga lain.</div>
</div>
<?php endif;?>

<?php if($is_admin):?>
<div class="bs-stats">
  <div class="bs-stat"><div class="bsi-ico ic-t"><i class="bi bi-people-fill"></i></div><div><div class="sv"><?php echo $total_penerima??0;?></div><div class="sl">Total Penerima</div></div></div>
  <div class="bs-stat"><div class="bsi-ico ic-g"><i class="bi bi-check-circle-fill"></i></div><div><div class="sv"><?php echo $total_aktif??0;?></div><div class="sl">Aktif</div></div></div>
  <div class="bs-stat"><div class="bsi-ico ic-a"><i class="bi bi-hourglass-split"></i></div><div><div class="sv"><?php echo $total_ditinjau??0;?></div><div class="sl">Perlu Ditinjau</div></div></div>
  <div class="bs-stat"><div class="bsi-ico ic-p"><i class="bi bi-gift-fill"></i></div><div><div class="sv"><?php echo $total_jenis_aktif??0;?></div><div class="sl">Jenis Aktif</div></div></div>
</div>
<?php endif;?>

<div class="yr-tabs">
  <span style="font-size:0.78rem;font-weight:700;color:var(--s4);margin-right:2px;"><i class="bi bi-calendar3"></i> Tahun:</span>
  <a href="<?php echo base_url('bansos');?>" class="yr-tab <?php echo !$this->input->get('tahun')?'active':'';?>">Semua</a>
  <?php for($y=date('Y');$y>=2020;$y--):?>
  <a href="<?php echo base_url('bansos?tahun='.$y);?>" class="yr-tab <?php echo $this->input->get('tahun')==$y?'active':'';?>"><?php echo $y;?></a>
  <?php endfor;?>
</div>

<?php if($is_admin):?>
<div class="bs-fbar">
  <form method="get" action="<?php echo base_url('bansos');?>" style="display:contents;">
    <?php if($this->input->get('tahun')):?><input type="hidden" name="tahun" value="<?php echo $this->input->get('tahun');?>"><?php endif;?>
    <select name="jenis" class="bs-sel" onchange="this.form.submit()">
      <option value="">Semua Jenis</option>
      <option value="blt"     <?php echo $this->input->get('jenis')=='blt'    ?'selected':'';?>>BLT</option>
      <option value="sembako" <?php echo $this->input->get('jenis')=='sembako'?'selected':'';?>>Sembako</option>
      <option value="pkh"     <?php echo $this->input->get('jenis')=='pkh'    ?'selected':'';?>>PKH</option>
      <option value="bpnt"    <?php echo $this->input->get('jenis')=='bpnt'   ?'selected':'';?>>BPNT</option>
      <option value="lansia"  <?php echo $this->input->get('jenis')=='lansia' ?'selected':'';?>>Lansia</option>
    </select>
    <select name="status" class="bs-sel" onchange="this.form.submit()">
      <option value="">Semua Status</option>
      <option value="aktif"    <?php echo $this->input->get('status')=='aktif'   ?'selected':'';?>>Aktif</option>
      <option value="ditinjau" <?php echo $this->input->get('status')=='ditinjau'?'selected':'';?>>Ditinjau</option>
      <option value="nonaktif" <?php echo $this->input->get('status')=='nonaktif'?'selected':'';?>>Nonaktif</option>
    </select>
    <div class="bs-sw"><i class="bi bi-search"></i><input type="text" name="q" class="bs-srch" placeholder="Cari nama atau NIK..." value="<?php echo htmlspecialchars($this->input->get('q')??'');?>"></div>
    <button type="submit" class="a-btn"><i class="bi bi-funnel"></i> Filter</button>
    <?php if($this->input->get('jenis')||$this->input->get('status')||$this->input->get('q')):?>
    <a href="<?php echo base_url('bansos'.($this->input->get('tahun')?'?tahun='.$this->input->get('tahun'):''));?>" class="a-btn"><i class="bi bi-x-circle"></i> Reset</a>
    <?php endif;?>
  </form>
</div>
<?php endif;?>

<div class="bsc">
  <div class="bsc-h">
    <h5><i class="bi bi-list-check" style="color:var(--t5);"></i><?php echo $is_admin?'Data Penerima Bantuan':'Bantuan Sosial Saya';?></h5>
    <span style="font-size:0.78rem;color:var(--s4);"><i class="bi bi-database"></i> <?php echo count($bansos??[]);?> data</span>
  </div>

  <?php if(empty($bansos)):?>
  <div class="empty-s">
    <div class="em-ico"><i class="bi bi-heart-pulse"></i></div>
    <h6><?php echo $is_admin?'Belum Ada Data':'Belum Ada Bantuan';?></h6>
    <p><?php echo $is_admin?'Tambahkan data penerima bantuan sosial warga RT.':'Anda belum terdaftar sebagai penerima bantuan sosial.';?></p>
  </div>
  <?php else:
    $jl=['blt'=>'BLT','sembako'=>'Sembako','pkh'=>'PKH','bpnt'=>'BPNT','lansia'=>'Lansia','lainnya'=>'Lainnya'];
    $spi=['aktif'=>'bi-check-circle-fill','nonaktif'=>'bi-dash-circle-fill','ditinjau'=>'bi-hourglass-split'];
    $spcs=['aktif'=>'sp-a','nonaktif'=>'sp-n','ditinjau'=>'sp-d'];
  ?>

  <!-- Desktop Table -->
  <div class="bt-wrap">
    <table class="bt">
      <thead><tr>
        <th>#</th>
        <?php if($is_admin):?><th>Nama Warga</th><th>NIK</th><?php endif;?>
        <th>Jenis Bantuan</th><th>Tahun</th><th>Status</th><th>Keterangan</th>
        <?php if($is_admin):?><th>Aksi</th><?php endif;?>
      </tr></thead>
      <tbody>
      <?php $no=1;foreach($bansos as $b):
        $jenis_arr=json_decode($b->jenis_bantuan??'[]',true)?:[];
      ?>
      <tr>
        <td><?php echo $no++;?></td>
        <?php if($is_admin):?>
        <td><div class="nc"><?php echo htmlspecialchars($b->nama_lengkap??'-');?></div></td>
        <td><div class="nikc"><?php echo htmlspecialchars($b->nik??'-');?></div></td>
        <?php endif;?>
        <td>
          <?php foreach((array)$jenis_arr as $j):$j=strtolower(trim($j));?>
          <span class="jp jp-<?php echo $j;?>"><i class="bi bi-tag-fill" style="font-size:0.58rem;"></i><?php echo $jl[$j]??ucfirst($j);?></span>
          <?php endforeach;?>
        </td>
        <td><strong><?php echo $b->tahun;?></strong></td>
        <td><span class="sp <?php echo $spcs[$b->status]??'sp-n';?>"><i class="bi <?php echo $spi[$b->status]??'bi-circle';?>" style="font-size:0.62rem;"></i><?php echo ucfirst($b->status);?></span></td>
        <td style="font-size:0.79rem;color:var(--s5);max-width:140px;"><?php echo htmlspecialchars(mb_substr($b->keterangan??'',0,55));?><?php if(mb_strlen($b->keterangan??'')>55):?>...<?php endif;?></td>
        <?php if($is_admin):?>
        <td>
          <div class="ab">
            <a href="<?php echo base_url('bansos/riwayat/'.$b->warga_id);?>" class="a-btn r" title="Riwayat"><i class="bi bi-clock-history"></i></a>
            <a href="<?php echo base_url('bansos/edit/'.$b->id);?>" class="a-btn" title="Edit"><i class="bi bi-pencil"></i></a>
            <button class="a-btn d" style="flex:1;justify-content:center;"
  onclick="konfirmasiHapusBansos('<?php echo base_url('bansos/hapus/'.$b->id);?>','<?php echo addslashes($b->nama_lengkap??'-');?>')">
  <i class="bi bi-trash"></i>
</button>
          </div>
        </td>
        <?php endif;?>
      </tr>
      <?php endforeach;?>
      </tbody>
    </table>
  </div>

  <!-- Mobile Cards -->
  <div class="bm-list">
    <?php foreach($bansos as $b):
      $jenis_arr=json_decode($b->jenis_bantuan??'[]',true)?:[];
    ?>
    <div class="bm-card">
      <?php if($is_admin):?>
      <div style="font-weight:700;font-size:0.88rem;color:var(--s9);"><?php echo htmlspecialchars($b->nama_lengkap??'-');?></div>
      <div class="nikc" style="margin-bottom:8px;"><?php echo htmlspecialchars($b->nik??'-');?></div>
      <?php endif;?>
      <div style="display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px;">
        <?php foreach((array)$jenis_arr as $j):$j=strtolower(trim($j));?>
        <span class="jp jp-<?php echo $j;?>"><?php echo $jl[$j]??ucfirst($j);?></span>
        <?php endforeach;?>
      </div>
      <div style="display:flex;gap:10px;align-items:center;font-size:0.78rem;">
        <span style="color:var(--s5);"><i class="bi bi-calendar3 me-1"></i><strong><?php echo $b->tahun;?></strong></span>
        <span class="sp <?php echo $spcs[$b->status]??'sp-n';?>"><?php echo ucfirst($b->status);?></span>
      </div>
      <?php if(!empty($b->keterangan)):?><div style="margin-top:6px;font-size:0.77rem;color:var(--s4);"><?php echo htmlspecialchars(mb_substr($b->keterangan,0,80));?></div><?php endif;?>
      <?php if($is_admin):?>
      <div style="display:flex;gap:6px;margin-top:10px;">
        <a href="<?php echo base_url('bansos/riwayat/'.$b->warga_id);?>" class="a-btn r" style="flex:1;justify-content:center;"><i class="bi bi-clock-history"></i> Riwayat</a>
        <a href="<?php echo base_url('bansos/edit/'.$b->id);?>" class="a-btn" style="flex:1;justify-content:center;"><i class="bi bi-pencil"></i> Edit</a>
        <a href="<?php echo base_url('bansos/hapus/'.$b->id);?>" onclick="return confirm('Hapus?')" class="a-btn d" style="flex:1;justify-content:center;"><i class="bi bi-trash"></i></a>
      </div>
      <?php endif;?>
    </div>
    <?php endforeach;?>
  </div>
  <?php endif;?>
</div>
<!-- Modal Konfirmasi Hapus Bansos -->
<div class="modal fade" id="modalHapusBansos" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" style="max-width:380px;">
    <div class="modal-content" style="border-radius:16px;border:none;overflow:hidden;">
      <div class="modal-header" style="background:#fef2f2;border-bottom:1.5px solid #fecaca;padding:18px 20px;">
        <div class="d-flex align-items-center gap-2">
          <div style="width:36px;height:36px;background:#fee2e2;border-radius:10px;display:flex;align-items:center;justify-content:center;">
            <i class="bi bi-trash-fill" style="color:#dc2626;font-size:1rem;"></i>
          </div>
          <h6 class="modal-title mb-0 fw-bold" style="color:#991b1b;font-size:.95rem;">Hapus Data Bantuan</h6>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body" style="padding:20px;">
        <p style="font-size:.85rem;color:#334155;margin-bottom:10px;">Hapus data bantuan sosial untuk:</p>
        <div style="background:#fef2f2;border:1.5px solid #fecaca;border-radius:10px;padding:11px 14px;display:flex;align-items:center;gap:10px;">
          <div style="width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#0b7a6e,#0d9488);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;flex-shrink:0;" id="hapusBansosAvatar">?</div>
          <div style="font-weight:700;font-size:.88rem;color:#991b1b;" id="hapusBansosNama">-</div>
        </div>
        <div style="background:#fffbeb;border:1.5px solid #fde68a;border-radius:8px;padding:9px 14px;margin-top:12px;font-size:.78rem;color:#92400e;">
          <i class="bi bi-exclamation-triangle-fill me-1"></i>
          Data akan <strong>terhapus permanen</strong> dan tidak dapat dikembalikan.
        </div>
      </div>
      <div class="modal-footer" style="border:none;padding:0 20px 18px;gap:8px;">
        <button type="button" class="btn" data-bs-dismiss="modal"
          style="border-radius:8px;border:1.5px solid #e5e7eb;font-size:.82rem;font-weight:600;color:#64748b;padding:7px 18px;flex:1;">
          <i class="bi bi-x-lg me-1"></i>Batal
        </button>
        <a href="#" id="btnKonfirmasiHapusBansos"
          style="border-radius:8px;border:none;font-size:.82rem;font-weight:700;color:#fff;padding:7px 18px;flex:1;background:linear-gradient(135deg,#dc2626,#ef4444);box-shadow:0 4px 12px rgba(220,38,38,.28);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;">
          <i class="bi bi-trash-fill"></i>Ya, Hapus
        </a>
      </div>
    </div>
  </div>
</div>
</div><!-- /pg-wrapper -->
<?php if($is_admin):?>
<a href="<?php echo base_url('bansos/tambah');?>" class="btn-fab"><i class="bi bi-plus-lg"></i></a>
<?php endif;?>
<script>
document.addEventListener('DOMContentLoaded', function() {

  // ── Auto-dismiss flash ──
  setTimeout(function() {
    var el = document.getElementById('flashMsg');
    if(el) {
      el.style.transition = 'opacity .4s';
      el.style.opacity = '0';
      setTimeout(function(){ if(el.parentNode) el.parentNode.removeChild(el); }, 420);
    }
  }, 4500);

});

// ── Hapus Bansos Modal — global scope ──
var _bsModalHapusBansos = null;

function konfirmasiHapusBansos(url, nama) {
  var elNama   = document.getElementById('hapusBansosNama');
  var elAvatar = document.getElementById('hapusBansosAvatar');
  var elBtn    = document.getElementById('btnKonfirmasiHapusBansos');
  if(elNama)   elNama.textContent   = nama || '-';
  if(elAvatar) elAvatar.textContent = nama ? nama.charAt(0).toUpperCase() : '?';
  if(elBtn)    elBtn.href           = url;
  var modalEl = document.getElementById('modalHapusBansos');
  if(!modalEl) return;
  if(!_bsModalHapusBansos) _bsModalHapusBansos = new bootstrap.Modal(modalEl);
  _bsModalHapusBansos.show();
}
</script>