<?php
$judul = "MOD Harian";
$menu  = "mod";
include 'layout/header.php';
$data = mysqli_query($conn,"
    SELECT m.*, u.nama, u.role
    FROM mod_harian m
    JOIN users u ON m.id_user = u.id_user
    ORDER BY m.tanggal DESC
");
?>

<?php include 'layout/sidebar.php'; ?>

<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
:root {
    /* HIJAU AKSEN: Lebih cerah, dominan, dan segar */
    --emerald-400: #34d399;       /* Hijau neon pastel yang hidup */
    --emerald-500: #10b981;       /* Hijau utama yang solid */
    --emerald-600: #059669;       /* Hijau medium untuk hover */
    --emerald-700: #047857;       /* Hijau gelap untuk gradasi */
    
    /* GLOW & BORDER: Ditingkatkan agar efek menyalanya lebih kelihatan */
    --mint-glow:   rgba(16, 185, 129, 0.15);
    --mint-border: rgba(16, 185, 129, 0.3);
    
    /* LATAR BELAKANG (SURFACE): Dibuat hijau-gelap yang lebih terang & hidup */
    --surface:     #0d1f18;       /* Latar utama yang lebih kelihatan warna hijaunya */
    --surface-1:   #142b22;       /* Panel / Sidebar (Deep Mint) */
    --surface-2:   #1b3a2e;       /* Lapisan kedua (Hover / Card) */
    --surface-3:   #234a3b;       /* Lapisan ketiga (Tombol / Kontras) */
    
    /* TEKS: Sangat kontras dan bersih */
    --text-primary:   #f0fdf4;    /* Putih bersih dengan rona mint */
    --text-secondary: #a7f3d0;    /* Hijau muda yang cerah dan tajam */
    --text-muted:     #6ee7b7;    /* Hijau pembantu yang stand-out */
    --sidebar-w: 240px;
    --topbar-h:  60px;
  }
.page-card{background:var(--surface-1);border:1px solid var(--mint-border);border-radius:14px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.35);font-family:'DM Sans',sans-serif;}
.page-card-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:var(--surface-2);border-bottom:1px solid var(--mint-border);}
.page-card-header h5{font-size:.92rem;font-weight:700;color:var(--text-primary);letter-spacing:.01em;margin:0;}
.page-card-header h5 span{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--emerald-400);box-shadow:0 0 6px var(--emerald-400);margin-right:8px;vertical-align:middle;}
.btn-add{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;background:linear-gradient(135deg,var(--emerald-700),var(--emerald-500));color:#fff;font-size:.78rem;font-weight:600;border-radius:8px;text-decoration:none;transition:opacity .18s,transform .18s;box-shadow:0 2px 10px rgba(16,185,129,.3);}
.btn-add:hover{opacity:.88;transform:translateY(-1px);color:#fff;}
.page-card-body{padding:0;}
.data-table{width:100%;border-collapse:collapse;}
.data-table thead tr{background:var(--surface-3);}
.data-table thead th{padding:12px 16px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);border-bottom:1px solid var(--mint-border);white-space:nowrap;}
.data-table tbody tr{border-bottom:1px solid rgba(16,185,129,.07);transition:background .15s;}
.data-table tbody tr:last-child{border-bottom:none;}
.data-table tbody tr:hover{background:var(--mint-glow);}
.data-table td{padding:13px 16px;font-size:.83rem;color:var(--text-secondary);vertical-align:middle;}
.data-table td:first-child{color:var(--text-muted);font-family:'Space Mono',monospace;font-size:.72rem;}

/* tanggal chip */
.tanggal-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:7px;
  background:var(--surface-3);border:1px solid var(--mint-border);
  font-family:'Space Mono',monospace;font-size:.72rem;color:var(--text-secondary);
}

.badge-role{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.68rem;font-weight:600;letter-spacing:.04em;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.25);color:var(--emerald-400);}
.btn-delete{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:7px;font-size:.73rem;font-weight:500;text-decoration:none;background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.2);color:#f87171;transition:background .15s,transform .15s;}
.btn-delete:hover{background:rgba(248,113,113,.18);transform:translateY(-1px);color:#f87171;}
</style>

<div class="page-card">

  <div class="page-card-header">
    <h5><span></span>MOD Harian</h5>
    <a href="tambah_mod.php" class="btn-add">+ Tambah MOD</a>
  </div>

  <div class="page-card-body">
    <div style="overflow-x:auto;">
      <table class="data-table">
        <thead>
          <tr>
            <th width="56">No</th>
            <th>Tanggal</th>
            <th>Nama MOD</th>
            <th>Role</th>
            <th width="100">Aksi</th>
          </tr>
        </thead>
        <tbody>
        <?php $no=1; while($row=mysqli_fetch_assoc($data)): ?>
          <tr>
            <td><?= $no++ ?></td>
            <td><span class="tanggal-chip">📅 <?= date('d M Y', strtotime($row['tanggal'])) ?></span></td>
            <td style="color:var(--text-primary);font-weight:500;"><?= htmlspecialchars($row['nama']) ?></td>
            <td><span class="badge-role"><?= ucfirst($row['role']) ?></span></td>
            <td>
              <a href="hapus_mod.php?id=<?= $row['id_mod'] ?>" class="btn-delete"
                 onclick="return confirm('Hapus data MOD ini?')">✕ Hapus</a>
            </td>
          </tr>
        <?php endwhile; ?>
        </tbody>
      </table>
    </div>
  </div>

</div>

<?php include 'layout/footer.php'; ?>