<?php
// index_pelajar.php — Dashboard Pencapaian Pelajar
require_once __DIR__.'/config.php';

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

/* =====================================================
   1. Akademik: 3 terbaik setiap tingkatan & keseluruhan
===================================================== */
$akademik = ['T1'=>[],'T2'=>[],'T3'=>[],'T4'=>[],'T5'=>[],'T6'=>[]];
$akademik_all=[];
$sql="SELECT * FROM pelajar ORDER BY gpa DESC";
if($res=$mysqli->query($sql)){
  while($r=$res->fetch_assoc()){
    if(isset($akademik[$r['tingkatan']]) && count($akademik[$r['tingkatan']])<3)
      $akademik[$r['tingkatan']][]=$r;
    if(count($akademik_all)<3) $akademik_all[]=$r;
  }
  $res->free();
}

/* =====================================================
   2. Kokurikulum: 3 terbaik setiap tingkatan & keseluruhan
===================================================== */
$koku = ['T1'=>[],'T2'=>[],'T3'=>[],'T4'=>[],'T5'=>[],'T6'=>[]];
$koku_all=[];
$sql2="SELECT * FROM pelajar ORDER BY markah_koku DESC";
if($res=$mysqli->query($sql2)){
  while($r=$res->fetch_assoc()){
    if(isset($koku[$r['tingkatan']]) && count($koku[$r['tingkatan']])<3)
      $koku[$r['tingkatan']][]=$r;
    if(count($koku_all)<3) $koku_all[]=$r;
  }
  $res->free();
}

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

// Teks ticker
$ticker_text="Selamat datang ke Dashboard Pencapaian Pelajar 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 Pelajar</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">
    
      <!-- 3 Terbaik Keseluruhan -->
  <section class="card grid-6">
    <h3>🏆 3 Pelajar Terbaik Keseluruhan (Akademik)</h3>
    <?php if($akademik_all): ?>
    <table class="slim">
      <thead><tr><th>Nama</th><th>Tingkatan</th><th>Kelas</th><th>GPA</th></tr></thead>
      <tbody>
        <?php foreach($akademik_all as $p): ?>
          <tr><td><?=safe($p['nama'])?></td><td><?=safe($p['tingkatan'])?></td><td><?=safe($p['kelas'])?></td><td><?=safe($p['gpa'])?></td></tr>
        <?php endforeach; ?>
      </tbody>
    </table>
    <?php else: ?><div>Tiada rekod.</div><?php endif; ?>
    </section>
    
      <!-- 3 Terbaik Keseluruhan -->
  <section class="card grid-6">
    <h3 style="margin-top:20px;">🏆 3 Pelajar Terbaik Keseluruhan (Kokurikulum)</h3>
    <?php if($koku_all): ?>
    <table class="slim">
      <thead><tr><th>Nama</th><th>Tingkatan</th><th>Kelas</th><th>Markah</th><th>Sukan</th><th>Pencapaian</th><th>Peringkat</th></tr></thead>
      <tbody>
        <?php foreach($koku_all as $p): ?>
          <tr>
            <td><?=safe($p['nama'])?></td>
            <td><?=safe($p['tingkatan'])?></td>
            <td><?=safe($p['kelas'])?></td>
            <td><?=safe($p['markah_koku'])?></td>
            <td><?=safe($p['jenis_sukan'])?></td>
            <td><?=safe($p['pencapaian'])?></td>
            <td><?=safe($p['peringkat'])?></td>
          </tr>
        <?php endforeach; ?>
      </tbody>
    </table>
    <?php else: ?><div>Tiada rekod.</div><?php endif; ?>
  </section>
  
  <!-- Akademik -->
  <section class="card grid-6">
    <h3>🎓 Akademik — 3 Terbaik Setiap Tingkatan</h3>
    <?php foreach($akademik as $ting=>$arr): ?>
      <h4>Tingkatan <?=$ting?></h4>
      <?php if($arr): ?>
      <table class="slim">
        <thead><tr><th>Nama</th><th>Kelas</th><th>GPA</th></tr></thead>
        <tbody>
          <?php foreach($arr as $p): ?>
            <tr><td><?=safe($p['nama'])?></td><td><?=safe($p['kelas'])?></td><td><?=safe($p['gpa'])?></td></tr>
          <?php endforeach; ?>
        </tbody>
      </table>
      <?php else: ?><div>Tiada rekod.</div><?php endif; ?>
    <?php endforeach; ?>
  </section>

  <!-- Kokurikulum -->
  <section class="card grid-6">
    <h3>⚽ Kokurikulum — 3 Terbaik Setiap Tingkatan</h3>
    <?php foreach($koku as $ting=>$arr): ?>
      <h4>Tingkatan <?=$ting?></h4>
      <?php if($arr): ?>
      <table class="slim">
        <thead><tr><th>Nama</th><th>Kelas</th><th>Markah</th><th>Sukan</th><th>Pencapaian</th><th>Peringkat</th></tr></thead>
        <tbody>
          <?php foreach($arr as $p): ?>
            <tr>
              <td><?=safe($p['nama'])?></td>
              <td><?=safe($p['kelas'])?></td>
              <td><?=safe($p['markah_koku'])?></td>
              <td><?=safe($p['jenis_sukan'])?></td>
              <td><?=safe($p['pencapaian'])?></td>
              <td><?=safe($p['peringkat'])?></td>
            </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
      <?php else: ?><div>Tiada rekod.</div><?php endif; ?>
    <?php endforeach; ?>
  </section>

</main>

<!-- Ticker -->
<div class="ticker-wrap">
  <div class="ticker-label">PELAJAR</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>
