<?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>Ibu Hamil - <?= 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; }
        [x-cloak] { display: none !important; }
    </style>
</head>
<body class="text-gray-800 antialiased" x-data="{ sidebarOpen: false, profileDropdownOpen: false }">

    <div class="flex h-screen overflow-hidden bg-gray-100">
        
        <!-- Sidebar Backdrop for Mobile -->
        <div x-show="sidebarOpen" x-transition.opacity class="fixed inset-0 z-20 bg-black bg-opacity-50 lg:hidden" @click="sidebarOpen = false"></div>
        
        <!-- Sidebar -->
        <?php include_once 'sidebar_user.php'; ?>

        <!-- Content Area -->
        <div class="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
            
            <!-- Topbar -->
            <header class="sticky top-0 z-40 flex w-full bg-white shadow-sm">
                <div class="flex items-center justify-between px-4 py-4 lg:px-8 w-full">
                    <div class="flex items-center gap-4">
                        <!-- Hamburger -->
                        <button @click="sidebarOpen = !sidebarOpen" class="p-1 text-gray-500 lg:hidden focus:outline-none focus:ring-2 focus:ring-primary rounded-md">
                            <i class="fas fa-bars text-xl"></i>
                        </button>
                        <h2 class="text-xl font-bold text-gray-800 hidden sm:block"></h2>
                    </div>

                    <!-- Right Topbar -->
                    <div class="flex items-center gap-4 relative">
                        <!-- Profil Dropdown -->
                        <div class="relative">
                            <button @click="profileDropdownOpen = !profileDropdownOpen" @click.away="profileDropdownOpen = false" class="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-gray-50 rounded-full hover:bg-gray-100 transition-colors focus:outline-none ring-2 ring-transparent focus:ring-primary/50">
                                <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center">
                                    <i class="fas fa-user"></i>
                                </div>
                                <span class="hidden sm:block"><?= escape($_SESSION['nama'] ?? 'Ibu Hamil') ?></span>
                                <i class="fas fa-chevron-down text-xs text-gray-400"></i>
                            </button>
                            
                            <!-- Dropdown Menu -->
                            <div x-show="profileDropdownOpen" x-transition.opacity class="absolute right-0 w-48 py-2 mt-2 bg-white rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none" x-cloak>
                                <div class="px-4 py-2 border-b border-gray-100">
                                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Masuk Sebagai</p>
                                    <p class="text-sm font-bold text-gray-900 truncate"><?= escape($_SESSION['nama'] ?? 'Ibu Hamil') ?></p>
                                </div>
                                <a href="<?= BASE_URL ?>/user/profil" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors"><i class="fas fa-user me-2"></i> Profil Saya</a>
                                <div class="border-t border-gray-100 my-1"></div>
                                <a href="<?= BASE_URL ?>/logout" class="block px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors"><i class="fas fa-sign-out-alt me-2"></i> Keluar</a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- Main Content Container -->
            <main class="w-full flex-grow p-4 lg:p-8">
                
                <!-- Flash Messages -->
                <?php 
                $flash = getFlash();
                if ($flash): 
                    $bgColor = 'bg-blue-50 border-blue-200 text-blue-700';
                    $icon = 'fa-info-circle text-blue-500';
                    if ($flash['type'] === 'success') { $bgColor = 'bg-sky-50 border-sky-200 text-sky-700'; $icon = 'fa-check-circle text-sky-500'; }
                    if ($flash['type'] === 'error') { $bgColor = 'bg-red-50 border-red-200 text-red-700'; $icon = 'fa-exclamation-circle text-red-500'; }
                    if ($flash['type'] === 'warning') { $bgColor = 'bg-yellow-50 border-yellow-200 text-yellow-700'; $icon = 'fa-exclamation-triangle text-yellow-500'; }
                ?>
                    <div x-data="{ show: true }" x-show="show" x-transition.opacity class="mb-6 border p-4 rounded-xl shadow-sm <?= $bgColor ?> flex justify-between items-center" 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-60 hover:opacity-100 focus:outline-none p-1">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                <?php endif; ?>

