var tipoGrillaGlobal = ($(window).width() > 991) ? 1 : 4;
var categoriasSeleccionadas = [];
var ordenarPorGlobal = 1;
var tallasSeleccionadas = [];
var coloresSeleccionados = [];
var minimo_precio = 0;
var pagina = 1;
var paginacion = 20;
var esMovil = false;
var subcategoriasSeleccionadas = [];
var cantidadPaginasGlobal = 0;
var primerBusqueda = true;
var primeraPagina = true;
var ejecutando = false;

function cambiarPagina(nuevaPagina) {

  if (!ejecutando) {
    ejecutando = true;
    pagina = nuevaPagina;
    obtenerProductos();
  }

}

function infiniteScroll() {
  var suma = ($(window).width() < 992) ? $(window).height() : 0;
  var desfase = ($(window).width() < 992) ? 0 : 100;
  var pos = $(document).innerHeight() - ($(window).height()) - desfase;



  if ($(window).scrollTop() + suma >= pos) {

    if (!primeraPagina) {

      if (pagina < cantidadPaginasGlobal) {
        $(".paginacion-rock").show();

        cambiarPagina(pagina + 1);
      }
    }


  }

}

$(function () {

  $(document.body).on('touchmove', infiniteScroll); // for mobile
  $(window).on('scroll', infiniteScroll);



});


function eliminarFiltros() {
  primerBusqueda = true;
  pagina = 1;
  $(".btn-eliminar-filtros").click();
}
$(function () {



  if ($(window).width() < 992) { esMovil = true; }

  $("#selectOrdenarPor").change(function () {
    ordenarPorGlobal = $(this).val();
    primerBusqueda = true;
    pagina = 1;
    obtenerProductos();

  });

  $(".opciones-ordenar-por-bottom ul .opcion").click(function () {
    $(".opciones-ordenar-por-bottom ul .opcion").removeClass("activa");
    $(this).addClass("activa");
    primerBusqueda = true;
    pagina = 1;
    ordenarPorGlobal = $(this).data('tipo'); obtenerProductos();
  })


  $(".btn-eliminar-filtros").click(function () {
    minimo_precio = minimoPrecio;
    maximo_precio = maximoPrecio;
    primerBusqueda = true;
    pagina = 1;
    tallasSeleccionadas.splice(0, tallasSeleccionadas.length);
    coloresSeleccionados.splice(0, coloresSeleccionados.length);
    categoriasSeleccionadas.splice(0, categoriasSeleccionadas.length);
    subcategoriasSeleccionadas.splice(0, subcategoriasSeleccionadas.length);

    $("#spanPrecioMinimo").html(number_format(0, 0));
    $("#spanPrecioMaximo").html("$" + number_format(maximoPrecio));
    $slider.slider("values", 0, minimo_precio);
    $slider.slider("values", 1, maximo_precio);
    $(".activa").removeClass("activa"); obtenerProductos();
  })
});



function obtenerTallas(tallas) {
  $(".seccion-tallas-productos").html("");
  if (tallas) {
    tallas.map(function (talla) {
      $(".seccion-tallas-productos").append(`
      <div class="item">  <div class="seccion-tallas-productos-talla" data-id="${talla.id_opcion}">
        <span>${talla.nombre_opcion}</span>
    </div></div>
        `)
    })
  }

  $(".seccion-tallas-productos-talla").click(function () {
    $(this).toggleClass('activa');

    if (tallasSeleccionadas.includes($(this).data('id'))) {
      tallasSeleccionadas.splice(tallasSeleccionadas.indexOf($(this).data('id')), 1);

    } else {
      tallasSeleccionadas.push($(this).data('id'));
    }
  })

}

function obtenerColores(colores) {
  $(".seccion-colores-productos").html("");
  if (colores) {
    colores.map(function (color) {
      $(".seccion-colores-productos").append(
        ` <div class="item"><div class="seccion-colores-productos-color" data-id="${color.id_opcion}">
        <div class="seccion-colores-productos-color-inner" style="background:${color.codigo}"></div>
    </div></div>
        `)
    });

    $(".seccion-colores-productos-color").click(function () {
      $(this).toggleClass('activa');

      if (coloresSeleccionados.includes($(this).data('id'))) {
        coloresSeleccionados.splice(coloresSeleccionados.indexOf($(this).data('id')), 1);

      } else {
        coloresSeleccionados.push($(this).data('id'));
      }
    })
  }

}

