/home/ejrndhmu/tokobiolink.com/login.php
<?php
require_once 'config/database.php';
require_once 'includes/functions.php';
startSecureSession();

// Get site name from settings
$siteName = getSetting('site_name', 'Panel Digital');

// Redirect jika sudah login
if (isLoggedIn()) {
    $redirectUrl = $_SESSION['user_type'] === 'admin' ? 'admin/dashboard.php' : 
                   ($_SESSION['user_type'] === 'reseller' ? 'reseller/dashboard.php' : 'user/dashboard.php');
    header('Location: ' . $redirectUrl);
    exit();
}

$error = '';
$success = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = sanitizeInput($_POST['username'] ?? '');
    $password = $_POST['password'] ?? '';
    $csrf_token = $_POST['csrf_token'] ?? '';
    $isAjax = isset($_POST['ajax_login']);
    
    // For AJAX requests, skip CSRF token verification for now
    if (!$isAjax && !verifyCSRFToken($csrf_token)) {
        $error = 'Token keamanan tidak valid.';
    } elseif (empty($username) || empty($password)) {
        $error = 'Username dan password harus diisi.';
    } else {
        $db = new Database();
        $db->query('SELECT * FROM users WHERE (username = :username OR email = :username) AND status = "active"');
        $db->bind(':username', $username);
        $user = $db->single();
        
        if ($user && verifyPassword($password, $user['password'])) {
            $_SESSION['user_id'] = $user['id'];
            $_SESSION['user_type'] = $user['role'];
            $_SESSION['username'] = $user['username'];
            $_SESSION['full_name'] = $user['full_name'];
            $_SESSION['email'] = $user['email'];
            
            if ($isAjax) {
                header('Content-Type: application/json');
                echo json_encode(['success' => true, 'message' => 'Login berhasil']);
                exit();
            } else {
                $redirectUrl = $user['role'] === 'reseller' ? 'reseller/dashboard.php' : 'user/dashboard.php';
                header('Location: ' . $redirectUrl);
                exit();
            }
        } else {
            $error = 'Username/email atau password salah, atau akun Anda tidak aktif.';
        }
    }
    
    // Handle AJAX error response
    if ($isAjax && !empty($error)) {
        header('Content-Type: application/json');
        echo json_encode(['success' => false, 'message' => $error]);
        exit();
    }
}

