var list_item_api = "/v2/items";
var list_sub_item_api = "/v2/sub_items/";
var add_road_patrol_api = "/v2/road_patrols/operator/store";
var report_api = "/v2/road_patrols/operator/report/";
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 routeControlsAddMap=[];
// var routeControlstest=[];
var popupArrays = [];
var popupArraysAddMap = [];
var sourceLat, sourceLng, destLat, destLng = "";
var addMap = null;
var startMarkerAdd = null;
var endMarkerAdd = null;
var isSetStartMarkerAdd = false;
var isSetEndMarkerAdd = false;
var observed_items = [];
var item_unique_id = 0;
var item_counter = 0;
var patrol_date;
var start_timer;
var end_timer;
var mapShow;
var showMapMarker;
// user info modal data (ui)
var date_ui;
var start_time_ui;
var end_time_ui;
var officer_name_ui;
var officer_plaque_ui;
var officer_phone_number_ui;
var distance_ui;
// end user info modal data (ui)
var marker_list = [];
var bounds = [
  [42.9130026312, 75.6166317076],
  [20.5782370061, 35.5092252948],
];
var item_icon = L.icon({
  iconUrl: "/dist/images/icons/item_location.png",
  iconSize: [30, 30],
  iconAnchor: [9, 19],
});
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: [56, 75],
  iconAnchor: [28, 75],
});
var mapEndIcon = L.divIcon({
  html: `
    <div id="pin-marker-end" class="pin-marker pin-most-dis">
      <div class="map-pin-marker most-distance">
        <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 startDivIcon = L.divIcon({
  html: `
    <div id="add-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 endDivIcon = L.divIcon({
  html: `
    <div id="add-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],
});
// datepicker
patrol_date = $("#patrol_date").persianDatepicker({
  format: "YYYY/MM/DD",
  initialValue: false,
  autoClose: true,
  initialValueType: "persian",
});
start_timer = $("#start_time").persianDatepicker({
  format: "HH:mm",
  initialValue: false,
  autoClose: true,
  initialValueType: "persian",
  onlyTimePicker: true,
  timePicker: {
    enabled: true,
    step: 1,
    hour: {
      enabled: true,
      step: null
    },
    minute: {
      enabled: true,
      step: null
    },
    second: {
      enabled: false,
      step: null
    },
  },
});
end_timer = $("#end_time").persianDatepicker({
  format: "HH:mm",
  initialValue: false,
  autoClose: true,
  initialValueType: "persian",
  onlyTimePicker: true,
  timePicker: {
    enabled: true,
    step: 1,
    hour: {
      enabled: true,
      step: null
    },
    minute: {
      enabled: true,
      step: null
    },
    second: {
      enabled: false,
      step: null
    },
  },
});
// datepicker

// 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

// empty tag checker
function isEmpty(el) {
  return !$.trim(el.html())
}
// end empty tag checker

// timer function
function startTimer(duration, display) {
  var timer = duration, minutes = parseInt(duration / 60, 10), seconds = parseInt(duration % 60, 10);
  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;
  display.text(minutes + ":" + seconds)
  interval = setInterval(function () {
    --timer
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.text(minutes + ":" + seconds)

    if (timer <= 0) {
      display.text("دریافت کد");
      display.prop("disabled", false);
      display.data("count", 0);
      clearInterval(interval);
    }
  }, 1000);
}
// end timer function

// build map
map = L.map('map', {
  maxBounds: bounds,
  minZoom: mapZoom,
  zoomControl: false,
}).setView([35.7065, 51.3477], mapZoom);
map.addLayer(L.tileLayer(`${mapUrl}{z}/{x}/{y}.png`, {
  attributionControl: false,
  attribution: "Open Street Map",
}));
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
$(() => {
  $("[data-mask]").inputmask();
  getWidth() < 508 ? '' : $('[data-toggle="tooltip"]').tooltip();
  // get item list
  $.ajax({
    url: list_item_api,
    type: "GET",
    beforeSend: function () {
      showLoaderScreen();
    },
    success: function (result) {
      const item = result.data;
      $("#item").empty();
      $("#item").append('<option value="0" disabled selected>انتخاب آیتم</option>');
      for (let index = 0; index < item.length; index++) {
        $("#item").append(`<option value="${item[index].id}">${item[index].name}</option>`);
      }
      hideLoaderScreen();
    },
    error: function (error) {
      ajax_error(request.responseJSON, request.status);
      hideLoaderScreen();
    },
  });
  // end get item list
  $("#otpToken_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 () {
  if (map.getZoom() >= 14) {
    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);
    map.panBy(L.point(10, 10));
    mapEndMarker.setLatLng(mapStartMarker.getLatLng()).addTo(map);
    $("#pin-marker-start").removeClass("pin-move pin-warn").addClass("pin-set");
  } else {
    Swal.fire({
      icon: "warning",
      title: "خطا",
      text: "لطفا زوم نقشه خود را بیشتر کنید",
      cancelButtonText: "بستن",
      showConfirmButton: false,
      showCancelButton: true,
    });
  }
});

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 () {
  if (map.getZoom() >= 14) {
    destLat = map.getCenter().lat;
    destLng = map.getCenter().lng;
    $("#pin-marker-end").removeClass("pin-move pin-warn").addClass("pin-set");
    addDestinationMarker(1);
    $("#add_item").prop("disabled", false);
    $("#add_patrol").prop("disabled", false);
    if (!isSetMapEndMarker) {
      mapEndMarker.setLatLng(L.latLng(map.getCenter()));
      isSetMapEndMarker = true;
      $("#pin-marker-end").removeClass("pin-move").addClass("pin-set");
    }
    // checkMarkersAndDrawPath();
  } else {
    Swal.fire({
      icon: "warning",
      title: "خطا",
      text: "لطفا زوم نقشه خود را بیشتر کنید",
      cancelButtonText: "بستن",
      showConfirmButton: false,
      showCancelButton: true,
    });
  }
});
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")
//       ) {
//         showLoaderScreen();
//         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",
//         closeOnClick: false,
//       };
//       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
//       );
//       popup.setLatLng(popupLocation);
//       popup.setContent(popupContent);
//       popupArrays.push(popup);
//       map.addLayer(popup);
//     }).addTo(map)
//   );
//   map.flyToBounds([mapStartMarker.getLatLng(), mapEndMarker.getLatLng()]);

//   $(".leaflet-control-container").css("display", "none");
//   $(".leaflet-routing-container-hide").css("display", "none");
//   hideLoaderScreen();
// }
// function drawPathAddMap() {
//   if (routeControlsAddMap.length) {
//       $(routeControlsAddMap).each(function (index, control) {
//         addMap.removeControl(control);
//           routeControlsAddMap.splice(routeControlsAddMap.indexOf(index), 1);
//       });
//   }
//   routeControlsAddMap.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,
//           },],
//       },
//     }).addTo(addMap)
//   );
//   addMap.flyToBounds([mapStartMarker.getLatLng(), mapEndMarker.getLatLng()]);
//   $(".leaflet-control-container").css("display", "none");
//   $(".leaflet-routing-container-hide").css("display", "none");
//   hideLoaderScreen();
// }
// function drawPathtest() {
//   if (routeControlstest.length) {
//     $(routeControlstest).each(function (index, control) {
//       addMap.removeControl(control);
//       routeControlstest.splice(routeControlstest.indexOf(index), 1);
//     });
//   }
//   routeControlstest.push(
//     L.Routing.control({
//       waypoints: [
//           L.latLng(
//               parseFloat(startMarkerAdd.getLatLng().lat),
//               parseFloat(startMarkerAdd.getLatLng().lng)
//           ),
//           L.latLng(
//               parseFloat(endMarkerAdd.getLatLng().lat),
//               parseFloat(endMarkerAdd.getLatLng().lng)
//           ),
//       ],
//       fitSelectedRoutes: false,
//       draggableWaypoints: true,
//       createMarker: function () {
//           return null;
//       },
//       lineOptions: {
//           addWaypoints: false,
//           styles: [{
//               color: "transparent",
//               opacity: 0,
//               weight: 0,
//           },],
//       },
//     }).on("routesfound", function (e) {
//     }).addTo(addMap)
//   )
//   addMap.flyToBounds([startMarkerAdd.getLatLng(), endMarkerAdd.getLatLng()], {padding: [2,2]})
//   $(".leaflet-control-container").css("display", "none");
//   $(".leaflet-routing-container-hide").css("display", "none");
//   hideLoaderScreen();
// }

// plaque
$(document).on("click", "#plaque_word_add1", function () {
  const modal = $("#plaque_text_modal");
  modal.modal("show");
  modal.find(".select-text").prop("disabled", false)
  modal.find(".last-time-select").prop("disabled", true)
});

$('#plaque_text_box').on("click", ".select-text", function () {
  const modal = $(this).parents(".modal");
  $("#plaque_word_add1").empty();
  $("#plaque_word_add1").data("value", $(this).data("value"));
  if ($(this).data("value") == "*") {
    $("#plaque_word_add1").append(`<i class="fa fa-wheelchair"></i>`);
  } else {
    $("#plaque_word_add1").append($(this).data("value"));
  }
  modal.find(".select-text").removeClass("last-time-select")
  $(this).addClass("last-time-select");
  modal.modal("hide");
});

function searchPlaque() {
  var input, filter, ul, li, i, txtValue;
  input = document.getElementById("serach_plaque_field");
  filter = input.value.toUpperCase();
  ul = document.getElementById("plaque_text_box");
  li = ul.getElementsByTagName("button");
  for (i = 0; i < li.length; i++) {
    txtValue = li[i].textContent || li[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
// end plaque

// add item
$(document).on("click", "#add_item", function () {
  if (isSetMapStartMarker && isSetMapEndMarker)
    $("#addItem_modal").modal({ backdrop: 'static', keyboard: false }, "show");
  else {
    Swal.fire({
      icon: "warning",
      title: "خطا",
      text: "ابتدا نقطه شروع و پایان گشت را انتخاب کنید",
      cancelButtonText: "بستن",
      showConfirmButton: false,
      showCancelButton: true,
    });
  }
});
// end add item

// get sub item list
$(document).on("change", "#item", function () {
  const parent = $(this).parents(".modal");
  parent.find(".unit").text("");
  parent.find(".upload-box").addClass("d-none");
  parent.find("#item_amount").prop("disabled", true);
  addMap.removeLayer(endMarkerAdd);
  $.ajax({
    url: list_sub_item_api + $(this).find("option:selected").val(),
    type: "GET",
    beforeSend: function () {
      showLoaderScreen();
      parent.find("#sub_item").append(`<option value="-1" selected>در حال بروزرسانی...</option>`);
    },
    success: function (result) {
      const sub_item = result.data;
      $("#sub_item").empty();
      $("#sub_item").append('<option value="0" disabled selected>انتخاب موضوع مشاهده شده</option>');
      $("#sub_item").prop("disabled", false);
      for (let index = 0; index < sub_item.length; index++) {
        $("#sub_item").append(`<option value="${sub_item[index].sub_item}" data-sub-unit="${sub_item[index].unit}" data-sub-image="${sub_item[index].needs_image}" data-sub-endpoint="${sub_item[index].needs_end_point}">${sub_item[index].name}</option>`);
      }
      hideLoaderScreen();
    },
    error: function (error) {
      ajax_error(request.responseJSON, request.status);
      hideLoaderScreen();
    },
  });
});
// end get sub item list

// get sub item list
$(document).on("change", "#sub_item", function () {
  const parent = $(this).parents(".modal");
  parent.find(".unit").text(`(${$(this).find("option:selected").data("subUnit")})`);
  parent.find("#item_amount").prop("disabled", false);
  if ($(this).find("option:selected").data("subImage") == 1) {
    parent.find(".upload-box").removeClass("d-none");
  } else {
    parent.find(".upload-box").addClass("d-none");
  }
  if ($(`input[name="action-status"]:checked`).val() == 1) {
    $("#add-pin-marker-start").find(".title-circle-text").text("شروع");
    if (isSetStartMarkerAdd) {
      if ($(this).find("option:selected").data("subEndpoint") == 1) {
        isSetEndMarkerAdd = false;
        addMap.flyTo(startMarkerAdd.getLatLng(), 15);
        endMarkerAdd.setLatLng(startMarkerAdd.getLatLng(), { draggable: true, }).addTo(addMap);
        $("#add-pin-marker-end").removeClass("pin-set");
      } else {
        addMap.removeLayer(endMarkerAdd);
      }
    }
  } else {
    $("#add-pin-marker-start").find(".title-circle-text").text("محل");
    addMap.removeLayer(endMarkerAdd);
  }
});
// end get sub item list

// item modal for add
$('#addItem_modal').on('show.bs.modal', function () {
  const parent = $("#addItem_modal");
  parent.find(".unit").text("");
  parent.find(".upload-box").addClass("d-none");
  parent.find("#action_do").prop("checked", false);
  parent.find("#action_dont").prop("checked", true);
  parent.find(".value-important").removeClass("invalid").removeClass("valid");
  parent.find(".no-action-data").slideDown();
  parent.find("#item_amount").prop("disabled", true);
  const image_box_parent = parent.find(".action-data");
  image_box_parent.slideUp();
  image_box_parent.find(".img-input").val("");
  image_box_parent.find(".img-preview").removeAttr("src");
  image_box_parent.find(".img-title").css("display", "");
  image_box_parent.find(".btn-delete-img").attr("disabled", "disabled");
  parent.find(".clean-select").val("0");
  parent.find("#sub_item").prop("disabled", true);
  parent.find(".clean-input").val("");
  parent.find(".clean-textarea").val("");
  if (addMap == null) {
    setTimeout(() => {
      createAddMap();
    }, 400);
  } else {
    setTimeout(() => {
      clearAddMap();
    }, 400);
  }
});
// end item modal for add

// uploading file input
$(document).on("change", ".img-input", function () {
  var input = this;
  var parent = $(input).parents(".img-box");
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      parent.find(".img-title").css("display", "none");
      parent.find(".btn-delete-img").removeAttr("disabled");
      parent.find(".img-preview").attr("src", e.target.result);
    };
    reader.readAsDataURL(input.files[0]);
  }
});
$(".btn-delete-img").on("click", function () {
  var parent = $(this).parents(".img-box");
  parent.find(".img-input").val("");
  parent.find(".img-preview").removeAttr("src");
  parent.find(".img-title").css("display", "");
  $(this).attr("disabled", "disabled");
});
// end uploading file input

$(document).on("change", 'input[name="action-status"]', function () {
  const parent = $(this).parents(".modal");
  if ($(`input[name="action-status"]:checked`).val() == 1) {
    parent.find(".action-data").slideDown();
    parent.find(".no-action-data").slideUp()
    $("#add-pin-marker-start").find(".title-circle-text").text("شروع");
    if (isSetStartMarkerAdd) {
      if ($("#sub_item").find("option:selected").data("subEndpoint") == 1) {
        isSetEndMarkerAdd = false;
        addMap.flyTo(startMarkerAdd.getLatLng(), 15);
        endMarkerAdd.setLatLng(startMarkerAdd.getLatLng(), { draggable: true, }).addTo(addMap);
        $("#add-pin-marker-end").removeClass("pin-set");
      } else {
        addMap.removeLayer(endMarkerAdd);
      }
    }
  } else {
    parent.find(".action-data").slideUp();
    parent.find(".no-action-data").slideDown();
    $("#add-pin-marker-start").find(".title-circle-text").text("محل");
    addMap.removeLayer(endMarkerAdd);
  }
});

// clear add map
function clearAddMap() {
  isSetStartMarkerAdd = false;
  isSetEndMarkerAdd = false;
  addMap.removeLayer(startMarkerAdd);
  if (endMarkerAdd != null) {
    addMap.removeLayer(endMarkerAdd);
  }
  addMap.setView([35.7065, 51.3477], mapZoom);
  setMarkerDefaultAdd();
  // drawPathAddMap();
}
// end clear add map

// add map functions
function createAddMap() {
  var bounds = [
    [42.9130026312, 75.6166317076],
    [20.5782370061, 35.5092252948],
  ];
  addMap = L.map("add_map", {
    maxBounds: bounds,
    minZoom: 6,
    zoomControl: false,
  }).setView([35.7065, 51.3477], mapZoom);
  addMap.addLayer(L.tileLayer(`${mapUrl}{z}/{x}/{y}.png`, {
    attributionControl: false,
    attribution: "Open Street Map",
  }));
  setMarkerDefaultAdd();
  // drawPathAddMap();
}

function setMarkerDefaultAdd() {
  isSetStartMarkerAdd = false;
  isSetEndMarkerAdd = false;
  $("#add-pin-marker-end").removeClass("pin-set");
  $("#add-pin-marker-start").removeClass("pin-set");
  startMarkerAdd = new L.marker(L.latLng(addMap.getCenter()), {
    icon: startDivIcon,
    draggable: true,
  }).addTo(addMap);

  endMarkerAdd = new L.marker(L.latLng(addMap.getCenter()), {
    icon: endDivIcon,
    draggable: true,
  });

  addMap.on("move", function () {
    if (!isSetStartMarkerAdd && !isSetEndMarkerAdd) {
      startMarkerAdd.setLatLng(L.latLng(addMap.getCenter()));
      $("#add-pin-marker-start").removeClass("pin-set").addClass("pin-move");
    }

    if (isSetStartMarkerAdd && !isSetEndMarkerAdd) {
      endMarkerAdd.setLatLng(L.latLng(addMap.getCenter()));
      $("#add-pin-marker-end").removeClass("pin-set").addClass("pin-move");
    }
  });

  addMap.on("moveend", function () {
    if (!isSetStartMarkerAdd && !isSetEndMarkerAdd) {
      startMarkerAdd.setLatLng(L.latLng(addMap.getCenter()));
      $("#add-pin-marker-start").removeClass("pin-move pin-set");
    }

    if (isSetStartMarkerAdd && !isSetEndMarkerAdd) {
      endMarkerAdd.setLatLng(L.latLng(addMap.getCenter()));
      $("#add-pin-marker-end").removeClass("pin-move pin-set");
    }
  });

  startMarkerAdd.on("click", function () {
    if (addMap.getZoom() >= 14) {
      if (!isSetStartMarkerAdd) {
        startMarkerAdd.setLatLng(L.latLng(addMap.getCenter()));
        endMarkerAdd.setLatLng(L.latLng(addMap.getCenter()));
        isSetStartMarkerAdd = true;
        $("#add-pin-marker-start").removeClass("pin-move pin-warn").addClass("pin-set");
      }
      if ($(`input[name="action-status"]:checked`).val() == 1) {
        if ($("#sub_item").find("option:selected").data("subEndpoint") == 1) {
          endMarkerAdd.setLatLng(startMarkerAdd.getLatLng(), { draggable: true, }).addTo(addMap);
          addMap.panBy(L.point(10, 10));
        }
      }

      $(this).hide();
      $("#add-pin-marker-start").removeClass("pin-move pin-warn").addClass("pin-set");
    } else {
      Swal.fire({
        icon: "warning",
        title: "خطا",
        text: "لطفا زوم نقشه خود را بیشتر کنید",
        cancelButtonText: "بستن",
        showConfirmButton: false,
        showCancelButton: true,
      });
    }
  });

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

  startMarkerAdd.on("dragend", function () {
    $("#add-pin-marker-start").removeClass("pin-move");
    if ($("#add-pin-marker-start").hasClass("pin-set") || isSetStartMarkerAdd) {
      $("#add-pin-marker-start").addClass("pin-set");
      // drawPathtest()

    } else {
      addMap.setView(startMarkerAdd.getLatLng());
    }
  });

  endMarkerAdd.on("click", function () {
    if (addMap.getZoom() >= 14) {
      if (!isSetEndMarkerAdd) {
        isSetEndMarkerAdd = true;
        $("#add-pin-marker-end").removeClass("pin-move pin-warn").addClass("pin-set");
      }
      // drawPathtest()
    } else {
      Swal.fire({
        icon: "warning",
        title: "خطا",
        text: "لطفا زوم نقشه خود را بیشتر کنید",
        cancelButtonText: "بستن",
        showConfirmButton: false,
        showCancelButton: true,
      });
    }
  });

  endMarkerAdd.on("drag", function () {
    $("#add-pin-marker-end").addClass("pin-move");
  });

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

    if ($("#add-pin-marker-end").hasClass("pin-set") || isSetEndMarkerAdd) {
      $("#add-pin-marker-end").addClass("pin-set");
      // drawPathtest()
    } else {
      addMap.setView(endMarkerAdd.getLatLng());
    }
  });
}
// add map functions

// add item cta
$(document).on("click", "#addItem_cta", function () {
  const modal = $(this).parents(".modal");
  modal.find("select.value-important").each(function () {
    $(this).find("option:selected").val() == 0 ? $(this).removeClass("valid").addClass("invalid") : $(this).removeClass("invalid").addClass("valid");
  });
  modal.find("input.value-important").each(function () {
    $(this).val() == "" ? $(this).removeClass("valid").addClass("invalid") : $(this).removeClass("invalid").addClass("valid");
  });
  modal.find("textarea.value-important").each(function () {
    $(this).val() == "" ? $(this).removeClass("valid").addClass("invalid") : $(this).removeClass("invalid").addClass("valid");
  });
  modal.find(".upload-box").each(function () {
    $(this).find(".img-input").get(0).files[0] == undefined ? $(this).find(".imgbox").removeClass("valid").addClass("invalid") : $(this).find(".imgbox").removeClass("invalid").addClass("valid")
  });
  if ($(`input[name="action-status"]:checked`).val() == 0) {
    $("#item_amount").removeClass("invalid").addClass("valid");
    $("#description").removeClass("invalid").addClass("valid");
    $(".upload-box").find(".imgbox").removeClass("invalid").addClass("valid");
  } else {
    $(".no-action-data").find(".value-important").removeClass("invalid").addClass("valid")
  }
  if ($(".upload-box").hasClass("d-none")) { $(".upload-box").find(".imgbox").removeClass("invalid").addClass("valid") }
  if (!isSetStartMarkerAdd) {
    $("#add-pin-marker-start").addClass("pin-warn");
    Swal.fire({
      icon: "warning",
      title: "خطا",
      text: "لطفا موقعیت فعالیت را روی نقشه مشخص کنید! (شروع)",
      cancelButtonText: "بستن",
      showConfirmButton: false,
      showCancelButton: true,
    });
  } else { $("#add-pin-marker-start").removeClass("pin-warn") }
  if ((isSetStartMarkerAdd && !isSetEndMarkerAdd) && $("#sub_item").find("option:selected").data("subEndpoint") == 1 && $(`input[name="action-status"]:checked`).val() == 1) {
    $("#add-pin-marker-end").addClass("pin-warn");
    Swal.fire({
      icon: "warning",
      title: "خطا",
      text: "لطفا موقعیت فعالیت را روی نقشه مشخص کنید! (پایان)",
      cancelButtonText: "بستن",
      showConfirmButton: false,
      showCancelButton: true,
    });
  } else { $("#add-pin-marker-end").removeClass("pin-warn") }
  if (modal.find(".invalid").length != 0 || modal.find(".pin-warn").length != 0) { return } else {
    let data_items = {};
    const item_id = modal.find("#item option:selected").val();
    const item_text = modal.find("#item option:selected").text();
    const sub_item_id = modal.find("#sub_item option:selected").val();
    const sub_item_text = modal.find("#sub_item option:selected").text();
    const local_name = modal.find("#local_name").val();
    const instant_action = modal.find("input[name='action-status']:checked").val();
    const description = modal.find("#description").val();
    const start_point = `${startMarkerAdd.getLatLng().lat.toFixed(6)},${startMarkerAdd.getLatLng().lng.toFixed(6)}`;
    if (modal.find("input[name='action-status']:checked").val() == "1") {
      const amount = modal.find("#item_amount").val();
      data_items.amount = amount;
      if ($("#sub_item").find("option:selected").data("subImage") == 1) {
        const image_before = $("#deviceImg1").get(0).files[0];
        const image_after = $("#deviceImg2").get(0).files[0];
        data_items.image_before = image_before;
        data_items.image_after = image_after;
      }
      if ($("#sub_item").find("option:selected").data("subEndpoint") == 1) {
        const end_point = `${endMarkerAdd.getLatLng().lat.toFixed(6)},${endMarkerAdd.getLatLng().lng.toFixed(6)}`;
        data_items.end_point = end_point;
      }
    } else {
      const priority = modal.find("#priority option:selected").val();
      const priority_text = modal.find("#priority option:selected").text();
      data_items.priority = priority;
      data_items.priority_text = priority_text;
    }
    const marker = L.marker([startMarkerAdd.getLatLng().lat.toFixed(6), startMarkerAdd.getLatLng().lng.toFixed(6)], { icon: item_icon }).addTo(map);
    marker_list.push({ marker: marker, item_unique_id: item_unique_id });
    data_items.item_unique_id = item_unique_id++;
    data_items.item_id = item_id;
    data_items.item_text = item_text;
    data_items.sub_item_id = sub_item_id;
    data_items.sub_item_text = sub_item_text;
    data_items.local_name = local_name;
    data_items.instant_action = instant_action;
    data_items.description = description;
    data_items.start_point = start_point;
    observed_items.push(data_items);
    $("#item_list").prop("disabled", false);
    $(".item-counter").find("p").text(++item_counter);
    if (item_counter == 8) {
      $("#add_item").prop("disabled", true);
    } else {
      $("#add_item").prop("disabled", false);
    }
    modal.modal("hide");
  }
});
// end add item cta

// list of items
$(document).on("click", "#item_list", function () {
  const modal = $("#listItem_modal");
  $(".show-all-items").empty();
  for (let i = 0; i < observed_items.length; i++) {
    list_item_maker({
      item_unique_id: observed_items[i].item_unique_id,
      item_text: observed_items[i].item_text,
      amount: observed_items[i].amount,
      instant_action: observed_items[i].instant_action,
      priority_text: observed_items[i].priority_text
    });
  }
  modal.modal("show");
});
function list_item_maker({ item_unique_id, item_text, amount, instant_action, priority_text }) {
  let each_item = ``;
  each_item = `
  <div class="each-item align-items-center justify-content-between my-2 rounded" data-unique-id="${item_unique_id}">
    <div class="d-flex flex-column align-items-center">
        <div class="d-flex justify-content-between w-100">
            <p class="header-items text-nowrap">آیتم</p>
            <hr class="col mx-2">
            <p class="data-items mr-1">${item_text}</p>
        </div>
        <div class="d-flex justify-content-between w-100">
            <p class="header-items text-nowrap">شرح اقدام</p>
            <hr class="col mx-2">
            <p class="data-items mr-1">${instant_action == 1 ? "اقدام شده" : "اقدام نشده"}</p>
        </div>
        ${instant_action == 1 ? `<div class="d-flex justify-content-between w-100">
        <p class="header-items text-nowrap">مقدار فعالیت</p>
        <hr class="col mx-2">
        <p class="data-items mr-1">${amount}</p>
        </div>` : `<div class="d-flex justify-content-between w-100">
        <p class="header-items text-nowrap">میزان فوریت</p>
        <hr class="col mx-2">
        <p class="data-items mr-1">${priority_text}</p>
        </div>` }
        
    </div>
  </div>`;
  $(".show-all-items").append(each_item);
}
// end list of items

// show complete item data
$(document).on("click", ".each-item", function () {
  mapShow = null;
  const id = $(this).data("uniqueId");
  $(".complete-data-item").empty();
  const observed_item = observed_items.find(item => item.item_unique_id === id)
  item_complete_data(observed_item);
  $("#completeData_modal").find("#delete_item").data("id", observed_item.item_unique_id);
  $("#completeData_modal").modal("show");
  const latLon = observed_item.start_point.split(",")
  const markerPosition = [latLon[0], latLon[1]];
  buildMapShowAndMarker(markerPosition).then(() => {
    hideLoaderScreen();
  });
});
function item_complete_data(data) {
  const latLon = data.start_point.split(",")
  let complete_data_item = ``;
  complete_data_item = `<div class="d-flex justify-content-center align-items-center">
      <p class="text-nowrap quest-action">شرح اقدام اولیه در محل</p>
      <hr class="col mx-2">
      <p class="text-nowrap answer-action">${data.instant_action == 1 ? "اقدام شده" : "اقدام نشده"}</p>
  </div>
  <div class="d-flex flex-column flex-wrap align-items-start">
    <hr class="col">
    <div class="d-flex">
        <p class="text-nowrap mx-2 quest-action">آیتم:</p>
        <p class="mr-1 answer-action">${data.item_text}</p>
    </div>
    <hr class="col">
    <div class="d-flex">
        <p class="text-nowrap mx-2 quest-action">موضوع مشاهده شده:</p>
        <p class="mr-1 answer-action">${data.sub_item_text}</p>
    </div>
    <hr class="col">
    <div class="d-flex">
        <p class="text-nowrap mx-2 quest-action">نام محلی:</p>
        <p class="mr-1 answer-action">${data.local_name}</p>
    </div>
    <hr class="col">
    <div class="d-flex flex-wrap w-100 align-items-end justify-content-around">
      <div class="map-show-box img-thumbnail">
        <div class="map-self-design" id="map_show"></div>
      </div>
      <div>
          <table class="table table-bordered mb-0 mt-1">
              <thead>
                  <tr>
                      <th class="text-center">عرض جغرافیایی</th>
                      <th class="text-center">طول جغرافیایی</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td class="text-center">${latLon[0]}</td>
                      <td class="text-center">${latLon[1]}</td>
                  </tr>
              </tbody>
          </table>
      </div>
    </div>
    <hr class="col">
    ${data.instant_action == 1 ? `<div class="d-flex">
        <p class="text-nowrap mx-2 quest-action">شرح اقدام اولیه انجام شده:</p>
        <p class="mr-1 answer-action">${data.description}</p>
    </div>
    <hr class="col">
    <div class="d-flex">
      <p class="text-nowrap mx-2 quest-action">مقدار فعالیت:</p>
      <p class="mr-1 answer-action">${data.amount}</p>
    </div>
    ${data.image_before != undefined && data.image_after != undefined ? `<hr class="col"><div class="d-flex flex-wrap justify-content-around align-items-center w-100">
      <div class="d-flex flex-column align-items-center justify-content-center my-2">
        <p class="text-nowrap mx-2 quest-action mb-1">عکس قبل از اقدام</p>
        <img class="image-box-item" src="${URL.createObjectURL(data.image_before)}" alt="image before">
      </div>
      <div class="d-flex flex-column align-items-center justify-content-center my-2">
        <p class="text-nowrap mx-2 quest-action mb-1">عکس بعد از اقدام</p>
        <img class="image-box-item" src="${URL.createObjectURL(data.image_after)}" alt="image after">
      <div/>
    </div>` : ``}
    ` : `<div class="d-flex">
      <p class="text-nowrap mx-2 quest-action">میزان فوریت رسیدگی:</p>
      <p class="mr-1 answer-action">${data.priority_text}</p>
    </div>` }
  </div>`;
  $(".complete-data-item").append(complete_data_item);
}
// end show complete item data

// delete item from list
$(document).on("click", "#delete_item", function () {
  const id = $(this).data("id");
  Swal.fire({
    icon: "warning",
    title: "آیا برای حذف  مطمئن هستید؟",
    showCancelButton: true,
    confirmButtonColor: "#971b1b",
    cancelButtonColor: "#2d7c23",
    confirmButtonText: "بله، حذف می‌شود",
    cancelButtonText: "منصرف شدم!",
    showLoaderOnConfirm: true,
    preConfirm: () => {
      let new_marker_list = marker_list.filter(item => item.item_unique_id === id);
      map.removeLayer(new_marker_list[0].marker);
      new_marker_list.pop();
      observed_items = observed_items.filter(item => item.item_unique_id !== id);
      $(".show-all-items").empty();
      if (observed_items.length == 0) {
        $("#listItem_modal").modal("hide");
        --item_counter
        $(".item-counter").find("p").text(0);
        $("#item_list").prop("disabled", true);
      } else
        $(".item-counter").find("p").text(--item_counter);
      $(this).parents(".modal").modal("hide");
      for (let i = 0; i < observed_items.length; i++) {
        list_item_maker({
          item_unique_id: observed_items[i].item_unique_id,
          item_text: observed_items[i].item_text,
          amount: observed_items[i].amount,
          instant_action: observed_items[i].instant_action,
          priority_text: observed_items[i].priority_text
        });
      }
      $("#add_item").prop("disabled", false);
    },
  });
});
// end delete item from list

$(document).on("click", "#add_patrol", function () {
  if (isSetMapStartMarker && isSetMapEndMarker) {
    const userInfoModal = $("#userInfo_modal");
    userInfoModal.find("input.value-important").each(function () {
      $(this).val() == "" ? $(this).removeClass("valid").addClass("invalid") : $(this).removeClass("invalid").addClass("valid");
    });
    userInfoModal.find(".text-plaque").each(function () {
      $(this).val() == "" ? $(this).removeClass("valid").addClass("invalid") : $(this).removeClass("invalid").addClass("valid");
    });
    if (isEmpty(userInfoModal.find(".div-plaque"))) {
      userInfoModal.find(".div-plaque").addClass("invalid").removeClass("valid");
    } else {
      userInfoModal.find(".div-plaque").addClass("valid").removeClass("invalid");
    }
    if (userInfoModal.find(".invalid").length != 0) {
      userInfoModal.modal("show");
    } else {
      if (observed_items.length == 0) {
        $("#description_modal").modal("show");
      } else {
        addPatrol(1);
      }
    }
  } else {
    Swal.fire({
      icon: "warning",
      title: "خطا",
      text: "ابتدا نقطه شروع و پایان گشت را انتخاب کنید",
      cancelButtonText: "بستن",
      showConfirmButton: false,
      showCancelButton: true,
    });
  }
});

// add road patrol cta
$(document).on("click", "#userInfo_cta", function () {
  const modal = $(this).parents(".modal");
  modal.find("input.value-important").each(function () {
    $(this).val() == "" ? $(this).removeClass("valid").addClass("invalid") : $(this).removeClass("invalid").addClass("valid");
  });
  modal.find(".text-plaque").each(function () {
    $(this).val() == "" ? $(this).removeClass("valid").addClass("invalid") : $(this).removeClass("invalid").addClass("valid");
  });
  if (isEmpty(modal.find(".div-plaque"))) {
    modal.find(".div-plaque").addClass("invalid").removeClass("valid");
  } else {
    modal.find(".div-plaque").addClass("valid").removeClass("invalid");
  }
  if (start_timer.getState().selected.unixDate >= end_timer.getState().selected.unixDate) {
    Swal.fire({
      icon: "warning",
      title: "خطا",
      text: "ساعت پایان نباید از شروع کمتر باشد",
      cancelButtonText: "بستن",
      showConfirmButton: false,
      showCancelButton: true,
    });
    return
  }
  if (parseInt(modal.find("#distance").val()) > 500) {
    Swal.fire({
      icon: "warning",
      title: "خطا",
      text: "مسافت گشت نمیتواند بیشتر از پانصد کیلومتر باشد.",
      cancelButtonText: "بستن",
      showConfirmButton: false,
      showCancelButton: true,
    });
    return 
  }
  if (modal.find(".invalid").length != 0 || isEmpty($(".div-plaque"))) { return } else {
    date_ui = moment(patrol_date.getState().selected.unixDate).format("YYYY-MM-DD")
    start_time_ui = moment(start_timer.getState().selected.unixDate).format("HH:mm");
    end_time_ui = moment(end_timer.getState().selected.unixDate).format("HH:mm");
    officer_name_ui = modal.find("#user_full_name").val();
    plaque_number_add1 = modal.find("#plaque_number_add1").val();
    plaque_word_add1 = modal.find("#plaque_word_add1").data("value");
    plaque_number_add2 = modal.find("#plaque_number_add2").val();
    plaque_number_add3 = modal.find("#plaque_number_add3").val();
    officer_plaque_ui = plaque_number_add1 + "-" + plaque_word_add1 + "-" + plaque_number_add2 + "-" + plaque_number_add3;
    officer_phone_number_ui = $("#user_phone").val();
    distance_ui = modal.find("#distance").val();
    modal.modal("hide");
  }
});
// end add road patrol cta

// build show map 
function buildMapShowAndMarker(position) {
  return new Promise(function (resolve) {
    setTimeout(() => {
      mapShow = L.map("map_show", {
        maxBounds: bounds,
        minZoom: 6,
        zoomControl: false,
        attributionControl: false
      }).setView(position, 15);
      L.tileLayer(`${mapUrl}/{z}/{x}/{y}.png`, {}).addTo(mapShow);
      showMapMarker = L.marker(position, { icon: item_icon }).addTo(mapShow);
      resolve();
    }, 200)
  });
}

$(document).on('input', '.phone-is-correct', function () {
  const modal = $(this).parents(".modal");
  let value = $(this).val()

  if (value.length > 11) {
    $(this).val(value.slice(0, 11))
    value = value.slice(0, 11)
  }
  if (value.slice(0, 2) != '09') {
    $(this).val('09')
    value = value.slice('09')
  }

  if (value.length == 11) {
    $(this).removeClass("invalid").addClass("valid");
    modal.find(".attent-num").fadeOut("100");
  } else {
    $(this).addClass("invalid").removeClass("valid");
    modal.find(".attent-num").fadeIn("100");
  }
})

$(document).on('input', '.code-is-correct', function () {
  const value = $(this).val()

  if (value.length > 6) {
    $(this).val(value.slice(0, 6))
  }
})

// edit profile
$(document).on("click", "#edit_profile", function () {
  $("#userInfo_modal").modal({ backdrop: 'static', keyboard: false }, "show");
});
// end edit profile

// send otp
$(document).on("click", "#send_otp", function () {
  const modal = $(this).parents(".modal");
  if (modal.find("#send_otp").data("count") == 0) {
    modal.find('#accept_number').each(function (index) { if ($(this).val().length != 11) { $(this).removeClass("valid").addClass("invalid") } else $(this).removeClass("invalid").addClass("valid") });
    if (modal.find(".invalid").length != 0) {
      Swal.fire({
        icon: "error",
        title: "خطا",
        text: "شماره تلفن باید 11 رقم باشد.",
        cancelButtonText: "بستن",
        showConfirmButton: false,
        showCancelButton: true,
      });
    } else {
      $.ajax({
        url: `/v2/get_otp_token?phone_number=${modal.find("#accept_number").val()}`,
        type: "GET",
        headers: {
          "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        cache: false,
        contentType: false,
        processData: false,
        success: function (result) {
          hideLoaderScreen();
          modal.find(".otp-code-box").slideDown("300");
          modal.find("#send_otp").prop("disabled", true);
          modal.find("#send_otp").text("");
          modal.find("#send_otp").data("count", 1);
          modal.find("#check_otp_cta").removeClass("d-none");
          modal.find("#check_otp_cta").prop("disabled", false);
          startTimer(60 * 2, modal.find("#send_otp"));
        },
        error: function (request) {
          hideLoaderScreen();
          ajax_error(request.responseJSON, request.status);
        },
      });
    }
  } else {
    Swal.fire({
      icon: "error",
      title: "خطا",
      text: "منتظر اتمام تایمر باشید",
      cancelButtonText: "بستن",
      showConfirmButton: false,
      showCancelButton: true,
    });
  }
});
// end send otp token

// check otp token
$(document).on("click", "#check_otp_cta", function () {
  const modal = $(this).parents(".modal");
  if (modal.find('#otp_code').val().length != 6) { modal.find('#otp_code').removeClass("valid").addClass("invalid") } else modal.find('#otp_code').removeClass("invalid").addClass("valid")
  if (modal.find(".invalid").length != 0) { return } else {
    const phone_number = modal.find("#accept_number").val();
    const verification_code = modal.find("#otp_code").val();
    let formData = new FormData();
    formData.append(`phone_number`, phone_number);
    formData.append(`verification_code`, verification_code);
    $.ajax({
      url: `/v2/verify_otp`,
      type: "POST",
      headers: {
        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
      },
      data: formData,
      cache: false,
      contentType: false,
      processData: false,
      success: function (result) {
        hideLoaderScreen();
        modal.modal("hide");
        $("#plaque_text_modal").find(".select-text").removeClass("last-time-select");
        $("#userInfo_modal").find(".clean-input").val("");
        $("#userInfo_modal").find(".div-plaque").text("");
        $("#userInfo_modal").find(".value-important").removeClass("invalid").removeClass("valid");
        $("#userInfo_modal").find(".div-plaque").removeClass("invalid").removeClass("valid");
        $("#userInfo_modal").find(".text-plaque").removeClass("invalid").removeClass("valid");
        $("#userInfo_modal").find(".phone-is-correct").removeClass("invalid").removeClass("valid");
        $("#userInfo_modal").find("#user_phone").val(phone_number);
      },
      error: function (request) {
        hideLoaderScreen();
        ajax_error(request.responseJSON, request.status);
      },
    });
  }
});
// end check otp token

$('#otpToken_modal').on('hidden.bs.modal', function (e) {
  $("#userInfo_modal").modal({ backdrop: 'static', keyboard: false }, "show");
})

// add patrol func
function addPatrol(checkItem, description) {
  Swal.fire({
    icon: "warning",
    title: "آیا از ثبت اطلاعات وارده اطمینان دارید؟",
    showCancelButton: false,
    confirmButtonColor: "#2d7c23",
    confirmButtonText: "ثبت گشت",
    showLoaderOnConfirm: true,
    preConfirm: () => {
      const start_point_patrol = `${mapStartMarker.getLatLng().lat.toFixed(6)},${mapStartMarker.getLatLng().lng.toFixed(6)}`;
      const end_point_patrol = `${mapEndMarker.getLatLng().lat.toFixed(6)},${mapEndMarker.getLatLng().lng.toFixed(6)}`;
      let formData = new FormData();
      formData.append("start_point", start_point_patrol);
      formData.append("end_point", end_point_patrol);
      formData.append("start_time", date_ui + " " + start_time_ui);
      formData.append("end_time", date_ui + " " + end_time_ui);
      formData.append("officer_plaque", officer_plaque_ui);
      formData.append("officer_phone_number", officer_phone_number_ui);
      formData.append("officer_name", officer_name_ui);
      formData.append("distance", distance_ui);
      if (checkItem == 0)
        formData.append("description", description);
      else if (checkItem == 1) {
        for (let i = 0; i < observed_items.length; i++) {
          formData.append(`observed_items[${i}][item_id]`, observed_items[i].item_id);
          formData.append(`observed_items[${i}][sub_item_id]`, observed_items[i].sub_item_id);
          formData.append(`observed_items[${i}][local_name]`, observed_items[i].local_name);
          formData.append(`observed_items[${i}][instant_action]`, observed_items[i].instant_action);
          formData.append(`observed_items[${i}][start_point]`, observed_items[i].start_point);
          if (observed_items[i].instant_action == 0) {
            formData.append(`observed_items[${i}][priority]`, observed_items[i].priority);
            formData.append(`observed_items[${i}][priority_fa]`, observed_items[i].priority_text);
          } else {
            formData.append(`observed_items[${i}][amount]`, observed_items[i].amount);
            console.log(observed_items[i].image_before);
            if (observed_items[i].image_before != undefined) {
              formData.append(`observed_items[${i}][before_image]`, observed_items[i].image_before);
              formData.append(`observed_items[${i}][after_image]`, observed_items[i].image_after);
            }
            if (observed_items[i].end_point != undefined) {
              formData.append(`observed_items[${i}][end_point]`, observed_items[i].end_point);
            }
            formData.append(`observed_items[${i}][description]`, observed_items[i].description);
          }
        }
      }
      showLoaderScreen();
      $.ajax({
        url: add_road_patrol_api,
        type: "POST",
        headers: {
          "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function (result) {
          hideLoaderScreen();
          Swal.fire({
            icon: "success",
            title: "گشت با موفقیت ثبت شد",
            showCancelButton: false,
            confirmButtonColor: "#2d7c23",
            confirmButtonText: "اتمام عملیات",
            showDenyButton: true,
            denyButtonColor: '#20aaad',
            denyButtonText: 'چاپ گزارش',
            preConfirm: () => {
              location.reload(true);
            },
            preDeny: () => {
              window.open(report_api + result.road_patrol_id, '_blank')
              setTimeout(() => {
                location.reload(true);
              }, 500)
            }
          });
        },
        error: function (request) {
          hideLoaderScreen();
          ajax_error(request.responseJSON, request.status);
        },
      });
    },
  });
}
// end add patrol func

// add patrol without item
$(document).on("click", "#add_patrol_noItem", function () {
  const modal = $(this).parents(".modal");
  const description = modal.find("#description").val();
  modal.find("textarea.value-important").each(function () {
    $(this).val() == "" ? $(this).removeClass("valid").addClass("invalid") : $(this).removeClass("invalid").addClass("valid");
  });
  if (modal.find(".invalid").length != 0) { return } else {
    addPatrol(0, description)
    modal.modal("hide")
  }
});
// end add patrol without item