var map = null;
var startAbrarMarker = null;
var isSetStartAbrarMarker = false;
var endAbrarMarker = null;
var isSetEndAbrarMarker = false;

var routeControlsPath = [];
var popupArraysPath = [];
var polylinePath = null;

var mapCenterLat = null;
var mapCenterLng = null;

var startAbrarDivIcon = 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 endAbrarDivIcon = 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]
});

var projectEditId = null;
var projectEditData = [];
var abrarProjectSlider = null;

$('#abrar-list-card > .card-body .project-actions > button').on('click', function () {
  projectEditId = $(this).attr('data-id');

  $('#abrar-list-card > .card-header > .card-tools > button').click();
  $('#abrar-edit-card > .card-header > .card-title').text('ویرایش پروژه شماره ' + projectEditId);
  $('#abrar-edit-card').fadeIn(400, function () {
    getSpecificAbrarProject();
  });
});

$('#abrar-list-card > .card-header > .card-tools > button').on('click', function () {
  if ($('#abrar-list-card').hasClass('collapsed-card')) {
    projectEditId = null;

    if (!$('#abrar-edit-card').hasClass('collapsed-card')) {
      $('#abrar-edit-card > .card-header > .card-tools > button').click();
      $('#abrar-edit-card > .card-header > .card-title').text('');
      $('#abrar-edit-card').fadeOut();
      $('#abrar-edit-card .abrar-project-slider').hide();
      $('#abrar-edit-card .abrar-project-description').hide();
      $('#abrar-edit-card .abrar-project-date').hide();

      initialMarkerMapValue();
    }
  }
});

$('#abrar-edit-card > .card-footer > .btn.btn-danger').on('click', function () {
  $('#abrar-list-card > .card-header > .card-tools > button').click();
});

function getSpecificAbrarProject() {
  $.ajax({
    url: '/abrar-projects/' + projectEditId,
    type: 'GET',
    cache: false,
    contentType: false,
    processData: false,
    success: function (result) {
      //console.log(result);
      showSpecificAbrarProject(result.data);
      mapCenterLat = result.province.center_lat;
      mapCenterLng = result.province.center_long;
    },
    error: function (error) {
      //console.log(error);
    }
  });
}

function showSpecificAbrarProject(data) {
  $('[data-mask]').inputmask();

  $('#abrar-edit-card input[name=abrar-province-name]').val(data.province_name);
  $('#abrar-edit-card input[name=abrar-city-name]').val(data.city_name);
  $('#abrar-edit-card input[name=abrar-axis-name]').val(data.axis_name);
  $('#abrar-edit-card input[name=abrar-axis-length]').val(data.axis_length);

  for (let i = 0; i < 4; i++) {
    $('#abrar-edit-card #abrar-project-type-' + (i + 1)).prop('checked', false);
  }

  for (let i = 0; i < 9; i++) {
    $('#abrar-edit-card #abrar-project-status-' + (i + 1)).prop('checked', false);
  }

  if (data.project_type != null) {
    for (let i = 0; i < data.project_type.length; i++) {
      $('#abrar-edit-card #abrar-project-type-' + data.project_type[i]).prop('checked', true);
    }
  }

  abrarProjectSlider = $("#abrar-project-status-progress").slider({
    min: 0,
    max: 100,
    value: 0,
    ticks: [0, 100],
    ticks_snap_bounds: 1,
    formatter: function (value) {
      return value + '٪';
    },
    tooltip: 'always',
    tooltip_position: 'bottom'
  });

  if (data.project_status != null) {
    $('#abrar-edit-card #abrar-project-status-' + data.project_status).prop('checked', true);

    if (([2, 5, 6]).includes(data.project_status)) {
      $('#abrar-edit-card .abrar-project-slider').show();
      abrarProjectSlider.slider('setValue', data.project_status_progress);
    }

    if (data.project_status == 6) {
      $('#abrar-edit-card .abrar-project-description').show();
      if (data.project_status_description != null) {
        $('#abrar-edit-card .abrar-project-description textarea').val(data.project_status_description);
      }
    }

    if (data.project_status == 9) {
      $('#abrar-edit-card .abrar-project-date').show();

      if (data.project_status_date != null) {
        $('#abrar-edit-card .abrar-project-date input[name=abrar-project-status-date]').attr('value', data.project_status_date);
      }
    }
  }

  $('#abrar-edit-card .abrar-project-date input[name=abrar-project-status-date]').persianDatepicker({
    format: 'YYYY/MM/DD',
    autoClose: true,
    initialValue: (data.project_status_date != null) ? true : false,
    initialValueType: 'persian'
  });

  if (data.project_start_latlng != null && data.project_end_latlng != null) {
    $('#abrar-edit-card input[name=abrar-project-latlng-start]').val(
      parseFloat(data.project_start_latlng[0]).toFixed(10) +
      parseFloat(data.project_start_latlng[1]).toFixed(10)
    )

    $('#abrar-edit-card input[name=abrar-project-latlng-end]').val(
      parseFloat(data.project_end_latlng[0]).toFixed(10) +
      parseFloat(data.project_end_latlng[1]).toFixed(10)
    )
  }

  setTimeout(() => {
    if ($('#abrar-edit-card').hasClass('collapsed-card')) {
      $('#abrar-edit-card > .card-header > .card-tools > button').click();
    }
  }, 100);

  setTimeout(() => {
    if (map == null) {
      createLeafletMap();
    }

    setTimeout(() => {
      checkStartMarkerValidation(false, true);
    }, 25);
    setTimeout(() => {
      checkEndMarkerValidation(false, true);
    }, 50);
  }, 200);
}

