script.js

const SHEET_CSV_URL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSJF4mFM7zf3MdAlpPa2BBYkakXX61HyyMzCngzdOL0x9Y_bDJfc_g2-dQFOh0AgpflKjqNkhHro8nI/pub?gid=0&single=true&output=csv";

/* Número de WhatsApp del negocio para recibir los pedidos.*/
const NUMERO_WHATSAPP_PEDIDOS = "59174846664";

/* Productos de respaldo: se muestran si todavía no configuraste el
   Google Sheet, o si por algún motivo no se pudo cargar (sin internet,
   link mal copiado, etc). Sirven también como ejemplo del formato. 
const productosRespaldo = [
  {
    nombre: "Rollito Clásico",
    imagen: "https://via.placeholder.com/300x200?text=Rollito+Clasico",
    precio: "10",
    descripcion: "Rollito relleno con nuestro queso artesanal original."
  },
  {
    nombre: "Rollito Picante",
    imagen: "https://via.placeholder.com/300x200?text=Rollito+Picante",
    precio: "12",
    descripcion: "Nuestro queso casero con un toque picante."
  },
  {
    nombre: "Rollito de Hierbas",
    imagen: "https://via.placeholder.com/300x200?text=Rollito+Hierbas",
    precio: "12",
    descripcion: "Queso artesanal mezclado con hierbas finas."
  },
  {
    nombre: "Rollito Mixto",
    imagen: "https://via.placeholder.com/300x200?text=Rollito+Mixto",
    precio: "14",
    descripcion: "Combinación de nuestros quesos artesanales más pedidos."
  }
];*/

/* =====================================================================
   CARGA DE PRODUCTOS
   ===================================================================== */
async function cargarProductos() {

  if (SHEET_CSV_URL.includes("PON_AQUI")) {
    mostrarProductos(productosRespaldo);
    return;
  }

  try {
    const respuesta = await fetch(SHEET_CSV_URL + "&cache=" + Date.now());
    const textoCSV = await respuesta.text();
    const productos = convertirCSVaProductos(textoCSV);
    mostrarProductos(productos);
  } catch (error) {
    console.error("No se pudo cargar el Google Sheet, se muestran productos de respaldo.", error);
    mostrarProductos(productosRespaldo);
  }
}

/* Convierte el texto CSV (Nombre, Imagen, Precio, Descripcion) en una
   lista de productos. */
function convertirCSVaProductos(textoCSV) {
  const filas = textoCSV.trim().split("\n");
  filas.shift(); // quita la fila de encabezados
  return filas
    .map((fila) => {
      const columnas = parsearLineaCSV(fila);
      return {
        nombre: columnas[0],
        imagen: columnas[1],
        precio: columnas[2],
        descripcion: columnas[3]
      };
    })
    .filter((producto) => producto.nombre); // ignora filas vacías
}

/* Parser básico de una línea CSV que respeta comillas dobles, para que
   una descripción pueda tener comas sin romper las columnas.
   NOTA: para hojas de cálculo muy grandes o con formato complejo, lo
   normal en un proyecto real es usar una librería ya hecha para esto,
   por ejemplo PapaParse (https://www.papaparse.com/). Aquí se hizo a
   mano para mantener el código simple y sin dependencias externas. */
function parsearLineaCSV(linea) {
  const resultado = [];
  let actual = "";
  let entreComillas = false;

  for (let i = 0; i < linea.length; i++) {
    const caracter = linea[i];
    if (caracter === '"') {
      entreComillas = !entreComillas;
    } else if (caracter === "," && !entreComillas) {
      resultado.push(actual.trim());
      actual = "";
    } else {
      actual += caracter;
    }
  }
  resultado.push(actual.trim());
  return resultado;
}

/* Dibuja las tarjetas de producto en la página, cada una con su
   selector de cantidad (botones "-" y "+"). */
