Home - Rolbauro/RYR-Comidas GitHub Wiki
<title>RYM Comidas</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Inter', sans-serif;
}
#carrito-items li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid #e5e7eb;
margin-bottom: 0.5rem;
}
#carrito-items li:last-child {
border-bottom: none;
margin-bottom: 0;
}
#carrito-total {
font-weight: bold;
font-size: 1.25rem;
margin-top: 1rem;
}
.oculto {
display: none;
}
.visible {
display: block;
}
.eliminar-item {
color: red;
cursor: pointer;
padding: 0.25rem;
border-radius: 0.375rem; /* rounded-md */
}
.eliminar-item:hover {
background-color: #fecaca; /* bg-red-100 */
}
/* Estilos para la notificación de éxito */
.notification {
position: fixed;
top: 1rem;
right: 1rem;
background-color: #4CAF50; /* Green */
color: white;
padding: 1rem 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1000;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.notification.show {
opacity: 1;
}
/* Estilos para los botones de cantidad */
.cantidad-btn {
background-color: #e5e7eb; /* gray-200 */
color: #4b5563; /* gray-700 */
border-radius: 9999px; /* full rounded */
width: 1.5rem;
height: 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: bold;
cursor: pointer;
margin: 0 0.25rem;
transition: background-color 0.2s;
}
.cantidad-btn:hover {
background-color: #d1d5db; /* gray-300 */
}
</style>
<script type="module">
// Importar módulos de Firebase
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
import { getFirestore, collection, addDoc, onSnapshot, query, orderBy } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
document.addEventListener('DOMContentLoaded', async () => {
// Variables globales de Firebase (proporcionadas por el entorno Canvas)
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
const firebaseConfig = JSON.parse(typeof __firebase_config !== 'undefined' ? __firebase_config : '{}');
const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;
// Inicializar Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);
let userId = null;
let isAuthReady = false;
// Elementos del DOM
const botonesAgregar = document.querySelectorAll('.agregar-carrito');
const carritoItemsLista = document.getElementById('carrito-items');
const carritoTotalElement = document.getElementById('carrito-total');
const botonFinalizarCompra = document.getElementById('finalizar-compra');
const carritoModal = document.getElementById('carrito-modal');
const modalOverlay = document.getElementById('modal-overlay'); // Overlay para el carrito
const botonCerrarModal = document.getElementById('cerrar-modal');
const verCarritoButton = document.getElementById('ver-carrito');
const carritoBadge = document.getElementById('carrito-badge');
const userIdDisplay = document.getElementById('user-id-display');
const notificationElement = document.getElementById('notification');
// Elementos del nuevo modal de cliente
const clienteModal = document.getElementById('cliente-modal');
const clienteModalOverlay = document.getElementById('cliente-modal-overlay'); // Overlay para el cliente
const botonConfirmarPedido = document.getElementById('confirmar-pedido');
const botonCancelarClienteModal = document.getElementById('cancelar-cliente-modal');
const inputNombreCliente = document.getElementById('nombre-cliente');
const inputDireccionCliente = document.getElementById('direccion-cliente');
const selectFormaPago = document.getElementById('forma-pago');
let carrito = [];
let total = 0;
// Función para mostrar notificaciones
function showNotification(message) {
notificationElement.textContent = message;
notificationElement.classList.add('show');
setTimeout(() => {
notificationElement.classList.remove('show');
}, 3000);
}
// Listener de cambios de autenticación
onAuthStateChanged(auth, async (user) => {
if (user) {
userId = user.uid;
userIdDisplay.textContent = `ID de Usuario: ${userId}`;
isAuthReady = true;
console.log("Usuario autenticado:", userId);
cargarCarritoDesdeLocalStorage();
} else {
if (!initialAuthToken) {
try {
await signInAnonymously(auth);
console.log("Sesión anónima iniciada.");
} catch (error) {
console.error("Error al iniciar sesión anónimamente:", error);
}
} else {
try {
await signInWithCustomToken(auth, initialAuthToken);
console.log("Sesión iniciada con token personalizado.");
} catch (error) {
console.error("Error al iniciar sesión con token personalizado:", error);
}
}
}
});
// Cargar carrito desde localStorage
function cargarCarritoDesdeLocalStorage() {
const carritoGuardado = localStorage.getItem('rymComidasCarrito');
if (carritoGuardado) {
carrito = JSON.parse(carritoGuardado);
total = carrito.reduce((sum, item) => sum + item.precioTotal, 0);
actualizarCarrito();
}
}
// Guardar carrito en localStorage
function guardarCarritoEnLocalStorage() {
localStorage.setItem('rymComidasCarrito', JSON.stringify(carrito));
}
// Asignar event listeners a los botones "Agregar al carrito"
botonesAgregar.forEach(boton => {
boton.addEventListener('click', agregarAlCarrito);
});
// Asignar event listeners a los botones de los modales
botonFinalizarCompra.addEventListener('click', mostrarFormularioCliente); // Cambiado para mostrar el formulario
botonCerrarModal.addEventListener('click', cerrarCarrito);
modalOverlay.addEventListener('click', cerrarCarrito);
verCarritoButton.addEventListener('click', mostrarCarrito);
// Event listeners para el modal de cliente
botonConfirmarPedido.addEventListener('click', confirmarPedido);
botonCancelarClienteModal.addEventListener('click', cerrarFormularioCliente);
clienteModalOverlay.addEventListener('click', cerrarFormularioCliente);
function agregarAlCarrito(evento) {
const boton = evento.target;
const articulo = boton.parentElement;
const nombre = articulo.querySelector('h2').textContent;
const precioTexto = articulo.querySelector('.text-red-600').textContent;
const precio = parseFloat(precioTexto.replace('$', ''));
const itemExistente = carrito.find(item => item.nombre === nombre);
if (itemExistente) {
itemExistente.cantidad++;
itemExistente.precioTotal = itemExistente.cantidad * precio;
} else {
carrito.push({ nombre, precio, cantidad: 1, precioTotal: precio });
}
total += precio;
actualizarCarrito();
showNotification(`"${nombre}" añadido al carrito.`);
}
function actualizarCarrito() {
carritoItemsLista.innerHTML = '';
carrito.forEach(item => {
const listItem = document.createElement('li');
listItem.innerHTML = `
<span>${item.nombre}
<button class="cantidad-btn disminuir-cantidad" data-nombre="${item.nombre}">-</button>
x${item.cantidad}
<button class="cantidad-btn aumentar-cantidad" data-nombre="${item.nombre}">+</button>
- $${item.precioTotal.toFixed(2)}
</span>
<span class="eliminar-item" data-nombre="${item.nombre}">Eliminar</span>
`;
carritoItemsLista.appendChild(listItem);
});
carritoTotalElement.textContent = `Total: $${total.toFixed(2)}`;
// Añadir event listeners a los botones de cantidad y eliminar
document.querySelectorAll('.eliminar-item').forEach(botonEliminar => {
botonEliminar.addEventListener('click', eliminarItem);
});
document.querySelectorAll('.aumentar-cantidad').forEach(botonAumentar => {
botonAumentar.addEventListener('click', aumentarCantidad);
});
document.querySelectorAll('.disminuir-cantidad').forEach(botonDisminuir => {
botonDisminuir.addEventListener('click', disminuirCantidad);
});
let totalItems = carrito.reduce((sum, item) => sum + item.cantidad, 0);
carritoBadge.textContent = totalItems;
carritoBadge.style.display = totalItems > 0 ? 'block' : 'none';
guardarCarritoEnLocalStorage();
}
function aumentarCantidad(evento) {
const nombreItem = evento.target.dataset.nombre;
const item = carrito.find(i => i.nombre === nombreItem);
if (item) {
item.cantidad++;
item.precioTotal = item.cantidad * item.precio;
total += item.precio;
actualizarCarrito();
}
}
function disminuirCantidad(evento) {
const nombreItem = evento.target.dataset.nombre;
const item = carrito.find(i => i.nombre === nombreItem);
if (item && item.cantidad > 1) {
item.cantidad--;
item.precioTotal = item.cantidad * item.precio;
total -= item.precio;
actualizarCarrito();
} else if (item && item.cantidad === 1) {
eliminarItem({ target: { dataset: { nombre: nombreItem } } }); // Llama a eliminarItem si la cantidad es 1
}
}
function eliminarItem(evento) {
const nombreItem = evento.target.dataset.nombre;
const itemIndex = carrito.findIndex(item => item.nombre === nombreItem);
if (itemIndex > -1) {
const itemAEliminar = carrito[itemIndex];
total -= itemAEliminar.precioTotal; // Restar el precio total de ese item
carrito.splice(itemIndex, 1); // Eliminar el item del array
actualizarCarrito();
showNotification(`"${nombreItem}" eliminado del carrito.`);
}
if (carrito.length === 0) {
cerrarCarrito();
}
}
function mostrarCarrito() {
if (carrito.length === 0) {
showNotification('El carrito está vacío. Agregue productos antes de finalizar la compra.');
return;
}
actualizarCarrito();
carritoModal.classList.remove('oculto');
carritoModal.classList.add('visible');
modalOverlay.classList.remove('oculto');
modalOverlay.classList.add('visible');
}
function cerrarCarrito() {
carritoModal.classList.add('oculto');
carritoModal.classList.remove('visible');
modalOverlay.classList.add('oculto');
modalOverlay.classList.remove('visible');
}
function mostrarFormularioCliente() {
if (carrito.length === 0) {
showNotification('El carrito está vacío. Agregue productos antes de finalizar la compra.');
return;
}
// Cierra el modal del carrito si está abierto
cerrarCarrito();
clienteModal.classList.remove('oculto');
clienteModal.classList.add('visible');
clienteModalOverlay.classList.remove('oculto');
clienteModalOverlay.classList.add('visible');
}
function cerrarFormularioCliente() {
clienteModal.classList.add('oculto');
clienteModal.classList.remove('visible');
clienteModalOverlay.classList.add('oculto');
clienteModalOverlay.classList.remove('visible');
}
async function confirmarPedido() {
const nombreCliente = inputNombreCliente.value.trim();
const direccionCliente = inputDireccionCliente.value.trim();
const formaPago = selectFormaPago.value;
if (!nombreCliente || !direccionCliente || !formaPago) {
showNotification('Por favor, complete todos los campos del formulario.');
return;
}
if (!isAuthReady || !userId) {
showNotification('Error: Autenticación no lista. Intente de nuevo.');
console.error("Autenticación no lista o userId no disponible.");
return;
}
let mensajeWhatsApp = `¡Nuevo Pedido de RYM Comidas!\n\n`;
mensajeWhatsApp += `Cliente: ${nombreCliente}\n`;
mensajeWhatsApp += `Dirección: ${direccionCliente}\n`;
mensajeWhatsApp += `Forma de Pago: ${formaPago}\n\n`;
mensajeWhatsApp += `Detalle del Pedido:\n`;
carrito.forEach(item => {
mensajeWhatsApp += `${item.nombre} x${item.cantidad} - $${item.precioTotal.toFixed(2)}\n`;
});
mensajeWhatsApp += `Total: $${total.toFixed(2)}`;
// Guardar pedido en Firestore
try {
const ordersCollectionRef = collection(db, `artifacts/${appId}/users/${userId}/orders`);
await addDoc(ordersCollectionRef, {
cliente: nombreCliente,
direccion: direccionCliente,
formaPago: formaPago,
items: carrito,
total: total,
timestamp: new Date(),
userId: userId
});
console.log("Pedido guardado en Firestore.");
showNotification("Pedido enviado y guardado con éxito!");
} catch (e) {
console.error("Error al guardar el pedido en Firestore: ", e);
showNotification("Error al guardar el pedido. Intente de nuevo.");
}
// Enviar por WhatsApp
const telefono = "5493704561974";
const url = `https://api.whatsapp.com/send/?phone=${telefono}&text=${encodeURIComponent(mensajeWhatsApp)}&type=phone_number&app_absent=0`;
window.open(url, '_blank');
// Vaciar carrito y localStorage
carrito = [];
total = 0;
localStorage.removeItem('rymComidasCarrito');
actualizarCarrito();
cerrarFormularioCliente(); // Cierra el formulario del cliente
}
});
</script>
<header class="bg-red-600 text-white py-4 text-center rounded-b-md shadow-md">
<h1 class="text-2xl font-semibold">RYM Comidas</h1>
</header>
<main class="container mx-auto mt-6 p-4">
<div class="text-right text-gray-600 text-sm mb-2" id="user-id-display">
</div>
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<article class="bg-white rounded-lg shadow-md p-4 flex flex-col justify-between">
<h2 class="text-xl font-semibold mb-2 text-center text-gray-800">Hamburguesa Simple</h2>
<p class="text-gray-700 text-sm mb-2 text-center">Lechuga, tomate, jamón y queso.</p>
<p class="text-lg font-bold text-center text-red-600 mb-4">$3000</p>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline self-center w-3/4 agregar-carrito">Agregar al carrito</button>
</article>
<article class="bg-white rounded-lg shadow-md p-4 flex flex-col justify-between">
<h2 class="text-xl font-semibold mb-2 text-center text-gray-800">Hamburguesa Completa</h2>
<p class="text-gray-700 text-sm mb-2 text-center">Lechuga, tomate, huevo, jamón y queso.</p>
<p class="text-lg font-bold text-center text-red-600 mb-4">$4000</p>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline self-center w-3/4 agregar-carrito">Agregar al carrito</button>
</article>
<article class="bg-white rounded-lg shadow-md p-4 flex flex-col justify-between">
<h2 class="text-xl font-semibold mb-2 text-center text-gray-800">Empanadas de Carne</h2>
<p class="text-gray-700 text-sm mb-2 text-center">Relleno de carne jugoso.</p>
<p class="text-lg font-bold text-center text-red-600 mb-4">$6000</p>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline self-center w-3/4 agregar-carrito">Agregar al carrito</button>
</article>
<article class="bg-white rounded-lg shadow-md p-4 flex flex-col justify-between">
<h2 class="text-xl font-semibold mb-2 text-center text-gray-800">Empanadas de Jamón y Queso</h2>
<p class="text-gray-700 text-sm mb-2 text-center">Relleno de jamón y queso.</p>
<p class="text-lg font-bold text-center text-red-600 mb-4">$6500</p>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline self-center w-3/4 agregar-carrito">Agregar al carrito</button>
</article>
<article class="bg-white rounded-lg shadow-md p-4 flex flex-col justify-between">
<h2 class="text-xl font-semibold mb-2 text-center text-gray-800">Lomito Simple</h2>
<p class="text-gray-700 text-sm mb-2 text-center">Lechuga, tomate, jamón y queso.</p>
<p class="text-lg font-bold text-center text-red-600 mb-4">$7500</p>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline self-center w-3/4 agregar-carrito">Agregar al carrito</button>
</article>
<article class="bg-white rounded-lg shadow-md p-4 flex flex-col justify-between">
<h2 class="text-xl font-semibold mb-2 text-center text-gray-800">Lomito Completo</h2>
<p class="text-gray-700 text-sm mb-2 text-center">Lechuga, tomate, huevo, jamón y queso.</p>
<p class="text-lg font-bold text-center text-red-600 mb-4">$8000</p>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline self-center w-3/4 agregar-carrito">Agregar al carrito</button>
</article>
<article class="bg-white rounded-lg shadow-md p-4 flex flex-col justify-between">
<h2 class="text-xl font-semibold mb-2 text-center text-gray-800">Sándwich de Milanesa de Carne Simple</h2>
<p class="text-gray-700 text-sm mb-2 text-center">Lechuga, tomate, jamón y queso.</p>
<p class="text-lg font-bold text-center text-red-600 mb-4">$4500</p>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline self-center w-3/4 agregar-carrito">Agregar al carrito</button>
</article>
<article class="bg-white rounded-lg shadow-md p-4 flex flex-col justify-between">
<h2 class="text-xl font-semibold mb-2 text-center text-gray-800">Sándwich de Milanesa de Carne Completo</h2>
<p class="text-gray-700 text-sm mb-2 text-center">Lechuga, tomate, huevo, jamón y queso.</p>
<p class="text-lg font-bold text-center text-red-600 mb-4">$5000</p>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline self-center w-3/4 agregar-carrito">Agregar al carrito</button>
</article>
<article class="bg-white rounded-lg shadow-md p-4 flex flex-col justify-between">
<h2 class="text-xl font-semibold mb-2 text-center text-gray-800">Sándwich de Milanesa de Pollo Simple</h2>
<p class="text-gray-700 text-sm mb-2 text-center">Lechuga, tomate, jamón y queso.</p>
<p class="text-lg font-bold text-center text-red-600 mb-4">$4000</p>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline self-center w-3/4 agregar-carrito">Agregar al carrito</button>
</article>
<article class="bg-white rounded-lg shadow-md p-4 flex flex-col justify-between">
<h2 class="text-xl font-semibold mb-2 text-center text-gray-800">Sándwich de Milanesa de Pollo Completo</h2>
<p class="text-gray-700 text-sm mb-2 text-center">Lechuga, tomate, huevo, jamón y queso.</p>
<p class="text-lg font-bold text-center text-red-600 mb-4">$4500</p>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline self-center w-3/4 agregar-carrito">Agregar al carrito</button>
</article>
<article class="bg-white rounded-lg shadow-md p-4 flex flex-col justify-between">
<h2 class="text-xl font-semibold mb-2 text-center text-gray-800">Pizza Muzzarella</h2>
<p class="text-gray-700 text-sm mb-2 text-center">Salsa de tomate, muzzarella y orégano.</p>
<p class="text-lg font-bold text-center text-red-600 mb-4">$6000</p>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline self-center w-3/4 agregar-carrito">Agregar al carrito</button>
</article>
<article class="bg-white rounded-lg shadow-md p-4 flex flex-col justify-between">
<h2 class="text-xl font-semibold mb-2 text-center text-gray-800">Pizza Pepperoni</h2>
<p class="text-gray-700 text-sm mb-2 text-center">Salsa de tomate, salame de cerdo.</p>
<p class="text-lg font-bold text-center text-red-600 mb-4">$8000</p>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline self-center w-3/4 agregar-carrito">Agregar al carrito</button>
</article>
<article class="bg-white rounded-lg shadow-md p-4 flex flex-col justify-between">
<h2 class="text-xl font-semibold mb-2 text-center text-gray-800">Pizza Especial</h2>
<p class="text-gray-700 text-sm mb-2 text-center">Salsa de tomate, muzzarella, tomate, jamón y huevo.</p>
<p class="text-lg font-bold text-center text-red-600 mb-4">$7000</p>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline self-center w-3/4 agregar-carrito">Agregar al carrito</button>
</article>
<article class="bg-white rounded-lg shadow-md p-4 flex flex-col justify-between">
<h2 class="text-xl font-semibold mb-2 text-center text-gray-800">Papas Fritas Porción</h2>
<p class="text-gray-700 text-sm mb-2 text-center">Porción de papas fritas.</p>
<p class="text-lg font-bold text-center text-red-600 mb-4">$3000</p>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline self-center w-3/4 agregar-carrito">Agregar al carrito</button>
</article>
<article class="bg-white rounded-lg shadow-md p-4 flex flex-col justify-between">
<h2 class="text-xl font-semibold mb-2 text-center text-gray-800">Papas Fritas Gratinadas Porción</h2>
<p class="text-gray-700 text-sm mb-2 text-center">Porción de papas fritas gratinadas.</p>
<p class="text-lg font-bold text-center text-red-600 mb-4">$5000</p>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline self-center w-3/4 agregar-carrito">Agregar al carrito</button>
</article>
<article class="bg-white rounded-lg shadow-md p-4 flex flex-col justify-between">
<h2 class="text-xl font-semibold mb-2 text-center text-gray-800">Coca Cola</h2>
<p class="text-gray-700 text-sm mb-2 text-center">Gaseosa Coca Cola 1.5Lts.</p>
<p class="text-lg font-bold text-center text-red-600 mb-4">$3500</p>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline self-center w-3/4 agregar-carrito">Agregar al carrito</button>
</article>
<article class="bg-white rounded-lg shadow-md p-4 flex flex-col justify-between">
<h2 class="text-xl font-semibold mb-2 text-center text-gray-800">Fanta Naranja</h2>
<p class="text-gray-700 text-sm mb-2 text-center">Gaseosa Fanta Naranja 1.5Lts.</p>
<p class="text-lg font-bold text-center text-red-600 mb-4">$3000</p>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline self-center w-3/4 agregar-carrito">Agregar al carrito</button>
</article>
</section>
<div class="text-center mt-4">
<button id="ver-carrito" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline mr-4">
<i class="fas fa-shopping-cart"></i> Ver Carrito <span id="carrito-badge" class="ml-2 px-2 py-1 rounded-full bg-red-500 text-white text-xs font-semibold" style="display: none;">0</span>
</button>
<button id="finalizar-compra" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline">Finalizar Compra</button>
</div>
</main>
<div id="carrito-modal" class="oculto fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div id="modal-overlay" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
Tu Carrito de Compras
</h3>
<ul id="carrito-items" class="mt-2 text-gray-700">
</ul>
<p id="carrito-total" class="text-gray-900"></p>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button id="cerrar-modal" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-gray-100 text-base font-medium text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
Cerrar
</button>
</div>
</div>
</div>
</div>
<div id="cliente-modal" class="oculto fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title-cliente" role="dialog" aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div id="cliente-modal-overlay" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title-cliente">
Detalles del Cliente y Forma de Pago
</h3>
<form id="cliente-form" class="mt-4 space-y-4">
<div>
<label for="nombre-cliente" class="block text-sm font-medium text-gray-700">Nombre:</label>
<input type="text" id="nombre-cliente" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2" required>
</div>
<div>
<label for="direccion-cliente" class="block text-sm font-medium text-gray-700">Dirección de Entrega:</label>
<input type="text" id="direccion-cliente" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2" required>
</div>
<div>
<label for="forma-pago" class="block text-sm font-medium text-gray-700">Forma de Pago:</label>
<select id="forma-pago" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2" required>
<option value="">Seleccione una opción</option>
<option value="Efectivo">Efectivo</option>
<option value="Tarjeta de Crédito/Débito">Tarjeta de Crédito/Débito</option>
<option value="Transferencia Bancaria">Transferencia Bancaria</option>
</select>
</div>
</form>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button id="confirmar-pedido" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">
Confirmar Pedido
</button>
<button id="cancelar-cliente-modal" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-gray-100 text-base font-medium text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
Cancelar
</button>
</div>
</div>
</div>
</div>
<footer class="bg-gray-800 text-white py-4 text-center mt-8 rounded-t-md shadow-md">
<p>© 2024 RYM Comidas. Todos los derechos reservados.</p>
</footer>