<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nuestra Boda - Invitación</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            background: #f5f5f5;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .invitation-container {
            max-width: 400px;
            width: 100%;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
            background: white;
        }
        
        .invitation-image {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .guest-name-container {
            padding: 20px 25px 10px;
            background: linear-gradient(135deg, #fefefe 0%, #f9fdf9 100%);
            text-align: center;
            border-bottom: 1px solid rgba(139, 195, 74, 0.1);
        }
        
        .guest-name {
            font-size: 1.1rem;
            font-weight: 600;
            color: #4a6741;
            font-family: 'Georgia', serif;
            font-style: italic;
            display: none;
            margin: 0;
            letter-spacing: 0.3px;
        }
        
        .buttons-container {
            padding: 35px 30px;
            background: linear-gradient(135deg, #fefefe 0%, #f9fdf9 100%);
            display: flex;
            flex-direction: row;
            gap: 25px;
            align-items: center;
            justify-content: center;
        }
        
        .attendance-btn {
            padding: 12px 30px;
            border-radius: 25px;
            border: 1.5px solid rgba(139, 195, 74, 0.2);
            font-size: 0.85rem;
            font-weight: 400;
            cursor: pointer;
            transition: all 0.3s ease;
            letter-spacing: 0.3px;
            font-family: 'Georgia', serif;
            min-width: 160px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            background: rgba(255, 255, 255, 0.8);
            color: #6b7c6b;
        }
        
        .btn-yes {
            background: rgba(232, 245, 233, 0.6);
            color: #4a6741;
            border-color: rgba(139, 195, 74, 0.3);
        }
        
        .btn-yes:hover {
            background: rgba(232, 245, 233, 0.8);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(139, 195, 74, 0.15);
            border-color: rgba(139, 195, 74, 0.4);
            color: #3d5a36;
        }
        
        .btn-no {
            background: rgba(255, 235, 238, 0.6);
            color: #8b4a47;
            border-color: rgba(198, 40, 40, 0.2);
        }
        
        .btn-no:hover {
            background: rgba(255, 235, 238, 0.8);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(198, 40, 40, 0.15);
            border-color: rgba(198, 40, 40, 0.3);
            color: #7a3f3c;
        }
        
        .attendance-btn.selected {
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }
        
        .btn-yes.selected {
            background: rgba(232, 245, 233, 0.9);
            border-color: rgba(139, 195, 74, 0.5);
            color: #2d4a26;
            box-shadow: 0 3px 10px rgba(139, 195, 74, 0.2);
        }
        
        .btn-no.selected {
            background: rgba(255, 235, 238, 0.9);
            border-color: rgba(198, 40, 40, 0.4);
            color: #6b3330;
            box-shadow: 0 3px 10px rgba(198, 40, 40, 0.2);
        }
        
        .attendance-btn:disabled {
            opacity: 0.5 !important;
            cursor: not-allowed !important;
            transform: none !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
        }
        
        .attendance-btn:disabled:hover {
            transform: none !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
        }
        
        .confirmation-message {
            margin: 20px auto 0;
            background: rgba(255, 255, 255, 0.95);
            padding: 15px 25px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 400;
            text-align: center;
            display: none;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            max-width: 90%;
            width: fit-content;
            border: 1px solid rgba(139, 195, 74, 0.1);
            line-height: 1.5;
            font-family: 'Georgia', serif;
            font-style: italic;
            color: #6b7c6b;
        }
        
        .confirmation-message.success {
            color: #4a6741;
            background: rgba(248, 252, 248, 0.95);
            border-color: rgba(139, 195, 74, 0.2);
        }
        
        .confirmation-message.decline {
            color: #8b4a47;
            background: rgba(252, 248, 248, 0.95);
            border-color: rgba(198, 40, 40, 0.15);
        }
        
        @media (max-width: 500px) {
            .invitation-container {
                max-width: 340px;
            }
            
            .guest-name-container {
                padding: 15px 20px 8px;
            }
            
            .guest-name {
                font-size: 1rem;
            }
            
            .buttons-container {
                padding: 25px 20px;
                flex-direction: column;
                gap: 15px;
            }
            
            .attendance-btn {
                min-width: 180px;
                padding: 10px 25px;
                font-size: 0.8rem;
            }
            
            .confirmation-message {
                font-size: 0.75rem;
                padding: 10px 16px;
                margin-top: 15px;
            }
        }
        
        @media (max-width: 380px) {
            .invitation-container {
                max-width: 300px;
            }
            
            .guest-name-container {
                padding: 12px 15px 6px;
            }
            
            .guest-name {
                font-size: 0.9rem;
            }
            
            .buttons-container {
                padding: 20px 15px;
                gap: 12px;
            }
            
            .attendance-btn {
                min-width: 160px;
                padding: 8px 20px;
                font-size: 0.75rem;
            }
            
            .confirmation-message {
                font-size: 0.7rem;
                padding: 8px 12px;
                margin-top: 12px;
            }
        }
    </style>
</head>
<body>
    <div class="invitation-container">
        <img src="img/f2.jpeg" alt="Invitación de Boda" class="invitation-image">
        
        <div class="guest-name-container">
            <div class="guest-name" id="guestName"></div>
        </div>
        
        <div class="buttons-container">
            <button class="attendance-btn btn-yes" onclick="confirmarAsistencia('si')">
                ✓ Sí, estaremos
            </button>
            <button class="attendance-btn btn-no" onclick="confirmarAsistencia('no')">
                ✗ No podremos ir
            </button>
        </div>
        
        <div id="confirmationMessage" class="confirmation-message"></div>
    </div>

    <script>
        const urlParams = new URLSearchParams(window.location.search);
        const invitado = urlParams.get('familia');
        if (invitado) {
            const guestElement = document.getElementById('guestName');
            guestElement.textContent = decodeURIComponent(invitado);
            guestElement.style.display = 'block';
        }

        // Verificar si ya confirmó al cargar la página
        window.addEventListener('load', function() {
            verificarConfirmacionExistente();
        });

        async function confirmarAsistencia(respuesta) {
            // Verificar si ya confirmó antes de proceder
            const invitadoParam = new URLSearchParams(window.location.search).get('familia') || 'Invitados';
            const nombreInvitado = invitadoParam ? decodeURIComponent(invitadoParam) : 'Invitados';
            
            if (await yaConfirmo(nombreInvitado)) {
                mostrarMensajeYaConfirmo();
                return;
            }
            
            const botones = document.querySelectorAll('.attendance-btn');
            const mensaje = document.getElementById('confirmationMessage');
            
            botones.forEach(btn => btn.classList.remove('selected'));
            mensaje.style.display = 'none';
            
            if (respuesta === 'si') {
                botones[0].classList.add('selected');
                
                const numPersonas = prompt('¡Qué alegría que puedan acompañarnos! 🎉\n\n¿Cuántas personas asistirán en total?', '2');
                
                if (numPersonas && !isNaN(numPersonas) && numPersonas > 0) {
                    const invitadoParam = new URLSearchParams(window.location.search).get('familia') || 'Invitados';
                    const nombreInvitado = invitadoParam ? decodeURIComponent(invitadoParam) : 'Invitados';
                    
                    // Obtener fecha y hora actual
                    const ahora = new Date();
                    const fecha = ahora.toLocaleDateString('es-CO');
                    const hora = ahora.toLocaleTimeString('es-CO');
                    
                    // Guardar confirmación localmente
                    guardarConfirmacion(nombreInvitado, 'SI', numPersonas, fecha, hora);
                    
                    mensaje.textContent = `¡Perfecto! Confirmamos ${numPersonas} persona${numPersonas > 1 ? 's' : ''}. ¡Gracias por confirmar su asistencia! 💚`;
                    mensaje.className = 'confirmation-message success';
                    mensaje.style.display = 'block';
                    
                    createConfetti();
                } else if (numPersonas !== null) {
                    botones[0].classList.remove('selected');
                    mensaje.textContent = 'Por favor, ingresa un número válido de personas que asistirán.';
                    mensaje.className = 'confirmation-message';
                    mensaje.style.display = 'block';
                }
            } else {
                botones[1].classList.add('selected');
                
                const invitadoParam = new URLSearchParams(window.location.search).get('familia') || 'Invitados';
                const nombreInvitado = invitadoParam ? decodeURIComponent(invitadoParam) : 'Invitados';
                
                // Obtener fecha y hora actual
                const ahora = new Date();
                const fecha = ahora.toLocaleDateString('es-CO');
                const hora = ahora.toLocaleTimeString('es-CO');
                
                // Guardar confirmación localmente
                guardarConfirmacion(nombreInvitado, 'NO', 0, fecha, hora);
                
                mensaje.textContent = 'Lamentamos que no puedan acompañarnos. Gracias por informarnos. 💔';
                mensaje.className = 'confirmation-message decline';
                mensaje.style.display = 'block';
            }
        }

        function createConfetti() {
            for (let i = 0; i < 30; i++) {
                const confetti = document.createElement('div');
                confetti.style.position = 'fixed';
                confetti.style.left = Math.random() * 100 + 'vw';
                confetti.style.top = '-10px';
                confetti.style.width = '8px';
                confetti.style.height = '8px';
                confetti.style.background = ['#4CAF50', '#45a049', '#81C784', '#66BB6A'][Math.floor(Math.random() * 4)];
                confetti.style.borderRadius = '50%';
                confetti.style.pointerEvents = 'none';
                confetti.style.zIndex = '9999';
                
                confetti.animate([
                    { transform: 'translateY(-10px) rotate(0deg)', opacity: 1 },
                    { transform: 'translateY(100vh) rotate(360deg)', opacity: 0 }
                ], {
                    duration: 2000 + Math.random() * 1000,
                    easing: 'linear'
                }).onfinish = () => confetti.remove();
                
                document.body.appendChild(confetti);
            }
        }

        async function guardarConfirmacion(nombre, respuesta, personas, fecha, hora) {
            try {
                const confirmacionData = {
                    nombre: nombre,
                    respuesta: respuesta,
                    personas: parseInt(personas)
                };
                
                const response = await fetch('api_confirmaciones.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(confirmacionData)
                });
                
                const result = await response.json();
                
                if (result.success) {
                    console.log('Confirmación guardada exitosamente:', result);
                } else {
                    console.error('Error al guardar:', result.error);
                    throw new Error(result.error);
                }
                
            } catch (error) {
                console.error('Error de conexión:', error);
                // Fallback a localStorage si hay error de conexión
                let confirmaciones = JSON.parse(localStorage.getItem('confirmacionesBoda') || '[]');
                const nuevaConfirmacion = {
                    id: Date.now(),
                    nombre: nombre,
                    respuesta: respuesta,
                    personas: parseInt(personas),
                    fecha: fecha,
                    hora: hora,
                    timestamp: new Date().toISOString(),
                    pendiente_sync: true
                };
                confirmaciones.push(nuevaConfirmacion);
                localStorage.setItem('confirmacionesBoda', JSON.stringify(confirmaciones));
            }
        }

        async function yaConfirmo(nombreInvitado) {
            try {
                // Verificar primero en el servidor
                const response = await fetch('api_confirmaciones.php');
                const result = await response.json();
                
                if (result.success) {
                    return result.data.some(conf => conf.nombre.toLowerCase() === nombreInvitado.toLowerCase());
                }
            } catch (error) {
                console.error('Error al verificar confirmación:', error);
            }
            
            // Fallback a localStorage
            const confirmaciones = JSON.parse(localStorage.getItem('confirmacionesBoda') || '[]');
            return confirmaciones.some(conf => conf.nombre.toLowerCase() === nombreInvitado.toLowerCase());
        }

        function verificarConfirmacionExistente() {
            const invitadoParam = new URLSearchParams(window.location.search).get('familia');
            if (!invitadoParam) return;
            
            const nombreInvitado = decodeURIComponent(invitadoParam);
            const confirmaciones = JSON.parse(localStorage.getItem('confirmacionesBoda') || '[]');
            const confirmacionExistente = confirmaciones.find(conf => conf.nombre.toLowerCase() === nombreInvitado.toLowerCase());
            
            if (confirmacionExistente) {
                mostrarConfirmacionExistente(confirmacionExistente);
            }
        }

        function mostrarConfirmacionExistente(confirmacion) {
            const botones = document.querySelectorAll('.attendance-btn');
            const mensaje = document.getElementById('confirmationMessage');
            
            // Deshabilitar botones
            botones.forEach(btn => {
                btn.disabled = true;
                btn.style.opacity = '0.5';
                btn.style.cursor = 'not-allowed';
            });
            
            // Mostrar el botón correspondiente como seleccionado
            if (confirmacion.respuesta === 'SI') {
                botones[0].classList.add('selected');
                mensaje.textContent = `✅ Ya confirmaste tu asistencia el ${confirmacion.fecha} a las ${confirmacion.hora}. Confirmaste ${confirmacion.personas} persona${confirmacion.personas > 1 ? 's' : ''}.`;
                mensaje.className = 'confirmation-message success';
            } else {
                botones[1].classList.add('selected');
                mensaje.textContent = `❌ Ya confirmaste que no podrás asistir el ${confirmacion.fecha} a las ${confirmacion.hora}.`;
                mensaje.className = 'confirmation-message decline';
            }
            
            mensaje.style.display = 'block';
        }

        function mostrarMensajeYaConfirmo() {
            const invitadoParam = new URLSearchParams(window.location.search).get('familia');
            const nombreInvitado = invitadoParam ? decodeURIComponent(invitadoParam) : 'Invitados';
            const confirmaciones = JSON.parse(localStorage.getItem('confirmacionesBoda') || '[]');
            const confirmacionExistente = confirmaciones.find(conf => conf.nombre.toLowerCase() === nombreInvitado.toLowerCase());
            
            const mensaje = document.getElementById('confirmationMessage');
            
            if (confirmacionExistente.respuesta === 'SI') {
                mensaje.textContent = `⚠️ Ya confirmaste tu asistencia anteriormente. No puedes cambiar tu respuesta.`;
                mensaje.className = 'confirmation-message';
            } else {
                mensaje.textContent = `⚠️ Ya confirmaste que no podrás asistir. No puedes cambiar tu respuesta.`;
                mensaje.className = 'confirmation-message';
            }
            
            mensaje.style.display = 'block';
            
            // Ocultar mensaje después de 3 segundos
            setTimeout(() => {
                mensaje.style.display = 'none';
            }, 3000);
        }
    </script>
</body>
</html>