function obtenerEtiquetas(etiquetas) {
  $(".lista-categorias-producto").html("");

  if (etiquetas) {

    etiquetas.map(function (res) {
      $(".etiquetas-slider").append(
        `<div class="item">
          <div class="seccion-etiquetas-productos" data-id="${res.id_etiqueta}">
           <span>${res.nombre_etiqueta}</span>
          </div>
          </div>`
      )



    })
  }



  $(".seccion-categorias-productos-listado .seccion-etiquetas-productos").click(function () {
    $(this).toggleClass('activa');

    if (categoriasSeleccionadas.includes($(this).data('id'))) {
      categoriasSeleccionadas.splice(categoriasSeleccionadas.indexOf($(this).data('id')), 1);

    } else {
      categoriasSeleccionadas.push($(this).data('id'));
    }
  })

}

function obtenerCategorias(categorias) {

  if (categorias) {
    $(".division-seccion-filtros-categorias").show();

    categorias.map(function (res) {
      $(".categorias-slider").append(
        `<div class="item">
          <div class="seccion-categorias-productos" data-id="${res.id_categoria}">
           <span>${res.nombre_categoria}</span>
          </div>
          </div>`
      )



    })
  }



  $(".seccion-categorias-productos-listado .seccion-categorias-productos").click(function () {
    $(this).toggleClass('activa');

    if (subcategoriasSeleccionadas.includes($(this).data('id'))) {
      subcategoriasSeleccionadas.splice(subcategoriasSeleccionadas.indexOf($(this).data('id')), 1);

    } else {
      subcategoriasSeleccionadas.push($(this).data('id'));
    }
  })

}

function cerrarFiltros() {

  $(".seccion-productos-inner").removeClass("con-filtro", 300, "swing", function () {

  });
  $(".seccion-filtros-inner").hide("slide", {
    direction: "right"
  }, 300);
  if ($(window).width() > 991) {
    $("header .navbar").show(100);
    $("footer .navbar").show(100);
    $(".cabecera-categorias").show(100);

  }

}

function abrirFiltros() {
  $(".seccion-filtros-inner").addClass("filtro-mostrandose");
  if ($(window).width() > 991) {
    $("header .navbar").hide(100);
    $("footer .navbar").hide(100);
    $(".cabecera-categorias").hide(100);
    $(".seccion-productos-inner").addClass("con-filtro", 300, "swing", function () {

    });

  }

  $(".seccion-filtros-inner").show("slide", {
    direction: "right"
  }, 300);

  $(".carouseles-filtros").owlCarousel({

    loop: false,
    margin: 0,
    nav: false,
    dots: false,
    autoplay: false,
    stagePadding: 45,
    autoWidth: true,

  });

}

var rutaCorazon = "/img/corazon.svg";
var rutaDarkCorazon = "/img/dark_corazon.svg";
var agregarFiltros = true;
var maximo_precio = "";
var maximoPrecio = 0;
var minimoPrecio = 0;

function definirFiltros(maxPre, colores, tallas, etiquetas, categorias, minPre) {

  if (!agregarFiltros) {
    return false;
  }

  maximoPrecio = maxPre;
  maximo_precio = maxPre;
  minimo_precio = minPre;
  minimoPrecio = minPre;

  agregarSliderPrecio();
  obtenerColores(colores);
  obtenerTallas(tallas);
  obtenerEtiquetas(etiquetas)
  obtenerCategorias(categorias)

  agregarFiltros = false;

}

function agregarSliderPrecio() {

  $("#spanPrecioMaximo").html(`$ ${number_format(maximoPrecio)}`)
  $("#spanPrecioMinimo").html(`$ ${number_format(minimoPrecio)}`)

  $slider = $("#slider-range").slider({
    range: true,
    min: minimoPrecio,
    max: maximoPrecio,
    values: [0, maximoPrecio],
    slide: function (event, ui) {
      $("#spanPrecioMinimo").html("$" + number_format(ui.values[0], 0));
      $("#spanPrecioMaximo").html("$" + number_format(ui.values[1]));
    },
    stop: function (event, ui) {

      minimo_precio = ui.values[0];
      maximo_precio = ui.values[1];
    }
  });
  $("#amount").val("$" + $("#slider-range").slider("values", 0) +
    " - $" + $("#slider-range").slider("values", 1));

}

