var marker, div, markerimg, map, latitude, longitude, geocoder;

//thanks to chatGPT
function isMobileOrTablet() 
{
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

function trim(str)
{

  var i, pos, found;
  
  try
  {
    
    /* thanks to https://stackoverflow.com/questions/9582141/string-length-returns-undefined/9582241 */
    if(str != null && str != "undefined" && String(str).length > 0)
    { 
    
      found = false;
    
      for(i=0; i<str.length; i++)
      {
      
        if(str.charAt(i) == " ")
        {
        
          pos = i;
          found = true;
          
        }
        else
        {
        
          pos = i;
          break;
          
        }
        
      }
      
      if(found == true)
       str = str.substring(pos, str.length);
       
      /***************************/
      
      found = false;
    
      for(i=str.length-1; i>=0; i--)
      {
      
        if(str.charAt(i) == " ")
        {
        
          pos = i;
          found = true;
          
        }
        else
        {
        
          pos = i;
          break;
          
        }
        
      }
      
      if(found == true)
       str = str.substring(0, pos + 1);
            
    }
    else
      str = "";
  
    return str;
    
  }
  catch(e)
  { 
    
    if(str == null || str == "undefined")
      return "";
    else
      return str;
      
  }
  
}

/* thanks to https://norfipc.com/codigos/codigos-para-crear-mostrar-mapas-google-maps.php
   thanks to https://stackoverflow.com/questions/5245915/how-do-i-return-a-longitude-and-latitude-from-google-maps-javascript-geocoder
   thanks to Re Estate native function to draw Google Maps
   thanks to http://www.developer.com/services/creating-custom-google-maps-markers.html
   thanks to http://software.stadtwerk.org/google_maps_colorizr/#administrative.province/all/ffffff/on
   thanks to https://developers.google.com/maps/documentation/javascript/maptypes
   thanks to https://stackoverflow.com/questions/14063545/google-map-circles-are-not-round
   thanks to https://stackoverflow.com/questions/36027778/how-to-draw-circle-around-marker-given-radius-in-google-map-api
   thanks to https://laracasts.com/discuss/channels/javascript/moving-the-marker-to-current-location-after-data-as-updated
   thanks to https://stackoverflow.com/questions/832692/how-can-i-check-whether-google-maps-is-fully-loaded
   thanks to https://developers.google.com/maps/documentation/javascript/examples/event-click-latlng#maps_event_click_latlng-javascript
   thanks to chatGPT
*/
function loadmap(lat_, lng_) 
{
   
   latitude = lat_;
   longitude = lng_;
   div = document.getElementById('map');
   
   try
   {
     geocoder = new google.maps.Geocoder();
   }
   catch(e)
   {
     geocoder = null;
   }

   if(geocoder)
   {
   
     var styles = [
	   {
		  
	     featureType: 'administrative.province',
	     elementType: 'all',
	     stylers: [            
	     { hue: '#ffffff' },
	     { saturation: 0 },  
	     { lightness: 100 },
	     { visibility: 'on' }
	     ]
     
	   }
     ];

	   var options = {
		  
	     mapTypeControlOptions: {
	     //mapTypeIds: [ 'Styled']
	     },
	     center: new google.maps.LatLng(lat_,lng_), /*Property location*/
	     zoom: 18,
       streetViewControl: false,
	     mapTypeId: 'roadmap' //Styled, roadmap (calle con edificios, dibujado), satellite (vista satelital), hybrid, terrain (calles sin edificios, dibujado)
		  
	   };
     
     map = new google.maps.Map(div, options);
     var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
     map.mapTypes.set('Styled', styledMapType);
     map.addListener('tilesloaded', function () { document.getElementById("loading").style.display = "none"; document.getElementById("loading").style.visibility = "hidden";  });
	
	   markerimg = "marker.png?rnd=" + Math.random();
     var place = new google.maps.LatLng(lat_,lng_);
   
     marker = new google.maps.Marker({
       position: place
       , map: map
       , icon: markerimg
	     , animation: google.maps.Animation.DROP,});
       
     document.getElementById("info").innerHTML = "Haga clic sobre el mapa para seleccionar ubicaci&oacute;n.&nbsp;&nbsp;&nbsp;<a href='javascript:returnlocation();'><font class='closewindow'>Obtener coordenadas y cerrar</font></a>";
     
     /*Marker' information balloon*/
      
     var popup = new google.maps.InfoWindow({
	        content: unescape("Ubicaci&oacute;n seleccionada")});
   
     popup.open(map, marker);
     
     /*Marker' information balloon at click*/
     function showInfo() 
	   {
		 	 
	     map.setZoom(18); /*zoom*/
       map.setCenter(marker.getPosition());
       infowindow.open(map,marker);
	      
	   }
     
     /*Marker click*/		
     google.maps.event.addListener(marker, 'click', showInfo);
     
     // Configure the click listener.
     map.addListener("click", (mapsMouseEvent) => {
     
       var lat, lng;
       
       lat = mapsMouseEvent.latLng.lat();
       lng = mapsMouseEvent.latLng.lng();
       latitude = lat;
       longitude = lng;
       
       updatemarker(lat, lng);
       
     });
      
   }
   else
     document.getElementById("info").innerHTML = "Error al localizar mapa, servicio no disponible... <a href='javascript:window.close();'><font class='closewindow'>Cerrar</font></a>";
   
}

//thanks to https://stackoverflow.com/questions/12699300/move-google-map-center-javascript-api
//thanks to https://stackoverflow.com/questions/5818129/how-to-change-the-position-of-marker-from-a-javascript-function
//thanks to https://stackoverflow.com/questions/19245800/how-to-change-icon-on-google-map-marker
//thanks to https://stackoverflow.com/questions/49352317/update-marker-text-google-maps-api
function updatemarker(lat_, lng_)
{

  latitude = lat_;
  longitude = lng_;

  var latlng = new google.maps.LatLng(lat_,lng_);
  
  marker.setPosition(latlng);
  markerimg = "marker.png?rnd=" + Math.random();
  marker.setIcon(markerimg);
  
  try
  {
    marker.setTitle("Ubicaci&oacute;n seleccionada");
  }
  catch(e)
  {
  }

  /*try
  {
    div.panTo(latlng);
  }
  catch(e)
  {

    try
    {
      map.setCenter(marker.getPosition());
    }
    catch(ex)
    {
    }

  }
  */
}

function showPosition(position)
{

  document.getElementById("info").style.visibility = "visible";
  document.getElementById("info").style.display = "block";

  latitude = position.coords.latitude;
  longitude = position.coords.longitude;
  loadmap(latitude,longitude);
  
}

function showPosition2(ipaddress)
{

  var arr, latitude = "", longitude = "";
  
  //thanks to https://ipapi.co/api/?javascript#introduction
  fetch("https://ipapi.co/" + trim(ipaddress) + "/latlong/")
    .then(function(response) {
      response.text().then(txt => {
        
        arr = txt.split(",");
        
        try
        {
          latitude = trim(arr[0]);
        }
        catch(e)
        {
          latitude = "";
        }
        
        try
        {
          longitude = trim(arr[1]);
        }
        catch(e)
        {
          longitude = "";
        }
        
        if(trim(latitude) == "" || trim(longitude) == "") 
          forzetoexit("No fue posible obtener las coordenadas, imposible continuar... cerraremos la interfaz en 10 segundos.");
        else
        {
        
          document.getElementById("info").style.visibility = "visible";
          document.getElementById("info").style.display = "block";
          loadmap(latitude,longitude);
          
        }
              
      });  
    })
    .catch(function(error) {
      forzetoexit("No fue posible obtener las coordenadas, imposible continuar... cerraremos la interfaz en 10 segundos.");
    });
    
}

function showgrants()
{
  
  document.getElementById("map").style.display = "block";
  document.getElementById("map").style.visibility = "visible";
  
  document.getElementById("info").style.display = "block";
  document.getElementById("info").style.visibility = "visible";
  document.getElementById("info").innerHTML = "<center><a href='javascript:window.close();'><font class='closewindow'>Cerrar</font></a></center>"; 
    
  //if(isMobileOrTablet()) 
    document.getElementById("map").innerHTML = "<div class='slider'><div class='slide active'><div class='slide'><div class='description'>Descripción de la imagen 1</div><img src='grantsm01.jpg' border='0' alt='Paso 1' height='100%' width='auto'></div><div class='slide'><div class='description'>Descripción de la imagen 1</div><img src='grantsm02.jpg' border='0' alt='Paso 2' height='100%' width='auto'></div><div class='slide'><div class='description'>Descripción de la imagen 1</div><img src='grantsm03.jpg' border='0' alt='Paso 3' height='100%' width='auto'></div><div class='navigation'><i class='fas fa-chevron-left prev-btn'></i><i class='fas fa-chevron-right next-btn'></i></div><div class='navigation-visibility'><div class='slide-icon active'></div><div class='slide-icon'></div><div class='slide-icon'></div><div class='slide-icon'></div><div class='slide-icon'></div></div></div>";
    drawslider();
      
    
    
    
}

function getdatafromip()
{

  getIPAddress().then((ipAddress) => {
  
    var ip = trim(ipAddress);
    
    if(trim(ip) == "")
      forzetoexit("No fue posible obtener la direcci&oacute;n IP, imposible continuar... cerraremos la interfaz en 10 segundos.");
    else
      showPosition2(trim(ip));
    
  });
  
}

//thanks to chatGPT
function getIPAddress() {

  return getIPAddress2().then((ipAddress) => {
    return ipAddress;
  }).catch((error) => {
    return "";
  });
  
}

function getIPAddress2() {

  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    var url = "https://api.ipify.org/";
  
    xhr.onreadystatechange = function () {
      if(this.readyState == 4) {
        if(trim(this.responseText) != "") { 
          resolve(trim(this.responseText));
        } else {
          reject("");
        }
      }
    }
  
    xhr.open("GET", url, true);
    xhr.send();
  });
  
}

