@extends('master.principal')
@section('header')
<link rel="stylesheet" href="{{asset('/assets/front/css/inputMaps.css') }}"> 
@endsection
@section('content')

<div class="mapContainer">
  <div id="filter" style="">
    <div class="row">
      <div class="col-12">
        <input type="text" class="form-control" id="input_search" onkeypress="return onInputSearchKeyup(event)" placeholder="Buscar por ciudad o provincia">
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-6 col-md-auto align-items-center justify-content-md-center d-flex">
        <div class="checkbox--portal--noForm">
          
          <input class="styled-checkbox" id="checkbox-volksTruck" type="checkbox">
          <label for="checkbox-volksTruck">
            <span>
              <span>Camiones</span>
            </span>
          </label>
        </div>
      </div>
      <div class="col-6 col-md-auto align-items-center justify-content-md-center d-flex">
        <div class="checkbox--portal--noForm">
          
          <input class="styled-checkbox" id="checkbox-manTrucks" type="checkbox">
          <label for="checkbox-manTrucks">
            <span>
              <span>Buses</span>
            </span>
          </label>
        </div>
      </div>
      <div class="col-6 col-md-auto align-items-center justify-content-md-center d-flex">
        <div class="checkbox--portal--noForm">
          
          <input class="styled-checkbox" id="checkbox-volkBus" type="checkbox">
          <label for="checkbox-volkBus">
            <span>
              <span>Post venta</span>
            </span>
          </label>
        </div>
      </div>
    </div>
  </div>
  <div id="map"></div>
  <script>
    /*<![CDATA[*/
    var pinList = []

    $('#checkbox-volksTruck').change(function () {
      toggleGroup();
    });
    $('#checkbox-volkBus').change(function () {
      toggleGroup();
    });
    $('#checkbox-manTrucks').change(function () {
      toggleGroup();
    });
    $('#checkbox-isAllDay').change(function () {
      toggleGroup();
    });
  
    function initMap() {
      if (navigator.geolocation) {
        // console.log("Location services are enabled");
      navigator.geolocation.getCurrentPosition(function(position) {
          setMap({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude
          }, 11)
      }, function error(error){
          getLocationFromIP();
      });
  } else {
      getLocationFromIP();
      }
  }

  function getLocationFromIP(){
  $.getJSON('https://json.geoiplookup.io/', function(data) {
        setMap(data, 11);
      }).fail(function() {
      // console.log("IP Request failed. Using default coordinates");
      setMap({latitude: -1.35949, longitude: -48.37006}, 4);
    })
  }

  function setPinList(map){
    // Listado de Concesionarios
    pinList = {!! App\Concesionario::concesionariosMapa() !!} ;
    var image = {
          url: '{{ asset('/assets/front/img/marker.png') }}',
          scaledSize: new google.maps.Size(48, 58),
          anchor: new google.maps.Point(24, 58)
        };
        let pinLocations = {!! App\Concesionario::concesionariosMapa() !!};
        pinLocations.forEach( function(pin) {
          let marker = setPin(pin, image);
          let infowindow = setContentString(pin);
          marker.addListener('click', function() {
            infowindow.open(map, marker);
          });
          marker.setMap(map);

          let pinObject = {
            marker: marker,
            volksTruck: pin.volksTruck,
            volkBus: pin.volkBus,
            manTrucks: pin.manTrucks,
            isAllDay: pin.isAllDay
          }

          pinList.push(pinObject);
        });
        toggleGroup()
  }

  function setPin(pin, image){
    return new google.maps.Marker({
        //position: new google.maps.LatLng(parseFloat(pin.latitude.replace(',', '.')), parseFloat(pin.longitude.replace(',', '.'))),
        position: new google.maps.LatLng(parseFloat(pin.latitude), parseFloat(pin.longitude)),
        visible: true,
        icon: image,
        title: pin.fantasyName
    });
  }

  function setContentString(pin){
    var contentString =  
    '<div id="content" class="mapPopup">'+
          '<div id="bodyContent" class="row">'+
            '<div class="col-4 logoMan mr-0 pr-0">'+
            '<img class="logo-man" src="{{ asset('/assets/front/img/logo-map.png') }}">'+
            '</div>'+
            '<div class="col-8">' +
            '<div id="firstHeading" class="firstHeading">'+ pin.socialReason + '</div>'+
            '<div class="address">'+
              pin.address + '<br>'+
            '</div>'+
            '<br>'+
            '<div class="phones">' +
              (pin.telephone ? ('<a href="tel:' + pin.telephone.replace(/[^\d]/g, "") + '" class="telephone">' +
                '<img class="phone" src="{{ asset('/assets/front/img/phone.svg') }}">' +
                pin.telephone +
              '</a>') : '') +
              (pin.website ? ('<a href="' + pin.website + '" target="_blank" class="website">' +
                pin.website +
              '</a>') : '') +
              (pin.whatsapp ? ('<a href="http://wa.me/' + pin.whatsapp.replace(/[^\d]/g, "") + '" class="whatsapp">' +
                '<img class="zap" src="{{ asset('/assets/front/img/whatsapp.svg') }}">' +
                pin.whatsapp+
              '</a>') : '') +
            '</div>' +
          // '<hr>'+
          '<div id="services" class="services">'+
          // 'Servicios disponibles:<br>'+
          '</div>'+
          '<div class="listServices">'+
          
            // (pin.volksTruck ? "Caminh\u00F5es Volkswagen<br>" : '') +
            // (pin.manTrucks ? "Caminh\u00F5es MAN<br>" : '') +
            // (pin.volkBus ? "Volksbus<br>" : '') +
            // (pin.isAllDay ? "24h Plant\u00E3o" : '') +
          
          '</div>'+
          '</div>'+
          '</div>'+
        '</div>';
    return new google.maps.InfoWindow({
      content: contentString
    });
  }

  function setMap(data, zoom) {
    if(data != undefined && data.longitude && data.latitude ){
        var myLatlng = new google.maps.LatLng(data.latitude, data.longitude);
        let map = new google.maps.Map(document.getElementById('map'), {
        mapTypeControlOptions: { mapTypeIds: [] },
        center: myLatlng,
        zoom: zoom
        });
        $("#filter").show();
        setPinList(map);
      } 
  }

  function toggleGroup() {

    let volksTruck = $('#checkbox-volksTruck').is(":checked");
    let volkBus = $('#checkbox-volkBus').is(":checked");
    let manTrucks = $('#checkbox-manTrucks').is(":checked");
    let isAllDay = $('#checkbox-isAllDay').is(":checked");
    var image = {
          url: '{{ asset('/assets/front/img/marker.png') }}',
          scaledSize: new google.maps.Size(48, 58),
          anchor: new google.maps.Point(24, 58)
        };

      pinList.forEach( function(pin) {
      let showMarker = filterMap(volksTruck, volkBus, manTrucks, pin)  

      var marker = setPin(pin , image);
      // console.log(pin.latitude);

      marker.setVisible(showMarker || false);
      })
  }

  function filterMap(volksTruck, volkBus, manTrucks, pin) {
    let setVisible = true;

    if (volksTruck || volkBus || manTrucks ){
      setVisible = (volksTruck ? pin.volksTruck : false) 
      || (volkBus ? pin.volkBus : false) 
      || (manTrucks ? pin.manTrucks : false)
    }

    return setVisible
  }


  function onInputSearchKeyup(e) {
    const enterCode = 13;
    // press enter
    if (e.keyCode == enterCode) {
      runSearch();
    }
  }

  function runSearch() {
    // let arg = ", Argentina";
    let $inputSearch = $("#input_search");
    let lat;
    let lng;
    
    if(!$inputSearch.val()) {
      return;
    } else {
      $("#filter").hide();
      let search = encodeURIComponent($inputSearch.val() + ', Argentina');

      $.ajax('https://maps.googleapis.com/maps/api/geocode/json?address=' 
                  + search + '&key=AIzaSyCsCqTSl3nOQDBJCsuIR63xAlPP8wsssWI')
          .then(
              function success (response) {
                if(response.results && response.results.length > 0) {
                  setMap({
                    latitude: response.results[0].geometry.location.lat,
                    longitude: response.results[0].geometry.location.lng
                  }, 11)
                } else {
                  $("#filter").show();
                }
              },
              function fail (status) {
                // console.log("fail" + JSON.stringify(status));
                $("#filter").show();
              }
          )
    }
  }

  /*]]>*/
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCsCqTSl3nOQDBJCsuIR63xAlPP8wsssWI&amp;callback=initMap" async="" defer=""></script>
</div>
@endsection