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 hasError = false;
var axisName,
  projectTitle,
  contractor,
  contractPrice,
  axisType,
  province,
  town,
  contractDate,
  contractDatePicker;
var provinces = [];
var towns = [];
var projectDistance = {};
var editProjectDistance = null;
var project_distance_edit = {};

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;

function editButton(id) {
  projectEditId = id;
  console.log(projectEditId);

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

$("#abrar-list-card > .card-header > .card-tools > button#minimize-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.btn-tool").click();
});

function editSpecificProject() {
  $.ajax({
    url:
      "/road-maintenance-project/show/" +
      projectEditId,
    type: "GET",
    cache: false,
    contentType: false,
    processData: false,
    success: function (result) {
      console.log(result);
      editProjectDistance = result.data[0].project_distance;
      showSpecificProject(result.data[0]);
      mapCenterLat = result.data[0].province.center_lat;
      mapCenterLng = result.data[0].province.center_long;
    },
    error: function (error) {
      //console.log(error);
    },
  });
}

function showSpecificProject(data) {
  $("[data-mask]").inputmask();

  if (data.axis_name != null)
    $("#abrar-edit-card input[name=edit-axis-name]").val(data.axis_name);
  else $("#abrar-edit-card input[name=edit-axis-name]").val("-");

  if (data.axis_type != null)
    $("#abrar-edit-card input[name=edit-axis-type]").val(
      returnAxisTypeText(data.axis_type)
    );
  else $("#abrar-edit-card input[name=edit-axis-type]").val("-");

  if (data.project_name != null)
    $("#abrar-edit-card input[name=edit-project-title]").val(data.project_name);
  else $("#abrar-edit-card input[name=edit-project-title]").val("-");

  if (data.city_name != null)
    $("#abrar-edit-card input[name=edit-town]").val(data.city_name);
  else $("#abrar-edit-card input[name=edit-town]").val("-");

  if (data.contractor_name != null)
    $("#abrar-edit-card input[name=edit-contractor]").val(data.contractor_name);
  else $("#abrar-edit-card input[name=edit-contractor]").val("-");

  if (data.contract_credit != null)
    $("#abrar-edit-card input[name=edit-contract-price]").val(
      data.contract_credit
    );
  else $("#abrar-edit-card input[name=edit-contract-price]").val("-");

  if (data.project_distance != null) {
    let distance_keys = Object.keys(data.project_distance);
    // console.log(distance_keys.length);
    if ($(".distance-children").length) {
      $(".distance-children").remove();
    }
    for (let index = 0; index < distance_keys.length; index++) {
      if (distance_keys[index] == "12") {
        // لکه گیری
        $(".card-right-data").append(
          '\
        <div class="col-sm-12 distance-children">\
          <div class="row">\
            <div class="col-sm-12">\
              <p>' +
          returnProjectOperationTitle(distance_keys[index]) +
          '</p>\
            </div>\
            <div class="col-sm-4">\
              <div class="form-group">\
                <label>\
                  کیلومتر\
                </label>\
                <input\
                  type="text"\
                  class="form-control"\
                  name="edit-progress' +
          distance_keys[index] +
          '-km"\
                />\
              </div>\
            </div>\
            <div class="col-sm-4">\
              <div class="form-group">\
                <label>\
                  مترمربع\
                </label>\
                <input\
                  type="text"\
                  class="form-control"\
                  name="edit-progress' +
          distance_keys[index] +
          '-mm"\
                />\
              </div>\
            </div>\
            <div class="col-sm-4">\
              <div class="form-group">\
                <label>\
                  تناژ\
                </label>\
                <input\
                  type="text"\
                  class="form-control"\
                  name="edit-progress' +
          distance_keys[index] +
          '-ton"\
                />\
              </div>\
            </div>\
          </div>\
        </div>\
        '
        );
      } else if (distance_keys[index] == "13") {
        // درزگیری
        $(".card-right-data").append(
          '\
          <div class="col-sm-12 distance-children">\
            <div class="row">\
              <div class="col-sm-12">\
                <p>' +
          returnProjectOperationTitle(distance_keys[index]) +
          '</p>\
              </div>\
              <div class="col-sm-6">\
                <div class="form-group">\
                  <label>\
                    کیلومتر\
                  </label>\
                  <input\
                    type="text"\
                    class="form-control"\
                    name="edit-progress' +
          distance_keys[index] +
          '-km"\
                  />\
                </div>\
              </div>\
            </div>\
          </div>\
          '
        );
      } else {
        $(".card-right-data").append(
          '\
        <div class="col-sm-12 distance-children">\
          <div class="row">\
            <div class="col-sm-12">\
              <p>' +
          returnProjectOperationTitle(distance_keys[index]) +
          '</p>\
            </div>\
            <div class="col-sm-6">\
              <div class="form-group">\
                <label>\
                  کیلومتر\
                </label>\
                <input\
                  type="text"\
                  class="form-control"\
                  name="edit-progress' +
          distance_keys[index] +
          '-km"\
                />\
              </div>\
            </div>\
            <div class="col-sm-6">\
              <div class="form-group">\
                <label>\
                  تناژ\
                </label>\
                <input\
                  type="text"\
                  class="form-control"\
                  name="edit-progress' +
          distance_keys[index] +
          '-ton"\
                />\
              </div>\
            </div>\
          </div>\
        </div>\
        '
        );
      }
    }
  }

  if (data.start_latlng != null) {
    $("#abrar-edit-card input[name=abrar-project-latlng-start]").val(
      parseFloat(data.start_latlng[0]).toFixed(10) +
      parseFloat(data.start_latlng[1]).toFixed(10)
    );
  }

  if (data.end_latlng != null) {
    $("#abrar-edit-card input[name=abrar-project-latlng-end]").val(
      parseFloat(data.end_latlng[0]).toFixed(10) +
      parseFloat(data.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-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 checkDataValidation() {
  let isDataValid = true;

  if ($(".error-messages").length) {
    $(".error-messages").remove();
  }

  if (
    (value =
      $("#abrar-edit-card input[name='edit-contractor-demands']").val() != "")
  ) {
    projectEditData["contractor-demands"] = value;
  } else {
    isDataValid = false;
    $(".card-right-data").append(
      '\
    <div class="col-sm-12">\
      <div class="alert alert-danger error-messages">\
        <span>مطالبات پیمانکار مشخص نشده است.</span><br />\
      </div>\
    </div>\
    '
    );
  }

  if ((value = $("#abrar-edit-card input[name='edit-progress']").val() != "")) {
    projectEditData["progress"] = value;
  } else {
    isDataValid = false;
    if ($(".error-messages").length) {
      $(".error-messages").append(
        "\
          <span>درصد پیشرفت فیزیکی قرارداد مشخص نشده است.</span><br />\
      "
      );
    } else {
      $(".card-right-data").append(
        '\
      <div class="col-sm-12">\
        <div class="alert alert-danger error-messages">\
        <span>درصد پیشرفت فیزیکی قرارداد مشخص نشده است.</span><br />\
        </div>\
      </div>\
      '
      );
    }
  }
  let projectDistanceKeys = Object.keys(editProjectDistance);
  // for (let index = 0; index < $(".distance-children").length; index++) {
  $(".distance-children").each(function (index, element) {
    let distanceKmInput = $(
      "input[name='edit-progress" + projectDistanceKeys[index] + "-km']"
    ).val();
    // console.log($(element).find("p").text());

    if (distanceKmInput == "") {
      isDataValid = false;
      if ($(".error-messages").length) {
        $(".error-messages").append(
          "\
            <span>مقدار کیلومتر در " +
          $(element).find("p").text() +
          " نمی تواند خالی باشد.</span><br />\
        "
        );
      } else {
        $(".card-right-data").append(
          '\
        <div class="col-sm-12">\
          <div class="alert alert-danger error-messages">\
          <span>مقدار کیلومتر در ' +
          $(element).find("p").text() +
          " نمی تواند خالی باشد.</span><br />\
          </div>\
        </div>\
        "
        );
      }
    } else if (
      parseInt(distanceKmInput) >
      parseInt(editProjectDistance[projectDistanceKeys[index]])
    ) {
      isDataValid = false;
      if ($(".error-messages").length) {
        $(".error-messages").append(
          "\
            <span>مقدار کیلومتر وارد شده در " +
          $(element).find("p").text() +
          " (" +
          distanceKmInput +
          ") از مقدار مجاز (" +
          editProjectDistance[projectDistanceKeys[index]] +
          ") بیشتر است.</span><br />\
        "
        );
      } else {
        $(".card-right-data").append(
          '\
        <div class="col-sm-12">\
          <div class="alert alert-danger error-messages">\
          <span>مقدار کیلومتر وارد شده در ' +
          $(element).find("p").text() +
          " (" +
          distanceKmInput +
          ") از مقدار مجاز (" +
          editProjectDistance[projectDistanceKeys[index]] +
          ") بیشتر است.</span><br />\
          </div>\
        </div>\
        "
        );
      }
    } else {
      project_distance_edit[projectDistanceKeys[index]] = distanceKmInput;
    }
  });

  if (!checkStartMarkerValidation(true)) {
    isDataValid = false;
    if ($(".error-messages").length) {
      $(".error-messages").append(
        "\
      <span>موقعیت جغرافیایی مبدا مشخص نشده است.</span><br />\
      "
      );
    } else {
      $(".card-right-data").append(
        '\
      <div class="col-sm-12">\
        <div class="alert alert-danger error-messages">\
          <span>موقعیت جغرافیایی مبدا مشخص نشده است.</span><br />\
        </div>\
      </div>\
      '
      );
    }
  }

  if (!checkEndMarkerValidation(true)) {
    isDataValid = false;
    if ($(".error-messages").length) {
      $(".error-messages").append(
        "\
        <span>موقعیت جغرافیایی مقصد مشخص نشده است.</span><br />\
      "
      );
    } else {
      $(".card-right-data").append(
        '\
      <div class="col-sm-12">\
        <div class="alert alert-danger error-messages">\
          <span>موقعیت جغرافیایی مقصد مشخص نشده است.</span><br />\
        </div>\
      </div>\
      '
      );
    }
  }

  return isDataValid;
}

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

    formData = new FormData();

    formData.append("start-latlng", projectEditData["project-start-latlng"]);
    formData.append("end-latlng", projectEditData["project-end-latlng"]);

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

    formData.append(
      "project-description",
      $("textarea[name='edit-project-description']").val()
    );

    $.ajax({
      url: "/road-maintenance-project/" + projectEditId + "/edit",
      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);
        alert("اطلاعات با موفقیت ویرایش گردید.");
        setTimeout(() => {
          hideLoaderScreen();
          window.open("", "_self");
        }, 200);
      },
      error: function (error) {
        console.log(error);
        hideLoaderScreen();
        alert("خطا در ثبت اطلاعات. مجدد تلاش کنید");
      },
    });
  }
}

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: 0.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: 0.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);
  }
}

