<style>
/* ─── BASE ─────────────────────────────── */
.btn:focus { box-shadow: none; }

/* ─── PAGE HEADER ──────────────────────── */
.kg-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}
.kg-header-left h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1e3a5f;
  margin: 0 0 5px;
  display: flex;
  align-items: center;
  gap: 11px;
  letter-spacing: -.3px;
}
.kg-header-left h4 .hi {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.05rem;
  box-shadow: 0 4px 12px rgba(99,102,241,0.32);
  flex-shrink: 0;
}
.kg-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.77rem; color: #94a3b8; padding-left: 51px;
}
.kg-breadcrumb a { color: #3b82f6; text-decoration: none; font-weight: 600; }
.kg-breadcrumb a:hover { text-decoration: underline; }
.kg-breadcrumb .sep { color: #e2e8f0; }

.btn-tambah {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 24px; border-radius: 50px; border: none;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff; font-size: 0.85rem; font-weight: 700;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(99,102,241,0.28);
  transition: all .2s; white-space: nowrap;
}
.btn-tambah:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(99,102,241,0.4);
  color: #fff;
}

/* ─── BLOG CARD ────────────────────────── */
.kg-card {
  border-radius: 16px; overflow: hidden;
  border: 1px solid #e9ecef;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform .22s, box-shadow .22s;
  display: flex; flex-direction: column; height: 100%;
}
.kg-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.11); }

.kg-card-thumb {
  position: relative; width: 100%; height: 200px;
  overflow: hidden; background: #f1f5f9;
}
.kg-card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s;
}
.kg-card:hover .kg-card-thumb img { transform: scale(1.05); }
.kg-card-thumb .kg-no-img {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: #cbd5e1;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}
.kg-photo-count {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 0.75rem; font-weight: 600; border-radius: 20px;
  padding: 3px 10px; backdrop-filter: blur(4px);
}
.kg-status-badge {
  position: absolute; top: 10px; left: 10px;
}

.kg-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }

