<?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;
  --o0:#fff7ed;--o1:#ffedd5;--o5:#f97316;
  --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);
}




/* ── Header ── */
.rw-hdr{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px;margin-bottom:22px;}
.rw-hdr-l h4{font-size:1.22rem;font-weight:800;color:var(--t8);margin:0 0 5px;display:flex;align-items:center;gap:11px;letter-spacing:-.3px;}
.rw-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,.32);flex-shrink:0;}
.rw-bc{display:flex;align-items:center;gap:6px;font-size:0.77rem;color:var(--s4);padding-left:51px;}
.rw-bc a{color:var(--t6);text-decoration:none;font-weight:600;}
.rw-bc .sep{color:var(--s2);}

/* ── Warga Card ── */
.warga-card{background:#fff;border-radius:var(--rad);box-shadow:var(--sha);border:1.5px solid var(--t1);padding:20px 24px;margin-bottom:20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.warga-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--t6),var(--t4));display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;font-weight:800;flex-shrink:0;box-shadow:0 4px 14px rgba(13,148,136,.28);}
.warga-info{flex:1;min-width:0;}
.warga-info .wn{font-size:1.05rem;font-weight:800;color:var(--s9);margin:0 0 3px;}
.warga-info .wd{display:flex;gap:14px;flex-wrap:wrap;font-size:0.78rem;color:var(--s5);}
.warga-info .wd span{display:flex;align-items:center;gap:4px;}
.warga-badge{display:inline-flex;align-items:center;gap:4px;background:var(--t0);color:var(--t7);border:1.5px solid var(--t1);border-radius:50px;padding:5px 14px;font-size:0.78rem;font-weight:700;}

/* ── Stats mini ── */
/* Ganti bagian ini di CSS */
.rw-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

/* Tambahkan media query ini */
@media (max-width: 640px) {
  .rw-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.rw-stat{background:#fff;border-radius:var(--rsm);border:1.5px solid var(--s1);box-shadow:var(--shs);padding:13px 15px;display:flex;align-items:center;gap:10px;}
.rw-stat-ico{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.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-o{background:var(--o0);color:var(--o5);}
.rw-sv{font-size:1.3rem;font-weight:800;color:var(--s9);line-height:1;}
.rw-sl{font-size:0.7rem;color:var(--s4);font-weight:600;margin-top:2px;}

/* ── Tab Layout ── */
.rw-layout{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start;}
@media(max-width:900px) {
  .rw-layout { grid-template-columns: 1fr; }
  .rw-stats  { grid-template-columns: repeat(2, 1fr); }
}

/* ── Bantuan Timeline ── */
.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 20px;border-bottom:1.5px solid var(--s1);background:var(--s0);}
.bsc-h h5{font-size:0.88rem;font-weight:700;color:var(--t8);margin:0;display:flex;align-items:center;gap:7px;}

.tl{padding:0 20px 20px;}
.tl-yr{position:relative;padding:18px 0 8px;}
.tl-yr-label{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--t6),var(--t5));color:#fff;border-radius:50px;padding:4px 14px;font-size:0.78rem;font-weight:800;letter-spacing:.5px;box-shadow:0 2px 8px rgba(13,148,136,.25);}
.tl-item{position:relative;padding:12px 0 12px 28px;border-left:2px solid var(--t1);margin-left:7px;}
.tl-item:last-child{border-left-color:transparent;}
.tl-dot{position:absolute;left:-7px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--t5);border:2.5px solid #fff;box-shadow:0 0 0 2px var(--t4);}
.tl-dot.nonaktif{background:var(--s4);box-shadow:0 0 0 2px var(--s2);}
.tl-dot.ditinjau{background:var(--a3);box-shadow:0 0 0 2px var(--a4);}
.tl-card{background:#fff;border:1.5px solid var(--s2);border-radius:var(--rsm);padding:13px 15px;transition:all .2s;}
.tl-card:hover{border-color:var(--t4);box-shadow:0 2px 12px rgba(13,148,136,.10);}
.tl-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:9px;}
.tl-jenis{display:flex;gap:4px;flex-wrap:wrap;}
.jp{display:inline-flex;align-items:center;gap:4px;border-radius:50px;padding:3px 9px;font-size:0.68rem;font-weight:700;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.68rem;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);}

/* Undangan section dalam card */
.undangan-sect{margin-top:10px;padding-top:10px;border-top:1px dashed var(--s2);}
.undangan-sect-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;}
.undangan-sect-hdr span{font-size:0.74rem;font-weight:700;color:var(--s5);}
.btn-add-undangan{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--rxs);border:1.5px solid var(--t1);background:var(--t0);color:var(--t7);font-size:0.72rem;font-weight:700;cursor:pointer;transition:all .15s;}
.btn-add-undangan:hover{background:var(--t1);}
.undangan-list{display:flex;flex-direction:column;gap:5px;}
.undangan-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--rxs);background:var(--s0);border:1px solid var(--s1);}
.undangan-item.hadir{background:var(--g0);border-color:var(--g1);}
.undangan-item.tidak_hadir{background:var(--r0);border-color:var(--r1);}
.und-no{width:20px;height:20px;border-radius:50%;background:var(--s2);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:800;color:var(--s5);flex-shrink:0;}
.undangan-item.hadir .und-no{background:var(--g1);color:var(--g5);}
.undangan-item.tidak_hadir .und-no{background:var(--r1);color:var(--r5);}
.und-info{flex:1;min-width:0;}
.und-tgl{font-size:0.74rem;font-weight:700;color:var(--s7);}
.und-ket{font-size:0.69rem;color:var(--s4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;}
.und-status{display:inline-flex;align-items:center;gap:3px;border-radius:50px;padding:2px 8px;font-size:0.66rem;font-weight:700;}
.und-s-h{background:var(--g0);color:var(--g5);border:1px solid var(--g1);}
.und-s-t{background:var(--r0);color:var(--r5);border:1px solid var(--r1);}
.und-s-m{background:var(--b0);color:var(--b5);border:1px solid var(--b1);}
.und-actions{display:flex;gap:3px;flex-shrink:0;}
.und-act{display:inline-flex;align-items:center;padding:3px 6px;border-radius:5px;border:1.5px solid var(--s2);background:#fff;color:var(--s5);font-size:0.7rem;cursor:pointer;transition:all .15s;}
.und-act:hover{background:var(--s0);}
.und-act.danger{border-color:var(--r1);color:var(--r5);}
.und-act.danger:hover{background:var(--r0);}
.empty-und{text-align:center;padding:12px;font-size:0.76rem;color:var(--s4);background:var(--s0);border-radius:var(--rxs);}
.und-count-badge{display:inline-flex;align-items:center;gap:3px;background:var(--o0);color:var(--o5);border:1px solid var(--o1);border-radius:50px;padding:2px 8px;font-size:0.68rem;font-weight:700;}

/* ── Panel Catat Undangan ── */
.panel-catat{background:#fff;border-radius:var(--rad);box-shadow:var(--sha);border:1.5px solid var(--s1);overflow:hidden;position:sticky;top:20px;}
.panel-h{padding:14px 18px;border-bottom:1.5px solid var(--s1);background:var(--s0);}
.panel-h h5{font-size:0.88rem;font-weight:700;color:var(--t8);margin:0;display:flex;align-items:center;gap:7px;}
.panel-body{padding:16px 18px;}
.fm-grp{margin-bottom:14px;}
.fm-lbl{display:block;font-size:0.77rem;font-weight:700;color:var(--s7);margin-bottom:5px;}
.fm-lbl span.req{color:var(--r5);}
.fm-inp,.fm-sel,.fm-ta{width:100%;padding:8px 11px;border-radius:var(--rsm);border:1.5px solid var(--s2);font-size:0.82rem;color:var(--s9);background:#fff;box-sizing:border-box;transition:border-color .18s;font-family:inherit;}
.fm-inp:focus,.fm-sel:focus,.fm-ta:focus{border-color:var(--t5);outline:none;}
.fm-ta{resize:vertical;min-height:70px;}
.fm-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.btn-primary{width:100%;padding:10px;border-radius:var(--rsm);border:none;background:linear-gradient(135deg,var(--t6),var(--t5));color:#fff;font-size:0.85rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .2s;box-shadow:0 3px 12px rgba(13,148,136,.25);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(13,148,136,.32);}
.fm-hint{font-size:0.72rem;color:var(--s4);margin-top:3px;}

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

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(3px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal-box{background:#fff;border-radius:var(--rad);box-shadow:0 20px 60px rgba(0,0,0,.2);width:100%;max-width:440px;transform:scale(.95) translateY(10px);transition:all .25s;}
.modal-overlay.open .modal-box{transform:scale(1) translateY(0);}
.modal-hdr{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1.5px solid var(--s1);}
.modal-hdr h6{font-size:0.9rem;font-weight:800;color:var(--t8);margin:0;}
.modal-cls{background:none;border:none;color:var(--s4);font-size:1.1rem;cursor:pointer;padding:2px 5px;border-radius:5px;}
.modal-cls:hover{background:var(--s1);color:var(--s7);}
.modal-body{padding:18px 20px;}
.modal-foot{padding:14px 20px;border-top:1.5px solid var(--s1);display:flex;gap:8px;justify-content:flex-end;}
.btn-sec{padding:8px 18px;border-radius:var(--rsm);border:1.5px solid var(--s2);background:#fff;color:var(--s5);font-size:0.82rem;font-weight:600;cursor:pointer;}
.btn-sec:hover{background:var(--s1);}
.btn-danger{padding:8px 18px;border-radius:var(--rsm);border:none;background:var(--r5);color:#fff;font-size:0.82rem;font-weight:700;cursor:pointer;}
.btn-danger:hover{background:#dc2626;}

/* Empty state */
.empty-rw{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-rw h6{font-weight:700;color:var(--s7);margin-bottom:4px;}
.empty-rw p{font-size:0.83rem;color:var(--s4);}

.a-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;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);}
.a-btn.back{border-color:var(--t1);color:var(--t6);}
.a-btn.back:hover{background:var(--t0);}
</style>

<div class="pg-wrapper">

<!-- Header -->
<div class="rw-hdr">
  <div class="rw-hdr-l">
    <h4><span class="hi"><i class="bi bi-clock-history"></i></span>Riwayat Bantuan Sosial</h4>
    <div class="rw-bc">
      <a href="<?php echo base_url('dashboard');?>">Dashboard</a><span class="sep">/</span>
      <a href="<?php echo base_url('bansos');?>">Bantuan Sosial</a><span class="sep">/</span>
      <span>Riwayat</span>
    </div>
  </div>
  <a href="<?php echo base_url('bansos');?>" class="a-btn back"><i class="bi bi-arrow-left"></i> Kembali</a>
</div>

<!-- Flash -->
<?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;?>

<!-- Warga Card -->
<div class="warga-card">
  <div class="warga-avatar"><?php echo strtoupper(mb_substr($warga->nama_lengkap??'?',0,1));?></div>
  <div class="warga-info">
    <div class="wn"><?php echo htmlspecialchars($warga->nama_lengkap??'-');?></div>
    <div class="wd">
      <span><i class="bi bi-credit-card-2-front"></i> <?php echo htmlspecialchars($warga->nik??'-');?></span>
      <?php if(!empty($warga->no_kk)):?>
      <span><i class="bi bi-house-door"></i> KK: <?php echo htmlspecialchars($warga->no_kk);?></span>
      <?php endif;?>
      <?php if(!empty($warga->alamat)):?>
      <span><i class="bi bi-geo-alt"></i> <?php echo htmlspecialchars(mb_substr($warga->alamat,0,40));?></span>
      <?php endif;?>
    </div>
  </div>
  <div class="warga-badge"><i class="bi bi-heart-pulse-fill"></i> Penerima Bansos</div>
</div>

<?php
// Hitung statistik
$total_bantuan  = count($riwayat);
$total_aktif    = 0;
$total_undangan = 0;
$total_hadir    = 0;
foreach($riwayat as $r){
  if($r->status === 'aktif') $total_aktif++;
  $und = json_decode($r->undangan??'[]', true) ?: [];
  $total_undangan += count($und);
  foreach($und as $u){ if(($u['kehadiran']??'') === 'hadir') $total_hadir++; }
}
?>

<!-- Stats -->
<div class="rw-stats">
  <div class="rw-stat"><div class="rw-stat-ico ic-t"><i class="bi bi-calendar3"></i></div><div><div class="rw-sv"><?php echo $total_bantuan;?></div><div class="rw-sl">Tahun Terdaftar</div></div></div>
  <div class="rw-stat"><div class="rw-stat-ico ic-g"><i class="bi bi-check-circle-fill"></i></div><div><div class="rw-sv"><?php echo $total_aktif;?></div><div class="rw-sl">Status Aktif</div></div></div>
  <div class="rw-stat"><div class="rw-stat-ico ic-a"><i class="bi bi-envelope-open"></i></div><div><div class="rw-sv"><?php echo $total_undangan;?></div><div class="rw-sl">Total Undangan</div></div></div>
  <div class="rw-stat"><div class="rw-stat-ico ic-o"><i class="bi bi-person-check"></i></div><div><div class="rw-sv"><?php echo $total_hadir;?></div><div class="rw-sl">Kali Hadir</div></div></div>
</div>

<?php
$jl  = ['blt'=>'BLT','sembako'=>'Sembako','pkh'=>'PKH','bpnt'=>'BPNT','lansia'=>'Lansia','lainnya'=>'Lainnya'];
$spcs= ['aktif'=>'sp-a','nonaktif'=>'sp-n','ditinjau'=>'sp-d'];
$spi = ['aktif'=>'bi-check-circle-fill','nonaktif'=>'bi-dash-circle-fill','ditinjau'=>'bi-hourglass-split'];
$ustat_label = ['hadir'=>'Hadir','tidak_hadir'=>'Tidak Hadir','menunggu'=>'Menunggu'];
$ustat_class = ['hadir'=>'und-s-h','tidak_hadir'=>'und-s-t','menunggu'=>'und-s-m'];
$ustat_icon  = ['hadir'=>'bi-check-circle-fill','tidak_hadir'=>'bi-x-circle-fill','menunggu'=>'bi-hourglass-split'];
?>

<div class="rw-layout">

  <!-- Timeline Riwayat -->
  <div>
    <div class="bsc">
      <div class="bsc-h">
        <h5><i class="bi bi-clock-history" style="color:var(--t5);"></i>Timeline Riwayat Bantuan</h5>
        <span style="font-size:0.78rem;color:var(--s4);"><i class="bi bi-database"></i> <?php echo $total_bantuan;?> data</span>
      </div>

      <?php if(empty($riwayat)):?>
      <div class="empty-rw">
        <div class="em-ico"><i class="bi bi-heart-pulse"></i></div>
        <h6>Belum Ada Riwayat</h6>
        <p>Warga ini belum memiliki data bantuan sosial yang tercatat.</p>
      </div>
      <?php else:?>
      <div class="tl" id="timelineContainer">
        <?php $prev_yr = null; foreach($riwayat as $b):
          $jenis_arr = json_decode($b->jenis_bantuan??'[]', true) ?: [];
          $und_arr   = json_decode($b->undangan??'[]', true) ?: [];
          $hadir_c   = count(array_filter($und_arr, fn($u)=>($u['kehadiran']??'')==='hadir'));
        ?>
        <?php if($b->tahun !== $prev_yr): $prev_yr = $b->tahun;?>
        <div class="tl-yr"><span class="tl-yr-label"><i class="bi bi-calendar-check"></i> <?php echo $b->tahun;?></span></div>
        <?php endif;?>

        <div class="tl-item">
          <div class="tl-dot <?php echo $b->status;?>"></div>
          <div class="tl-card">
            <div class="tl-card-top">
              <div class="tl-jenis">
                <?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.55rem;"></i><?php echo $jl[$j]??ucfirst($j);?></span>
                <?php endforeach;?>
              </div>
              <div style="display:flex;align-items:center;gap:5px;">
                <?php if(!empty($und_arr)):?>
                <span class="und-count-badge"><i class="bi bi-envelope-paper-fill" style="font-size:0.6rem;"></i><?php echo count($und_arr);?> undangan · <?php echo $hadir_c;?> hadir</span>
                <?php endif;?>
                <span class="sp <?php echo $spcs[$b->status]??'sp-n';?>">
                  <i class="bi <?php echo $spi[$b->status]??'bi-circle';?>" style="font-size:0.6rem;"></i><?php echo ucfirst($b->status);?>
                </span>
              </div>
            </div>

            <?php if(!empty($b->keterangan)):?>
            <div style="font-size:0.77rem;color:var(--s5);margin-bottom:9px;"><i class="bi bi-chat-left-text me-1" style="color:var(--s4);"></i><?php echo htmlspecialchars($b->keterangan);?></div>
            <?php endif;?>

            <!-- Undangan Pengambilan -->
            <div class="undangan-sect">
              <div class="undangan-sect-hdr">
                <span><i class="bi bi-envelope-open me-1"></i>Undangan Pengambilan</span>
                <button class="btn-add-undangan" onclick="openAddModal(<?php echo $b->id;?>, '<?php echo addslashes(htmlspecialchars(implode(', ', array_map(fn($j)=>$jl[strtolower(trim($j))]??ucfirst($j),(array)$jenis_arr))));?>', <?php echo $b->tahun;?>)">
                  <i class="bi bi-plus-circle"></i> Catat
                </button>
              </div>

              <?php if(empty($und_arr)):?>
              <div class="empty-und"><i class="bi bi-inbox me-1"></i>Belum ada undangan pengambilan dicatat</div>
              <?php else:?>
              <div class="undangan-list">
                <?php foreach($und_arr as $ui => $u):?>
                <div class="undangan-item <?php echo $u['kehadiran']??'menunggu';?>">
                  <div class="und-no"><?php echo $ui+1;?></div>
                  <div class="und-info">
                    <div class="und-tgl"><i class="bi bi-calendar-event me-1" style="font-size:0.65rem;"></i><?php echo date('d M Y', strtotime($u['tanggal']??date('Y-m-d')));?></div>
                    <?php if(!empty($u['keterangan'])):?>
                    <div class="und-ket" title="<?php echo htmlspecialchars($u['keterangan']);?>"><?php echo htmlspecialchars($u['keterangan']);?></div>
                    <?php endif;?>
                  </div>
                  <?php $ks = $u['kehadiran']??'menunggu';?>
                  <span class="und-status <?php echo $ustat_class[$ks]??'und-s-m';?>">
                    <i class="bi <?php echo $ustat_icon[$ks]??'bi-hourglass-split';?>" style="font-size:0.6rem;"></i>
                    <?php echo $ustat_label[$ks]??ucfirst($ks);?>
                  </span>
                  <div class="und-actions">
                    <button class="und-act" title="Edit" onclick="openEditModal(<?php echo $b->id;?>, <?php echo $ui;?>, <?php echo htmlspecialchars(json_encode($u),ENT_QUOTES);?>)"><i class="bi bi-pencil"></i></button>
                    <button class="und-act danger" title="Hapus" onclick="confirmHapusUnd(<?php echo $b->id;?>, <?php echo $ui;?>)"><i class="bi bi-trash"></i></button>
                  </div>
                </div>
                <?php endforeach;?>
              </div>
              <?php endif;?>
            </div>

          </div>
        </div>
        <?php endforeach;?>
      </div>
      <?php endif;?>
    </div>
  </div>

  <!-- Panel Catat Cepat -->
  <div>
    <div class="panel-catat">
      <div class="panel-h">
        <h5><i class="bi bi-envelope-plus" style="color:var(--t5);"></i>Catat Undangan Pengambilan</h5>
      </div>
      <div class="panel-body">
        <p style="font-size:0.78rem;color:var(--s5);margin-bottom:14px;">Catat setiap undangan pengambilan bantuan dari kelurahan. Tandai kehadiran warga dalam setiap pengambilan.</p>

        <?php if(empty($riwayat)):?>
        <div style="text-align:center;padding:24px;font-size:0.8rem;color:var(--s4);"><i class="bi bi-exclamation-circle" style="font-size:1.5rem;display:block;margin-bottom:8px;"></i>Belum ada data bantuan untuk warga ini.</div>
        <?php else:?>

        <form action="<?php echo base_url('bansos/catat_undangan');?>" method="post" id="formCatatUndangan">
          <input type="hidden" name="warga_id" value="<?php echo $warga->id;?>">

          <div class="fm-grp">
            <label class="fm-lbl">Pilih Data Bantuan <span class="req">*</span></label>
            <select name="bansos_id" class="fm-sel" required id="selBansosId">
              <option value="">-- Pilih Tahun & Jenis --</option>
              <?php foreach($riwayat as $r):
                $jenis_arr = json_decode($r->jenis_bantuan??'[]',true)?:[];
                $jlabel = implode(', ', array_map(fn($j)=>$jl[strtolower(trim($j))]??ucfirst($j),(array)$jenis_arr));
              ?>
              <option value="<?php echo $r->id;?>"><?php echo $r->tahun;?> – <?php echo $jlabel;?></option>
              <?php endforeach;?>
            </select>
          </div>

          <div class="fm-row">
            <div class="fm-grp">
              <label class="fm-lbl">Tanggal Undangan <span class="req">*</span></label>
              <input type="date" name="tanggal" class="fm-inp" required value="<?php echo date('Y-m-d');?>">
            </div>
            <div class="fm-grp">
              <label class="fm-lbl">Kehadiran</label>
              <select name="kehadiran" class="fm-sel">
                <option value="menunggu">Menunggu</option>
                <option value="hadir">Hadir ✓</option>
                <option value="tidak_hadir">Tidak Hadir ✗</option>
              </select>
            </div>
          </div>

          <div class="fm-grp">
            <label class="fm-lbl">Keterangan</label>
            <textarea name="keterangan" class="fm-ta" placeholder="Misal: Pengambilan sembako gelombang 1 dari kelurahan..."></textarea>
            <div class="fm-hint">Contoh: Pengambilan BLT gelombang 2, lokasi balai desa.</div>
          </div>

          <button type="submit" class="btn-primary">
            <i class="bi bi-envelope-plus"></i> Simpan Undangan
          </button>
        </form>
        <?php endif;?>
      </div>
    </div>
  </div>

</div><!-- /rw-layout -->
</div><!-- /pg-wrapper -->

<!-- Modal Tambah Undangan (dari tombol di timeline) -->
<div class="modal-overlay" id="modalAdd">
  <div class="modal-box">
    <div class="modal-hdr">
      <h6><i class="bi bi-envelope-plus me-1" style="color:var(--t5);"></i>Catat Undangan — <span id="modalAddTitle"></span></h6>
      <button class="modal-cls" onclick="closeModal('modalAdd')"><i class="bi bi-x-lg"></i></button>
    </div>
    <form action="<?php echo base_url('bansos/catat_undangan');?>" method="post">
      <div class="modal-body">
        <input type="hidden" name="bansos_id" id="modalAddBansosId">
        <input type="hidden" name="warga_id" value="<?php echo $warga->id;?>">
        <div class="fm-grp">
          <label class="fm-lbl">Tanggal Undangan <span class="req">*</span></label>
          <input type="date" name="tanggal" class="fm-inp" required value="<?php echo date('Y-m-d');?>">
        </div>
        <div class="fm-grp">
          <label class="fm-lbl">Kehadiran</label>
          <select name="kehadiran" class="fm-sel">
            <option value="menunggu">Menunggu</option>
            <option value="hadir">Hadir ✓</option>
            <option value="tidak_hadir">Tidak Hadir ✗</option>
          </select>
        </div>
        <div class="fm-grp">
          <label class="fm-lbl">Keterangan</label>
          <textarea name="keterangan" class="fm-ta" placeholder="Misal: Pengambilan gelombang 1 dari kelurahan..."></textarea>
        </div>
      </div>
      <div class="modal-foot">
        <button type="button" class="btn-sec" onclick="closeModal('modalAdd')">Batal</button>
        <button type="submit" class="btn-primary" style="width:auto;padding:8px 20px;"><i class="bi bi-check-lg"></i> Simpan</button>
      </div>
    </form>
  </div>
</div>

<!-- Modal Edit Undangan -->
<div class="modal-overlay" id="modalEdit">
  <div class="modal-box">
    <div class="modal-hdr">
      <h6><i class="bi bi-pencil-square me-1" style="color:var(--t5);"></i>Edit Undangan</h6>
      <button class="modal-cls" onclick="closeModal('modalEdit')"><i class="bi bi-x-lg"></i></button>
    </div>
    <form action="<?php echo base_url('bansos/edit_undangan');?>" method="post">
      <div class="modal-body">
        <input type="hidden" name="bansos_id" id="editBansosId">
        <input type="hidden" name="und_index" id="editUndIndex">
        <input type="hidden" name="warga_id" value="<?php echo $warga->id;?>">
        <div class="fm-grp">
          <label class="fm-lbl">Tanggal Undangan <span class="req">*</span></label>
          <input type="date" name="tanggal" id="editTanggal" class="fm-inp" required>
        </div>
        <div class="fm-grp">
          <label class="fm-lbl">Kehadiran</label>
          <select name="kehadiran" id="editKehadiran" class="fm-sel">
            <option value="menunggu">Menunggu</option>
            <option value="hadir">Hadir ✓</option>
            <option value="tidak_hadir">Tidak Hadir ✗</option>
          </select>
        </div>
        <div class="fm-grp">
          <label class="fm-lbl">Keterangan</label>
          <textarea name="keterangan" id="editKeterangan" class="fm-ta"></textarea>
        </div>
      </div>
      <div class="modal-foot">
        <button type="button" class="btn-sec" onclick="closeModal('modalEdit')">Batal</button>
        <button type="submit" class="btn-primary" style="width:auto;padding:8px 20px;"><i class="bi bi-check-lg"></i> Simpan Perubahan</button>
      </div>
    </form>
  </div>
</div>

<!-- Modal Konfirmasi Hapus -->
<div class="modal-overlay" id="modalHapus">
  <div class="modal-box">
    <div class="modal-hdr">
      <h6 style="color:var(--r5);"><i class="bi bi-exclamation-triangle-fill me-1"></i>Hapus Undangan?</h6>
      <button class="modal-cls" onclick="closeModal('modalHapus')"><i class="bi bi-x-lg"></i></button>
    </div>
    <div class="modal-body">
      <p style="font-size:0.85rem;color:var(--s7);">Catatan undangan ini akan dihapus secara permanen dan tidak dapat dikembalikan.</p>
    </div>
    <form action="<?php echo base_url('bansos/hapus_undangan');?>" method="post">
      <input type="hidden" name="bansos_id" id="hapusBansosId">
      <input type="hidden" name="und_index" id="hapusUndIndex">
      <input type="hidden" name="warga_id" value="<?php echo $warga->id;?>">
      <div class="modal-foot">
        <button type="button" class="btn-sec" onclick="closeModal('modalHapus')">Batal</button>
        <button type="submit" class="btn-danger"><i class="bi bi-trash me-1"></i>Ya, Hapus</button>
      </div>
    </form>
  </div>
</div>

<script>
function openModal(id){ document.getElementById(id).classList.add('open'); document.body.style.overflow='hidden'; }
function closeModal(id){ document.getElementById(id).classList.remove('open'); document.body.style.overflow=''; }

function openAddModal(bansosId, title, tahun){
  document.getElementById('modalAddBansosId').value = bansosId;
  document.getElementById('modalAddTitle').textContent = tahun + ' – ' + title;
  openModal('modalAdd');
}

function openEditModal(bansosId, undIndex, data){
  document.getElementById('editBansosId').value  = bansosId;
  document.getElementById('editUndIndex').value  = undIndex;
  document.getElementById('editTanggal').value   = data.tanggal   || '';
  document.getElementById('editKehadiran').value = data.kehadiran || 'menunggu';
  document.getElementById('editKeterangan').value= data.keterangan|| '';
  openModal('modalEdit');
}

function confirmHapusUnd(bansosId, undIndex){
  document.getElementById('hapusBansosId').value = bansosId;
  document.getElementById('hapusUndIndex').value = undIndex;
  openModal('modalHapus');
}

// Tutup modal klik di luar
document.querySelectorAll('.modal-overlay').forEach(function(el){
  el.addEventListener('click', function(e){ if(e.target===el) closeModal(el.id); });
});

// Auto-close flash
$(document).ready(function(){
  setTimeout(function(){
    var el=document.getElementById('flashMsg');
    if(el){el.style.transition='opacity .4s';el.style.opacity='0';setTimeout(function(){el&&el.remove();},420);}
  },4500);
});
</script>