<main>
        <div id="container" class="container">
            <button style="display: none;" id="button" class="button">Potwierdź godzinę !</button>
        </div>
        <section class="products">
            <h1 style="display:none;">.</h1>
            <h2 style="display:none;">.</h2>
            <input type="radio" id="all" name="category" checked>
            <label for="all">All</label>
            <input type="radio" id="men" name="category">
            <label for="men">Men</label>
            <input type="radio" id="women" name="category">
            <label for="women">Women</label>
            <input type="radio" id="kids" name="category">
            <label for="kids">Kids</label>
            <div id="men1">PRODUCTS MEN</div>
            <section class="product_men-main">
                <div class="product_men">
                    <img src="img/product1.webp" alt="Men photo item1" loading="lazy" width="250" height="250">
                    <h3>Men product 1</h3>
                    <p>$10.00</p>
                    <button onclick="addToCart(this)" data-name="Men photo item1" data-price="99.00" data-image="img/product1.webp">ADD CARD</button>
                </div>
                <div class="product_men">
                    <img src="img/product2.webp" alt="Men photo item2" loading="lazy" width="250" height="250">
                    <h3>Men product 2</h3>
                    <p>$10.00</p>
                    <button onclick="addToCart(this)" data-name="Men photo item2" data-price="99.00" data-image="img/product2.webp">ADD CARD</button>
                </div>
                <div class="product_men">
                    <img src="img/product3.webp" alt="Men photo item3" loading="lazy" width="250" height="250">
                    <h3>Men product 3</h3>
                    <p>$10.00</p>
                    <button onclick="addToCart(this)" data-name="Men photo item3" data-price="99.00" data-image="img/product3.webp">ADD CARD</button>
                </div>
                <div class="product_men">
                    <img src="img/product4.webp" alt="Men photo item4" loading="lazy" width="250" height="250">
                    <h3>Men product 4</h3>
                    <p>$10.00</p>
                    <button onclick="addToCart(this)" data-name="Men photo item4" data-price="99.00" data-image="img/product4.webp">ADD CARD</button>
                </div>
                <div class="product_men">
                    <img src="img/product5.webp" alt="Men photo item5" loading="lazy" width="250" height="250">
                    <h3>Men product 5</h3>
                    <p>$10.00</p>
                    <button onclick="addToCart(this)" data-name="Men photo item5" data-price="99.00" data-image="img/product5.webp">ADD CARD</button>
                </div>
                <div class="product_men">
                    <img src="img/product6.webp" alt="Men photo item6" loading="lazy" width="250" height="250">
                    <h3>Men product 6</h3>
                    <p>$10.00</p>
                    <button onclick="addToCart(this)" data-name="Men photo item6" data-price="99.00" data-image="img/product6.webp">ADD CARD</button>
                </div>
            </section>
            <div id="women1">PRODUCTS WOMEN</div>
            <section class="product_women-main">
                <div class="product_women">
                    <img src="img/product7.webp" alt="Women photo item1" loading="lazy" width="250" height="250">
                    <h3>Women product 1</h3>
                    <p>$99.00</p>
                    <button onclick="addToCart(this)" data-name="Women photo item1" data-price="99.00" data-image="img/product7.webp">ADD CARD</button>
                </div>
                <div class="product_women">
                    <img src="img/product8.webp" alt="Women photo item2" loading="lazy" width="250" height="250">
                    <h3>Women product 2</h3>
                    <p>$99.00</p>
                    <button onclick="addToCart(this)" data-name="Women photo item2" data-price="99.00" data-image="img/product8.webp">ADD CARD</button>
                </div>
                <div class="product_women">
                    <img src="img/product9.webp" alt="Women photo item3" loading="lazy" width="250" height="250">
                    <h3>Women product 3</h3>
                    <p>$99.00</p>
                    <button onclick="addToCart(this)" data-name="Women photo item3" data-price="99.00" data-image="img/product9.webp">ADD CARD</button>
                </div>
                <div class="product_women">
                    <img src="img/product10.webp" alt="Women photo item4" loading="lazy" width="250" height="250">
                    <h3>Women product 4</h3>
                    <p>$99.00</p>
                    <button onclick="addToCart(this)" data-name="Women photo item4" data-price="99.00" data-image="img/product10.webp">ADD CARD</button>
                </div>
                <div class="product_women">
                    <img src="img/product11.webp" alt="Women photo item5" loading="lazy" width="250" height="250">
                    <h3>Women product 5</h3>
                    <p>$99.00</p>
                    <button onclick="addToCart(this)" data-name="Women photo item5" data-price="99.00" data-image="img/product11.webp">ADD CARD</button>
                </div>
                <div class="product_women">
                    <img src="img/product12.webp" alt="Women photo item6" loading="lazy" width="250" height="250">
                    <h3>Women product 6</h3>
                    <p>$99.00</p>
                    <button onclick="addToCart(this)" data-name="Women photo item6" data-price="99.00" data-image="img/product12.webp">ADD CARD</button>
                </div>
            </section>
            <div id="kid1">PRODUCTS KID</div>
            <section class="product_kids-main">
                <div class="product_kids">
                    <img src="img/product4.webp" alt="Kids photo item1" loading="lazy" width="250" height="250">
                    <h3>Kids product 1</h3>
                    <p>$30.00</p>
                    <button onclick="addToCart(this)" data-name="Kids photo item1" data-price="30.00" data-image="img/product14.webp">ADD CARD</button>
                </div>
                <div class="product_kids">
                    <img src="img/product14.webp" alt="Kids photo item2" loading="lazy" width="250" height="250">
                    <h3>Kids product 2</h3>
                    <p>$30.00</p>
                    <button onclick="addToCart(this)" data-name="Kids photo item2" data-price="30.00" data-image="img/product14.webp">ADD CARD</button>
                </div>
                <div class="product_kids">
                    <img src="img/product15.webp" alt="Kids photo item3" loading="lazy" width="250" height="250">
                    <h3>Kids product 3</h3>
                    <p>$30.00</p>
                    <button onclick="addToCart(this)" data-name="Kids photo item3" data-price="30.00" data-image="img/product15.webp">ADD CARD</button>
                </div>
                <div class="product_kids">
                    <img src="img/product16.webp" alt="Kids photo item4" loading="lazy" width="250" height="250">
                    <h3>Kids product 4</h3>
                    <p>$30.00</p>
                    <button onclick="addToCart(this)" data-name="Kids photo item4" data-price="30.00" data-image="img/product16.webp">ADD CARD</button>
                </div>
                <div class="product_kids">
                    <img src="img/product8.webp" alt="Kids photo item5" loading="lazy" width="250" height="250">
                    <h3>Kids product 5</h3>
                    <p>$30.00</p>
                    <button onclick="addToCart(this)" data-name="Kids photo item5" data-price="30.00" data-image="img/product8.webp">ADD CARD</button>
                </div>
                <div class="product_kids">
                    <img src="img/product18.webp" alt="Kids photo item6" loading="lazy" width="250" height="250">
                    <h3>Kids product 6</h3>
                    <p>$30.00</p>
                    <button onclick="addToCart(this)" data-name="Kids photo item6" data-price="30.00" data-image="img/product18.webp">ADD CARD</button>
                </div>
            </section>
        </section>
    </main>
    <script>
      function addToCart(buttonElement) {
          const name = buttonElement.getAttribute('data-name');
          const price = parseFloat(buttonElement.getAttribute('data-price'));
          const image = buttonElement.getAttribute('data-image'); // Pobierz ścieżkę obrazu
          let cart = JSON.parse(localStorage.getItem('cart')) || [];
          cart.push({ name, price, image }); // Dodaj przedmiot do koszyka
          localStorage.setItem('cart', JSON.stringify(cart)); // Zaktualizuj koszyk w localStorage
          updateCartCount(); // Aktualizuj licznik koszyka
      }
      function displayCart() {
          let cartItems = document.getElementById('cartItems');
          let totalPrice = 0;
          let cart = JSON.parse(localStorage.getItem('cart')) || [];
          cartItems.innerHTML = ''; // Wyczyść istniejące przedmioty
          cart.forEach((item, index) => {
              let itemElement = document.createElement('div');
              itemElement.classList.add('item');
              itemElement.innerHTML = `
                  <img src="${item.image}" alt="${item.name}" style="width:100px;">
                  <span>${item.name} - $${item.price.toFixed(2)}</span>
                  <button onclick="removeFromCart(${index})">Remove</button>
              `;
              cartItems.appendChild(itemElement);
              totalPrice += item.price;
          });
          if (cart.length === 0) {
              cartItems.innerHTML = '<p>Your cart is empty.</p>';
          }
          document.getElementById('totalPrice').innerText = `$${totalPrice.toFixed(2)}`;
          updateCartCount(); // Aktualizuj licznik koszyka również tutaj
      }
      function removeFromCart(index) {
          let cart = JSON.parse(localStorage.getItem('cart')) || [];
          cart.splice(index, 1); // Usuń przedmiot z koszyka
          localStorage.setItem('cart', JSON.stringify(cart)); // Zaktualizuj koszyk w localStorage
          displayCart(); // Odśwież widok koszyka
          updateCartCount(); // Aktualizuj licznik koszyka
      }
      function updateCartCount() {
          let cart = JSON.parse(localStorage.getItem('cart')) || [];
          let count = cart.length; // Liczba przedmiotów w koszyku
          document.getElementById('cartCount').textContent = count; // Ustaw tekst licznika koszyka
      }
      function validateAndCheckout() {
          // Pobierz wartości z pól formularza
          const name = document.getElementById('name').value;
          const phone = document.getElementById('phone').value;
          const address = document.getElementById('address').value;
          const cardNumber = document.getElementById('cardNumber').value;
          const cardMM = document.getElementById('cardMM').value;
          const cardYYYY = document.getElementById('cardYYYY').value;
          const cardCVV = document.getElementById('cardCVV').value;
          if (name && phone && address && cardNumber && cardMM && cardYYYY && cardCVV) {
              alert('Zakupy zrealizowane. Więcej informacji na mailu.');
              localStorage.removeItem('cart');
              displayCart();
              updateCartCount();
          } else {
              alert('Proszę uzupełnić wszystkie dane.');
          }
      }
      document.addEventListener('DOMContentLoaded', () => {
          updateCartCount(); // Aktualizacja licznika przy ładowaniu strony
          if (window.location.pathname.includes('cart.html')) {
              displayCart(); // Wyświetl przedmioty w koszyku jeśli jesteś na stronie koszyka
          }
      });
      </script>