<?php
require_once __DIR__ . '/app/config/session.php';
require_once __DIR__ . '/app/config/app.php';

// Ambil flash error jika ada
$login_error = getFlash('error');
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistem Informasi Masjid — Login</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="<?= base_url('/favicon.ico'); ?>">
    <link rel="shortcut icon" href="<?= base_url('/favicon.ico'); ?>" type="image/x-icon">
    <link rel="icon" type="image/png" href="<?= base_url('/favicon-16x16.png'); ?>">
    <link rel="apple-touch-icon" sizes="180x180" href="<?= base_url('/favicon-16x16.png'); ?>">
    <meta name="theme-color" content="#003049">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Amiri&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">

    <!-- Styles -->
    <link rel="stylesheet" href="<?= base_url('/assets/css/login/login.css'); ?>">
</head>

<body class="login-page">

    <!-- BACKGROUND (starfield, moon, fireflies) -->
    <div class="bg-wrap">
        <div id="stars-deep" class="stars-layer"></div>
        <div id="stars-mid" class="stars-layer"></div>
        <div id="stars-front" class="stars-layer"></div>
        <div class="moon"></div>
    </div>

    <!-- MAIN -->
    <main class="login-root">

        <!-- Kaligrafi -->
        <div class="kaligrafi-top">
            <img src="<?= base_url('/assets/img/src/assalamualaikum.png'); ?>"
                 alt="Assalamualaikum"
                 class="kaligrafi-img glow-pulse">
        </div>

        <!-- CARD LOGIN -->
        <div class="card-login">

            <?php if (!empty($login_error)): ?>
                <div class="alert alert-danger py-2 text-center mb-3">
                    <?= htmlspecialchars($login_error); ?>
                </div>
            <?php endif; ?>

            <h2 class="login-title">Masuk ke Akun</h2>

            <form action="<?= base_url('/app/auth/do_login.php'); ?>" method="POST" class="login-form">

                <label class="label-small">Username</label>
                <input type="text" name="username" class="input-ghost" required>

                <label class="label-small">Password</label>
                <input type="password" name="password" class="input-ghost" required>

                <button class="btn-gold" type="submit">Masuk</button>
            </form>

            <small class="copy-inside">
                © <?= date('Y') ?> Sistem Informasi Masjid — Dibuat dengan tenang.
            </small>
        </div>
    </main>

    <!-- FIREFLY FIELD -->
    <div id="fireflyField"></div>

    <!-- SCRIPTS -->
    <script type="module" src="<?= base_url('/assets/js/login.js'); ?>"></script>
    <script>
        const BASE_URL = "<?= base_url(); ?>";
    </script>

</body>
</html>
