//default variables
DEFAULT_ACTION_ID = 1;
DEFALUT_YEAR = moment().format('jYYYY');
DEFAULT_TIMER = 300;
DEFAULT_URL = "/";
DEFAULT_API = "api/bi/";
DEFAULT_WEB = "bi/";

MAP_ENDPOINT = "https://rmsmap.rmto.ir";
MAP_MIN_ZOOM = 5;
MAP_MAX_ZOOM = 10;

RAHDARI_PROJECTS_ID = 1;
RAHDARI_CURRENT_ACTIVITYS_ID = 2;
RAHDARI_MISSIONS_ID = 3;
HANDLED_COMPLAINTS_ID = 4;
DANGER_POINTS_ID = 5;
ACCIDENT_POINTS_ID = 6;
DAMAGE_AXES_ID = 7;

//charts variables
var StatusChart = null;
var StatusChartPrint = null;
var charts = {
  action1Chart1: null,
  action1Chart2: null,
  action1Chart3: null,
  action1Chart4: null,
  action2Chart1: null,
  action2Chart2: null,
  action4Chart1: null,
  action4Chart2: null,
  action5Chart1: null,
  action5Chart2: null,
  action7Chart1: null,
  action7Chart2: null,
  action1Chart1Print: null,
  action1Chart2Print: null,
  action1Chart3Print: null,
  action1Chart4Print: null,
  action2Chart1Print: null,
  action2Chart2Print: null,
  action4Chart1Print: null,
  action4Chart2Print: null,
  action5Chart1Print: null,
  action5Chart2Print: null,
  action7Chart1Print: null,
  action7Chart2Print: null,
};

//current variables
var currentActionId;
var currentRoadInfrastructureDetails;
var currentTimer;
var currentDate = {};

//current filter variables
var currentFilterProvince;
var currentFilterCity;
var currentFilterYear;
var currentFilterMonth;
var currentFilterFromDate;
var currentFilterToDate;
var currentFilterQuery;
var currentFilterRahdariActivity;
var currentFilterRoadInfrastructure;

//variables
var timer;
var dateFrom;
var dateTo;
var provinces;
var cities;
var loadChart = [];
var loadProgressBar = [];
var disabledButtonMap = {};

var MapBi;
var bounds = [
  [42.9130026312, 75.6166317076],
  [20.5782370061, 30.5092252948],
];
var showbounds = [32.4279, 53.688];
var pahneArray = [];
var iranGeoJSON = JSON.parse(PROVICES_GEOJSON);
var iranMapGeo;
var iranArrayCount = 0;
var iranCityCount = 0;
var keepMapFeatureColor = null;
var fullCityGeoJSONTemp = new Object();
var fullCityGeoJSON = JSON.parse(CITIES_GEOJSON);
var iranCityMapGeo;
var iranAllCityMapGeo;
var flagProvince = 0;
var eachfeature = [];
var diagramData = [];
var choosenProvince;
var cityArray = [];
var currentChoosenCity = -1;
var currentTarget = new Object();
var currentCityDiagram = new Object();
var curentCityArray = [];
var curentValueCity = [];
var AllCityDiagram = new Object();
var AllcityArray = [];
var AllValueCity = [];
var curentValueAllCity = [];
var allCityGeoTemp = new Object();
var allCityCount = 0;
var allCityFlag = 0;
var CityArraySelected = [];
var AllCityArrayPopUp = [];
let popup = L.popup();

$(document).ready(function () {
  timer = setInterval(function () {}, currentTimer * 1000);
  initPage();
});

async function initPage() {
  await showLoader(false);

  $("#filter-year").append(`<option value="0">تمامی سال ها</option>`);

  for (let index = +DEFALUT_YEAR ; index >= 1393; index--) {
    $("#filter-year").append(`<option value="${index}">${index}</option>`);
  }

  //init filter provinces
  let isSuccessProvinceAjax = false;
  $.ajax({
    url: DEFAULT_URL + "public/contents/provinces",
    method: "GET",
    async: false,
    success: function ({ data }) {
      provinces = data;
      data.map((element) => {
        $('select[name="filter-province"]').append(
          `<option value="${element.id}">${element.name_fa}</option>`
        );
      });
      isSuccessProvinceAjax = true;
    },
    error: function () {
      Swal.fire({
        icon: "error",
        title: "خطا سرور",
        text: "مشکل در دریافت اطلاعات استان",
        confirmButtonText: "بارگذاری مجدد",
      }).then((result) => {
        if (result.isConfirmed) {
          location.reload(true);
          return true;
        }
      });
    },
  });
  if (!isSuccessProvinceAjax) return false;

  //init filter rahradi activity items
  isSuccessRahdariActivityAjax = false;
  $.ajax({
    url: DEFAULT_URL + DEFAULT_API + "rahdari-activity",
    method: "GET",
    async: false,
    success: function ({ data }) {
      data.map((element) => {
        $('select[name="rahradi-activity-items"]').append(
          `<option value="${element.id}">${element.item_str}</option>`
        );
      });
      currentFilterRahdariActivity = $(
        'select[name="rahradi-activity-items"]'
      ).val();
      isSuccessRahdariActivityAjax = true;
    },
    error: function () {
      Swal.fire({
        icon: "error",
        title: "خطا سرور",
        text: "مشکل در دریافت اطلاعات ریزآیتم های فعالیت جاری",
        confirmButtonText: "بارگذاری مجدد",
      }).then((result) => {
        if (result.isConfirmed) {
          location.reload(true);
          return true;
        }
      });
    },
  });
  if (!isSuccessRahdariActivityAjax) return false;

  //init filter year
  $('select[name="filter-year"]').val(DEFALUT_YEAR);

  // init datapickers
  dateFrom = $("input[name=filter-date-from]").persianDatepicker({
    format: "YYYY/MM/DD",
    initialValue: false,
    autoClose: true,
    initialValueType: "persian",
    toolbox: {
      calendarSwitch: {
        enabled: false,
      },
    },
    onSelect: function (unix) {
      dateFrom.touched = true;
      if (
        dateFrom.getState().selected.unixDate >=
        dateTo.getState().selected.unixDate
      ) {
        dateTo.setDate(dateFrom.getState().selected.unixDate);
      }

      if (dateTo && dateTo.options && dateTo.options.minDate != unix) {
        let cachedValue = dateTo.getState().selected.unixDate;

        dateTo.options = {
          minDate: unix,
        };

        if (dateTo.touched) {
          dateTo.setDate(cachedValue);
        }
      }
      hasChangeFilter();
    },
  });

  dateTo = $("input[name=filter-date-to]").persianDatepicker({
    format: "YYYY/MM/DD",
    initialValue: false,
    autoClose: true,
    initialValueType: "persian",
    toolbox: {
      calendarSwitch: {
        enabled: false,
      },
    },
    onSelect: function (unix) {
      hasChangeFilter();
    },
  });

  Chart.defaults.font.family = "IRANSansFaNum";
  Chart.register(ChartDataLabels);
  MapBi = L.map("map", {
    maxBounds: bounds,
    minZoom: MAP_MIN_ZOOM,
    zoomControl: false,
  }).setView(showbounds, 5);
  L.tileLayer(MAP_ENDPOINT + "/141map/{z}/{x}/{y}.png", {}).addTo(MapBi);

  // custom zoom bar control that includes a Zoom Home function
  L.Control.mapButtons = L.Control.extend({
    options: {
      position: "topright",
      zoomInText: "+",
      zoomInTitle: "بزرگنمایی",
      zoomOutText: "-",
      zoomOutTitle: "کوچکنمایی",
      homeText: '<i class="fa fa-home" style="line-height:1.65;"></i>',
      homeTitle: "پیشفرض",
      backText: '<i class="fa fa-arrow-left" style="line-height:1.65;"></i>',
      backTitle: "بازگشت",
      cityText: '<i class="fa fa-sign" style="line-height:1.65;"></i>',
      cityTitle: "شهرستان ها",
    },

    onAdd: function (map) {
      var controlName = "gin-control-zoom",
        container = L.DomUtil.create("div", controlName + " leaflet-bar"),
        options = this.options;

      this._zoomInButton = this._createButton(
        options.zoomInText,
        options.zoomInTitle,
        controlName + "-in",
        container,
        this._zoomIn
      );
      this._zoomOutButton = this._createButton(
        options.zoomOutText,
        options.zoomOutTitle,
        controlName + "-out",
        container,
        this._zoomOut
      );
      this._homeButton = this._createButton(
        options.homeText,
        options.homeTitle,
        controlName + "-home",
        container,
        this._home
      );
      this._backButton = this._createButton(
        options.backText,
        options.backTitle,
        controlName + "-back",
        container,
        this._back
      );
      this._cityButton = this._createButton(
        options.cityText,
        options.cityTitle,
        controlName + "-city",
        container,
        this._city
      );

      this._updateDisabled();
      map.on("zoomend zoomlevelschange", this._updateDisabled, this);

      return container;
    },

    onRemove: function (map) {
      map.off("zoomend zoomlevelschange", this._updateDisabled, this);
    },

    _zoomIn: function (e) {
      this._map.zoomIn(e.shiftKey ? 3 : 1);
    },

    _zoomOut: function (e) {
      this._map.zoomOut(e.shiftKey ? 3 : 1);
    },

    _home: function (e) {
      returnToHomeOnMap();
    },

    _back: function (e) {
      returnToProvinceOnMap();
    },

    _city: function (e) {
      if (disabledButtonMap.city) return false;

      allCityFlag = 1;
      currentFilterProvince = 0;

      lifeCycle({
        sync: false,
      });
    },

    _createButton: function (html, title, className, container, fn) {
      var link = L.DomUtil.create("a", className, container);
      link.innerHTML = html;
      link.href = "#";
      link.title = title;

      L.DomEvent.on(link, "mousedown dblclick", L.DomEvent.stopPropagation)
        .on(link, "click", L.DomEvent.stop)
        .on(link, "click", fn, this)
        .on(link, "click", this._refocusOnMap, this);

      return link;
    },

    _updateDisabled: function () {
      var map = this._map,
        className = "leaflet-disabled";

      L.DomUtil.removeClass(this._zoomInButton, className);
      L.DomUtil.removeClass(this._zoomOutButton, className);

      if (map._zoom === map.getMinZoom()) {
        L.DomUtil.addClass(this._zoomOutButton, className);
      }
      if (map._zoom === map.getMaxZoom()) {
        L.DomUtil.addClass(this._zoomInButton, className);
      }
    },
  });
  // add the new control to the map
  var mapButtons = new L.Control.mapButtons();
  mapButtons.addTo(MapBi);

  defaultPage();
}