.kg-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 700;
  margin-bottom: 10px;
}
.kg-card-title {
  font-size: 1rem; font-weight: 800; color: #1e293b;
  line-height: 1.4; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kg-card-excerpt {
  font-size: 0.82rem; color: #64748b; line-height: 1.65;
  flex: 1; margin-bottom: 14px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kg-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.78rem; color: #94a3b8; margin-bottom: 14px; }
.kg-meta span { display: flex; align-items: center; gap: 4px; }

.kg-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px; border-top: 1px solid #f1f5f9;
  gap: 6px;
}
.btn-detail-card {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 16px; border-radius: 8px; font-size: 0.8rem; font-weight: 700;
  color: #fff; border: none; text-decoration: none; transition: opacity .2s;
}
.btn-detail-card:hover { opacity: .85; color: #fff; }

/* ─── HERO CARD (first item) ──────────── */
.kg-hero {
  border-radius: 16px; overflow: hidden;
  border: 1px solid #e9ecef;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.09);
  margin-bottom: 28px;
  display: flex; flex-wrap: wrap;
}
.kg-hero-thumb {
  flex: 0 0 45%; min-width: 280px;
  min-height: 280px; position: relative; overflow: hidden;
  background: #f1f5f9;
}
.kg-hero-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kg-hero-thumb .kg-no-img {
  width: 100%; height: 100%; min-height: 280px;
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem; color: #cbd5e1;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}
.kg-hero-body { flex: 1; padding: 32px; display: flex; flex-direction: column; justify-content: center; min-width: 260px; }
.kg-hero-body .kg-card-title { font-size: 1.4rem; -webkit-line-clamp: 3; }

@media (max-width: 767.98px) {
  .kg-hero { flex-direction: column; }
  .kg-hero-thumb { min-height: 200px; }
  .kg-hero-body { padding: 20px; }
  .btn-tambah { width: 100%; justify-content: center; }
}
</style>

<?php
function kegiatan_to_plain($html, $limit = 0) {
    $plain = preg_replace('/<\/(p|div|li|h[1-6]|blockquote)>/i', ' ', $html);
    $plain = preg_replace('/<br\s*\/?>/i', ' ', $plain);
    $plain = strip_tags($plain);
    $plain = html_entity_decode($plain, ENT_QUOTES | ENT_HTML5, 'UTF-8');
    $plain = preg_replace('/\s+/', ' ', trim($plain));
    if($limit > 0 && mb_strlen($plain) > $limit) {
        return mb_substr($plain, 0, $limit).'...';
    }
    return $plain;
}

$badge_map = [
    'sosial'      => ['🤝', '#3b82f6', '#eff6ff'],
    'olahraga'    => ['⚽', '#10b981', '#ecfdf5'],
    'kebersihan'  => ['🧹', '#f59e0b', '#fffbeb'],
    'keagamaan'   => ['🕌', '#8b5cf6', '#f5f3ff'],
    'pendidikan'  => ['📚', '#ec4899', '#fdf2f8'],
    'kesehatan'   => ['❤️',  '#ef4444', '#fef2f2'],
    'budaya'      => ['🎭', '#f97316', '#fff7ed'],
    'lainnya'     => ['📌', '#6b7280', '#f9fafb'],
];
function kg_badge($kategori, $badge_map) {
    return $badge_map[$kategori] ?? $badge_map['lainnya'];
}
?>

<!-- Header -->
<div class="kg-page-header">
    <div class="kg-header-left">
        <h4>
            <span class="hi"><i class="bi bi-calendar-event-fill"></i></span>
            Kegiatan
        </h4>
        <div class="kg-breadcrumb">
            <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
            <span class="sep">/</span>
            <span>Kegiatan</span>
        </div>
    </div>
    <?php if($is_admin): ?>
    <a href="<?php echo base_url('kegiatan/tambah'); ?>" class="btn-tambah">
        <i class="bi bi-plus-lg"></i> Buat Kegiatan
    </a>
    <?php endif; ?>
</div>

<!-- Filter -->
<div class="card border-0 shadow-sm mb-4" style="border-radius:12px;">
    <div class="card-body py-3">
        <form method="get" class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="form-label small fw-semibold text-muted mb-1">Kategori</label>
                <select name="kategori" class="form-select form-select-sm" style="border-radius:8px;">
                    <option value="">Semua Kategori</option>
                    <?php
                    $kats = ['sosial'=>'🤝 Sosial','olahraga'=>'⚽ Olahraga','kebersihan'=>'🧹 Kebersihan',
                             'keagamaan'=>'🕌 Keagamaan','pendidikan'=>'📚 Pendidikan',
                             'kesehatan'=>'❤️ Kesehatan','budaya'=>'🎭 Budaya','lainnya'=>'📌 Lainnya'];
                    foreach($kats as $k => $v): ?>
                    <option value="<?php echo $k; ?>" <?php echo ($kategori_filter==$k)?'selected':''; ?>>
                        <?php echo $v; ?>
                    </option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-semibold text-muted mb-1">Cari Kegiatan</label>
                <input type="text" name="cari" class="form-control form-control-sm" placeholder="Cari judul…"
                       value="<?php echo htmlspecialchars($cari ?? ''); ?>" style="border-radius:8px;">
            </div>
            <div class="col-md-2">
                <label class="form-label small fw-semibold text-muted mb-1">Bulan</label>
                <select name="bulan" class="form-select form-select-sm" style="border-radius:8px;">
                    <option value="">Semua</option>
                    <?php for($i=1; $i<=12; $i++): ?>
                    <option value="<?php echo $i; ?>" <?php echo ($bulan_filter==$i)?'selected':''; ?>>
                        <?php echo date('F', mktime(0,0,0,$i,1)); ?>
                    </option>
                    <?php endfor; ?>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small fw-semibold text-muted mb-1">Tahun</label>
                <select name="tahun" class="form-select form-select-sm" style="border-radius:8px;">
                    <option value="">Semua</option>
                    <?php foreach($tahun_list as $thn): ?>
                    <option value="<?php echo $thn; ?>" <?php echo ($tahun_filter==$thn)?'selected':''; ?>><?php echo $thn; ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-md-1">
                <button type="submit" class="btn btn-sm w-100 fw-semibold text-white"
                        style="background:linear-gradient(135deg,#3b82f6,#6366f1); border:none; border-radius:8px; padding:7px;">
                    <i class="bi bi-funnel"></i>
                </button>
            </div>
            <?php if($kategori_filter || $bulan_filter || $tahun_filter || $cari): ?>
            <div class="col-md-1">
                <a href="<?php echo base_url('kegiatan'); ?>"
                   class="btn btn-sm w-100 btn-outline-secondary fw-semibold"
                   style="border-radius:8px; padding:7px;">
                    <i class="bi bi-x-circle"></i>
                </a>
            </div>
            <?php endif; ?>
        </form>
    </div>
</div>

<?php if($this->session->flashdata('success')): ?>
<div class="alert alert-success alert-dismissible fade show" style="border-radius:10px;" role="alert">
    <i class="bi bi-check-circle me-2"></i><?php echo $this->session->flashdata('success'); ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>
<?php if($this->session->flashdata('error')): ?>
<div class="alert alert-danger alert-dismissible fade show" style="border-radius:10px;" role="alert">
    <i class="bi bi-exclamation-circle me-2"></i><?php echo $this->session->flashdata('error'); ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>

<?php if(!empty($kegiatan)):
    $hero    = $kegiatan[0];
    $therest = array_slice($kegiatan, 1);
    $b       = kg_badge($hero->kategori, $badge_map);
?>

<!-- ═══ HERO CARD ═══════════════════════════════════════════ -->
<div class="kg-hero">
    <div class="kg-hero-thumb">
        <?php if($hero->thumbnail): ?>
        <img src="<?php echo base_url('uploads/kegiatan/'.$hero->thumbnail); ?>" alt="<?php echo htmlspecialchars($hero->judul); ?>">
        <?php else: ?>
        <div class="kg-no-img">🗓️</div>
        <?php endif; ?>
        <?php if($hero->jumlah_foto > 0): ?>
        <div class="kg-photo-count"><i class="bi bi-images me-1"></i><?php echo $hero->jumlah_foto; ?> foto</div>
        <?php endif; ?>
    </div>
    <div class="kg-hero-body">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-2">
            <span class="kg-badge" style="background:<?php echo $b[2]; ?>; color:<?php echo $b[1]; ?>; border:1px solid <?php echo $b[1]; ?>30;">
                <?php echo $b[0].' '.ucfirst($hero->kategori); ?>
            </span>
            <?php if($is_admin): ?>
            <?php $sc = $hero->status=='publish'?'#19875420':'#6c757d20'; $stc = $hero->status=='publish'?'#198754':'#6c757d'; ?>
            <span class="badge rounded-pill px-2 py-1 small" style="background:<?php echo $sc; ?>; color:<?php echo $stc; ?>;">
                <?php echo ucfirst($hero->status); ?>
            </span>
            <?php endif; ?>
        </div>

        <div class="kg-card-title" style="-webkit-line-clamp:3; font-size:1.3rem;">
            <?php echo htmlspecialchars($hero->judul); ?>
        </div>

        <div class="kg-card-excerpt" style="-webkit-line-clamp:4;">
            <?php echo kegiatan_to_plain($hero->isi, 250); ?>
        </div>

        <div class="kg-meta">
            <span><i class="bi bi-calendar3"></i><?php echo date('d M Y', strtotime($hero->tanggal_mulai)); ?></span>
            <?php if($hero->lokasi): ?>
            <span><i class="bi bi-geo-alt"></i><?php echo htmlspecialchars($hero->lokasi); ?></span>
            <?php endif; ?>
            <span><i class="bi bi-person"></i><?php echo htmlspecialchars($hero->pembuat); ?></span>
        </div>

        <div class="d-flex align-items-center gap-2">
            <a href="<?php echo base_url('kegiatan/detail/'.$hero->id); ?>"
               class="btn-detail-card" style="background:linear-gradient(135deg,<?php echo $b[1]; ?>,<?php echo $b[1]; ?>cc);">
                <i class="bi bi-eye-fill"></i> Baca Selengkapnya
            </a>
            <?php if($is_admin): ?>
            <a href="<?php echo base_url('kegiatan/edit/'.$hero->id); ?>"
               class="btn btn-sm btn-outline-warning px-2" style="border-radius:8px;">
                <i class="bi bi-pencil"></i>
            </a>
           <button class="btn btn-sm btn-outline-danger px-2" style="border-radius:8px;"
   onclick="konfirmasiHapusKegiatan('<?php echo base_url('kegiatan/hapus/'.$hero->id); ?>','<?php echo addslashes($hero->judul); ?>')">
  <i class="bi bi-trash"></i>
</button>
            <?php endif; ?>
        </div>
    </div>
</div>

<!-- ═══ GRID CARDS ══════════════════════════════════════════ -->
<?php if(!empty($therest)): ?>
<div class="d-flex align-items-center mb-3">
    <span class="fw-semibold text-muted small text-uppercase" style="letter-spacing:.05em;">Kegiatan Lainnya</span>
    <div class="flex-grow-1 ms-3" style="height:1px; background:#e9ecef;"></div>
</div>
<div class="row g-3">
    <?php foreach($therest as $k):
        $b = kg_badge($k->kategori, $badge_map);
    ?>
    <div class="col-md-4 col-sm-6">
        <div class="kg-card">
            <!-- Thumbnail -->
            <div class="kg-card-thumb">
                <?php if($k->thumbnail): ?>
                <img src="<?php echo base_url('uploads/kegiatan/'.$k->thumbnail); ?>" alt="">
                <?php else: ?>
                <div class="kg-no-img"><?php echo $b[0]; ?></div>
                <?php endif; ?>
                <?php if($k->jumlah_foto > 0): ?>
                <div class="kg-photo-count"><i class="bi bi-images me-1"></i><?php echo $k->jumlah_foto; ?></div>
                <?php endif; ?>
                <?php if($is_admin): ?>
                <?php $sc = $k->status=='publish'?'#19875490':'#6c757d90'; ?>
                <div class="kg-status-badge">
                    <span class="badge text-white" style="background:<?php echo $sc; ?>; backdrop-filter:blur(4px); font-size:0.7em;">
                        <?php echo ucfirst($k->status); ?>
                    </span>
                </div>
                <?php endif; ?>
            </div>

            <div class="kg-card-body">
                <span class="kg-badge" style="background:<?php echo $b[2]; ?>; color:<?php echo $b[1]; ?>; border:1px solid <?php echo $b[1]; ?>30;">
                    <?php echo $b[0].' '.ucfirst($k->kategori); ?>
                </span>
                <div class="kg-card-title"><?php echo htmlspecialchars($k->judul); ?></div>
                <div class="kg-card-excerpt"><?php echo kegiatan_to_plain($k->isi, 120); ?></div>

                <div class="kg-meta">
                    <span><i class="bi bi-calendar3"></i><?php echo date('d M Y', strtotime($k->tanggal_mulai)); ?></span>
                    <?php if($k->lokasi): ?>
                    <span><i class="bi bi-geo-alt"></i><?php echo htmlspecialchars(mb_substr($k->lokasi,0,25)); ?></span>
                    <?php endif; ?>
                </div>

                <div class="kg-card-footer">
                    <a href="<?php echo base_url('kegiatan/detail/'.$k->id); ?>"
                       class="btn-detail-card" style="background:linear-gradient(135deg,<?php echo $b[1]; ?>,<?php echo $b[1]; ?>cc);">
                        <i class="bi bi-eye-fill"></i> Detail
                    </a>
                    <?php if($is_admin): ?>
                    <div class="d-flex gap-1">
                        <a href="<?php echo base_url('kegiatan/edit/'.$k->id); ?>"
                           class="btn btn-sm btn-outline-warning px-2" style="border-radius:7px;">
                            <i class="bi bi-pencil"></i>
                        </a>
                        <button class="btn btn-sm btn-outline-danger px-2" style="border-radius:7px;"
   onclick="konfirmasiHapusKegiatan('<?php echo base_url('kegiatan/hapus/'.$k->id); ?>','<?php echo addslashes($k->judul); ?>')">
  <i class="bi bi-trash"></i>
</button>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
    <?php endforeach; ?>
</div>
<?php endif; // therest ?>

<?php else: ?>
<!-- Empty State -->
<div class="card border-0 shadow-sm text-center py-5" style="border-radius:14px;">
    <div class="card-body">
        <div class="rounded-circle d-inline-flex align-items-center justify-content-center mb-3"
             style="width:80px; height:80px; background:#eff6ff;">
            <i class="bi bi-calendar-event fs-2" style="color:#3b82f6;"></i>
        </div>
        <h6 class="fw-bold text-muted">Belum ada kegiatan</h6>
        <p class="text-muted small mb-0">Kegiatan yang ditambahkan akan muncul di sini</p>
    </div>
</div>
<?php endif; ?>

<!-- Modal Konfirmasi Hapus Kegiatan -->
<div class="modal fade" id="modalHapusKegiatan" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" style="max-width:400px;">
    <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 Kegiatan</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;">Anda akan menghapus kegiatan:</p>
        <div style="background:#fef2f2;border:1.5px solid #fecaca;border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:10px;">
          <div style="width:34px;height:34px;border-radius:9px;background:#fee2e2;color:#dc2626;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;">
            <i class="bi bi-calendar-event-fill"></i>
          </div>
          <div style="font-weight:700;font-size:.88rem;color:#991b1b;" id="hapusKegiatanJudul">-</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 beserta <strong>semua foto galeri</strong> akan terhapus permanen.
        </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="btnKonfirmasiHapusKegiatan"
          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>

<script>
var _bsModalHapusKegiatan = null;

function konfirmasiHapusKegiatan(url, judul) {
  var elJudul = document.getElementById('hapusKegiatanJudul');
  var elBtn   = document.getElementById('btnKonfirmasiHapusKegiatan');
  if(elJudul) elJudul.textContent = judul || '-';
  if(elBtn)   elBtn.href          = url;

  var modalEl = document.getElementById('modalHapusKegiatan');
  if(!modalEl) return;
  if(!_bsModalHapusKegiatan) _bsModalHapusKegiatan = new bootstrap.Modal(modalEl);
  _bsModalHapusKegiatan.show();
}
</script>