// map variables
var mapZoom = getWidth() < 508 ? 5 : 6;
var mapUrl = `https://rmsmap.rmto.ir/141map/`;
var map;
var mapStartMarker = null;
var isSetMapStartMarker = false;
var mapEndMarker = null;
var isSetMapEndMarker = false;
var routeControls = [];
var routeControlsPath = [];
var popupArrays = [];
var popupArraysPath = [];
var sourceLat, sourceLng, destLat, destLng = "";
var bounds = [
  [42.9130026312, 75.6166317076],
  [20.5782370061, 35.5092252948],
];
var trafficLayer = L.tileLayer(
  "https://rmssatmap.rmto.ir/sat/{z}/{x}/{y}.jpg",
  {
    maxBounds: bounds,
    zoomControl: false,
    attributionControl: false,
    attribution: "© rendered by Witel",
  }
);
var iranLayer = L.tileLayer(
  "https://rmsmap.rmto.ir/141map/{z}/{x}/{y}.png",
  {}
);
//// map markers
var mapStartIcon = L.divIcon({
  html: `
    <div id="pin-marker-start" class="pin-marker">
      <div class="map-pin-marker">
        <div class="pin-main-circle"></div>
        <div class="pin-white-circle"></div>
        <div class="pin-title-circle">
          <span class="title-circle-text">شروع</span>
        </div>
        <div class="pin-main-line"></div>
      </div>
      <div class="pin-main-shadow">
        <div class="shadow-dot">
        </div>
      </div>
    </div>`,
  iconSize: [55, 75],
  iconAnchor: [33, 64],
});
var mapEndIcon = L.divIcon({
  html: `
    <div id="pin-marker-end" class="pin-marker">
      <div class="map-pin-marker">
        <div class="pin-main-circle"></div>
        <div class="pin-white-circle"></div>
        <div class="pin-title-circle">
          <span class="title-circle-text">پایان</span>
        </div>
        <div class="pin-main-line"></div>
      </div>
      <div class="pin-main-shadow">
        <div class="shadow-dot">
        </div>
      </div>
    </div>`,
  iconSize: [55, 75],
  iconAnchor: [33, 64],
});
//// map markers
//end  map variables

// loader
function showLoaderScreen() {
  $(".divloader").css("display", "flex").hide().fadeIn();
}
function hideLoaderScreen() {
  $(".divloader").fadeOut();
}
// end loader

// resize func
function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}
// end resize func

// build map
map = L.map("map").setView([32.62, 53.471], mapZoom);
map.addLayer(iranLayer);
map.invalidateSize();
mapStartMarker = new L.marker(map.getCenter(), {
  icon: mapStartIcon,
  draggable: true,
}).addTo(map);
mapEndMarker = new L.marker(map.getCenter(), {
  icon: mapEndIcon,
  draggable: true,
});
// end build map

// ready
$(() => {
  getWidth() < 508 ? '' : $('[data-toggle="tooltip"]').tooltip();
  // $("#phoneNumber_modal").modal({backdrop: 'static', keyboard: false}, "show");
});
// end ready

// map movement
map.on("move", function () {
  if (!isSetMapStartMarker && !isSetMapEndMarker) {
    mapStartMarker.setLatLng(L.latLng(map.getCenter()));
    $("#pin-marker-start").removeClass("pin-set").addClass("pin-move");
  }

  if (isSetMapStartMarker && !isSetMapEndMarker) {
    mapEndMarker.setLatLng(L.latLng(map.getCenter()));
    $("#pin-marker-end").removeClass("pin-set").addClass("pin-move");
  }
});

map.on("moveend", function () {
  if (!isSetMapStartMarker && !isSetMapEndMarker) {
    mapStartMarker.setLatLng(L.latLng(map.getCenter()));
    $("#pin-marker-start").removeClass("pin-move pin-set");
  }

  if (isSetMapStartMarker && !isSetMapEndMarker) {
    mapEndMarker.setLatLng(L.latLng(map.getCenter()));
    $("#pin-marker-end").removeClass("pin-move pin-set");
  }
});
// end map movement