function getProjects() {
  let reqUrl = "/road-maintenance-project/getlist";
  showLoaderScreen();
  $.ajax({
    url: reqUrl,
    type: "GET",
    success: function (result) {
      hideLoaderScreen();
      console.log(result);
      showTableData(result.data);
    },
    error: function (error) {
      hideLoaderScreen();
      //console.log(error);
      $("table.projects tbody").empty();
      $("table.projects tbody").append(
        "<tr><td colspan='9' style='text-align:center;'><br><p>خطا در دریافت اطلاعات...<p>\
        <button class='btn btn-primary' onclick='getProjects()'>تلاش مجدد</button></td></tr>"
      );
    },
  });
}

function showTableData(data) {
  $("table.projects tbody").empty();

  if (data.length == 0) {
    $("table.projects tbody").append(
      "<tr><td colspan='9' style='text-align:center;'><br><p style='font-size: 18px;'><b>رکوردی وجود ندارد!</b></p>\
      <img src='../dist/images/under-construction.png' alt=''></td></tr>"
    );
  }
  for (let index = 0; index < data.length; index++) {
    $("table.projects tbody").append(
      "\
    <tr>\
      <td>" +
      data[index].axis_name +
      "</td>\
      <td>" +
      returnAxisTypeText(data[index].axis_type) +
      "</td>\
      <td>" +
      data[index].project_name +
      "</td>\
      <td>" +
      data[index].city_name +
      "</td>\
      <td>" +
      data[index].contractor_name +
      "</td>\
      <td class='text-center'>" +
      data[index].contract_date +
      "</td>\
      <td class='text-center'>" +
      data[index].contract_credit +
      "</td>\
      <td class='project-actions text-center'>\
        <button\
        onclick='editButton(" +
      data[index].id +
      ")'\
          class='btn btn-info btn-sm'\
        >\
          <i class='fas fa-pencil-alt'></i>\
          ویرایش\
        </button>\
      </td>\
    </tr>\
    "
    );
  }
}