function modificarFavoritoManual(idProducto) {
  if ($('.imgfavorito-' + idProducto).hasClass('no-es-favorito-fav')) {
    $(".imgfavorito-" + idProducto).addClass('es-favorito-fav icon-hov').removeClass('no-es-favorito-fav icon-hov-act').attr('src', '/img/dark_corazon.svg');
  } else {
    $(".imgfavorito-" + idProducto).removeClass('es-favorito-fav icon-hov').addClass('no-es-favorito-fav icon-hov-act').attr('src', '/img/corazon.svg');
  }
  reiniciarEventosFavorito();
}

function obtenerProductos() {
  $(".producto-placeholder-row").fadeIn(100)
  if (primerBusqueda) {
    $(".seccion-todos-los-productos").html("");
  }
  $.getJSON(`/functions/busquedas_personalizadas/json_productos?noshow&id_categoria=${idCategoria}&minimo_precio=${minimo_precio}&maximo_precio=${maximo_precio}&ordenar_por=${ordenarPorGlobal}&etiquetas=${categoriasSeleccionadas.toString()}&tallas=${tallasSeleccionadas.toString()}&colores=${coloresSeleccionados.toString()}&paginacion=${paginacion}&pagina=${pagina}&es_movil=${esMovil}&categorias=${subcategoriasSeleccionadas.toString()}`, function (resultado) {

    definirFiltros(resultado.maximo_precio, resultado.colores, resultado.tallas, resultado.etiquetas, resultado.categorias, parseInt(resultado.minimo_precio));


    $(".seccion-cantidad-productos").html(resultado.cantidadProductos);
    if (resultado.hay_productos == true || resultado.hay_productos == "true") {

      primerBusqueda = false;
      primeraPagina = false;

      $(".contenedor-no-hay-productos").hide();
      $(".seccion-productos").show(300);

      cantidadPaginasGlobal = resultado.paginas;
      $(".paginacion-rock").hide(300);

      resultado.productos.map(function (producto) {
        $(".seccion-todos-los-productos").append(construirProducto(producto.id_producto, producto.nombre_producto, producto.tiene_descuento, producto.precio, producto.precio_descuento, producto.tipo_producto, producto.src1, producto.src2, producto.slug, producto.tiene_categoria_intencion, producto.texto_categoria, producto.codigo_color, producto.producto_esta_agotado, resultado.sesion_iniciada, producto.es_favorito, producto.tiene_precios_variacion, producto.variaciones));

      })
    } else {
      $(".seccion-productos").hide();
      if (tallasSeleccionadas.length > 0 || coloresSeleccionados.length > 0 || categoriasSeleccionadas.length > 0) {
        $("#titutloNohayResultadosCategoria").html(`
    ¡Oh no, no encontramos ningún resultado!
    `);

        $("#textoNohayResultadosCategoria").html(`
    Prueba otra combinación de filtros, o elimina todos los filtros aplicados para ver de nuevo todos los productos

    `)

        $(".btn-inicio-sin").hide();
        $(".btn-borrar-filtros-sin").show();
      } else {
        $("#titutloNohayResultadosCategoria").html(`
    ¡Oh no, no hay productos en esta sección!
    `);

        $("#textoNohayResultadosCategoria").html(`
    Si eres de los que leen todo, no es normal que hayan páginas activas sin contenido.
    Dejános un mensajito en whatsapp avisando esta novedad.

    `)
        $(".btn-borrar-filtros-sin").hide();
        $(".btn-inicio-sin").show();
      }


      $(".contenedor-no-hay-productos").show(300);


      $(".seccion-todos-los-productos").append(`
    <div class="alert alert-info" role="alert">
      No encontramos productos
    </div>
    `);
    }
  }).done(function (res) {

    ejecutando = false;
    $(".paginacion-rock").hide(300);


    desbloquearPagina();

    agregarEventosGlobal();

    $(".img-corazon-fav").hover(

      function () {
        if ($(this).hasClass('es-favorito-fav')) {
          $(this).attr('src', '/img/corazon.svg');
        } else {
          $(this).attr('src', '/img/dark_corazon.svg');
        }
      },
      function () {
        if ($(this).hasClass('es-favorito-fav')) {
          $(this).attr('src', '/img/dark_corazon.svg');
        } else {
          $(this).attr('src', '/img/corazon.svg');
        }
      });

      $(".producto-placeholder-row").fadeOut(100)




  }).fail(function (res) {
    desbloquearPagina();

  })

}


