<?php
// navbar.php
// Assumes $user and $conn are already available from layout.php

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

$user_id = $_SESSION['user_id'] ?? 0;

// Fetch unread notifications count
$unread = 0;
if ($user_id && isset($conn)) {
    $stmt = $conn->prepare("SELECT COUNT(*) as total FROM notifications WHERE user_id=? AND is_read=0");
    if ($stmt) {
        $stmt->bind_param("i", $user_id);
        $stmt->execute();
        $unread = $stmt->get_result()->fetch_assoc()['total'] ?? 0;
        $stmt->close();
    }
}
?>

<nav class="navbar">
    <!-- Logo -->
    <div class="logo">
        <img src="/assets/images/logo.png" alt="Bank Logo" style="width:150px;">
    </div>

    <!-- Right Section -->
    <div class="nav-links">
        <!-- 🔔 Notifications -->
        <a href="/user/notifications.php" class="notifications-link">
            🔔
            <?php if ($unread > 0): ?>
                <span class="notification-badge"><?= $unread ?></span>
            <?php endif; ?>
        </a>

        <!-- User Profile -->
        <div class="profile-section">
            <?php if (!empty($user['profile_photo'])): ?>
                <img src="/uploads/profile_photos/<?= htmlspecialchars($user['profile_photo']); ?>" 
     alt="Profile Photo" 
     class="profile-photo">
            <?php else: ?>
                <div class="profile-initials">
                    <?= strtoupper(substr($user['first_name'], 0, 1) . substr($user['last_name'], 0, 1)) ?>
                </div>
            <?php endif; ?>
            <span class="user-name"><?= htmlspecialchars($user['first_name'] . ' ' . $user['last_name']) ?></span>
        </div>

        <!-- Links -->
        <a href="/user/dashboard.php" class="navbar-link">🏠</a>
        <a href="/auth/logout.php" class="navbar-link">Logout</a>
    </div>
</nav>

<!-- Spacer to push page content below navbar -->
<div class="navbar-spacer"></div>

<style>
    /* Navbar Styling */
    .navbar {
        background: #003366; /* Same as sidebar and footer */
        padding: 10px 20px;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
    }

    /* Make the logo bigger */
    .logo-img {
    width: 240px;   /* change this to make bigger/smaller */
    height: auto;   /* keeps proportions correct */
}

    .nav-links {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    /* Notifications */
    .notifications-link {
        position: relative;
        color: white;
        text-decoration: none;
        font-size: 20px;
    }

    .notification-badge {
        position: absolute;
        top: -6px;
        right: -10px;
        background: red;
        color: white;
        font-size: 11px;
        padding: 2px 6px;
        border-radius: 50%;
        font-weight: bold;
    }

    /* Profile Section */
    .profile-section {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .profile-photo {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid white;
    }

    .profile-initials {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background: #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #555;
        font-size: 14px;
    }

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

    /* Navbar Links */
    .navbar-link {
        color: white;
        text-decoration: none;
        font-size: 18px;
    }

    .navbar-link:hover {
        color: #f1f1f1;
    }

    /* Spacer below navbar */
    .navbar-spacer {
        height: 80px; /* Increased height to account for the larger navbar */
    }

    /* Sidebar Padding Adjustment */
    .sidebar {
        padding-top: 80px; /* Added top padding to push the sidebar content below the navbar */
    }

    /* Responsive Styles */
    @media (max-width: 768px) {
        .navbar {
            padding: 10px;
        }

        .nav-links {
            gap: 15px;
        }

        .profile-section span {
            display: none; /* Hide the full name on smaller screens */
        }

        .profile-photo {
            width: 30px;
            height: 30px;
        }
    }
</style>