const btn = document.getElementById('menu-btn')
const nav = document.getElementById('menu')
const scrollBtn = document.querySelector(".scroll-top-btn")
const hideText = document.getElementsByClassName("hideText")
const hideText_btn = document.getElementsByClassName("hideText-btn")
const $form = document.querySelector('#form')
/**Botones de slider y elementos de slider */
const slider = document.querySelector(".slider")
let sliderSection = document.querySelectorAll(".slider__section")
let sliderSectionLast = sliderSection[sliderSection.length-1]
let swiperClass = document.querySelector('.swiper')

const btnLeft = document.getElementById("btn-left")
const btnRight = document.getElementById("btn-right")

const menu = ".mobile-menu a"
btn.addEventListener('click', navToggle)
document.addEventListener("click", (e)=>{
    if(e.target.matches(menu)){
       nav.classList.add("hiden")
       btn.classList.remove("open")
       document.body.classList.remove('no-scroll')
    }
})

function navToggle(){
    btn.classList.toggle('open')
    nav.classList.toggle('hiden')
    document.body.classList.toggle('no-scroll')
}



window.addEventListener("scroll", () =>{
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop
    if(scrollTop > 600){
        scrollBtn.classList.remove("hidden")
    }else{
        scrollBtn.classList.add("hidden")
    }
})
document.addEventListener("click", e=> {
    if(e.target.matches(".scroll-top-btn")){
        window.scrollTo({
            behavior: "smooth",
            top:0
        })
    }
})


for(let i =0; i <=3; i++){
    hideText_btn[i].addEventListener('click', ()=>{
        hideText[i].classList.toggle("show")
        if(hideText[i].classList.contains("show")){
            hideText_btn[i].innerHTML ="Leer menos"
        }else{
            hideText_btn[i].innerHTML ="Saber más"
        }
    })
}

let map = L.map('map',{
    zoomControl:false
}).setView([10.492399399277055, -66.86832413883236], 17);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
L.marker([10.492399399277055, -66.86832413883236]).addTo(map)
.bindPopup('MegaMassive')
.openPopup();

$form.addEventListener('submit', handleSubmit)

async function handleSubmit(event){
    event.preventDefault()
    const form = new FormData(this)
    const response=  await fetch(this.action, {
        method: this.method,
        body: form,
        headers:{
            'Accept': 'application/json'
        }
    })
    if(response.ok){
        $form.reset()
        alert('Gracias por contactarnos')
    }
       
}

const swiper = new Swiper(swiperClass, {
    slidesPerView: 1,
  spaceBetween: 10,
  breakpoint:{
    320: {
        slidesPerView: 2,
        spaceBetween: 20
      },
      // when window width is >= 480px
      480: {
        slidesPerView: 3,
        spaceBetween: 30
      },
      // when window width is >= 640px
      640: {
        slidesPerView: 4,
        spaceBetween: 40
      }
  },
   autoplay:{
    delay:6000,
    disableOnInteraction:false
   },
    loop: true,
    effect: 'fade',
   
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
      clickable:true,
    },
  
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  
   
  });

   var recaptcha_response = '';
function submitUserForm (){
    if(recaptcha_response.length == 0) {
        document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">Este campo es requerido.</span>';
        return false;
    }
    return true;
}
 
function verifyCaptcha (token) {
    recaptcha_response = token;
    document.getElementById('g-recaptcha-error').innerHTML = '';
}


 