function defaultPage() {
  //update current variables
  currentActionId = DEFAULT_ACTION_ID;
  currentRoadInfrastructureDetails = $(
    'select[name="road-infrastructure-details"]'
  ).val();

  //clear buttonActions
  $(".btn-action-box").removeClass("active");

  //update this button
  $('.btn-action-box[data-action-id="' + currentActionId + '"]').addClass(
    "active"
  );

  //check disabled filter
  if (
    $.inArray(
      currentActionId,
      $('select[name="filter-province"]').data("disable")
    ) != -1
  )
    $('select[name="filter-province"]').val(0).attr("disabled", "disabled");
  else $('select[name="filter-province"]').removeAttr("disabled");

  if (
    $.inArray(
      currentActionId,
      $('select[name="filter-city"]').data("disable")
    ) != -1
  )
    $('select[name="filter-city"]').val(0).attr("disabled", "disabled");
  else $('select[name="filter-city"]').removeAttr("disabled");

  if (
    $.inArray(
      currentActionId,
      $('select[name="filter-year"]').data("disable")
    ) != -1
  ) {
    $('select[name="filter-year"]').attr("disabled", "disabled");
    $('.btn-action-box[data-reset-year="true"]').data(
      "defaultYear",
      DEFALUT_YEAR
    );
  } else $('select[name="filter-year"]').removeAttr("disabled");

  if (
    $.inArray(
      currentActionId,
      $('select[name="filter-month"]').data("disable")
    ) != -1
  )
    $('select[name="filter-month"]').val(0).attr("disabled", "disabled");
  else $('select[name="filter-month"]').removeAttr("disabled");

  if (
    $.inArray(
      currentActionId,
      $('input[name="filter-date-from"]').data("disable")
    ) != -1
  )
    $('input[name="filter-date-from"]').val("").attr("disabled", "disabled");
  else $('input[name="filter-date-from"]').removeAttr("disabled");

  if (
    $.inArray(
      currentActionId,
      $('input[name="filter-date-to"]').data("disable")
    ) != -1
  )
    $('input[name="filter-date-to"]').val("").attr("disabled", "disabled");
  else $('input[name="filter-date-to"]').removeAttr("disabled");

  //update current filter variables
  currentFilterProvince = $('select[name="filter-province"]').val();
  currentFilterCity = $('select[name="filter-city"]').val();
  currentFilterYear = $('select[name="filter-year"]').val();
  currentFilterMonth = $('select[name="filter-month"]').val();
  currentFilterFromDate = $('input[name="filter-date-from"]').val();
  currentFilterToDate = $('input[name="filter-date-to"]').val();
  currentFilterRoadInfrastructure = $(
    'select[name="road-infrastructure-details"]'
  ).val();

  //create map

  //create chart daily status
  $("#StatusChart").attr(
    "width",
    $("#StatusChart").closest(".canvas-box").width()
  );
  $("#StatusChart").attr("height", 1200);
  var StatusContent = document.getElementById("StatusChart").getContext("2d");
  StatusChart = new Chart(StatusContent, {
    type: "bar",
    data: {
      labels: [],
      datasets: [
        {
          data: [],
          backgroundColor: [],
          label: "",
          datalabels: {
            anchor: "end",
            align: "end",
          },
        },
      ],
    },
    options: {
      indexAxis: "y",
      plugins: {
        legend: {
          display: false,
        },
        datalabels: {
          anchor: "start",
          align: function (context) {
            if (context.dataset.data[context.dataIndex] == 0) {
              return "center";
            }
            return "end";
          },
          color: function (context) {
            if (context.dataset.data[context.dataIndex] == 0) {
              return "#000";
            }
            return "#fff";
          },
          backgroundColor: function (context) {
            if (context.dataset.data[context.dataIndex] == 0) {
              return null;
            }
            return context.dataset.backgroundColor[context.dataIndex];
          },
          textAlign: "center",
        },
      },
      scales: {
        y: {
          ticks: {
            font: {
              size: 11,
            },
          },
        },
      },
    },
  });

  $("#StatusChartPrint").attr("width", 1000);
  $("#StatusChartPrint").attr("height", 700);
  var StatusPrintContent = document
    .getElementById("StatusChartPrint")
    .getContext("2d");
  StatusChartPrint = new Chart(StatusPrintContent, {
    type: "bar",
    data: {
      labels: [],
      datasets: [
        {
          data: [],
          backgroundColor: [],
          label: "",
          datalabels: {
            anchor: "end",
            align: "end",
          },
        },
      ],
    },
    options: {
      layout: {
        padding: {
          left: 10,
          right: 10,
          top: 5,
          bottom: 10,
        },
      },
      indexAxis: "x",
      plugins: {
        title: {
          display: true,
          padding: 15,
          position: "top",
          align: "center",
          font: {
            size: 20,
            weight: "bold",
          },
        },
        subtitle: {
          display: true,
          padding: 15,
          position: "top",
          align: "center",
          font: {
            size: 24,
            weight: "bold",
          },
        },
        legend: {
          display: false,
        },
        datalabels: {
          rotation: -90,
          font: {
            size: 18,
          },
          anchor: "start",
          align: function (context) {
            if (context.dataset.data[context.dataIndex] == 0) {
              return "center";
            }
            return "end";
          },
          color: function (context) {
            if (context.dataset.data[context.dataIndex] == 0) {
              return "#000";
            }
            return "#fff";
          },
          backgroundColor: function (context) {
            if (context.dataset.data[context.dataIndex] == 0) {
              return null;
            }
            return context.dataset.backgroundColor[context.dataIndex];
          },
          textAlign: "center",
        },
      },
      scales: {
        x: {
          ticks: {
            font: {
              size: 20,
            },
          },
        },
      },
    },
  });

  //clear charts box
  $(".charts-box").attr("aria-display", "hide");

  //show current charts box
  $('.charts-box[data-action-id="' + currentActionId + '"]').attr(
    "aria-display",
    "show"
  );

  $('.charts-box[data-action-id="' + currentActionId + '"] .chart-box').each(
    function () {
      var chartType = $(this).find(".canvas-container").data("chartType");
      var actionId = $(this).find(".canvas-container").attr("id");
      var datasetCount = $(this)
        .find(".canvas-container")
        .data("chartDatasetCount");
      var chartLegend = $(this).find(".canvas-container").data("chartLegend");
      // create charts
      if (charts[String(actionId)] == null && chartType == "bar") {
        $("#" + actionId).attr(
          "width",
          $("#" + actionId)
            .closest(".canvas-box")
            .width()
        );
        $("#" + actionId).attr(
          "height",
          $("#" + actionId)
            .closest(".canvas-box")
            .height()
        );

        var datasets = [];
        for (let i = 0; i < datasetCount; i++) {
          datasets[i] = {
            data: [],
            backgroundColor: [],
            label: "",
          };
        }

        var defaultData = {
          labels: [],
          datasets: datasets,
        };

        //for print
        var contentPrint = document
          .getElementById(actionId + "Print")
          .getContext("2d");
        charts[String(actionId) + "Print"] = new Chart(contentPrint, {
          type: chartType,
          data: defaultData,
          options: {
            layout: {
              padding: {
                left: 10,
                right: 10,
                top: 5,
                bottom: 10,
              },
            },
            scales: {
              x: {
                ticks: {
                  font: {
                    size: 20,
                  },
                },
              },
            },
            plugins: {
              title: {
                display: true,
                padding: 15,
                position: "top",
                align: "center",
                font: {
                  size: 20,
                  weight: "bold",
                },
              },
              subtitle: {
                display: true,
                padding: 15,
                position: "top",
                align: "center",
                font: {
                  size: 24,
                  weight: "bold",
                },
              },
              legend: {
                display: chartLegend,
                labels: {
                  font: {
                    size: 16,
                  },
                },
              },
              datalabels: {
                font: {
                  size: 18,
                },
                anchor: "start",
                align: function (context) {
                  if (context.dataset.data[context.dataIndex] == 0) {
                    return "center";
                  }
                  return "end";
                },
                color: function (context) {
                  if (context.dataset.data[context.dataIndex] == 0) {
                    return "#000";
                  }
                  return "#fff";
                },
                backgroundColor: function (context) {
                  if (context.dataset.data[context.dataIndex] == 0) {
                    return null;
                  }
                  if (typeof context.dataset.backgroundColor == "string") {
                    return context.dataset.backgroundColor;
                  }
                  return context.dataset.backgroundColor[context.dataIndex];
                },
                textAlign: "center",
              },
            },
          },
        });

        var content = document.getElementById(actionId).getContext("2d");
        charts[String(actionId)] = new Chart(content, {
          type: chartType,
          data: defaultData,
          options: {
            layout: {
              padding: {
                left: 10,
                right: 10,
                top: 5,
                bottom: 10,
              },
            },
            scales: {
              x: {
                ticks: {
                  font: {
                    size: 11,
                  },
                },
              },
            },
            plugins: {
              legend: {
                display: chartLegend,
              },
              datalabels: {
                anchor: "start",
                align: function (context) {
                  if (context.dataset.data[context.dataIndex] == 0) {
                    return "center";
                  }
                  return "end";
                },
                color: function (context) {
                  if (context.dataset.data[context.dataIndex] == 0) {
                    return "#000";
                  }
                  return "#fff";
                },
                backgroundColor: function (context) {
                  if (context.dataset.data[context.dataIndex] == 0) {
                    return null;
                  }
                  if (typeof context.dataset.backgroundColor == "string") {
                    return context.dataset.backgroundColor;
                  }
                  return context.dataset.backgroundColor[context.dataIndex];
                },
                textAlign: "center",
              },
            },
          },
        });
      } else if (charts[String(actionId)] == null && chartType == "doughnut") {
        var ratio =
          +$("#" + actionId)
            .closest(".canvas-box")
            .width() /
          $("#" + actionId)
            .closest(".canvas-box")
            .height();

        var content = document.getElementById(actionId).getContext("2d");
        charts[String(actionId)] = new Chart(content, {
          type: chartType,
          data: {},
          options: {
            aspectRatio: ratio,
            layout: {
              padding: {
                left: 10,
                right: 10,
                top: 10,
                bottom: 10,
              },
            },
            plugins: {
              legend: {
                display: true,
                position: "left",
                labels: {
                  font: {
                    size: 11,
                  },
                },
              },
              datalabels: {
                color: "#fff",
                textAlign: "center",
              },
            },
          },
        });

        //for print

        var ratio =
          +$("#" + actionId + "Print")
            .closest(".canvas-box")
            .width() /
          $("#" + actionId + "Print")
            .closest(".canvas-box")
            .height();
        var contentPrint = document
          .getElementById(actionId + "Print")
          .getContext("2d");
        charts[String(actionId) + "Print"] = new Chart(contentPrint, {
          type: chartType,
          data: {},
          options: {
            aspectRatio: ratio,
            layout: {
              padding: {
                left: 10,
                right: 10,
                top: 5,
                bottom: 10,
              },
            },
            plugins: {
              title: {
                display: true,
                padding: 15,
                position: "top",
                align: "center",
                font: {
                  size: 20,
                  weight: "bold",
                },
              },
              subtitle: {
                display: true,
                padding: 15,
                position: "top",
                align: "center",
                font: {
                  size: 24,
                  weight: "bold",
                },
              },
              legend: {
                display: true,
                position: "bottom",
                labels: {
                  padding: 15,
                  font: {
                    size: 16,
                  },
                },
              },
              datalabels: {
                font: {
                  size: 18,
                },
                color: "#fff",
                textAlign: "center",
              },
            },
          },
        });
      } else if (
        charts[String(actionId)] == null &&
        chartType == "progressBar"
      ) {
        $("#" + actionId).css(
          "width",
          $("#" + actionId)
            .closest(".canvas-box")
            .width() + "px"
        );
        $("#" + actionId).css(
          "height",
          $("#" + actionId)
            .closest(".canvas-box")
            .height() + "px"
        );
        var content = document.getElementById(actionId);
        charts[String(actionId)] = new ProgressBar.SemiCircle(content, {
          color: "#343a40",
          strokeWidth: 12,
          trailWidth: 12,
          svgStyle: {
            display: "block",
            width:
              $("#" + actionId)
                .closest(".canvas-box")
                .width() + "px",
            height:
              $("#" + actionId)
                .closest(".canvas-box")
                .height() + "px",
          },
          text: {
            value: "",
          },
          from: {
            color: "#ED1C24",
          },
          to: {
            color: "#39B54A",
          },
          step: function (state, circle, attachment) {
            circle.path.setAttribute("stroke", state.color);
          },
        });

        charts[String(actionId)].text.style.fontFamily = "IRANSansFaNum";
        charts[String(actionId)].text.style.fontSize = "30px";
      }
    }
  );

  //call lifeCycle
  lifeCycle({
    sync: false,
  });
}

