<?php
session_start();
if (!isset($_SESSION['username']) || $_SESSION['role'] !== 'wali_kelas') {
    header("Location: index.php");
    exit;
}

// Ambil data wali kelas untuk menentukan kelas yang diampu
include 'config.php';
$username = $_SESSION['username'];

// Inisialisasi variabel default
$kelas_diampu = '';
$nama_wali = $_SESSION['username'];
$wali_kelas_id = 0;

// Query dengan penanganan error
$qWaliKelas = mysqli_query($conn, "SELECT id, kelas, nama_wali FROM wali_kelas WHERE nip_wali='$username' LIMIT 1");

if ($qWaliKelas && mysqli_num_rows($qWaliKelas) > 0) {
    $wali_kelas = mysqli_fetch_assoc($qWaliKelas);
    $kelas_diampu = $wali_kelas['kelas'] ?? '';
    $nama_wali = $wali_kelas['nama_wali'] ?? $_SESSION['username'];
    $wali_kelas_id = $wali_kelas['id'] ?? 0;
} else {
    // Jika tidak ditemukan, coba alternatif query
    $qWaliKelas2 = mysqli_query($conn, "SELECT id, kelas, nama_wali FROM wali_kelas WHERE username='$username' LIMIT 1");
    if ($qWaliKelas2 && mysqli_num_rows($qWaliKelas2) > 0) {
        $wali_kelas = mysqli_fetch_assoc($qWaliKelas2);
        $kelas_diampu = $wali_kelas['kelas'] ?? '';
        $nama_wali = $wali_kelas['nama_wali'] ?? $_SESSION['username'];
        $wali_kelas_id = $wali_kelas['id'] ?? 0;
    }
}