function returnAxisTypeText(axisType) {
  switch (axisType) {
    case 1:
      return "شریانی";
    case 2:
      return "اصلی";
    case 3:
      return "فرعی";
    case 4:
      return "روستایی";
    default:
      return "-";
  }
}

// function returnProjectDistances(distances) {
//   let distanceRow = "";
//   let keys = Object.keys(distances);
//   for (let index = 0; index < keys.length; index++) {
//     distanceRow +=
//       returnProjectOperationTitle(keys[index]) +
//       ": " +
//       distances[keys[index]] +
//       " کیلومتر <br>";
//   }
//   return distanceRow;
// }

function returnProjectOperationTitle(key) {
  switch (key) {
    case "1":
      return "روکش آسفالت";
    case "2":
      return "ماسه آسفالت و رگلاژی";
    case "3":
      return "بازیافت سرد و گرم";
    case "4":
      return "میکروسرفیسینگ";
    case "5":
      return "چیپ سیل";
    case "6":
      return "اسلاری سیل";
    case "7":
      return "اسکراب سیل";
    case "8":
      return "فوگ سیل";
    case "9":
      return "سیل کت";
    case "10":
      return "کیپ سیل";
    case "11":
      return "آسفالت سرد/ردمیکس";
    case "12":
      return "لکه گیری";
    case "13":
      return "درزگیری";
  }
}