function createLeafletMap() {
  let bounds = [
    [42.9130026312, 75.6166317076],
    [20.5782370061, 35.5092252948]
  ];

  map = new L.map('abrar-map', {
    maxBounds: bounds,
    minZoom: 6
  }).setView([mapCenterLat, mapCenterLng], 9);

  L.tileLayer('https://testmap.141.ir/141map/{z}/{x}/{y}.png', {}).addTo(map);

  startAbrarMarker = new L.marker(L.latLng(map.getCenter()), {
    icon: startAbrarDivIcon,
    draggable: true
  }).addTo(map);

  endAbrarMarker = new L.marker(L.latLng(map.getCenter()), {
    icon: endAbrarDivIcon,
    draggable: true
  });

  map.on('move', function () {
    if (!isSetStartAbrarMarker && !isSetEndAbrarMarker) {
      startAbrarMarker.setLatLng(L.latLng(map.getCenter()));
      $('#pin-marker-start').removeClass('pin-set').addClass('pin-move');
    }

    if (isSetStartAbrarMarker && !isSetEndAbrarMarker) {
      endAbrarMarker.setLatLng(L.latLng(map.getCenter()));
      $('#pin-marker-end').removeClass('pin-set').addClass('pin-move');
    }
  });

  map.on('moveend', function () {
    if (!isSetStartAbrarMarker && !isSetEndAbrarMarker) {
      startAbrarMarker.setLatLng(L.latLng(map.getCenter()));
      $('#pin-marker-start').removeClass('pin-move pin-set');
    }

    if (isSetStartAbrarMarker && !isSetEndAbrarMarker) {
      endAbrarMarker.setLatLng(L.latLng(map.getCenter()));
      $('#pin-marker-end').removeClass('pin-move pin-set');
    }
  });

  startAbrarMarker.on('click', function () {
    if (!isSetStartAbrarMarker) {
      startAbrarMarker.setLatLng(L.latLng(map.getCenter()));
      isSetStartAbrarMarker = true;

      $('#pin-marker-start').removeClass('pin-move').addClass('pin-set');

      $('#abrar-edit-card input[name=abrar-project-latlng-start]').val(
        startAbrarMarker.getLatLng().lat.toFixed(10) +
        startAbrarMarker.getLatLng().lng.toFixed(10)
      );
      $('#abrar-edit-card input[name=abrar-project-latlng-start]').removeClass('is-invalid-input');

      let markerLatLng = [
        startAbrarMarker.getLatLng().lat,
        startAbrarMarker.getLatLng().lng + 0.0008
      ];

      map.setView(markerLatLng);
      endAbrarMarker.setLatLng(markerLatLng);
      endAbrarMarker.addTo(map);
    }
  });

  endAbrarMarker.on('click', function () {
    if (!isSetEndAbrarMarker) {
      endAbrarMarker.setLatLng(L.latLng(map.getCenter()));
      isSetEndAbrarMarker = true;

      $('#pin-marker-end').removeClass('pin-move').addClass('pin-set');

      $('#abrar-edit-card input[name=abrar-project-latlng-end]').val(
        endAbrarMarker.getLatLng().lat.toFixed(10) +
        endAbrarMarker.getLatLng().lng.toFixed(10)
      );
      $('#abrar-edit-card input[name=abrar-project-latlng-end]').removeClass('is-invalid-input');

      checkMarkersAndDrawPath();
    }
  });

  startAbrarMarker.on('drag', function () {
    $('#pin-marker-start').addClass('pin-move');
    checkMarkersAndDrawPath();
  });

  endAbrarMarker.on('drag', function () {
    $('#pin-marker-end').addClass('pin-move');
    checkMarkersAndDrawPath();
  });

  startAbrarMarker.on('dragend', function () {
    $('#pin-marker-start').removeClass('pin-move');

    if ($('#pin-marker-start').hasClass('pin-set') || isSetStartAbrarMarker) {
      $('#abrar-edit-card input[name=abrar-project-latlng-start]').val(
        startAbrarMarker.getLatLng().lat.toFixed(10) +
        startAbrarMarker.getLatLng().lng.toFixed(10)
      );
      $('#abrar-edit-card input[name=abrar-project-latlng-start]').removeClass('is-invalid-input');
      $('#pin-marker-start').addClass('pin-set');
      checkMarkersAndDrawPath();
    } else {
      map.setView(startAbrarMarker.getLatLng());
    }
  });

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

    if ($('#pin-marker-end').hasClass('pin-set') || isSetEndAbrarMarker) {
      $('#abrar-edit-card input[name=abrar-project-latlng-end]').val(
        endAbrarMarker.getLatLng().lat.toFixed(10) +
        endAbrarMarker.getLatLng().lng.toFixed(10)
      );
      $('#abrar-edit-card input[name=abrar-project-latlng-end]').removeClass('is-invalid-input');
      $('#pin-marker-end').addClass('pin-set');
      checkMarkersAndDrawPath();
    } else {
      map.setView(endAbrarMarker.getLatLng());
    }
  });
}

