<?php
// index_kelas.php — Dashboard Kelas (gaya seragam index_guru)
require_once __DIR__.'/config.php';

function safe($v){ return htmlspecialchars((string)$v,ENT_QUOTES,'UTF-8'); }

// ================== Query Data ==================
$mingguan = $mysqli->query("SELECT * FROM kelas_terbersih_mingguan ORDER BY minggu DESC LIMIT 5");
$bulanan  = $mysqli->query("SELECT * FROM kelas_terbersih_bulanan ORDER BY bulan DESC LIMIT 5");
$kurang   = $mysqli->query("SELECT * FROM kelas_kurang_ceria_mingguan ORDER BY minggu DESC LIMIT 5");
$guruKelas= $mysqli->query("SELECT * FROM guru_kelas ORDER BY kelas ASC");
$ketuaKelas=$mysqli->query("SELECT * FROM ketua_kelas ORDER BY kelas ASC");

// Identiti sekolah
$NAMA_SEKOLAH='SMK MUHIBBAH SANDAKAN';
$LOGO='logo.png';

// Ticker
$ticker_text="Selamat datang ke Dashboard Kelas SMK Muhibbah Sandakan.";
?>
<!DOCTYPE html>
<html lang="ms">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>Dashboard Kelas</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
  :root{--pad:clamp(10px,1.6vw,28px);--radius:18px;--card-bg:rgba(0,0,0,0.35);--accent:#1976d2;--text-shadow:1px 1px 4px rgba(0,0,0,0.5);--footer-h:44px;}
  html,body{height:100%;background:#0b1d33;color:#fff;}
  body{margin:0;font-family:Segoe UI,system-ui,Roboto,Arial,sans-serif;}
  .header{display:flex;align-items:center;justify-content:space-between;padding:var(--pad);gap:var(--pad);background:linear-gradient(90deg,rgba(25,118,210,0.25),rgba(0,0,0,0));border-bottom:1px solid rgba(255,255,255,0.08);}
  .brand{display:flex;align-items:center;gap:12px;}
  .brand img{width:64px;height:64px;object-fit:contain;}
  .brand .name{font-size:clamp(18px,2.2vw,32px);font-weight:700;text-shadow:var(--text-shadow);}
  .brand .subtitle{font-size:clamp(12px,1.2vw,16px);opacity:.9;}
  .clock{text-align:right;min-width:240px;}
  .clock .date{font-size:clamp(12px,1.2vw,16px);opacity:.9;}
  .clock .time{font-size:clamp(20px,3vw,40px);font-weight:700;letter-spacing:1px;}
  .container{padding:var(--pad);padding-bottom:calc(var(--footer-h) + var(--pad));display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pad);}
  .card{background:var(--card-bg);border-radius:var(--radius);padding:var(--pad);backdrop-filter:blur(4px);box-shadow:0 8px 22px rgba(0,0,0,.25);}
  .card h3{margin:0 0 10px;font-size:clamp(14px,1.4vw,20px);font-weight:700;}
  table.slim{width:100%;border-collapse:collapse;font-size:clamp(12px,1.1vw,15px);}
  table.slim th,table.slim td{border-bottom:1px dashed rgba(255,255,255,0.12);padding:6px 8px;text-align:left;}
  table.slim th{opacity:.8;font-weight:600;}
  .grid-6{grid-column:span 6;} .grid-12{grid-column:1/-1;}
  @media(max-width:1024px){.grid-6{grid-column:1/-1;}}
  /* Ticker */
  .ticker-wrap{position:fixed;left:0;right:0;bottom:0;height:var(--footer-h);background:linear-gradient(90deg,#0e2647,#0b1d33);display:flex;align-items:center;overflow:hidden;border-top:1px solid rgba(255,255,255,.1);}
  .ticker-label{flex:0 0 auto;padding:0 14px;font-weight:700;background:rgba(255,255,255,.06);height:100%;display:flex;align-items:center;border-right:1px solid rgba(255,255,255,.08);}
  .ticker{white-space:nowrap;will-change:transform;padding-left:100%;animation:marquee 28s linear infinite;font-size:14px;}
  @keyframes marquee{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}
</style>
</head>
<body>

<main class="container">

  <section class="card grid-6">
    <h3>🧹 Kelas Terbersih Mingguan</h3>
    <?php if($mingguan->num_rows): ?>
    <table class="slim"><tr><th>Minggu</th><th>Kelas</th><th>Catatan</th></tr>
    <?php while($r=$mingguan->fetch_assoc()): ?>
      <tr><td><?=safe($r['minggu'])?></td><td><?=safe($r['kelas'])?></td><td><?=safe($r['catatan'])?></td></tr>
    <?php endwhile; ?></table>
    <?php else: ?><div>Tiada rekod.</div><?php endif; ?>
  </section>

  <section class="card grid-6">
    <h3>🧹 Kelas Terbersih Bulanan</h3>
    <?php if($bulanan->num_rows): ?>
    <table class="slim"><tr><th>Bulan</th><th>Kelas</th><th>Catatan</th></tr>
    <?php while($r=$bulanan->fetch_assoc()): ?>
      <tr><td><?=safe($r['bulan'])?></td><td><?=safe($r['kelas'])?></td><td><?=safe($r['catatan'])?></td></tr>
    <?php endwhile; ?></table>
    <?php else: ?><div>Tiada rekod.</div><?php endif; ?>
  </section>

  <section class="card grid-6">
    <h3>😕 Kelas Kurang Ceria Mingguan</h3>
    <?php if($kurang->num_rows): ?>
    <table class="slim"><tr><th>Minggu</th><th>Kelas</th><th>Catatan</th></tr>
    <?php while($r=$kurang->fetch_assoc()): ?>
      <tr><td><?=safe($r['minggu'])?></td><td><?=safe($r['kelas'])?></td><td><?=safe($r['catatan'])?></td></tr>
    <?php endwhile; ?></table>
    <?php else: ?><div>Tiada rekod.</div><?php endif; ?>
  </section>

  <section class="card grid-6">
    <h3>👩‍🏫 Guru Kelas</h3>
    <?php if($guruKelas->num_rows): ?>
    <table class="slim"><tr><th>Kelas</th><th>Guru</th></tr>
    <?php while($r=$guruKelas->fetch_assoc()): ?>
      <tr><td><?=safe($r['kelas'])?></td><td><?=safe($r['guru'])?></td></tr>
    <?php endwhile; ?></table>
    <?php else: ?><div>Tiada rekod.</div><?php endif; ?>
  </section>

  <section class="card grid-12">
    <h3>👨‍🎓 Ketua Kelas</h3>
    <?php if($ketuaKelas->num_rows): ?>
    <table class="slim"><tr><th>Kelas</th><th>Nama Ketua</th></tr>
    <?php while($r=$ketuaKelas->fetch_assoc()): ?>
      <tr><td><?=safe($r['kelas'])?></td><td><?=safe($r['ketua'])?></td></tr>
    <?php endwhile; ?></table>
    <?php else: ?><div>Tiada rekod.</div><?php endif; ?>
  </section>

</main>

<!-- Ticker -->
<div class="ticker-wrap">
  <div class="ticker-label">KELAS</div>
  <div class="ticker"><?= safe($ticker_text) ?></div>
</div>

<script>
  const days=['Ahad','Isnin','Selasa','Rabu','Khamis','Jumaat','Sabtu'];
  const months=['Januari','Februari','Mac','April','Mei','Jun','Julai','Ogos','September','Oktober','November','Disember'];
  const pad=n=>n.toString().padStart(2,'0');
  function tick(){
    const d=new Date();
    document.getElementById('dateStr').textContent=`${days[d.getDay()]}, ${pad(d.getDate())} ${months[d.getMonth()]} ${d.getFullYear()}`;
    document.getElementById('timeStr').textContent=`${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
  }
  setInterval(tick,1000); tick();
</script>
</body>
</html>