$(document).on("click", ".btn-action-box", function () {
  //clear buttonActions
  $(".btn-action-box").removeClass("active");

  //update this button
  $(this).addClass("active");

  //update previous variables
  var previousActionId = currentActionId;

  //update current variables
  currentActionId = $(this).data("actionId");

  //check disabled map button
  if (currentActionId == DANGER_POINTS_ID) {
    $(".gin-control-zoom-city").addClass("leaflet-disabled");
    disabledButtonMap.city = true;
    allCityFlag = 0;
  } else {
    $(".gin-control-zoom-city").removeClass("leaflet-disabled");
    disabledButtonMap.city = false;
  }

  //check disabled filter
  if (
    $.inArray(
      currentActionId,
      $('select[name="filter-province"]').data("disable")
    ) != -1
  ) {
    $('select[name="filter-province"]').val(0).attr("disabled", "disabled");
    currentFilterProvince = $('select[name="filter-province"]').val();
  } else $('select[name="filter-province"]').removeAttr("disabled");

  if (
    $.inArray(
      currentActionId,
      $('select[name="filter-city"]').data("disable")
    ) != -1
  ) {
    $('select[name="filter-city"]').val(0).attr("disabled", "disabled");
    currentFilterCity = $('select[name="filter-city"]').val();
  } else $('select[name="filter-city"]').removeAttr("disabled");

  if (
    $.inArray(
      currentActionId,
      $('select[name="filter-year"]').data("disable")
    ) != -1
  ) {
    $('select[name="filter-year"]').attr("disabled", "disabled");
    $('.btn-action-box[data-reset-year="true"]').data(
      "defaultYear",
      DEFALUT_YEAR
    );
  } else $('select[name="filter-year"]').removeAttr("disabled");

  if (
    $.inArray(
      currentActionId,
      $('select[name="filter-month"]').data("disable")
    ) != -1
  ) {
    $('select[name="filter-month"]').val(0).attr("disabled", "disabled");
    currentFilterMonth = $('select[name="filter-month"]').val();
  } else $('select[name="filter-month"]').removeAttr("disabled");

  if (
    $.inArray(
      currentActionId,
      $('input[name="filter-date-from"]').data("disable")
    ) != -1
  ) {
    $('input[name="filter-date-from"]').val("").attr("disabled", "disabled");
    currentFilterFromDate = $('input[name="filter-date-from"]').val();
  } else $('input[name="filter-date-from"]').removeAttr("disabled");

  if (
    $.inArray(
      currentActionId,
      $('input[name="filter-date-to"]').data("disable")
    ) != -1
  ) {
    $('input[name="filter-date-to"]').val("").attr("disabled", "disabled");
    currentFilterToDate = $('input[name="filter-date-to"]').val();
  } else $('input[name="filter-date-to"]').removeAttr("disabled");

  if (
    $('.btn-action-box[data-action-id="' + previousActionId + '"]').data(
      "resetYear"
    ) == false ||
    $('.btn-action-box[data-action-id="' + currentActionId + '"]').data(
      "resetYear"
    ) == false
  ) {
    $('select[name="filter-year"]').val(
      $('.btn-action-box[data-action-id="' + currentActionId + '"]').data(
        "defaultYear"
      )
    );
    currentFilterYear = $('select[name="filter-year"]').val();
  }

  //clear charts box
  $(".charts-box").attr("aria-display", "hide");

  //show current charts box
  $('.charts-box[data-action-id="' + currentActionId + '"]').attr(
    "aria-display",
    "show"
  );

  // create charts
  $('.charts-box[data-action-id="' + currentActionId + '"] .chart-box').each(
    function () {
      var chartType = $(this).find(".canvas-container").data("chartType");
      var actionId = $(this).find(".canvas-container").attr("id");
      var datasetCount = $(this)
        .find(".canvas-container")
        .data("chartDatasetCount");
      var chartLegend = $(this).find(".canvas-container").data("chartLegend");
      // create charts
      if (charts[String(actionId)] == null && chartType == "bar") {
        $("#" + actionId).attr(
          "width",
          $("#" + actionId)
            .closest(".canvas-box")
            .width()
        );
        $("#" + actionId).attr(
          "height",
          $("#" + actionId)
            .closest(".canvas-box")
            .height()
        );

        var datasets = [];
        for (let i = 0; i < datasetCount; i++) {
          datasets[i] = {
            data: [],
            backgroundColor: [],
            label: "",
          };
        }

        var defaultData = {
          labels: [],
          datasets: datasets,
        };

        //for print

        var contentPrint = document
          .getElementById(actionId + "Print")
          .getContext("2d");
        charts[String(actionId) + "Print"] = new Chart(contentPrint, {
          type: chartType,
          data: defaultData,
          options: {
            layout: {
              padding: {
                left: 10,
                right: 10,
                top: 5,
                bottom: 10,
              },
            },
            scales: {
              x: {
                ticks: {
                  font: {
                    size: 20,
                  },
                },
              },
            },
            plugins: {
              title: {
                display: true,
                padding: 15,
                position: "top",
                align: "center",
                font: {
                  size: 20,
                  weight: "bold",
                },
              },
              subtitle: {
                display: true,
                padding: 15,
                position: "top",
                align: "center",
                font: {
                  size: 24,
                  weight: "bold",
                },
              },
              legend: {
                display: chartLegend,
                labels: {
                  font: {
                    size: 16,
                  },
                },
              },
              datalabels: {
                font: {
                  size: 18,
                },
                anchor: "start",
                align: function (context) {
                  if (context.dataset.data[context.dataIndex] == 0) {
                    return "center";
                  }
                  return "end";
                },
                color: function (context) {
                  if (context.dataset.data[context.dataIndex] == 0) {
                    return "#000";
                  }
                  return "#fff";
                },
                backgroundColor: function (context) {
                  if (context.dataset.data[context.dataIndex] == 0) {
                    return null;
                  }
                  if (typeof context.dataset.backgroundColor == "string") {
                    return context.dataset.backgroundColor;
                  }
                  return context.dataset.backgroundColor[context.dataIndex];
                },
                textAlign: "center",
              },
            },
          },
        });

        var content = document.getElementById(actionId).getContext("2d");
        charts[String(actionId)] = new Chart(content, {
          type: chartType,
          data: defaultData,
          options: {
            layout: {
              padding: {
                left: 10,
                right: 10,
                top: 5,
                bottom: 10,
              },
            },
            scales: {
              x: {
                ticks: {
                  font: {
                    size: 11,
                  },
                },
              },
            },
            plugins: {
              legend: {
                display: chartLegend,
              },
              datalabels: {
                anchor: "start",
                align: function (context) {
                  if (context.dataset.data[context.dataIndex] == 0) {
                    return "center";
                  }
                  return "end";
                },
                color: function (context) {
                  if (context.dataset.data[context.dataIndex] == 0) {
                    return "#000";
                  }
                  return "#fff";
                },
                backgroundColor: function (context) {
                  if (context.dataset.data[context.dataIndex] == 0) {
                    return null;
                  }
                  if (typeof context.dataset.backgroundColor == "string") {
                    return context.dataset.backgroundColor;
                  }
                  return context.dataset.backgroundColor[context.dataIndex];
                },
                textAlign: "center",
              },
            },
          },
        });
      } else if (charts[String(actionId)] == null && chartType == "doughnut") {
        var ratio =
          +$("#" + actionId)
            .closest(".canvas-box")
            .width() /
          $("#" + actionId)
            .closest(".canvas-box")
            .height();

        var content = document.getElementById(actionId).getContext("2d");
        charts[String(actionId)] = new Chart(content, {
          type: chartType,
          data: {},
          options: {
            aspectRatio: ratio,
            layout: {
              padding: {
                left: 10,
                right: 10,
                top: 10,
                bottom: 10,
              },
            },
            plugins: {
              legend: {
                display: true,
                position: "left",
                labels: {
                  font: {
                    size: 11,
                  },
                },
              },
              datalabels: {
                color: "#fff",
                textAlign: "center",
              },
            },
          },
        });

        //for print

        var ratio =
          +$("#" + actionId + "Print")
            .closest(".canvas-box")
            .width() /
          $("#" + actionId + "Print")
            .closest(".canvas-box")
            .height();

        var contentPrint = document
          .getElementById(actionId + "Print")
          .getContext("2d");
        charts[String(actionId) + "Print"] = new Chart(contentPrint, {
          type: chartType,
          data: {},
          options: {
            aspectRatio: ratio,
            layout: {
              padding: {
                left: 10,
                right: 10,
                top: 5,
                bottom: 10,
              },
            },
            plugins: {
              title: {
                display: true,
                padding: 15,
                position: "top",
                align: "center",
                font: {
                  size: 20,
                  weight: "bold",
                },
              },
              subtitle: {
                display: true,
                padding: 15,
                position: "top",
                align: "center",
                font: {
                  size: 24,
                  weight: "bold",
                },
              },
              legend: {
                display: true,
                position: "bottom",
                labels: {
                  padding: 15,
                  font: {
                    size: 16,
                  },
                },
              },
              datalabels: {
                font: {
                  size: 18,
                },
                color: "#fff",
                textAlign: "center",
              },
            },
          },
        });
      } else if (
        charts[String(actionId)] == null &&
        chartType == "progressBar"
      ) {
        $("#" + actionId).css(
          "width",
          $("#" + actionId)
            .closest(".canvas-box")
            .width() + "px"
        );
        $("#" + actionId).css(
          "height",
          $("#" + actionId)
            .closest(".canvas-box")
            .height() + "px"
        );
        var content = document.getElementById(actionId);
        charts[String(actionId)] = new ProgressBar.SemiCircle(content, {
          color: "#343a40",
          strokeWidth: 12,
          trailWidth: 12,
          svgStyle: {
            display: "block",
            width:
              $("#" + actionId)
                .closest(".canvas-box")
                .width() + "px",
            height:
              $("#" + actionId)
                .closest(".canvas-box")
                .height() + "px",
          },
          text: {
            value: "",
          },
          from: {
            color: "#ED1C24",
          },
          to: {
            color: "#39B54A",
          },
          step: function (state, circle, attachment) {
            circle.path.setAttribute("stroke", state.color);
          },
        });

        charts[String(actionId)].text.style.fontFamily = "IRANSansFaNum";
        charts[String(actionId)].text.style.fontSize = "30px";
      }
    }
  );

  //call lifeCycle
  lifeCycle({
    sync: false,
  });
});

$(document).on("click", ".btn-sync-data", function () {
  //update current filter variables
  currentFilterProvince = $('select[name="filter-province"]').val();
  currentFilterCity = $('select[name="filter-city"]').val();
  currentFilterYear = $('select[name="filter-year"]').val();
  currentFilterMonth = $('select[name="filter-month"]').val();
  currentFilterFromDate = $('input[name="filter-date-from"]').val();
  currentFilterToDate = $('input[name="filter-date-to"]').val();

  allCityFlag = 0;

  //call lifeCycle
  lifeCycle({
    sync: false,
  });
});

$(document).on("click", ".btn-filter-reset", function () {
  allCityFlag = 0;
  //clear filters
  $('select[name="filter-province"]').val(0);
  $('select[name="filter-city"]').empty();
  $('select[name="filter-city"]').append(
    `<option value="0">انتخاب شهرستان</option>`
  );
  $('select[name="filter-city"]').val(0);
  $('select[name="filter-year"]').val(
    $('.btn-action-box[data-action-id="' + currentActionId + '"]').data(
      "resetYear"
    )
      ? DEFALUT_YEAR
      : $('.btn-action-box[data-action-id="' + currentActionId + '"]').data(
          "defaultYear"
        )
  );
  $('select[name="filter-month"]').val(0);
  $('input[name="filter-date-from"]').val("");
  $('input[name="filter-date-to"]').val("");

  //update current filter variables
  currentFilterProvince = $('select[name="filter-province"]').val();
  currentFilterCity = $('select[name="filter-city"]').val();
  currentFilterYear = $('select[name="filter-year"]').val();
  currentFilterMonth = $('select[name="filter-month"]').val();
  currentFilterFromDate = $('input[name="filter-date-from"]').val();
  currentFilterToDate = $('input[name="filter-date-to"]').val();

  $('.btn-action-box[data-reset-year="true"]').data(
    "defaultYear",
    DEFALUT_YEAR
  );

  //call lifeCycle
  lifeCycle({
    sync: false,
  });

  hasChangeFilter();
});