function initialMarkerMapValue() {
  endAbrarMarker.remove();
  isSetEndAbrarMarker = false;
  map.setView([mapCenterLat, mapCenterLng], 9);
  startAbrarMarker.setLatLng(L.latLng(map.getCenter()));
  isSetStartAbrarMarker = false;

  removeStartToEndPath();

  $('#pin-marker-start').removeClass('pin-move pin-set');
  $('#pin-marker-end').removeClass('pin-move pin-set');

  $('#abrar-edit-card input[name=abrar-project-latlng-start]').val('');
  $('#abrar-edit-card input[name=abrar-project-latlng-end]').val('');
  $('#abrar-edit-card input[name=abrar-project-latlng-start]').removeClass('is-invalid-input');
  $('#abrar-edit-card input[name=abrar-project-latlng-end]').removeClass('is-invalid-input');
}

$('#abrar-edit-card input[name=abrar-project-status]').on('change', function () {
  let statusId = parseInt(($(this)[0].id).slice(-1));

  if ($(this).prop('checked')) {
    $('#abrar-edit-card .project-status-label').removeClass('is-invalid-text');

    if (([2, 5, 6]).includes(statusId)) {
      abrarProjectSlider.slider('setValue', 0);
      $('#abrar-edit-card .abrar-project-slider').fadeIn();
    } else {
      $('#abrar-edit-card .abrar-project-slider').fadeOut();
    }

    if (statusId == 6) {
      $('#abrar-edit-card .abrar-project-description textarea').val('');
      $('#abrar-edit-card .abrar-project-description').fadeIn();
      $('#abrar-edit-card .abrar-project-description textarea').removeClass('is-invalid-box');
    } else {
      $('#abrar-edit-card .abrar-project-description').fadeOut();
    }

    if (statusId == 9) {
      $('#abrar-edit-card .abrar-project-date').fadeIn();
      $('#abrar-edit-card input[name=abrar-project-status-date]').removeClass('is-invalid-box');
    } else {
      $('#abrar-edit-card .abrar-project-date').fadeOut();
    }
  }
});

$('#abrar-edit-card input[name=abrar-project-type]').on('change', function () {
  if ($(this).prop('checked')) {
    $('#abrar-edit-card .project-type-label').removeClass('is-invalid-text');
  }
});

$('#abrar-edit-card input[name=abrar-project-latlng-start]').on('keyup', function () {
  checkStartMarkerValidation();
});

$('#abrar-edit-card input[name=abrar-project-latlng-end]').on('keyup', function () {
  checkEndMarkerValidation();
});

