<?php
session_start();
if (isset($_SESSION['user_id'])) {
    header("Location: pos.php");
    exit;
}

$error = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    require 'config.php';
    $username = trim($_POST['username']);
    $password = $_POST['password'];

    if (empty($username) || empty($password)) {
        $error = "Username dan password harus diisi!";
    } else {
        $stmt = $pdo->prepare("SELECT * FROM users WHERE username = ?");
        $stmt->execute([$username]);
        $user = $stmt->fetch();

        if ($user && password_verify($password, $user['password'])) {
            session_regenerate_id(true);
            $_SESSION['user_id'] = $user['id'];
            $_SESSION['name'] = $user['name'];
            $_SESSION['username'] = $user['username'];
            $_SESSION['last_activity'] = time();
            header("Location: pos.php");
            exit;
        } else {
            $error = "Username atau password salah!";
        }
    }
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <meta name="theme-color" content="#1e40af">
    <title>Login | GoldenWok Resto POS</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --glass-bg: rgba(255, 255, 255, 0.15);
            --glass-border: rgba(255, 255, 255, 0.25);
            --glass-shadow: rgba(255, 255, 255, 0.1);
            --primary: #3b82f6;
            --primary-dark: #1e40af;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        html, body {
            font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
            min-height: 100vh;
            width: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            touch-action: manipulation;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        input {
            -webkit-user-select: text !important;
            user-select: text !important;
        }

        /* Background Animation */
        .bg-animated {
            position: fixed;
            inset: 0;
            background: linear-gradient(135deg, #0f1729 0%, #1e3a8a 30%, #1e40af 50%, #3b82f6 70%, #60a5fa 100%);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
        }

        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            25% { background-position: 100% 0%; }
            50% { background-position: 100% 100%; }
            75% { background-position: 0% 100%; }
        }

        /* Floating Orbs */
        .orb {
            position: fixed;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.3;
            pointer-events: none;
            animation: float 20s infinite;
        }

        .orb-1 {
            width: 400px;
            height: 400px;
            background: rgba(59, 130, 246, 0.4);
            top: -100px;
            right: -100px;
            animation-delay: 0s;
        }

        .orb-2 {
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.2);
            bottom: -50px;
            left: -50px;
            animation-delay: -7s;
        }

        .orb-3 {
            width: 250px;
            height: 250px;
            background: rgba(147, 197, 253, 0.3);
            top: 50%;
            left: 50%;
            animation-delay: -14s;
        }

        @keyframes float {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(30px, -50px) scale(1.1); }
            66% { transform: translate(-20px, 20px) scale(0.9); }
        }

        /* Glass Container */
        .glass-container {
            position: relative;
            z-index: 10;
            background: var(--glass-bg);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid var(--glass-border);
            border-radius: 32px;
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.1),
                0 2px 8px rgba(255, 255, 255, 0.1) inset,
                0 -2px 8px rgba(255, 255, 255, 0.05) inset;
        }

        .glass-container:hover {
            box-shadow: 
                0 12px 40px rgba(0, 0, 0, 0.15),
                0 2px 12px rgba(255, 255, 255, 0.15) inset;
        }

        /* Glass Input */
        .glass-input {
            width: 100%;
            padding: 1rem 1.25rem;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            color: white;
            font-size: 1rem;
            font-weight: 500;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            outline: none;
        }

        .glass-input::placeholder {
            color: rgba(255, 255, 255, 0.5);
            font-weight: 400;
        }

        .glass-input:focus {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
            box-shadow: 
                0 0 0 4px rgba(59, 130, 246, 0.2),
                0 0 20px rgba(255, 255, 255, 0.1) inset;
            transform: translateY(-1px);
        }

        /* Glass Button */
        .glass-button {
            width: 100%;
            padding: 1rem;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 20px;
            color: white;
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .glass-button::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.4) 0%, rgba(37, 99, 235, 0.6) 100%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .glass-button:hover::before {
            opacity: 1;
        }

        .glass-button:hover {
            transform: translateY(-2px);
            box-shadow: 
                0 10px 30px rgba(59, 130, 246, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.5);
        }

        .glass-button:active {
            transform: translateY(0) scale(0.98);
        }

        .glass-button span {
            position: relative;
            z-index: 1;
        }

        /* Error Alert */
        .error-alert {
            background: rgba(239, 68, 68, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: 16px;
            padding: 1rem;
            color: #fca5a5;
            font-size: 0.9rem;
            font-weight: 500;
            animation: shake 0.5s ease-in-out;
        }

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

        /* Password Toggle */
        .password-toggle {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            padding: 0.5rem;
            transition: color 0.3s;
        }

        .password-toggle:hover {
            color: white;
        }

        /* Logo Animation */
        .logo-container {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }

        .logo-circle {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: pulse 3s ease-in-out infinite;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
            50% { transform: scale(1.05); box-shadow: 0 15px 40px rgba(59, 130, 246, 0.3); }
        }

        /* Decorative Lines */
        .decorative-line {
            width: 40px;
            height: 3px;
            background: linear-gradient(90deg, rgba(255,255,255,0.2), rgba(255,255,255,0.8), rgba(255,255,255,0.2));
            border-radius: 10px;
        }

        /* Tablet & Desktop Layout */
        .login-layout {
            display: grid;
            min-height: 100vh;
            width: 100%;
        }

        @media (min-width: 1024px) {
            .login-layout {
                grid-template-columns: 1fr 1fr;
            }
            
            .brand-section {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 4rem;
            }
        }

        @media (max-width: 1023px) {
            .brand-section {
                display: none;
            }
        }

        /* Safe Area Support */
        @supports (padding: max(0px)) {
            .login-layout {
                padding-top: env(safe-area-inset-top);
                padding-bottom: env(safe-area-inset-bottom);
                padding-left: env(safe-area-inset-left);
                padding-right: env(safe-area-inset-right);
            }
        }

        /* Input Icon */
        .input-icon {
            position: absolute;
            left: 1.25rem;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.5);
            font-size: 1.1rem;
            pointer-events: none;
            transition: color 0.3s;
        }

        .input-wrapper {
            position: relative;
        }

        .input-wrapper input {
            padding-left: 3rem;
        }

        .input-wrapper input:focus + .input-icon,
        .input-wrapper input:focus ~ .input-icon {
            color: rgba(255, 255, 255, 0.9);
        }

        /* Remember Me */
        .checkbox-glass {
            width: 1.2rem;
            height: 1.2rem;
            accent-color: #3b82f6;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- Animated Background -->
    <div class="bg-animated"></div>
    
    <!-- Floating Orbs -->
    <div class="orb orb-1"></div>
    <div class="orb orb-2"></div>
    <div class="orb orb-3"></div>

    <!-- Main Layout -->
    <div class="login-layout">
        <!-- Brand Section (Tablet & Desktop) -->
        <div class="brand-section">
            <div class="text-center text-white">
                <div class="logo-container mx-auto mb-8">
                    <div class="logo-circle">
                        <span class="text-5xl">🍣</span>
                    </div>
                </div>
                
                <h1 class="text-5xl font-extrabold mb-3 tracking-tight">
                    Golden<span class="text-blue-300">Wok</span>
                </h1>
                
                <div class="flex items-center justify-center gap-4 mb-4">
                    <div class="decorative-line"></div>
                    <span class="text-blue-200 text-sm font-semibold uppercase tracking-widest">POS System</span>
                    <div class="decorative-line"></div>
                </div>
                
                <p class="text-blue-100/80 text-lg font-light max-w-md">
                    Sistem Kasir Modern untuk Restoran Anda
                </p>
                
                <!-- Features -->
                <div class="grid grid-cols-2 gap-4 mt-12 max-w-md mx-auto">
                    <div class="glass-container p-4 rounded-2xl">
                        <i class="fas fa-bolt text-2xl text-blue-300 mb-2"></i>
                        <h3 class="text-white font-semibold text-sm">Cepat</h3>
                        <p class="text-blue-200/70 text-xs">Transaksi instan</p>
                    </div>
                    <div class="glass-container p-4 rounded-2xl">
                        <i class="fas fa-shield-alt text-2xl text-blue-300 mb-2"></i>
                        <h3 class="text-white font-semibold text-sm">Aman</h3>
                        <p class="text-blue-200/70 text-xs">Data terenkripsi</p>
                    </div>
                    <div class="glass-container p-4 rounded-2xl">
                        <i class="fas fa-chart-line text-2xl text-blue-300 mb-2"></i>
                        <h3 class="text-white font-semibold text-sm">Analitik</h3>
                        <p class="text-blue-200/70 text-xs">Laporan detail</p>
                    </div>
                    <div class="glass-container p-4 rounded-2xl">
                        <i class="fas fa-cloud text-2xl text-blue-300 mb-2"></i>
                        <h3 class="text-white font-semibold text-sm">Cloud</h3>
                        <p class="text-blue-200/70 text-xs">Akses dimana saja</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Login Form Section -->
        <div class="flex items-center justify-center p-6 lg:p-12">
            <div class="glass-container p-8 lg:p-10 w-full max-w-md animate-fade-in">
                <!-- Logo (Mobile) -->
                <div class="text-center mb-8 lg:hidden">
                    <div class="logo-container mb-4" style="width: 80px; height: 80px;">
                        <div class="logo-circle" style="border-radius: 22px;">
                            <span class="text-4xl">🍣</span>
                        </div>
                    </div>
                    <h2 class="text-2xl font-extrabold text-white">GoldenWok</h2>
                </div>

                <!-- Title -->
                <div class="text-center mb-8">
                    <h2 class="text-3xl font-extrabold text-white mb-2">Selamat Datang</h2>
                    <p class="text-blue-200/80 text-sm font-medium">Silakan login untuk melanjutkan</p>
                </div>

                <!-- Error Message -->
                <?php if ($error): ?>
                    <div class="error-alert mb-6 flex items-center gap-3">
                        <i class="fas fa-exclamation-circle text-lg"></i>
                        <span><?= htmlspecialchars($error) ?></span>
                    </div>
                <?php endif; ?>

                <!-- Login Form -->
                <form method="POST" class="space-y-5" autocomplete="off" novalidate>
                    <!-- Username -->
                    <div>
                        <label class="block text-sm font-semibold text-blue-100 mb-2 ml-1">Username</label>
                        <div class="input-wrapper">
                            <i class="fas fa-user input-icon"></i>
                            <input type="text" 
                                   name="username" 
                                   required 
                                   placeholder="Masukkan username"
                                   autocomplete="off"
                                   autocorrect="off"
                                   autocapitalize="none"
                                   spellcheck="false"
                                   class="glass-input">
                        </div>
                    </div>

                    <!-- Password -->
                    <div>
                        <label class="block text-sm font-semibold text-blue-100 mb-2 ml-1">Password</label>
                        <div class="input-wrapper">
                            <i class="fas fa-lock input-icon"></i>
                            <input type="password" 
                                   name="password" 
                                   id="password"
                                   required 
                                   placeholder="Masukkan password"
                                   autocomplete="new-password"
                                   class="glass-input pr-12">
                            <button type="button" 
                                    id="togglePassword"
                                    class="password-toggle"
                                    aria-label="Toggle password">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Remember Me -->
                    <div class="flex items-center justify-between text-sm">
                        <label class="flex items-center gap-2 text-blue-200 cursor-pointer">
                            <input type="checkbox" class="checkbox-glass" name="remember">
                            <span>Ingat saya</span>
                        </label>
                    </div>

                    <!-- Submit Button -->
                    <button type="submit" class="glass-button mt-4">
                        <span class="flex items-center justify-center gap-3">
                            <i class="fas fa-sign-in-alt"></i>
                            MASUK
                        </span>
                    </button>
                </form>

                <!-- Footer -->
                <div class="mt-8 text-center">
                    <p class="text-blue-200/60 text-xs font-medium">
                        © <?= date('Y') ?> GoldenWok Resto. All rights reserved.
                    </p>
                    <div class="mt-4 px-4 py-3 glass-container rounded-2xl text-left">
                        <p class="text-white text-xs font-semibold mb-2">Demo Credentials:</p>
                        <div class="flex items-center gap-2 text-blue-200 text-xs">
                            <i class="fas fa-user w-4"></i>
                            <span class="font-mono text-white">admin</span>
                        </div>
                        <div class="flex items-center gap-2 text-blue-200 text-xs mt-1">
                            <i class="fas fa-key w-4"></i>
                            <span class="font-mono text-white">password</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // ============================================
        // NO ZOOM PROTECTION
        // ============================================
        document.addEventListener('gesturestart', (e) => e.preventDefault());
        document.addEventListener('gesturechange', (e) => e.preventDefault());
        document.addEventListener('gestureend', (e) => e.preventDefault());

        document.addEventListener('touchmove', function(e) {
            if (e.touches.length > 1) e.preventDefault();
        }, { passive: false });

        let lastTouchEnd = 0;
        document.addEventListener('touchend', function(e) {
            const now = Date.now();
            if (now - lastTouchEnd <= 300) e.preventDefault();
            lastTouchEnd = now;
        }, false);

        document.addEventListener('keydown', function(e) {
            if ((e.ctrlKey || e.metaKey) && ['+', '-', '0'].includes(e.key)) {
                e.preventDefault();
            }
        });

        document.addEventListener('copy', function(e) {
            if (e.target.tagName !== 'INPUT') e.preventDefault();
        });

        document.addEventListener('contextmenu', (e) => {
            if (e.target.tagName !== 'INPUT') e.preventDefault();
        });

        // ============================================
        // PASSWORD TOGGLE
        // ============================================
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');
        const toggleIcon = togglePassword.querySelector('i');

        togglePassword.addEventListener('click', function() {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            
            toggleIcon.classList.toggle('fa-eye');
            toggleIcon.classList.toggle('fa-eye-slash');
        });

        // ============================================
        // FORM SUBMIT LOADING STATE
        // ============================================
        document.querySelector('form').addEventListener('submit', function(e) {
            const button = this.querySelector('button[type="submit"]');
            const originalHTML = button.innerHTML;
            
            button.disabled = true;
            button.innerHTML = '<span class="flex items-center justify-center gap-3"><i class="fas fa-spinner fa-spin"></i> MEMPROSES...</span>';
            button.style.opacity = '0.8';
            
            // Reset after 3 seconds if still on page
            setTimeout(() => {
                if (button.disabled) {
                    button.disabled = false;
                    button.innerHTML = originalHTML;
                    button.style.opacity = '1';
                }
            }, 3000);
        });

        // ============================================
        // ANIMATION ON LOAD
        // ============================================
        document.addEventListener('DOMContentLoaded', function() {
            const container = document.querySelector('.glass-container');
            if (container) {
                container.style.opacity = '0';
                container.style.transform = 'translateY(20px)';
                
                requestAnimationFrame(() => {
                    container.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
                    container.style.opacity = '1';
                    container.style.transform = 'translateY(0)';
                });
            }
        });
    </script>
</body>
</html>