<?php
// Cek apakah sedang update (maintenance mode aktif)
if (file_exists(__DIR__ . "/maintenance.flag")) {
    die("<h1>Sedang update, silakan coba beberapa menit lagi...</h1>");
}
include "config.php";

// Ambil data profil sekolah
$profil = mysqli_fetch_assoc(mysqli_query($conn, "SELECT nama_sekolah, logo FROM profil_sekolah LIMIT 1"));
$nama_sekolah = $profil['nama_sekolah'] ?? 'Nama Sekolah';
$logo = $profil['logo'] ?? 'default.png';

// Cek apakah ada pesan error dari login
$error = isset($_GET['error']) ? $_GET['error'] : '';
$error_msg = '';

switch($error) {
    case 'invalid':
        $error_msg = 'Username atau password salah!';
        break;
    case 'role':
        $error_msg = 'Username tidak sesuai dengan role yang dipilih!';
        break;
    case 'notfound':
        $error_msg = 'Data tidak ditemukan!';
        break;
}
?>
<!DOCTYPE html>
<html lang="id" class="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
  <title>Login - Sistem Absensi QR & Pelanggaran</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-danger: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
      --gradient-info: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
      --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #fbbf24 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, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      color: var(--text-primary);
      line-height: 1.5;
      transition: var(--transition);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      overflow-x: hidden;
      -webkit-tap-highlight-color: transparent;
    }

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

    /* Animated Background */
    .floating-shapes {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
    }

    .shape {
      position: absolute;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      animation: float 6s ease-in-out infinite;
    }

    .shape:nth-child(1) {
      width: 80px;
      height: 80px;
      top: 20%;
      left: 10%;
      animation-delay: 0s;
    }

    .shape:nth-child(2) {
      width: 120px;
      height: 120px;
      top: 60%;
      left: 80%;
      animation-delay: 2s;
    }

    .shape:nth-child(3) {
      width: 60px;
      height: 60px;
      top: 80%;
      left: 20%;
      animation-delay: 4s;
    }

    .shape:nth-child(4) {
      width: 100px;
      height: 100px;
      top: 30%;
      left: 70%;
      animation-delay: 1s;
    }

    /* Login Container */
    .login-container {
      background: var(--card-bg);
      border-radius: var(--border-radius);
      box-shadow: var(--shadow);
      width: 100%;
      max-width: 480px;
      padding: 1.5rem;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(0,0,0,0.05);
      animation: slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      transform-origin: center;
    }

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

    .login-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: var(--gradient-primary);
    }

    /* School Header */
    .school-header {
      text-align: center;
      margin-bottom: 1.5rem;
      animation: fadeIn 0.8s ease-out 0.2s both;
    }

    .school-logo {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: var(--gradient-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 0.75rem;
      box-shadow: var(--shadow);
      animation: bounceIn 0.8s ease-out 0.3s both;
      overflow: hidden;
    }

    .school-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .school-header h1 {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 0.25rem;
    }

    .school-header .subtitle {
      font-size: 0.8rem;
      color: var(--text-secondary);
      font-weight: 400;
    }

    /* Role Selector */
    .role-selector {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5rem;
      margin-bottom: 1.5rem;
      animation: fadeIn 0.8s ease-out 0.4s both;
    }

    .role-option {
      background: rgba(99, 102, 241, 0.05);
      border: 2px solid transparent;
      border-radius: 10px;
      padding: 0.75rem 0.25rem;
      text-align: center;
      cursor: pointer;
      transition: var(--transition);
      font-size: 0.7rem;
      font-weight: 500;
      -webkit-tap-highlight-color: transparent;
    }

    .dark .role-option {
      background: rgba(99, 102, 241, 0.1);
    }

    .role-option:active {
      transform: scale(0.98);
    }

    .role-option.active {
      border-color: var(--primary);
      background: rgba(99, 102, 241, 0.15);
      color: var(--primary);
    }

    .role-icon {
      font-size: 1.2rem;
      margin-bottom: 0.25rem;
      display: block;
    }

    /* Role colors */
    .role-option[data-role="admin"].active {
      border-color: #ef4444;
      color: #ef4444;
    }
    .role-option[data-role="guru"].active {
      border-color: #10b981;
      color: #10b981;
    }
    .role-option[data-role="wali_kelas"].active {
      border-color: #f59e0b;
      color: #f59e0b;
    }
    .role-option[data-role="siswa"].active {
      border-color: #3b82f6;
      color: #3b82f6;
    }

    /* Alert Message */
    .alert {
      background: rgba(239, 68, 68, 0.1);
      border: 1px solid rgba(239, 68, 68, 0.2);
      color: #ef4444;
      padding: 0.75rem 1rem;
      border-radius: 10px;
      margin-bottom: 1rem;
      font-size: 0.85rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      animation: shake 0.5s ease-in-out;
    }

    .dark .alert {
      background: rgba(239, 68, 68, 0.05);
      border-color: rgba(239, 68, 68, 0.3);
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
      20%, 40%, 60%, 80% { transform: translateX(5px); }
    }

    /* Form Styles */
    .form-group {
      margin-bottom: 1.25rem;
      animation: fadeIn 0.8s ease-out 0.5s both;
    }

    .form-label {
      display: block;
      font-weight: 500;
      margin-bottom: 0.5rem;
      color: var(--text-primary);
      font-size: 0.85rem;
    }

    .form-label i {
      margin-right: 0.5rem;
      color: var(--primary);
      width: 16px;
    }

    .form-input {
      width: 100%;
      padding: 0.875rem 1rem;
      border: 1px solid var(--gray-light);
      border-radius: 10px;
      background: var(--card-bg);
      color: var(--text-primary);
      font-size: 0.95rem;
      transition: var(--transition);
      -webkit-appearance: none;
    }

    .dark .form-input {
      border-color: rgba(255,255,255,0.2);
      background: var(--card-bg-dark);
    }

    .form-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .form-input::placeholder {
      color: var(--text-secondary);
      font-size: 0.85rem;
    }

    /* Button Styles */
    .btn {
      width: 100%;
      padding: 0.875rem 1.5rem;
      border: none;
      border-radius: 10px;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      animation: fadeIn 0.8s ease-out 0.6s both;
      -webkit-tap-highlight-color: transparent;
      text-decoration: none;
    }

    .btn:active {
      transform: scale(0.98);
    }

    .btn-primary {
      background: var(--gradient-primary);
      color: white;
      position: relative;
      overflow: hidden;
    }

    .btn-primary::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s;
    }

    .btn-primary:hover::before {
      left: 100%;
    }

    .btn-scan {
      background: var(--gradient-success);
      color: white;
      margin-bottom: 1rem;
    }

    .btn-scan i {
      font-size: 1.1rem;
    }

    /* Role-specific button colors */
    .btn-admin {
      background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    }
    .btn-guru {
      background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    }
    .btn-wali_kelas {
      background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    }
    .btn-siswa {
      background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    }

    /* Separator */
    .separator {
      display: flex;
      align-items: center;
      text-align: center;
      margin: 1rem 0;
      color: var(--text-secondary);
      font-size: 0.8rem;
    }

    .separator::before,
    .separator::after {
      content: '';
      flex: 1;
      border-bottom: 1px solid var(--gray-light);
    }

    .separator::before {
      margin-right: 0.5rem;
    }

    .separator::after {
      margin-left: 0.5rem;
    }

    .dark .separator::before,
    .dark .separator::after {
      border-bottom-color: rgba(255,255,255,0.2);
    }

    /* Footer Links */
    .footer-links {
      margin-top: 1.5rem;
      text-align: center;
      padding-top: 1.5rem;
      border-top: 1px solid var(--gray-light);
      animation: fadeIn 0.8s ease-out 0.7s both;
    }

    .dark .footer-links {
      border-top: 1px solid rgba(255,255,255,0.1);
    }

    .footer-links a {
      color: var(--primary);
      text-decoration: none;
      font-size: 0.8rem;
      margin: 0 0.5rem;
      font-weight: 500;
      transition: var(--transition);
      display: inline-block;
      padding: 0.25rem 0;
    }

    .footer-links a:active {
      opacity: 0.7;
    }

    .app-version {
      margin-top: 1rem;
      font-size: 0.7rem;
      color: var(--text-secondary);
    }

    /* Theme Toggle */
    .theme-toggle {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: var(--card-bg);
      border: 1px solid var(--gray-light);
      color: var(--text-primary);
      padding: 0.5rem;
      border-radius: 50%;
      cursor: pointer;
      transition: var(--transition);
      box-shadow: var(--shadow);
      animation: fadeIn 0.8s ease-out 0.8s both;
      z-index: 10;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
    }

    .dark .theme-toggle {
      border-color: rgba(255,255,255,0.2);
    }

    .theme-toggle:active {
      transform: scale(0.9);
    }

    /* Animations */
    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes bounceIn {
      0% {
        opacity: 0;
        transform: scale(0.3);
      }
      50% {
        opacity: 1;
        transform: scale(1.05);
      }
      70% {
        transform: scale(0.95);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes float {
      0%, 100% {
        transform: translateY(0) rotate(0deg);
      }
      50% {
        transform: translateY(-15px) rotate(180deg);
      }
    }

    /* Mobile optimizations */
    @media (max-width: 480px) {
      body {
        padding: 0.5rem;
      }
      
      .login-container {
        padding: 1.25rem;
      }
      
      .school-logo {
        width: 60px;
        height: 60px;
      }
      
      .school-header h1 {
        font-size: 1.2rem;
      }
      
      .role-selector {
        gap: 0.4rem;
      }
      
      .role-option {
        padding: 0.6rem 0.2rem;
        font-size: 0.65rem;
      }
      
      .role-icon {
        font-size: 1rem;
      }
      
      .form-input {
        padding: 0.75rem 0.875rem;
        font-size: 0.9rem;
      }
      
      .btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.95rem;
      }
      
      .footer-links {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
      }
      
      .footer-links a {
        margin: 0 0.4rem;
        font-size: 0.75rem;
      }
      
      .theme-toggle {
        top: 0.75rem;
        right: 0.75rem;
        width: 36px;
        height: 36px;
      }
    }

    /* Touch-friendly */
    .role-option, .btn, .theme-toggle, .footer-links a {
      touch-action: manipulation;
    }
  </style>
</head>
<body>
  <!-- Animated Background -->
  <div class="floating-shapes">
    <div class="shape"></div>
    <div class="shape"></div>
    <div class="shape"></div>
    <div class="shape"></div>
  </div>

  <div class="login-container">
    <!-- Theme Toggle -->
    <button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme">
      <i class="fas fa-moon"></i>
    </button>

    <!-- School Header -->
    <div class="school-header">
      <div class="school-logo">
        <img src="uploads/<?php echo htmlspecialchars($logo); ?>" alt="Logo Sekolah" onerror="this.style.display='none'; this.parentElement.innerHTML='<i class=\'fas fa-school\' style=\'font-size:2rem;\'></i>'">
      </div>
      <h1><?php echo htmlspecialchars($nama_sekolah); ?></h1>
      <div class="subtitle">Sistem Absensi QR & Pelanggaran Siswa</div>
    </div>

    <!-- Tombol Scan QR Code (Tanpa Login) - LANGSUNG KE HALAMAN SCAN -->
    <a href="scan_wa_api.php" class="btn btn-scan">
      <i class="fas fa-qrcode"></i>
      Scan QR Code Absensi
    </a>

    <!-- Separator -->
    <div class="separator">
      <span>atau login dengan akun</span>
    </div>

    <!-- Role Selector -->
    <div class="role-selector">
      <div class="role-option" data-role="siswa" onclick="selectRole('siswa', this)">
        <i class="fas fa-users role-icon"></i>
        Wali Murid
      </div>
      <div class="role-option" data-role="guru" onclick="selectRole('guru', this)">
        <i class="fas fa-user-clock role-icon"></i>
        Guru Piket
      </div>
      <div class="role-option" data-role="wali_kelas" onclick="selectRole('wali_kelas', this)">
        <i class="fas fa-chalkboard-teacher role-icon"></i>
        Wali Kelas
      </div>
      <div class="role-option" data-role="admin" onclick="selectRole('admin', this)">
        <i class="fas fa-user-shield role-icon"></i>
        Admin
      </div>
    </div>

    <!-- Error Message -->
    <?php if (!empty($error_msg)): ?>
    <div class="alert">
      <i class="fas fa-exclamation-circle"></i>
      <?php echo $error_msg; ?>
    </div>
    <?php endif; ?>

    <!-- Login Form -->
    <form method="post" action="cek.php" id="loginForm">
      <!-- Input Hidden untuk Role -->
      <input type="hidden" name="selected_role" id="selected_role" value="siswa">
      
      <div class="form-group">
        <label class="form-label">
          <i class="fas fa-user"></i>
          Username / NIP / NISN
        </label>
        <input type="text" name="username" id="username" class="form-input" placeholder="Masukkan username" required autofocus>
      </div>
      
      <div class="form-group">
        <label class="form-label">
          <i class="fas fa-lock"></i>
          Password
        </label>
        <input type="password" name="password" id="password" class="form-input" placeholder="Masukkan password" required>
      </div>

      <button type="submit" class="btn btn-primary" id="loginButton">
        <i class="fas fa-sign-in-alt"></i>
        Masuk ke Sistem
      </button>
    </form>

    <!-- Footer Links -->
    <div class="footer-links">
      <a href="tentang.php">
        <i class="fas fa-info-circle"></i>
        Tentang
      </a>
      <a href="bantuan.php">
        <i class="fas fa-question-circle"></i>
        Bantuan
      </a>
      <a href="kontak.php">
        <i class="fas fa-phone"></i>
        Kontak
      </a>
      <div class="app-version">
        Versi 4.00 | 4 Role System By Viralytics | &copy; <?php echo date('Y'); ?>
      </div>
    </div>
  </div>

  <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';
    }

    // Role Selection
    function selectRole(role, element) {
      // Remove active class from all roles
      document.querySelectorAll('.role-option').forEach(option => {
        option.classList.remove('active');
      });
      
      // Add active class to selected role
      element.classList.add('active');
      
      // Update hidden input
      const roleInput = document.querySelector('#selected_role');
      roleInput.value = role;
      
      // Update placeholder based on role
      const usernameInput = document.querySelector('#username');
      const loginButton = document.querySelector('#loginButton');
      
      // Remove all role-specific classes
      loginButton.classList.remove('btn-admin', 'btn-guru', 'btn-wali_kelas', 'btn-siswa');
      
      switch(role) {
        case 'admin':
          usernameInput.placeholder = 'Masukkan username admin';
          loginButton.classList.add('btn-admin');
          break;
        case 'guru':
          usernameInput.placeholder = 'Masukkan NIPK guru piket';
          loginButton.classList.add('btn-guru');
          break;
        case 'wali_kelas':
          usernameInput.placeholder = 'Masukkan NIP wali kelas';
          loginButton.classList.add('btn-wali_kelas');
          break;
        case 'siswa':
          usernameInput.placeholder = 'Masukkan NISN siswa';
          loginButton.classList.add('btn-siswa');
          break;
      }
    }

    // Set default role (siswa) as active on page load
    document.addEventListener('DOMContentLoaded', function() {
      const defaultRole = document.querySelector('.role-option[data-role="siswa"]');
      if (defaultRole) {
        defaultRole.classList.add('active');
        document.querySelector('#username').placeholder = 'Masukkan NISN siswa';
        document.querySelector('#loginButton').classList.add('btn-siswa');
      }
    });

    // Form validation
    document.getElementById('loginForm').addEventListener('submit', function(e) {
      const username = document.getElementById('username').value.trim();
      const password = document.getElementById('password').value.trim();
      
      if (username === '' || password === '') {
        e.preventDefault();
        alert('Username dan password harus diisi!');
        return false;
      }
      
      // Show loading
      const button = this.querySelector('button[type="submit"]');
      const originalText = button.innerHTML;
      button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memproses...';
      button.disabled = true;
      
      // If validation passes, form will submit normally
      setTimeout(() => {
        button.innerHTML = originalText;
        button.disabled = false;
      }, 5000);
    });

    // Focus on username field
    document.getElementById('username').focus();

    // Prevent zoom on double tap for mobile
    document.addEventListener('touchstart', (e) => {
      if (e.touches.length > 1) {
        e.preventDefault();
      }
    }, { passive: false });
  </script>
</body>
</html>