let productCount = document.querySelectorAll('.product-item').length;

function addProduct() {
  const container = document.getElementById('product-container');
  const newProduct = document.createElement('div');
  newProduct.classList.add('product-item');
  newProduct.id = `product-item-${productCount}`;
  newProduct.innerHTML = `
    <label for="product_${productCount}">Produkt:</label>
    <select id="product_${productCount}" name="products[${productCount}][id]" required>
      <option value="" disabled selected>Vyberte produkt</option>
      {% for product in products %}
      <option value="{{ product['ID_Produktu'] }}">{{ product['Nazev'] }}</option>
      {% endfor %}
    </select>
    <label for="quantity_${productCount}">Množství:</label>
    <input type="number" id="quantity_${productCount}" name="products[${productCount}][quantity]" value="0" min="0" required>
    <button type="button" onclick="removeProduct(${productCount})">Odstranit</button>
  `;
  container.appendChild(newProduct);
  productCount++;
}

function removeProduct(index) {
  const productItem = document.getElementById(`product-item-${index}`);
  if (productItem) {
    productItem.remove();
  }
}