function checkStartMarkerValidation(forSaveData = false, pageOnLoad = false) {
  let reg = /^([0-9]){2}\.([0-9])+$/;
  let startLatLngVal = ($('#abrar-edit-card input[name=abrar-project-latlng-start]').val()).split(' - ');
  let startLatLng = startLatLngVal.map(function (e) {
    e = e.replace(/_/g, '');
    return parseFloat(e.slice(1, -1));
  });

  if (isNaN(startLatLng[0])) {
    if (!forSaveData) {
      $('#abrar-edit-card input[name=abrar-project-latlng-start]').removeClass('is-invalid-input');
    } else {
      $('#abrar-edit-card input[name=abrar-project-latlng-start]').addClass('is-invalid-input');
    }
    $('#pin-marker-start').removeClass('pin-move pin-set');
    $('#abrar-edit-card input[name=abrar-project-latlng-start]').val('');
    $('#abrar-edit-card input[name=abrar-project-latlng-start]').attr('placeholder', '(شروع) => (طول جغرافیایی) - (عرض جغرافیایی)');
    return false;
  } else if (!startLatLng == 2 || !reg.test(startLatLng[0]) || !reg.test(startLatLng[1])) {
    $('#abrar-edit-card input[name=abrar-project-latlng-start]').addClass('is-invalid-input');
    $('#pin-marker-start').removeClass('pin-move pin-set');
    return false;
  } else {
    if (!forSaveData) {
      $('#abrar-edit-card input[name=abrar-project-latlng-start]').removeClass('is-invalid-input');

      startAbrarMarker.setLatLng(startLatLng);

      if (pageOnLoad) {
        setTimeout(() => {
          $('#pin-marker-start').removeClass('pin-move').addClass('pin-set');
          startAbrarMarker.setLatLng(startLatLng);
        }, 10);
      } else {
        $('#pin-marker-start').removeClass('pin-move').addClass('pin-set');
      }

      if (!isSetEndAbrarMarker) {
        let markerLatLng = [
          startAbrarMarker.getLatLng().lat,
          startAbrarMarker.getLatLng().lng + 0.0008
        ]

        map.setView(markerLatLng);
        endAbrarMarker.setLatLng(markerLatLng);

        if (!isSetStartAbrarMarker) {
          endAbrarMarker.addTo(map);
        }
      }

      isSetStartAbrarMarker = true;
    } else {
      projectEditData['project-start-latlng'] = [
        startAbrarMarker.getLatLng().lat.toFixed(10),
        startAbrarMarker.getLatLng().lng.toFixed(10)
      ];
    }

    checkMarkersAndDrawPath();

    return true;
  }
}

function checkEndMarkerValidation(forSaveData = false, pageOnLoad = false) {
  let reg = /^([0-9]){2}\.([0-9])+$/;
  let endLatLngVal = ($('#abrar-edit-card input[name=abrar-project-latlng-end]').val()).split(' - ');
  let endLatLng = endLatLngVal.map(function (e) {
    e = e.replace(/_/g, '');
    return parseFloat(e.slice(1, -1));
  });

  if (isNaN(endLatLng[0])) {
    if (!forSaveData) {
      $('#abrar-edit-card input[name=abrar-project-latlng-end]').removeClass('is-invalid-input');
    } else {
      $('#abrar-edit-card input[name=abrar-project-latlng-end]').addClass('is-invalid-input');
    }
    $('#pin-marker-end').removeClass('pin-move pin-set');
    $('#abrar-edit-card input[name=abrar-project-latlng-end]').val('');
    $('#abrar-edit-card input[name=abrar-project-latlng-end]').attr('placeholder', '(پایان) => (طول جغرافیایی) - (عرض جغرافیایی)');
    return false;
  } else if (!endLatLng == 2 || !reg.test(endLatLng[0]) || !reg.test(endLatLng[1])) {
    $('#abrar-edit-card input[name=abrar-project-latlng-end]').addClass('is-invalid-input');
    $('#pin-marker-end').removeClass('pin-move pin-set');
    return false;
  } else {
    if (!forSaveData) {
      $('#abrar-edit-card input[name=abrar-project-latlng-end]').removeClass('is-invalid-input');

      endAbrarMarker.setLatLng(endLatLng);
      isSetEndAbrarMarker = true;

      if (pageOnLoad) {
        setTimeout(() => {
          $('#pin-marker-end').removeClass('pin-move').addClass('pin-set');
          endAbrarMarker.setLatLng(endLatLng);
        }, 10);
      } else {
        $('#pin-marker-end').removeClass('pin-move').addClass('pin-set');
      }
    } else {
      projectEditData['project-end-latlng'] = [
        endAbrarMarker.getLatLng().lat.toFixed(10),
        endAbrarMarker.getLatLng().lng.toFixed(10)
      ];
    }

    checkMarkersAndDrawPath();

    return true;
  }
}

