<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>

<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --teal-900: #0d3d38;
  --teal-800: #0b5a52;
  --teal-700: #0b7a6e;
  --teal-600: #0d9488;
  --teal-500: #14b8a6;
  --teal-400: #2dd4bf;
  --teal-100: #ccfbf1;
  --teal-50:  #f0fdfa;
  --green-500: #10b981;
  --green-600: #059669;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --red-400:  #f87171;
  --red-500:  #ef4444;
  --red-600:  #dc2626;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --slate-50: #f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-700:#334155;
  --slate-900:#0f172a;
  --card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.06);
}

.jadwal-wrapper {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--slate-900);
}

/* ===== PAGE HEADER (sama dengan pinjaman) ===== */
.ar-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}
.ar-header-left h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--teal-800);
  margin: 0 0 5px;
  display: flex;
  align-items: center;
  gap: 11px;
  letter-spacing: -.3px;
}
.ar-header-left h4 .hi {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--teal-600), var(--teal-500));
  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;
}
.ar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.77rem;
  color: var(--slate-400);
  padding-left: 51px;
}
.ar-breadcrumb a { color: var(--teal-600); text-decoration: none; font-weight: 600; }
.ar-breadcrumb a:hover { text-decoration: underline; }
.ar-breadcrumb .sep { color: var(--slate-200); }

.btn-tambah {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 24px;
  border-radius: 50px;
  border: none;
  background: linear-gradient(135deg, var(--teal-600), var(--teal-500));
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem; font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(13,148,136,.28);
  transition: all .2s;
}
.btn-tambah:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13,148,136,.38);
  color: #fff;
}

