<?php

$stmt = $pdo->prepare("
SELECT COUNT(*) 
FROM notifications
WHERE user_id=?
AND is_read=0
");

$stmt->execute([$_SESSION['user_id']]);

$unreadNotifications = $stmt->fetchColumn();

/*
|--------------------------------------------------------------------------
| Latest Notifications
|--------------------------------------------------------------------------
*/

$stmt = $pdo->prepare("
SELECT *
FROM notifications
WHERE user_id=?
ORDER BY created_at DESC
LIMIT 5
");

$stmt->execute([$_SESSION['user_id']]);

$latestNotifications = $stmt->fetchAll(PDO::FETCH_ASSOC);

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="topbar">

    <div class="topbar-left">

        <button class="menu-toggle">

            <i class="fas fa-bars"></i>

        </button>

        <h3>Member Dashboard</h3>

    </div>

    <div class="topbar-right">

       <div class="notification-bell">

    <button type="button" id="notificationToggle">

        <i class="fas fa-bell"></i>

        <?php if($unreadNotifications > 0): ?>

            <span class="notification-count">

                <?= $unreadNotifications; ?>

            </span>

        <?php endif; ?>

    </button>

    <div class="notification-dropdown" id="notificationDropdown">

        <div class="notification-header">

            <h4>Notifications</h4>

        </div>

<div class="notification-body">

<?php if(count($latestNotifications)>0): ?>

<?php foreach($latestNotifications as $note): ?>

<div class="dropdown-notification">

<strong>

<?= htmlspecialchars($note['title']); ?>

</strong>

<p>

<?= htmlspecialchars($note['message']); ?>

</p>

<small>

<?= date("d M Y h:i A",strtotime($note['created_at'])); ?>

</small>

</div>

<?php endforeach; ?>

<?php else: ?>

<p>No notifications yet.</p>

<?php endif; ?>

</div>

        <div class="notification-footer">

            <a href="notifications.php">

                View All

            </a>

        </div>

    </div>

</div>

        <div class="admin-profile">

            <div class="profile-info">

                <span>Welcome</span>

                <small><?= htmlspecialchars($_SESSION['fullname']); ?></small>

            </div>

<div class="profile-avatar">

    <?php

    include_once "../config/database.php";

    $avatarStmt = $pdo->prepare("
        SELECT profile_picture
        FROM users
        WHERE id=?
        LIMIT 1
    ");

    $avatarStmt->execute([$_SESSION['user_id']]);

    $avatarUser = $avatarStmt->fetch(PDO::FETCH_ASSOC);

    ?>

    <?php if(!empty($avatarUser['profile_picture'])): ?>

        <img
            src="../uploads/profile/<?= htmlspecialchars($avatarUser['profile_picture']); ?>"
            alt="Profile Picture"
        >

    <?php else: ?>

        <i class="fas fa-user"></i>

    <?php endif; ?>

</div>

        </div>

    </div>

</div>


<script>

const bell=document.getElementById("notificationToggle");
const dropdown=document.getElementById("notificationDropdown");

bell.onclick=function(e){

    e.stopPropagation();

    if(dropdown.style.display==="block"){

        dropdown.style.display="none";

    }else{

        dropdown.style.display="block";

        fetch("read_notifications.php")
        .then(response=>response.text())
        .then(()=>{

            const badge=document.querySelector(".notification-count");

            if(badge){

                badge.remove();

            }

        });

    }

}

document.onclick=function(){

    dropdown.style.display="none";

}

</script>


</body>
</html>