vCardRestaurant-Codigo-Corregido-EUROS

<div id="preloader" class="loadingio-spinner-rolling-zt8qwybayi">
  <div class="ldio-pk6mhbe1fco">
    <div></div>
  </div>
</div>

<section id="ov-listado-menu">
<!-- Aquí es donde se cargará el contenido dinámico -->
</section>

<script>
  // Función para actualizar la pestaña activa y hacer scroll horizontal según la posición de scroll
  function updateActiveTab() {
    var tabLinks = document.querySelectorAll('#tabs a');
    var sections = document.querySelectorAll('.titulo-seccion');
    var scrollPosition = document.querySelector('.contenido').scrollTop;
    var offset = -50;
    sections.forEach(function(section, index) {
      var sectionTop = section.offsetTop;
      var sectionHeight = section.offsetHeight;
      if (scrollPosition >= sectionTop - offset && scrollPosition < sectionTop + sectionHeight - offset) {
        tabLinks.forEach(function(link) {
          link.classList.remove('active');
        });
        tabLinks[index].classList.add('active');
        // Hacer scroll horizontal para mostrar la pestaña activa
        var tabsContainer = document.getElementById('tabs');
        var activeTab = tabLinks[index];
        var tabLeft = activeTab.offsetLeft;
        var tabWidth = activeTab.offsetWidth;
        var tabsWidth = tabsContainer.offsetWidth;
        var tabsScrollLeft = tabsContainer.scrollLeft;
        if (tabLeft < tabsScrollLeft) {
          tabsContainer.scrollTo({
            left: tabLeft,
            behavior: 'smooth'
          });
        } else if (tabLeft + tabWidth > tabsScrollLeft + tabsWidth) {
          tabsContainer.scrollTo({
            left: tabLeft + tabWidth - tabsWidth,
            behavior: 'smooth'
          });
        }
      }
    });
  }

  // Función para mostrar el precargador
  function showPreloader() {
    document.getElementById('preloader').style.display = 'block';
    document.getElementById('ov-listado-menu').style.display = 'none';
  }

  // Función para ocultar el precargador y mostrar el contenido
  function hidePreloader() {
    document.getElementById('preloader').style.display = 'none';
    document.getElementById('ov-listado-menu').style.display = 'block';
  }

  // Mostrar el precargador al cargar la página
  showPreloader();

  var cartItems = [];
    var currency = "EUR"; // CAMBIAR MONEDA
    var currencySymbol = ""; // CAMBIAR SIMBOLO MONEDA

    var appScriptUrl = 'https://script.google.com/macros/s/AKfycbxjEq46zgfhLEPmBZWp21r9cH6wLp7tFcdykYh7e8-YGTQ9cUmRv7WybmjNl-7pufjszg/exec'; // INSERTAR URL APPSCRIPT
    var whatsappNumber = '+34636593115'; // INSERTAR NÚMERO WHATSAPP CON PREFIJO DE PAÍS

    // Función para generar el HTML del menú
    function generateMenuHTML(menuData) {
      var html = '';
      var tabs = '';

      for (var section in menuData) {
        var sectionId = section.toLowerCase().replace(/\s+/g, '-');
        tabs += '<a href="#' + sectionId + '">' + section + '</a>\n';
        html += '<h2 id="' + sectionId + '" class="titulo-seccion">' + section + '</h2>';

        menuData[section].forEach(function(dish) {
          // Asegúrate de que el precio se maneje como un número
          var price = parseFloat(dish.price);
          html += '<div class="card-menu" data-dish="' + encodeURIComponent(JSON.stringify({ ...dish, price: price })) + '">' +
            '<div class="img-cover">' +
              '<img src="' + dish.image + '" alt="' + dish.name + '">' +
            '</div>' +
            '<div class="info-menu">' +
              '<h3 class="titulo">' + dish.name + '</h3>' +
              '<p class="descripcion">' + dish.description + '</p>' +
              '<p class="menu-precio">' + currencySymbol + price.toFixed(2) + ' ' + currency + '</p>' +
            '</div>' +
          '</div>';
        });
      }

      // Insertar las pestañas en el contenedor de pestañas
      document.getElementById('tabs').innerHTML = tabs;

      return html;
    }

    // Función para generar el HTML de las opciones extras
    function generateOptionsHTML(options) {
      var html = '';

      for (var optionTitle in options) {
        html += '<div class="option-group">';
        html += '<h4>' + optionTitle + '</h4>';

        options[optionTitle].forEach(function(option) {
          var optionName = option.name;
          var optionPrice = option.price;

          html += '<div class="option-item">';
          html += '<input type="checkbox" id="' + optionName + '" value="' + optionPrice + '">';
          html += '<label for="' + optionName + '">' + optionName + (optionPrice ? ' ' + currencySymbol + optionPrice : '') + '</label>';
          html += '</div>';
        });

        html += '</div>';
      }

      return html;
    }

    // Función para abrir el pop-up de detalles del producto
    function openPopup(dish) {
      var price = parseFloat(dish.price);
      var popupHtml = '<div class="popup">' +
        '<div class="popup-content">' +
          '<div class="popup-left">' +
            '<img src="' + dish.image + '" alt="' + dish.name + '">' +
          '</div>' +
          '<div class="popup-right">' +
            '<div class="popup-content-wrapper">' +
              '<h3>' + dish.name + '</h3>' +
              '<p>' + dish.description + '</p>' +
              '<div class="options-container">' + generateOptionsHTML(dish.options) + '</div>' +
            '</div>' +
            '<div class="quantity-control-container">' +
              '<div class="quantity-control">' +
                '<button class="decrement-quantity">-</button>' +
                '<input type="text" class="quantity" value="1" data-price="' + price + '">' +
                '<button class="increment-quantity">+</button>' +
              '</div>' +
              '<button class="agregar-al-carrito" data-dish="' + encodeURIComponent(JSON.stringify({...dish, price: price})) + '">Agregar <span class="precio">' + currencySymbol + price.toFixed(2) + ' ' + currency + '</span></button>' +
            '</div>' +
          '</div>' +
          '<i class="fas fa-times icono-cerrar"></i>' +
        '</div>' +
      '</div>';
      document.body.insertAdjacentHTML('beforeend', popupHtml);
      setTimeout(function() {
        document.querySelector('.popup').classList.add('show');
      }, 50);

      document.querySelectorAll('.option-item input[type="checkbox"], .quantity').forEach(input => {
        input.addEventListener('change', updatePopupPrice);
      });

      document.querySelector('.agregar-al-carrito').addEventListener('click', () => {
        updatePopupPrice();
        addToCart(JSON.parse(decodeURIComponent(document.querySelector('.agregar-al-carrito').getAttribute('data-dish'))));
        closePopup();
      });
    }

    function updatePopupPrice() {
      const dish = JSON.parse(decodeURIComponent(document.querySelector('.agregar-al-carrito').getAttribute('data-dish')));
      const selectedOptions = Array.from(document.querySelectorAll('.option-item input[type="checkbox"]:checked'));
      const quantity = parseInt(document.querySelector('.quantity').value);
      let totalPrice = parseFloat(dish.price) * quantity;

      selectedOptions.forEach(option => {
        const optionPrice = parseFloat(option.value);
        if (!isNaN(optionPrice)) {
          totalPrice += optionPrice * quantity;
        }
      });

      document.querySelector('.popup .precio').textContent = currencySymbol + totalPrice.toFixed(2) + ' ' + currency;
    }

    // Función para cerrar el pop-up
    function closePopup() {
      var popup = document.querySelector('.popup');
      if (popup) {
        popup.classList.remove('show');
        setTimeout(function() {
          popup.remove();
        }, 300);
      }
    }

    // Evento de clic para cerrar el pop-up al hacer clic en el overlay
    document.addEventListener('click', function(e) {
      if (e.target.classList.contains('popup')) {
        closePopup();
      }
    });

    // Evento de teclado para cerrar los pop-ups con la tecla ESC
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') {
        closePopup();
      }
    });

    // Función para añadir un producto al carrito
    function addToCart(dish) {
      var quantity = parseInt(document.querySelector('.quantity').value);
      var selectedOptions = Array.from(document.querySelectorAll('.option-item input[type="checkbox"]:checked'));

      var dishWithOptions = {
        ...dish,
        price: parseFloat(dish.price), // Asegúrate de que el precio sea un número
        quantity: quantity,
        selectedOptions: selectedOptions.map(function(option) {
          return {
            name: option.nextElementSibling.textContent.split(' ' + currencySymbol)[0].trim(),
            price: parseFloat(option.value) // Asegúrate de que el precio de la opción sea un número
          };
        })
      };

      cartItems.push(dishWithOptions);

      updateCartCount();
      updateCartPopup();
    }

    // Función para actualizar el contador del carrito
    function updateCartCount() {
      var cartCount = document.querySelector('.cart-count');
      cartCount.textContent = cartItems.reduce(function(total, item) {
        return total + item.quantity;
      }, 0);
    }

    // Función para actualizar el contenido del pop-up del carrito
    function updateCartPopup() {
      var cartPopup = document.querySelector('.cart-popup');
      if (cartPopup) {
        var cartList = cartPopup.querySelector('ul');
        var cartTotal = calculateCartTotal(cartItems);
        listItems = cartItems.map(function(item) {
          var optionsText = item.selectedOptions.map(function(option) {
            return '- ' + option.name + ' ' + (option.price ? currencySymbol + option.price.toFixed(2) : '');
          }).join('<br>');

          var itemTotal = calculateItemTotal(item);
          var basePrice = parseFloat(item.price);

          return '<li>' +
            '<div class="cart-item">' +
              '<img src="' + item.image + '" alt="' + item.name + '">' +
              '<div class="cart-item-details">' +
                '<h4>' + item.name + '</h4>' +
                '<p class="list-cantidad">Cantidad: ' + item.quantity + '</p>' +
                '<p class="list-precio">Precio base: ' + currencySymbol + basePrice.toFixed(2) + ' ' + currency + '</p>' +
                (optionsText ? '<p class="list-opciones"><b>Opciones:</b><br>' + optionsText + '</p>' : '') +
                '<p class="list-item-total"><b>Total: ' + currencySymbol + itemTotal.toFixed(2) + ' ' + currency + '</b></p>' +
              '</div>' +
              '<i class="fas fa-trash remove-item" data-dish="' + encodeURIComponent(JSON.stringify(item)) + '"></i>' +
            '</div>' +
          '</li>';
        }).join('');
        cartList.innerHTML = listItems;
        cartPopup.querySelector('.cart-total').textContent = cartTotal;

        if (cartItems.length === 0) {
          cartPopup.querySelector('.cart-empty').style.display = 'block';
          cartPopup.querySelector('#complete-order').disabled = true;
        } else {
          cartPopup.querySelector('.cart-empty').style.display = 'none';
          cartPopup.querySelector('#complete-order').disabled = false;
        }
      }
    }

    // Función para calcular el total de cada item del carrito
    function calculateItemTotal(item) {
      var itemPrice = parseFloat(item.price);
      item.selectedOptions.forEach(function(option) {
        var optionPrice = option.price ? parseFloat(option.price) : 0;
        itemPrice += optionPrice;
      });
      return itemPrice * item.quantity;
    }

    // Función para abrir el pop-up del carrito
    function openCartPopup() {
      var cartTotal = calculateCartTotal(cartItems);
      var popupHtml = '<div class="popup">' +
        '<div class="cart-popup">' +
          '<div class="cart-content">' +
            '<h2>Mi Pedido</h2>' +
            '<ul></ul>' +
            '<div class="cart-empty" style="display: ' + (cartItems.length === 0 ? 'block' : 'none') + '">El carrito está vacío.</div>' +
          '</div>' +
          '<div class="cart-actions">' +
            '<div class="cart-total">Total: ' + cartTotal + '</div>' +
            '<button class="empty-cart">Vaciar carrito</button>' +
            '<button id="complete-order" ' + (cartItems.length === 0 ? 'disabled' : '') + '>Completar pedido</button>' +
          '</div>' +
          '<i class="fas fa-times icono-cerrar"></i>' +
        '</div>' +
      '</div>';

      document.body.insertAdjacentHTML('beforeend', popupHtml);
      setTimeout(function() {
        document.querySelector('.popup').classList.add('show');
      }, 50);
      updateCartPopup();
    }

    // Función para eliminar un producto del carrito
    function removeFromCart(dish) {
      var index = cartItems.findIndex(function(item) {
        return JSON.stringify(item) === JSON.stringify(dish);
      });
      if (index !== -1) {
        cartItems.splice(index, 1);
        updateCartCount();
        updateCartPopup();
      }
    }

    // Función para vaciar el carrito
    function emptyCart() {
      cartItems = [];
      updateCartCount();
      var popup = document.querySelector('.popup');
      if (popup) {
        popup.classList.remove('show');
        setTimeout(function() {
          popup.remove();
        }, 300);
      }
    }

    // Función para calcular el total del carrito
    function calculateCartTotal(items) {
      var total = 0;
      items.forEach(function(item) {
        var itemPrice = parseFloat(item.price);
        item.selectedOptions.forEach(function(option) {
          var optionPrice = option.price ? parseFloat(option.price) : 0;
          itemPrice += optionPrice;
        });
        total += itemPrice * item.quantity;
      });
      return 'Total Pedido: ' + currencySymbol + total.toFixed(2) + ' ' + currency;
    }

    // Función para mostrar el formulario de información del pedido
    function showOrderForm() {
      var formHtml = '<div class="order-form">' +
        '<a id="back-to-cart"><i class="fas fa-arrow-left"></i> Regresar al carrito</a>' +
        '<h2>Completa tu pedido</h2>' +
        '<form>' +
          '<label for="name">Nombre:</label>' +
          '<input type="text" id="name" required>' +
                  '<label for="name">Teléfono:</label>' +
                  '<input type="text" id="phone" required>' +
          '<label for="delivery">Opciones de entrega:</label>' +
          '<select id="delivery" required>' +
            '<option value="">Selecciona una opción</option>' +
            '<option value="Domicilio">Envío a domicilio</option>' +
            '<option value="Local">Recoger en local</option>' +
          '</select>' +
          '<div id="address-field" style="display: none;">' +
            '<label for="address">Dirección:</label>' +
            '<textarea id="address" required></textarea>' +
          '</div>' +
          '<label for="payment">Formas de pago:</label>' +
          '<select id="payment" required>' +
            '<option value="">Selecciona una opción</option>' +
            '<option value="Efectivo">Efectivo</option>' +
            '<option value="Tarjeta">Tarjeta</option>' +
          '</select>' +
          '<label for="note">Nota adicional:</label>' +
          '<textarea id="note"></textarea>' +
          '<div class="terminos">' +
            '<input type="checkbox" id="terms" required>' +
            '<label for="terms">Acepto los <a href="#" target="_blank">términos y condiciones</a>.</label>' +
          '</div>' +
          '<button type="submit" id="submit-order"><i class="fab fa-whatsapp"></i> Enviar pedido</button>' +
        '</form>' +
      '</div>';

      var cartPopup = document.querySelector('.cart-popup');
      var cartDetails = cartPopup.querySelector('.cart-content');
      var cartActions = cartPopup.querySelector('.cart-actions');
      cartDetails.style.display = 'none';
      cartActions.style.display = 'none';
      cartPopup.insertAdjacentHTML('beforeend', formHtml);
      setTimeout(function() {
        document.querySelector('.popup').classList.add('show');
      }, 50);

      var backButton = document.getElementById('back-to-cart');
        backButton.addEventListener('click', function(e) {
          e.preventDefault();
          var popup = document.querySelector('.popup');
          popup.classList.remove('show');
          setTimeout(function() {
            var orderForm = document.querySelector('.order-form');
            orderForm.remove();
            cartDetails.style.display = 'block';
            cartActions.style.display = 'block';
            setTimeout(function() {
              popup.classList.add('show');
            }, 50);
          }, 300);
        });

      var deliverySelect = document.getElementById('delivery');
      var addressField = document.getElementById('address-field');

      deliverySelect.addEventListener('change', function() {
        if (deliverySelect.value === 'Domicilio') {
          addressField.style.display = 'block';
          addressField.querySelector('#address').required = true;
        } else {
          addressField.style.display = 'none';
          addressField.querySelector('#address').required = false;
        }
      });
    }

    // Evento de clic para los "card-menu"
    document.addEventListener('click', function(e) {
      if (e.target.closest('.card-menu')) {
        var dish = JSON.parse(decodeURIComponent(e.target.closest('.card-menu').getAttribute('data-dish')));
        openPopup(dish);
      }
    });

    // Evento de clic para el icono de cierre del pop-up
    document.addEventListener('click', function(e) {
      if (e.target.classList.contains('icono-cerrar')) {
        closePopup();
      }
    });

    // Evento de clic para el icono del carrito
    document.getElementById('cart-icon').addEventListener('click', function() {
      openCartPopup();
    });

    // Evento de clic para el botón "Completar pedido"
    document.addEventListener('click', function(e) {
      if (e.target.id === 'complete-order') {
        if (cartItems.length === 0) {
          alert('Para completar el pedido, debes agregar productos al carrito.');
        } else {
          var popup = document.querySelector('.popup');
          popup.classList.remove('show');
          setTimeout(function() {
            showOrderForm();
          }, 300);
        }
      }
    });

    // Evento de clic para el icono de eliminar producto del carrito
    document.addEventListener('click', function(e) {
      if (e.target.classList.contains('remove-item')) {
        var dish = JSON.parse(decodeURIComponent(e.target.getAttribute('data-dish')));
        removeFromCart(dish);
      }
    });

    // Evento de clic para el botón "Vaciar carrito"
    document.addEventListener('click', function(e) {
      if (e.target.classList.contains('empty-cart')) {
        emptyCart();
      }
    });

    // Evento de clic para los botones de incremento y decremento de cantidad
    document.addEventListener('click', function(e) {
      if (e.target.classList.contains('increment-quantity')) {
        var quantityInput = e.target.previousElementSibling;
        var currentQuantity = parseInt(quantityInput.value);
        quantityInput.value = currentQuantity + 1;
        updatePopupPrice();
      } else if (e.target.classList.contains('decrement-quantity')) {
        var quantityInput = e.target.nextElementSibling;
        var currentQuantity = parseInt(quantityInput.value);
        if (currentQuantity > 1) {
          quantityInput.value = currentQuantity - 1;
          updatePopupPrice();
        }
      }
    });

    // Evento de envío del formulario de información del pedido
    document.addEventListener('submit', function(e) {
      if (e.target.closest('.order-form')) {
        e.preventDefault();
        var name = document.getElementById('name').value;
        var delivery = document.getElementById('delivery').value;
        var payment = document.getElementById('payment').value;
        var note = document.getElementById('note').value;

        if (name === '' || delivery === '' || payment === '') {
          alert('Por favor, completa todos los campos obligatorios del formulario.');
          return;
        }

        var addressField = document.getElementById('address');
        var address = addressField.value;

        if (delivery === 'Domicilio' && address === '') {
          alert('Por favor, ingresa tu dirección para el envío a domicilio.');
          return;
        }

        var cartTotal = calculateCartTotal(cartItems);
        var message = '¡NUEVO PEDIDO!\n\n' +
        `Nombre: ${document.getElementById('name').value}\n` +
        `Opciones de entrega: ${document.getElementById('delivery').value}\n` +
        (document.getElementById('delivery').value === 'Domicilio' ? `Dirección: ${addressField.value}\n` : '') +
        `Formas de pago: ${document.getElementById('payment').value}\n` +
        `Nota adicional: ${document.getElementById('note').value}\n` +
          'Productos:\n' +
          cartItems.map(function(item) {
            var itemPrice = parseFloat(item.price);
            var optionsText = item.selectedOptions.map(function(option) {
              var optionPrice = parseFloat(option.price);
              return '  - ' + option.name + ' ' + (optionPrice ? currencySymbol + optionPrice.toFixed(2) : '');
            }).join('\n');
            return '- ' + item.name + ' (' + item.quantity + ') ' + currencySymbol + itemPrice.toFixed(2) + ' ' + currency + '\n' + optionsText;
          }).join('\n\n') + '\n\n' +
          cartTotal;
        var whatsappUrl = 'https://wa.me/' + whatsappNumber + '?text=' + encodeURIComponent(message);
        window.open(whatsappUrl, '_blank');
      }
    });

    // Hacer una solicitud GET a la URL de la aplicación web de Google Apps Script
    fetch(appScriptUrl)
    .then(response => response.json())
    .then(data => {
      // Convertir precios a números
      for (let section in data) {
        data[section] = data[section].map(dish => ({
          ...dish,
          price: parseFloat(dish.price)
        }));
      }
      // Llamar a la función para generar el HTML del menú con los datos obtenidos
      document.getElementById('ov-listado-menu').innerHTML = generateMenuHTML(data);

     // Agregar evento de clic a las pestañas para el desplazamiento suave
     var tabLinks = document.querySelectorAll('#tabs a');
      tabLinks.forEach(function(link) {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          var target = document.querySelector(this.getAttribute('href'));
          var contenido = document.querySelector('.contenido');
          var targetPosition = target.offsetTop - contenido.offsetTop + 145;
          contenido.scrollTo({
            top: targetPosition,
            behavior: 'smooth'
          });
        });
      });

      // Agregar evento de scroll al contenedor ".contenido"
      document.querySelector('.contenido').addEventListener('scroll', updateActiveTab);

      // Ocultar el precargador y mostrar el contenido
      hidePreloader();
    })
    .catch(error => {
      console.error('Error al obtener los datos:', error);
    });
  </script>