function mostrarProductoCategoria(idProducto){
  $(".producto-ind-placeholder-"+idProducto).fadeOut(100)
  $(".producto-ind-"+idProducto).fadeIn(100);

}



function agregarFavoritoGaleria(idProducto) {

  if ($('.imgfavorito-' + idProducto).hasClass('no-es-favorito-fav')) {
    $.post("/functions/carrito_nw/agregar_favorito?noshow", { 'id_producto': idProducto }, function (res) {
      $("#notificaciones").html(res.notificacion);

      if (res.exito == true || res.exito == "true") {
        obtenerCarrito();
        obtenerFavoritos();
        $(".imgfavorito-" + idProducto).addClass('es-favorito-fav icon-hov');
        $(".imgfavorito-" + idProducto).removeClass('no-es-favorito-fav icon-hov-act');
        $(".imgfavorito-" + idProducto).attr('src', '/img/dark_corazon.svg');
      }



    }, 'json').fail(function (res) {

    });
  } else {
    $.post("/functions/carrito_nw/eliminar_favorito?noshow", { 'id_producto': idProducto }, function (res) {
      $("#notificaciones").html(res.notificacion);
      if (res.exito == true || res.exito == "true") {
        obtenerCarrito();
        obtenerFavoritos();
        $(".imgfavorito-" + idProducto).removeClass('es-favorito-fav icon-hov');
        $(".imgfavorito-" + idProducto).addClass('no-es-favorito-fav icon-hov-act');
        $(".imgfavorito-" + idProducto).attr('src', '/img/corazon.svg');

      }


    }, 'json').fail(function (res) {

    });
  }


}


var cadenaDiaSinIva = (esDiaSinIVA) ? `<img class="img-dia-sin-iva" src="/img/new_sin_iva.png">` : "";