function onCloseModal() {
  $("#add-next-step").text("مرحله بعد");
  $("#add-prev-step").text("انصراف");
  $(".second-round").hide("slow");
  $(".first-round").show("slow");
  $(".error-message").hide("slow");
}

$("#add-project-button").on("click", function () {
  // Make sure first round is shown
  $(".first-round").show("slow");
  $(".second-round").hide("slow");
  // Show Modal
  $("#add-project-modal").modal({ backdrop: "static", keyboard: false });
  $("#add-project-modal").modal("show");

  // Initialize DatePicker
  contractDatePicker = $("input[name=contract-date]").persianDatepicker({
    format: "YYYY/MM/DD",
    initialValue: false,
    autoClose: true,
  });

  // Fill in the province select
  $("#province-id").empty();
  $("#province-id").append('<option value="0">انتخاب اداره کل</option>');

  for (let index = 0; index < provinces.length; index++) {
    $("#province-id").append(
      "\
      <option value=" +
      provinces[index].id +
      ">" +
      provinces[index].name_fa +
      "</option>\
    "
    );
  }
});

// Show towns of a province
$("#province-id").change(function () {
  if ((value = $(this).val())) {
    getTowns(value);
  }
});

function setTownSelect() {
  $("#town-id").empty();
  $("#town-id").append('<option value="0">انتخاب شهرستان</option>');

  for (let index = 0; index < towns.length; index++) {
    $("#town-id").append(
      "\
      <option value=" +
      towns[index].id +
      ">" +
      towns[index].name_fa +
      "</option>\
    "
    );
  }
}