// Hitung jumlah ajuan izin yang pending
$total_pending = 0;
if (!empty($kelas_diampu)) {
    $qAjuanIzin = mysqli_query($conn, "
        SELECT COUNT(*) as total_pending 
        FROM perizinan p 
        JOIN siswa s ON p.siswa_id = s.id 
        WHERE s.kelas = '$kelas_diampu' 
        AND p.status = 'pending'
        AND p.tanggal_izin >= CURDATE()
    ");
    if ($qAjuanIzin) {
        $ajuan_izin = mysqli_fetch_assoc($qAjuanIzin);
        $total_pending = $ajuan_izin['total_pending'] ?? 0;
    }
}

// Hitung jumlah pelanggaran yang dialihkan ke wali kelas ini
$total_dialihkan = 0;
if ($wali_kelas_id > 0) {
    $qDialihkan = mysqli_query($conn, "
        SELECT COUNT(*) as total 
        FROM pelanggaran 
        WHERE wali_kelas_id = $wali_kelas_id 
        AND status_alihkan = 'ya'
        AND status = 'Aktif'
    ");
    if ($qDialihkan) {
        $dialihkan = mysqli_fetch_assoc($qDialihkan);
        $total_dialihkan = $dialihkan['total'] ?? 0;
    }
}
?>
<!DOCTYPE html>
<html lang="id" class="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard Wali Kelas - Sistem Absensi QR</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary: #6366f1;
      --primary-dark: #4f46e5;
      --primary-light: #8b5cf6;
      --secondary: #ec4899;
      --accent: #f59e0b;
      --success: #10b981;
      --warning: #f59e0b;
      --danger: #ef4444;
      --info: #3b82f6;
      --dark: #1f2937;
      --darker: #111827;
      --light: #f8fafc;
      --gray: #6b7280;
      --gray-light: #e5e7eb;
      --card-bg: #ffffff;
      --card-bg-dark: #374151;
      --text-primary: #1f2937;
      --text-primary-dark: #f9fafb;
      --text-secondary: #6b7280;
      --text-secondary-dark: #d1d5db;
      --border-radius: 16px;
      --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
      --shadow-hover: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      --shadow-dark: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
      --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      --gradient-accent: linear-gradient(135deg, #ec4899 0%, #f59e0b 100%);
      --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
      --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #fd7e14 100%);
      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dark {
      --card-bg: var(--card-bg-dark);
      --text-primary: var(--text-primary-dark);
      --text-secondary: var(--text-secondary-dark);
      --shadow: var(--shadow-dark);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
      min-height: 100vh;
      color: var(--text-primary);
      line-height: 1.6;
      transition: var(--transition);
    }

    .dark body {
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    }

    /* Header Styles */
    .header {
      background: var(--gradient-primary);
      color: white;
      padding: 1.5rem 2rem;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }

    .header::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
      border-radius: 50%;
    }

    .header-content {
      position: relative;
      z-index: 2;
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo-section h1 {
      font-size: 1.75rem;
      font-weight: 700;
      margin-bottom: 0.25rem;
    }

    .logo-section .subtitle {
      font-size: 0.9rem;
      opacity: 0.9;
      font-weight: 400;
    }

    .user-info {
      background: rgba(255, 255, 255, 0.15);
      padding: 0.75rem 1.5rem;
      border-radius: var(--border-radius);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
    }

    .user-details .welcome {
      font-weight: 500;
      margin-bottom: 0.25rem;
    }

    .user-details .role {
      font-size: 0.85rem;
      opacity: 0.8;
    }

    .kelas-info {
      background: rgba(255, 255, 255, 0.3);
      padding: 0.4rem 0.8rem;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 600;
      margin-top: 0.25rem;
    }

    /* Theme Toggle */
    .theme-toggle {
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      padding: 0.5rem;
      border-radius: 50%;
      cursor: pointer;
      transition: var(--transition);
      backdrop-filter: blur(10px);
    }

    .theme-toggle:hover {
      background: rgba(255, 255, 255, 0.25);
      transform: rotate(45deg);
    }

    /* Main Content */
    .dashboard-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 2rem;
    }

    .section-title {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 1.5rem;
      text-align: center;
      position: relative;
    }

    .section-title::after {
      content: '';
      display: block;
      width: 60px;
      height: 3px;
      background: var(--primary);
      margin: 0.5rem auto;
      border-radius: 2px;
    }

    /* Stats Grid */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .stat-card {
      background: var(--card-bg);
      border-radius: var(--border-radius);
      padding: 1.5rem;
      box-shadow: var(--shadow);
      transition: var(--transition);
      border: 1px solid rgba(0,0,0,0.05);
      position: relative;
      overflow: hidden;
    }

    .stat-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: var(--stat-color, var(--primary));
    }

    .stat-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-hover);
    }

    .stat-icon {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: white;
      background: var(--stat-color, var(--primary));
      margin-bottom: 1rem;
    }

    .stat-number {
      font-size: 2rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 0.25rem;
    }

    .stat-label {
      font-size: 0.9rem;
      color: var(--text-secondary);
    }

    /* Menu Grid */
    .menu-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .menu-card {
      background: var(--card-bg);
      border-radius: var(--border-radius);
      box-shadow: var(--shadow);
      transition: var(--transition);
      overflow: hidden;
      border: 1px solid rgba(0,0,0,0.05);
      position: relative;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .dark .menu-card {
      border: 1px solid rgba(255,255,255,0.1);
    }

    .menu-card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: var(--shadow-hover);
    }

    .menu-card:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: var(--card-color, var(--primary));
    }

    .card-content {
      padding: 1.5rem;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    .card-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .card-icon {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: white;
      background: var(--card-color, var(--primary));
      flex-shrink: 0;
    }

    .card-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.25rem;
    }

    .card-desc {
      font-size: 0.875rem;
      color: var(--text-secondary);
      line-height: 1.5;
      margin-bottom: 1rem;
      flex-grow: 1;
    }

    .card-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      width: 100%;
      padding: 0.75rem 1rem;
      background: var(--card-color, var(--primary));
      color: white;
      text-decoration: none;
      border-radius: 10px;
      font-weight: 500;
      font-size: 0.9rem;
      transition: var(--transition);
      border: none;
      cursor: pointer;
      margin-top: auto;
    }

    .card-button:hover {
      background: var(--card-dark, var(--primary-dark));
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

    /* Footer */
    .footer {
      background: var(--dark);
      color: white;
      text-align: center;
      padding: 1.5rem;
      margin-top: 3rem;
    }

    .footer-content {
      max-width: 1400px;
      margin: 0 auto;
    }

    .version {
      font-size: 0.875rem;
      opacity: 0.8;
    }

    .badge-notif {
      background: var(--danger);
      color: white;
      padding: 0.25rem 0.5rem;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 600;
      animation: pulse 2s infinite;
      margin-left: 0.5rem;
    }

    /* Badge khusus untuk notifikasi pelanggaran */
    .badge-warning {
      background: var(--warning);
      color: white;
      padding: 0.25rem 0.5rem;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 600;
      margin-left: 0.5rem;
    }

    /* Responsive Design */
    @media (max-width: 1024px) {
      .menu-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      }
    }

    @media (max-width: 768px) {
      .header-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
      }

      .user-info {
        width: 100%;
        max-width: 300px;
      }

      .dashboard-container {
        padding: 1.5rem;
      }

      .menu-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1rem;
      }

      .stats-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 480px) {
      .header {
        padding: 1rem;
      }

      .dashboard-container {
        padding: 1rem;
      }

      .menu-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Loading Animation */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .fade-in-up {
      animation: fadeInUp 0.6s ease-out;
    }

    @keyframes pulse {
      0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
    }
  </style>
</head>
<body>
  <!-- Header -->
  <header class="header">
    <div class="header-content">
      <div class="logo-section">
        <h1>Dashboard Wali Kelas</h1>
        <div class="subtitle">Sistem Absensi QR Modern</div>
      </div>
      <div class="user-info">
        <div class="user-avatar">
          <i class="fas fa-chalkboard-teacher"></i>
        </div>
        <div class="user-details">
          <div class="welcome">Halo, <?php echo htmlspecialchars($nama_wali); ?></div>
          <div class="role">Wali Kelas <?php echo htmlspecialchars($kelas_diampu); ?></div>
          <div class="kelas-info"><?php echo htmlspecialchars($kelas_diampu); ?></div>
        </div>
        <button class="theme-toggle" onclick="toggleTheme()">
          <i class="fas fa-moon"></i>
        </button>
      </div>
    </div>
  </header>

  <!-- Main Content -->
  <div class="dashboard-container">
    <!-- Statistik Ringkas -->
    <div class="stats-grid">
      <div class="stat-card fade-in-up" style="--stat-color: #10b981;">
        <div class="stat-icon">
          <i class="fas fa-qrcode"></i>
        </div>
        <div class="stat-number"><?php echo date('d/m/Y'); ?></div>
        <div class="stat-label">Tanggal Hari Ini</div>
      </div>
      
      <div class="stat-card fade-in-up" style="--stat-color: #fd7e14;">
        <div class="stat-icon">
          <i class="fas fa-bell"></i>
        </div>
        <div class="stat-number"><?php echo $total_pending; ?></div>
        <div class="stat-label">Ajuan Izin Pending</div>
      </div>
      
      <div class="stat-card fade-in-up" style="--stat-color: #ef4444;">
        <div class="stat-icon">
          <i class="fas fa-exclamation-triangle"></i>
        </div>
        <div class="stat-number"><?php echo $total_dialihkan; ?></div>
        <div class="stat-label">Pelanggaran Dialihkan</div>
      </div>
    </div>

    <!-- Menu Utama Wali Kelas -->
    <h2 class="section-title">Menu Wali Kelas</h2>
    
    <div class="menu-grid">
      <!-- Scan QR -->
      <div class="menu-card fade-in-up" style="--card-color: #10b981; --card-dark: #059669;">
        <div class="card-content">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-qrcode"></i>
            </div>
            <div>
              <div class="card-title">Scan QR</div>
            </div>
          </div>
          <div class="card-desc">Scan QR Code untuk absensi siswa</div>
          <a href="scan_wali_kelas.php" class="card-button">
            <i class="fas fa-arrow-right"></i>
            Akses Menu
          </a>
        </div>
      </div>

      <!-- Siswa Belum Hadir -->
      <div class="menu-card fade-in-up" style="--card-color: #fd7e14; --card-dark: #e8590c;">
        <div class="card-content">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-user-clock"></i>
            </div>
            <div>
              <div class="card-title">Siswa Belum Hadir</div>
            </div>
          </div>
          <div class="card-desc">Lihat siswa yang belum absen hari ini</div>
          <a href="belum_absensi_kelas.php" class="card-button">
            <i class="fas fa-arrow-right"></i>
            Akses Menu
          </a>
        </div>
      </div>

      <!-- Isi S/I/A -->
      <div class="menu-card fade-in-up" style="--card-color: #0dcaf0; --card-dark: #0aa2c0;">
        <div class="card-content">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-clipboard-check"></i>
            </div>
            <div>
              <div class="card-title">Isi S/I/A</div>
            </div>
          </div>
          <div class="card-desc">Input Sakit, Izin, Alpha untuk siswa</div>
          <a href="absensi_kelas.php" class="card-button">
            <i class="fas fa-arrow-right"></i>
            Akses Menu
          </a>
        </div>
      </div>

      <!-- Daftar Ajuan Izin -->
      <div class="menu-card fade-in-up" style="--card-color: #8b5cf6; --card-dark: #7c3aed;">
        <div class="card-content">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-envelope-open-text"></i>
            </div>
            <div>
              <div class="card-title">Daftar Ajuan Izin</div>
              <?php if ($total_pending > 0): ?>
                <span class="badge-notif"><?php echo $total_pending; ?></span>
              <?php endif; ?>
            </div>
          </div>
          <div class="card-desc">Kelola pengajuan izin dari siswa/wali murid</div>
          <a href="daftar_ajuan_izin.php" class="card-button">
            <i class="fas fa-arrow-right"></i>
            Akses Menu
          </a>
        </div>
      </div>

      <!-- Rekap Bulanan Siswa -->
      <div class="menu-card fade-in-up" style="--card-color: #6f42c1; --card-dark: #5a32a3;">
        <div class="card-content">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-calendar-days"></i>
            </div>
            <div>
              <div class="card-title">Rekap Bulanan Siswa</div>
            </div>
          </div>
          <div class="card-desc">Rekap absensi siswa per bulan</div>
          <a href="rekap_kelas.php" class="card-button">
            <i class="fas fa-arrow-right"></i>
            Akses Menu
          </a>
        </div>
      </div>

      <!-- Prosentase -->
      <div class="menu-card fade-in-up" style="--card-color: #f72585; --card-dark: #b5179e;">
        <div class="card-content">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-chart-pie"></i>
            </div>
            <div>
              <div class="card-title">Prosentase</div>
            </div>
          </div>
          <div class="card-desc">Statistik persentase kehadiran</div>
          <a href="hadir_kelas.php" class="card-button">
            <i class="fas fa-arrow-right"></i>
            Akses Menu
          </a>
        </div>
      </div>

      <!-- Live Chat Wali Murid -->
      <div class="menu-card fade-in-up" style="--card-color: #25d366; --card-dark: #128c7e;">
        <div class="card-content">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-comments"></i>
            </div>
            <div>
              <div class="card-title">Live Chat Wali Murid</div>
            </div>
          </div>
          <div class="card-desc">Komunikasi langsung dengan orang tua/wali murid</div>
          <a href="chat_wali_murid.php" class="card-button">
            <i class="fas fa-arrow-right"></i>
            Akses Menu
          </a>
        </div>
      </div>

      <!-- RIWAYAT PELANGGARAN (Menggantikan Input Pelanggaran) -->
      <div class="menu-card fade-in-up" style="--card-color: #ef4444; --card-dark: #dc2626;">
        <div class="card-content">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-history"></i>
            </div>
            <div>
              <div class="card-title">Riwayat Pelanggaran</div>
            </div>
          </div>
          <div class="card-desc">Lihat riwayat pelanggaran anak didik</div>
          <a href="riwayat_pelanggaran_wali.php" class="card-button">
            <i class="fas fa-arrow-right"></i>
            Akses Menu
          </a>
        </div>
      </div>

      <!-- PELANGGARAN DIALIHKAN (Menu Baru) -->
      <div class="menu-card fade-in-up" style="--card-color: #f59e0b; --card-dark: #e06b0c;">
        <div class="card-content">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-share-alt"></i>
            </div>
            <div>
              <div class="card-title">Pelanggaran Dialihkan</div>
              <?php if ($total_dialihkan > 0): ?>
                <span class="badge-warning"><?php echo $total_dialihkan; ?></span>
              <?php endif; ?>
            </div>
          </div>
          <div class="card-desc">Tangani pelanggaran yang dialihkan dari guru piket</div>
          <a href="pelanggaran_dialihkan.php" class="card-button">
            <i class="fas fa-arrow-right"></i>
            Akses Menu
          </a>
        </div>
      </div>

      <!-- Bimbingan Konseling -->
      <div class="menu-card fade-in-up" style="--card-color: #8b5cf6; --card-dark: #7c3aed;">
        <div class="card-content">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-hands-helping"></i>
            </div>
            <div>
              <div class="card-title">Bimbingan Konseling</div>
            </div>
          </div>
          <div class="card-desc">Kelola sesi bimbingan dan konseling siswa</div>
          <a href="bimbingan_konseling.php" class="card-button">
            <i class="fas fa-arrow-right"></i>
            Akses Menu
          </a>
        </div>
      </div>

      <!-- Group WA -->
      <div class="menu-card fade-in-up" style="--card-color: #25d366; --card-dark: #128c7e;">
        <div class="card-content">
          <div class="card-header">
            <div class="card-icon">
              <i class="fab fa-whatsapp"></i>
            </div>
            <div>
              <div class="card-title">Group WA</div>
            </div>
          </div>
          <div class="card-desc">Bergabung dengan grup WhatsApp</div>
          <a href="https://chat.whatsapp.com/KtdYP6nx3eZLVhqJkQ1Zbs?mode=ac_t" class="card-button" target="_blank">
            <i class="fas fa-arrow-right"></i>
            Akses Menu
          </a>
        </div>
      </div>

      <!-- Kirim WA Ortu -->
      <div class="menu-card fade-in-up" style="--card-color: #25d366; --card-dark: #128c7e;">
        <div class="card-content">
          <div class="card-header">
            <div class="card-icon">
              <i class="fab fa-whatsapp"></i>
            </div>
            <div>
              <div class="card-title">Kirim WA Ortu</div>
            </div>
          </div>
          <div class="card-desc">Kirim pesan ke orang tua/wali</div>
          <a href="wa-wali-siswa.php" class="card-button">
            <i class="fas fa-arrow-right"></i>
            Akses Menu
          </a>
        </div>
      </div>

      <!-- Wali Kelas -->
      <div class="menu-card fade-in-up" style="--card-color: #ffc107; --card-dark: #e6a500;">
        <div class="card-content">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-chalkboard-teacher"></i>
            </div>
            <div>
              <div class="card-title">Wali Kelas</div>
            </div>
          </div>
          <div class="card-desc">Kelola data wali kelas</div>
          <a href="wali_kelas.php" class="card-button">
            <i class="fas fa-arrow-right"></i>
            Akses Menu
          </a>
        </div>
      </div>

      <!-- Logout -->
      <div class="menu-card fade-in-up" style="--card-color: #ef4444; --card-dark: #dc2626;">
        <div class="card-content">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-sign-out-alt"></i>
            </div>
            <div>
              <div class="card-title">Logout</div>
            </div>
          </div>
          <div class="card-desc">Keluar dari sistem dengan aman</div>
          <a href="logout.php" class="card-button">
            <i class="fas fa-arrow-right"></i>
            Keluar
          </a>
        </div>
      </div>
    </div>
  </div>

  <footer class="footer">
    <div class="footer-content">
      <div class="version">Versi Aplikasi: 4.00 | &copy; <?php echo date('Y'); ?> Sistem Absensi QR - Wali Kelas</div>
    </div>
  </footer>

  <script>
    // Theme Toggle
    function toggleTheme() {
      document.documentElement.classList.toggle('dark');
      const icon = document.querySelector('.theme-toggle i');
      if (document.documentElement.classList.contains('dark')) {
        icon.className = 'fas fa-sun';
        localStorage.setItem('theme', 'dark');
      } else {
        icon.className = 'fas fa-moon';
        localStorage.setItem('theme', 'light');
      }
    }

    // Load saved theme
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
      document.documentElement.classList.add('dark');
      document.querySelector('.theme-toggle i').className = 'fas fa-sun';
    }

    // Animation on scroll
    const observerOptions = {
      threshold: 0.1,
      rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.style.animation = 'fadeInUp 0.6s ease-out forwards';
          observer.unobserve(entry.target);
        }
      });
    }, observerOptions);

    // Observe all cards for animation
    document.addEventListener('DOMContentLoaded', () => {
      const cards = document.querySelectorAll('.menu-card, .stat-card');
      cards.forEach(card => {
        observer.observe(card);
      });
    });

    // Pulsing animation for notifications
    const badges = document.querySelectorAll('.badge-notif, .badge-warning');
    badges.forEach(badge => {
      badge.style.animation = 'pulse 2s infinite';
    });
  </script>
</body>
</html>