<?php
/**
 * Login Page
 * Koperasi Management System
 */

require_once __DIR__ . '/config/auth.php';

// If already logged in, redirect to dashboard
if (isLoggedIn()) {
    header('Location: ' . APP_URL . '/index.php');
    exit;
}

$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = trim($_POST['username'] ?? '');
    $password = $_POST['password'] ?? '';
    
    if (empty($username) || empty($password)) {
        $error = 'Username dan password wajib diisi.';
    } elseif (login($username, $password)) {
        header('Location: ' . APP_URL . '/index.php');
        exit;
    } else {
        $error = 'Username atau password salah.';
    }
}

$namaKoperasi = getSetting('nama_koperasi', 'Koperasi Tsuroyya Bersama');
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - <?= htmlspecialchars($namaKoperasi) ?></title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="<?= ASSETS_URL ?>/css/style.css">
</head>
<body>
    <div class="login-page">
        <!-- Floating Orbs Background -->
        <div class="orb orb-1"></div>
        <div class="orb orb-2"></div>
        <div class="orb orb-3"></div>
        
        <div class="login-card" id="loginCard">
            <div class="login-logo" style="margin-bottom: 30px;">
                <img src="<?= ASSETS_URL ?>/image/koperasi.png" alt="Logo Koperasi" style="width: 140px; height: auto; margin: 0 auto 15px auto; display: block;">
                <span style="color: rgba(255,255,255,0.4); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px;">Management System</span>
            </div>

            <?php if ($error): ?>
                <div class="alert alert-danger" style="margin-bottom: 20px;" id="errorAlert">
                    <i class="fas fa-exclamation-circle"></i>
                    <?= htmlspecialchars($error) ?>
                </div>
            <?php endif; ?>

            <form method="POST" class="login-form" id="loginForm">
                <div class="form-group">
                    <div class="input-wrapper">
                        <input type="text" name="username" id="username" placeholder="Masukkan username" 
                               value="<?= htmlspecialchars($username ?? '') ?>" required autofocus>
                        <i class="fas fa-user"></i>
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-wrapper">
                        <input type="password" name="password" id="password" placeholder="Masukkan password" required>
                        <i class="fas fa-lock"></i>
                        <button type="button" class="toggle-password" id="togglePassword">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>

                <button type="submit" class="login-btn" id="loginBtn">
                    <span class="btn-text"><i class="fas fa-sign-in-alt"></i> Masuk</span>
                </button>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loginForm = document.getElementById('loginForm');
            const loginBtn = document.getElementById('loginBtn');
            const loginCard = document.getElementById('loginCard');
            const errorAlert = document.getElementById('errorAlert');

            // Check if there's an error message - trigger shake animation
            if (errorAlert) {
                setTimeout(() => {
                    loginCard.classList.add('shake');
                    // Remove shake class after animation completes
                    setTimeout(() => {
                        loginCard.classList.remove('shake');
                    }, 500);
                }, 100);
            }

            // Handle form submission with loading state
            loginForm.addEventListener('submit', function(e) {
                // Add loading state to button
                loginBtn.classList.add('loading');
                
                // Get input values
                const username = document.getElementById('username').value.trim();
                const password = document.getElementById('password').value;

                // Basic validation feedback
                if (!username || !password) {
                    loginBtn.classList.remove('loading');
                    return;
                }

                // The form will submit normally - the loading state provides visual feedback
                // Button will remain in loading state during form submission
            });

            // Add focus effects for inputs
            const inputs = document.querySelectorAll('.login-form input');
            inputs.forEach(input => {
                input.addEventListener('focus', function() {
                    this.parentElement.classList.add('focused');
                });
                
                input.addEventListener('blur', function() {
                    this.parentElement.classList.remove('focused');
                });
            });

            // Toggle password visibility
            const togglePassword = document.getElementById('togglePassword');
            const passwordInput = document.getElementById('password');
            
            togglePassword.addEventListener('click', function(e) {
                e.preventDefault();
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                
                // Toggle icon
                const icon = togglePassword.querySelector('i');
                if (type === 'password') {
                    icon.classList.remove('fa-eye-slash');
                    icon.classList.add('fa-eye');
                } else {
                    icon.classList.remove('fa-eye');
                    icon.classList.add('fa-eye-slash');
                }
            });
        });
    </script>
</body>
</html>