$("#add-next-step").on("click", function () {
  if ($(".second-round").css("display") == "none") {
    // We are in first round. Go to second one!
    // let isValidate = validateFirstRound();
    // if (isValidate) {
    saveFirstRound();
    $(this).text("ثبت پروژه");
    $("#add-prev-step").text("مرحله قبل");
    $(".first-round").hide("slow");
    $(".second-round").show("slow");
    // } else {
    //   $(".error-box").show("slow");
    // }
  } else {
    // We are in second round. Validate & submit project.
    saveSecondRound();
    submitData();
  }
});

$("#add-prev-step").on("click", function () {
  if ($(".second-round").css("display") == "none") {
    // We are in first round. Dismiss the modal!
    $("#add-project-modal").modal("hide");
  } else {
    // We are in second round. Go back to first round.
    onCloseModal();
  }
});

function validateFirstRound() {
  let axisNameInput = $('input[name="axis-name"]').val();
  let projectTitleInput = $('input[name="project-title"]').val();
  let contractorInput = $('input[name="contractor"]').val();
  let contractPriceInput = $('input[name="project-price"]').val();
  let axisTypeInput = $('select[name="axis-type"]')
    .children("option:selected")
    .val();
  let provinceInput = $('select[name="province"]')
    .children("option:selected")
    .val();
  let townInput = $('select[name="town"]').children("option:selected").val();
  let contractDateInput = $('input[name="contract-date"]').val();

  // console.log(axisNameInput);
  // console.log(projectTitleInput);
  // console.log(contractorInput);
  // console.log(contractPriceInput);
  // console.log(axisTypeInput);
  // console.log(townInput);
  // console.log(contractDateInput);

  hasError = false;

  if (axisNameInput != "") {
    axisName = axisNameInput;
  } else {
    hasError = true;
  }
  if (projectTitleInput != "") {
    projectTitle = projectTitleInput;
  } else {
    hasError = true;
  }
  if (contractorInput != "") {
    contractor = contractorInput;
  } else {
    hasError = true;
  }
  if (contractPriceInput != "") {
    contractPrice = contractPriceInput;
  } else {
    hasError = true;
  }
  if (axisTypeInput != "") {
    axisType = axisTypeInput;
  } else {
    hasError = true;
  }
  if (provinceInput != "") {
    province = provinceInput;
  } else {
    hasError = true;
  }
  if (townInput != "") {
    town = townInput;
  } else {
    hasError = true;
  }
  if (contractDateInput != "") {
    contractDate = contractDatePicker.getState().selected;
  } else {
    hasError = true;
  }

  if (!hasError) {
    $(".error-message").hide("slow");
    return true;
  } else {
    $(".error-message").show("slow");
    return false;
  }
}

function getProvinces() {
  let reqUrl = "/contents/provinces";
  showLoaderScreen();
  $.ajax({
    url: reqUrl,
    type: "GET",
    success: function (result) {
      hideLoaderScreen();
      //console.log(result);
      provinces = result.data;
    },
    error: function (error) {
      hideLoaderScreen();
      //console.log(error);
    },
  });
}

function getTowns(id) {
  let reqUrl = "/contents/provinces/" + id;
  showLoaderScreen();
  $.ajax({
    url: reqUrl,
    type: "GET",
    success: function (result) {
      hideLoaderScreen();
      //console.log(result);
      towns = result.data;
      setTownSelect();
    },
    error: function (error) {
      hideLoaderScreen();
      //console.log(error);
    },
  });
}

