<!DOCTYPE html>

<head>

<title>Confirmación Cumpleaños Vickol</title>

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, setDoc, doc, getDoc, onSnapshot, setLogLevel } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";

// --- Configuración de Firebase ---

let db, auth;

let appId, userId;

const firebaseConfig = JSON.parse(typeof __firebase_config !== 'undefined' ? __firebase_config : '{}');

appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

try {

const app = initializeApp(firebaseConfig);

db = getFirestore(app);

auth = getAuth(app);

setLogLevel('Debug'); // Habilitar logs para depuración

// Autenticar al usuario (invitado) de forma anónima

onAuthStateChanged(auth, async (user) => {

if (user) {

console.log("Usuario autenticado anónimamente:", user.uid);

userId = user.uid;

} else {

try {

const token = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;

if (token) {

await signInWithCustomToken(auth, token);

console.log("Autenticado con token custom.");

} else {

await signInAnonymously(auth);

console.log("Autenticado anónimamente.");

}

} catch (error) {

console.error("Error en la autenticación anónima:", error);

}

});

} catch (e) {

console.error("Error inicializando Firebase:", e);

}

// --- Lógica de la App ---

document.addEventListener('DOMContentLoaded', () => {

const rsvpFormPage = document.getElementById('rsvp-form-page');

const thankYouPage = document.getElementById('thank-you-page');

const rsvpForm = document.getElementById('rsvp-form');

const submitButton = document.getElementById('submit-button');

const submitButtonText = document.getElementById('submit-button-text');

const submitButtonLoading = document.getElementById('submit-button-loading');

const partnerQuestion = document.getElementById('partner-question');

const attendanceRadios = document.querySelectorAll('input[name="asistencia"]');

const calendarButton = document.getElementById('calendar-button');

const errorMessage = document.getElementById('error-message');

// --- Generar Link de Google Calendar ---

const generateCalendarLink = () => {

const title = "Cumpleaños de Vickol!";

// Fecha/Hora en UTC (Argentina es UTC-3)

// Inicio: 2025-11-23 20:00:00 -> 20251123T230000Z

// Fin: 2025-11-24 01:00:00 -> 20251124T040000Z

const startTime = "20251123T230000Z";

const endTime = "20251124T040000Z";

const details = "Vamos a festejar mis 39 con un asadito! La morfi la pongo yo, el lugar lava los platos. Como cada lugar contratado, me piden que confirme la cantidad de gente.\nMe encantaría que compartas conmigo el festejo de mis ultimos treintis!";

const location = "BierhofBA - Nicaragua 4427 (Palermo)";

const params = new URLSearchParams({

action: 'TEMPLATE',

text: title,

dates: `${startTime}/${endTime}`,

details: details,

location: location,

trp: 'false'

});

return `https://www.google.com/calendar/render?${params.toString()}`;

};

calendarButton.href = generateCalendarLink();

// --- Lógica del Formulario ---

// Mostrar/ocultar la pregunta de la pareja

attendanceRadios.forEach(radio => {

radio.addEventListener('change', () => {

if (radio.value === 'si') {

partnerQuestion.classList.remove('hidden');

} else {

partnerQuestion.classList.add('hidden');

// Si dice que no, reseteamos la opción de pareja

document.querySelector('input[name="pareja"][value="no"]').checked = true;

}

});

// Enviar el formulario

rsvpForm.addEventListener('submit', async (e) => {

e.preventDefault();

if (!db || !auth.currentUser) {

errorMessage.textContent = "Error: No se pudo conectar a la base de datos. Intenta de nuevo.";

errorMessage.classList.remove('hidden');

return;

}

// Mostrar estado de carga

submitButton.disabled = true;

submitButtonText.classList.add('hidden');

submitButtonLoading.classList.remove('hidden');

errorMessage.classList.add('hidden');

try {

const formData = new FormData(rsvpForm);

const nombre = formData.get('nombre').trim();

const asiste = formData.get('asistencia');

// Solo obtenemos el valor de 'pareja' si la pregunta estaba visible

let traePareja = 'no';

if (asiste === 'si') {

traePareja = formData.get('pareja');

}

if (!nombre || !asiste) {

throw new Error("Por favor completa todos los campos requeridos.");

}

// Preparamos los datos para Firestore

const rsvpData = {

nombre: nombre,

asiste: asiste,

traePareja: traePareja,

timestamp: new Date()

};

// Guardamos en la colección pública de la app

const rsvpCollectionPath = `artifacts/${appId}/public/data/rsvps`;

const rsvpCollection = collection(db, rsvpCollectionPath);

await addDoc(rsvpCollection, rsvpData);

console.log("Respuesta guardada en:", rsvpCollectionPath, rsvpData);

// Redireccionar a la página de agradecimiento

rsvpFormPage.classList.add('hidden');

thankYouPage.classList.remove('hidden');

} catch (error) {

console.error("Error al guardar la respuesta:", error);

errorMessage.textContent = `Error: ${error.message || "No se pudo enviar la respuesta."}`;

errorMessage.classList.remove('hidden');

} finally {

// Restaurar botón

submitButton.disabled = false;

submitButtonText.classList.remove('hidden');

submitButtonLoading.classList.add('hidden');

}

});

</script>

<style>

body {

font-family: 'Inter', sans-serif;

}

/* Estilos para los radio buttons personalizados */

.custom-radio:checked + .radio-dot {

transform: scale(1);

}

.custom-radio:checked + .radio-dot + .radio-label {

font-weight: 500;

}

</style>

</head>

<img src="https://placehold.co/800x300/fde68a/a16207?text=Vickol's+39th!"

alt="Banner de fiesta de cumpleaños"

class="w-full h-48 object-cover">

<h1 class="text-3xl font-bold text-amber-700 mb-3">¡Cumpleaños de Vickol!</h1>

Vamos a festejar mis 39 con un asadito! La morfi la pongo yo, el lugar lava los platos. Como cada lugar contratado, me piden que confirme la cantidad de gente.

</p>

¡Me encantaría que compartas conmigo el festejo de mis últimos treintis!

</p>

</svg>

<span class="font-medium">Domingo 23 de Noviembre, 2025 (Preferiado)</span>

</div>

</svg>

</div>

</svg>

<span class="font-medium">BierhofBA - Nicaragua 4427 (Palermo)</span>

</div>

</section>

<a id="calendar-button"

href="#"

target="_blank"

rel="noopener noreferrer"

class="w-full flex items-center justify-center px-4 py-3 bg-white border border-gray-300 rounded-lg shadow-sm text-gray-700 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors duration-150 mb-6">

Agendar en Google Calendar

</a>

<h2 class="text-2xl font-bold text-amber-700 mb-5">Confirmar Asistencia</h2>

<div>

<label for="nombre" class="block text-sm font-medium text-gray-700 mb-1">Nombre y Apellido</label>

<input type="text" name="nombre" id="nombre" required

class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500">

</div>

<div>

<span class="block text-sm font-medium text-gray-700 mb-2">¿Vas a venir?</span>

</span>

<span class="radio-label ml-2 text-gray-700">¡Sí, obvio!</span>

</label>

</span>

<span class="radio-label ml-2 text-gray-700">No puedo :(</span>

</label>

</div>

<span class="block text-sm font-medium text-gray-700 mb-2">¿Venís con pareja?</span>

</span>

<span class="radio-label ml-2 text-gray-700">Sí, somos dos</span>

</label>

</span>

</label>

</div>

<div>

<button type="submit" id="submit-button"

class="w-full flex justify-center py-3 px-4 bg-amber-600 text-white font-medium rounded-lg shadow-md hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed">

<span id="submit-button-text">Enviar Respuesta</span>

</svg>

</span>

</button>

</div>

</form>

</section>

</div>

</svg>

<h1 class="text-3xl font-bold text-gray-800 mb-3">¡Gracias por responder!</h1>

<p class="text-gray-600 text-lg mb-6">Tu respuesta fue enviada correctamente.</p>

<p class="text-gray-600 text-lg">¡Espero verte ahí!</p>

</div>

</body>

</html>