// Check for timeout parameter
if (isset($_GET['timeout'])) {
    $error = 'Sesi Anda telah berakhir. Silakan login kembali.';
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - <?php echo htmlspecialchars($siteName); ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'blue-primary': '#1e40af',
                        'blue-secondary': '#3b82f6',
                        'blue-light': '#dbeafe',
                        'blue-dark': '#1e3a8a'
                    }
                }
            }
        }
    </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-blue-50 to-blue-100 min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-md">
        <!-- Logo/Header -->
        <div class="text-center mb-8">
            <?php $logoLogin = getLogoUrl('login'); ?>
            <?php if ($logoLogin): ?>
                <div class="w-16 h-16 mx-auto mb-4">
                    <img src="<?php echo htmlspecialchars($logoLogin); ?>" alt="<?php echo htmlspecialchars($siteName); ?>" class="w-full h-full object-contain">
                </div>
            <?php else: ?>
                <div class="bg-blue-primary w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
                    <i class="fas fa-users text-white text-2xl"></i>
                </div>
            <?php endif; ?>
            <h1 class="text-3xl font-bold text-blue-dark mb-2"><?php echo htmlspecialchars($siteName); ?></h1>
            <p class="text-blue-600">Member Area Login</p>
        </div>

        <!-- Login Form -->
        <div class="bg-white rounded-2xl shadow-xl p-8 border border-blue-100">
            <?php if ($error): ?>
                <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6 flex items-center">
                    <i class="fas fa-exclamation-circle mr-2"></i>
                    <?php echo htmlspecialchars($error); ?>
                </div>
            <?php endif; ?>

            <?php if ($success): ?>
                <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg mb-6 flex items-center">
                    <i class="fas fa-check-circle mr-2"></i>
                    <?php echo htmlspecialchars($success); ?>
                </div>
            <?php endif; ?>

            <form method="POST" action="" class="space-y-6">
                <input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
                
                <!-- Username Field -->
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-user mr-2 text-blue-primary"></i>Username atau Email
                    </label>
                    <input type="text" 
                           id="username" 
                           name="username" 
                           value="<?php echo htmlspecialchars($username ?? ''); ?>"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent transition duration-200 bg-gray-50 focus:bg-white"
                           placeholder="Masukkan username atau email"
                           required>
                </div>

                <!-- Password Field -->
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-lock mr-2 text-blue-primary"></i>Password
                    </label>
                    <div class="relative">
                        <input type="password" 
                               id="password" 
                               name="password" 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent transition duration-200 bg-gray-50 focus:bg-white pr-12"
                               placeholder="Masukkan password"
                               required>
                        <button type="button" 
                                onclick="togglePassword()"
                                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-blue-primary transition duration-200">
                            <i id="password-icon" class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>

                <!-- Login Button -->
                <button type="submit" 
                        class="w-full bg-blue-primary hover:bg-blue-dark text-white font-semibold py-3 px-4 rounded-lg transition duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl flex items-center justify-center">
                    <i class="fas fa-sign-in-alt mr-2"></i>
                    Masuk ke Dashboard
                </button>
            </form>
            
            <!-- Registration Link -->
            <div class="mt-4 text-center">
                <p class="text-sm text-gray-600">Belum punya akun?</p>
                <a href="register.php" class="inline-flex items-center justify-center w-full mt-2 px-4 py-2 border border-blue-primary text-blue-primary hover:bg-blue-primary hover:text-white rounded-lg transition duration-200 text-sm font-medium">
                    <i class="fas fa-user-plus mr-2"></i>
                    Daftar Akun Baru
                </a>
            </div>

            <!-- User Type Info -->
            <div class="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
                <h4 class="text-sm font-semibold text-blue-800 mb-2">Jenis Akun:</h4>
                <div class="space-y-2 text-xs text-blue-700">
                    <div class="flex items-center">
                        <i class="fas fa-user w-4 mr-2"></i>
                        <span><strong>User:</strong> Akses produk digital yang telah diberikan</span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-user-tie w-4 mr-2"></i>
                        <span><strong>Reseller:</strong> Dapat menambah user baru dan mengatur akses produk</span>
                    </div>
                </div>
            </div>

            <!-- Additional Links -->
            <div class="mt-6 text-center space-y-2">
                <a href="admin/login.php" class="text-blue-primary hover:text-blue-dark transition duration-200 text-sm flex items-center justify-center">
                    <i class="fas fa-shield-alt mr-2"></i>
                    Login sebagai Administrator
                </a>
            </div>
        </div>


        <!-- Footer -->
        <div class="text-center mt-8 text-gray-600 text-sm">
            <p>&copy; 2025 <?php echo htmlspecialchars($siteName); ?>. Semua hak dilindungi.</p>
        </div>
    </div>

    <script>
        function togglePassword() {
            const passwordField = document.getElementById('password');
            const passwordIcon = document.getElementById('password-icon');
            
            if (passwordField.type === 'password') {
                passwordField.type = 'text';
                passwordIcon.className = 'fas fa-eye-slash';
            } else {
                passwordField.type = 'password';
                passwordIcon.className = 'fas fa-eye';
            }
        }

        // Auto-hide alerts after 5 seconds
        setTimeout(function() {
            const alerts = document.querySelectorAll('.bg-red-50, .bg-green-50');
            alerts.forEach(function(alert) {
                alert.style.transition = 'opacity 0.5s';
                alert.style.opacity = '0';
                setTimeout(function() {
                    alert.remove();
                }, 500);
            });
        }, 5000);

        // Add loading state to form submission
        document.querySelector('form').addEventListener('submit', function(e) {
            const button = document.querySelector('button[type="submit"]');
            button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Memproses...';
            button.disabled = true;
        });
    </script>
</body>
</html>