<?php
session_start();
include '../db_config.php';
include '../functions.php';
$error = '';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $u = sanitize_input($_POST['username']);
    $p = $_POST['password'];
    
    $stmt = $conn->prepare("SELECT id, password, role FROM admin_login WHERE username=?");
    $stmt->bind_param("s", $u);
    $stmt->execute();
    $stmt->bind_result($id, $hash, $role);
    
    if($stmt->fetch() && password_verify($p, $hash)) {
        $_SESSION['user_id'] = $id;
        $_SESSION['username'] = $u;
        $_SESSION['role'] = $role;
        header("Location: dashboard.php");
        exit();
    } else {
        $error = "Access Denied. Invalid credentials.";
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Login | Work For Sri Lanka</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        body { font-family: 'Inter', sans-serif; }
    </style>
</head>
<body class="bg-slate-950 min-h-screen flex items-center justify-center p-4 selection:bg-indigo-500 selection:text-white">
    
    <div class="max-w-md w-full relative">
        <!-- Background Effects -->
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-indigo-600/20 rounded-full blur-[100px] -z-10 pointer-events-none"></div>

        <!-- Brand Header -->
        <div class="text-center mb-10">
            <h1 class="text-4xl font-bold italic text-white tracking-tighter mb-2">Work For <span class="text-indigo-500">Sri Lanka</span></h1>
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-900/50 border border-slate-700/50 text-slate-400 text-xs tracking-widest uppercase font-bold">
                <i data-lucide="shield" class="w-3 h-3"></i> System Administration
            </div>
        </div>

        <!-- Login Card -->
        <div class="bg-slate-900/80 backdrop-blur-xl rounded-3xl shadow-2xl p-8 md:p-10 border border-slate-700 relative overflow-hidden group">
            
            <!-- Decor -->
            <div class="absolute top-0 right-0 w-32 h-32 bg-indigo-500/10 rounded-full blur-2xl -mr-10 -mt-10 transition duration-700 group-hover:bg-indigo-500/20"></div>
            
            <div class="relative z-10">
                <h2 class="text-2xl font-bold text-white mb-6">Restricted Access</h2>
                
                <?php if($error): ?>
                    <div class="bg-red-500/10 border border-red-500/20 text-red-400 px-4 py-3 rounded-xl mb-6 text-sm flex items-center animate-pulse">
                        <i data-lucide="alert-triangle" class="w-5 h-5 mr-3 flex-shrink-0"></i>
                        <?=$error?>
                    </div>
                <?php endif; ?>

                <form method="post" class="space-y-6">
                    <div>
                        <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Admin Username</label>
                        <div class="relative group">
                            <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-slate-600 group-focus-within:text-indigo-400 transition-colors">
                                <i data-lucide="user" class="w-5 h-5"></i>
                            </span>
                            <input type="text" name="username" required class="w-full pl-12 pr-4 py-3.5 bg-slate-800/50 border border-slate-700 rounded-xl text-white placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition" placeholder="Enter username">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Password Check</label>
                        <div class="relative group">
                            <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-slate-600 group-focus-within:text-indigo-400 transition-colors">
                                <i data-lucide="lock" class="w-5 h-5"></i>
                            </span>
                            <input type="password" name="password" required class="w-full pl-12 pr-4 py-3.5 bg-slate-800/50 border border-slate-700 rounded-xl text-white placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition" placeholder="••••••••">
                        </div>
                    </div>

                    <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-4 rounded-xl shadow-lg shadow-indigo-600/20 hover:shadow-indigo-600/40 transition transform active:scale-[0.98] flex items-center justify-center gap-2">
                        <i data-lucide="log-in" class="w-5 h-5"></i> Authenticate
                    </button>
                </form>
            </div>
        </div>
        
        <div class="text-center mt-8">
            <a href="<?= BASE_URL ?>/index.php" class="text-slate-500 hover:text-slate-400 text-sm transition flex items-center justify-center gap-2">
                <i data-lucide="arrow-left" class="w-4 h-4"></i> Return to Site
            </a>
        </div>
    </div>

    <script>
        lucide.createIcons();
    </script>
</body>
</html>
