var currCoverageLat = -6.177078291310942;
var currCoverageLng = 106.82461738586426;
var mymap;

$('#mapsCoverageBox').ready(function() {
  mymap = L.map('mapid').setView([-6.177078291310942, 106.82461738586426], 15)
  var voteDiv1 = document.getElementById('pointer');

  var typingTimeout;
  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1
  }).addTo(mymap);
  mymap.on("moveend", function() {
    var dataCenter = mymap.getCenter();
    var url = 'https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=' + dataCenter.lat + '&lon=' + dataCenter.lng + '&zoom=18&namedetails=1';
    $.get(url, function(data) {
      $('#locationCoverage').val(data.display_name);
      currCoverageLat = dataCenter.lat;
      currCoverageLng = dataCenter.lng;
    });
  });
  $("#locationCoverage").keyup(function(e) {
    clearTimeout(typingTimeout);
    typingTimeout = setTimeout(function() {
      if (e.target.value) {
        $('.loader-image-coverage').show();
        var url = 'https://api.geocode.earth/v1/autocomplete?size=9&text=' + e.target.value + '&api_key=ge-8f0cd58ed7142569&boundary.country=ID';
        $.get(url, function(data) {
          var num = data.features.length;
          var container = $('<div />');
          for (var i = 0; i <= num; i++) {
            var dataRow = data.features[i];
            var locationRow = dataRow ? '<div class="coverage-row" onclick="getLongLat(' + "'" + dataRow.geometry.coordinates[0] + "'," + "'" + dataRow.geometry.coordinates[1] + "'" + ')"><img src="../themes/custom/telkomsel/assets/img/revamp/icons/maps-and-flags.svg">' + dataRow.properties.label + '</div>' : '';
            container.append(locationRow);
          }
          $('#coverageAutocompleteList').html(container);
          $('.loader-image-coverage').hide();
        });
      } else {
        var container = $('<div />');
        $('#coverageAutocompleteList').html(container);
      }
    }, 500);
  });
  $(document).click(function() {
    var container = $('<div />');
    $('#coverageAutocompleteList').html(container);
  });
  $('#current-position').on('click', function() {
    mymap.locate({ setView: true, maxZoom: 15 });
  });
});

function getLongLat(dataLng, dataLat) {
  currCoverageLat = dataLat;
  currCoverageLng = dataLng;
  mymap.setView([currCoverageLat, currCoverageLng], 15);
  var container = $('<div />');
  $('#coverageAutocompleteList').html(container);
}

function checkCoverage5G() {
  var container = $('<div />');
  $('#coverageAutocompleteList').html(container);
  $('.popup-orbit-section-custom').removeClass("hide-section");
  $("#successTerjangkau").css("display", "none");
  $("#warningTerjangkau").css("display", "none");
  $("#descTerjangkau").css("display", "none");
  var url = 'https://www.telkomsel.com/api/coverage/5g';
  var data = {
    "latitude": currCoverageLat.toString(),
    "longitude": currCoverageLng.toString()
  };
  $.ajax({
    type: "POST",
    beforeSend: function(request) {
      request.setRequestHeader("X-Partner-Channel", 'telkomsel');
      request.setRequestHeader("x-api-key", 'awjd9810u29h9u1j2iue1');
    },
    url: url,
    contentType: 'application/json',
    data: JSON.stringify(data),
    dataType: 'json',
    success: function(msg) {
      console.log(msg);
      if (msg.data.isCoverage) {
        $("#coveragePopupText").text('Selamat, ');
        $("#coveragePopupSubText").text('lokasi Anda terjangkau 5G');
        $("#successTerjangkau").css("display", "block");
        $("#descTerjangkau").css("display", "block");
      } else {
        $("#coveragePopupText").text('Maaf, ');
        $("#coveragePopupSubText").text('lokasi belum terjangkau 5G');
        $("#warningTerjangkau").css("display", "block");
      }
      $('.popup-orbit-section-custom').removeClass("hide-section");
      $('.package-orbit-section').css("display", "block");
      $('html').css("overflow", "hidden");
    },
    error: function() {
      $('.popup-orbit-section-custom').removeClass("hide-section");
      $('.package-orbit-section').css("display", "block");
      $('html').css("overflow", "hidden");
    }
  });
}

function closeBtn() {
  $(".coverage-map-section").css("display", "block");
  $('.popup-orbit-section-custom').addClass("hide-section");
  $('.package-orbit-section').css("display", "none");
  $('html').css("overflow", "auto");
}
(function($) {
  $(function() {
    $('.card-body').matchHeight();
  });
});