document.querySelectorAll('.add-button, .food-image').forEach(item => {
  item.addEventListener('click', function () {
    const foodItem = this.dataset.item;
    showModal(foodItem);
  });
});

function showModal(foodItem) {
  const modal = document.getElementById('suggestion-modal');
  document.getElementById('selected-item').innerText = foodItem;
  const suggestions = getSuggestions(foodItem);
  const suggestionList = document.getElementById('suggestion-list');
  suggestionList.innerHTML = suggestions.map(item => `<li>${item}</li>`).join('');
  modal.style.display = 'flex';

  document.querySelector('.close-button').addEventListener('click', () => {
    modal.style.display = 'none';
  });

  document.getElementById('add-to-cart-button').addEventListener('click', () => {
    addToCart(foodItem, suggestions);
    modal.style.display = 'none';
  });
}

function getSuggestions(foodItem) {
  const suggestionData = {
    'Veg Samosa': ['Green Chutney', 'Masala Tea'],
    'Onion Pakoda': ['Tamarind Sauce', 'Hot Tea'],
    // Add more combinations here
  };
  return suggestionData[foodItem] || [];
}

let cart = [];

function addToCart(foodItem, suggestions) {
  const quantity = document.getElementById('quantity').value;
  cart.push({ foodItem, quantity, suggestions });
  alert(`Added to cart: ${foodItem} (x${quantity})`);
  console.log('Cart:', cart);
}

function addToCart(itemName) {
    const quantity = document.getElementById(`quantity-${itemName}`).value;

    fetch("/add_to_cart", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({ name: itemName, quantity: quantity }),
    })
        .then((response) => response.json())
        .then((data) => {
            alert(data.message);
            // Optionally update cart count in the UI
        })
        .catch((error) => {
            console.error("Error:", error);
        });
}