<?php
require_once __DIR__ . '/config/session.php';
require_once __DIR__ . '/functions/csrf.php';
require_once __DIR__ . '/functions/helper.php';

// Jika sudah login, redirect
if (!empty($_SESSION['user_id'])) {
    if (($_SESSION['role'] ?? '') === 'admin') {
        header('Location: ' . BASE_URL . '/admin/dashboard');
    } else {
        header('Location: ' . BASE_URL . '/user/profil');
    }
    exit;
}

$profil_web = getProfilPosyandu();
$nama_posyandu = $profil_web['nama_posyandu'] ?? APP_NAME;
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - <?= escape($nama_posyandu) ?></title>
    <link rel="icon" type="image/x-icon" href="<?= getLogoUrl() ?>">
    <!-- Tailwind CSS (Compiled) -->
    <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/style.css">
    <!-- Alpine.js -->
    <script defer src="<?= BASE_URL ?>/assets/js/alpine.min.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="<?= BASE_URL ?>/assets/fontawesome/css/all.min.css">
    <!-- Google Fonts -->
    <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/inter.css">
    <style>
        body { font-family: 'Inter', sans-serif; background-color: #F0F9FF; }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">

    <div class="w-full max-w-md">
        <!-- Branding -->
        <div class="text-center mb-8">
            <img src="<?= getLogoUrl() ?>" alt="Logo" class="w-16 h-16 object-contain mx-auto mb-4 drop-shadow-lg">
            <h1 class="text-2xl font-bold text-gray-900 mb-1 tracking-wide"><?= escape($nama_posyandu) ?></h1>
            <p class="text-gray-500 text-sm">Sistem Digitalisasi Layanan Posyandu</p>
        </div>

        <!-- Form Card -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-8">
            <div class="mb-6 text-center">
                <h2 class="text-xl font-bold text-gray-800 mb-1">Selamat Datang</h2>
                <p class="text-gray-500 text-sm">Masukkan username dan password Anda.</p>
            </div>

            <!-- Flash Messages -->
            <?php 
            $flash = getFlash();
            if ($flash): 
                $bgColor = $flash['type'] === 'success' ? 'bg-sky-50 border-sky-500 text-sky-700' : 'bg-red-50 border-red-500 text-red-700';
                $icon = $flash['type'] === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';
            ?>
                <div x-data="{ show: true }" x-show="show" class="mb-6 border-l-4 p-4 <?= $bgColor ?> flex justify-between items-center rounded-r">
                    <div class="flex items-center text-sm">
                        <i class="fas <?= $icon ?> mr-2"></i>
                        <span><?= escape($flash['message']) ?></span>
                    </div>
                    <button @click="show = false" class="text-current opacity-70 hover:opacity-100 focus:outline-none"><i class="fas fa-times"></i></button>
                </div>
            <?php endif; ?>

            <form action="auth/login_process" method="POST" class="space-y-5">
                <?= csrfField() ?>
                
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username / NIK</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-user text-gray-400"></i>
                        </div>
                        <input type="text" name="username" id="username" class="pl-10 w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-primary transition-colors bg-gray-50 focus:bg-white text-gray-900" placeholder="Masukkan username" required>
                    </div>
                </div>

                <div x-data="{ showPassword: false }">
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-lock text-gray-400"></i>
                        </div>
                        <input :type="showPassword ? 'text' : 'password'" name="password" id="password" class="pl-10 w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-primary transition-colors bg-gray-50 focus:bg-white text-gray-900" placeholder="password" required>
                        <button type="button" @click="showPassword = !showPassword" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 focus:outline-none">
                            <i class="fas" :class="showPassword ? 'fa-eye-slash' : 'fa-eye'"></i>
                        </button>
                    </div>
                </div>

                <button type="submit" class="w-full bg-primary hover:bg-primary-dark text-white font-bold py-3 px-4 rounded-xl shadow-lg shadow-primary/30 transform transition-all hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                    Masuk Sekarang
                </button>
            </form>
            
        </div>

        <!-- Back link -->
        <div class="mt-6 text-center">
            <a href="<?= BASE_URL ?>/" class="inline-flex items-center text-sm font-medium text-gray-500 hover:text-primary transition-colors">
                <i class="fas fa-arrow-left mr-2"></i> Kembali ke Beranda
            </a>
        </div>
    </div>

</body>
</html>