function mostrarProductos(productos) {
  const contenedor = document.getElementById("lista-productos");
  contenedor.innerHTML = "";

  productos.forEach((producto, indice) => {
    const tarjeta = document.createElement("div");
    tarjeta.className = "tarjeta-producto";
    tarjeta.innerHTML = `
      <img src="${producto.imagen}" alt="${producto.nombre}">
      <h3>${producto.nombre}</h3>
      <p class="precio">Bs ${producto.precio}</p>
      <p class="descripcion">${producto.descripcion}</p>
      <div class="selector-cantidad">
        <button type="button" class="btn-cantidad" onclick="cambiarCantidad(${indice}, -1)" aria-label="Quitar uno">−</button>
        <span id="cantidad-${indice}" class="cantidad-valor">0</span>
        <button type="button" class="btn-cantidad" onclick="cambiarCantidad(${indice}, 1)" aria-label="Agregar uno">+</button>
      </div>
    `;
    contenedor.appendChild(tarjeta);
  });

  // Guardamos la lista actual y reiniciamos el pedido cada vez que se
  // vuelven a dibujar los productos (por ejemplo al recargar la página).
  productosActuales = productos;
  carritoPedido = {};
  actualizarCarritoFlotante();
}

/* =====================================================================
   PEDIDO / CARRITO Y ENVÍO POR WHATSAPP
   =====================================================================
   No usa librerías externas ni pasarela de pago: solo arma un mensaje
   de texto con lo que la persona seleccionó y abre WhatsApp con ese
   mensaje ya escrito, listo para enviar.
   ===================================================================== */
let productosActuales = [];   // última lista de productos mostrada
let carritoPedido = {};       // { indiceDeProducto: cantidad }

/* Suma o resta 1 a la cantidad de un producto (nunca baja de 0) */
function cambiarCantidad(indice, delta) {
  const cantidadActual = carritoPedido[indice] || 0;
  const nuevaCantidad = Math.max(0, cantidadActual + delta);
  carritoPedido[indice] = nuevaCantidad;

  document.getElementById(`cantidad-${indice}`).textContent = nuevaCantidad;
  actualizarCarritoFlotante();
}

/* Muestra u oculta la barra flotante de abajo con el resumen del pedido */
function actualizarCarritoFlotante() {
  const barra = document.getElementById("carrito-flotante");
  const resumen = document.getElementById("carrito-resumen");
  if (!barra || !resumen) return;

  let totalProductos = 0;
  let totalPrecio = 0;

  Object.keys(carritoPedido).forEach((indice) => {
    const cantidad = carritoPedido[indice];
    if (cantidad > 0) {
      totalProductos += cantidad;
      totalPrecio += cantidad * parseFloat(productosActuales[indice].precio || 0);
    }
  });

  if (totalProductos > 0) {
    barra.classList.add("visible");
    resumen.textContent = `${totalProductos} producto(s) seleccionado(s) · Bs ${totalPrecio.toFixed(2)}`;
  } else {
    barra.classList.remove("visible");
  }
}

/* Arma el texto del pedido y abre WhatsApp con ese mensaje ya escrito */
function enviarPedidoWhatsApp() {
  const lineasPedido = [];
  let total = 0;

  Object.keys(carritoPedido).forEach((indice) => {
    const cantidad = carritoPedido[indice];
    if (cantidad > 0) {
      const producto = productosActuales[indice];
      const subtotal = cantidad * parseFloat(producto.precio || 0);
      total += subtotal;
      lineasPedido.push(`- ${producto.nombre} x${cantidad} (Bs ${subtotal.toFixed(2)})`);
    }
  });

  if (lineasPedido.length === 0) {
    alert("Selecciona al menos un producto antes de enviar el pedido.");
    return;
  }

  const mensaje = [
    "Hola, quiero hacer este pedido:",
    ...lineasPedido,
    "",
    `Total: Bs ${total.toFixed(2)}`
  ].join("\n");

  const urlWhatsApp = `https://wa.me/${NUMERO_WHATSAPP_PEDIDOS}?text=${encodeURIComponent(mensaje)}`;
  window.open(urlWhatsApp, "_blank");
}

cargarProductos();