<?php 
require_once __DIR__ . '/../config/config.php'; 
require_once __DIR__ . '/../functions/helper.php';
$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><?= 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 for interactivity -->
    <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; }
        .glass-nav { background: rgba(14, 165, 233, 0.95); backdrop-filter: blur(10px); }
    </style>
</head>
<body class="min-h-screen flex flex-col text-gray-800">

<!-- Navbar -->
<nav x-data="{ open: false }" class="glass-nav fixed w-full z-50 transition-all duration-300 border-b border-white/10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex items-center">
                <a href="<?= BASE_URL ?>/" class="flex-shrink-0 flex items-center text-white gap-2 group">
                    <img src="<?= getLogoUrl() ?>" alt="Logo" class="w-10 h-10 object-contain drop-shadow-sm transition-transform group-hover:scale-105">
                    <span class="font-bold text-lg tracking-wide"><?= escape($nama_posyandu) ?></span>
                </a>
            </div>
            
            <!-- Desktop Menu -->
            <div class="hidden md:flex items-center space-x-6">
                <a href="<?= BASE_URL ?>/" class="text-white/90 hover:text-white font-medium transition-colors">Beranda</a>
                
                <?php if (isset($_SESSION['user_id'])): ?>
                    <?php if (($_SESSION['role'] ?? '') === 'admin'): ?>
                        <a href="<?= BASE_URL ?>/admin/dashboard" class="bg-gradient-to-r from-orange-400 to-orange-500 hover:bg-orange-500 text-white px-5 py-2 rounded-full font-medium transition-all shadow-lg shadow-accent/30 transform hover:-translate-y-0.5">Dashboard Admin</a>
                    <?php else: ?>
                        <a href="<?= BASE_URL ?>/user/profil" class="bg-gradient-to-r from-orange-400 to-orange-500 hover:bg-orange-500 text-white px-5 py-2 rounded-full font-medium transition-all shadow-lg shadow-accent/30 transform hover:-translate-y-0.5">Profil Saya</a>
                    <?php endif; ?>
                <?php else: ?>
                    <a href="<?= BASE_URL ?>/login" class="bg-white text-primary hover:bg-gray-50 px-6 py-2 rounded-full font-bold transition-all shadow-lg transform hover:-translate-y-0.5">Login</a>
                <?php endif; ?>
            </div>

            <!-- Mobile menu button -->
            <div class="flex items-center md:hidden">
                <button @click="open = !open" class="text-white p-2 rounded-lg hover:bg-white/10 focus:outline-none">
                    <i class="fas" :class="open ? 'fa-times text-xl' : 'fa-bars text-xl'"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile Menu -->
    <div x-show="open" x-transition.opacity class="md:hidden bg-primary-dark border-t border-white/10 absolute w-full">
        <div class="px-4 pt-2 pb-6 space-y-2 shadow-xl">
            <a href="<?= BASE_URL ?>/" class="block px-3 py-3 text-white font-medium rounded-lg hover:bg-white/10">Beranda</a>
            <div class="border-t border-white/10 my-2 pt-2"></div>
            <?php if (isset($_SESSION['user_id'])): ?>
                <?php if (($_SESSION['role'] ?? '') === 'admin'): ?>
                    <a href="<?= BASE_URL ?>/admin/dashboard" class="block px-3 py-3 text-accent font-bold rounded-lg hover:bg-white/10">Dashboard Admin</a>
                <?php else: ?>
                    <a href="<?= BASE_URL ?>/user/profil" class="block px-3 py-3 text-accent font-bold rounded-lg hover:bg-white/10">Profil Saya</a>
                <?php endif; ?>
            <?php else: ?>
                <a href="<?= BASE_URL ?>/login" class="block px-3 py-3 bg-white text-primary text-center font-bold rounded-lg mt-4 shadow-md">Login</a>
            <?php endif; ?>
        </div>
    </div>
</nav>

<!-- Main Content Wrapper -->
<main class="flex-grow pt-16 w-full flex flex-col">

    <!-- Flash Messages (Centered) -->
    <?php 
    $flash = getFlash();
    if ($flash): 
        $bgColor = 'bg-blue-100 border-blue-500 text-blue-700';
        $icon = 'fa-info-circle';
        if ($flash['type'] === 'success') { $bgColor = 'bg-sky-100 border-sky-500 text-sky-700'; $icon = 'fa-check-circle'; }
        if ($flash['type'] === 'error') { $bgColor = 'bg-red-100 border-red-500 text-red-700'; $icon = 'fa-exclamation-circle'; }
        if ($flash['type'] === 'warning') { $bgColor = 'bg-yellow-100 border-yellow-500 text-yellow-700'; $icon = 'fa-exclamation-triangle'; }
    ?>
        <div class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-6">
            <div x-data="{ show: true }" x-show="show" class="border-l-4 p-4 rounded-r shadow-sm <?= $bgColor ?> flex justify-between items-center animate-fade-in-down" role="alert">
            <div class="flex items-center">
                <i class="fas <?= $icon ?> text-xl mr-3"></i>
                <p class="font-medium"><?= escape($flash['message']) ?></p>
            </div>
                <button @click="show = false" class="text-current opacity-70 hover:opacity-100 focus:outline-none">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    <?php endif; ?>


