<?php
require_once 'config.php';
require_once 'auth_helper.php';

// Redirect if already logged in
if (isset($_SESSION['user_id'])) {
    header('Location: dashboard.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!";
    } else {
        try {
            $stmt = $pdo->prepare("SELECT * FROM user WHERE username = :username");
            $stmt->execute([':username' => $username]);
            $user = $stmt->fetch();

            if ($user && password_verify($password, $user['password'])) {
                // Login Success
                $_SESSION['user_id'] = $user['id_user'];
                $_SESSION['username'] = $user['username'];
                $_SESSION['role'] = $user['role'];
                $_SESSION['nama_lengkap'] = $user['nama_lengkap'];

                // Redirect based on intent or default
                header('Location: dashboard.php');
                exit;
            } else {
                $error = "Username atau password salah!";
            }
        } catch (PDOException $e) {
            $error = "Terjadi kesalahan sistem.";
        }
    }
}
?>

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Sistem Informasi KUB Katedral</title>
    <link rel="stylesheet" href="style.css?v=<?= time() ?>">
</head>

<body class="auth-page">
    <div class="login-card">
        <div class="login-header">
            <h2 style="display: flex; align-items: center; justify-content: center; gap: 10px;">
                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#a88b3d" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                </svg>
                Sistem KUB Wilayah IV
            </h2>
            <p>Silakan masuk untuk mengakses sistem</p>
        </div>

        <?php if ($error): ?>
            <div class="error-msg">
                <?= $error ?>
            </div>
        <?php endif; ?>

        <form method="POST">
            <div class="form-group">
                <label>Username</label>
                <input type="text" name="username" required placeholder="Masukkan username"
                    value="<?= isset($_POST['username']) ? htmlspecialchars($_POST['username']) : '' ?>">
            </div>
            <div class="form-group">
                <label>Password</label>
                <div style="position: relative; display: flex; align-items: center; width: 100%;">
                    <input type="password" name="password" id="passwordField" required placeholder="Masukkan password" style="width: 100%; padding-right: 40px; box-sizing: border-box;">
                    <span id="togglePasswordBtn" style="position: absolute; right: 12px; cursor: pointer; color: #9b8e84; display: flex; transition: all 0.2s;" onmouseover="this.style.color='#a88b3d'; this.style.transform='scale(1.1)';" onmouseout="this.style.color='#9b8e84'; this.style.transform='scale(1)';">
                        <svg id="eyeIconImg" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
                            <circle cx="12" cy="12" r="3"></circle>
                        </svg>
                    </span>
                </div>
                <div style="text-align: right; margin-top: 8px;">
                    <a href="lupa_password.php" style="font-size: 13px; color: #a88b3d; text-decoration: none;">Lupa password?</a>
                </div>
            </div>
            <button type="submit" class="btn-login">Masuk</button>
        </form>

        <div class="register-link">
            Belum punya akun? <a href="register.php">Daftar di sini</a>
            <br><br>
            <a href="dashboard.php" style="color: #666; font-size: 13px;">← Kembali ke Dashboard</a>
        </div>
    </div>


    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const togglePasswordBtn = document.getElementById('togglePasswordBtn');
            const passwordField = document.getElementById('passwordField');
            const eyeIconImg = document.getElementById('eyeIconImg');

            if (togglePasswordBtn && passwordField && eyeIconImg) {
                togglePasswordBtn.addEventListener('click', function () {
                    const isPassword = passwordField.getAttribute('type') === 'password';
                    passwordField.setAttribute('type', isPassword ? 'text' : 'password');
                    
                    if (isPassword) {
                        // Eye-off icon (crossed)
                        eyeIconImg.innerHTML = '<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"></path><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"></path><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"></path><line x1="2" y1="2" x2="22" y2="22"></line>';
                    } else {
                        // Eye-on icon
                        eyeIconImg.innerHTML = '<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path><circle cx="12" cy="12" r="3"></circle>';
                    }
                });
            }
        });
    </script>
</body>

</html>
