<?php
// index_kokurikulum.php — Dashboard Kokurikulum (MySQLi)
require_once __DIR__.'/config.php';

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

// ================== Query Data ==================
// Penyertaan
$penyertaan_rows=[];
if($res=$mysqli->query("SELECT * FROM penyertaan_kokum ORDER BY kategori ASC")){
  while($r=$res->fetch_assoc()) $penyertaan_rows[]=$r;
  $res->free();
}

// Pencapaian Kokum
$pencapaian_rows=[];
if($res=$mysqli->query("SELECT * FROM pencapaian_kokum ORDER BY tahun DESC LIMIT 10")){
  while($r=$res->fetch_assoc()) $pencapaian_rows[]=$r;
  $res->free();
}

// Jadual Aktiviti
$jadual_rows=[];
if($res=$mysqli->query("SELECT * FROM jadual_kokum ORDER BY tarikh DESC LIMIT 10")){
  while($r=$res->fetch_assoc()) $jadual_rows[]=$r;
  $res->free();
}

// KPI
$kpi_rows=[];
if($res=$mysqli->query("SELECT * FROM kpi_kokum ORDER BY tahun DESC LIMIT 5")){
  while($r=$res->fetch_assoc()) $kpi_rows[]=$r;
  $res->free();
}

// Pengumuman
$ann=[];
if($res=$mysqli->query("SELECT * FROM kokum_announcements ORDER BY tarikh DESC LIMIT 5")){
  while($r=$res->fetch_assoc()) $ann[]=$r;
  $res->free();
}

// Sekolah
$NAMA_SEKOLAH='SMK MUHIBBAH SANDAKAN';
$LOGO='logo.png';
?>
<!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 Kokurikulum</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);grid-auto-rows:minmax(120px,auto);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;display:flex;align-items:center;gap:10px;}
  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;}
  .muted{opacity:.8;}
  .grid-6{grid-column:span 6;} .grid-12{grid-column:1 / -1;}
  @media(max-width:1024px){.grid-6{grid-column:1 / -1;}}
  .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">
    
      <!-- Pengumuman -->
  <section class="card grid-6">
    <h3>📢 Pengumuman Kokum</h3>
    <?php if($ann): ?>
    <table class="slim">
      <thead><tr><th>Tajuk</th><th class="muted">Tarikh</th></tr></thead>
      <tbody>
        <?php foreach($ann as $a): ?>
        <tr><td><?= safe($a['tajuk']) ?></td><td class="muted"><?= safe($a['tarikh']) ?></td></tr>
        <?php endforeach; ?>
      </tbody>
    </table>
    <?php else: ?><div class="muted">Tiada pengumuman.</div><?php endif; ?>
  </section>
  
  <!-- Penyertaan -->
  <section class="card grid-6">
    <h3>📊 Penyertaan Murid Kokum</h3>
    <?php if($penyertaan_rows): ?>
    <table class="slim">
      <thead><tr><th>Kategori</th><th>Unit/Kelab</th><th>Bilangan</th></tr></thead>
      <tbody>
        <?php foreach($penyertaan_rows as $r): ?>
        <tr><td><?= safe($r['kategori']) ?></td><td><?= safe($r['nama']) ?></td><td><?= safe($r['bilangan']) ?></td></tr>
        <?php endforeach; ?>
      </tbody>
    </table>
    <?php else: ?><div class="muted">Tiada data penyertaan.</div><?php endif; ?>
  </section>

  <!-- Pencapaian Kokum -->
  <section class="card grid-6">
    <h3>🏆 Pencapaian Kokurikulum</h3>
    <?php if($pencapaian_rows): ?>
    <table class="slim">
      <thead><tr><th>Tahun</th><th>Acara</th><th>Pencapaian</th><th>Peringkat</th></tr></thead>
      <tbody>
        <?php foreach($pencapaian_rows as $r): ?>
        <tr><td><?= safe($r['tahun']) ?></td><td><?= safe($r['acara']) ?></td><td><?= safe($r['pencapaian']) ?></td><td><?= safe($r['peringkat']) ?></td></tr>
        <?php endforeach; ?>
      </tbody>
    </table>
    <?php else: ?><div class="muted">Tiada data pencapaian.</div><?php endif; ?>
  </section>

  <!-- Jadual Aktiviti -->
  <section class="card grid-6">
    <h3>📅 Jadual Aktiviti Kokum</h3>
    <?php if($jadual_rows): ?>
    <table class="slim">
      <thead><tr><th>Tarikh</th><th>Aktiviti</th><th>Tempat</th></tr></thead>
      <tbody>
        <?php foreach($jadual_rows as $r): ?>
        <tr><td><?= safe($r['tarikh']) ?></td><td><?= safe($r['aktiviti']) ?></td><td><?= safe($r['tempat']) ?></td></tr>
        <?php endforeach; ?>
      </tbody>
    </table>
    <?php else: ?><div class="muted">Tiada jadual aktiviti.</div><?php endif; ?>
  </section>

  <!-- KPI Kokum -->
  <section class="card grid-6">
    <h3>✅ KPI Kokurikulum</h3>
    <?php if($kpi_rows): ?>
    <table class="slim">
      <thead><tr><th>Tahun</th><th>Sasaran %</th><th>Pencapaian %</th><th>Status</th></tr></thead>
      <tbody>
        <?php foreach($kpi_rows as $r): ?>
        <tr>
          <td><?= safe($r['tahun']) ?></td>
          <td><?= safe($r['sasaran']) ?>%</td>
          <td><?= safe($r['pencapaian']) ?>%</td>
          <td><?= ($r['pencapaian']>=$r['sasaran']?'✅ Tercapai':'❌ Belum') ?></td>
        </tr>
        <?php endforeach; ?>
      </tbody>
    </table>
    <?php else: ?><div class="muted">Tiada data KPI.</div><?php endif; ?>
  </section>

</main>

<div class="ticker-wrap">
  <div class="ticker-label">KOKUM</div>
  <div class="ticker">Selamat datang ke Dashboard Kokurikulum.</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>
