<?php defined('BASEPATH') OR exit('No direct script access allowed');
$fotos = json_decode($item->foto_rumah??'[]',true)?:[];
$kr_label = ['baik'=>'Baik','sedang'=>'Sedang','buruk'=>'Buruk','sangat_buruk'=>'Sangat Buruk'];
$sp_map   = ['menunggu'=>['sp-w','bi-hourglass-split','Menunggu'],'diverifikasi'=>['sp-v','bi-shield-check','Diverifikasi'],'disetujui'=>['sp-s','bi-check-circle-fill','Disetujui'],'ditolak'=>['sp-t','bi-x-circle-fill','Ditolak']];
$sp = $sp_map[$item->status_pengajuan??'menunggu']??['sp-w','bi-circle','–'];
$kr_key = str_replace(' ','_', strtolower($item->kondisi_rumah??''));
$sr_label = ['milik_sendiri'=>'Milik Sendiri','sewa'=>'Sewa/Kontrak','numpang'=>'Numpang','dinas'=>'Rumah Dinas','lainnya'=>'Lainnya'];
?>
<style>
:root{--t8:#0b5a52;--t7:#0b7a6e;--t6:#0d9488;--t5:#14b8a6;--t1:#ccfbf1;--t0:#f0fdfa;--a2:#d97706;--a4:#fef3c7;--a5:#fffbeb;--r5:#ef4444;--r0:#fef2f2;--r1:#fee2e2;--g5:#10b981;--g0:#f0fdf4;--g1:#dcfce7;--b0:#eff6ff;--b1:#dbeafe;--b5:#3b82f6;--p5:#8b5cf6;--p0:#f5f3ff;--p1:#ede9fe;--s0:#f8fafc;--s1:#f1f5f9;--s2:#e2e8f0;--s4:#94a3b8;--s5:#64748b;--s7:#334155;--s9:#0f172a;--rad:14px;--rsm:9px;--sha:0 4px 24px rgba(13,148,136,0.10),0 1px 4px rgba(0,0,0,0.05);}
.dt-hdr{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px;margin-bottom:20px;}
.dt-hdr-l h4{font-size:1.2rem;font-weight:800;color:var(--t8);margin:0 0 5px;display:flex;align-items:center;gap:11px;}
.hi{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#d97706,#f59e0b);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;box-shadow:0 4px 12px rgba(217,119,6,0.3);}
.dt-bc{display:flex;align-items:center;gap:6px;font-size:0.77rem;color:var(--s4);padding-left:49px;}
.dt-bc a{color:var(--t6);text-decoration:none;font-weight:600;}
.dt-acts{display:flex;gap:8px;flex-wrap:wrap;}
.btn-a{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:50px;border:1.5px solid var(--s2);background:#fff;color:var(--s5);font-size:0.82rem;font-weight:700;text-decoration:none;transition:all .2s;cursor:pointer;}
.btn-a:hover{background:var(--s0);}
.btn-a.prim{background:var(--t6);border-color:var(--t6);color:#fff;box-shadow:0 3px 12px rgba(13,148,136,.2);}
.btn-a.prim:hover{background:var(--t7);}
.btn-a.dl{background:var(--p5);border-color:var(--p5);color:#fff;}
.btn-a.dl:hover{background:#7c3aed;}
.btn-a.pr{background:var(--g5);border-color:var(--g5);color:#fff;}
.btn-a.pr:hover{background:#059669;}
.dt-grid{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start;}
.dt-main,.dt-side{display:flex;flex-direction:column;gap:14px;}
.dt-card{background:#fff;border-radius:var(--rad);box-shadow:var(--sha);border:1.5px solid var(--s1);overflow:hidden;}
.dt-ch{background:var(--s0);padding:13px 18px;display:flex;align-items:center;gap:8px;border-bottom:1.5px solid var(--s1);}
.dt-ch h6{margin:0;font-size:0.84rem;font-weight:800;color:var(--t8);}
.dt-ico{width:28px;height:28px;border-radius:7px;background:var(--t0);color:var(--t6);display:flex;align-items:center;justify-content:center;font-size:0.78rem;}
.dt-body{padding:18px;}
.info-row{display:flex;gap:10px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--s1);}
.info-row:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.info-ico{width:32px;height:32px;border-radius:8px;background:var(--t0);color:var(--t6);display:flex;align-items:center;justify-content:center;font-size:0.78rem;flex-shrink:0;}
.info-label{font-size:0.72rem;font-weight:700;color:var(--s4);margin-bottom:2px;}
.info-val{font-size:0.88rem;font-weight:600;color:var(--s9);}
.info-val.big{font-size:1.15rem;font-weight:800;color:var(--t7);}
.sp{display:inline-flex;align-items:center;gap:4px;border-radius:50px;padding:4px 12px;font-size:0.75rem;font-weight:700;}
.sp-w{background:var(--a5);color:var(--a2);border:1px solid var(--a4);}
.sp-v{background:var(--b0);color:var(--b5);border:1px solid var(--b1);}
.sp-s{background:var(--g0);color:var(--g5);border:1px solid var(--g1);}
.sp-t{background:var(--r0);color:var(--r5);border:1px solid var(--r1);}
.kr{display:inline-flex;align-items:center;gap:4px;border-radius:50px;padding:4px 12px;font-size:0.75rem;font-weight:700;border:1px solid;}
.kr-baik{background:var(--g0);color:var(--g5);border-color:var(--g1);}
.kr-sedang{background:var(--a5);color:var(--a2);border-color:var(--a4);}
.kr-buruk{background:var(--r0);color:var(--r5);border-color:var(--r1);}
.kr-sangat_buruk{background:#fdf2f8;color:#9d174d;border-color:#fbcfe8;}
/* foto galeri */
.foto-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px;}
.foto-thumb{aspect-ratio:1;border-radius:var(--rsm);overflow:hidden;cursor:zoom-in;border:1.5px solid var(--s2);transition:transform .15s;}
.foto-thumb:hover{transform:scale(1.03);border-color:var(--t5);}
.foto-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.no-foto{text-align:center;padding:28px 16px;color:var(--s4);font-size:0.8rem;}
/* lightbox */
.lb{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:2000;align-items:center;justify-content:center;}
.lb.show{display:flex;}
.lb-img{max-width:90vw;max-height:85vh;border-radius:var(--rsm);box-shadow:0 8px 40px rgba(0,0,0,.5);}
.lb-close{position:fixed;top:18px;right:20px;background:rgba(255,255,255,0.15);border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.lb-close:hover{background:rgba(255,255,255,0.3);}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.15);border:none;color:#fff;width:40px;height:40px;border-radius:50%;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.lb-nav:hover{background:rgba(255,255,255,0.3);}
.lb-prev{left:12px;} .lb-next{right:12px;}
.lb-count{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.7);font-size:0.82rem;}
/* alasan box */
.alasan-box{background:var(--s0);border-radius:var(--rsm);border:1.5px solid var(--s1);padding:14px;font-size:0.85rem;color:var(--s7);line-height:1.6;white-space:pre-line;}
/* catatan verifikasi */
.cat-box{background:var(--a5);border-left:4px solid var(--a3);border-radius:var(--rsm);padding:12px 14px;font-size:0.83rem;color:#78350f;}
.cat-box-t{background:var(--r0);border-left:4px solid var(--r5);color:#7f1d1d;}
.cat-box-s{background:var(--g0);border-left:4px solid var(--g5);color:#14532d;}
@media(max-width:900px){.dt-grid{grid-template-columns:1fr;}}
</style>

<div class="pg-wrapper">

<div class="dt-hdr">
  <div class="dt-hdr-l">
    <h4><span class="hi"><i class="bi bi-house-heart-fill"></i></span>Detail Pengajuan</h4>
    <div class="dt-bc">
      <a href="<?php echo base_url('dashboard');?>">Dashboard</a><span style="color:var(--s2);">/</span>
      <a href="<?php echo base_url('warga_kurang_mampu');?>">Warga Kurang Mampu</a><span style="color:var(--s2);">/</span>
      <span>Detail</span>
    </div>
  </div>
  <div class="dt-acts">
    <a href="<?php echo base_url('warga_kurang_mampu');?>" class="btn-a"><i class="bi bi-arrow-left"></i> Kembali</a>
    <?php if($is_admin || $item->status_pengajuan==='menunggu'):?>
    <a href="<?php echo base_url('warga_kurang_mampu/edit/'.$item->id);?>" class="btn-a"><i class="bi bi-pencil"></i> Edit</a>
    <?php endif;?>
    <a href="<?php echo base_url('warga_kurang_mampu/cetak/'.$item->id);?>" class="btn-a pr" target="_blank"><i class="bi bi-printer"></i> Cetak</a>
    <?php if(!empty($fotos)):?>
    <a href="<?php echo base_url('warga_kurang_mampu/download_foto/'.$item->id);?>" class="btn-a dl"><i class="bi bi-download"></i> Download Foto</a>
    <?php endif;?>
  </div>
</div>

<div class="dt-grid">
  <!-- Kolom kiri: info utama -->
  <div class="dt-main">

    <!-- Info Warga -->
    <div class="dt-card">
      <div class="dt-ch"><div class="dt-ico"><i class="bi bi-person-fill"></i></div><h6>Data Warga</h6></div>
      <div class="dt-body">
        <div class="info-row">
          <div class="info-ico"><i class="bi bi-person"></i></div>
          <div><div class="info-label">Nama Lengkap</div><div class="info-val"><?php echo htmlspecialchars($item->nama_lengkap??'-');?></div></div>
        </div>
        <div class="info-row">
          <div class="info-ico"><i class="bi bi-credit-card"></i></div>
          <div><div class="info-label">NIK</div><div class="info-val" style="font-family:monospace;"><?php echo htmlspecialchars($item->nik??'-');?></div></div>
        </div>
        <div class="info-row">
          <div class="info-ico"><i class="bi bi-people"></i></div>
          <div><div class="info-label">No. Kartu Keluarga</div><div class="info-val" style="font-family:monospace;"><?php echo htmlspecialchars($item->no_kk??'-');?></div></div>
        </div>
      </div>
    </div>

    <!-- Data Ekonomi -->
    <div class="dt-card">
      <div class="dt-ch"><div class="dt-ico"><i class="bi bi-cash-stack"></i></div><h6>Data Ekonomi</h6></div>
      <div class="dt-body">
        <div class="info-row">
          <div class="info-ico" style="background:var(--t0);color:var(--t6);"><i class="bi bi-currency-dollar"></i></div>
          <div><div class="info-label">Penghasilan / Bulan</div><div class="info-val big">Rp <?php echo number_format($item->penghasilan_bulan??0,0,',','.');?></div></div>
        </div>
        <div class="info-row">
          <div class="info-ico"><i class="bi bi-briefcase"></i></div>
          <div><div class="info-label">Pekerjaan</div><div class="info-val"><?php echo htmlspecialchars($item->pekerjaan??'-');?></div></div>
        </div>
        <div class="info-row">
          <div class="info-ico"><i class="bi bi-people-fill"></i></div>
          <div><div class="info-label">Jumlah Tanggungan</div><div class="info-val"><?php echo (int)($item->jml_tanggungan??0);?> orang</div></div>
        </div>
        <div class="info-row">
          <div class="info-ico"><i class="bi bi-house"></i></div>
          <div>
            <div class="info-label">Status Rumah</div>
            <div class="info-val"><?php echo $sr_label[$item->status_rumah??''] ?? ucfirst($item->status_rumah??'-');?></div>
          </div>
        </div>
        <div class="info-row">
          <div class="info-ico"><i class="bi bi-building"></i></div>
          <div><div class="info-label">Kondisi Fisik Rumah</div>
            <span class="kr kr-<?php echo $kr_key;?>"><?php echo $kr_label[$kr_key]??ucfirst($item->kondisi_rumah??'-');?></span>
          </div>
        </div>
      </div>
    </div>

    <!-- Alasan -->
    <div class="dt-card">
      <div class="dt-ch"><div class="dt-ico"><i class="bi bi-chat-text-fill"></i></div><h6>Alasan Pengajuan</h6></div>
      <div class="dt-body">
        <div class="alasan-box"><?php echo htmlspecialchars($item->alasan_pengajuan??'-');?></div>
        <?php if(!empty($item->keterangan_tambahan)):?>
        <div style="margin-top:10px;font-size:0.78rem;font-weight:700;color:var(--s4);">Keterangan Tambahan:</div>
        <div class="alasan-box" style="margin-top:6px;font-size:0.8rem;"><?php echo htmlspecialchars($item->keterangan_tambahan);?></div>
        <?php endif;?>
      </div>
    </div>

    <!-- Foto Rumah -->
    <div class="dt-card">
      <div class="dt-ch">
        <div class="dt-ico"><i class="bi bi-images"></i></div>
        <h6>Foto Rumah</h6>
        <span style="font-size:0.75rem;color:var(--s4);margin-left:auto;"><?php echo count($fotos);?> foto</span>
        <?php if(!empty($fotos)):?>
        <a href="<?php echo base_url('warga_kurang_mampu/download_foto/'.$item->id);?>" class="btn-a dl" style="padding:5px 14px;font-size:0.76rem;margin-left:8px;"><i class="bi bi-download"></i> Download Semua</a>
        <?php endif;?>
      </div>
      <?php if(empty($fotos)):?>
      <div class="no-foto"><i class="bi bi-image" style="font-size:2rem;display:block;margin-bottom:8px;"></i>Belum ada foto rumah diunggah</div>
      <?php else:?>
      <div class="foto-gal">
        <?php foreach($fotos as $i=>$fn):?>
        <div class="foto-thumb" onclick="openLB(<?php echo $i;?>)">
          <img src="<?php echo base_url('uploads/wkm/'.$fn);?>" alt="Foto Rumah <?php echo $i+1;?>" loading="lazy">
        </div>
        <?php endforeach;?>
      </div>
      <?php endif;?>
    </div>

  </div><!-- /dt-main -->

  <!-- Kolom kanan: status & info pengajuan -->
  <div class="dt-side">

    <div class="dt-card">
      <div class="dt-ch"><div class="dt-ico"><i class="bi bi-shield-check"></i></div><h6>Status Pengajuan</h6></div>
      <div class="dt-body">
        <div style="margin-bottom:12px;">
          <div class="info-label" style="margin-bottom:6px;">Status Saat Ini</div>
          <span class="sp <?php echo $sp[0];?>" style="font-size:0.82rem;padding:5px 14px;">
            <i class="bi <?php echo $sp[1];?>"></i><?php echo $sp[2];?>
          </span>
        </div>
        <div class="info-row">
          <div class="info-ico"><i class="bi bi-calendar3"></i></div>
          <div><div class="info-label">Tanggal Pengajuan</div><div class="info-val"><?php echo date('d M Y',strtotime($item->tgl_pengajuan));?></div></div>
        </div>
        <?php if(!empty($item->tgl_verifikasi)):?>
        <div class="info-row">
          <div class="info-ico"><i class="bi bi-calendar-check"></i></div>
          <div><div class="info-label">Tanggal Verifikasi</div><div class="info-val"><?php echo date('d M Y',strtotime($item->tgl_verifikasi));?></div></div>
        </div>
        <?php endif;?>

        <?php if(!empty($item->catatan_verifikasi)):
          $cat_cls = $item->status_pengajuan==='ditolak' ? 'cat-box-t' : ($item->status_pengajuan==='disetujui' ? 'cat-box-s' : '');
        ?>
        <div class="cat-box <?php echo $cat_cls;?>" style="margin-top:10px;">
          <div style="font-size:0.72rem;font-weight:800;margin-bottom:4px;"><i class="bi bi-chat-left-text me-1"></i>Catatan Admin</div>
          <?php echo htmlspecialchars($item->catatan_verifikasi);?>
        </div>
        <?php endif;?>

        <?php if($is_admin):?>
        <button class="btn-a prim" style="width:100%;justify-content:center;margin-top:12px;"
          onclick="openVerif(<?php echo $item->id;?>,'<?php echo $item->status_pengajuan;?>','<?php echo htmlspecialchars(addslashes($item->catatan_verifikasi??''));?>')">
          <i class="bi bi-shield-check"></i> Ubah Status
        </button>
        <?php endif;?>
      </div>
    </div>

    <!-- Aksi cepat -->
    <div class="dt-card">
      <div class="dt-ch"><div class="dt-ico"><i class="bi bi-lightning-charge-fill"></i></div><h6>Aksi</h6></div>
      <div class="dt-body" style="display:flex;flex-direction:column;gap:8px;">
        <a href="<?php echo base_url('warga_kurang_mampu/cetak/'.$item->id);?>" target="_blank" class="btn-a pr" style="justify-content:center;"><i class="bi bi-printer"></i> Cetak Surat / PDF</a>
        <?php if(!empty($fotos)):?>
        <a href="<?php echo base_url('warga_kurang_mampu/download_foto/'.$item->id);?>" class="btn-a dl" style="justify-content:center;"><i class="bi bi-file-zip"></i> Download Foto (ZIP)</a>
        <?php endif;?>
        <?php if($is_admin || $item->status_pengajuan==='menunggu'):?>
        <a href="<?php echo base_url('warga_kurang_mampu/edit/'.$item->id);?>" class="btn-a" style="justify-content:center;"><i class="bi bi-pencil"></i> Edit Pengajuan</a>
        <?php endif;?>
        <?php if($is_admin):?>
        <a href="<?php echo base_url('warga_kurang_mampu/hapus/'.$item->id);?>" onclick="return confirm('Hapus data ini?')" class="btn-a" style="justify-content:center;border-color:var(--r1);color:var(--r5);"><i class="bi bi-trash"></i> Hapus</a>
        <?php endif;?>
      </div>
    </div>

  </div>
</div>

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

<!-- Lightbox -->
<?php if(!empty($fotos)):?>
<div class="lb" id="lb">
  <button class="lb-close" onclick="closeLB()"><i class="bi bi-x-lg"></i></button>
  <button class="lb-nav lb-prev" onclick="navLB(-1)"><i class="bi bi-chevron-left"></i></button>
  <img class="lb-img" id="lbImg" src="" alt="">
  <button class="lb-nav lb-next" onclick="navLB(1)"><i class="bi bi-chevron-right"></i></button>
  <div class="lb-count" id="lbCount"></div>
</div>
<script>
var fotos = <?php echo json_encode(array_map(function($f){ return base_url('uploads/wkm/'.$f); }, $fotos), JSON_UNESCAPED_SLASHES); ?>;
var lbIdx = 0;
function openLB(i){ lbIdx=i; showLB(); document.getElementById('lb').classList.add('show'); }
function closeLB(){ document.getElementById('lb').classList.remove('show'); }
function navLB(d){ lbIdx=(lbIdx+d+fotos.length)%fotos.length; showLB(); }
function showLB(){ document.getElementById('lbImg').src=fotos[lbIdx]; document.getElementById('lbCount').textContent=(lbIdx+1)+' / '+fotos.length; }
document.getElementById('lb').addEventListener('click',function(e){ if(e.target===this) closeLB(); });
document.addEventListener('keydown',function(e){ if(document.getElementById('lb').classList.contains('show')){ if(e.key==='Escape')closeLB(); if(e.key==='ArrowLeft')navLB(-1); if(e.key==='ArrowRight')navLB(1); }});
</script>
<?php endif;?>

<!-- Modal Verifikasi (admin) -->
<?php if($is_admin):?>
<div class="vf-overlay" id="verifOverlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1050;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:var(--rad);padding:26px;width:100%;max-width:440px;box-shadow:0 8px 32px rgba(0,0,0,0.18);">
    <h6 style="font-weight:800;color:var(--s9);margin:0 0 14px;"><i class="bi bi-shield-check me-2" style="color:var(--t6);"></i>Ubah Status</h6>
    <form id="verifForm" method="post" action="<?php echo base_url('warga_kurang_mampu/verifikasi');?>">
      <?php echo form_hidden($this->security->get_csrf_token_name(), $this->security->get_csrf_hash());?>
      <input type="hidden" name="id" id="verifId">
      <label style="font-size:0.78rem;font-weight:700;color:var(--s5);display:block;margin-bottom:4px;">Status</label>
      <select name="status" id="verifStatus" style="width:100%;padding:8px 12px;border-radius:var(--rsm);border:1.5px solid var(--s2);font-size:0.84rem;margin-bottom:12px;">
        <option value="menunggu">⏳ Menunggu</option>
        <option value="diverifikasi">🔵 Diverifikasi</option>
        <option value="disetujui">✅ Disetujui</option>
        <option value="ditolak">❌ Ditolak</option>
      </select>
      <label style="font-size:0.78rem;font-weight:700;color:var(--s5);display:block;margin-bottom:4px;">Catatan</label>
      <textarea name="catatan" id="verifCatatan" rows="3" style="width:100%;padding:8px 12px;border-radius:var(--rsm);border:1.5px solid var(--s2);font-size:0.84rem;box-sizing:border-box;margin-bottom:12px;" placeholder="Catatan untuk warga..."></textarea>
      <div style="display:flex;gap:8px;justify-content:flex-end;">
        <button type="button" onclick="closeVerif()" style="padding:8px 20px;border-radius:50px;border:1.5px solid var(--s2);background:#fff;color:var(--s5);font-weight:700;cursor:pointer;">Batal</button>
        <button type="submit" style="padding:8px 20px;border-radius:50px;border:none;background:var(--t6);color:#fff;font-weight:700;cursor:pointer;">Simpan</button>
      </div>
    </form>
  </div>
</div>
<script>
function openVerif(id,status,catatan){
  document.getElementById('verifId').value=id;
  document.getElementById('verifStatus').value=status;
  document.getElementById('verifCatatan').value=catatan||'';
  document.getElementById('verifOverlay').style.display='flex';
}
function closeVerif(){ document.getElementById('verifOverlay').style.display='none'; }
document.getElementById('verifForm')?.addEventListener('submit',function(e){
  e.preventDefault();
  var fd=new FormData(this);
  fetch(this.action,{method:'POST',body:fd}).then(r=>r.json()).then(d=>{if(d.ok){closeVerif();location.reload();}});
});
</script>
<?php endif;?>