<main>
        <div id="container" class="container">
            <button style="display: none;" id="button" class="button">Potwierdź godzinę !</button>
        </div>
        <div class="testi">
            <div id="cartItems"></div>
            <div>Total: <span id="totalPrice"></span></div>
            <div id="checkoutSection">
            <form id="personalInfoForm">
                <h2>Personal Information</h2>
                <input type="text" id="name" placeholder="Name and Surname" required>
                <input type="text" id="phone" placeholder="Phone Number" required>
                <input type="text" id="address" placeholder="Address" required>
                <h2>Card Information</h2>
                <input type="text" id="cardNumber" placeholder="Card Number" required>
                <input type="text" id="cardMM" placeholder="MM" required>
                <input type="text" id="cardYYYY" placeholder="YYYY" required>
                <input type="text" id="cardCVV" placeholder="CVV" required>
                <button type="button" onclick="validateAndCheckout()">Checkout!</button>
            </form>
            </div>
        </div>
    </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>