<?php
/**
 * Admin Navbar
 * Patel E-Mitra & Aadhaar Seva Kendra CMS
 */

$current_user = getCurrentUser();
?>

<header class="bg-white shadow-sm border-b border-gray-200">
    <div class="px-6 py-4">
        <div class="flex items-center justify-between">
            <!-- Left: Menu Button & Page Title -->
            <div class="flex items-center gap-4">
                <button id="mobile-menu-btn" onclick="toggleSidebar()" class="text-gray-600 hover:text-gray-900 lg:hidden">
                    <i class="fa-solid fa-bars text-xl"></i>
                </button>
                <h1 class="text-2xl font-bold text-gray-800"><?php echo sanitize($page_title); ?></h1>
            </div>
            
            <!-- Right: User Menu -->
            <div class="flex items-center gap-4">
                <!-- View Website -->
                <a href="<?php echo SITE_URL; ?>" target="_blank" class="text-gray-600 hover:text-blue-600 transition" title="View Website">
                    <i class="fa-solid fa-external-link-alt text-lg"></i>
                </a>
                
                <!-- Notifications -->
                <div class="relative">
                    <button class="text-gray-600 hover:text-gray-900 transition relative">
                        <i class="fa-solid fa-bell text-xl"></i>
                        <?php
                        $db = getDB();
                        $stmt = $db->query("SELECT COUNT(*) as count FROM enquiries WHERE status = 'new'");
                        $new_enquiries = $stmt->fetch()['count'];
                        
                        $stmt = $db->query("SELECT COUNT(*) as count FROM appointments WHERE status = 'pending'");
                        $pending_appointments = $stmt->fetch()['count'];
                        
                        $total_notifications = $new_enquiries + $pending_appointments;
                        ?>
                        <?php if ($total_notifications > 0): ?>
                            <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                                <?php echo $total_notifications; ?>
                            </span>
                        <?php endif; ?>
                    </button>
                </div>
                
                <!-- User Dropdown -->
                <div class="relative" x-data="{ open: false }">
                    <button onclick="toggleUserMenu()" class="flex items-center gap-3 text-gray-700 hover:text-gray-900 transition">
                        <div class="w-10 h-10 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center text-white font-bold">
                            <?php echo strtoupper(substr($current_user['full_name'], 0, 1)); ?>
                        </div>
                        <div class="hidden md:block text-left">
                            <p class="text-sm font-semibold"><?php echo sanitize($current_user['full_name']); ?></p>
                            <p class="text-xs text-gray-500"><?php echo ucfirst($current_user['role']); ?></p>
                        </div>
                        <i class="fa-solid fa-chevron-down text-xs"></i>
                    </button>
                    
                    <!-- Dropdown Menu -->
                    <div id="userMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
                        <a href="<?php echo SITE_URL; ?>/admin/profile.php" class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100 transition">
                            <i class="fa-solid fa-user w-5"></i>
                            <span>Profile</span>
                        </a>
                        <a href="<?php echo SITE_URL; ?>/admin/settings.php" class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100 transition">
                            <i class="fa-solid fa-gear w-5"></i>
                            <span>Settings</span>
                        </a>
                        <hr class="my-2">
                        <a href="<?php echo SITE_URL; ?>/admin/logout.php" class="flex items-center gap-3 px-4 py-2 text-red-600 hover:bg-red-50 transition">
                            <i class="fa-solid fa-right-from-bracket w-5"></i>
                            <span>Logout</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<script>
function toggleUserMenu() {
    const menu = document.getElementById('userMenu');
    menu.classList.toggle('hidden');
}

// Close dropdown on outside click
document.addEventListener('click', function(e) {
    const menu = document.getElementById('userMenu');
    if (!e.target.closest('[x-data]')) {
        menu.classList.add('hidden');
    }
});
</script>