function saveFirstRound() {
  let axisNameInput = $('input[name="axis-name"]').val();
  let projectTitleInput = $('input[name="project-title"]').val();
  let contractorInput = $('input[name="contractor"]').val();
  let contractPriceInput = $('input[name="project-price"]').val();
  let axisTypeInput = $('select[name="axis-type"]')
    .children("option:selected")
    .val();
  let provinceInput = $('select[name="province"]')
    .children("option:selected")
    .val();
  let townInput = $('select[name="town"]').children("option:selected").val();
  let contractDateInput = $('input[name="contract-date"]').val();

  if (axisNameInput != "") {
    axisName = axisNameInput;
  } else {
    axisName = null;
  }
  if (projectTitleInput != "") {
    projectTitle = projectTitleInput;
  } else {
    projectTitle = null;
  }
  if (contractorInput != "") {
    contractor = contractorInput;
  } else {
    contractor = null;
  }
  if (contractPriceInput != "") {
    contractPrice = contractPriceInput;
  } else {
    contractPrice = null;
  }
  if (axisTypeInput != "0") {
    axisType = axisTypeInput;
  } else {
    axisType = null;
  }
  if (provinceInput != "0") {
    province = provinceInput;
  } else {
    province = null;
  }
  if (townInput != "0") {
    town = townInput;
  } else {
    town = null;
  }
  if (contractDateInput != "") {
    contractDate = contractDatePicker.getState().selected;
  } else {
    contractDate = null;
  }
}

function saveSecondRound() {
  for (
    let index = 1;
    index <= $('.second-round input[type="checkbox"]').length;
    index++
  ) {
    if ($("#project-distance-" + index).is(":checked")) {
      projectDistance[index] = $("#project-distance-input-" + index).val();
    }
  }
  // console.log(projectDistance);
}

function submitData() {
  let reqUrl = "/road-maintenance-project";

  formData = new FormData();

  if (axisName != null && axisName != undefined) {
    formData.append("axis-name", axisName);
  }
  if (axisType != null && axisType != undefined) {
    formData.append("axis-type", axisType);
  }
  if (projectTitle != null && projectTitle != undefined) {
    formData.append("project-name", projectTitle);
  }
  if (province != null && province != undefined) {
    formData.append("province-id", province);
  }
  if (town != null && town != undefined) {
    formData.append("city-id", town);
  }
  if (contractor != null && contractor != undefined) {
    formData.append("contractor-name", contractor);
  }
  if (projectDistance != null && projectDistance != undefined) {
    let projectDistanceJson = JSON.stringify(projectDistance);
    if (projectDistanceJson.length > 2) {
      formData.append("project-distance", projectDistanceJson);
    }
  }
  if (contractDate != null && contractDate != undefined) {
    formData.append("contract-date", contractDate.dateObject.State.unixtime);
  }
  if (contractPrice != null && contractPrice != undefined) {
    formData.append("contract-credit", contractPrice);
  }

  showLoaderScreen();

  $.ajax({
    url: reqUrl,
    type: "POST",
    data: formData,
    headers: {
      "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
    },
    cache: false,
    contentType: false,
    processData: false,
    success: function (result) {
      hideLoaderScreen();
      //console.log(result);
      alert("پروژه با موفقیت ثبت گردید!");
      window.open("/road-maintenance-project/create", "_self");
    },
    error: function (error) {
      hideLoaderScreen();
      console.log(error);
      alert("خطا در ثبت اطلاعات پروژه");
    },
  });
}

$(document).ready(function () {
  getProjects();
  getProvinces();

  for (
    let index = 1;
    index <= $('.second-round input[type="checkbox"]').length;
    index++
  ) {
    $('.second-round input[name="distance-' + index + '"]').change(function () {
      if (this.checked) {
        $("#project-distance-input-" + index).prop("disabled", false);
      } else {
        $("#project-distance-input-" + index).prop("disabled", true);
      }
    });
  }
});