const navText = [
    '<svg width="31" height="23" viewBox="0 0 31 23" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.1167 1L1 11.1167L11.1167 21.2333" stroke="#A6896E" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.3333 11.1166H1.28333" stroke="#A6896E" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>',
    '<svg width="31" height="23" viewBox="0 0 31 23" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.2168 1L29.3335 11.1167L19.2168 21.2333" stroke="#A6896E" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M1 11.1166H29.05" stroke="#A6896E" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>'
];

class Web
{
    static init()
    {
        Web.initDynamicBG();
        $(document).ready(function(e) {
            setTimeout(function () {
                $("html").addClass("loaded");
            }, 100);

            $(".item-menu-mv-otros").click(function()
            {
                $(".navbar-toggler").trigger("click");
            });

            const btnSubir = $("#btn-subir");
            let toScroll = null;
            $(window).scroll(function ()
            {
                let scrollPosition = $(window).scrollTop();

                if (scrollPosition > 300)
                {
                    clearTimeout(toScroll);
                    toScroll = setTimeout(function ()
                    {
                        btnSubir.removeClass("d-none");
                    }, 100);
                }
                else
                {
                    clearTimeout(toScroll);
                    btnSubir.addClass("d-none");
                }

                btnSubir.click(function ()
                {
                    clearTimeout(toScroll);
                    window.scrollTo({top: 0, behavior: 'smooth'});
                    $(this).addClass("d-none");
                });
            });

            new WOW(
                {
                    boxClass:     "title-animation",
                    offset: 50,
                    callback:     function(box) {
                        $(box).addClass("animate");
                    }
                }
            ).init();
        });
    }

    static initInicio()
    {
    }

    static initReservas()
    {
        $(document).ready(function()
        {
            $(".btn-abre-reservas").click(function () {
                ClassBlockUI.abrirBlockUIEstandar("bloqueReservas", undefined, "Reservas", "modal1170");
            });
        });
    }

    static initDynamicBG()
    {
        $(document).ready(function () {
            new WOW(
                {
                    boxClass:     "dynamic-bg",
                    //offset: 200,
                    callback:     function(box) {
                        $(box).addClass("loaded");
                    },
                }
            ).init();
        });
    }

    static initTexto()
    {
        $("document").ready(function()
        {
            //$(".textoSeccion a").attr("target", "_blank");
            $(".textoSeccion a[href^='tel']").removeAttr("target");

            $(".textoSeccion img[style^='float: left'], .textoSeccion img[style^='float:left']").addClass("margin-right-20 margin-bottom-20 img-float");
            $(".textoSeccion img[style^='float: right'], .textoSeccion img[style^='float:right']").addClass("margin-left-20 margin-bottom-20 img-float");

            $(".textoSeccion img:not(.imagenDerecha)").addClass("img-fluid").css("max-width", "100%").css("height", "auto").css("object-fit", "cover");
        });
    }

    static initCarta($section) {
        $(document).ready(function () {
            $(".nav-item-"+$section).addClass("menu-seleccionado");

            const slider = document.querySelector('#menu-carta ul');

            let isDown = false;
            let startX;
            let scrollLeft;
            let moved = false;

            slider.addEventListener('mousedown', (e) => {
                isDown = true;
                moved = false;
                startX = e.pageX - slider.offsetLeft;
                scrollLeft = slider.scrollLeft;
            });

            slider.addEventListener('mouseleave', () => isDown = false);
            slider.addEventListener('mouseup', () => isDown = false);

            slider.addEventListener('mousemove', (e) => {
                if (!isDown) return;
                e.preventDefault();

                const x = e.pageX - slider.offsetLeft;
                const walk = x - startX;

                if (Math.abs(walk) > 5) moved = true;

                slider.scrollLeft = scrollLeft - walk;
            });

            // cancela navegación si hubo drag
            slider.querySelectorAll('a').forEach(a => {
                a.addEventListener('click', e => {
                    if (moved) e.preventDefault();
                });
            });

            const links = Array.from(document.querySelectorAll('#menu-carta a'));

            const sections = links
                .map(a => document.querySelector(a.getAttribute('href')))
                .filter(Boolean);

            const setActive = (index) => {
                links.forEach((link, i) => {
                    if (i <= index) link.classList.add('active');
                    else link.classList.remove('active');
                });

                scrollMenuToLink(links[index]);
            };

            const scrollMenuToLink = (link) => {
                const linkRect = link.getBoundingClientRect();
                const containerRect = slider.getBoundingClientRect();

                if (linkRect.left < containerRect.left || linkRect.right > containerRect.right) {
                    const offset = linkRect.left - containerRect.left - slider.clientWidth / 2 + link.clientWidth / 2;
                    slider.scrollBy({ left: offset, behavior: 'smooth' });
                }
            };

            const observer = new IntersectionObserver(
                (entries) => {
                    entries.forEach(entry => {
                        if (!entry.isIntersecting) return;
                        const index = sections.indexOf(entry.target);
                        if (index !== -1) setActive(index);
                    });
                },
                {
                    rootMargin: "-40% 0px -55% 0px",
                    threshold: 0
                }
            );

            sections.forEach(section => observer.observe(section));
        });
    }

