Sistema-Web-Rotiseria/script.js

document.addEventListener("DOMContentLoaded", () => {
    iniciarSlider();
    configurarChatInput();
});

/* ══════════════════════════════
   SLIDER
══════════════════════════════ */
function iniciarSlider() {
    // El slider corre por CSS animation (scroll-infinito), no necesita JS.
    // Esta función existe por si se agrega lógica futura.
}

/* ══════════════════════════════
   MAPA
══════════════════════════════ */
function toggleMapa() {
    const modal = document.getElementById('modal-mapa');
    modal.style.display = (modal.style.display === 'flex') ? 'none' : 'flex';
}

/* ══════════════════════════════
   MODALES GENÉRICOS
══════════════════════════════ */
function cerrarModal(id) {
    const el = document.getElementById(id);
    if (el) el.style.display = 'none';
}

// Cerrar modales al hacer click fuera del contenido
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('modal')) {
        e.target.style.display = 'none';
    }
});

/* ══════════════════════════════
   ALERTA ÉXITO (auto-ocultar)
══════════════════════════════ */
const alertSuccess = document.getElementById('success-alert');
if (alertSuccess) {
    setTimeout(() => {
        alertSuccess.style.transition = "opacity 0.5s ease";
        alertSuccess.style.opacity = "0";
        setTimeout(() => {
            alertSuccess.remove();
            const url = new URL(window.location);
            url.searchParams.delete('exito');
            window.history.replaceState({}, document.title, url);
        }, 500);
    }, 4000);
}

/* ══════════════════════════════
   DROPDOWN CATEGORÍAS
══════════════════════════════ */
function toggleDropdown(event) {
    event.stopPropagation();
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
    if (!event.target.matches('.dropbtn') && !event.target.matches('.dropbtn *')) {
        const dropdown = document.getElementById("myDropdown");
        if (dropdown && dropdown.classList.contains('show')) {
            dropdown.classList.remove('show');
        }
    }
};

/* ══════════════════════════════
   CHATBOT
══════════════════════════════ */
let intentos = 0;
let ultimaRespuestaFueDesconocida = false;
const MINUTOS_BLOQUEO = 10;

function configurarChatInput() {
    const input = document.getElementById('chat-input-text');
    if (!input) return;
    input.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') enviarMensaje();
    });
}

function enviarMensaje() {
    const input = document.getElementById('chat-input-text');
    if (!input) return;
    const texto = input.value.trim();
    if (!texto) return;
    input.value = '';
    procesarConsulta(texto.toLowerCase());
}

function toggleChat() {
    const chatBox = document.getElementById('chat-box');
    const logs = document.getElementById('chat-logs');
    if (!chatBox) return;

    const isVisible = window.getComputedStyle(chatBox).display !== 'none';

    if (!isVisible) {
        // Verificar bloqueo
        const bloqueadoHasta = localStorage.getItem('chat_bloqueado_hasta');
        if (bloqueadoHasta && Date.now() < parseInt(bloqueadoHasta)) {
            const minutosRestantes = Math.ceil((parseInt(bloqueadoHasta) - Date.now()) / 60000);
            chatBox.style.display = 'flex';
            logs.innerHTML = `
                <div class="chat-msg">
                    <div class="cm-msg-text">El chat estará disponible en <b>${minutosRestantes} minuto${minutosRestantes !== 1 ? 's' : ''}</b>.</div>
                </div>
            `;
            // Deshabilitar input
            const input = document.getElementById('chat-input-text');
            const btn = document.querySelector('.chat-send-btn');
            if (input) input.disabled = true;
            if (btn) btn.disabled = true;
            return;
        }

        // Sin bloqueo: abrir normal
        chatBox.style.display = 'flex';
        logs.innerHTML = `
            <div class="chat-msg">
                <div class="cm-msg-text">¡Hola! Soy el asistente de La Pecosa 🍎 ¿En qué puedo ayudarte?</div>
            </div>
        `;
        const input = document.getElementById('chat-input-text');
        const btn = document.querySelector('.chat-send-btn');
        if (input) { input.disabled = false; input.focus(); }
        if (btn) btn.disabled = false;

    } else {
        intentos = 0;
        chatBox.style.display = 'none';
    }
}