function showError(error)
{

  document.getElementById("loading").style.display = "none";
  document.getElementById("loading").style.visibility = "hidden";
  showuseroptions();
  
}

function returnlocation()
{  
  location = "getloc2.php?data=" + btoa(latitude + "," + longitude) + "&rnd=" + btoa(Math.random());
}

function showuseroptions()
{

  var list = "Mostrar como activar permisos~Obtener coordenadas desde direccion IP~Cerrar";
  
	if(trim(list).substring(0, 1) == "~") list = trim(list).substring(1, trim(list).length);
	if(trim(list).substring(trim(list).length - 1, 1) == "~") list = trim(list).substring(0, trim(list).length - 1);
  
  setTimeout("setCanceltoCancel();", 100);
  setTimeout("setOKtoAccept();", 120);
  alertify.dropdown("Los permisos de ubicaci&oacute;n no est&aacute;n activados en su navegador web / dispositivo, seleccione opci&oacute;n:", function (e, str) {
    
    if (e) {
    
      if(trim(str).toLowerCase() == "mostrar como activar permisos")
        showgrants();
        
      if(trim(str).toLowerCase() == "obtener coordenadas desde direccion ip")
        getdatafromip();
        
      if(trim(str).toLowerCase() == "cerrar")
        window.close();
    
    } else { 
    }

  }, trim(list));
    
}

