<?php
session_start();
require_once 'config/database.php';

// Handle login
$error_message = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = trim($_POST['username'] ?? '');
    $password = $_POST['password'] ?? '';
    
    try {
        $pdo = getPDOConnection();
        $stmt = $pdo->prepare('SELECT id, username, full_name, password, is_admin, is_active FROM users WHERE username = ? LIMIT 1');
        $stmt->execute([$username]);
        $user = $stmt->fetch();
        
        if ($user && password_verify($password, $user['password'])) {
            if (!$user['is_active']) {
                $error_message = 'Akun Anda tidak aktif. Hubungi administrator.';
            } else {
                // Set session
                $_SESSION['user_id'] = $user['id'];
                $_SESSION['username'] = $user['username'];
                $_SESSION['user_name'] = $user['full_name'];
                $_SESSION['user_role'] = $user['is_admin'] ? 'admin' : 'user';
                $_SESSION['is_admin'] = $user['is_admin'];
                
                // Redirect based on role
                if ($user['is_admin']) {
                    // Admin -> Dashboard Desktop
                    header('Location: dashboard.html');
                } else {
                    // User -> Dashboard Mobile
                    header('Location: dashboard-mobile.html');
                }
                exit();
            }
        } else {
            $error_message = 'Username atau password salah!';
        }
    } catch (Exception $e) {
        $error_message = 'Terjadi kesalahan sistem: ' . $e->getMessage();
    }
}

// If already logged in, redirect based on role
if (isset($_SESSION['user_id'])) {
    if (isset($_SESSION['is_admin']) && $_SESSION['is_admin']) {
        header('Location: dashboard.html');
    } else {
        header('Location: dashboard-mobile.html');
    }
    exit();
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Info Hadir</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/footer.css">
    <style>
        .clip-triangle-top-right {
            clip-path: polygon(60% 0%, 100% 0%, 100% 100%, 80% 100%);
        }
        .clip-triangle-bottom-left {
            clip-path: polygon(0 0, 20% 0, 40% 100%, 0% 100%);
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.18);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }
    </style>
</head>
<body class="min-h-screen relative overflow-hidden flex items-center justify-center" style="background: radial-gradient(1200px 600px at 20% 20%, rgba(30,58,138,0.35), transparent), radial-gradient(1000px 500px at 90% 80%, rgba(30,64,175,0.35), transparent), linear-gradient(135deg, #0f172a 0%, #0b132b 40%, #0b1229 100%);">
    <!-- Decorative Shapes -->
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute top-0 right-0 w-[65%] h-[65%] bg-gradient-to-br from-blue-700 via-blue-600 to-cyan-700 clip-triangle-top-right opacity-90"></div>
        <div class="absolute bottom-0 left-0 w-[55%] h-[55%] bg-gradient-to-tr from-slate-900 via-indigo-900 to-blue-900 clip-triangle-bottom-left opacity-70"></div>
    </div>

    <!-- Login Card -->
    <div class="relative max-w-4xl w-full mx-4">
        <div class="glass-card rounded-3xl shadow-2xl overflow-hidden">
            <div class="grid grid-cols-1 md:grid-cols-2">
                <!-- Left: Brand / Visual -->
                <div class="relative p-10 md:p-12 bg-gradient-to-br from-slate-900/20 to-slate-800/10">
                    <img src="assets/logo.png" alt="Info Hadir" class="w-20 h-20" onerror="this.style.display='none'">
                    <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight text-white drop-shadow-sm">Info Hadir</h2>
                    <p class="mt-3 text-slate-200/90">Dinas Pendidikan dan Kebudayaan Kabupaten Balangan</p>
                    <div class="hidden md:block absolute -bottom-10 -right-10 w-60 h-60 rounded-3xl rotate-12 bg-gradient-to-tr from-blue-700 to-cyan-700 opacity-80 shadow-xl"></div>
                </div>

                <!-- Right: Form -->
                <div class="relative p-8 md:p-12 bg-gradient-to-br from-white/10 to-white/5">
                    <div class="mb-6">
                        <div class="flex items-center space-x-2 text-white/90">
                            <span class="inline-block w-2 h-2 rounded-full bg-blue-400"></span>
                            <span class="text-sm uppercase tracking-wider">Masuk</span>
                        </div>
                        <h3 class="mt-2 text-2xl font-semibold text-white">Login ke Akun Anda</h3>
                        <p class="text-sm text-white/70">Gunakan kredensial yang diberikan oleh admin.</p>
                    </div>

                    <form method="POST" class="space-y-5">
                        <?php if ($error_message): ?>
                            <div class="bg-red-900/40 border border-red-500/40 text-red-100 px-4 py-3 rounded-lg">
                                <i class="fas fa-exclamation-circle mr-2"></i>
                                <?= htmlspecialchars($error_message) ?>
                            </div>
                        <?php endif; ?>

                        <div class="space-y-2">
                            <label for="username" class="block text-xs font-semibold tracking-wide text-white/90">Username</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-blue-400">
                                    <i class="fas fa-user"></i>
                                </span>
                                <input type="text" id="username" name="username" required
                                       class="w-full pl-10 pr-4 py-3 rounded-xl bg-white/80 text-slate-900 placeholder-slate-500 border border-white/40 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                       placeholder="Masukkan username" value="<?= htmlspecialchars($_POST['username'] ?? '') ?>">
                            </div>
                        </div>

                        <div class="space-y-2">
                            <label for="password" class="block text-xs font-semibold tracking-wide text-white/90">Password</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-blue-400">
                                    <i class="fas fa-lock"></i>
                                </span>
                                <input type="password" id="password" name="password" required
                                       class="w-full pl-10 pr-10 py-3 rounded-xl bg-white/80 text-slate-900 placeholder-slate-500 border border-white/40 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                       placeholder="Masukkan password">
                                <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 pr-3 flex items-center text-slate-500 hover:text-slate-700">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>

                        <button type="submit" class="w-full inline-flex items-center justify-center gap-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-800 transition">
                            <i class="fas fa-sign-in-alt"></i>
                            <span>Login</span>
                        </button>
                    </form>

                    <div class="mt-6 space-y-3">
                        <div class="text-center">
                            <span class="text-white/60 text-sm">atau</span>
                        </div>
                        <a href="display.html" class="w-full inline-flex items-center justify-center gap-2 border border-emerald-400/40 text-emerald-300 hover:bg-emerald-500/10 py-3 rounded-xl transition">
                            <i class="fas fa-tv"></i>
                            <span>Lihat Display</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="absolute bottom-0 left-0 right-0 p-4 text-center">
        <div class="text-white/60 text-sm">
            <span>Developer by </span>
            <a href="profil/index.html" class="text-blue-400 hover:text-blue-300 transition-colors duration-200 font-medium hover:underline">
                yhy_
            </a>
        </div>
    </footer>

    <script>
        // Password toggle functionality
        const toggleBtn = document.getElementById('togglePassword');
        if (toggleBtn) {
            toggleBtn.addEventListener('click', function() {
                const input = document.getElementById('password');
                const icon = this.querySelector('i');
                if (input.type === 'password') {
                    input.type = 'text';
                    icon.classList.remove('fa-eye');
                    icon.classList.add('fa-eye-slash');
                } else {
                    input.type = 'password';
                    icon.classList.remove('fa-eye-slash');
                    icon.classList.add('fa-eye');
                }
            });
        }
    </script>
</body>
</html>