    static initBanner()
    {
        $(document).ready(function () {
            if ($('#carousel-banner').length) {
                $('#carousel-banner').owlCarousel({
                    animateOut: 'fadeOut',
                    animateIn: 'fadeIn',
                    loop:true,
                    lazyLoad:true,
                    margin:0,
                    nav:true,
                    navText: navText,
                    dots:false,
                    mouseDrag: false,
                    smartSpeed: 900,
                    autoplay: true,
                    autoplayTimeout: 7000,
                    items:1,
                });
            }
        });
    }

    static initResenas()
    {
        $(document).ready(function () {
            const elementCarousel = $("#valoraciones");

            if (elementCarousel.length > 0)
            {
                let numItems = elementCarousel.find(".item-resena").length;

                elementCarousel.owlCarousel({
                    margin: 30,
                    nav: false,
                    navText: navText,
                    dots: false,
                    lazyLoad: true,
                    stagePadding: 3,
                    responsive: {
                        0: {
                            items: 1,
                            loop: numItems > 1,
                        },
                        768: {
                            items: numItems > 1,
                            loop: numItems > 1,
                            stagePadding: numItems > 1 ? 60 : 0
                        },
                        992: {
                            items: numItems > 3 ? 1.5 : 2,
                            loop: numItems > 3,
                        },
                        1200: {
                            items: numItems > 4 ? 2.5 : 3,
                            loop: numItems > 6,
                        },
                        1600: {
                            items: 3,
                            loop: numItems > 3,
                        }
                    }
                });

                $("body").on("click", ".btn-mas-valoracion", function () {
                    var padre = $(this).parents(".item-resena");
                    //$(padre).find(".valoracion-texto").addClass("d-none");
                    //$(padre).find(".valoracion-texto-completo").removeClass("d-none");

                    $("#bloque-resena .textoSeccion").html(padre.find(".valoracion-texto-completo").html());

                    ClassBlockUI.abrirBlockUIEstandar("bloque-resena", undefined, "Reseña de " + padre.find(".item-resena-usuario").text(), "modal622");
                });

                $("body").on("click", "#btn-cerrar-resena", function (e) {
                    $(".modal").modal("hide");
                });
            }
        });
    }

    static initContacto()
    {
        $(document).ready(function(e) {
            $("#btnEnviarContacto").click(enviarFormulario);
        });

        function enviarFormulario(event) {
            event.preventDefault();

            var extraMsg = "";

            if (!$("#politica").is(":checked")) {
                extraMsg = $("#politica").attr("title");
            }

            Utils.sendStandardAjax("formContacto", "https://www.restaurantelancora.es/ajax/Contacto.enviar.php", {
                extraErroresForm: extraMsg,
                successCallback: null,
                resetFormOnSuccess: true
            });
        }
    }
}

function findPos(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        do {
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return [curtop];
    }
}

function isEmail(email) {
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
}