$(document).on("click", ".btn-filter-send", function () {
  if (
    ($('input[name="filter-date-from"]').val() != "") ^
    ($('input[name="filter-date-to"]').val() != "")
  ) {
    Swal.fire({
      icon: "error",
      title: "خطا",
      text: "لطفا تاریخ شروع و پایان را وارد کنید",
      showCancelButton: true,
      showConfirmButton: false,
      cancelButtonText: "بستن",
    });
    return false;
  }

  //update current filter variables
  currentFilterProvince = $('select[name="filter-province"]').val();
  currentFilterCity = $('select[name="filter-city"]').val();
  currentFilterYear = $('select[name="filter-year"]').val();
  currentFilterMonth = $('select[name="filter-month"]').val();
  currentFilterFromDate = $('input[name="filter-date-from"]').val();
  currentFilterToDate = $('input[name="filter-date-to"]').val();
  if (currentFilterProvince != 0) {
    allCityFlag = 0;
  }
  //call lifeCycle
  lifeCycle({
    sync: false,
  });

  hasChangeFilter();
});

$(document).on("change", 'select[name="filter-year"]', function () {
  $('.btn-action-box[data-reset-year="true"]').data(
    "defaultYear",
    $(this).val()
  );
});

$(document).on(
  "change",
  'select[name="rahradi-activity-items"]',
  async function () {
    currentFilterRahdariActivity = $(this).val();
    await showLoader(false);
    $.when(roadItemProjectItemSync(false)).then(() => {
      hideLoader(false);
      updateChartsData(loadChart);
    });
  }
);

$(document).on(
  "change",
  'select[name="road-infrastructure-details"]',
  async function () {
    currentFilterRoadInfrastructure = $(this).val();
    await showLoader(false);
    $.when(roadInfrastructureSync(false)).then(() => {
      hideLoader(false);
    });
  }
);

$(document).on("click", ".chart-print", async function () {
  let chart = null;
  let chartId = $(this).parents(".chart-box").find("canvas").attr("id");
  let title = $(this).parents(".chart-box").find(".title-print").text();
  if (chartId == "StatusChart") {
    chart = StatusChartPrint;
  } else {
    chart = charts[String(chartId) + "Print"];
  }
  await updateBeforePrint(chart, title);
  let link = document.createElement("a");
  link.href = chart.toBase64Image();
  link.download = title;
  link.click();
  chart.options.animation.duration = 1000;
  chart.update();
});

$(document).on("change", 'select[name="filter-province"]', function () {
  getCitiesByProvince($(this).val());
});

$(document).on("change", "select.filter-control", function () {
  hasChangeFilter();
});

$(document).on("input", "input.filter-control", function () {
  hasChangeFilter();
});

async function updateBeforePrint(chart, title) {
  chart.options.plugins.title.text =
    "گزارش سامانه جامع راهداری ( مورخ : " +
    moment().format("HH:mm jYYYY/jMM/jDD") +
    " )";
  chart.options.plugins.subtitle.text = title;
  chart.options.animation.duration = 0;
  chart.update();
  return new Promise((resolve) => setTimeout(resolve, 100));
}

function hasChangeFilter() {
  let hasChange = false;

  if (currentFilterProvince != $('select[name="filter-province"]').val())
    hasChange = true;
  else if (currentFilterCity != $('select[name="filter-city"]').val())
    hasChange = true;
  else if (currentFilterYear != $('select[name="filter-year"]').val())
    hasChange = true;
  else if (currentFilterMonth != $('select[name="filter-month"]').val())
    hasChange = true;
  else if (currentFilterFromDate != $('input[name="filter-date-from"]').val())
    hasChange = true;
  else if (currentFilterToDate != $('input[name="filter-date-to"]').val())
    hasChange = true;

  if (hasChange) {
    $(".btn-filter-send").prop("disabled", false);
    $(".btn-filter-send .btn-filter-send-chenge").attr("aria-display", "show");
    $(".btn-filter-send .btn-filter-send-ok").attr("aria-display", "hide");
  } else {
    $(".btn-filter-send").prop("disabled", true);
    $(".btn-filter-send .btn-filter-send-chenge").attr("aria-display", "hide");
    $(".btn-filter-send .btn-filter-send-ok").attr("aria-display", "show");
  }
}

function subHexColor(c1, c2) {
  var hexStr = (parseInt(c1, 16) - parseInt(c2, 16)).toString(16);
  while (hexStr.length < 6) {
    hexStr = "0" + hexStr;
  }
  return hexStr;
}

function getCitiesByProvince(provinceId) {
  //amir
  $('select[name="filter-city"]').empty();
  $('select[name="filter-city"]').append(
    `<option value="0">انتخاب شهرستان</option>`
  );
  if (provinceId == 0) return false;

  $.ajax({
    url: DEFAULT_URL + "public/contents/provinces/" + provinceId,
    method: "GET",
    async: true,
    beforeSend: function () {
      $('select[name="filter-city"]').empty();
      $('select[name="filter-city"]').append(
        `<option value="0">درحال دریافت شهرستان ها</option>`
      );
    },
    success: function ({ data }) {
      $('select[name="filter-city"]').empty();
      $('select[name="filter-city"]').append(
        `<option value="0">انتخاب شهرستان</option>`
      );
      cities = data;
      data.map((element) => {
        $('select[name="filter-city"]').append(
          `<option value="${element.id}">${element.name_fa}</option>`
        );
      });
    },
    error: function () {
      Swal.fire({
        icon: "error",
        title: "خطا سرور",
        text: "مشکل در دریافت اطلاعات شهرستان",
        confirmButtonText: "بارگذاری مجدد",
      }).then((result) => {
        if (result.isConfirmed) {
          location.reload(true);
          return true;
        }
      });
    },
  });
}

function createQuarterColors(data) {
  var colors = [];
  if (currentActionId == RAHDARI_PROJECTS_ID) {
    for (let i = 0; i < data.length; i++) {
      if (data[i] == 0) colors[i] = "#000";
      else {
        if (data[i] <= 40) colors[i] = "#FF0000";
        else if (data[i] < 70) colors[i] = "#FFCC00";
        else colors[i] = "#13BB51";
      }
    }
  } else {
    var minOfData = Math.min(...data);
    var maxOfData = Math.max(...data);
    var quarter = Math.round((maxOfData - minOfData) / 3);
    for (let i = 0; i < data.length; i++) {
      if (data[i] == 0) colors[i] = "#000";
      else {
        if (data[i] <= minOfData + quarter) colors[i] = "#FF0000";
        else if (data[i] < maxOfData - quarter) colors[i] = "#FFCC00";
        else colors[i] = "#13BB51";
      }
    }
  }
  return colors;
}

function createColors(count) {
  var point = 280 / (count - 1);
  var step = 0;
  var colors = [];
  for (let i = 0; i < count; i++) {
    var hsv = {
      h: Math.floor(step),
      s: 90,
      v: 71,
    };
    colors[i] = Color(hsv).toCSS();
    step += point;
  }
  return colors;
}

function createOneColor(array, colors) {
  var finalColors = new Array(array.length);
  for (let i = 0; i < array.length; i++) {
    finalColors[i] = new Array(array[i].data.length);
    for (let j = 0; j < array[i].data.length; j++) {
      finalColors[i][j] = colors[i];
    }
  }
  return colors;
}

async function showLoader(sync) {
  if (sync) $(".sync-text").attr("aria-display", "show");
  else $(".bi-loader").attr("aria-display", "show");

  return new Promise((resolve) => setTimeout(resolve, 100));
}

function hideLoader(sync) {
  if (sync) $(".sync-text").attr("aria-display", "hide");
  else $(".bi-loader").attr("aria-display", "hide");
}

function updateSyncDate() {
  $(".date-chenged").text(moment().format("HH:mm:ss jYYYY/jMM/jDD"));
}

function updateLabelBoxes() {
  let staticLabel = [];
  let statusChart = [];
  let map = [];
  let charts = [];

  const province = $(
    'select[name="filter-province"] option[value="' +
      currentFilterProvince +
      '"]'
  ).text();
  const city = $(
    'select[name="filter-city"] option[value="' + currentFilterCity + '"]'
  ).text();

  statusChart.push(
    $('.btn-action-box[data-action-id="' + currentActionId + '"]').attr(
      "aria-label-status-chart"
    )
  );
  statusChart.push(province);

  map.push(
    $('.btn-action-box[data-action-id="' + currentActionId + '"]').attr(
      "aria-label-map"
    )
  );
  map.push(province);
  map.push(currentFilterCity != 0 ? ` - ${city}` : "");

  charts.push(province);
  charts.push(currentFilterCity != 0 ? ` - ${city}` : "");

  staticLabel.push("از");
  staticLabel.push(currentDate.from.format("jYYYY/jMM/jDD"));
  staticLabel.push("تا");
  staticLabel.push(currentDate.to.format("jYYYY/jMM/jDD"));

  $(".status-chart-title").text(
    `${statusChart.join(" ")} ( ${staticLabel.join(" ")} )`
  );
  $(".map-title").text(`${map.join(" ")} ( ${staticLabel.join(" ")} )`);

  $(".text-current-chart-filter").text(
    ` ${charts.join(" ")} ( ${staticLabel.join(" ")} )`
  );
}

function updateChartsData(charts) {
  for (let i = 0; i < charts.length; i++) {
    const { chart, labels, datasets, colors } = charts[i];

    chart.data.labels = labels;
    if (datasets.length == 1) {
      const dataset = {
        backgroundColor: colors[0],
        data: datasets[0].data,
      };
      chart.data.datasets[0] = dataset;
      chart.update();
    } else {
      for (let k = 0; k < datasets.length; k++) {
        const dataset = {
          backgroundColor: colors[k],
          data: datasets[k].data,
          label: datasets[k].label,
        };
        chart.data.datasets[k] = dataset;
        chart.update();
      }
    }
  }
  loadChart = [];
}

function updateProgressBarData(progressBars) {
  for (let i = 0; i < progressBars.length; i++) {
    const { progressBarId, animate, text } = progressBars[i];
    charts[progressBarId].animate(animate);
    charts[progressBarId].setText(text);
  }
  loadProgressBar = [];
}

