<!-- JavaScript for Notifications -->
  <script>
     // Reference to the badge element
  const messageBadgeEl = document.getElementById("message-badge");

  // Counter for total messages
  let totalMessageCount = 0;

  // Function to update the notification badge
  function updateNotificationBadge() {
    messageBadgeEl.textContent = totalMessageCount; // Update count
    if (totalMessageCount > 0) {
      messageBadgeEl.classList.add("show"); // Show badge
    } else {
      messageBadgeEl.classList.remove("show"); // Hide badge
    }
  }

  // Function to reset the notification badge to zero
  function resetNotificationBadge() {
    totalMessageCount = 0; // Reset the count
    updateNotificationBadge(); // Update the badge to reflect the reset
  }

  // Simulate message updates (increment count every 5 seconds)
  setInterval(() => {
    totalMessageCount++; // Increment count
    updateNotificationBadge(); // Update the badge
  }, 9999999000); // Adjust this interval as needed


    // Notification for New Messages
    const messageNotificationURL = "/mapi"; // Endpoint for new messages
    const messageNotificationEl = document.getElementById("notification-message");
    const messageNotificationLink = document.getElementById("notification-link-message");
    let lastMessageNotification = null;
    const messageNotificationSoundURL = "https://cdn.wapka.io/00fas8/6c048d0d070267ef24f9c2d18ef75d3a/ping.mp3"; 
    const messageNotificationAudio = new Audio(messageNotificationSoundURL);

    async function fetchMessageNotification() {
      try {
        const response = await fetch(messageNotificationURL);
        const data = await response.json();

        if (JSON.stringify(data) !== JSON.stringify(lastMessageNotification)) {
          lastMessageNotification = data;

          // Update content
          messageNotificationEl.querySelector("img").src = data.image || "https://img.wapka.io/00f99v.png";
          messageNotificationEl.querySelector("h4").textContent = data.title || "New Message";
          messageNotificationEl.querySelector("p").textContent = data.message || "You have a new message";

          // Correctly set the onclick with template literals
          messageNotificationLink.setAttribute("onclick", `openPrivateMessageModal('${data.uid}', '${data.uname}')`);

          // Play notification sound
          messageNotificationAudio.play().catch(error => {
            console.error("Failed to play notification sound:", error);
          });

          // Show notification
          messageNotificationEl.classList.add("show");

          // Increment the message count and update the badge
          totalMessageCount++;
          updateNotificationBadge();

          // Hide notification after 5 seconds
          setTimeout(() => hideNotificationMessage(), 5000);
        }
      } catch (error) {
        console.error("Failed to fetch message notification:", error);
      }
    }

    // Hide message notification
    function hideNotificationMessage() {
      messageNotificationEl.classList.remove("show");
    }

    // Set intervals to fetch message notifications
    setInterval(fetchMessageNotification, 1000);

    // Notification for Users Online
    const onlineNotificationURL = "/napi"; // Endpoint for users online
    const onlineNotificationEl = document.getElementById("notification-online");
    const onlineNotificationLink = document.getElementById("notification-link-online");
    let lastOnlineNotification = null;

    async function fetchOnlineNotification() {
      try {
        const response = await fetch(onlineNotificationURL);
        const data = await response.json();

        if (JSON.stringify(data) !== JSON.stringify(lastOnlineNotification)) {
          lastOnlineNotification = data;

          // Update content
          onlineNotificationEl.querySelector("img").src = data.image || "https://img.wapka.io/00f99v.png";
          onlineNotificationEl.querySelector("h4").textContent = data.title || "User Online";
          onlineNotificationEl.querySelector("p").textContent = data.message || "A user is online";

          // Correctly set the onclick with template literals
          onlineNotificationLink.setAttribute("onclick", `openPrivateMessageModal('${data.uid}', '${data.uname}')`);

          // Show notification
          onlineNotificationEl.classList.add("show");

          // Hide notification after 3 seconds
          setTimeout(() => hideNotificationOnline(), 3000);
        }
      } catch (error) {
        console.error("Failed to fetch online notification:", error);
      }
    }

    // Hide online notification
    function hideNotificationOnline() {
      onlineNotificationEl.classList.remove("show");
    }

    // Set intervals to fetch Online notifications
    setInterval(fetchOnlineNotification, 5000);
  </script>