function construirProducto(id_producto, nombre_producto, tiene_descuento, precio, precio_descuento, tipo_producto, src1, src2, slug, tiene_categoria_intencion, texto_categoria, codigo_color, producto_esta_agotado, sesionIniciada, es_favorito, tiene_precios_variacion, variaciones) {

  cadenaCategoria = "";

  let iconoFavorito =   `<div class="img-corazon-fav-contenedor"><img onclick="agregarFavoritoGaleria(${id_producto})" class="img-corazon-fav imgfavorito-${id_producto} ${ es_favorito || es_favorito=="true"  ? `icon-hov es-favorito-fav`:`icon-hov-act  no-es-favorito-fav`  } " src="${es_favorito || es_favorito=="true" ? rutaDarkCorazon:rutaCorazon}" ></div>` ;


  cadenaPrecio = "";
  if (producto_esta_agotado == true || producto_esta_agotado == "true") {
    cadenaPrecio = `
    <span class="precio-ind">SOLD OUT</span>
    `
    cadenaCategoria = `
    <div class="categoria-intencion">
      <span style="background:#f05c5d"> AGOTADO </span>
    </div>
    `
  } else {

    if (tiene_categoria_intencion == true || tiene_categoria_intencion == "true") {
      cadenaCategoria = `
      <div class="categoria-intencion">
                    <span style="background:${codigo_color}"> ${texto_categoria} </span>
                </div>
      `;
    }

    if (tiene_descuento == true || tiene_descuento == "true") {



      cadenaPrecio = `
      <div class="w-100 d-flex align-items-center justify-content-left"><span class="precio-tch">$${number_format(precio, 0)} COP</span>
      <span class="precio-des">$${number_format(precio_descuento, 0)} COP</span></div>
      <div><span class="precio-por">-${number_format((100 - (precio_descuento * 100 / precio)), 0)}%</span></div>
      `;

    } else {
      cadenaPrecio = `
       <span class="precio-ind">$${number_format(precio, 0)}  COP</span>
       `
    }

    if (tipo_producto == 2 && tiene_precios_variacion) {
      arregloPrecios = [];
      arregloPrecioDescuento = [];
      tieneDescuentoVariacion = false;
      variaciones.forEach(variacion => {

        if (variacion.precio.tiene_precio) {
          arregloPrecios.push(variacion.precio.precio_iva);
          if (variacion.precio.tiene_descuento) {
            if (variacion.precio.precio_descuento_iva > 0) {
              tieneDescuentoVariacion = true;

              arregloPrecioDescuento.push(variacion.precio.precio_descuento_iva);

            }
          }
        }
      });

      if (arregloPrecios.length > 0) {
        var cadenaPrecio = ``;
        var tachado = (tieneDescuentoVariacion) ? "precio-tch" : "precio-ind"
        if (arregloPrecios.length > 1) {
          arregloPrecios.sort(function (a, b) { return a - b });
          cadenaPrecio += `<span class="${tachado}">$${number_format(arregloPrecios[0], 0)} - $${number_format(arregloPrecios[arregloPrecios.length - 1], 0)}   COP</span>`;

        } else {
          cadenaPrecio = `       
                   <span class="${tachado}">$${number_format(arregloPrecios[0], 0)}  COP
                   </span>
                   `
        }

        if (tieneDescuentoVariacion) {

          arregloPrecioDescuento.sort(function (a, b) { return a - b });

          porcentaje = number_format((100 - (arregloPrecioDescuento[0] * 100 / arregloPrecios[0])), 0);

          if (arregloPrecioDescuento.length > 1) {
            cadenaPrecio += `<span class="pl-2 precio-des pl-2">$${number_format(arregloPrecioDescuento[0], 0)} - $${number_format(arregloPrecioDescuento[arregloPrecioDescuento.length - 1], 0)}   COP</span>
                      <div style="width:100%"><span class="precio-por" >-${porcentaje}%</span></div>
                      `;

          } else {
            cadenaPrecio += `       
                      <span class="pl-2 precio-des">$${number_format(arregloPrecioDescuento[0], 0)}  COP
                      </span>
                      <div style="width:100%"><span class="precio-por" >-${porcentaje}%</span></div>
                      `
          }
        }


      }
    }


  }

  cadenaImagen = `
    <div class="imagen-producto image-swap">
    <a href="/${slug}">
    <img class="top" src="${src1}" alt="${ nombre_producto }"  onload="mostrarProductoCategoria(${ id_producto })">
    ${ src2 !="" && src2!="/img/not_found.jpg" ? `<img class="hovered" src="${src2}"  alt="${ nombre_producto } - Imagen alternativa " >`:""   }

    <div class="seccion-categorias-intencion">
    ${cadenaCategoria}
    </div>
    </a>   


    </div>
   
  `    



  return `

  <div class="${claseGrilla(tipoGrillaGlobal)} producto-ind producto-ind-placeholder-${ id_producto } producto-placeholder">
  <div class="imagen-producto">
      <div class="animated-background"></div>
      <div class="producto-placeholder-logo">
          <img src="/img/placeholder-imagen.png">

      </div>


  </div>
  <div class="seccion-precio-producto placeholder-imagen ">

      <div class="animated-background"></div>

  </div>


</div>


    <div class="${claseGrilla(tipoGrillaGlobal)} producto-ind producto-ind-${ id_producto }" style="display:none;">
    ${cadenaDiaSinIva}
      ${cadenaImagen}
      <div class="seccion-precio-producto">
      ${iconoFavorito}
        <div class="seccion-nombre-producto">
          <a href="/${slug}"> <span>${nombre_producto}</span></a>
        </div>
        <div class="seccion-precio">
          ${cadenaPrecio}

        </div>
      </div>
    </div>

    `;

}

function claseGrilla(grilla) {
  switch (grilla) {
    case 1:
      return 'col-lg-3';
    case 2:
      return 'col-md-6';
    case 3:
      return 'col-12';
    case 4:
      return 'col-6';
  }
}