/*
    ClassBlockUI.abrirBlockUIEstandar(contenedorIDAMostrar[, accionCerrar, headerText, extraClass, restaurarElemento]);
    ClassBlockUI.abrirBlockUIEstandarMensaje(mensaje[, isAlertOrButtons, onClose]);
    ClassBlockUI.abrirBlockUIConfirm(mensaje, textoBotonAceptar, accionBotonAceptar, textoBotonCancelar[, accionBotonCancelar]); //accionBotonCancelar="close"
    ClassBlockUI.abrirBlockUIEsperePorFavor:([mensaje]);
*/
var ClassBlockUI =
    {
        restaurarElemento: function()
        {
            var data = $("body").data('blockUIEstandar.history');
            if (data)
            {
                data.el.style.display = data.display;
                data.el.style.position = data.position;
                if (data.parent)
                    data.parent.appendChild(data.el);
                $("body").removeData('blockUIEstandar.history');
                $("#"+data.generatedId).remove();
            }
        },
		        abrirBlockUIEstandar: function(contenedorIDAMostrar, accionCerrar, headerText, extraClass, restaurarElemento)
        {
            if(restaurarElemento || restaurarElemento == undefined)
            {
                ClassBlockUI.restaurarElemento();
            }
            $(".modalAutoHide").modal("hide");
            if($(".modal").length>0){$("body").addClass("modal-open")}

            if(contenedorIDAMostrar == undefined || $("#"+contenedorIDAMostrar).length == 0){return;}

            //var blockUIId="blockUI_"+new Date().getTime();
            var blockUIId="blockUI_"+contenedorIDAMostrar;

            extraClass = extraClass == undefined ? "" : extraClass; //modal-lg

            var object = $("#"+contenedorIDAMostrar);
            var node = object[0];
            var data = {};
            $("body").data('blockUIEstandar.history', data);
            data.el = node;
            data.parent = node.parentNode;
            data.display = node.style.display;
            data.position = node.style.position;
            data.generatedId = blockUIId;
            data.object = object;
            if (data.parent)
                data.parent.removeChild(node);

            var header = headerText != undefined ? headerText : "";

            var message = ''+
                '<div class="modal" data-bs-backdrop="static" id="'+blockUIId+'" role="dialog">'+
                <!-- Añadiendo la clase modal-lg, modal-md o modal-sm podemos cambiar el tamaño del modal (modal-xs no existe) -->
                '	<div class="modal-dialog '+extraClass+' animated">'+
                <!-- Modal content-->
                '      <div class="modal-content">'+
                '	      <div class="modal-header">' +
                '			<button type="button" class="close btnCerrarModalEquis tooltipStandard" data-custom-dismiss="modal" aria-label="Cerrar" title="Cerrar"><img src="https://www.restaurantelancora.es/img/iconos/cerrar.svg" alt="Cerrar" /></button>'+
                '	        <div class="modal-title">'+header+'</div>'+
                '          </div>'+
                '          <div class="modal-body"></div>'+
                '        </div>'+
                '    </div>'+
                '</div>';

            $("body").append(message);

            var modal = $("#"+blockUIId);
            modal.find(".modal-body").append(node);
            modal.find(".modal-dialog").addClass("fadeIn");

            modal.on('hidden.bs.modal', function () {
                ClassBlockUI.restaurarElemento();
            })

            var myModal = new bootstrap.Modal($(modal)[0], {
                keyboard: false
            })

            myModal.show();

            if(accionCerrar==undefined) //boton cerrar tiene accion por defecto
            {
                $("#"+blockUIId+" .btnCerrarModalEquis").click(function(){
                    myModal.hide();
                    if($(".modal").length>0){$("body").addClass("modal-open")}
                });
            }
            else if(accionCerrar==false) //oculta el boton cerrar
            {
                $("#"+blockUIId+" .btnCerrarModalEquis").hide();
            }
            else	//boton cerrar con accion especial
            {
                $("#"+blockUIId+" .btnCerrarModalEquis").click(accionCerrar);
            }

            return modal;
        },
		        abrirBlockUIEstandarMensaje: function(mensaje, isAlertOrButtons, onClose, extraClass, title)
        {
            $(".modalAutoHide").modal("hide");
            if($(".modal").length>0){$("body").addClass("modal-open")}

            var blockUIId="blockUI_"+new Date().getTime();

            extraClass = extraClass == null || extraClass == undefined ? "" : extraClass; //modal-lg
            title = title == null || title == undefined ? "Aviso" : title;

            if(isAlertOrButtons==undefined) isAlertOrButtons=false;
            if(onClose==undefined) onClose=false;

            var botonera = "";
            var botoneraEspecial = false;

            if(isAlertOrButtons === false)
            {
                botonera = "";
            }
            else if (isAlertOrButtons === true)
            {
                let textoBoton = "Aceptar";

                botonera = `<div class='text-center botoneraBlockUI contieneBtnStandard'>
                                <button type='button' class='btnStandard btnCerrarBlockUIAlert'>${textoBoton}</button>
                            </div>`;
            }
            else
            {
                botoneraEspecial = true;
                botonera = "<div class='text-center botoneraBlockUI contieneBtnStandard'>";
                for(var index in isAlertOrButtons)
                {
                    botonera +=  " <span class='btnStandard "+index+"'>"+isAlertOrButtons[index]["text"]+"</span> ";
                }
                botonera += "</div>";
            }

            var message = '';
            message += '<div class="modal '+(isAlertOrButtons==false ? 'modalAutoHide' : '')+'" data-bs-backdrop="static" id="'+blockUIId+'" role="dialog">';
            <!-- Añadiendo la clase modal-lg, modal-md o modal-sm podemos cambiar el tamaño del modal (modal-xs no existe) -->
            message += '	<div class="modal-dialog '+extraClass+' animated">';
            <!-- Modal content-->
            message += '      <div class="modal-content">';

            if(isAlertOrButtons!=false)
            {
                message += '	      <div class="modal-header">';
                message += '			<button type="button" class="close btnCerrarModalEquis tooltipStandard" data-custom-dismiss="modal" aria-label="Cerrar" title="Cerrar"><img src="https://www.restaurantelancora.es/img/iconos/cerrar.svg" alt="Cerrar" /></button>';
                message += '	        <h4 class="modal-title" id="myModalLabel">'+title+'</h4>';
                message += '          </div>';
            }

            message += '          <div class="modal-body">'+mensaje+'</div>';

            if(botonera != "")
            {
                message += '          <div class="modal-footer">'+botonera+'</div>';
            }

            message += '        </div>';
            message += '    </div>';
            message += '</div>';

            $("body").append(message);
            var modal = $("#"+blockUIId);
            modal.find(".modal-dialog").css("animation-duration", "500ms").addClass("zoomIn");

            modal.on('hidden.bs.modal', function () {
                modal.remove();
            })

            var myModal = new bootstrap.Modal($(modal)[0], {
                keyboard: false
            });

            myModal.show();

            //Acciones de los botones especiales
            if(botoneraEspecial)
            {
                for(var index in isAlertOrButtons)
                {
                    if(isAlertOrButtons[index]["action"] == "close")
                    {
                        isAlertOrButtons[index]["action"] = function(){
                            myModal.hide();
                            if($(".modal").length>0){$("body").addClass("modal-open")}
                        };
                    }
                    $("#"+blockUIId+" ."+index).unbind("click").click(isAlertOrButtons[index]["action"]);
                }
            }

            var fnOnClose;
            if(onClose==false)
            {
                fnOnClose = function(){
                    myModal.hide();
                    if($(".modal").length>0){$("body").addClass("modal-open")}
                };
            }
            else if (typeof onClose === "function")
            {
                fnOnClose = function(){onClose()};
            }
            else if (onClose == "location")
            {
                fnOnClose = function(){window.location.reload()};
            }
            else if (onClose == "back")
            {
                fnOnClose = function(){history.go(-1);};
            }
            else
            {
				                if(onClose.indexOf("/") !=0 && onClose.indexOf("http") !=0)
                {
                    onClose = "/"+onClose;
                }
				                fnOnClose = function(){window.location = onClose};
            }

            $("#"+blockUIId+" .btnCerrarBlockUIAlert, #"+blockUIId+" .btnCerrarModalEquis").unbind("click").click(fnOnClose);

            return modal;
        },
        abrirBlockUIConfirm: function(mensaje, textoAceptar, accionAceptar, textoCancelar, accionCancelar, extraClass, title)
        {
            accionCancelar = accionCancelar == undefined ? "close" : accionCancelar;

            extraClass = extraClass == null || extraClass == undefined ? "" : extraClass;

            var buttons =
                {
                    "btnAceptarBUI_CONFIRM":
                        {
                            "text": textoAceptar,
                            "action": accionAceptar
                        },
                    "btnCancelarBUI_CONFIRM":
                        {
                            "text": textoCancelar,
                            "action": accionCancelar
                        }
                };
            return ClassBlockUI.abrirBlockUIEstandarMensaje(mensaje, buttons, false, extraClass, title);
        },
        abrirBlockUIEsperePorFavor: function(mensaje)
        {
            if(mensaje == undefined){ mensaje = "<div class='text-center'><span class='esperePorFavor'>Espere por favor...</span></div>"; };
            return ClassBlockUI.abrirBlockUIEstandarMensaje(mensaje, undefined, false, "modalEspere");
        }
    };