function showLoaderScreen() {
  $('.starter-loader-container').css('display', 'flex').hide().fadeIn();
}

function hideLoaderScreen() {
  $('.starter-loader-container').fadeOut();
}

$('#abrar-edit-card > .card-footer > .btn.btn-success').on('click', function () {
  saveAbrarFormData();
});

function checkPersianWordValidation(str) {
  let reg = /^[\u0600-\u06FF\s\.]+$/;

  if (!reg.test(str)) {
    return false;
  }
  return true;
}

function checkDataValidation() {
  let isDataValid = true;

  if ($('#abrar-edit-card input[name=abrar-project-type]:checked').length === 0) {
    isDataValid = false;
    $('#abrar-edit-card .project-type-label').addClass('is-invalid-text');
  } else {
    let projectTypeChecked = $('#abrar-edit-card input[name=abrar-project-type]:checked');
    let projectType = [];

    for (let i = 0; i < projectTypeChecked.length; i++) {
      projectType[i] = parseInt((projectTypeChecked[i].id).slice(-1));
    }

    projectEditData['project-type'] = projectType;
  }

  if ($('#abrar-edit-card input[name=abrar-project-status]:checked').length === 0) {
    isDataValid = false;
    $('#abrar-edit-card .project-status-label').addClass('is-invalid-text');
  } else {
    let statusId = parseInt(($('#abrar-edit-card input[name=abrar-project-status]:checked')[0].id).slice(-1));
    projectEditData['project-status'] = statusId;

    if (([2, 5, 6]).includes(statusId)) {
      projectEditData['project-status-progress'] = abrarProjectSlider.slider('getValue');
    } else {
      projectEditData['project-status-progress'] = null;
    }

    if (statusId == 6) {
      if ($('#abrar-edit-card .abrar-project-description textarea').val() == '' || !checkPersianWordValidation($('#abrar-edit-card .abrar-project-description textarea').val())) {
        isDataValid = false;
        $('#abrar-edit-card .abrar-project-description textarea').addClass('is-invalid-box');
      } else {
        $('#abrar-edit-card .abrar-project-description textarea').removeClass('is-invalid-box');
        projectEditData['project-status-description'] = $('#abrar-edit-card .abrar-project-description textarea').val();
      }
    } else {
      projectEditData['project-status-description'] = null;
    }

    if (statusId == 9) {
      if ($('#abrar-edit-card input[name=abrar-project-status-date]').val() == '') {
        isDataValid = false;
        $('#abrar-edit-card input[name=abrar-project-status-date]').addClass('is-invalid-box');
      } else {
        let regDate = /^۱[۳-۴][۰|۹][۰-۹]\/[۰-۱][۰-۹]\/[۰-۳][۰-۹]$/;

        if (regDate.test($('#abrar-edit-card input[name=abrar-project-status-date]').val())) {
          $('#abrar-edit-card input[name=abrar-project-status-date]').removeClass('is-invalid-box');
          projectEditData['project-status-date'] = $('#abrar-edit-card input[name=abrar-project-status-date]').val();
        } else {
          isDataValid = false;
          $('#abrar-edit-card input[name=abrar-project-status-date]').addClass('is-invalid-box');
          projectEditData['project-status-date'] = null;
        }
      }
    } else {
      projectEditData['project-status-date'] = null;
    }
  }

  if (!checkStartMarkerValidation(true)) {
    isDataValid = false;
  }

  if (!checkEndMarkerValidation(true)) {
    isDataValid = false;
  }

  return isDataValid;
}

function saveAbrarFormData() {
  if (checkDataValidation()) {
    showLoaderScreen();

    formData = new FormData();

    formData.append('project-type', projectEditData['project-type']);
    formData.append('project-status', projectEditData['project-status']);
    if (projectEditData['project-status-progress'] != null) {
      formData.append('project-status-progress', projectEditData['project-status-progress']);
    }
    if (projectEditData['project-status-description'] != null) {
      formData.append('project-status-description', projectEditData['project-status-description']);
    }
    if (projectEditData['project-status-date'] != null) {
      formData.append('project-status-date', projectEditData['project-status-date']);
    }
    formData.append('project-start-latlng', projectEditData['project-start-latlng']);
    formData.append('project-end-latlng', projectEditData['project-end-latlng']);

    for (let i = 0; i < $('input[name=abrar-project-file]')[0].files.length; i++) {
      formData.append('project-files-' + i, $('input[name=abrar-project-file]')[0].files[i]);
    }

    $.ajax({
      url: '/abrar-projects/' + projectEditId,
      type: 'POST',
      data: formData,
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      cache: false,
      contentType: false,
      processData: false,
      success: function (result) {
        //console.log(result);
        setTimeout(() => {
          hideLoaderScreen();
          window.open("/rmto?newAbrarProjectId=" + projectEditId, '_self');
        }, 200);
      },
      error: function (error) {
        //console.log(error);
        hideLoaderScreen();
      }
    });
  }
}