$(function () {



  $(".btn-aplicar-filtros").click(function () {
    primerBusqueda = true;
    pagina = 1;
    obtenerProductos();
    cerrarFiltros();
  })




  $(".close-filtros-inner").click(function () {
    cerrarFiltros();
  })

  $(".seccion-filtros-visualizacion a").click(function () {
    var tipo = $(this).data('tipo');


    switch(tipo){
      case 1:
          if(tipoGrillaGlobal!=1){

          $(".producto-ind").removeClass('col-md-6').addClass( "col-lg-3");
          tipoGrillaGlobal=1;
          }
      break;
      case 2:
          if(tipoGrillaGlobal!=2){

            $(".producto-ind").removeClass('col-lg-3').addClass( "col-md-6");
              tipoGrillaGlobal=2;
  
          }


      break;
      case 3:
        if(tipoGrillaGlobal!=3){

          $(".producto-ind").removeClass('col-6').addClass( "col-12");
          tipoGrillaGlobal=3;

      }
      break;
      case 4:
        if(tipoGrillaGlobal!=4){
          $(".producto-ind").removeClass('col-12').addClass( "col-6");
           tipoGrillaGlobal=4;

      }
      break;
  }

    $(".seccion-filtros-visualizacion a").removeClass("activa");
    $(this).addClass("activa");
  })



  $(window).click(function () {
    cerrarFiltros();
  });

  $('.seccion-filtros-inner').click(function (event) {
    event.stopPropagation();
  });
  $('.seccion-filtros-filtros').click(function (event) {
    event.stopPropagation();
  });
  $(".seccion-filtro-bottom").click(function () {
    event.stopPropagation();

  });

  $(".seccion-filtros-filtros").click(function () {
    abrirFiltros();
  })

  $(".seccion-filtro-bottom").click(function () {
    abrirFiltros();
  })

  $(".seccion-ordenar-por-bottom").click(function () {
    $(".icono-ordenar-por").toggleClass("fa-caret-up fa-caret-down");
    if (!$(".opciones-ordenar-por-bottom").is(":visible")) {
      $(".opciones-ordenar-por-bottom").show("slide", {
        direction: "down"
      }, 300);
    } else {
      $(".opciones-ordenar-por-bottom").hide("slide", {
        direction: "down"
      }, 300);
    }

  })

  $(".opciones-ordenar-por-bottom").click(function () {
    event.stopPropagation();

  })

  $(".cerrar-p").click(function () {
    $(".seccion-ordenar-por-bottom").click();
  })

  obtenerProductos();

});











var x, i, j, l, ll, selElmnt, a, b, c;
/* Look for any elements with the class "select-personalizado": */
x = document.getElementsByClassName("select-personalizado");
l = x.length;
for (i = 0; i < l; i++) { selElmnt = x[i].getElementsByTagName("select")[0]; ll = selElmnt.length; /* For each element, create a new DIV that will act as the selected item: */ a = document.createElement("DIV"); a.setAttribute("class", "select-selected"); a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); /* For each element, create a new DIV that will contain the option list: */ b = document.createElement("DIV"); b.setAttribute("class", "select-items select-hide"); for (j = 1; j < ll; j++) { /* For each option in the original select element, create a new DIV that will act as an option item: */ c = document.createElement("DIV"); c.innerHTML = selElmnt.options[j].innerHTML; c.addEventListener("click", function (e) { /* When an item is clicked, update the original select box, and the selected item: */ var y, i, k, s, h, sl, yl; s = this.parentNode.parentNode.getElementsByTagName("select")[0]; sl = s.length; h = this.parentNode.previousSibling; for (i = 0; i < sl; i++) { if (s.options[i].innerHTML == this.innerHTML) { s.selectedIndex = i; h.innerHTML = this.innerHTML; y = this.parentNode.getElementsByClassName("same-as-selected"); yl = y.length; for (k = 0; k < yl; k++) { y[k].removeAttribute("class"); } this.setAttribute("class", "same-as-selected"); break; } } h.click(); $("#selectOrdenarPor").change(); }); b.appendChild(c); } x[i].appendChild(b); a.addEventListener("click", function (e) { /* When the select box is clicked, close any other select boxes, and open/close the current select box: */ e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); }); } function closeAllSelect(elmnt) { /* A function that will close all select boxes in the document, except the current select box: */ var x, y, i, xl, yl, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("select-selected"); xl = x.length; yl = y.length; for (i = 0; i < yl; i++) { if (elmnt == y[i]) { arrNo.push(i) } else { y[i].classList.remove("select-arrow-active"); } } for (i = 0; i < xl; i++) { if (arrNo.indexOf(i)) { x[i].classList.add("select-hide"); } } } /* If the user clicks anywhere outside the select box, then close all select boxes: */ document.addEventListener("click", closeAllSelect);