function procesarConsulta(mensaje) {
    const logs = document.getElementById('chat-logs');

    const divUsuario = document.createElement("div");
    divUsuario.className = "chat-msg-user";
    divUsuario.textContent = mensaje;
    logs.appendChild(divUsuario);
    logs.scrollTop = logs.scrollHeight;

    fetch('consultar_bot.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: 'mensaje=' + encodeURIComponent(mensaje)
    })
    .then(r => r.json())
    .then(data => {
        agregarMensaje(data.respuesta);

        if (data.accion === 'abrir_mapa') {
            setTimeout(toggleMapa, 800);
        } else if (data.accion === 'abrir_horarios') {
            setTimeout(() => {
                const modal = document.getElementById('modal-horarios-visual');
                if (modal) modal.style.display = 'flex';
            }, 600);
        } else if (data.accion === 'abrir_novedades') {
            setTimeout(() => {
                const modal = document.getElementById('modal-novedades');
                if (modal) modal.style.display = 'flex';
            }, 600);
        } else if (data.accion === 'mostrar_telefonos') {
            mostrarTelefonos();
        } else if (data.accion === 'mostrar_contacto') {
            mostrarContacto();
        } else if (data.accion === 'mostrar_redes') {
            mostrarRedes();
        } else if (data.accion === 'mostrar_pagos') {
            const divBtns = document.createElement("div");
            divBtns.className = "chat-opciones";
            divBtns.innerHTML = `
                <button class="opt-btn" onclick="procesarPago('presencial')"><i class="fa-solid fa-store"></i> Retiro presencial</button>
                <button class="opt-btn" onclick="procesarPago('envio')"><i class="fa-solid fa-motorcycle"></i> Envío a domicilio</button>
            `;
            logs.appendChild(divBtns);

        } else if (data.accion === 'forzar_cierre') {
    intentos++;
    if (intentos >= 3) {
        agregarMensaje("No puedo seguir ayudándote por este medio. ¡Llamanos o escribinos! 😊");
        // Guardar bloqueo
        const hasta = Date.now() + MINUTOS_BLOQUEO * 60 * 1000;
        localStorage.setItem('chat_bloqueado_hasta', hasta);
        setTimeout(() => {
            toggleChat();
            intentos = 0;
        }, 3000);
    }
} else {
    intentos = 0;
}

        logs.scrollTop = logs.scrollHeight;
    })
    .catch(err => {
        console.error("Error en el chatbot:", err);
        agregarMensaje("No pude procesar tu consulta en este momento. ¡Llamanos por teléfono!");
    });
}

function procesarPago(tipo) {
    if (tipo === 'presencial') {
        agregarMensaje("💵 <b>Medios de pago — Retiro presencial:</b><br>• Efectivo<br>• Tarjeta de Débito<br>• Transferencia (Alias: <b>LA.PECOSA.PARANA</b>)");
    } else {
        agregarMensaje("🚚 <b>Medios de pago — Envío a domicilio:</b><br>• Solo transferencia al Alias: <b>LA.PECOSA.PARANA</b>");
    }
}

function mostrarTelefonos() {
    //agregarMensaje("📞 Podés llamarnos a:");
    const logs = document.getElementById('chat-logs');
    const div = document.createElement("div");
    div.className = "chat-links";
    div.innerHTML = `
        <a href="tel:03434231400" class="chat-link-btn"><i class="fa-solid fa-phone"></i> 0343 423-1400</a>
        <a href="tel:03434312763" class="chat-link-btn"><i class="fa-solid fa-phone"></i> 0343 431-2763</a>
    `;
    logs.appendChild(div);
    logs.scrollTop = logs.scrollHeight;
}

