<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// Optional: get logged-in user data
$user_name = $_SESSION['user_name'] ?? 'Guest';
$user_photo = $_SESSION['user_photo'] ?? '/assets/images/default_profile.png';
?>

<header class="top-header">

    <div class="header-left">
        <button class="menu-toggle" onclick="toggleSidebar()">☰</button>

        <a href="/index.php" class="logo">
            <img src="/assets/images/logo.png" alt="DemoBank Logo">
        </a>
    </div>

    <div class="header-right">

        <!-- Notifications -->
        <div class="icon-box">
            <span class="icon">🔔</span>
        </div>

        <!-- User Profile -->
        <div class="user-box">
            <img src="<?= $user_photo ?>" alt="Profile" class="user-avatar">
            <span class="user-name"><?= htmlspecialchars($user_name) ?></span>

            <div class="dropdown">
                <a href="/user/profile.php">Profile</a>
                <a href="/user/settings.php">Settings</a>
                <a href="/auth/logout.php">Logout</a>
            </div>
        </div>

    </div>

</header>

<style>
/* =========================
   TOP HEADER STYLES
========================= */

.top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #003366; /* Bank Blue */
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.menu-toggle {
    font-size: 22px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

.logo img {
    height: 35px;
}

/* RIGHT SIDE */
.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.icon-box {
    font-size: 20px;
    cursor: pointer;
}

/* USER BOX */
.user-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.user-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
}

.user-name {
    font-size: 14px;
}

/* DROPDOWN */
.user-box .dropdown {
    display: none;
    position: absolute;
    top: 45px;
    right: 0;
    background: #fff;
    color: #000;
    min-width: 150px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.user-box:hover .dropdown {
    display: block;
}

.user-box .dropdown a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #000;
    font-size: 14px;
}

.user-box .dropdown a:hover {
    background: #f0f0f0;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .user-name {
        display: none;
    }
}
</style>

<script>
function toggleSidebar() {
    const sidebar = document.getElementById("sidebar");
    if (sidebar) {
        sidebar.classList.toggle("active");
    }
}
</script>