<?php
// index_guru.php — Dashboard Guru (paparan + jam/tarikh + ticker)
require_once __DIR__.'/config.php';

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

// ================== Statistik asas ==================
$totalGuru=0; $totalLuar=0; $totalCuti=0;

if($res=$mysqli->query("SELECT COUNT(*) as c FROM guru")){
    $totalGuru=$res->fetch_assoc()['c'];
    $res->free();
}

if($res=$mysqli->query("SELECT COUNT(*) as c 
                        FROM guru_keberadaan 
                        WHERE status='Luar Sekolah'")){
    $totalLuar=$res->fetch_assoc()['c'];
    $res->free();
}

if($res=$mysqli->query("SELECT COUNT(*) as c 
                        FROM guru_cuti 
                        WHERE CURDATE() BETWEEN tarikh_mula AND tarikh_akhir")){
    $totalCuti=$res->fetch_assoc()['c'];
    $res->free();
}

// ================== Data paparan ==================
$luar_rows=$mysqli->query("SELECT g.nama,k.sebab,k.tempoh
                           FROM guru_keberadaan k
                           JOIN guru g ON g.id=k.guru_id
                           WHERE k.status='Luar Sekolah'
                           ORDER BY k.id DESC LIMIT 10");

$cuti_rows=$mysqli->query("SELECT g.nama,c.sebab,c.tarikh_mula,c.tarikh_akhir
                           FROM guru_cuti c
                           JOIN guru g ON g.id=c.guru_id
                           WHERE CURDATE() BETWEEN c.tarikh_mula AND c.tarikh_akhir
                           ORDER BY c.tarikh_mula DESC LIMIT 10");

$mingguan_rows=$mysqli->query("SELECT g.nama,t.minggu
                               FROM guru_tugas t
                               JOIN guru g ON g.id=t.guru_id
                               WHERE t.jenis='Mingguan'
                               ORDER BY t.minggu DESC LIMIT 5");

$khas_rows=$mysqli->query("SELECT g.nama,t.keterangan,t.minggu
                           FROM guru_tugas t
                           JOIN guru g ON g.id=t.guru_id
                           WHERE t.jenis='Khas'
                           ORDER BY t.id DESC LIMIT 10");

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

// Teks ticker (boleh ambil dari DB jika mahu dinamik)
$ticker_text="Selamat datang ke Dashboard Guru 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 Guru</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">
  <!-- Statistik Guru -->
  <section class="card grid-6">
    <h3>👨‍🏫 Statistik Guru</h3>
    Jumlah Guru: <?= safe($totalGuru) ?> |
    Guru di Luar Sekolah: <?= safe($totalLuar) ?> |
    Guru Cuti (Aktif): <?= safe($totalCuti) ?>
  </section>

  <!-- Guru Luar -->
  <section class="card grid-6">
    <h3>🚪 Guru Tiada di Sekolah</h3>
    <?php if($luar_rows->num_rows): ?>
    <table class="slim"><tr><th>Nama</th><th>Sebab</th><th>Tempoh</th></tr>
    <?php while($r=$luar_rows->fetch_assoc()): ?>
      <tr><td><?= safe($r['nama']) ?></td><td><?= safe($r['sebab']) ?></td><td><?= safe($r['tempoh']) ?></td></tr>
    <?php endwhile; ?></table>
    <?php else: ?><div>Tiada rekod.</div><?php endif; ?>
  </section>

  <!-- Guru Cuti -->
  <section class="card grid-6">
    <h3>🏖️ Guru Cuti (Aktif)</h3>
    <?php if($cuti_rows->num_rows): ?>
    <table class="slim"><tr><th>Nama</th><th>Sebab</th><th>Mula</th><th>Akhir</th></tr>
    <?php while($r=$cuti_rows->fetch_assoc()): ?>
      <tr><td><?= safe($r['nama']) ?></td><td><?= safe($r['sebab']) ?></td><td><?= safe($r['tarikh_mula']) ?></td><td><?= safe($r['tarikh_akhir']) ?></td></tr>
    <?php endwhile; ?></table>
    <?php else: ?><div>Tiada rekod cuti aktif.</div><?php endif; ?>
  </section>

  <!-- Tugasan Mingguan -->
  <section class="card grid-6">
    <h3>📅 Guru Bertugas Mingguan</h3>
    <?php if($mingguan_rows->num_rows): ?>
    <table class="slim"><tr><th>Minggu</th><th>Nama</th></tr>
    <?php while($r=$mingguan_rows->fetch_assoc()): ?>
      <tr><td><?= safe($r['minggu']) ?></td><td><?= safe($r['nama']) ?></td></tr>
    <?php endwhile; ?></table>
    <?php else: ?><div>Tiada rekod.</div><?php endif; ?>
  </section>

  <!-- Tugasan Khas -->
  <section class="card grid-6">
    <h3>⭐ Guru Bertugas Khas</h3>
    <?php if($khas_rows->num_rows): ?>
    <table class="slim"><tr><th>Nama</th><th>Keterangan</th><th>Minggu</th></tr>
    <?php while($r=$khas_rows->fetch_assoc()): ?>
      <tr><td><?= safe($r['nama']) ?></td><td><?= safe($r['keterangan']) ?></td><td><?= safe($r['minggu']) ?></td></tr>
    <?php endwhile; ?></table>
    <?php else: ?><div>Tiada rekod.</div><?php endif; ?>
  </section>
</main>

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