script.js

const navbarMenu = document.getElementById('menu');
const burgerMenu = document.getElementById('burger');
const headerMenu = document.getElementById('header');

// Open Close Navbar Menu on Click Burger
if (burgerMenu && navbarMenu) {
  burgerMenu.addEventListener('click', () => {
    burgerMenu.classList.toggle('is-active');
    navbarMenu.classList.toggle('is-active');
  });
}

// Close Navbar Menu on Click Menu Links
document.querySelectorAll('.menu-link').forEach((link) => {
  link.addEventListener('click', () => {
    burgerMenu.classList.remove('is-active');
    navbarMenu.classList.remove('is-active');
  });
});

// Change Header Background on Scrolling
window.addEventListener('scroll', () => {
  if (window.scrollY >= 85) {
    headerMenu.classList.add('on-scroll');
  } else {
    headerMenu.classList.remove('on-scroll');
  }
});

// Fixed Navbar Menu on Window Resize
window.addEventListener('resize', () => {
  if (window.innerWidth > 768) {
    if (navbarMenu.classList.contains('is-active')) {
      navbarMenu.classList.remove('is-active');
    }
  }
});

// MARKETPLACE DROPDOWN
// Select all dropdown buttons
const dropdownButtons = document.querySelectorAll('.dropdown-button');

// Handle filtering based on dropdown selection
dropdownButtons.forEach((button) => {
  const dropdownContainer = button.closest('.dropdown-container');
  const dropdownMenu = dropdownContainer.querySelector('.dropdown-menu');

  // Toggle dropdown visibility for the clicked button
  button.addEventListener('click', (event) => {
    event.stopPropagation(); // Prevent click from propagating to the document

    // Close all other dropdowns first
    document.querySelectorAll('.dropdown-menu').forEach((menu) => {
      if (menu !== dropdownMenu) {
        menu.classList.remove('visible');
      }
    });

    // Toggle visibility of the current dropdown
    dropdownMenu.classList.toggle('visible');
  });

  // Handle item selection and update button text
  const dropdownItems = dropdownMenu.querySelectorAll('.dropdown-item');
  dropdownItems.forEach((item) => {
    item.addEventListener('click', () => {
      button.innerHTML = `${item.textContent} <span>&#9660;</span>`;
      dropdownMenu.classList.remove('visible'); // Close menu after selection

      // Get the selected filter from the dropdown
      const selectedFilter = item.textContent;

      // Filter the marketplace items based on the selected option
      filterMarketplaceItems(selectedFilter, button);
    });
  });
});

// Close all dropdowns when clicking outside
document.addEventListener('click', () => {
  document.querySelectorAll('.dropdown-menu').forEach((menu) => {
    menu.classList.remove('visible');
  });
});

// Filter marketplace items based on the selected dropdown option
function filterMarketplaceItems(selectedFilter, button) {
  const marketplaceItems = document.querySelectorAll('.marketplace-item');
  const itemsArray = Array.from(marketplaceItems); // Convert NodeList to Array

  // Handle rarity filtering
  if (button.closest('.dropdown').id === 'rarityDropdown') {
    // Check for the RARITY dropdown
    const selectedRarity = selectedFilter.toLowerCase();
    itemsArray.forEach((item) => {
      const itemRarity = item.getAttribute('data-rarity').toLowerCase();
      if (selectedRarity === 'all' || itemRarity === selectedRarity) {
        item.style.display = 'block'; // Show item
      } else {
        item.style.display = 'none'; // Hide item
      }
    });
  }

  // Handle price sorting
  if (button.closest('.dropdown').id === 'priceDropdown') {
    // Check for the PRICE dropdown
    if (selectedFilter === 'LOWEST TO HIGHEST') {
      // Sort items by price ascending
      itemsArray.sort(
        (a, b) =>
          parseFloat(a.getAttribute('data-price')) -
          parseFloat(b.getAttribute('data-price')),
      );
    } else if (selectedFilter === 'HIGHEST TO LOWEST') {
      // Sort items by price descending
      itemsArray.sort(
        (a, b) =>
          parseFloat(b.getAttribute('data-price')) -
          parseFloat(a.getAttribute('data-price')),
      );
    }

    // Reorder the DOM based on the sorted items
    const marketplaceGrid = document.querySelector('.marketplace-grid');
    itemsArray.forEach((item) => {
      marketplaceGrid.appendChild(item); // Append items in the new order
    });
  }
}

// MARKETPLACE CARD HOVER EFFECT

const cards = document.querySelectorAll('.marketplace-item'); // Select all cards
const popup = document.querySelector('.popup');
const closePopupBtn = document.querySelector('.popup-close');

const isMobile =
  /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) ||
  window.innerWidth <= 768;

cards.forEach(($card) => {
  $card.addEventListener('click', () => {
    popup.classList.add('active'); // Show the popup
    document.body.style.overflow = 'hidden';
  });
});

// Close the popup when the close button is clicked
if (closePopupBtn) {
  closePopupBtn.addEventListener('click', () => {
    popup.classList.remove('active'); // Hide the popup
    document.body.style.overflow = ''; // Reset to default
  });
}

if (popup) {
  // Close the popup when clicking on the background (but not on the popup content)
  popup.addEventListener('click', (event) => {
    if (event.target === popup) {
      popup.classList.remove('active'); // Hide the popup
      document.body.style.overflow = ''; // Reset to default
    }
  });
}