function drawStartToEndPath(pathType, source, dest) {
  if (routeControlsPath.length) {
    $(routeControlsPath).each(function (index, control) {
      map.removeControl(control);
      routeControlsPath.splice(routeControlsPath.indexOf(index), 1);
    });
  }
  if (polylinePath != null) {
    map.removeLayer(polylinePath);
  }
  switch (pathType) {
    case 'line': {
      polylinePath = L.polyline(
        [
          [source[0], source[1]], [dest[0], dest[1]]
        ],
        {
          color: '#0073e6',
          opacity: .6,
          weight: 5
        }
      ).addTo(map);
      break;
    }
    case 'axis': {
      $.get(`https://testmap.141.ir/route/v1/driving/${source[1]},${source[0]};${dest[1]},${dest[0]}?overview=false&alternatives=true&steps=true`,
        function (data) {
          routeControlsPath.push(
            L.Routing.control({
              waypoints: [
                L.latLng(parseFloat(source[0]), parseFloat(source[1])),
                L.latLng(parseFloat(dest[0]), parseFloat(dest[1]))
              ],
              fitSelectedRoutes: false,
              draggableWaypoints: true,
              createMarker: function () { return null; },
              lineOptions: {
                addWaypoints: false,
                styles: [{
                  color: '#0073e6',
                  opacity: .6,
                  weight: 5
                }]
              },
            }).on('routesfound', function (e) {
              for (let index = 0; index < popupArraysPath.length; index++) {
                if (popupArraysPath[index] !== null) {
                  map.removeLayer(popupArraysPath[index]);
                }
              }

              /*let popup = new L.Popup({
                'maxWidth': '300',
                'maxHeight': '150',
                'className': 'customRouteEstimate'
              });

              let popupLocation = new L.LatLng(e.routes[0].coordinates[parseInt(e.routes[0]
                .coordinates
                .length /
                2)].lat,
                e.routes[0].coordinates[parseInt(e.routes[0].coordinates.length / 2)]
                  .lng);
              let popupContent = "<span style=\"color:#FF5630 ; font-size:11px\">مسافت : </span>" + parseFloat(e.routes[0].summary.totalDistance / 1000.0).toFixed(2) + " کیلومتر";
              popup.setLatLng(popupLocation);
              popup.setContent(popupContent);
              popupArraysPath.push(popup);
              map.addLayer(popup);*/

            }).addTo(map)
          );
        });

      $('.leaflet-control-container').css('display', 'none');
      $('.leaflet-routing-container-hide').css('display', 'none');
      break;
    }
  }
}


function checkMarkersAndDrawPath() {
  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'))) {
    drawStartToEndPath(
      'line',
      [
        startAbrarMarker.getLatLng().lat,
        startAbrarMarker.getLatLng().lng
      ],
      [
        endAbrarMarker.getLatLng().lat,
        endAbrarMarker.getLatLng().lng
      ]
    );
  } else {
    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'))) {
        drawStartToEndPath(
          'line',
          [
            startAbrarMarker.getLatLng().lat,
            startAbrarMarker.getLatLng().lng
          ],
          [
            endAbrarMarker.getLatLng().lat,
            endAbrarMarker.getLatLng().lng
          ]
        );
      } else {
        if (routeControlsPath.length) {
          $(routeControlsPath).each(function (index, control) {
            map.removeControl(control);
            routeControlsPath.splice(routeControlsPath.indexOf(index), 1);
          });
        }
        if (polylinePath != null) {
          map.removeLayer(polylinePath);
        }
      }
    }, 20);
  }
}

function removeStartToEndPath() {
  if (routeControlsPath.length) {
    $(routeControlsPath).each(function (index, control) {
      map.removeControl(control);
      routeControlsPath.splice(routeControlsPath.indexOf(index), 1);
    });
  }
  if (polylinePath != null) {
    map.removeLayer(polylinePath);
  }
}