async function lifeCycle({ sync, event, target }) {
  // reset timer
  clearInterval(timer);
  timer = setInterval(function () {
    lifeCycle({
      sync: true,
    });
  }, DEFAULT_TIMER * 1000);
  //create filter query
  currentFilterQuery = `?subject_id=${currentActionId}`;
  currentFilterQuery +=
    currentFilterProvince != 0 ? `&province_id=${currentFilterProvince}` : ``;
  currentFilterQuery +=
    currentFilterCity != 0 ? `&city_id=${currentFilterCity}` : ``;

  if (currentFilterFromDate != "" && currentFilterToDate != "") {
    currentDate.from = moment(
      dateFrom.getState().selected.year +
        "/" +
        dateFrom.getState().selected.month +
        "/" +
        dateFrom.getState().selected.date,
      "jYYYY/jM/jD"
    );
    currentFilterQuery += `&from_date=${currentDate.from.format("YYYY-MM-DD")}`;
    currentDate.to = moment(
      dateTo.getState().selected.year +
        "/" +
        dateTo.getState().selected.month +
        "/" +
        dateTo.getState().selected.date,
      "jYYYY/jM/jD"
    );
    currentFilterQuery += `&to_date=${currentDate.to.format("YYYY-MM-DD")}`;
  } else {
    if (currentFilterMonth != 0) {
      currentDate.from = moment(
        currentFilterYear + currentFilterMonth,
        "jYYYYjM"
      );
      currentDate.from.locale("fa");
      currentFilterQuery += `&from_date=${currentDate.from
        .locale("en")
        .format("YYYY-MM-DD")}`;
      currentDate.to = moment(
        currentFilterYear + currentFilterMonth,
        "jYYYYjM"
      );
      currentDate.to.locale("fa");
      currentDate.to.add(1, "month");
      currentFilterQuery += `&to_date=${currentDate.to
        .locale("en")
        .format("YYYY-MM-DD")}`;
      } else {
        if(currentFilterYear != '0'){
          currentDate.from = moment(currentFilterYear, "jYYYY");
          currentDate.from.locale("fa");
          currentFilterQuery += `&from_date=${currentDate.from
            .locale("en")
            .format("YYYY-MM-DD")}`;
          currentDate.to = moment(currentFilterYear, "jYYYY");
          currentDate.to.locale("fa");
          currentDate.to.add(1, "year");
          currentFilterQuery += `&to_date=${currentDate.to
            .locale("en")
            .format("YYYY-MM-DD")}`;
        }else{
        console.log(currentFilterYear);

          currentDate.from = moment('1393', "jYYYY");
          currentDate.from.locale("fa");
          currentFilterQuery += `&from_date=${currentDate.from
            .locale("en")
            .format("YYYY-MM-DD")}`;
          currentDate.to = moment(DEFALUT_YEAR, "jYYYY");
          currentDate.to.locale("fa");
          currentDate.to.add(1, "year");
          currentFilterQuery += `&to_date=${currentDate.to
            .locale("en")
            .format("YYYY-MM-DD")}`;
        }
      
    }
  }

  await showLoader(sync);
  $.when(
    roadInfrastructureSync(sync),
    countActionsSync(sync),
    statusDiagramSync(sync, event),
    averageProgressRahdariProjectsSync(sync),
    separationProjectTypeRahdariProjectsSync(sync),
    separationLastStatusRahdariProjectsSync(sync),
    separationAxisTypeRahdariProjectsSync(sync),
    roadItemProjectItemSync(sync),
    separationActivityTypeRahdariActivitiesSync(sync),
    percentComplaintsHandledSync(sync),
    separationComplainTypeRahdariComplainsSync(sync),
    countAccidentPointsSync(sync),
    countNumbersAccidentPointsSync(sync),
    totalLengthDamagedAxesSync(sync),
    primaryEstimatesDamagesSync(sync),
    cityArraySync(sync, event),
    diagramTileMapSync(sync, event),
    diagramAllCity(sync)
  ).then(() => {
    hideLoader(sync);
    if (!sync) {
      if (event == "onClickMap") {
        showCitiesTileOnMap(target);
      } else {
        showProvinceTileOnMap();
      }
      updateChartsData(loadChart);
      updateProgressBarData(loadProgressBar);
    }
    updateSyncDate();
    updateLabelBoxes();
  });
}

function countActionsSync(sync) {
  $.ajax({
    url: DEFAULT_URL + DEFAULT_WEB + "subtitleCounts" + currentFilterQuery,
    method: "GET",
    async: sync,
    success: function ({ data }) {
      data.subjects.map((subject) => {
        $('.btn-action-box[data-action-id="' + subject.action_id + '"]')
          .find(".action-counter")
          .text(subject.count);
      });
    },
    error: function () {
      Swal.fire({
        icon: "error",
        title: "خطا سرور",
        text: "مشکل در دریافت اطلاعات تعدادها",
        confirmButtonText: "بارگذاری مجدد",
      }).then((result) => {
        if (result.isConfirmed) {
          location.reload(true);
          return true;
        }
      });
    },
  });
}

function roadInfrastructureSync(sync) {
  $.ajax({
    url:
      DEFAULT_URL +
      DEFAULT_API +
      "road-infrastructure" +
      currentFilterQuery +
      "&type=" +
      currentFilterRoadInfrastructure,
    method: "GET",
    async: sync,
    success: function ({ data }) {
      $(".road-infrastructure-counter").text(data);
    },
    error: function () {
      Swal.fire({
        icon: "error",
        title: "خطا سرور",
        text: "مشکل در دریافت اطلاعات مشخصات زیرساختی راه",
        confirmButtonText: "بارگذاری مجدد",
      }).then((result) => {
        if (result.isConfirmed) {
          location.reload(true);
          return true;
        }
      });
    },
  });
}

function statusDiagramSync(sync, event) {
  $.ajax({
    url: DEFAULT_URL + DEFAULT_API + "status-diagram" + currentFilterQuery,
    method: "GET",
    async: sync,
    success: function ({ data, geojson }) {
      if (sync) {
        updateChartsData([
          {
            chart: StatusChartPrint,
            labels: data.labels,
            datasets: data.datasets,
            colors: [createQuarterColors(data.datasets[0].data)],
          },
        ]);
        updateChartsData([
          {
            chart: StatusChart,
            labels: data.labels,
            datasets: data.datasets,
            colors: [createQuarterColors(data.datasets[0].data)],
          },
        ]);
        diagramData = geojson;
        if (event != "onClickMap") {
          showProvinceTileOnMap();
        }
      } else {
        loadChart.push({
          chart: StatusChartPrint,
          labels: data.labels,
          datasets: data.datasets,
          colors: [createQuarterColors(data.datasets[0].data)],
        });
        loadChart.push({
          chart: StatusChart,
          labels: data.labels,
          datasets: data.datasets,
          colors: [createQuarterColors(data.datasets[0].data)],
        });

        diagramData = geojson;
      }

    },
    error: function () {
      Swal.fire({
        icon: "error",
        title: "خطا سرور",
        text: "مشکل در دریافت اطلاعات نمودار وضعیت",
        confirmButtonText: "بارگذاری مجدد",
      }).then((result) => {
        if (result.isConfirmed) {
          location.reload(true);
          return true;
        }
      });
    },
  });
}

//RAHDARI PROJECTS CHARTS

function averageProgressRahdariProjectsSync(sync) {
  if (currentActionId == RAHDARI_PROJECTS_ID) {
    $.ajax({
      url:
        DEFAULT_URL +
        DEFAULT_API +
        "average-progress-rahdari-projects" +
        currentFilterQuery,
      method: "GET",
      async: sync,
      success: function ({ data }) {
        if (sync) {
          updateProgressBarData([
            {
              progressBarId: "action1Chart4",
              animate: data / 100,
              text: "%" + data,
            },
          ]);
        } else {
          loadProgressBar.push({
            progressBarId: "action1Chart4",
            animate: data / 100,
            text: "%" + data,
          });
        }
      },
      error: function () {
        Swal.fire({
          icon: "error",
          title: "خطا سرور",
          text: "مشکل در دریافت اطلاعات میانگین پیشرفت پروژه های راهداری",
          confirmButtonText: "بارگذاری مجدد",
        }).then((result) => {
          if (result.isConfirmed) {
            location.reload(true);
            return true;
          }
        });
      },
    });
  }
}

function separationProjectTypeRahdariProjectsSync(sync) {
  if (currentActionId == RAHDARI_PROJECTS_ID) {
    $.ajax({
      url:
        DEFAULT_URL +
        DEFAULT_API +
        "separation-project-type-rahdari-projects" +
        currentFilterQuery,
      method: "GET",
      async: sync,
      success: function ({ data }) {
        if (sync) {
          updateChartsData([
            {
              chart: charts["action1Chart3Print"],
              labels: data.labels,
              datasets: data.datasets,
              colors: [createColors(data.datasets[0].data.length)],
            },
          ]);
          updateChartsData([
            {
              chart: charts["action1Chart3"],
              labels: data.labels,
              datasets: data.datasets,
              colors: [createColors(data.datasets[0].data.length)],
            },
          ]);
        } else {
          loadChart.push({
            chart: charts["action1Chart3Print"],
            labels: data.labels,
            datasets: data.datasets,
            colors: [createColors(data.datasets[0].data.length)],
          });
          loadChart.push({
            chart: charts["action1Chart3"],
            labels: data.labels,
            datasets: data.datasets,
            colors: [createColors(data.datasets[0].data.length)],
          });
        }
      },
      error: function () {
        Swal.fire({
          icon: "error",
          title: "خطا سرور",
          text: "مشکل در دریافت اطلاعات پروژه ها به تفکیک نوع پروژه",
          confirmButtonText: "بارگذاری مجدد",
        }).then((result) => {
          if (result.isConfirmed) {
            location.reload(true);
            return true;
          }
        });
      },
    });
  }
}

function separationLastStatusRahdariProjectsSync(sync) {
  if (currentActionId == RAHDARI_PROJECTS_ID) {
    $.ajax({
      url:
        DEFAULT_URL +
        DEFAULT_API +
        "separation-last-status-rahdari-projects" +
        currentFilterQuery,
      method: "GET",
      async: sync,
      success: function ({ data }) {
        if (sync) {
          updateChartsData([
            {
              chart: charts["action1Chart2Print"],
              labels: data.labels,
              datasets: data.datasets,
              colors: [createColors(data.datasets[0].data.length)],
            },
          ]);
          updateChartsData([
            {
              chart: charts["action1Chart2"],
              labels: data.labels,
              datasets: data.datasets,
              colors: [createColors(data.datasets[0].data.length)],
            },
          ]);
        } else {
          loadChart.push({
            chart: charts["action1Chart2Print"],
            labels: data.labels,
            datasets: data.datasets,
            colors: [createColors(data.datasets[0].data.length)],
          });
          loadChart.push({
            chart: charts["action1Chart2"],
            labels: data.labels,
            datasets: data.datasets,
            colors: [createColors(data.datasets[0].data.length)],
          });
        }
      },
      error: function () {
        Swal.fire({
          icon: "error",
          title: "خطا سرور",
          text: "مشکل در دریافت اطلاعات پروژه ها به تفکیک آخرین وضعیت",
          confirmButtonText: "بارگذاری مجدد",
        }).then((result) => {
          if (result.isConfirmed) {
            location.reload(true);
            return true;
          }
        });
      },
    });
  }
}

function separationAxisTypeRahdariProjectsSync(sync) {
  if (currentActionId == RAHDARI_PROJECTS_ID) {
    $.ajax({
      url:
        DEFAULT_URL +
        DEFAULT_API +
        "separation-axis-type-rahdari-projects" +
        currentFilterQuery,
      method: "GET",
      async: sync,
      success: function ({ data }) {
        if (sync) {
          updateChartsData([
            {
              chart: charts["action1Chart1Print"],
              labels: data.labels,
              datasets: data.datasets,
              colors: [createColors(data.datasets[0].data.length)],
            },
          ]);
          updateChartsData([
            {
              chart: charts["action1Chart1"],
              labels: data.labels,
              datasets: data.datasets,
              colors: [createColors(data.datasets[0].data.length)],
            },
          ]);
        } else {
          loadChart.push({
            chart: charts["action1Chart1Print"],
            labels: data.labels,
            datasets: data.datasets,
            colors: [createColors(data.datasets[0].data.length)],
          });
          loadChart.push({
            chart: charts["action1Chart1"],
            labels: data.labels,
            datasets: data.datasets,
            colors: [createColors(data.datasets[0].data.length)],
          });
        }
      },
      error: function () {
        Swal.fire({
          icon: "error",
          title: "خطا سرور",
          text: "مشکل در دریافت اطلاعات پروژه ها به تفکیک نوع محور",
          confirmButtonText: "بارگذاری مجدد",
        }).then((result) => {
          if (result.isConfirmed) {
            location.reload(true);
            return true;
          }
        });
      },
    });
  }
}

//RAHDARI CURRENT ACTIVITYS CHARTS