/* ===== STAT CARDS ===== */
.jadwal-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.jadwal-stat-card {
  border-radius: 14px; padding: 20px 18px;
  position: relative; overflow: hidden;
  color: #fff;
  transition: transform .2s, box-shadow .2s;
}
.jadwal-stat-card:hover { transform: translateY(-4px); }
.jadwal-stat-card::before {
  content: '';
  position: absolute; top: -28px; right: -28px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.1);
}
.jadwal-stat-card::after {
  content: '';
  position: absolute; bottom: -45px; right: 40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.jadwal-stat-card .sc-label {
  font-size: .72rem; font-weight: 600; opacity: .85;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px; position: relative; z-index: 1;
}
.jadwal-stat-card .sc-value {
  font-size: 1.5rem; font-weight: 800; line-height: 1.15;
  position: relative; z-index: 1;
}
.jadwal-stat-card .sc-icon {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px;
  background: rgba(255,255,255,.16); border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; z-index: 1;
}

.sc-teal   { background: linear-gradient(135deg, var(--teal-800), var(--teal-600), var(--teal-400)); box-shadow: 0 8px 28px rgba(13,148,136,.28); }
.sc-green  { background: linear-gradient(135deg, #059669, #10b981, #34d399); box-shadow: 0 8px 28px rgba(16,185,129,.28); }
.sc-amber  { background: linear-gradient(135deg, #d97706, #f59e0b, #fbbf24); box-shadow: 0 8px 28px rgba(245,158,11,.28); }
.sc-blue   { background: linear-gradient(135deg, #1d4ed8, #3b82f6, #60a5fa); box-shadow: 0 8px 28px rgba(59,130,246,.28); }

/* ===== JADWAL HARI INI ===== */
.jadwal-hari-ini-card {
  background: linear-gradient(135deg, var(--teal-800), var(--teal-600));
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 28px rgba(13,148,136,.25);
  margin-bottom: 20px;
  overflow: hidden;
}
.jadwal-hari-ini-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: #fff;
}
.jadwal-hari-ini-header h5 {
  margin: 0; font-size: .95rem; font-weight: 800;
  display: flex; align-items: center; gap: 8px;
}
.jadwal-hari-ini-header .badge-date {
  background: rgba(255,255,255,.2); color: #fff;
  padding: 4px 12px; border-radius: 20px;
  font-size: .75rem; font-weight: 700;
}
.jadwal-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff;
  transition: background .2s;
}
.jadwal-item:last-child { border-bottom: none; }
.jadwal-item:hover { background: rgba(255,255,255,.05); }
.jadwal-item-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.jadwal-item-info { flex: 1; min-width: 0; }
.jadwal-item-title {
  font-weight: 700; font-size: .9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jadwal-item-meta {
  font-size: .78rem; opacity: .8; margin-top: 3px;
}
.jadwal-item-badge {
  background: rgba(255,255,255,.2); color: #fff;
  padding: 4px 10px; border-radius: 20px;
  font-size: .72rem; font-weight: 700;
  flex-shrink: 0;
}
.jadwal-item-action {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.2); color: #fff;
  border: 1px solid rgba(255,255,255,.3); border-radius: 7px;
  padding: 6px 12px; font-size: .75rem; font-weight: 700;
  text-decoration: none; flex-shrink: 0;
  transition: background .15s;
}
.jadwal-item-action:hover { background: rgba(255,255,255,.3); color: #fff; }

/* ===== FILTER CARD ===== */
.jadwal-filter-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--slate-200);
  box-shadow: var(--card-shadow);
  margin-bottom: 20px;
  overflow: hidden;
}
.jadwal-filter-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  background: linear-gradient(90deg, var(--teal-50), #fff);
  border-bottom: 1px solid rgba(13,148,136,.1);
}
.jadwal-filter-header h5 {
  margin: 0; font-size: .95rem; font-weight: 800;
  color: var(--slate-900);
  display: flex; align-items: center; gap: 8px;
}
.jadwal-filter-header h5 i { color: var(--teal-600); }
.filter-pill {
  background: var(--amber-500); color: #fff;
  font-size: .72rem; font-weight: 800;
  padding: 2px 9px; border-radius: 20px;
}
.jadwal-filter-body { padding: 16px 20px; }

/* ===== JADWAL CARDS ===== */
.jadwal-content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.jadwal-card {
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid var(--slate-200);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: all .2s;
  display: flex; flex-direction: column;
}
.jadwal-card:hover {
  border-color: var(--teal-400);
  box-shadow: 0 8px 28px rgba(13,148,136,.12);
  transform: translateY(-3px);
}
.jadwal-card-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--slate-100);
  background: linear-gradient(90deg, var(--teal-50), #fff);
}
.jadwal-card-badges {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.badge-kategori {
  padding: 4px 10px; border-radius: 20px;
  font-size: .72rem; font-weight: 700;
}
.badge-ronda { background: #fee2e2; color: #991b1b; }
.badge-kerja_bakti { background: #dcfce7; color: #166534; }
.badge-poskamling { background: #dbeafe; color: #1e40af; }
.badge-arisan { background: #f3e8ff; color: #7c3aed; }
.badge-rapat { background: #ffedd5; color: #9a3412; }
.badge-lainnya { background: var(--slate-100); color: var(--slate-700); }

.badge-status {
  padding: 3px 8px; border-radius: 20px;
  font-size: .7rem; font-weight: 700;
}
.status-aktif { background: #dcfce7; color: #166534; }
.status-nonaktif { background: var(--slate-200); color: var(--slate-600); }
.status-selesai { background: #dbeafe; color: #1e40af; }

.jadwal-card-title {
  font-size: .95rem; font-weight: 800; color: var(--slate-900);
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jadwal-card-subtitle {
  font-size: .78rem; color: var(--slate-500);
}

.jadwal-card-body {
  padding: 14px 18px;
  flex: 1;
}
.info-row {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 10px;
  font-size: .82rem;
}
.info-row:last-child { margin-bottom: 0; }
.info-row i {
  width: 18px; color: var(--teal-600);
  margin-top: 2px; flex-shrink: 0;
}
.info-row div { flex: 1; }
.info-label {
  display: block; font-size: .72rem; color: var(--slate-400);
  margin-bottom: 1px;
}
.info-value {
  font-weight: 700; color: var(--slate-700);
}

.jadwal-card-footer {
  padding: 12px 18px;
  background: var(--slate-50);
  border-top: 1px solid var(--slate-100);
}
.jadwal-card-actions {
  display: flex; gap: 8px;
}
.btn-jadwal {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: 8px; padding: 7px 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .76rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: all .15s; flex: 1;
}
.btn-jadwal-primary {
  background: var(--teal-600); color: #fff; border: none;
}
.btn-jadwal-primary:hover { background: var(--teal-700); color: #fff; }
.btn-jadwal-secondary {
  background: #fff; color: var(--slate-600); border: 1px solid var(--slate-300);
}
.btn-jadwal-secondary:hover { background: var(--slate-100); color: var(--slate-800); }
.btn-jadwal-icon {
  width: 32px; padding: 7px;
}
.btn-jadwal-warning {
  background: var(--amber-100); color: var(--amber-700); border: 1px solid var(--amber-300);
}
.btn-jadwal-warning:hover { background: var(--amber-200); color: var(--amber-800); }
.btn-jadwal-danger {
  background: #fee2e2; color: var(--red-600); border: 1px solid #fecaca;
}
.btn-jadwal-danger:hover { background: #fecaca; color: var(--red-700); }

/* ===== EMPTY STATE ===== */
.jadwal-empty {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--slate-200);
  box-shadow: var(--card-shadow);
  padding: 60px 20px;
  text-align: center;
}
.jadwal-empty-icon {
  width: 80px; height: 80px; border-radius: 20px;
  background: var(--slate-100);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 2rem; color: var(--slate-400);
}
.jadwal-empty h5 {
  font-size: 1rem; font-weight: 700; color: var(--slate-800);
  margin-bottom: 8px;
}
.jadwal-empty p {
  font-size: .85rem; color: var(--slate-500);
  margin-bottom: 20px;
}

/* ===== FAB MOBILE ===== */
.btn-tambah-fab {
  display: none;
  position: fixed;
  bottom: 24px; right: 20px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  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-tambah-fab:hover { transform: scale(1.08); color: #fff; }

/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.jadwal-stat-grid { animation: fadeUp .35s ease both; }
.jadwal-hari-ini-card { animation: fadeUp .4s .1s ease both; }
.jadwal-filter-card { animation: fadeUp .4s .18s ease both; }
.jadwal-content-grid { animation: fadeUp .4s .24s ease both; }

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
  .jadwal-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .jadwal-content-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .ar-page-header { flex-direction: column; align-items: flex-start; }
  .btn-tambah { width: 100%; justify-content: center; }
  .btn-tambah-desktop { display: none; }
  .btn-tambah-fab { display: flex; }
  
  .jadwal-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .jadwal-stat-card .sc-value { font-size: 1.1rem; }
  .jadwal-stat-card .sc-icon { width: 42px; height: 42px; font-size: 1.1rem; right: 12px; }
  
  .jadwal-content-grid { grid-template-columns: 1fr; }
  .jadwal-item { flex-wrap: wrap; }
  .jadwal-item-action { width: 100%; justify-content: center; margin-top: 8px; }
}

@media (max-width: 500px) {
  .jadwal-stat-grid { grid-template-columns: 1fr 1fr; }
}
</style>

<div class="jadwal-wrapper">

  <!-- ===== PAGE HEADER ===== -->
  <div class="ar-page-header">
    <div class="ar-header-left">
      <h4>
        <span class="hi"><i class="bi bi-calendar-check"></i></span>
        Jadwal Kegiatan
      </h4>
      <div class="ar-breadcrumb">
        <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
        <span class="sep">/</span>
        <span>Jadwal Kegiatan</span>
      </div>
    </div>
    <?php if(can('jadwal', 'create')): ?>
    <a href="<?php echo base_url('jadwal/tambah'); ?>" class="btn-tambah btn-tambah-desktop">
      <i class="bi bi-plus-circle-fill"></i> Tambah Jadwal
    </a>
    <?php endif; ?>
    
  </div>

  <?php if(can('jadwal', 'create')): ?>
  <a href="<?php echo base_url('jadwal/tambah'); ?>" class="btn-tambah-fab" title="Tambah Jadwal">
    <i class="bi bi-plus-lg"></i>
  </a>
  <?php endif; ?>

  <!-- ===== STAT CARDS ===== -->
  <div class="jadwal-stat-grid">
    <div class="jadwal-stat-card sc-teal">
      <div class="sc-label"><i class="bi bi-calendar me-1"></i>Total Jadwal</div>
      <div class="sc-value"><?php echo number_format($statistik['total']); ?></div>
      <div class="sc-icon"><i class="bi bi-calendar"></i></div>
    </div>
    <div class="jadwal-stat-card sc-green">
      <div class="sc-label"><i class="bi bi-sun me-1"></i>Jadwal Harian</div>
      <div class="sc-value"><?php echo number_format($statistik['harian']); ?></div>
      <div class="sc-icon"><i class="bi bi-sun"></i></div>
    </div>
    <div class="jadwal-stat-card sc-amber">
      <div class="sc-label"><i class="bi bi-calendar-week me-1"></i>Jadwal Mingguan</div>
      <div class="sc-value"><?php echo number_format($statistik['mingguan']); ?></div>
      <div class="sc-icon"><i class="bi bi-calendar-week"></i></div>
    </div>
    <div class="jadwal-stat-card sc-blue">
      <div class="sc-label"><i class="bi bi-calendar-event me-1"></i>Hari Ini</div>
      <div class="sc-value"><?php echo number_format(count($jadwal_hari_ini)); ?></div>
      <div class="sc-icon"><i class="bi bi-calendar-event"></i></div>
    </div>
  </div>

  <!-- ===== JADWAL HARI INI ===== -->
  <?php if(!empty($jadwal_hari_ini)): ?>
  <div class="jadwal-hari-ini-card">
    <div class="jadwal-hari-ini-header">
      <h5><i class="bi bi-calendar-check-fill"></i> Jadwal Hari Ini</h5>
      <span class="badge-date"><?php echo date('l, d F Y'); ?></span>
    </div>
    <?php foreach($jadwal_hari_ini as $j): 
      $kategori_labels = [
        'ronda' => 'Ronda', 'kerja_bakti' => 'Kerja Bakti',
        'poskamling' => 'Poskamling', 'arisan' => 'Arisan',
        'rapat' => 'Rapat', 'lainnya' => 'Lainnya'
      ];
    ?>
    <div class="jadwal-item">
      <div class="jadwal-item-icon">
        <i class="bi bi-clock-fill"></i>
      </div>
      <div class="jadwal-item-info">
        <div class="jadwal-item-title"><?php echo htmlspecialchars($j->nama_kegiatan); ?></div>
        <div class="jadwal-item-meta">
          <i class="bi bi-clock me-1"></i>
          <?php echo $j->waktu_mulai ? date('H:i', strtotime($j->waktu_mulai)) : '-'; ?>
          <?php echo $j->waktu_selesai ? ' - ' . date('H:i', strtotime($j->waktu_selesai)) : ''; ?>
          <?php if($j->lokasi): ?>
          <span class="mx-1">•</span><i class="bi bi-geo-alt me-1"></i><?php echo htmlspecialchars($j->lokasi); ?>
          <?php endif; ?>
        </div>
      </div>
      <span class="jadwal-item-badge"><?php echo $kategori_labels[$j->kategori] ?? $j->kategori; ?></span>
      <a href="<?php echo base_url('jadwal/detail/'.$j->id); ?>" class="jadwal-item-action">
        <i class="bi bi-eye"></i> Detail
      </a>
    </div>
    <?php endforeach; ?>
  </div>
  <?php else: ?>
  <div class="jadwal-filter-card" style="border-left: 4px solid var(--slate-400);">
    <div class="jadwal-filter-body d-flex align-items-center gap-3">
      <div style="width:48px;height:48px;border-radius:12px;background:var(--slate-100);display:flex;align-items:center;justify-content:center;">
        <i class="bi bi-calendar-x text-secondary fs-4"></i>
      </div>
      <div>
        <h6 class="mb-1 text-secondary">Tidak Ada Jadwal Hari Ini</h6>
        <p class="mb-0 text-muted small">Tidak ada kegiatan yang terjadwal untuk hari <?php echo date('l, d F Y'); ?></p>
      </div>
    </div>
  </div>
  <?php endif; ?>

  <!-- ===== FILTER ===== -->
  <div class="jadwal-filter-card">
    <div class="jadwal-filter-header">
      <h5><i class="bi bi-funnel-fill"></i> Filter Jadwal</h5>
      <?php if($this->input->get('kategori') || $this->input->get('status')): ?>
      <span class="filter-pill">Filter Aktif</span>
      <?php endif; ?>
    </div>
    <div class="jadwal-filter-body">
      <form method="get" class="row g-2">
        <div class="col-md-3 col-6">
          <select name="kategori" class="form-select" onchange="this.form.submit()">
            <option value="">Semua Kategori</option>
            <option value="ronda" <?php echo $this->input->get('kategori')=='ronda'?'selected':''; ?>>Ronda</option>
            <option value="kerja_bakti" <?php echo $this->input->get('kategori')=='kerja_bakti'?'selected':''; ?>>Kerja Bakti</option>
            <option value="poskamling" <?php echo $this->input->get('kategori')=='poskamling'?'selected':''; ?>>Poskamling</option>
            <option value="arisan" <?php echo $this->input->get('kategori')=='arisan'?'selected':''; ?>>Arisan</option>
            <option value="rapat" <?php echo $this->input->get('kategori')=='rapat'?'selected':''; ?>>Rapat</option>
            <option value="lainnya" <?php echo $this->input->get('kategori')=='lainnya'?'selected':''; ?>>Lainnya</option>
          </select>
        </div>
        <div class="col-md-3 col-6">
          <select name="status" class="form-select" onchange="this.form.submit()">
            <option value="">Semua Status</option>
            <option value="aktif" <?php echo $this->input->get('status')=='aktif'?'selected':''; ?>>Aktif</option>
            <option value="nonaktif" <?php echo $this->input->get('status')=='nonaktif'?'selected':''; ?>>Nonaktif</option>
            <option value="selesai" <?php echo $this->input->get('status')=='selesai'?'selected':''; ?>>Selesai</option>
          </select>
        </div>
        <div class="col-md-2 col-12">
          <a href="<?php echo base_url('jadwal'); ?>" class="btn btn-outline-secondary w-100" style="border-radius:8px;">
            <i class="bi bi-x-circle me-1"></i>Reset
          </a>
        </div>
      </form>
      <?php if($this->input->get('kategori') || $this->input->get('status')): ?>
      <div class="alert alert-info py-2 mt-3 mb-0 d-flex align-items-center gap-2" style="border-radius:8px;">
        <i class="bi bi-info-circle"></i>
        <small>Menampilkan: 
          <?php 
          $filters = [];
          if($this->input->get('kategori')) $filters[] = 'Kategori ' . ucfirst($this->input->get('kategori'));
          if($this->input->get('status')) $filters[] = 'Status ' . ucfirst($this->input->get('status'));
          echo implode(' + ', $filters);
          ?>
        </small>
      </div>
      <?php endif; ?>
    </div>
  </div>

  <!-- ===== DAFTAR JADWAL ===== -->
  <?php 
  $hari_labels = ['senin'=>'Senin','selasa'=>'Selasa','rabu'=>'Rabu','kamis'=>'Kamis','jumat'=>'Jumat','sabtu'=>'Sabtu','minggu'=>'Minggu'];
  $jenis_labels = ['harian'=>'Setiap Hari','mingguan'=>'Mingguan','bulanan'=>'Bulanan','tanggal_tentu'=>'Tanggal Tertentu','range_tanggal'=>'Rentang Tanggal'];
  $kategori_labels = ['ronda'=>'Ronda','kerja_bakti'=>'Kerja Bakti','poskamling'=>'Poskamling','arisan'=>'Arisan','rapat'=>'Rapat','lainnya'=>'Lainnya'];
  
  if(!empty($jadwal)): 
  ?>
  <div class="jadwal-content-grid">
    <?php foreach($jadwal as $j): 
      $badge_class = 'badge-' . $j->kategori;
      $status_class = 'status-' . $j->status;
    ?>
    <div class="jadwal-card">
      <div class="jadwal-card-header">
        <div class="jadwal-card-badges">
          <span class="badge-kategori <?php echo $badge_class; ?>">
            <?php echo $kategori_labels[$j->kategori] ?? $j->kategori; ?>
          </span>
          <span class="badge-status <?php echo $status_class; ?>">
            <?php echo ucfirst($j->status); ?>
          </span>
        </div>
        <div class="jadwal-card-title"><?php echo htmlspecialchars($j->nama_kegiatan); ?></div>
        <div class="jadwal-card-subtitle"><?php echo $jenis_labels[$j->jenis_jadwal] ?? $j->jenis_jadwal; ?></div>
      </div>
      
      <div class="jadwal-card-body">
        <?php if($j->jenis_jadwal == 'harian'): ?>
          <div class="info-row">
            <i class="bi bi-clock"></i>
            <div>
              <span class="info-label">Waktu</span>
              <span class="info-value">
                <?php echo $j->waktu_mulai ? date('H:i', strtotime($j->waktu_mulai)) : '-'; ?>
                <?php echo $j->waktu_selesai ? ' - ' . date('H:i', strtotime($j->waktu_selesai)) : ''; ?>
              </span>
            </div>
          </div>
        <?php elseif($j->jenis_jadwal == 'mingguan'): ?>
          <div class="info-row">
            <i class="bi bi-calendar-week"></i>
            <div>
              <span class="info-label">Hari</span>
              <span class="info-value">Setiap <?php echo $hari_labels[$j->hari] ?? $j->hari; ?></span>
            </div>
          </div>
          <div class="info-row">
            <i class="bi bi-clock"></i>
            <div>
              <span class="info-label">Waktu</span>
              <span class="info-value"><?php echo $j->waktu_mulai ? date('H:i', strtotime($j->waktu_mulai)) : '-'; ?></span>
            </div>
          </div>
        <?php elseif($j->jenis_jadwal == 'tanggal_tentu'): ?>
          <div class="info-row">
            <i class="bi bi-calendar-event"></i>
            <div>
              <span class="info-label">Tanggal</span>
              <span class="info-value"><?php echo $j->tanggal_mulai ? date('d F Y', strtotime($j->tanggal_mulai)) : '-'; ?></span>
            </div>
          </div>
        <?php elseif($j->jenis_jadwal == 'range_tanggal'): ?>
          <div class="info-row">
            <i class="bi bi-calendar-range"></i>
            <div>
              <span class="info-label">Periode</span>
              <span class="info-value">
                <?php echo $j->tanggal_mulai ? date('d M', strtotime($j->tanggal_mulai)) : '-'; ?> - 
                <?php echo $j->tanggal_selesai ? date('d M Y', strtotime($j->tanggal_selesai)) : '-'; ?>
              </span>
            </div>
          </div>
        <?php endif; ?>
        
        <?php if($j->lokasi): ?>
        <div class="info-row">
          <i class="bi bi-geo-alt"></i>
          <div>
            <span class="info-label">Lokasi</span>
            <span class="info-value"><?php echo htmlspecialchars($j->lokasi); ?></span>
          </div>
        </div>
        <?php endif; ?>
        
        <?php if($j->penanggung_jawab): ?>
        <div class="info-row">
          <i class="bi bi-person"></i>
          <div>
            <span class="info-label">Penanggung Jawab</span>
            <span class="info-value"><?php echo htmlspecialchars($j->penanggung_jawab); ?></span>
          </div>
        </div>
        <?php endif; ?>
      </div>
      
      <div class="jadwal-card-footer">
        <div class="jadwal-card-actions">
          <a href="<?php echo base_url('jadwal/detail/'.$j->id); ?>" class="btn-jadwal btn-jadwal-primary">
            <i class="bi bi-eye"></i> Detail
          </a>
          <?php if(can('jadwal', 'edit')): ?>
          <a href="<?php echo base_url('jadwal/edit/'.$j->id); ?>" class="btn-jadwal btn-jadwal-secondary btn-jadwal-icon" title="Edit">
            <i class="bi bi-pencil"></i>
          </a>
          <?php endif; ?>
          <?php if(can('jadwal', 'delete')): ?>
        <button class="btn-jadwal btn-jadwal-danger btn-jadwal-icon" title="Hapus"
   onclick="konfirmasiHapusJadwal('<?php echo base_url('jadwal/hapus/'.$j->id); ?>','<?php echo addslashes($j->nama_kegiatan); ?>')">
  <i class="bi bi-trash"></i>
</button>
          <?php endif; ?>
        </div>
      </div>
    </div>
    <?php endforeach; ?>
  </div>
  <?php else: ?>
  <div class="jadwal-empty">
    <div class="jadwal-empty-icon">
      <i class="bi bi-calendar-x"></i>
    </div>
    <h5>Belum Ada Jadwal Kegiatan</h5>
    <p>
      <?php if($this->input->get('kategori') || $this->input->get('status')): ?>
      Tidak ada jadwal yang sesuai dengan filter.<br>Silakan reset filter atau coba kriteria lain.
      <?php else: ?>
      Saat ini belum ada jadwal kegiatan yang tercatat.<br>Silakan tambahkan jadwal baru untuk memulai.
      <?php endif; ?>
    </p>
    <?php if(can('jadwal', 'create')): ?>
    <a href="<?php echo base_url('jadwal/tambah'); ?>" class="btn-tambah">
      <i class="bi bi-plus-circle-fill"></i> Tambah Jadwal Baru
    </a>
    <?php endif; ?>
    <?php if($this->input->get('kategori') || $this->input->get('status')): ?>
    <a href="<?php echo base_url('jadwal'); ?>" class="btn btn-outline-secondary ms-2" style="border-radius:50px;padding:10px 24px;">
      <i class="bi bi-x-circle me-1"></i> Reset Filter
    </a>
    <?php endif; ?>
  </div>
  <?php endif; ?>

  <!-- ===== FOOTER INFO ===== -->
  <div class="mt-4 text-center" style="font-size:.78rem;color:var(--slate-500);">
    <i class="bi bi-info-circle me-1"></i>
    Menampilkan <?php echo count($jadwal); ?> dari <?php echo $statistik['total']; ?> jadwal kegiatan
  </div>
<!-- Modal Konfirmasi Hapus Jadwal -->
<div class="modal fade" id="modalHapusJadwal" 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;font-family:'Plus Jakarta Sans',sans-serif;">
      <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 Jadwal 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 jadwal:</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-check"></i>
          </div>
          <div style="font-weight:700;font-size:.88rem;color:#991b1b;" id="hapusJadwalNama">-</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="btnKonfirmasiHapusJadwal"
          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>
<script>
var _bsModalHapusJadwal = null;

function konfirmasiHapusJadwal(url, nama) {
  var elNama = document.getElementById('hapusJadwalNama');
  var elBtn  = document.getElementById('btnKonfirmasiHapusJadwal');
  if(elNama) elNama.textContent = nama || '-';
  if(elBtn)  elBtn.href         = url;

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