<?php
// login.php
require_once '../Config/DB.php';

$swal = ""; // Biến lưu trữ mã JavaScript của SweetAlert2

if (isset($_POST['login'])) {
    $username = trim($_POST['username']);
    $password = $_POST['password'];

    if (empty($username) || empty($password)) {
        $swal = "Swal.fire({ icon: 'error', title: 'THẤT BẠI', text: 'Vui lòng nhập đầy đủ tài khoản và mật khẩu!', background: '#130924', color: '#fff', confirmButtonColor: '#a855f7' });";
    } else {
        $stmt = $conn->prepare("SELECT * FROM users WHERE username = ?");
        $stmt->execute([$username]);
        $user = $stmt->fetch(PDO::FETCH_ASSOC);

        if ($user && password_verify($password, $user['password'])) {
            $_SESSION['user_id'] = $user['id'];
            $_SESSION['username'] = $user['username'];
            
            // Thông báo thành công và tự động chuyển hướng sau 2 giây
            $swal = "Swal.fire({ icon: 'success', title: 'THÀNH CÔNG', text: 'Đăng nhập thành công! Đang vào game...', background: '#130924', color: '#fff', confirmButtonColor: '#22d3ee', timer: 2000, showConfirmButton: false }).then(() => { window.location.href = 'Home.php'; });";
        } else {
            $swal = "Swal.fire({ icon: 'error', title: 'LỖI ĐĂNG NHẬP', text: 'Tài khoản hoặc mật khẩu không chính xác!', background: '#130924', color: '#fff', confirmButtonColor: '#a855f7' });";
        }
    }
}
?>

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>Đăng Nhập - DICHVUGIARE.SHOP</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <style>
        body { font-family: 'Rajdhani', sans-serif; background: radial-gradient(circle at center, #1a0b2e 0%, #0a0516 100%); }
        .font-gaming { font-family: 'Orbitron', sans-serif; }
        .neon-border { box-shadow: 0 0 15px rgba(59, 130, 246, 0.4), inset 0 0 15px rgba(59, 130, 246, 0.2); border: 1px solid rgba(59, 130, 246, 0.6); }
        .neon-text-cyan { text-shadow: 0 0 8px rgba(34, 211, 238, 0.6); }
        .neon-btn-purple { background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%); box-shadow: 0 0 15px rgba(168, 85, 247, 0.4); transition: all 0.3s ease; }
        .neon-btn-purple:hover { box-shadow: 0 0 25px rgba(168, 85, 247, 0.8); transform: translateY(-2px); }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4 overflow-x-hidden relative">

    <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-purple-600/10 rounded-full blur-3xl pointer-events-none"></div>
    <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-cyan-600/10 rounded-full blur-3xl pointer-events-none"></div>

    <div class="w-full max-w-md bg-[#130924]/80 backdrop-blur-xl p-8 rounded-2xl neon-border relative z-10">
        
        <div class="text-center mb-8">
            <h1 class="font-gaming text-3xl font-black tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-purple-400 to-pink-500 uppercase">
                DICHVUGIARE
            </h1>
            <p class="text-gray-400 text-xs tracking-widest uppercase mt-1 font-gaming neon-text-cyan text-cyan-400">
                SECURE LOGIN PORTAL
            </p>
        </div>

        <!-- FORM ĐĂNG NHẬP -->
        <form action="" method="POST" class="space-y-5">
            <div>
                <label class="block text-gray-400 text-xs uppercase font-gaming mb-2 tracking-wider">Tên tài khoản</label>
                <input type="text" name="username" required autocomplete="off"
                    class="w-full bg-[#0c0418] border border-purple-900/60 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-cyan-400 transition-colors text-sm" 
                    placeholder="Nhập Tài Khoản...">
            </div>

            <div>
                <div class="flex justify-between items-center mb-2">
                    <label class="block text-gray-400 text-xs uppercase font-gaming tracking-wider">Mật khẩu</label>
                    <a href="#" class="text-xs text-purple-400 hover:text-purple-300 transition-colors font-gaming">Quên mật khẩu?</a>
                </div>
                <input type="password" name="password" required
                    class="w-full bg-[#0c0418] border border-purple-900/60 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-cyan-400 transition-colors text-sm" 
                    placeholder="••••••••">
            </div>

            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <input id="remember" type="checkbox" class="w-4 h-4 rounded bg-[#0c0418] border-purple-900 text-purple-600 focus:ring-0 focus:ring-offset-0">
                    <label for="remember" class="ml-2 text-xs text-gray-400 uppercase tracking-wider select-none">Ghi nhớ</label>
                </div>
                <a href="DangKy.php" class="text-xs text-cyan-400 hover:text-cyan-300 transition-colors font-gaming uppercase tracking-wider">Tạo tài khoản mới →</a>
            </div>

            <button type="submit" name="login" class="w-full py-3.5 rounded-xl text-white font-gaming font-bold tracking-widest text-sm uppercase neon-btn-purple cursor-pointer mt-2">
                Đăng Nhập 
            </button>
        </form>

        <div class="mt-8 pt-4 border-t border-purple-900/30 text-center text-[11px] text-gray-600 uppercase tracking-widest font-gaming">
            &copy; 2026 <span class="text-purple-500">DichVuGiaRe.Shop</span>
        </div>
    </div>

    <!-- Thực thi SweetAlert2 từ PHP gửi qua -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            <?php echo $swal; ?>
        });
    </script>
</body>
</html>
