class Web
{
    static initInicio()
    {

    }

    static initEquipo()
    {
        $(document).ready(function ()
        {
            let itemCarousel = $("#carousel-equipo");
            const numItems = itemCarousel.find(".item-equipo").length;
            if (itemCarousel.length) {
                itemCarousel.owlCarousel({
                    smartSpeed: 800,
                    loop:false,
                    margin: 30,
                    nav: false,
                    dots: true,
                    mouseDrag: false,
                    items:1,
                    responsive: {
                        0: {
                            items: 1,
                            margin: 15,
                            mouseDrag: true,
                            loop: true,
                        },
                        576: {
                            mouseDrag: numItems > 2 ? true : false,
                            loop: numItems > 2 ? true : false,
                            items: 2
                        },
                        992: {
                            mouseDrag: false,
                            loop: numItems > 3 ? true : false,
                            items: 3
                        },
                        1200: {
                            mouseDrag: false,
                            loop: numItems > 4 ? true : false,
                            items: 4
                        },
                    },
                    onInitialized: Utils.applyAspectRatio,
                    onResized: Utils.applyAspectRatio,
                });
            }
        });

    }

    static initGaleria()
    {
        $(document).ready(function ()
        {
            $(".item-galeria").simpleLightbox({maxZoom: 2});
        });
    }

    static initContacto()
    {
        var validacion;

        $(document).ready(function(e) {
            $("#btnEnviarContacto").click(enviarFormulario);
            var opciones_validacion = {showLabels: false};
            validacion = $("#formContacto").validate(opciones_validacion);
        });

        function enviarFormulario(event) {
            event.preventDefault();
            var extraMsg = "";

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

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

    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 initBanner()
    {
        $(document).ready(function () {
            if ($('#carousel-banner').length) {
                $('#carousel-banner').owlCarousel({
                    animateOut: 'fadeOut',
                    animateIn: 'fadeIn',
                    loop:true,
                    margin:0,
                    nav: true,
                    navText: [
                        '<i class="fas fa-angle-left"></i>',
                        '<i class="fas fa-angle-right"></i>',
                    ],
                    dots:false,
                    mouseDrag: false,
                    smartSpeed: 900,
                    autoplay: true,
                    autoplayTimeout: 7000,
                    items:1,
                });
            }
        });
    }

    static initResenas()
    {
        const navText = [
            '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none"><rect width="30" height="30" rx="5" fill="#15415D"/><path d="M16.8899 20.2951L11.6099 15.0001L16.8899 9.70508" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>',
            '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none"> <rect width="30" height="30" rx="5" fill="#15415D"/> <path d="M13.1099 20.2951L18.3899 15.0001L13.1099 9.70508"stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
        ];
        $(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: true,
                    lazyLoad: true,
                    stagePadding: 3,
                    dotsContainer: "#dots-valoraciones",
                    responsive: {
                        0:{
                            items: 1,
                            loop: true,
                        },
                        768:{
                            items: 1.5,
                            loop: true,
                        },
                        992:{
                            items: 2,
                            stagePadding: 60,
                            loop: true,
                        },
                        1366:{
                            items: 3,
                            loop: true,
                        }
                    }
                });

                $("body").on("click", ".btn-mas-valoracion", function () {
                    var padre = $(this).parents(".item-resena");

                    $("#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");
                });
            }
        });
    }
}


/*
    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="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("jackInTheBox");

            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)
            {
                botonera = "<div class='text-center botoneraBlockUI contieneBtnStandard'><span class='btnStandard btnCerrarBlockUIAlert'><span class='txt'>Aceptar</span></span></div>";
            }
            else
            {
                botoneraEspecial = true;
                botonera = "<div class='text-center botoneraBlockUI contieneBtnStandard'>";
                for(var index in isAlertOrButtons)
                {
                    botonera +=  " <span class='btnStandard "+index+"'><span class='txt'>"+isAlertOrButtons[index]["text"]+"</span></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="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
            {
				                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");
        }
    };