let cart = JSON.parse(localStorage.getItem("cart")) || [];

const products = [
    { id: 1, name: 'Wizzy Original', price: 7.00, },
    { id: 2, name: 'WIZZY Tropic Twist', price: 8.00, },
    { id: 3, name: 'Wizzy Zero', price: 7.00, },

   
];

// Filter and sort options
document.getElementById('color-filter').addEventListener('change', updateProductDisplay);
document.getElementById('price-filter').addEventListener('change', updateProductDisplay);
document.getElementById('material-filter').addEventListener('change', updateProductDisplay);
document.getElementById('length-filter').addEventListener('change', updateProductDisplay);

// Reset Filters Button
document.getElementById('reset-filters').addEventListener('click', resetFilters);

// Add product to cart
function addToCart(id, name, price, color, material, length) {
    cart.push({ id, name, price, color, material, length });
    localStorage.setItem("cart", JSON.stringify(cart));
    updateCartDisplay();
}

// Remove last added product of specific type
function removeLastAdded(productId) {
    let index = -1;
    for (let i = cart.length - 1; i >= 0; i--) {
        if (cart[i].id === productId) {
            index = i;
            break;
        }
    }
    if (index !== -1) {
        cart.splice(index, 1);
        localStorage.setItem("cart", JSON.stringify(cart));
        updateCartDisplay();
    }
}

// Update cart display
function updateCartDisplay() {
    let totalItems = cart.length;

    document.getElementById("cart-count").innerText = totalItems;

    const badge = document.getElementById("cart-count");
    if (totalItems > 0) {
        badge.style.display = "inline-block";
    } else {
        badge.style.display = "none";
    }
}
// Update the displayed products based on filter
function updateProductDisplay() {
    const colorFilter = document.getElementById('color-filter').value;
    const priceFilter = document.getElementById('price-filter').value;
    const materialFilter = document.getElementById('material-filter').value;
    const lengthFilter = document.getElementById('length-filter').value;

    const filteredProducts = products.filter(product => {
        let colorMatch = (colorFilter === 'all') || (product.color === colorFilter);
        let materialMatch = (materialFilter === 'all') || (product.material === materialFilter);
        let lengthMatch = (lengthFilter === 'all') ||
                          (lengthFilter === 'short' && product.length >= 20 && product.length <= 30) ||
                          (lengthFilter === 'medium' && product.length > 30 && product.length <= 50);
        return colorMatch && materialMatch && lengthMatch;
    });

    if (priceFilter === 'low') {
        filteredProducts.sort((a, b) => a.price - b.price);
    } else if (priceFilter === 'high') {
        filteredProducts.sort((a, b) => b.price - a.price);
    }

    displayProducts(filteredProducts);
}
 
// Display products after filtering
function displayProducts(filteredProducts) {
    const productsContainer = document.getElementById('products');
    productsContainer.innerHTML = '';

    filteredProducts.forEach(product => {
        const productElement = document.createElement('div');
        productElement.classList.add('product');
        productElement.setAttribute('data-color', product.color);
        productElement.setAttribute('data-price', product.price);

        productElement.innerHTML = `
            <img src="img/product${product.id}.png" alt="${product.name}">
            <h2 class="tekstic" >${product.name}</h2>
            <p class="price" >${product.price} €</p>
            <button class="gumb" onclick="addToCart(${product.id}, '${product.name}', ${product.price}, '${product.color}', '${product.material}', ${product.length})"><img class="remove remove2" src="img/add.png"></button>
            <button class="gumb gumb2"  onclick="removeLastAdded(${product.id})"><img class="remove remove2" src="img/remove.png"></button>    
        `;

        productsContainer.appendChild(productElement);
    });
}

// Initialize the product display on page load
document.addEventListener("DOMContentLoaded", updateProductDisplay);

// Reset Filters function
function resetFilters() {
    // Reset all filter dropdowns to their default values
    document.getElementById('color-filter').value = 'all';
    document.getElementById('price-filter').value = 'all';
    document.getElementById('material-filter').value = 'all';
    document.getElementById('length-filter').value = 'all';

    // Display all products again
    updateProductDisplay();



    document.getElementById('hamburger-menu').addEventListener('click', function() {
        // Toggle (prebacivanje) klase 'active' na nav-links
        document.getElementById('nav-links').classList.toggle('active');
    });
    
}
