script.js

document.addEventListener('DOMContentLoaded', function () {
    // Select all arrow elements
    const arrows = document.querySelectorAll('.arrow i');

    // Add click event listener to each arrow
    arrows.forEach(arrow => {
        arrow.addEventListener('click', function () {
            // Find the parent filter-section and toggle the filter-content visibility
            const filterSection = this.closest('.filter-section');
            const filterContent = filterSection.querySelector('.filter-content');

            // Toggle the visibility of the filter content
            filterContent.style.display = filterContent.style.display === 'none' ? 'block' : 'none';

            // Toggle the arrow icon (up/down)
            this.classList.toggle('fa-angle-up');
            this.classList.toggle('fa-angle-down');
        });
    });
});

// ❤️ to be colored

document.addEventListener('DOMContentLoaded', function () {
    const wishlistIcons = document.querySelectorAll('.wishlist-icon');

    // Loop through all wishlist icons and add event listeners
    wishlistIcons.forEach(icon => {
        icon.addEventListener('click', function () {
            this.querySelector('i').classList.toggle('fa-solid');
            this.querySelector('i').classList.toggle('fa-regular');
            console.log("Heart pressed on a product!");
        });
    });
});


// Get references to elements
const listViewBtn = document.getElementById('listViewBtn');
const gridViewBtn = document.getElementById('gridViewBtn');
const productContainer = document.getElementById('productContainer');

// Function to set the view
function setView(viewType) {
    if (viewType === 'list') {
        productContainer.classList.add('list-view');
        productContainer.classList.remove('grid-view');
        listViewBtn.classList.add('active');
        gridViewBtn.classList.remove('active');
    } else if (viewType === 'grid') {
        productContainer.classList.add('grid-view');
        productContainer.classList.remove('list-view');
        gridViewBtn.classList.add('active');
        listViewBtn.classList.remove('active');
    }
}

document.addEventListener('DOMContentLoaded', function () {
    const filterContainer = document.querySelector('.filter-component-container');
    const clearAllLink = document.querySelector('.clear-all-filter');
    const checkboxes = document.querySelectorAll('.filter-section input[type="checkbox"], .filter-section input[type="radio"]');

    // Function to create a filter tag
    function createFilterTag(labelText) {
        const tag = document.createElement('div');
        tag.className = 'filter-tag';
        tag.innerHTML = `
        <span class="filter-text">${labelText}</span>
        <button class="filter-close-icon">×</button>
        `;
        return tag;
    }

    // Add event listeners to checkboxes/radios
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function () {
            const labelText = this.nextSibling.textContent.trim();
            if (this.checked) {
                const tag = createFilterTag(labelText);
                filterContainer.insertBefore(tag, clearAllLink);
            } else {
                // Remove the corresponding tag if unchecked
                const tags = document.querySelectorAll('.filter-tag .filter-text');
                tags.forEach(tag => {
                    if (tag.textContent === labelText) {
                        tag.parentElement.remove();
                    }
                });
            }
        });
    });

    // Remove tag when close button is clicked
    filterContainer.addEventListener('click', function (e) {
        if (e.target.classList.contains('filter-close-icon')) {
            e.target.parentElement.remove();
            // Uncheck the corresponding checkbox/radio
            const labelText = e.target.previousElementSibling.textContent;
            checkboxes.forEach(checkbox => {
                if (checkbox.nextSibling.textContent.trim() === labelText) {
                    checkbox.checked = false;
                }
            });
        }
    });

    // Clear all filters
    clearAllLink.addEventListener('click', function (e) {
        e.preventDefault();
        filterContainer.querySelectorAll('.filter-tag').forEach(tag => tag.remove());
        checkboxes.forEach(checkbox => {
            checkbox.checked = false;
        });
    });
});

// Add event listeners to buttons
listViewBtn.addEventListener('click', () => setView('list'));
gridViewBtn.addEventListener('click', () => setView('grid'));

// Optional: Save preferred view in localStorage
window.addEventListener('DOMContentLoaded', () => {
    const savedView = localStorage.getItem('productView') || 'list'; // Default to list
    setView(savedView);
});

listViewBtn.addEventListener('click', () => {
    setView('list');
    localStorage.setItem('productView', 'list');
});

gridViewBtn.addEventListener('click', () => {
    setView('grid');
    localStorage.setItem('productView', 'grid');
});