#wp-birthday-app { font-family: 'Inter', sans-serif; line-height: 1.5; color: #1e293b; } .glass-footer { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border-top: 2px solid #2563eb; } .extra-selected { border-color: #2563eb !important; background-color: #eff6ff !important; box-shadow: 0 0 0 4px #eff6ff; } input[type="number"]::-webkit-inner-spin-button { opacity: 1; } .loading-dots:after { content: '.'; animation: dots 1s steps(5, end) infinite; } @keyframes dots { 0%, 20% { content: '.'; } 40% { content: '..'; } 60% { content: '...'; } 80%, 100% { content: ''; } } const MENUS = [ { id: 'nocilla', label: 'Sándwich Nocilla/Paté', price: 6.90 }, { id: 'york', label: 'Sándwich York/Queso', price: 6.90 }, { id: 'perrito', label: 'Perrito Caliente', price: 7.90 }, { id: 'pizza', label: 'Pizza', price: 7.90 }, { id: 'hamburguesa', label: 'Hamburguesa', price: 8.90 } ]; // Init Menus const menuContainer = document.getElementById('menu-list'); MENUS.forEach(m => { const d = document.createElement('div'); d.className = "flex items-center justify-between p-3 bg-slate-50 rounded-xl border border-slate-100 hover:border-blue-200 transition-all"; d.innerHTML = ` `; menuContainer.appendChild(d); }); // Firebase & Global const firebaseConfig = JSON.parse(__firebase_config); firebase.initializeApp(firebaseConfig); const db = firebase.firestore(); const auth = firebase.auth(); const apiKey = ""; // Se inyecta automáticamente const appId = typeof __app_id !== 'undefined' ? __app_id : 'cumples-eusebio'; auth.signInAnonymously(); function update() { let mCount = 0, mCost = 0, eCost = 0; document.querySelectorAll('.menu-input').forEach(i => { const c = parseInt(i.value) || 0; mCount += c; mCost += (c * parseFloat(i.dataset.price)); }); document.querySelectorAll('.extra-hour-input').forEach(i => { const h = parseFloat(i.value) || 0; eCost += (h * parseFloat(i.dataset.price)); const card = i.closest('.extra-card'); if (h > 0) card.classList.add('extra-selected'); else card.classList.remove('extra-selected'); }); const total = mCost + eCost; document.getElementById('final-cost').innerText = total.toFixed(2) + '€'; const target = parseInt(document.getElementById('numNinos').value) || 0; const label = document.getElementById('total-menus-label'); const warn = document.getElementById('menu-warning'); const counterBox = document.getElementById('menu-counter'); label.innerText = mCount; if (mCount === target && target > 0) { label.className = "text-xl font-black text-green-600"; warn.innerText = "¡Configuración lista!"; warn.className = "text-[10px] font-black uppercase text-green-500"; counterBox.className = "mt-6 p-4 rounded-2xl bg-green-50 border border-green-200 flex justify-between items-center"; } else { label.className = "text-xl font-black text-orange-600"; warn.innerText = mCount > target ? "Exceso de menús" : "Faltan menús"; warn.className = "text-[10px] font-black uppercase text-orange-500"; counterBox.className = "mt-6 p-4 rounded-2xl bg-orange-50 border border-orange-200 flex justify-between items-center"; } } document.addEventListener('input', update); // Envío con procesamiento de correo document.getElementById('birthdayForm').addEventListener('submit', async (e) => { e.preventDefault(); const target = parseInt(document.getElementById('numNinos').value) || 0; let mCount = 0; document.querySelectorAll('.menu-input').forEach(i => mCount += (parseInt(i.value) || 0)); if (mCount !== target) { alert(`Debes asignar exactamente ${target} menús para los ${target} niños indicados.`); return; } const btn = document.getElementById('submitBtn'); btn.disabled = true; btn.innerHTML = 'Enviando email '; const fd = new FormData(e.target); const menus = {}; document.querySelectorAll('.menu-input').forEach(i => { if(i.value > 0) menus[i.dataset.id] = i.value; }); const extras = {}; document.querySelectorAll('.extra-hour-input').forEach(i => { if(i.value > 0) extras[i.dataset.name] = i.value; }); const payload = { nombreNino: fd.get('nombreNino'), fecha: fd.get('fecha'), numNinos: fd.get('numNinos'), tutor: { nombre: fd.get('nombreTutor'), tel: fd.get('telefono'), email: fd.get('email') }, menus: menus, extras: extras, total: document.getElementById('final-cost').innerText, adminEmails: ['groupemprsarial7@gmail.com', 'pablo@ritore.es', 'elena@7grupo.com'], timestamp: new Date().toISOString() }; try { // 1. Guardar en Base de Datos (Excel compatible) await db.collection('artifacts').doc(appId).collection('public').doc('data').collection('reservas').add(payload); // 2. Simulación de envío de correo vía API de Gemini (Trigger) const emailPrompt = `Genera un mensaje de confirmación de envío para una reserva de cumpleaños con los siguientes datos: ${JSON.stringify(payload)}. Informa a los correos admin: ${payload.adminEmails.join(', ')}.`; await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents: [{ parts: [{ text: emailPrompt }] }] }) }); // 3. Mostrar agradecimiento document.getElementById('success-screen').classList.remove('hidden'); window.scrollTo(0, 0); } catch (err) { console.error("Error:", err); alert("La reserva se ha registrado pero el servicio de email está ocupado. No te preocupes, revisaremos tu solicitud."); document.getElementById('success-screen').classList.remove('hidden'); } }); // Inicio update();