function roadItemProjectItemSync(sync) {
  if (currentActionId == RAHDARI_CURRENT_ACTIVITYS_ID) {
    $.ajax({
      url:
        DEFAULT_URL +
        DEFAULT_API +
        "road-item-project-item" +
        currentFilterQuery +
        "&item_id=" +
        currentFilterRahdariActivity,
      method: "GET",
      async: sync,
      success: function ({ data }) {
        if (sync) {
          updateChartsData([
            {
              chart: charts["action2Chart2Print"],
              labels: data.labels,
              datasets: data.datasets,
              colors: [createColors(data.datasets[0].data.length)],
            },
          ]);
          updateChartsData([
            {
              chart: charts["action2Chart2"],
              labels: data.labels,
              datasets: data.datasets,
              colors: [createColors(data.datasets[0].data.length)],
            },
          ]);
        } else {
          loadChart.push({
            chart: charts["action2Chart2Print"],
            labels: data.labels,
            datasets: data.datasets,
            colors: [createColors(data.datasets[0].data.length)],
          });
          loadChart.push({
            chart: charts["action2Chart2"],
            labels: data.labels,
            datasets: data.datasets,
            colors: [createColors(data.datasets[0].data.length)],
          });
        }
      },
      error: function () {
        Swal.fire({
          icon: "error",
          title: "خطا سرور",
          text: "مشکل در دریافت اطلاعات فعالیت ها به تفکیک ریزآیتم",
          confirmButtonText: "بارگذاری مجدد",
        }).then((result) => {
          if (result.isConfirmed) {
            location.reload(true);
            return true;
          }
        });
      },
    });
  }
}

function separationActivityTypeRahdariActivitiesSync(sync) {
  if (currentActionId == RAHDARI_CURRENT_ACTIVITYS_ID) {
    $.ajax({
      url:
        DEFAULT_URL +
        DEFAULT_API +
        "separation-activity-type-rahdari-activities" +
        currentFilterQuery,
      method: "GET",
      async: sync,
      success: function ({ data }) {
        if (sync) {
          updateChartsData([
            {
              chart: charts["action2Chart1Print"],
              labels: data.labels,
              datasets: data.datasets,
              colors: [createColors(data.datasets[0].data.length)],
            },
          ]);
          updateChartsData([
            {
              chart: charts["action2Chart1"],
              labels: data.labels,
              datasets: data.datasets,
              colors: [createColors(data.datasets[0].data.length)],
            },
          ]);
        } else {
          loadChart.push({
            chart: charts["action2Chart1Print"],
            labels: data.labels,
            datasets: data.datasets,
            colors: [createColors(data.datasets[0].data.length)],
          });
          loadChart.push({
            chart: charts["action2Chart1"],
            labels: data.labels,
            datasets: data.datasets,
            colors: [createColors(data.datasets[0].data.length)],
          });
        }
      },
      error: function () {
        Swal.fire({
          icon: "error",
          title: "خطا سرور",
          text: "مشکل در دریافت اطلاعات فعالیت ها به تفکیک نوع فعالیت",
          confirmButtonText: "بارگذاری مجدد",
        }).then((result) => {
          if (result.isConfirmed) {
            location.reload(true);
            return true;
          }
        });
      },
    });
  }
}

//HANDLED COMPLAINTS CHARTS

function percentComplaintsHandledSync(sync) {
  if (currentActionId == HANDLED_COMPLAINTS_ID) {
    $.ajax({
      url:
        DEFAULT_URL +
        DEFAULT_API +
        "percent-complaints-handled" +
        currentFilterQuery,
      method: "GET",
      async: sync,
      success: function ({ data }) {
        if (sync) {
          updateProgressBarData([
            {
              progressBarId: "action4Chart2",
              animate: data / 100,
              text: "%" + data,
            },
          ]);
        } else {
          loadProgressBar.push({
            progressBarId: "action4Chart2",
            animate: data / 100,
            text: "%" + data,
          });
        }
      },
      error: function () {
        Swal.fire({
          icon: "error",
          title: "خطا سرور",
          text: "مشکل در دریافت اطلاعات شکایات رسیدگی شده",
          confirmButtonText: "بارگذاری مجدد",
        }).then((result) => {
          if (result.isConfirmed) {
            location.reload(true);
            return true;
          }
        });
      },
    });
  }
}

function separationComplainTypeRahdariComplainsSync(sync) {
  if (currentActionId == HANDLED_COMPLAINTS_ID) {
    $.ajax({
      url:
        DEFAULT_URL +
        DEFAULT_API +
        "separation-complain-type-rahdari-complains" +
        currentFilterQuery,
      method: "GET",
      async: sync,
      success: function ({ data }) {
        var colors = ["#39B54A", "#F26522"];
        if (sync) {
          updateChartsData([
            {
              chart: charts["action4Chart1Print"],
              labels: data.labels,
              datasets: data.datasets,
              colors: colors,
            },
          ]);
          updateChartsData([
            {
              chart: charts["action4Chart1"],
              labels: data.labels,
              datasets: data.datasets,
              colors: colors,
            },
          ]);
        } else {
          loadChart.push({
            chart: charts["action4Chart1Print"],
            labels: data.labels,
            datasets: data.datasets,
            colors: colors,
          });
          loadChart.push({
            chart: charts["action4Chart1"],
            labels: data.labels,
            datasets: data.datasets,
            colors: colors,
          });
        }
      },
      error: function () {
        Swal.fire({
          icon: "error",
          title: "خطا سرور",
          text: "مشکل در دریافت اطلاعات شکایات به تفکیک نوع شکایات",
          confirmButtonText: "بارگذاری مجدد",
        }).then((result) => {
          if (result.isConfirmed) {
            location.reload(true);
            return true;
          }
        });
      },
    });
  }
}

//DANGER POINTS CHARTS

function countAccidentPointsSync(sync) {
  if (currentActionId == DANGER_POINTS_ID) {
    $.ajax({
      url:
        DEFAULT_URL +
        DEFAULT_API +
        "count-accident-points" +
        currentFilterQuery,
      method: "GET",
      async: sync,
      success: function ({ data }) {
        if (sync) {
          updateProgressBarData([
            {
              progressBarId: "action5Chart2",
              animate: data / 100,
              text: "%" + data,
            },
          ]);
        } else {
          loadProgressBar.push({
            progressBarId: "action5Chart2",
            animate: data / 100,
            text: "%" + data,
          });
        }
      },
      error: function () {
        Swal.fire({
          icon: "error",
          title: "خطا سرور",
          text: "مشکل در دریافت اطلاعات نقاط رفع شده 1395",
          confirmButtonText: "بارگذاری مجدد",
        }).then((result) => {
          if (result.isConfirmed) {
            location.reload(true);
            return true;
          }
        });
      },
    });
  }
}

function countNumbersAccidentPointsSync(sync) {
  if (currentActionId == DANGER_POINTS_ID) {
    $.ajax({
      url:
        DEFAULT_URL +
        DEFAULT_API +
        "count-numbers-accident-points" +
        currentFilterQuery,
      method: "GET",
      async: sync,
      success: function ({ data }) {
        if (sync) {
          updateChartsData([
            {
              chart: charts["action5Chart1Print"],
              labels: data.labels,
              datasets: data.datasets,
              colors: [createColors(data.datasets[0].data.length)],
            },
          ]);
          updateChartsData([
            {
              chart: charts["action5Chart1"],
              labels: data.labels,
              datasets: data.datasets,
              colors: [createColors(data.datasets[0].data.length)],
            },
          ]);
        } else {
          loadChart.push({
            chart: charts["action5Chart1Print"],
            labels: data.labels,
            datasets: data.datasets,
            colors: [createColors(data.datasets[0].data.length)],
          });
          loadChart.push({
            chart: charts["action5Chart1"],
            labels: data.labels,
            datasets: data.datasets,
            colors: [createColors(data.datasets[0].data.length)],
          });
        }
      },
      error: function () {
        Swal.fire({
          icon: "error",
          title: "خطا سرور",
          text: "مشکل در دریافت اطلاعات نقاط به تفکیک هندسی 1395",
          confirmButtonText: "بارگذاری مجدد",
        }).then((result) => {
          if (result.isConfirmed) {
            location.reload(true);
            return true;
          }
        });
      },
    });
  }
}

//DAMAGE AXES CHARS

function totalLengthDamagedAxesSync(sync) {
  if (currentActionId == DAMAGE_AXES_ID) {
    $.ajax({
      url:
        DEFAULT_URL +
        DEFAULT_API +
        "total-length-damaged-axes" +
        currentFilterQuery,
      method: "GET",
      async: sync,
      success: function ({ data }) {
        if (sync) {
          updateProgressBarData([
            {
              progressBarId: "action7Chart2",
              animate: 1,
              text: data + " کیلومتر",
            },
          ]);
        } else {
          loadProgressBar.push({
            progressBarId: "action7Chart2",
            animate: 1,
            text: data + " کیلومتر",
          });
        }
      },
      error: function () {
        Swal.fire({
          icon: "error",
          title: "خطا سرور",
          text: "مشکل در دریافت اطلاعات مجموع طول محور های آسیب دیده",
          confirmButtonText: "بارگذاری مجدد",
        }).then((result) => {
          if (result.isConfirmed) {
            location.reload(true);
            return true;
          }
        });
      },
    });
  }
}

function primaryEstimatesDamagesSync(sync) {
  if (currentActionId == DAMAGE_AXES_ID) {
    $.ajax({
      url:
        DEFAULT_URL +
        DEFAULT_API +
        "primary-estimates-damages" +
        currentFilterQuery,
      method: "GET",
      async: sync,
      success: function ({ data }) {
        if (sync) {
          updateProgressBarData([
            {
              progressBarId: "action7Chart1",
              animate: 1,
              text: data.toLocaleString("en"),
            },
          ]);
        } else {
          loadProgressBar.push({
            progressBarId: "action7Chart1",
            animate: 1,
            text: data.toLocaleString("en"),
          });
        }
      },
      error: function () {
        Swal.fire({
          icon: "error",
          title: "خطا سرور",
          text: "مشکل در دریافت اطلاعات برآورد اولیه خسارات",
          confirmButtonText: "بارگذاری مجدد",
        }).then((result) => {
          if (result.isConfirmed) {
            location.reload(true);
            return true;
          }
        });
      },
    });
  }
}

//functions for ajax map
function cityArraySync(sync, event) {
  if (event == "onClickMap") {
    $.ajax({
      url: DEFAULT_URL + "public/contents/provinces/" + currentFilterProvince,
      method: "GET",
      async: sync,
      success: function ({ data }) {
        cityArray = data;
      },
      error: function () {
        Swal.fire({
          icon: "error",
          title: "خطا سرور",
          text: "مشکل در دریافت اطلاعات شهرستان",
          confirmButtonText: "بارگذاری مجدد",
        }).then((result) => {
          if (result.isConfirmed) {
            location.reload(true);
            return true;
          }
        });
      },
    });
  }
}

function diagramTileMapSync(sync, event) {
  if (currentFilterProvince != 0) {
    $.ajax({
      url: DEFAULT_URL + "api/bi/status-diagram-tile" + currentFilterQuery,
      method: "GET",
      async: sync,
      success: function ({ data }) {
        curentCityArray = [];
        currentCityDiagram = data.data;
        var this_row = {};
        $.each(currentCityDiagram, function (key, value) {
          if (key != "") {
            this_row = {
              namevalue: key,
              keyvalue: value,
            };
            curentCityArray.push(this_row);
          }
        });
        curentValueCity = $.map(currentCityDiagram, function (value, index) {
          if (index != "") {
            return [value];
          }
        });
      },
      error: function () {
        Swal.fire({
          icon: "error",
          title: "خطا سرور",
          text: "مشکل در دریافت اطلاعات شهرستان",
          confirmButtonText: "بارگذاری مجدد",
        }).then((result) => {
          if (result.isConfirmed) {
            location.reload(true);
            return true;
          }
        });
      },
    });
  }
}

