<?php
// ==========================================
// LOGIKA LOGIN (PHP)
// ==========================================
session_start();

$error_message = "";

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = $_POST['username'] ?? '';
    $password = $_POST['password'] ?? '';
    $platform = $_POST['platform'] ?? 'java';

    // Validasi Hardcode (Hanya user ini yang bisa login)
    if ($username === 'FANAESMC' && $password === 'FRAUDABC') {
        
        if ($platform === 'bedrock') {
            // Logika Bedrock: Redirect ke Web Store
            $redirect_url = "https://store.fanaesmc.me/bedrock-" . urlencode($username) . "/dashboard";
            header("Location: " . $redirect_url);
            exit();
        } else {
            // Logika Java: Simpan session dan ke dashboard
            $_SESSION['username'] = $username;
            header("Location: dashboard");
            exit();
        }

    } else {
        // Jika salah, set pesan error
        $error_message = "Username atau password salah!";
    }
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - ANYMHOST</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* CSS Reset & Basic Setup */
        * { 
            box-sizing: border-box; /* Sangat penting untuk responsivitas */
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
        }
        
        body {
            background-color: #0f172a; /* Warna background gelap */
            color: #f8fafc;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px; /* Jarak aman untuk HP */
        }

        /* Card Container (Responsif) */
        .login-card {
            background-color: #1e293b;
            padding: 2.5rem 2rem;
            border-radius: 1rem;
            width: 100%; /* Lebar adaptif */
            max-width: 400px; /* Batas maksimal di PC */
            text-align: center;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
        }

        /* Logo Custom */
        .logo {
            max-width: 80px;
            height: auto;
            margin-bottom: 1rem;
        }

        /* Typography */
        h1 { margin: 0 0 0.5rem 0; font-size: 1.4rem; font-weight: 600; }
        p.subtitle { color: #94a3b8; font-size: 0.9rem; margin-bottom: 2rem; }

        /* Error Message */
        .error-msg {
            background-color: rgba(239, 68, 68, 0.1);
            color: #ef4444;
            padding: 10px;
            border-radius: 8px;
            margin-bottom: 1.5rem;
            font-size: 0.9rem;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        /* Toggle Buttons (Java / Bedrock) */
        .toggle-group {
            display: flex;
            background-color: #0f172a;
            border-radius: 2rem;
            padding: 0.3rem;
            margin-bottom: 1.5rem;
            gap: 5px; /* Jarak antar tombol di HP */
        }
        .toggle-btn {
            flex: 1;
            padding: 0.75rem;
            border: none;
            border-radius: 2rem;
            font-weight: 600;
            cursor: pointer;
            color: #94a3b8;
            background: transparent;
            transition: all 0.3s ease;
            font-size: 0.9rem;
        }
        .toggle-btn.active {
            background-color: #f97316; /* Oranye aktif */
            color: white;
        }

        /* Input Field */
        .input-group {
            position: relative; /* Dibutuhkan untuk memposisikan ikon mata */
            margin-bottom: 1.2rem;
        }
        .input-group input {
            background-color: #334155;
            border: 1px solid transparent;
            color: white;
            width: 100%;
            padding: 0.9rem 2.5rem 0.9rem 1rem; /* Jarak ekstra di kanan untuk ikon */
            border-radius: 0.75rem;
            outline: none;
            font-size: 0.95rem;
            transition: border-color 0.3s ease;
        }
        .input-group input:focus {
            border-color: #6366f1; /* Border biru saat diketik */
        }
        .input-group input::placeholder { color: #94a3b8; }

        /* Ikon Mata (Show Password) */
        .toggle-password {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            cursor: pointer;
            font-size: 1.1rem;
            transition: color 0.3s ease;
        }
        .toggle-password:hover {
            color: #f8fafc;
        }

        /* Submit Button */
        .submit-btn {
            width: 100%;
            padding: 1rem;
            border: none;
            border-radius: 0.75rem;
            background: linear-gradient(135deg, #6366f1, #a855f7); /* Gradasi ungu/biru */
            color: white;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            margin-bottom: 1.5rem;
            transition: opacity 0.3s ease;
        }
        .submit-btn:hover { opacity: 0.9; }

        /* Footer Text & Link */
        .footer-text { color: #64748b; font-size: 0.8rem; margin: 0; }
        .footer-text a {
            color: #6366f1; /* Warna teks link */
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
        }
        .footer-text a:hover {
            text-decoration: underline;
            color: #a855f7;
        }
    </style>
</head>
<body>

<div class="login-card">
    <img src="logo.png" alt="Logo" class="logo">
    
    <h1>Selamat Datang</h1>
    <p class="subtitle">Masukan kredensial untuk memulai</p>

    <?php if(!empty($error_message)): ?>
        <div class="error-msg">
            <?php echo htmlspecialchars($error_message); ?>
        </div>
    <?php endif; ?>

    <form action="" method="POST">
        <input type="hidden" name="platform" id="platform" value="java">

        <div class="toggle-group">
            <button type="button" class="toggle-btn active" onclick="setPlatform('java', this)">Java</button>
            <button type="button" class="toggle-btn" onclick="setPlatform('bedrock', this)">Bedrock</button>
        </div>

        <div class="input-group">
            <input type="text" name="username" placeholder="Username Minecraft" required>
        </div>

        <div class="input-group">
            <input type="password" name="password" id="passwordField" placeholder="Password" required>
            <i class="fa-regular fa-eye toggle-password" id="togglePasswordIcon" onclick="togglePassword()"></i>
        </div>

        <button type="submit" class="submit-btn">Lanjutkan &rarr;</button>
    </form>

    <p class="footer-text">Dengan masuk, Anda menyetujui <a href="terms.php">Ketentuan Layanan</a></p>
</div>

<script>
    // JS untuk Toggle Platform
    function setPlatform(platform, btnElement) {
        document.getElementById('platform').value = platform;
        
        let buttons = document.querySelectorAll('.toggle-btn');
        buttons.forEach(function(btn) {
            btn.classList.remove('active');
        });
        
        btnElement.classList.add('active');
    }

    // JS untuk Fitur Show/Hide Password
    function togglePassword() {
        const passwordField = document.getElementById("passwordField");
        const toggleIcon = document.getElementById("togglePasswordIcon");
        
        if (passwordField.type === "password") {
            passwordField.type = "text";
            toggleIcon.classList.remove("fa-eye");
            toggleIcon.classList.add("fa-eye-slash");
        } else {
            passwordField.type = "password";
            toggleIcon.classList.remove("fa-eye-slash");
            toggleIcon.classList.add("fa-eye");
        }
    }
</script>

</body>
</html>