// marker movement [start]
mapStartMarker.on("click", function () {
  sourceLat = map.getCenter().lat;
  sourceLng = map.getCenter().lng;
  if (!isSetMapStartMarker) {
    mapStartMarker.setLatLng(L.latLng(map.getCenter()));
    isSetMapStartMarker = true;
    $("#pin-marker-start").removeClass("pin-move pin-warn").addClass("pin-set");
  }
  addSourceMarker(1);
  mapEndMarker.setLatLng(mapStartMarker.getLatLng()).addTo(map);
  $("#pin-marker-start").removeClass("pin-move pin-warn").addClass("pin-set");
});

mapStartMarker.on("drag", function () {
  $("#pin-marker-start").addClass("pin-move");
});

mapStartMarker.on("dragend", function () {
  $("#pin-marker-start").removeClass("pin-move");
  if ($("#pin-marker-start").hasClass("pin-set") || isSetMapStartMarker) {
    $("#pin-marker-start").addClass("pin-set");
    checkMarkersAndDrawPath();
  } else {
    map.setView(mapStartMarker.getLatLng());
  }
});

function addSourceMarker(type) {
  let sourceCoordinates = null;
  if (type == 1) {
    sourceCoordinates = L.latLng(map.getCenter());
  } else if (type == 2) {
    sourceCoordinates = [sourceLat, sourceLng];
  }
}
// end marker movement

// marker movement [end]
mapEndMarker.on("click", function () {
  $("#pin-marker-end").removeClass("pin-move pin-warn").addClass("pin-set");
});
mapEndMarker.on("click", function () {
  destLat = map.getCenter().lat;
  destLng = map.getCenter().lng;
  addDestinationMarker(1);
  if (!isSetMapEndMarker) {
    mapEndMarker.setLatLng(L.latLng(map.getCenter()));
    isSetMapEndMarker = true;
    $("#pin-marker-end").removeClass("pin-move").addClass("pin-set");
  }
  checkMarkersAndDrawPath();
});
mapEndMarker.on("drag", function () {
  $("#pin-marker-end").addClass("pin-move");
  checkMarkersAndDrawPath();
});

mapEndMarker.on("dragend", function () {
  $("#pin-marker-end").removeClass("pin-move");

  if ($("#pin-marker-end").hasClass("pin-set") || isSetMapEndMarker) {
      $("#pin-marker-end").addClass("pin-set");
      checkMarkersAndDrawPath();
  } else {
      map.setView(mapEndMarker.getLatLng());
  }
});
function addDestinationMarker(type) {
  let destinationCoordinates = null;
  if (type == 1) {
      destinationCoordinates = L.latLng(map.getCenter());
  } else if (type == 2) {
      destinationCoordinates = [destLat, destLng];
  }
}
// end marker movement

function checkMarkersAndDrawPath() {
  setTimeout(() => {
    if (
      $("#pin-marker-start").hasClass("pin-set") &&
      !$("#pin-marker-start").hasClass("pin-move") &&
      $("#pin-marker-end").hasClass("pin-set") &&
      !$("#pin-marker-end").hasClass("pin-move")
    ) {
      drawPath();
    } else {
      if (routeControls.length) {
        $(routeControls).each(function (index, control) {
          map.removeControl(control);
          routeControls.splice(routeControls.indexOf(index), 1);
        });
      }
    }
  }, 20);
}
function drawPath() {
  if (routeControls.length) {
      $(routeControls).each(function (index, control) {
          map.removeControl(control);
          routeControls.splice(routeControls.indexOf(index), 1);
      });
  }
  routeControls.push(
    L.Routing.control({
      waypoints: [
          L.latLng(
              parseFloat(mapStartMarker.getLatLng().lat),
              parseFloat(mapStartMarker.getLatLng().lng)
          ),
          L.latLng(
              parseFloat(mapEndMarker.getLatLng().lat),
              parseFloat(mapEndMarker.getLatLng().lng)
          ),
      ],
      fitSelectedRoutes: false,
      draggableWaypoints: true,
      createMarker: function () {
          return null;
      },
      lineOptions: {
          addWaypoints: false,
          styles: [{
              color: "#28a745",
              opacity: 0.8,
              weight: 5,
          },],
      },
    }).on("routesfound", function (e) {
      var divideBy = 2;
      for (let index = 0; index < popupArrays.length; index++) {
        map.removeLayer(popupArrays[index]);
      }
      var customOptions = {
        maxWidth: "300",
        maxHeight: "150",
        className: "customRouteEstimate",
      };
      var popup = new L.Popup(customOptions);
      var popupLocation = new L.LatLng(
        e.routes[0].coordinates[
            parseInt(e.routes[0].coordinates.length / divideBy)
        ].lat,
        e.routes[0].coordinates[
            parseInt(e.routes[0].coordinates.length / divideBy)
        ].lng
      );
      var popupContent =
      '<span style="color:#FF5630; font-size:11px; font-family: IRANSansFaNum;">مسافت: </span>' +
      parseFloat(e.routes[0].summary.totalDistance / 1000.0).toFixed(2) +
      " کیلومتر";
      saveTotalDistance = parseFloat(
        parseFloat(e.routes[0].summary.totalDistance / 1000.0).toFixed(2)
      );
      popup.setLatLng(popupLocation);
      popup.setContent(popupContent);
      popupArrays.push(popup);
      map.addLayer(popup);
      // item will show here [one of places]
    }).addTo(map)
  );
  $(".leaflet-control-container").css("display", "none");
  $(".leaflet-routing-container-hide").css("display", "none");
}

