script.js

// Open and Close of Navbar
const burgerIcon = document.getElementById('icon');
const navMenu = document.querySelector('.nav_menu2');
const header = document.querySelector('.header');
const btnvar1 = document.getElementById('btn1');
const addbtn1 = document.getElementById('addBtn1');
const btnvar2 = document.getElementById('btn2');
const addbtn2 = document.getElementById('addBtn2');
const btnvar3 = document.getElementById('btn3');
const addbtn3 = document.getElementById('addBtn3');
const btnvar4 = document.getElementById('btn4');
const addbtn4 = document.getElementById('addBtn4');
const stars = document.querySelectorAll('.items-star i');
const copyright = document.querySelector('#copyright p span');

// Dark Mode button Function
const checkbox = document.getElementById('checkbox');
checkbox.addEventListener('change', () => {
  document.body.classList.toggle('dark');
});
burgerIcon.addEventListener('click', () => {
  console.log('Hello');
  burgerIcon.classList.toggle('fa-bars');
  burgerIcon.classList.toggle('fa-xmark');
  navMenu.classList.toggle('show');
});

function Toggle1() {
  if (btnvar1.style.color == 'red') {
    btnvar1.style.color = 'gray';
  } else {
    btnvar1.style.color = 'red';
  }
}
function tog1() {
  if (addbtn1.style.color == 'green') {
    addbtn1.style.color = 'gray';
    addbtn1.style.backgroundColor = '#d9d9d9';
    addbtn1.style.borderStyle = 'none';
  } else {
    addbtn1.style.color = 'green';
    addbtn1.style.borderColor = '#e8f6e8';
    addbtn1.style.borderColor = 'yellowgreen';
    addbtn1.style.borderStyle = 'solid';
  }
}
function Toggle2() {
  if (btnvar2.style.color == 'red') {
    btnvar2.style.color = 'gray';
  } else {
    btnvar2.style.color = 'red';
  }
}
function tog2() {
  if (addbtn2.style.color == 'green') {
    addbtn2.style.color = 'gray';
    addbtn2.style.backgroundColor = '#d9d9d9';
    addbtn2.style.borderStyle = 'none';
  } else {
    addbtn2.style.color = 'green';
    addbtn2.style.borderColor = '#e8f6e8';
    addbtn2.style.borderColor = 'yellowgreen';
    addbtn2.style.borderStyle = 'solid';
  }
}
function Toggle3() {
  if (btnvar3.style.color == 'red') {
    btnvar3.style.color = 'gray';
  } else {
    btnvar3.style.color = 'red';
  }
}
function tog3() {
  if (addbtn3.style.color == 'green') {
    addbtn3.style.color = 'gray';
    addbtn3.style.backgroundColor = '#d9d9d9';
    addbtn3.style.borderStyle = 'none';
  } else {
    addbtn3.style.color = 'green';
    addbtn3.style.borderColor = '#e8f6e8';
    addbtn3.style.borderColor = 'yellowgreen';
    addbtn3.style.borderStyle = 'solid';
  }
}
function Toggle4() {
  if (btnvar4.style.color == 'red') {
    btnvar4.style.color = 'gray';
  } else {
    btnvar4.style.color = 'red';
  }
}
function tog4() {
  if (addbtn4.style.color == 'green') {
    addbtn4.style.color = 'gray';
    addbtn4.style.backgroundColor = '#d9d9d9';
    addbtn4.style.borderStyle = 'none';
  } else {
    addbtn4.style.color = 'green';
    addbtn4.style.borderColor = '#e8f6e8';
    addbtn4.style.borderColor = 'yellowgreen';
    addbtn4.style.borderStyle = 'solid';
  }
}

stars.forEach((star, index1) => {
  star.addEventListener('click', () => {
    stars.forEach((star, index2) => {
      index1 >= index2
        ? star.classList.add('active')
        : star.classList.remove('active');
    });
  });
});

// Copyright link {clickable}
copyright.addEventListener('click', function () {
  window.open('https://codervivek.live/', '_blank');
});

// Path: VigyBag/script.js

// Show Pop-Up
// Get the modal
var ebModal = document.getElementById('mySizeChartModal');
var ebBtn = document.getElementById('mySizeChart');
var ebSpan = document.getElementsByClassName('ebcf_close')[0];
var modalImg = document.getElementById('modalImage');

ebBtn = function () {
  ebModal.style.display = 'block';
  const svgElement = icon.querySelector('#wishlist-svg');
  svgElement.setAttribute('stroke', 'red');
};
const wishlistStatus = {};

function changeColor(event, itemId) {
  event.stopPropagation();
  wishlistStatus[itemId] = !wishlistStatus[itemId];
  const wishlistButton = document.querySelector(
    `.wishlist-icon[data-item-id="${itemId}"]`,
  );
  if (wishlistButton) {
    if (wishlistStatus[itemId]) {
      wishlistButton.style.color = 'red';
      wishlistButton.querySelector('svg path').setAttribute('fill', 'red');
    } else {
      wishlistButton.style.color = '';
      wishlistButton.querySelector('svg path').removeAttribute('fill');
    }
  }
}

ebSpan.onclick = function () {
  ebModal.style.display = 'none';
};

window.onclick = function (event) {
  if (event.target == ebModal) {
    ebModal.style.display = 'none';
  }
};

// Search functionality -\
function searchProduct() {
  const searchInput = document.getElementById('search');
  const itemCards = document.querySelectorAll('.item-card');
  const itemSections = document.querySelectorAll('.item-row');
  const seeMoreLinks = document.querySelectorAll('.see-more-text');

  const searchQuery = searchInput.value.trim().toLowerCase();

  itemCards.forEach(item => {
    const itemTitle = item
      .querySelector('.item-heading a')
      .innerText.toLowerCase();
    if (itemTitle.includes(searchQuery)) {
      item.style.display = 'block';
      item.closest('.item-row').style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  });

  // Show the item sections if at least one item is visible in them
  itemSections.forEach(section => {
    const visibleItems = section.querySelectorAll(
      '.item-card[style="display: block;"]',
    );
    if (visibleItems.length > 0) {
      section.style.display = 'block';
    } else {
      section.style.display = 'none';
    }
  });

  // Hide the "See more..." links if the corresponding section has no visible items
  seeMoreLinks.forEach(link => {
    const section = link.previousElementSibling;
    const visibleItems = section.querySelectorAll(
      '.item-card[style="display: block;"]',
    );
    if (visibleItems.length > 0) {
      link.style.display = 'block';
    } else {
      link.style.display = 'none';
    }
  });
}

// Function to show all items and "See more..." links when clearing the search
function clearSearch() {
  const itemCards = document.querySelectorAll('.item-card');
  const itemSections = document.querySelectorAll('.item-row');
  const seeMoreLinks = document.querySelectorAll('.see-more-text');

  itemCards.forEach(item => {
    item.style.display = 'block';
  });

  itemSections.forEach(section => {
    section.style.display = 'block';
  });

  seeMoreLinks.forEach(link => {
    link.style.display = 'block';
  });
}

//left and right scroll on item cards div
function itemCardsLeftScroll(id) {
  const cardWidth =
    document.getElementsByClassName('item-cards-div')[id].children[0]
      .offsetWidth;
  document.getElementsByClassName('item-cards-div')[id].scrollLeft -=
    4 * cardWidth;
}

function itemCardsRightScroll(id) {
  const cardWidth =
    document.getElementsByClassName('item-cards-div')[id].children[0]
      .offsetWidth;
  document.getElementsByClassName('item-cards-div')[id].scrollLeft +=
    4 * cardWidth;
}