function setOKtoYes()
{

 try
 {
   document.getElementById("alertify-ok").innerText = "Si";
 }
 catch(e)
 {
 }
 
}

function setCanceltoNo()
{

 try
 {
   document.getElementById("alertify-cancel").innerText = "No";
 }
 catch(e)
 {
 }
 
}

function setCanceltoCancel()
{

 try
 {
   document.getElementById("alertify-cancel").innerText = "Cancelar";
 }
 catch(e)
 {
 }
 
}

function setOKtoAccept()
{

 try
 {
   document.getElementById("alertify-ok").innerText = "Aceptar";
 }
 catch(e)
 {
 }
 
}

function focustoprompt()
{

 try
 {
   document.getElementById("alertify-text").focus();
 }
 catch(e)
 {
 }
 
 try
 {
   document.getElementById("alertify-dropdown").focus();
 }
 catch(e)
 {
 }
 
 try
 {
   document.getElementById("alertify-text1").focus();
 }
 catch(e)
 {
 }
 
}

function drawslider()
{

    /* SLIDER */

    const slider = document.querySelector(".slider");
    const nextBtn = document.querySelector(".next-btn");
    const prevBtn = document.querySelector(".prev-btn");
    const slides = document.querySelectorAll(".slide");
    const slideIcons = document.querySelectorAll(".slide-icon");
    const numberOfSlides = slides.length;
    var slideNumber = 0;

    //image slider next button
    nextBtn.addEventListener("click", () => {
      slides.forEach((slide) => {
        slide.classList.remove("active");
      });
      slideIcons.forEach((slideIcon) => {
        slideIcon.classList.remove("active");
      });

      slideNumber++;

      if(slideNumber > (numberOfSlides - 1)){
        slideNumber = 0;
      }

      slides[slideNumber].classList.add("active");
      slideIcons[slideNumber].classList.add("active");
    });

    //image slider previous button
    prevBtn.addEventListener("click", () => {
      slides.forEach((slide) => {
        slide.classList.remove("active");
      });
      slideIcons.forEach((slideIcon) => {
        slideIcon.classList.remove("active");
      });

      slideNumber--;

      if(slideNumber < 0){
        slideNumber = numberOfSlides - 1;
      }

      slides[slideNumber].classList.add("active");
      slideIcons[slideNumber].classList.add("active");
    });

    //image slider autoplay
    var playSlider;

    var repeater = () => {
      playSlider = setInterval(function(){
        slides.forEach((slide) => {
          slide.classList.remove("active");
        });
        slideIcons.forEach((slideIcon) => {
          slideIcon.classList.remove("active");
        });

        slideNumber++;

        if(slideNumber > (numberOfSlides - 1)){
          slideNumber = 0;
        }

        slides[slideNumber].classList.add("active");
        slideIcons[slideNumber].classList.add("active");
      }, 4000);
    }
    repeater();

    //stop the image slider autoplay on mouseover
    slider.addEventListener("mouseover", () => {
      clearInterval(playSlider);
    });

    //start the image slider autoplay again on mouseout
    slider.addEventListener("mouseout", () => {
      repeater();
    });

}