<?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;--b5:#3b82f6;--p0:#f5f3ff;--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);}
.uk-hdr{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px;margin-bottom:20px;}
.uk-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;flex-wrap:wrap;}
.uk-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;}
.uk-bc{display:flex;align-items:center;gap:6px;font-size:0.77rem;color:var(--s4);padding-left:51px;}
.uk-bc a{color:var(--t6);text-decoration:none;font-weight:600;}
.uk-bc .sep{color:var(--s2);}
.hdr-btns{display:flex;gap:8px;flex-wrap:wrap;}
.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;}
.btn-add.sec{background:#fff;color:var(--t6);border:1.5px solid var(--t1);}
.btn-add.sec:hover{background:var(--t0);}
/* Stats */
.uk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.uk-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;}
.usi{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);}
.usv{font-size:1.4rem;font-weight:800;color:var(--s9);line-height:1;}.usl{font-size:0.72rem;color:var(--s4);font-weight:600;margin-top:2px;}
/* Kategori filter */
.kat-tabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap;}
.kat-tab{padding:6px 15px;border-radius:50px;font-size:0.8rem;font-weight:700;border:1.5px solid var(--s2);background:#fff;color:var(--s5);text-decoration:none;transition:all .18s;display:inline-flex;align-items:center;gap:5px;}
.kat-tab:hover{border-color:var(--t4);color:var(--t7);}
.kat-tab.active{background:var(--t6);border-color:var(--t6);color:#fff;}
/* Search */
.uk-search-wrap{position:relative;margin-bottom:20px;}
.uk-search-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--s4);font-size:1rem;pointer-events:none;}
.uk-search{width:100%;padding:11px 14px 11px 40px;border-radius:var(--rsm);border:1.5px solid var(--s2);font-size:0.87rem;color:var(--s7);background:#fff;box-sizing:border-box;transition:border-color .2s;}
.uk-search:focus{border-color:var(--t5);outline:none;box-shadow:0 0 0 3px rgba(13,148,136,0.10);}
/* UMKM Grid */
.uk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.uk-card{background:#fff;border-radius:var(--rad);box-shadow:var(--shs);border:1.5px solid var(--s2);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s;}
.uk-card:hover{box-shadow:var(--sha);transform:translateY(-2px);}
.uk-card.pending{border-top:3px solid var(--a3);opacity:0.85;}
.uk-card.aktif{border-top:3px solid var(--t5);}
.uk-card.nonaktif{border-top:3px solid var(--s4);opacity:0.7;}
.uk-card-img{height:140px;background:linear-gradient(135deg,var(--t0),var(--t1));display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.uk-card-img img{width:100%;height:100%;object-fit:cover;}
.uk-card-img .no-img{font-size:2.8rem;color:var(--t5);}
.uk-card-body{padding:16px 18px;flex:1;display:flex;flex-direction:column;}
.uk-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px;}
.uk-name{font-size:1rem;font-weight:800;color:var(--s9);line-height:1.3;flex:1;}
/* Kategori badge */
.kat-badge{display:inline-flex;align-items:center;gap:4px;border-radius:50px;padding:3px 10px;font-size:0.69rem;font-weight:700;white-space:nowrap;flex-shrink:0;}
.kb-kuliner  {background:#fef2f2;color:var(--r5);}
.kb-fashion  {background:var(--p0);color:var(--p5);}
.kb-jasa     {background:var(--b0);color:var(--b5);}
.kb-pertanian{background:var(--g0);color:var(--g5);}
.kb-kerajinan{background:var(--a5);color:var(--a2);}
.kb-teknologi{background:var(--t0);color:var(--t6);}
.kb-kesehatan{background:#fdf4ff;color:#a21caf;}
.kb-pendidikan{background:#f0fdf4;color:#15803d;}
.kb-lainnya  {background:var(--s1);color:var(--s5);}
/* Status badge */
.s-badge{display:inline-flex;align-items:center;gap:3px;border-radius:50px;padding:2px 8px;font-size:0.67rem;font-weight:700;}
.sb-aktif{background:var(--t0);color:var(--t7);}.sb-pending{background:var(--a5);color:var(--a2);}.sb-nonaktif{background:var(--s1);color:var(--s5);}
.uk-pemilik{font-size:0.78rem;color:var(--s5);margin-bottom:6px;display:flex;align-items:center;gap:5px;}
.uk-desc{font-size:0.81rem;color:var(--s5);line-height:1.55;margin-bottom:10px;flex:1;}
.uk-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:0.75rem;color:var(--s5);margin-bottom:12px;}
.uk-meta span{display:flex;align-items:center;gap:4px;}
.uk-meta i{color:var(--t5);}
.uk-contacts{display:flex;gap:6px;flex-wrap:wrap;}
.c-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:var(--rxs);font-size:0.76rem;font-weight:600;text-decoration:none;transition:all .15s;border:1.5px solid var(--s2);background:#fff;color:var(--s7);}
.c-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.10);}
.c-btn.wa{border-color:#dcfce7;color:#16a34a;background:var(--g0);}
.c-btn.ig{border-color:#fde8ef;color:#be185d;background:#fdf2f7;}
.c-btn.tel{border-color:var(--b0);color:var(--b5);background:var(--b0);}
.uk-admin-acts{display:flex;gap:5px;padding:12px 18px 14px;border-top:1px solid var(--s1);flex-wrap:wrap;}
.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);}
.a-btn.apr{border-color:var(--g1);color:var(--g5);}
.a-btn.apr:hover{background:var(--g0);}
.a-btn.d{border-color:var(--r1);color:var(--r5);}
.a-btn.d:hover{background:var(--r0);}
/* Pending banner */
.pending-banner{background:var(--a5);border-top:1px solid var(--a4);padding:10px 18px;font-size:0.77rem;color:var(--a2);display:flex;align-items:center;gap:6px;font-weight:600;}
/* Empty */
.empty-s{text-align:center;padding:64px 24px;}
.em-ico{width:76px;height:76px;border-radius:50%;background:var(--t0);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--t5);font-size:2rem;}
.empty-s h6{font-weight:700;color:var(--s7);margin-bottom:5px;}
.empty-s p{font-size:0.83rem;color:var(--s4);}
/* 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;}
.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){.uk-hdr{flex-direction:column;align-items:flex-start;}.btn-add:not(.sec){display:none;}.btn-fab{display:flex !important;}.uk-stats{grid-template-columns:repeat(2,1fr);}.uk-grid{grid-template-columns:1fr;}}
@media(min-width:768px){.btn-fab{display:none !important;}}
</style>

<div class="pg-wrapper">

<div class="uk-hdr">
  <div class="uk-hdr-l">
    <h4>
      <span class="hi"><i class="bi bi-shop-window"></i></span>
      Direktori UMKM Warga
      <?php if($is_admin&&isset($total_pending)&&$total_pending>0):?>
      <span style="background:var(--a3);color:#fff;font-size:0.72rem;padding:2px 8px;border-radius:50px;font-weight:800;"><?php echo $total_pending;?> pending</span>
      <?php endif;?>
    </h4>
    <div class="uk-bc">
      <a href="<?php echo base_url('dashboard');?>">Dashboard</a><span class="sep">/</span><span>UMKM Warga</span>
    </div>
  </div>
  <div class="hdr-btns">
    <a href="<?php echo base_url('umkm/daftar');?>" class="btn-add sec"><i class="bi bi-plus-circle"></i> Daftarkan Usaha Saya</a>
    <?php if($is_admin):?>
    <a href="<?php echo base_url('umkm/tambah');?>" class="btn-add"><i class="bi bi-shield-plus"></i> Tambah (Admin)</a>
    <?php endif;?>
  </div>
</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;?>

<!-- Stats -->
<div class="uk-stats">
  <div class="uk-stat"><div class="usi ic-t"><i class="bi bi-shop"></i></div><div><div class="usv"><?php echo $total_umkm??0;?></div><div class="usl">Total UMKM</div></div></div>
  <div class="uk-stat"><div class="usi ic-g"><i class="bi bi-check-circle-fill"></i></div><div><div class="usv"><?php echo $total_aktif??0;?></div><div class="usl">Aktif</div></div></div>
  <div class="uk-stat"><div class="usi ic-a"><i class="bi bi-hourglass-split"></i></div><div><div class="usv"><?php echo $total_pending??0;?></div><div class="usl">Menunggu Review</div></div></div>
  <div class="uk-stat"><div class="usi ic-p"><i class="bi bi-grid-fill"></i></div><div><div class="usv"><?php echo $total_kategori??0;?></div><div class="usl">Kategori</div></div></div>
</div>

<!-- Kategori filter tabs -->
<?php
$kat_list=[''=>'Semua','kuliner'=>'Kuliner','fashion'=>'Fashion','jasa'=>'Jasa','pertanian'=>'Pertanian','kerajinan'=>'Kerajinan','teknologi'=>'Teknologi','kesehatan'=>'Kesehatan','pendidikan'=>'Pendidikan','lainnya'=>'Lainnya'];
$kat_icons=[''=>'bi-grid','kuliner'=>'bi-egg-fried','fashion'=>'bi-bag-fill','jasa'=>'bi-tools','pertanian'=>'bi-tree-fill','kerajinan'=>'bi-scissors','teknologi'=>'bi-cpu-fill','kesehatan'=>'bi-heart-pulse-fill','pendidikan'=>'bi-book-fill','lainnya'=>'bi-three-dots'];
$cur_kat=$this->input->get('kat')??'';
?>
<div class="kat-tabs">
  <?php foreach($kat_list as $k=>$lbl):?>
  <a href="<?php echo base_url('umkm'.($k?'?kat='.$k:''));?>"
     class="kat-tab <?php echo $cur_kat==$k?'active':'';?>">
    <i class="bi <?php echo $kat_icons[$k]??'bi-dot';?>"></i><?php echo $lbl;?>
  </a>
  <?php endforeach;?>
</div>

<!-- Search -->
<form method="get" action="<?php echo base_url('umkm');?>">
  <?php if($cur_kat):?><input type="hidden" name="kat" value="<?php echo htmlspecialchars($cur_kat);?>"><?php endif;?>
  <div class="uk-search-wrap">
    <i class="bi bi-search"></i>
    <input type="text" name="q" class="uk-search" placeholder="Cari nama usaha, layanan, atau pemilik..."
           value="<?php echo htmlspecialchars($this->input->get('q')??'');?>">
  </div>
</form>

<!-- Grid -->
<?php if(empty($umkm)):?>
<div class="empty-s">
  <div class="em-ico"><i class="bi bi-shop-window"></i></div>
  <h6>Belum Ada UMKM Terdaftar</h6>
  <p><?php echo $is_admin?'Tambahkan atau setujui pendaftaran UMKM warga.':'Jadilah yang pertama mendaftarkan usaha Anda di lingkungan RT!';?></p>
  <a href="<?php echo base_url('umkm/daftar');?>" class="btn-add" style="display:inline-flex;margin-top:12px;">
    <i class="bi bi-plus-circle"></i> Daftarkan Usaha Saya
  </a>
</div>
<?php else:
  $kat_icons2=['kuliner'=>'bi-egg-fried','fashion'=>'bi-bag-fill','jasa'=>'bi-tools','pertanian'=>'bi-tree-fill','kerajinan'=>'bi-scissors','teknologi'=>'bi-cpu-fill','kesehatan'=>'bi-heart-pulse-fill','pendidikan'=>'bi-book-fill','lainnya'=>'bi-three-dots'];
  $cur_uid=$this->session->userdata('user_id');
?>
<div class="uk-grid" id="ukGrid">
  <?php foreach($umkm as $u):
    $is_mine=($u->user_id_owner==$cur_uid);
    $kat_ico=$kat_icons2[$u->kategori]??'bi-shop';
  ?>
  <div class="uk-card <?php echo $u->status;?>">

    <!-- Gambar / Placeholder -->
    <div class="uk-card-img">
      <?php if(!empty($u->foto)&&file_exists(FCPATH.'assets/uploads/umkm/'.$u->foto)):?>
      <img src="<?php echo base_url('assets/uploads/umkm/'.htmlspecialchars($u->foto));?>" alt="<?php echo htmlspecialchars($u->nama_usaha);?>">
      <?php else:?>
      <i class="bi <?php echo $kat_ico;?> no-img"></i>
      <?php endif;?>
    </div>

    <div class="uk-card-body">
      <div class="uk-card-top">
        <div class="uk-name"><?php echo htmlspecialchars($u->nama_usaha);?></div>
        <span class="kat-badge kb-<?php echo $u->kategori;?>">
          <i class="bi <?php echo $kat_ico;?>" style="font-size:0.6rem;"></i>
          <?php echo ucfirst($u->kategori);?>
        </span>
      </div>

      <div class="uk-pemilik">
        <i class="bi bi-person-fill" style="color:var(--t5);"></i>
        <span><?php echo htmlspecialchars($u->nama_pemilik??$u->nama_lengkap??'Warga RT');?></span>
        <?php if($is_mine):?><span style="background:var(--t1);color:var(--t7);font-size:0.66rem;font-weight:700;border-radius:50px;padding:1px 7px;"><i class="bi bi-star-fill" style="font-size:0.55rem;"></i> Usaha Saya</span><?php endif;?>
        <span class="ms-auto"><span class="s-badge sb-<?php echo $u->status;?>"><?php echo ucfirst($u->status);?></span></span>
      </div>

      <?php if(!empty($u->deskripsi)):?>
      <div class="uk-desc"><?php echo htmlspecialchars(mb_substr($u->deskripsi,0,110));?><?php if(mb_strlen($u->deskripsi)>110):?>...<?php endif;?></div>
      <?php endif;?>

      <div class="uk-meta">
        <?php if(!empty($u->alamat)):?><span><i class="bi bi-geo-alt-fill"></i><?php echo htmlspecialchars(mb_substr($u->alamat,0,40));?></span><?php endif;?>
        <?php if(!empty($u->jam_operasional)):?><span><i class="bi bi-clock-fill"></i><?php echo htmlspecialchars($u->jam_operasional);?></span><?php endif;?>
      </div>

      <div class="uk-contacts">
        <?php if(!empty($u->whatsapp)):?>
        <a href="https://wa.me/<?php echo preg_replace('/[^0-9]/','',$u->whatsapp);?>" target="_blank" class="c-btn wa">
          <i class="bi bi-whatsapp"></i> WA
        </a>
        <?php endif;?>
        <?php if(!empty($u->instagram)):?>
        <a href="https://instagram.com/<?php echo htmlspecialchars($u->instagram);?>" target="_blank" class="c-btn ig">
          <i class="bi bi-instagram"></i> IG
        </a>
        <?php endif;?>
        <?php if(!empty($u->no_telp)):?>
        <a href="tel:<?php echo htmlspecialchars($u->no_telp);?>" class="c-btn tel">
          <i class="bi bi-telephone-fill"></i> Telepon
        </a>
        <?php endif;?>
      </div>
    </div>

    <!-- Pending notice for owner -->
    <?php if($u->status=='pending'&&$is_mine):?>
    <div class="pending-banner">
      <i class="bi bi-hourglass-split"></i> Usaha Anda sedang menunggu verifikasi admin RT.
    </div>
    <?php endif;?>

    <!-- Admin or owner actions -->
    <?php if($is_admin||$is_mine):?>
    <div class="uk-admin-acts">
      <?php if($is_admin&&$u->status=='pending'):?>
      <a href="<?php echo base_url('umkm/approve/'.$u->id);?>"
         data-confirm="Setujui pendaftaran UMKM <strong><?php echo htmlspecialchars($u->nama_usaha ?? ''); ?></strong> ini?" 
         data-title="Setujui UMKM" data-type="success" class="a-btn apr">
        <i class="bi bi-check-circle"></i> Setujui
      </a>
      <?php endif;?>
      <?php if($is_admin||$is_mine):?>
      <a href="<?php echo base_url('umkm/edit/'.$u->id);?>" class="a-btn">
        <i class="bi bi-pencil"></i> Edit
      </a>
      <?php endif;?>
      <?php if($is_admin):?>
      <a href="<?php echo base_url('umkm/hapus/'.$u->id);?>"
         data-confirm="Anda yakin ingin menghapus data UMKM <strong><?php echo htmlspecialchars($u->nama_usaha ?? ''); ?></strong> ini?" 
         data-title="Hapus UMKM" data-type="danger" class="a-btn d">
        <i class="bi bi-trash"></i> Hapus
      </a>
      <?php endif;?>
    </div>
    <?php endif;?>

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

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

<a href="<?php echo base_url('umkm/daftar');?>" class="btn-fab" title="Daftarkan Usaha">
  <i class="bi bi-plus-lg"></i>
</a>

<script>
$(document).ready(function(){
  // Live search filter pada grid
  var timer;
  $('input[name="q"]').on('input',function(){
    var q=$(this).val().toLowerCase().trim();
    if(!q){$('.uk-card').show();return;}
    clearTimeout(timer);
    timer=setTimeout(function(){
      $('#ukGrid .uk-card').each(function(){
        var txt=$(this).text().toLowerCase();
        $(this).toggle(txt.indexOf(q)>-1);
      });
    },200);
  });

  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>