<?php
/**
 * SisPen Snesaka - Header Template Siswa (tanpa sidebar)
 */
if (!isset($pageTitle)) $pageTitle = 'Portal Siswa';
$B = BASE_URL;
$pengaturan = getPengaturan();
?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= htmlspecialchars($pageTitle) ?> - SisPen Snesaka</title>
  <link rel="stylesheet" href="<?= $B ?>/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body style="background:var(--bg);">

<!-- TOPBAR SISWA -->
<header style="background:linear-gradient(135deg,#0f2d4e,#1a4a7a,#1e5a96);height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:100;box-shadow:0 2px 20px rgba(15,45,78,.35);">
  <!-- Kiri: Brand -->
  <div style="display:flex;align-items:center;gap:12px;">
    <div style="width:34px;height:34px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#0f2d4e;">S</div>
    <div>
      <div style="font-size:14px;font-weight:700;color:#fff;line-height:1.2;">SisPen Snesaka</div>
      <div style="font-size:10px;color:rgba(255,255,255,.5);">Portal Siswa</div>
    </div>
  </div>

  <!-- Kanan: Info siswa + logout -->
  <div style="display:flex;align-items:center;gap:12px;">
    <!-- Jam -->
    <div style="text-align:right;display:none;" class="topbar-datetime" id="clockBox">
      <div style="font-size:12px;font-weight:700;color:rgba(255,255,255,.9);" id="tb-time">—</div>
    </div>

    <!-- Badge siswa -->
    <div style="display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:30px;padding:5px 12px 5px 5px;">
      <div style="width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#e8a020,#f5c354);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#0f2d4e;">
        <?= strtoupper(substr($_SESSION['nama'] ?? 'S', 0, 1)) ?>
      </div>
      <div>
        <div style="font-size:12px;font-weight:700;color:#fff;line-height:1.2;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
          <?= htmlspecialchars($_SESSION['nama'] ?? '') ?>
        </div>
        <div style="font-size:10px;color:rgba(255,255,255,.55);">Siswa</div>
      </div>
    </div>

    <!-- Logout -->
    <a href="<?= $B ?>/logout.php"
       onclick="return confirm('Yakin ingin keluar?')"
       style="display:flex;align-items:center;gap:6px;padding:0 12px;height:32px;border-radius:8px;background:rgba(220,38,38,.25);border:1px solid rgba(220,38,38,.4);color:#fca5a5;text-decoration:none;font-size:12px;font-weight:600;"
       onmouseover="this.style.background='rgba(220,38,38,.5)';this.style.color='#fff';"
       onmouseout="this.style.background='rgba(220,38,38,.25)';this.style.color='#fca5a5';">
      <i class="fas fa-sign-out-alt"></i>
      <span>Logout</span>
    </a>
  </div>
</header>

<!-- Garis aksen emas -->
<div style="height:2px;background:linear-gradient(90deg,transparent,#e8a020 30%,#f5c354 50%,#e8a020 70%,transparent);"></div>

<main style="max-width:1100px;margin:0 auto;padding:24px 16px;">

<?php
// Flash message
$flash = getFlash();
if ($flash): ?>
<div class="alert alert-<?= $flash['type'] ?>" style="margin-bottom:16px;">
  <i class="fas <?= $flash['type']==='success'?'fa-check-circle':'fa-exclamation-circle' ?>"></i>
  <?= htmlspecialchars($flash['message']) ?>
</div>
<?php endif; ?>

<script>
(function(){
  var box = document.getElementById('clockBox');
  if(box) box.style.display='block';
  function pad(n){ return n<10?'0'+n:n; }
  function tick(){
    var d=new Date();
    var te=document.getElementById('tb-time');
    if(te) te.textContent=pad(d.getHours())+':'+pad(d.getMinutes())+':'+pad(d.getSeconds());
  }
  tick(); setInterval(tick,1000);
})();
</script>