// confirmation user 
$(document).on("click", "#send_conf_code_cta", function() {
  const modal = $(this).parents(".modal");
  $("#acceptCode_modal").find(".input-text-cleaner").val("");
  modal.find('.phone-is-correct').each(function(index) { if($(this).val().length != 11) { $(this).addClass("validation-style") }});
  if (modal.find(".validation-style").length != 0) {
    Swal.fire({
      icon: "error",
      title: "خطا",
      text: "شماره تلفن خود را وارد کنید",
      cancelButtonText: "بستن",
      showConfirmButton: false,
      showCancelButton: true,
    });
  }else {
    // here ajax start and in success next modal will be open
    modal.modal("hide");
    modal.find(".perv-number").text($("#accept_number").val());
    $("#acceptCode_modal").modal({backdrop: 'static', keyboard: false}, "show");
  }
});
// end confirmation user

// phone validation
function phone_checker(item) {
  const modal = item.parents(".modal");
  if (modal.find(".phone-is-correct").val().length == 11) {
    item.removeClass("validation-style")
    modal.find(".attent-num").fadeOut("100");
  } else {
    item.addClass("validation-style");
    modal.find(".attent-num").fadeIn("100");
  }
}
// end phone validation

// change phone number
$(document).on("click", "#back_phoneNumber" , function() {
  const modal = $("#phoneNumber_modal");
  $(this).parents(".modal").modal("hide");
  modal.modal("show");
  modal.find(".phone-is-correct").val("09");
  modal.find('.perv-number-parent').removeClass("d-none");
  modal.find('.phone-is-correct').removeClass("validation-style");
  if (modal.find("#continue_with_current").length == 0) {
    modal.find(".modal-footer").append(`<button id="continue_with_current" type="button" class="btn btn-secondary">ادامه با شماره فعلی</button>`);
    modal.find(".modal-title").text("تغییر شماره ثبت شده");
  }
});
// end change phone number

// continue with current number
$(document).on("click", "#continue_with_current", function() {
  $("#acceptCode_modal").find(".input-text-cleaner").val("");
  $("#phoneNumber_modal").modal("hide");
  $("#acceptCode_modal").modal("show");
});
// end continue with current number

// auto tab input
$(".accept-number").keyup(function () {
  if (this.value.length == this.maxLength) {
    var $next = $(this).prev('.accept-number');
    if ($next.length)
        $(this).prev('.accept-number').focus();
    else
        $(this).blur();
  }
});
// auto tab input

$(document).on("click", "#check_code_cta" , function() {
  const verification_code = [$(".accept-number:nth-child(4)").val(), $(".accept-number:nth-child(3)").val(), $(".accept-number:nth-child(2)").val(), $(".accept-number:nth-child(1)").val()].join("")
});

// change layers
$(document).on("click", ".iran-change-layer", function () {
  if (map.hasLayer(iranLayer)) {
    var currZoom = map.getZoom();
    if (currZoom < 8) {
      map.setZoom(7);
    }
    map.removeLayer(iranLayer);
    map.addLayer(trafficLayer);
    map.options.minZoom = 7;
    map.options.maxZoom = 14;
  }
  else if (map.hasLayer(trafficLayer)) {
    map.removeLayer(trafficLayer);
    map.addLayer(iranLayer);
    map.options.minZoom = 6;
  }
});
// end change layers