function openProfileModal() {
  updateProfileModal();
  document.getElementById("profileModal").style.display = "flex";
  document.body.classList.add("modal-open");
}

function closeProfileModal() {
  document.getElementById("profileModal").style.display = "none";
  document.body.classList.remove("modal-open");
}

function updateProfileModal() {
  // Update profile modal content
  document.getElementById("profileModalName").textContent = currentUser;
  document.getElementById("profileModalUsername").textContent = currentUser;
  document.getElementById("profileModalPhone").textContent = currentUserPhone;
  document.getElementById("profileModalPhoneNumber").textContent =
    currentUserPhone;

  // Update large avatar in modal
  const modalAvatar = document.getElementById("profileModalAvatar");
  if (currentUserAvatar) {
    modalAvatar.innerHTML = `<img src="${currentUserAvatar}" alt="${currentUser}">`;
  } else {
    modalAvatar.innerHTML = currentUser.charAt(0).toUpperCase();
  }

  // Add the upload overlay
  modalAvatar.innerHTML +=
    '<div class="avatar-upload-overlay">Change Photo</div>';
}

document.getElementById("profileModal").addEventListener("click", function (e) {
  if (e.target === this) {
    closeProfileModal();
  }
});