// function for show All city tile
function diagramAllCity(sync) {
  if (allCityFlag == 1) {
    $.ajax({
      url: DEFAULT_URL + "api/bi/status-diagram-tile" + currentFilterQuery,
      method: "GET",
      async: sync,
      success: function ({ data }) {
        AllCityDiagram = data.data;
        var this_row = {};
        AllcityArray.length = 0;
        $.each(AllCityDiagram, function (key, value) {
          if (key != "") {
            this_row = {
              namevalue: key,
              keyvalue: value,
            };
            AllcityArray.push(this_row);
          }
        });
        curentValueAllCity = $.map(AllCityDiagram, function (value, index) {
          if (index != "") {
            return [value];
          }
        });
      },
      error: function () {
        Swal.fire({
          icon: "error",
          title: "خطا سرور",
          text: "مشکل در دریافت اطلاعات شهرستان",
          confirmButtonText: "بارگذاری مجدد",
        }).then((result) => {
          if (result.isConfirmed) {
            location.reload(true);
            return true;
          }
        });
      },
    });
  }
}
//function for tile map
function showProvinceTileOnMap() {
  if (currentFilterProvince == 0) {
    MapBi.setView(showbounds, 5);
    if (allCityFlag == 1) {
      removeFeaturesFromMap();
      showAllCityTileOnMap();
    } else {
      showLegendOnMap(diagramData);
      keepMapFeatureColor = null;
      removeFeaturesFromMap();
      removeFeaturesCity();
      removeFeautureAllCity();
      iranArrayCount = 0;
      iranMapGeo = L.geoJson(iranGeoJSON, {
        style: initStyleMapFeatures,
        onEachFeature: onEachFeature,
      });
      iranMapGeo.addTo(MapBi);
    }
  } else {
    removeFeaturesFromMap();
    removeFeautureAllCity();
    zoomMapToFeature(eachfeature[currentFilterProvince - 1]);
  }
}

function initStyleMapFeatures() {
  let randomchoose = null;
  randomchoose = getForArrayFeatureColor(
    fillColorMap(iranArrayCount, diagramData)
  );
  let StyleMap = {
    fillColor: randomchoose.color,
    weight: 2,
    opacity: 1,
    color: "white",
    fillOpacity: 0.5,
  };
  if (randomchoose.num != -2) {
    if (iranArrayCount == 35) {
      iranArrayCount = 0;
    }
    iranArrayCount++;
  }
  return StyleMap;
}

function getForArrayFeatureColor(arrayNum) {
  if (keepMapFeatureColor) {
    return {
      num: -1,
      color: keepMapFeatureColor,
    };
  } else {
    var colors = {};
    if (currentActionId == RAHDARI_PROJECTS_ID) {
      if (arrayNum == null) {
        colors = {
          num: arrayNum,
          color: "#B2B1B9",
        };
      } else if (arrayNum <= 40)
        colors = {
          num: arrayNum,
          color: "#FF0000",
        };
      else if (arrayNum < 70)
        colors = {
          num: arrayNum,
          color: "#FFCC00",
        };
      else {
        colors = {
          num: arrayNum,
          color: "#13BB51",
        };
      }
    } else {
      var minOfData = Math.min(...diagramData);
      var maxOfData = Math.max(...diagramData);
      var quarter = Math.round((maxOfData - minOfData) / 3);
      if (arrayNum == null) {
        colors = {
          num: arrayNum,
          color: "#B2B1B9",
        };
      } else if (arrayNum <= minOfData + quarter)
        colors = {
          num: arrayNum,
          color: "#FF0000",
        };
      else if (arrayNum < maxOfData - quarter)
        colors = {
          num: arrayNum,
          color: "#FFCC00",
        };
      else
        colors = {
          num: arrayNum,
          color: "#13BB51",
        };
    }
    return colors;
  }
}

function fillColorMap(featureRow, diagramData) {
  for (let i = 0; i < diagramData.length; i++) {
    if (i == featureRow) {
      return diagramData[i];
    }
  }
}

function onEachFeature(feature, featureLayer) {
  //yasiu
  eachfeature.push(featureLayer);
  if (currentActionId == DANGER_POINTS_ID) {
    featureLayer.on({
      mouseover: highlightMapFeature,
      mouseout: resetMapFeatureHighlight,
    });
  } else {
    featureLayer.on({
      mouseover: highlightMapFeature,
      mouseout: resetMapFeatureHighlight,
      click: zoomMapToFeatureByClick,
    });
  }
}
async function zoomMapToFeature(e) {
  removeFeaturesCity();
  let featureLayer = e.target ?? e;
  let featuresLayerCity = [];

  MapBi.flyToBounds(featureLayer.getBounds());
  removeFeaturesFromMap();
  fullCityGeoJSONTemp.type = "FeatureCollection";
  $.each(fullCityGeoJSON.features, function (key, value) {
    if (
      value &&
      featureLayer.feature.properties.province_id ===
        value.properties.province_id
    ) {
      featuresLayerCity.push(value);
    } else {
      //
    }
  });
  fullCityGeoJSONTemp.features = featuresLayerCity;

  addCityFeaturesToMap(fullCityGeoJSONTemp);

  flagProvince = 1;
  iranCityCount = 0;
}

async function zoomMapToFeatureByClick(e) {
  currentFilterProvince = e.target.feature.properties.province_id;
  $("#filter-province").val(currentFilterProvince);

  getCitiesByProvince(currentFilterProvince);

  //call lifeCycle
  lifeCycle({
    sync: false,
    event: "onClickMap",
    target: e.target ?? target,
  });
}

function showCitiesTileOnMap(target) {
  removeFeaturesCity();
  let featureLayer = target;
  let featuresLayerCity = [];

  MapBi.flyToBounds(featureLayer.getBounds());
  removeFeaturesFromMap();
  fullCityGeoJSONTemp.type = "FeatureCollection";
  $.each(fullCityGeoJSON.features, function (key, value) {
    if (
      value &&
      featureLayer.feature.properties.province_id ===
        value.properties.province_id
    ) {
      featuresLayerCity.push(value);
    } else {
      //
    }
  });
  fullCityGeoJSONTemp.features = featuresLayerCity;
  addCityFeaturesToMap();

  flagProvince = 1;
  iranCityCount = 0;
}

function addCityFeaturesToMap() {
  showLegendOnMap(curentValueCity);
  keepMapFeatureColor = null;

  if (fullCityGeoJSONTemp) {
    iranCityMapGeo = L.geoJson(fullCityGeoJSONTemp, {
      style: initStyleCityMapFeatures,
      onEachFeature: onEachCityFeature,
    });
    iranCityMapGeo.addTo(MapBi);
  }
}

function initStyleCityMapFeatures(feature) {
  let getRandom = getRandomFeatureColor(fillcolorCity(iranCityCount));
  let makeStyle = {
    fillColor: getRandom.color,
    weight: 2,
    opacity: 1,
    color: "white",
    fillOpacity: 0.5,
  };
  if (iranCityCount == fullCityGeoJSONTemp.features.length) {
    iranCityCount = 0;
  }
  iranCityCount++;
  return makeStyle;
}

function getRandomFeatureColor(arrayNum) {
  if (keepMapFeatureColor) {
    return {
      num: -1,
      color: keepMapFeatureColor,
    };
  } else {
    var colors = {};
    if (currentActionId == RAHDARI_PROJECTS_ID) {
      if (arrayNum.keyvalue == null) {
        colors = {
          num: arrayNum.keyvalue,
          color: "#B2B1B9",
        };
      } else if (arrayNum.keyvalue <= 40)
        colors = {
          num: arrayNum.keyvalue,
          color: "#FF0000",
        };
      else if (arrayNum.keyvalue < 70)
        colors = {
          num: arrayNum.keyvalue,
          color: "#FFCC00",
        };
      else
        colors = {
          num: arrayNum.keyvalue,
          color: "#13BB51",
        };
    } else {
      var minOfData = Math.min(...curentValueCity);
      var maxOfData = Math.max(...curentValueCity);
      var quarter = Math.round((maxOfData - minOfData) / 3);
      if (arrayNum.keyvalue == null) {
        colors = {
          num: arrayNum.keyvalue,
          color: "#B2B1B9",
        };
      } else if (arrayNum.keyvalue <= minOfData + quarter)
        colors = {
          num: arrayNum.keyvalue,
          color: "#FF0000",
        };
      else if (arrayNum.keyvalue < maxOfData - quarter)
        colors = {
          num: arrayNum.keyvalue,
          color: "#FFCC00",
        };
      else
        colors = {
          num: arrayNum.keyvalue,
          color: "#13BB51",
        };
    }
    return colors;
  }
}

function fillcolorCity(featureRow) {
  for (let i = 0; i < fullCityGeoJSONTemp.features.length; i++) {
    if (i == featureRow) {
      for (let j = 0; j < curentCityArray.length; j++) {
        if (
          curentCityArray[j].namevalue ==
          fullCityGeoJSONTemp.features[i].properties.city_id
        ) {
          CityArraySelected.push(curentCityArray[j]);
          return curentCityArray[j];
        }
      }
    }
  }
}

function onEachCityFeature(feature, featureLayer) {
  featureLayer.on({
    mouseover: highlightMapFeature,
    mouseout: resetMapFeatureHighlight,
  });
}

function highlightMapFeature(e) {
  let targetAtt = e.target.feature.properties;
  let featureLayer = null;
  if (e.target) {
    featureLayer = e.target;
  } else {
    featureLayer = e;
  }
  keepMapFeatureColor = featureLayer.options.fillColor;
  featureLayer.setStyle({
    weight: 4,
    color: "#666",
    fillOpacity: 0.5,
  });
  if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
    featureLayer.bringToFront();
  }
  if (currentFilterProvince == 0 && allCityFlag == 0) {
    for (let i = 0; i < provinces.length; i++) {
      if (targetAtt.province_id == provinces[i].id) {
        var value =
          currentActionId == RAHDARI_PROJECTS_ID
            ? `%${diagramData[i]}`
            : diagramData[i];
        if (diagramData[i] != null) {
          popup
            .setLatLng([provinces[i].center_lat, provinces[i].center_long])
            .setContent(
              `<div class="parent-popup-enjoyment text-center"> 
              <div class="d-flex flex-column ">
              <span class="font-weight-bold">${provinces[i].name_fa}</span>
              <div class="d-flex justify-content-center mt-1">
              <span>${value}</span>
              </div>
              </div>
              <div class="line-popup"></div>
              </div>
              `
            )
            .openOn(MapBi);
        } else {
          popup
            .setLatLng([provinces[i].center_lat, provinces[i].center_long])
            .setContent(
              `<div class="parent-popup-enjoyment text-center"> 
              <div class="d-flex flex-column ">
              <span class="font-weight-bold">${provinces[i].name_fa}</span>
              <div class="d-flex justify-content-center mt-1">
              </div>
              </div>
              <div class="line-popup"></div>
              </div>
              `
            )
            .openOn(MapBi);
        }
      }
    }
  }
  if (allCityFlag == 1) {
    for (let i = 0; i < AllCityArrayPopUp.length; i++) {
      if (targetAtt.city_id == AllCityArrayPopUp[i].namevalue) {
        var value =
          currentActionId == RAHDARI_PROJECTS_ID
            ? `%${AllCityArrayPopUp[i].keyvalue}`
            : AllCityArrayPopUp[i].keyvalue;
        if (AllCityArrayPopUp[i].keyvalue != null) {
          popup
            .setLatLng([targetAtt.center_lat, targetAtt.center_lng])
            .setContent(
              `<div class="parent-popup-enjoyment text-center"> 
            <div class="d-flex flex-column ">
            <span class="font-weight-bold">${targetAtt.city_name}</span>
            <div class="d-flex justify-content-center mt-1">
            <span>${value}</span>
            </div>
            </div>
            <div class="line-popup"></div>
            </div>
            `
            )
            .openOn(MapBi);
        } else {
          popup
            .setLatLng([targetAtt.center_lat, targetAtt.center_lng])
            .setContent(
              `<div class="parent-popup-enjoyment text-center"> 
            <div class="d-flex flex-column ">
            <span class="font-weight-bold">${targetAtt.city_name}</span>
            <div class="d-flex justify-content-center mt-1">
            </div>
            </div>
            <div class="line-popup"></div>
            </div>
            `
            )
            .openOn(MapBi);
        }
      }
    }
  }
  if (currentFilterProvince != 0) {
    for (let i = 0; i < CityArraySelected.length; i++) {
      if (targetAtt.city_id == CityArraySelected[i].namevalue) {
        var value =
          currentActionId == RAHDARI_PROJECTS_ID
            ? `%${CityArraySelected[i].keyvalue}`
            : CityArraySelected[i].keyvalue;
        if (CityArraySelected[i].keyvalue != null) {
          popup
            .setLatLng([targetAtt.center_lat, targetAtt.center_lng])
            .setContent(
              `<div class="parent-popup-enjoyment text-center"> 
            <div class="d-flex flex-column ">
            <span class="font-weight-bold">${targetAtt.city_name}</span>
            <div class="d-flex justify-content-center mt-1">
            <span>${value}</span>
            </div>
            </div>
            <div class="line-popup"></div>
            </div>
            `
            )
            .openOn(MapBi);
        } else {
          popup
            .setLatLng([targetAtt.center_lat, targetAtt.center_lng])
            .setContent(
              `<div class="parent-popup-enjoyment text-center"> 
            <div class="d-flex flex-column ">
            <span class="font-weight-bold">${targetAtt.city_name}</span>
            <div class="d-flex justify-content-center mt-1">
            </div>
            </div>
            <div class="line-popup"></div>
            </div>
            `
            )
            .openOn(MapBi);
        }
      }
    }
  }
}

