<?php
require_once 'db.php';
require_once 'session_helper.php';
require_once 'background_helper.php';
require_login();

$user      = get_current_user_data();
$role      = strtolower($user['role'] ?? '');
$user_id   = $user['id'] ?? 0;
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Siswa+ | Fingerprint Login</title>
<script src="https://unpkg.com/lucide@latest"></script>

<style>
* { box-sizing:border-box; font-family:'Poppins',sans-serif; }

html, body {
  height:100%;
  overflow:hidden; /* ⛔ MATIKAN SCROLL */
}

body {
  margin:0;
  background:#fff;
  color:#000;
  display:flex;
  justify-content:center;
}

/* ===== APP CONTAINER (FIX 1 LAYAR) ===== */
.app {
  height:100svh;
  width:100%;
  max-width:420px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* ===== HEADER ===== */
.header {
  width:100%;
  padding:20px 16px 0;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.time {
  font-size:60px;
  line-height:0.8;
  font-weight:700;
  color:#b48efc;
  white-space:pre-line;
}

.date {
  margin-top:8px;
  font-size:14px;
}

.location {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-size:14px;
  color:#333;
}
.location svg { width:26px; height:26px; color:#6dd19c; }
.location span { margin-top:4px; text-align:right; }

/* ===== LOGO ===== */
.logo {
  text-align:center;
  margin:10px 0;
}
.logo img {
  width:min(60vw,220px);
  height:auto;
}

/* ===== MENU GRID ===== */
.menu {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding:10px;
  width:100%;
  max-width:360px;
  margin:0 auto;
}

.menu-item {
  text-align:center;
  color:#333;
  font-size:12px;
  user-select:none;
  transition:transform 0.25s;
}
.menu-item:hover { transform:translateY(-3px); }

.menu-item .icon {
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 6px;
  box-shadow:0 3px 6px rgba(0,0,0,0.15);
}

.menu-item svg {
  width:22px;
  height:22px;
  color:#fff;
}

/* WARNA ICON */
.button-1 .icon { background:#8fcbee; }
.button-2 .icon { background:#fca8fe; }
.button-3 .icon { background:#c4acfe; }
.button-4 .icon { background:#72dad2; }
.button-5 .icon { background:#99b5f9; }
.button-6 .icon { background:#7be48a; }
.button-7 .icon { background:#ffc433; }
.button-8 .icon { background:#ff8b36; }

/* ===== FINGERPRINT ===== */
.fingerprint {
  text-align:center;
  margin:10px 0 16px;
}

.fingerprint button {
  background:none;
  border:none;
  cursor:pointer;
  transition:transform 0.2s;
}
.fingerprint button:hover { transform:scale(1.08); }

.fingerprint svg {
  width:42px;
  height:42px;
  color:#b48efc;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  animation:pulse 1.5s infinite;
}

.fingerprint p {
  margin-top:6px;
  font-size:12px;
  font-weight:500;
}

@keyframes pulse {
  0% { transform:scale(1); opacity:1; }
  50% { transform:scale(1.15); opacity:0.7; }
  100% { transform:scale(1); opacity:1; }
}

/* ===== SAFETY NET LAYAR PENDEK ===== */
@media (max-height:700px) {
  .time { font-size:48px; }
  .logo img { width:180px; }
  .menu-item .icon { width:40px; height:40px; }
}
</style>
</head>

<body>
<div class="app">

  <div class="header">
    
    <div>
  <div id="time" class="time" style="position: relative; top: 50px;">00\n00</div>
  <div class="date" style="position: relative; top: 50px;">
    <span id="day">Senin</span><br>
    <span id="date">1 Januari 2025</span>
  </div>
</div>
    <div class="location" style="position: relative; top: 50px; left: -2px;">
    <i data-lucide="map-pin"></i>
    <span id="locationText">Mencari lokasi...</span>
</div>
  </div>

  <div class="logo">
    <img src="icon-512-putih.png" alt="Siswa+">
  </div>

  <div class="menu">
    <div class="menu-item button-1"><div class="icon"><i data-lucide="scan-face"></i></div><div>Absensi</div></div>
    <div class="menu-item button-2"><div class="icon"><i data-lucide="file-text"></i></div><div>Riwayat Izin</div></div>
    <div class="menu-item button-3"><div class="icon"><i data-lucide="book-open"></i></div><div>Perpustakaan</div></div>
    <div class="menu-item button-4"><div class="icon"><i data-lucide="alert-triangle"></i></div><div>Kirim SOS</div></div>
    <div class="menu-item button-5"><div class="icon"><i data-lucide="bot"></i></div><div>AI Sekolah</div></div>
    <div class="menu-item button-6"><div class="icon"><i data-lucide="message-circle"></i></div><div>Chat</div></div>
    <div class="menu-item button-7"><div class="icon"><i data-lucide="image"></i></div><div>Galeri Foto</div></div>
    <div class="menu-item button-8"><div class="icon"><i data-lucide="video"></i></div><div>Galeri Video</div></div>
  </div>

  <div class="fingerprint">
    <button id="fingerBtn">
      <i data-lucide="fingerprint"></i>
    </button>
    <p>Masuk dengan biometri</p>
  </div>

</div>

<script>
lucide.createIcons();

/* JAM */
function updateTime() {
  const now = new Date();
  const h = String(now.getHours()).padStart(2,'0');
  const m = String(now.getMinutes()).padStart(2,'0');
  document.getElementById('time').textContent = `${h}\n${m}`;
}
setInterval(updateTime,1000);
updateTime();

/* TANGGAL */
const dayNames=["Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"];
const monthNames=["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
const now=new Date();
document.getElementById('day').textContent=dayNames[now.getDay()];
document.getElementById('date').textContent=`${now.getDate()} ${monthNames[now.getMonth()]} ${now.getFullYear()}`;

/* LOKASI */
function getLocation(){
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(async pos=>{
      try{
        const res=await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${pos.coords.latitude}&lon=${pos.coords.longitude}&zoom=10`);
        const data=await res.json();
        const a=data.address||{};
        document.getElementById('locationText').textContent=a.city||a.town||a.village||a.state||'Lokasi tidak diketahui';
      }catch{
        document.getElementById('locationText').textContent="Gagal memuat lokasi";
      }
    },()=>document.getElementById('locationText').textContent="Tidak diizinkan");
  }
}
getLocation();

/* MENU ANIM */
document.querySelectorAll('.menu-item').forEach(item=>{
  item.addEventListener('click',()=>{
    const icon=item.querySelector('.icon');
    icon.style.transform='scale(0.9)';
    setTimeout(()=>icon.style.transform='scale(1)',200);
  });
});

/* FINGERPRINT */
document.getElementById('fingerBtn').addEventListener('click',()=>{
  window.location.href='home.php';
});
</script>

<script src="/location_tracker.js"></script>
<script>
window.CURRENT_USER_ID = <?= json_encode($user_id) ?>;
document.addEventListener('DOMContentLoaded',()=>{
  if(CURRENT_USER_ID && typeof initializeLocationTracking==='function'){
    initializeLocationTracking(CURRENT_USER_ID);
  }
});
</script>

</body>
</html>