function mostrarContacto() {
    //agregarMensaje("¡Contactanos por donde prefieras!");
    const logs = document.getElementById('chat-logs');
    const div = document.createElement("div");
    div.className = "chat-links";
    div.innerHTML = `
        <a href="https://www.instagram.com/lapecosa.rotiseria" target="_blank" class="chat-link-btn chat-link-ig"><i class="fa-brands fa-instagram"></i> Instagram</a>
        <a href="https://mail.google.com/mail/?view=cm&fs=1&to=lapecosaparana@gmail.com" target="_blank" class="chat-link-btn chat-link-mail"><i class="fa-solid fa-envelope"></i> Enviar correo</a>
        <a href="tel:03434231400" class="chat-link-btn"><i class="fa-solid fa-phone"></i> 0343 423-1400</a>
    `;
    logs.appendChild(div);
    logs.scrollTop = logs.scrollHeight;
}

function mostrarRedes() {
    //agregarMensaje("📱 ¡Seguinos en nuestras redes!");
    const logs = document.getElementById('chat-logs');
    const div = document.createElement("div");
    div.className = "chat-links";
    div.innerHTML = `
        <a href="https://www.instagram.com/lapecosa.rotiseria" target="_blank" class="chat-link-btn chat-link-ig"><i class="fa-brands fa-instagram"></i> Instagram</a>
        <a href="https://mail.google.com/mail/?view=cm&fs=1&to=lapecosaparana@gmail.com" target="_blank" class="chat-link-btn chat-link-mail"><i class="fa-solid fa-envelope"></i> Enviar correo</a>
    `;
    logs.appendChild(div);
    logs.scrollTop = logs.scrollHeight;
}

function agregarMensaje(texto) {
    const logs = document.getElementById('chat-logs');
    const div = document.createElement("div");
    div.className = "chat-msg";
    div.innerHTML = `<div class="cm-msg-text">${texto}</div>`;
    logs.appendChild(div);
    logs.scrollTop = logs.scrollHeight;
}

function talkToHuman() {
    window.open("https://wa.me/543434231400?text=Hola! Necesito ayuda con un pedido", "_blank");
}

/* ══════════════════════════════
   PROMO FLOTANTE
══════════════════════════════ */
let ultimaPromoId = 0;
let esPrimeraCarga = true;

function observarPromociones() {
    fetch('verificar_promo.php')
        .then(r => r.json())
        .then(data => {
            if (data && data.id) {
                if (esPrimeraCarga) {
                    esPrimeraCarga = false;
                    ultimaPromoId = data.id;
                    mostrarPromoEnChatbot(data.mensaje, false);
                    return;
                }
                if (data.id > ultimaPromoId) {
                    ultimaPromoId = data.id;
                    mostrarPromoEnChatbot(data.mensaje, true);
                }
            }
        })
        .catch(err => console.error('Error al observar promos:', err));
}

function mostrarPromoEnChatbot(mensaje, forzarApertura) {
    const chatLogs = document.getElementById('chat-logs');
    const cartelFlotante = document.getElementById('alerta-flotante-promo');
    const textoFlotante = document.getElementById('texto-alerta-flotante');

    if (chatLogs) {
        const div = document.createElement("div");
        div.className = "chat-msg chat-promo";
        div.innerHTML = `<div class="cm-msg-text">📢 <b>¡MENÚ DEL DÍA!</b><br>${mensaje}</div>`;
        chatLogs.appendChild(div);
        chatLogs.scrollTop = chatLogs.scrollHeight;
    }

    if (cartelFlotante && textoFlotante) {
        textoFlotante.innerHTML = mensaje;
        cartelFlotante.style.display = 'block';
        setTimeout(() => {
            cartelFlotante.style.opacity = '1';
            cartelFlotante.style.transform = 'translateX(0)';
        }, 100);
    }
}

function cerrarAlertaFlotante() {
    const cartel = document.getElementById('alerta-flotante-promo');
    if (cartel) {
        cartel.style.opacity = '0';
        cartel.style.transform = 'translateX(-20px)';
        setTimeout(() => { cartel.style.display = 'none'; }, 500);
    }
}

observarPromociones();
setInterval(observarPromociones, 10000);