function resetMapFeatureHighlight(e) {
  let targetAtt = e.target.feature.properties;
  let featureLayer = null;
  if (e.target) {
    featureLayer = e.target;
  } else {
    featureLayer = e;
  }
  iranMapGeo.resetStyle(featureLayer);
  keepMapFeatureColor = null;
  popup.remove();
}

function removeFeaturesFromMap() {
  if (iranMapGeo) {
    MapBi.removeLayer(iranMapGeo);
  }
}

function removeFeaturesCity() {
  if (fullCityGeoJSONTemp.features) {
    MapBi.removeLayer(iranCityMapGeo);
  }
}

function removeFeautureAllCity() {
  if (allCityGeoTemp.features) {
    MapBi.removeLayer(iranAllCityMapGeo);
  }
}
async function showAllCityTileOnMap() {
  //clear filters
  $('select[name="filter-province"]').val(0);
  $('select[name="filter-city"]').empty();
  $('select[name="filter-city"]').append(
    `<option value="0">انتخاب شهرستان</option>`
  );
  $('select[name="filter-city"]').val(0);

  removeFeaturesCity();
  removeFeautureAllCity();
  removeFeaturesFromMap();
  let AllCityOnMap = [];
  allCityGeoTemp.type = "FeatureCollection";
  $.each(fullCityGeoJSON.features, function (key, value) {
    AllCityOnMap.push(value);
  });
  allCityGeoTemp.features = AllCityOnMap;
  addAllCityToMap();
  allCityCount = 0;
}

function addAllCityToMap() {
  showLegendOnMap(curentValueAllCity);
  keepMapFeatureColor = null;
  if (allCityGeoTemp) {
    iranAllCityMapGeo = L.geoJson(allCityGeoTemp, {
      style: initStyleAllCityMapFeatures,
      onEachFeature: onEachAllCityFeature,
    });
    iranAllCityMapGeo.addTo(MapBi);
  }
}

function initStyleAllCityMapFeatures() {
  let getRandom = getrandomALlColor(fillColorAllCity(allCityCount));
  let makeStyle = {
    fillColor: getRandom.color,
    weight: 2,
    opacity: 1,
    color: "white",
    fillOpacity: 0.5,
  };
  if (allCityCount == allCityGeoTemp.features.length) {
    allCityCount = 0;
  }
  allCityCount++;
  return makeStyle;
}

function getrandomALlColor(arrayNum) {
  if (keepMapFeatureColor) {
    return {
      num: -1,
      color: keepMapFeatureColor,
    };
  } else {
    var colors = {};
    if (currentActionId == RAHDARI_PROJECTS_ID) {
      if (arrayNum.keyvalue == null) {
        colors = {
          num: arrayNum.keyvalue,
          color: "#B2B1B9",
        };
      } else if (arrayNum.keyvalue <= 40)
        colors = {
          num: arrayNum.keyvalue,
          color: "#FF0000",
        };
      else if (arrayNum.keyvalue < 70)
        colors = {
          num: arrayNum.keyvalue,
          color: "#FFCC00",
        };
      else
        colors = {
          num: arrayNum.keyvalue,
          color: "#13BB51",
        };
    } else {
      var minOfData = Math.min(...AllValueCity);
      var maxOfData = Math.max(...AllValueCity);
      var quarter = Math.round((maxOfData - minOfData) / 3);
      if (arrayNum.keyvalue == null) {
        colors = {
          num: arrayNum.keyvalue,
          color: "#B2B1B9",
        };
      } else if (arrayNum.keyvalue <= minOfData + quarter)
        colors = {
          num: arrayNum.keyvalue,
          color: "#FF0000",
        };
      else if (arrayNum.keyvalue < maxOfData - quarter)
        colors = {
          num: arrayNum.keyvalue,
          color: "#FFCC00",
        };
      else
        colors = {
          num: arrayNum.keyvalue,
          color: "#13BB51",
        };
    }
    return colors;
  }
}

function fillColorAllCity(featureRow) {
  for (let i = 0; i < allCityGeoTemp.features.length; i++) {
    if (i == featureRow) {
      for (let j = 0; j < AllcityArray.length; j++) {
        if (
          AllcityArray[j].namevalue ==
          allCityGeoTemp.features[i].properties.city_id
        ) {
          AllValueCity.push(AllcityArray[j].keyvalue);
          AllCityArrayPopUp.push(AllcityArray[j]);
          return AllcityArray[j];
        }
      }
    }
  }
}

function onEachAllCityFeature(feature, featureLayer) {
  featureLayer.on({
    mouseover: highlightMapFeature,
    mouseout: resetMapFeatureHighlight,
  });
}

function returnToHomeOnMap() {
  allCityFlag = 0;
  currentActionId = DEFAULT_ACTION_ID;

  //clear buttonActions
  $(".btn-action-box").removeClass("active");

  //update this button
  $('.btn-action-box[data-action-id="' + currentActionId + '"]').addClass(
    "active"
  );
  //clear filters
  $('select[name="filter-province"]').val(0);
  $('select[name="filter-city"]').empty();
  $('select[name="filter-city"]').append(
    `<option value="0">انتخاب شهرستان</option>`
  );
  $('select[name="filter-city"]').val(0);
  $('select[name="filter-year"]').val(
    $('.btn-action-box[data-action-id="' + currentActionId + '"]').data(
      "resetYear"
    )
      ? DEFALUT_YEAR
      : $('.btn-action-box[data-action-id="' + currentActionId + '"]').data(
          "defaultYear"
        )
  );
  $('select[name="filter-month"]').val(0);
  $('input[name="filter-date-from"]').val("");
  $('input[name="filter-date-to"]').val("");

  //check disabled filter
  if (
    $.inArray(
      currentActionId,
      $('select[name="filter-province"]').data("disable")
    ) != -1
  )
    $('select[name="filter-province"]').val(0).attr("disabled", "disabled");
  else $('select[name="filter-province"]').removeAttr("disabled");

  if (
    $.inArray(
      currentActionId,
      $('select[name="filter-city"]').data("disable")
    ) != -1
  )
    $('select[name="filter-city"]').val(0).attr("disabled", "disabled");
  else $('select[name="filter-city"]').removeAttr("disabled");

  if (
    $.inArray(
      currentActionId,
      $('select[name="filter-year"]').data("disable")
    ) != -1
  ) {
    $('select[name="filter-year"]').attr("disabled", "disabled");
    $('.btn-action-box[data-reset-year="true"]').data(
      "defaultYear",
      DEFALUT_YEAR
    );
  } else $('select[name="filter-year"]').removeAttr("disabled");

  if (
    $.inArray(
      currentActionId,
      $('select[name="filter-month"]').data("disable")
    ) != -1
  )
    $('select[name="filter-month"]').val(0).attr("disabled", "disabled");
  else $('select[name="filter-month"]').removeAttr("disabled");

  if (
    $.inArray(
      currentActionId,
      $('input[name="filter-date-from"]').data("disable")
    ) != -1
  )
    $('input[name="filter-date-from"]').val("").attr("disabled", "disabled");
  else $('input[name="filter-date-from"]').removeAttr("disabled");

  if (
    $.inArray(
      currentActionId,
      $('input[name="filter-date-to"]').data("disable")
    ) != -1
  )
    $('input[name="filter-date-to"]').val("").attr("disabled", "disabled");
  else $('input[name="filter-date-to"]').removeAttr("disabled");

  //update current filter variables
  currentFilterProvince = $('select[name="filter-province"]').val();
  currentFilterCity = $('select[name="filter-city"]').val();
  currentFilterYear = $('select[name="filter-year"]').val();
  currentFilterMonth = $('select[name="filter-month"]').val();
  currentFilterFromDate = $('input[name="filter-date-from"]').val();
  currentFilterToDate = $('input[name="filter-date-to"]').val();

  $('.btn-action-box[data-reset-year="true"]').data(
    "defaultYear",
    DEFALUT_YEAR
  );

  //clear charts box
  $(".charts-box").attr("aria-display", "hide");

  //show current charts box
  $('.charts-box[data-action-id="' + currentActionId + '"]').attr(
    "aria-display",
    "show"
  );

  //call lifeCycle
  lifeCycle({
    sync: false,
  });
}

function returnToProvinceOnMap() {
  allCityFlag = 0;
  //clear filters
  $('select[name="filter-province"]').val(0);
  $('select[name="filter-city"]').empty();
  $('select[name="filter-city"]').append(
    `<option value="0">انتخاب شهرستان</option>`
  );
  $('select[name="filter-city"]').val(0);

  //update current filter variables
  currentFilterProvince = $('select[name="filter-province"]').val();
  currentFilterCity = $('select[name="filter-city"]').val();

  //call lifeCycle
  lifeCycle({
    sync: false,
  });
}
function showLegendOnMap(data) {
  var minNum;
  var maxNum;
  var quarter;
  var firstQuarter;
  var secondQuarter;
  $(".map-guid").empty();
  if (currentActionId == 1) {
    minNum = 0;
    maxNum = 100;
    firstQuarter = 40;
    secondQuarter = 70;
  } else {
    minNum = Math.min(...data);
    maxNum = Math.max(...data);
    quarter = Math.round((maxNum - minNum) / 3);
    firstQuarter = minNum + quarter;
    secondQuarter = maxNum - quarter;
  }
  $(".map-guid").append(`<p class="text-center">راهنمای نقشه</p>
  <p>
      <i class="fa fa-circle" aria-hidden="true" style="color: #FF0000;"></i>
     ${minNum}  تا ${firstQuarter}
  </p>
  <p>
      <i class="fa fa-circle" aria-hidden="true" style="color: #FFCC00;"></i>
       ${firstQuarter}  تا ${secondQuarter}
  </p>
  <p>
      <i class="fa fa-circle" aria-hidden="true" style="color: #13BB51;"></i>
       ${secondQuarter}  تا ${maxNum}
  </p>`);
}