list_province = []
var iranMapGeo = null;
var iranCityMapGeo = null;
var iranArrayCount = 0;
var iranNameArray = [];
var flagPopup = 0;
var fullCityGeoJSONTemp = new Object();
var flag_li_city = 0;
var number_data_city_persent;
var datacity;

var feaLayer = []

$(document).ready(function () {
  $.ajax({
    url: "https://rms.rmto.ir/public/bama-homepage",
    type: "GET",
    cache: false,
    success: function (result) {
      console.log(result);
      ShowBi(result);
    },
    error: function (error) {
      console.log(error);
    },
  });


  init_province_filter();
  $('.counter').each(function () {
    var $this = $(this),
      countTo = $this.attr('data-count');

    $({ countNum: $this.text() }).animate({
      countNum: countTo
    },

      {

        duration: 3000,
        easing: 'linear',
        step: function () {
          $this.text(Math.floor(this.countNum));
        },
        complete: function () {
          $this.text(this.countNum);
        }
      });
  });




  // if (!$(".leaflet-routing-container-hide").length > 0)
  //   $(".leaflet-routing-collapse-btn").click();
  // Show Camera Province Box
  // if ($(".provincialcamera").css("left") < "0") {
  $(".provincialcamera").css("left", "20px");
  $(".traffic-box > .form-map > svg #iran .map-selected").removeClass(
    "map-selected"
  );
  $("#map-traffic-select").val("00");

  // if (windowWidth <= 768) {
  //   $(".traffic-box").css("left", "-310px");
  //   $(".maincoridr").css("left", "-95%");
  //   $(".emergencyNum").css("left", "-95%");
  //   $(".relatedWebsites").css("left", "-95%");
  //   $(".onlinetraffic").css("left", "-95%");
  //   $(".tripTime").css("left", "-95%");
  // } else {
  //   $(".traffic-box").css("left", "-40%");
  //   if (windowWidth <= 992) {
  //     $(".maincoridr").css("left", "-65%");
  //   } else {
  //     $(".maincoridr").css("left", "-40%");
  //   }
  //   $(".emergencyNum").css("left", "-40%");
  //   $(".relatedWebsites").css("left", "-30%");
  //   $(".onlinetraffic").css("left", "-40%");
  //   $(".tripTime").css("left", "-60%");
  // }

  // Get IRAN Map SVG if we didn't before.
  // if (!$(".provincialcamera > .form-map > svg #iran").length) {
  // cameraSpinner.removeAttribute("hidden");
  $.ajax({
    url: "https://141.ir/iranmap",
    type: "GET",
  }).done(function (data) {

    console.log("we are we are rock u");
    // cameraSpinner.setAttribute("hidden", "");
    $(".provincialcamera > .form-map").html(
      // '<span class="tooltiptextmap">Tooltip text</span>'
      //  + 
      data
    );

    $(".provincialcamera > .form-map > svg #iran > path").mousemove(
      function (event) {
        let left =
          event.pageX -
          $(".provincialcamera > .form-map").offset().left +
          20;
        let top =
          event.pageY - $(".provincialcamera > .form-map").offset().top;
        let mapSelectedId = $(this).attr("id").substring(3);
        $(".provincialcamera > .form-map > .tooltiptextmap").text(
          $("#map-traffic-select [value=" + mapSelectedId + "]").text()
        );
        $(".provincialcamera > .form-map > .tooltiptextmap")
          .css({ top: top, left: left })
          .show();
      }
    );
    $(".provincialcamera > .form-map > svg #iran > path").mouseout(
      function () {
        $(".provincialcamera > .form-map > .tooltiptextmap").hide();
      }
    );

    $(".provincialcamera > .form-map > svg #iran path").on(
      "click",
      function () {
        $(
          ".provincialcamera > .form-map > svg #iran .map-selected"
        ).removeClass("map-selected");
        $(this).addClass("map-selected");
        let mapSelectedId = $(this).attr("id").substring(3);
        $("#map-camera-select").val(mapSelectedId);
        let provinceSelectedId = $("#map-camera-select")
          .children("option:selected")
          .attr("provinceId");
        let provinceSelectedLat = $("#map-camera-select")
          .children("option:selected")
          .attr("lat");
        let provinceSelectedLong = $("#map-camera-select")
          .children("option:selected")
          .attr("long");
        showCameraSlider(
          0,
          "/camera",
          provinceSelectedId,
          provinceSelectedLat,
          provinceSelectedLong
        );
      }
    );
  });
  // }
  // }

  // else {
  //   if (windowWidth <= "768") {
  //     $(".provincialcamera").css("left", "-310px");
  //   } else {
  //     $(".provincialcamera").css("left", "-40%");
  //   }
  //   $(
  //     ".provincialcamera > .form-map > svg #iran .map-selected"
  //   ).removeClass("map-selected");
  //   $("#map-camera-select").val("00");
  // }



  // $("#Barkhord").on("click", function (e) {
  //   e.preventDefault();

  function loadIranGeoJson(callback) {
    // showLoaderScreen();
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open("GET", "https://141.ir/api/provinces35geojson", true);
    xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
        //hideLoaderScreen();
        callback(xobj.responseText);
      }
    };
    xobj.send(null);
  }

  function loadCityGeoJson(callback) {
    //showLoaderScreen();
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open("GET", "https://141.ir/api/cities430geojson", true);
    xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
        // hideLoaderScreen();
        callback(xobj.responseText);
      }
    };
    xobj.send(null);
  }

  function initIranGeoJson() {
    loadIranGeoJson(function (response) {
      iranGeoJSON = JSON.parse(response);

      setBokhorProcess = 1;
      // removeFeaturesFromMap();
      // if (setAbrarProcess) {
      //   setAbrarProcess = 0;
      //   hideAbrarChartStat();
      //   setTimeout(function () {
      //     showBokhorChartStat();
      //   }, 500);
      // } else {
      showBokhorChartStat();
      // }
    });
  }

  function initCityGeoJson() {
    loadCityGeoJson(function (response) {
      fullCityGeoJSON = JSON.parse(response);

      setBokhorProcess = 1;
      // removeFeaturesFromMap();
      // if (setAbrarProcess) {
      //   setAbrarProcess = 0;
      //   hideAbrarChartStat();
      //   setTimeout(function () {
      //     showBokhorChartStat();
      //   }, 500);
      // } else {
      showBokhorChartStat();
      // }

    });
  }


  initIranGeoJson()
  initCityGeoJson()




});

var bounds = [
  [42.9130026312, 75.6166317076],
  [20.5782370061, 30.5092252948],
];

const MAP_ENDPOINT = "https://testmap.141.ir";
const MAP_MIN_ZOOM = 4.2;
const MAP_MAX_ZOOM = 15;

var map = L.map("map", {
  maxBounds: bounds,
  minZoom: MAP_MIN_ZOOM,
  //maxZoom: MAP_MAX_ZOOM,
  zoomControl: false,
}).setView([32.4279, 53.6880], 4.2);

L.tileLayer(MAP_ENDPOINT + "/141map/{z}/{x}/{y}.png", {}).addTo(map);



var chartColors = [
  "#4929ac",
  "#202be0",
  "#4962ac",
  "#4286d3",
  "#000c7f",
  "#2aa9db",
  "#8690ef",
  "#00587a",
  "#88b3cb",
  "rgba(255, 64, 255, 1)",
  "rgba(159, 159, 64, 1)",
  "#ff5c0f",
  "#4962ac",
];




var progressBar = document.getElementById("progressBar")
var bar = new ProgressBar.SemiCircle(progressBar, {
  strokeWidth: 20,
  color: '#FFEA82',
  trailColor: '#FFEA82',
  trailWidth: 20,
  easing: 'easeInOut',
  duration: 1400,
  svgStyle: null,
  text: {
    value: '',
    alignToBottom: false
  },
  from: { color: '#FFEA82' },
  to: { color: '#ED6A5A' },
  // Set default step function for all animate calls
  step: (state, bar) => {
    bar.path.setAttribute('stroke', state.color);
    var value = Math.round(bar.value() * 100);
    if (value === 0) {
      bar.setText('');
    } else {
      bar.setText(value);
    }

    bar.text.style.color = state.color;
  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '1rem';

bar.animate(0.67);  // Number from 0.0 to 1.0



var ThirdChart = document.getElementById("myChartThird").getContext("2d");

var myChartThird = new Chart(ThirdChart, {
  type: "horizontalBar",
  data: {
    datasets: [
      {
        data: [
          100,
          98,
          87,
        ],
        backgroundColor: [
          chartColors[0],
          chartColors[1],
          chartColors[2],
        ],
        label: "hey"
      },
    ],
    labels: [
      "",
      "",
      "",
    ],
  },

  options: {
    scales: {
      yAxes: [{
        ticks: {
          suggestedMin: 0,
          suggestedMax: 1017
        }
      }],
      xAxes: [{
        ticks: {
          min: 0
        }
      }]
    },
    plugins: {
      datalabels: {
        anchor: "center",
        align: "center",
        offset: 10,
        color: "#fffff",
      },
    },
    responsive: true,
    legend: {
      display: false,
      position: "left",
    },
    title: {
      display: false,
      text: "تفکیک پروژه های راه روستایی",
      position: "bottom",
    },
    tooltips: {
      enabled: false,
    },
  },
});



var ForthChart = document.getElementById("myChartForth").getContext("2d");

var myChartForth = new Chart(ForthChart, {
  type: "horizontalBar",
  data: {
    datasets: [
      {
        data: [
          127,
          110,
          95,
        ],
        backgroundColor: [
          chartColors[0],
          chartColors[1],
          chartColors[2],
        ],
        label: "hey"
      },
    ],
    labels: [
      "",
      "",
      "",
    ],
  },

  options: {
    scales: {
      yAxes: [{
        ticks: {
          suggestedMin: 0,
          suggestedMax: 1017
        }
      }],
      xAxes: [{
        ticks: {
          min: 0
        }
      }]
    },
    plugins: {
      datalabels: {
        anchor: "center",
        align: "center",
        offset: 10,
        color: "#fffff",
      },
    },
    responsive: true,
    legend: {
      display: false,
      position: "left",
    },
    title: {
      display: false,
      text: "تفکیک پروژه های راه روستایی",
      position: "bottom",
    },
    tooltips: {
      enabled: false,
    },
  },
});

var FifthChart = document.getElementById("myChartFifth").getContext("2d");

var myChartFifth = new Chart(FifthChart, {
  type: "bar",
  data: {
    datasets: [
      {
        data: [
          127,
          110,
          95,
        ],
        backgroundColor: [
          chartColors[0],
          chartColors[1],
          chartColors[2],
        ],
        label: "hey"
      },
      {
        data: [
          127,
          110,
          95,
        ],
        backgroundColor: [
          chartColors[3],
          chartColors[4],
          chartColors[5],
        ],
        label: "hey"
      },
      {
        data: [
          127,
          110,
          95,
        ],
        backgroundColor: [
          chartColors[6],
          chartColors[7],
          chartColors[8],
        ],
        label: "hey"
      },
      {
        data: [
          127,
          110,
          95,
        ],
        backgroundColor: [
          chartColors[9],
          chartColors[10],
          chartColors[11],
        ],
        label: "hey"
      },
    ],
    labels: [
      "",
      "",
      "",
    ],
  },

  options: {
    scales: {
      yAxes: [{
        stacked: true,
        ticks: {
          suggestedMin: 0,
          suggestedMax: 1017

        }
      }],
      xAxes: [{
        stacked: true,
        ticks: {
          min: 0
        }
      }]
    },
    plugins: {
      datalabels: {
        anchor: "center",
        align: "center",
        offset: 10,
        color: "#fffff",
      },
    },
    responsive: true,
    legend: {
      display: false,
      position: "left",
    },
    title: {
      display: false,
      text: "تفکیک پروژه های راه روستایی",
      position: "bottom",
    },
    tooltips: {
      enabled: false,
    },
  },
});


var SixthChart = document.getElementById("myChartSixth").getContext("2d");

var myChartSixth = new Chart(SixthChart, {
  type: "horizontalBar",
  data: {
    datasets: [
      {
        data: [
          711,
          605,
          511,
          309,
          220,
          198,
          178,
          136,
          135,
          134,
          118,
          109,
          97,
          87,
          65,
          45,
        ],
        backgroundColor: [
          chartColors[0],
          chartColors[1],
          chartColors[2],
          chartColors[3],
          chartColors[4],
          chartColors[5],
          chartColors[6],
          chartColors[7],
          chartColors[8],
          chartColors[9],
          chartColors[10],
          chartColors[11],
          chartColors[12],
          chartColors[0],
          chartColors[1],
          chartColors[2],
        ],
        label: "hey"
      },
    ],
    labels: [
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
    ],
  },

  options: {
    scales: {
      yAxes: [{
        ticks: {
          suggestedMin: 0,
          suggestedMax: 1017
        }
      }],
      xAxes: [{
        ticks: {
          min: 0
        }
      }]
    },
    plugins: {
      datalabels: {
        anchor: "center",
        align: "center",
        offset: 10,
        color: "#fffff",
      },
    },
    responsive: true,
    legend: {
      display: false,
      position: "left",
    },
    title: {
      display: false,
      text: "تفکیک پروژه های راه روستایی",
      position: "bottom",
    },
    tooltips: {
      enabled: false,
    },
  },
});


var SeventhChart = document.getElementById("myChartSeventh").getContext("2d");

var myChartSeventh = new Chart(SeventhChart, {
  type: "doughnut",
  data: {
    datasets: [
      {
        data: [
          311,
          1211,
          609,
          514,
          1017,
        ],
        backgroundColor: [
          chartColors[0],
          chartColors[1],
          chartColors[2],
          chartColors[3],
          chartColors[4],
        ],
      },
    ],
    labels: [

      "راهدارخانه (بهسازی و نوسازی)",
      "ابنیه فنی (نگهداری و ساخت )",
      "رفع نقاط حادثه خیز / پرتصادف",
      "ارتقای ایمنی راه ",
      "روکش آسفالت (نگهداری راه )",
    ],
  },
  options: {
    // scales: {
    //     yAxes: [{
    //         ticks: {
    //             suggestedMin: 0,
    //             suggestedMax: 1017
    //         }
    //     }]
    // },
    plugins: {
      datalabels: {
        anchor: "center",
        align: "center",
        offset: 10,
        color: "#fffff",
      },
    },
    responsive: true,
    legend: {
      display: false,
      position: "left",
    },
    title: {
      display: false,
      text: "تفکیک پروژه های راه روستایی",
      position: "bottom",
    },
    tooltips: {
      enabled: true,
    },
  },
});



var EighthChart = document.getElementById("myChartEighth").getContext("2d");

var myChartEighth = new Chart(EighthChart, {
  type: "bar",
  data: {
    datasets: [
      {
        data: [
          -16,
          -30, 60,
        ],
        backgroundColor: [
          chartColors[0],
          chartColors[1],
        ],
        label: "hey"
      },
      {
        data: [
          127,
          110,
        ],
        backgroundColor: [
          chartColors[2],
          chartColors[3],
        ],
        label: "hey"
      },
    ],
    labels: [
      "",
      "",
    ],
  },

  options: {
    scales: {
      yAxes: [{
        stacked: true,
        ticks: {
          suggestedMin: 0,
          suggestedMax: 100

        }
      }],
      xAxes: [{
        stacked: true,
        ticks: {
          min: 0
        }
      }]
    },
    plugins: {
      datalabels: {
        anchor: "center",
        align: "center",
        offset: 10,
        color: "#fffff",
      },
    },
    responsive: true,
    legend: {
      display: false,
      position: "left",
    },
    title: {
      display: false,
      text: "تفکیک پروژه های راه روستایی",
      position: "bottom",
    },
    tooltips: {
      enabled: false,
    },
  },
});

var NinthChart = document.getElementById("myChartNinth").getContext("2d");

var myChartNinth = new Chart(NinthChart, {
  type: "bar",
  data: {
    datasets: [
      {
        data: [
          -50,
          -80,
        ],
        backgroundColor: [
          chartColors[4],
          chartColors[5],
        ],
        label: "hey"
      },
      {
        data: [
          91,
          19,
        ],
        backgroundColor: [
          chartColors[6],
          chartColors[7],
        ],
        label: "hey"
      },
    ],
    labels: [
      "",
      "",
    ],
  },

  options: {
    scales: {
      yAxes: [{
        stacked: true,
        ticks: {
          suggestedMin: 0,
          suggestedMax: 100

        }
      }],
      xAxes: [{
        stacked: true,
        ticks: {
          min: 0
        }
      }]
    },
    plugins: {
      datalabels: {
        anchor: "center",
        align: "center",
        offset: 10,
        color: "#fffff",
      },
    },
    responsive: true,
    legend: {
      display: false,
      position: "left",
    },
    title: {
      display: false,
      text: "تفکیک پروژه های راه روستایی",
      position: "bottom",
    },
    tooltips: {
      enabled: false,
    },
  },
});


function init_province_filter() {

  $.ajax({
    url: "https://rms.rmto.ir/public/contents/provinces",
    type: "GET",
    success: function (data) {
      list_province = data.data;
      for (let index = 0; index < list_province.length; index++) {
        $("#select-province").append(
          "\
              <option value=" +
          list_province[index].id +
          ">" +
          list_province[index].name_fa +
          "</option>\
            "
        );
      }
    },
  });
}


function init_town_filter() {
  let hold_idSelect = $("#select-province").val();
  console.log("damad");

  $.ajax({
    url: "https://rms.rmto.ir/public/contents/provinces/" + hold_idSelect,
    //  hold_idSelect,
    type: "GET",
    success: function (data) {
      list_citys = data.data;
      //ppp
      // $("#select-city1").val(0).trigger("change");
      $("#select-city").html("");
      for (let index = 0; index < list_citys.length; index++) {
        $("#select-city").append(
          "\
            <option value=" +
          list_citys[index].id +
          ">" +
          list_citys[index].name_fa +
          "</option>\
          "
        );
      }
    },
  });

  // if ($("#select-province1").val() != 0) {
  //   $(".btn-increase").prop("disabled", false);
  // }
  // $(".btn-increase").on("click", function () {
  //   $("#append-input-forFilter2").removeClass("d-none");
  // });
}

$("#select-province").on("change", function () {
  if ($("#select-province").val() != "0") {

    init_town_filter();
    selectedProvinceId = $("#select-province").val()
    zoomMapToFeature(feaLayer[list_province[selectedProvinceId - 1].abrar_feature])

  }
});



frommDate = $("#dateFrom").persianDatepicker({
  format: "YYYY/MM/DD",
  autoClose: true,
  onSelect: function (unix) {
    frommDate.touched = true;

    $("#datepicktodate").prop("disabled", "");

    if (
      frommDate.getState().selected.unixDate >=
      tooDate.getState().selected.unixDate
    ) {
      tooDate.setDate(frommDate.getState().selected.unixDate);
    }

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

      tooDate.options = { minDate: unix };

      if (tooDate.touched) {
        tooDate.setDate(cachedValue);
      }
    }
  },
});

tooDate = $("#dateTo").persianDatepicker({
  format: "YYYY/MM/DD",
  autoClose: true,
  onSelect: function (unix) {
    tooDate.touched = true;

    /*if (fromDate && fromDate.options && fromDate.options.maxDate != unix) {

      let cachedValue = fromDate.getState().selected.unixDate;

      fromDate.options = { maxDate: unix };

      if (fromDate.touched) {

        fromDate.setDate(cachedValue);

      }

    }*/
  },
});


//pahne bandi az injaaaaaaa



function showBokhorChartStat() {
  let statItem = null;
  let statMenu = $(".menu-stat-list > .stat-list");

  $(".right-menu-stat-chart > .menu-stat-title").text(
    "برخورداری راه‌های روستایی آسفالته کشور"
  );

  for (let i = 0; i < 35; i++) {
    let statItemList = $('<li class="stat-list-li" indexid="' + i + '"></li>');
    statItem = $('<div id="info' + i + '" class="stat-list-item"></div>');
    statItem.append(
      '<span class="item-title">' +
      list_province[i].name_fa +
      "</span>"
    );
    statItem.append(
      '<span class="item-stat">' +
      list_province[i].abrar_process +
      "٪" +
      "</span>"
    );
    if (list_province[i].abrar_process >= 83) {
      statItem.addClass("stat-item-top-1");
    } else if (list_province[i].abrar_process >= 67) {
      statItem.addClass("stat-item-top-2");
    } else if (list_province[i].abrar_process >= 50) {
      statItem.addClass("stat-item-top-3");
    } else if (list_province[i].abrar_process >= 31) {
      statItem.addClass("stat-item-top-4");
    } else {
      statItem.addClass("stat-item-top-5");
    }
    statItem.css("width", list_province[i].abrar_process + "%");
    statMenu.append(statItemList.append(statItem));
  }

  $(".stat-list-li").on({
    mouseenter: function () {
      showBokhorProvinceInfo(parseInt($(this).attr("indexid")), 1);
    },
    mouseleave: function () {
      showBokhorProvinceInfo(parseInt($(this).attr("indexid")), 0);
    },
  });

  $(".stat-list-li").on("click", function () {
    showscity(parseInt($(this).attr("indexid")));
    zoomBokhorProvinceInfo(parseInt($(this).attr("indexid")));
    flagPopupli = 1;
  });

  handleBokhorButtonClick(1);
  addFeaturesToMap();
}


function hideAbrarChartStat() {
  handleAbrarButtonClick(0);
}

function handleAbrarButtonClick(openStat = 1) {
  if (openStat) {
    $(".right-menu-stat-chart").css("top", "88px");
    $(".left-menu-stat-chart-info").css("top", "88px");
  } else {
    $(".right-menu-stat-chart").css("top", "-858px");
    $(".left-menu-stat-chart-info").css("top", "-308px");
    emptyStatItems();
    removeFeaturesFromMap();
  }
}

function handleBokhorButtonClick(openStat = 1) {
  if (openStat) {
    $(".right-menu-stat-chart").css("top", "88px");
    $(".left-menu-stat-chart-info").css("top", "88px");
  } else {
    $(".right-menu-stat-chart").css("top", "-858px");
    $(".left-menu-stat-chart-info").css("top", "-308px");
    emptyStatItems();
    removeFeaturesFromMap();
  }
}

function addFeaturesToMap() {
  removeCityFeaturesFromMap();
  removeFeaturesFromMap();
  remove141Layer();
  keepMapFeatureColor = null;

  if (!setBokhorProcess && iranGeoJSON) {
    iranMapGeo = L.geoJson(iranGeoJSON, {
      style: initStyleMapFeatures,
      onEachFeature: onEachFeature,
    });
    iranMapGeo.addTo(map);
  } else {
    setTimeout(function () {
      iranMapGeo = L.geoJson(iranGeoJSON, {
        style: initStyleMapFeatures,
        onEachFeature: onEachFeature,
      });
      iranMapGeo.addTo(map);
    }, 500);
  }

  // map.flyTo([32.62, 53.25], 6);
}

function removeCityFeaturesFromMap() {
  if (iranCityMapGeo) {
    map.removeLayer(iranCityMapGeo);
    //iranCityMapGeo = null;
  }
}

function removeFeaturesFromMap() {
  if (iranMapGeo) {
    map.removeLayer(iranMapGeo);
    //iranMapGeo = null;
  }
}

function remove141Layer() {
  // if (marker141Layers != null) {
  //   marker141List = [];
  //   map.removeLayer(marker141Layers);

  //   $(".left-menu-141 > .item-menu-141.item-141-active").removeClass(
  //     "item-141-active"
  //   );
  // }

  // if (marker141LayersWithoutCluster != null) {
  //   map.removeLayer(marker141LayersWithoutCluster);
  // }
}

function initStyleMapFeatures(feature) {
  let getRandom = null;

  // if (setAbrarProcess) {
  //   getRandom = getForArrayFeatureColor(
  //     findFeatureInAbrarItems(iranArrayCount).abrar_process
  //   );
  // } else 
  if (setBokhorProcess) {
    getRandom = getForArrayFeatureColor(
      findFeatureInBokhorItems(iranArrayCount).abrar_process
    );
  } else {
    getRandom = getRandomFeatureColor();
  }

  let makeStyle = {
    fillColor: getRandom.color,
    weight: 2,
    opacity: 1,
    color: "white",
    fillOpacity: 0.7,
  };

  if (getRandom.num != -1) {
    if (iranArrayCount == 35) {
      iranArrayCount = 0;
    }

    iranNameArray[iranArrayCount] = {
      name: feature.properties.province_name,
      feature: feature.properties.feature_id,
      random: getRandom.num,
    };

    iranNameArray.sort(function (itemA, itemB) {
      return itemB.random - itemA.random;
    });

    iranArrayCount++;
  }

  return makeStyle;
}


function onEachFeature(feature, featureLayer) {
  // feaLayer = featureLayer
  feaLayer.push(featureLayer);
  featureLayer.on({
    mouseover: highlightMapFeature,
    mouseout: resetMapFeatureHighlight,
    click: zoomMapToFeature(),
  });
}


function getForArrayFeatureColor(arrayNum) {
  if (keepMapFeatureColor) {
    return { num: -1, color: keepMapFeatureColor };
  } else {
    return arrayNum >= 83
      ? { num: arrayNum, color: "#a366ff" }
      : arrayNum >= 67
        ? { num: arrayNum, color: "#80b3ff" }
        : arrayNum >= 50
          ? { num: arrayNum, color: "#66cc66" }
          : arrayNum >= 31
            ? { num: arrayNum, color: "#ffeda0" }
            : { num: arrayNum, color: "#ff704d" };
  }
}
function findFeatureInBokhorItems(featureRow) {
  for (let i = 0; i < 35; i++) {
    if (list_province[i].abrar_feature == featureRow) {
      return list_province[i];
    }
  }
  return -1;
}

function highlightMapFeature(e) {
  let featureLayer = null;

  if (e.target) {
    featureLayer = e.target;
  } else {
    featureLayer = e;
  }

  keepMapFeatureColor = featureLayer.options.fillColor;

  featureLayer.setStyle({
    weight: 4,
    color: "#666",
    fillOpacity: 0.85,
  });

  if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
    featureLayer.bringToFront();
  }
  if (e.target) {
    var latpo =
      list_province[e.target.feature.properties.province_id - 1]
        .center_lat;
    var longpo =
      list_province[e.target.feature.properties.province_id - 1]
        .center_long;
    if (flagPopup == 0) {
      for (i = 0; i < list_province.length; i++) {
        if (
          list_province[i].id ==
          e.target.feature.properties.province_id
        ) {
          var numberpo = list_province[i].abrar_process;
          PopupHoverMap = L.popup();
          PopupHoverMap.setLatLng([latpo, longpo])
            .setContent(
              `<div class='d-flex flex-column'>
          <div class="popUpBox" style="font-family:IRANSans"><span style="color:#0051CD">مقدار</span><div class="popUpBoxContent">
          ${numberpo.toString()}%
             </div>
              </div>
              <a href=${list_province[i].abrar_link
              }  class="popUpBox click-popup_" style="font-family:IRANSans"><div class="popUpBoxContent">
              <i class="fas fa-hand-pointer"></i>
               </div>
             </a>
          </div>`
            )
            .openOn(map);
        }
      }
    }
  }
  //toooodo
  let all_li_right_side = $(".menu-stat-list .stat-list li.stat-list-li");
  for (var i = 0; i < all_li_right_side.length; i++) {
    if (e.target) {
      let provincehover = e.target.feature.properties.province_id;
      let lihover = $(all_li_right_side[i]).attr("indexid");
      let lihoverInt = parseInt(lihover);
      if (provincehover - 1 == lihoverInt) {
        if ($(all_li_right_side[i]).attr("indexid") == lihover) {
          $("#info" + lihoverInt).css("width", "100%");
          $("#info" + lihoverInt)
            .parent()
            .css("padding-right", "0px");
          $("#info" + lihoverInt).addClass("vibe_li");
        }
      }
    }
  }
  //End toooodo
  //toodo
  if (e.target) {
    let all_li_city = $(".menu-stat-list .stat-list li.stat-list-li");
    let city_li_hover = e.target.feature.properties.city_id;
    for (let i = 0; i < all_li_city.length; i++) {
      if (e.target) {
        let lihover_city = $(all_li_right_side[i]).attr("city_id");
        if (city_li_hover == lihover_city) {
          $("#infoCity" + lihover_city).css("width", "100%");
          $("#infoCity" + lihover_city)
            .parent()
            .css("padding-right", "0px");
          $("#infoCity" + lihover_city).addClass("vibe_li");
        }
      }
    }
  }
  //End toodoo
  //todoo
  //pooria now
  if (flag_li_city == 1) {
    if (e.target) {
      for (i = 0; i < list_province.length; i++) {
        if (
          list_province[i].id ==
          e.target.feature.properties.province_id
        ) {
          let PopupHoverMap = L.popup();
          console.log(number_data_city_persent);

          if (number_data_city_persent) {
            for (let i = 0; i < number_data_city_persent.length; i++) {
              if (
                number_data_city_persent[i].id ==
                e.target.feature.properties.city_id
              ) {
                console.log("hi hi");
                PopupHoverMap.setLatLng(e.latlng)
                  .setContent(
                    `<div class='d-flex flex-column'>
                <div class="popUpBox" style="font-family:IRANSans"><span style="color:#0051CD">مقدار</span><div class="popUpBoxContent">
                ${number_data_city_persent[i].abrar_process.toString()}%
                   </div>
                    </div>
                </div>`
                  )
                  .openOn(map);
              }
            }
          } else if (datacity) {
            for (let i = 0; i < datacity.length; i++) {
              if (datacity[i].id == e.target.feature.properties.city_id) {
                console.log("hi hi");
                PopupHoverMap.setLatLng(e.latlng)
                  .setContent(
                    `<div class='d-flex flex-column'>
                <div class="popUpBox" style="font-family:IRANSans"><span style="color:#0051CD">مقدار</span><div class="popUpBoxContent">
                ${datacity[i].abrar_process.toString()}%
                   </div>
                    </div>
                </div>`
                  )
                  .openOn(map);
              }
            }
          }
        }
      }
    }
  }
  //end pooria now
  //End todoo
}


function resetMapFeatureHighlight(e) {
  let featureLayer = null;

  if (e.target) {
    featureLayer = e.target;
  } else {
    featureLayer = e;
  }

  iranMapGeo.resetStyle(featureLayer);
  keepMapFeatureColor = null;
  //toooodo
  let all_li_right_side = $(".menu-stat-list .stat-list li.stat-list-li");
  for (var i = 0; i < all_li_right_side.length; i++) {
    if (e.target) {
      let provincehover = e.target.feature.properties.province_id;
      let lihover = $(all_li_right_side[i]).attr("indexid");
      let lihoverInt = parseInt(lihover);
      if (provincehover - 1 == lihoverInt) {
        if ($(all_li_right_side[i]).attr("indexid") == lihover) {
          $("#info" + lihoverInt).css(
            "width",
            list_province[lihover].abrar_process + "%"
          );
          $("#info" + lihoverInt).parent().css("padding-right", "105px");
          $("#info" + lihoverInt).removeClass("vibe_li");
        }
      }
    }
  }
  //End toooodo
  //toodo
  var idkol_city;
  var all_li_city;
  var loop_get_li;
  if (e.target) {
    all_li_city = $(".menu-stat-list .stat-list li.stat-list-li");
    idkol_city = e.target.feature.properties.province_id;
    $.ajax({
      url: "https://rms.rmto.ir/public/contents/provinces/" + idkol_city,
      type: "GET",
      success: function (data) {
        var data_city_li_next = data.data;
        for (let i = 0; i < data_city_li_next.length; i++) {
          for (let i = 0; i < all_li_city.length; i++) {
            loop_get_li = $(all_li_city[i]).attr("city_id");
            if (e.target.feature.properties.city_id == loop_get_li) {
              if (data_city_li_next[i]) {
                $("#infoCity" + loop_get_li).css(
                  "width",
                  data_city_li_next[i].abrar_process + "%"
                );
                $("#infoCity" + loop_get_li).parent().css("padding-right", "105px");
                $("#infoCity" + loop_get_li).removeClass("vibe_li");
              }
            }
          }
        }
      },
    });
  }

  //End toodoo
}


function zoomMapToFeature(e) {
  let featureLayer = null;
  let featuresLayerCity = [];

  if (e.target) {
    featureLayer = e.target;
  } else {
    featureLayer = e;
  }

  console.log("heyaw", e)

  map.flyToBounds(featureLayer.getBounds());

  // showLoaderScreen();
  removeFeaturesFromMap();
  removeCityFeaturesFromMap();
  fullCityGeoJSONTemp.type = "FeatureCollection";

  $.each(fullCityGeoJSON.features, function (key, value) {
    if (
      value &&
      featureLayer.feature.properties.province_id ===
      value.properties.province_id
    ) {
      featuresLayerCity.push(value);
    } else {
      //
    }
  });

  setTimeout(function () {
    fullCityGeoJSONTemp.features = featuresLayerCity;
    addCityFeaturesToMap();
  }, 1000);

  setTimeout(function () {
    // hideLoaderScreen();
  }, 1500);
  var all_li_right_side = $(".menu-stat-list .stat-list li.stat-list-li");
  for (var i = 0; i < all_li_right_side.length; i++) {
    var provinceclick = e.target.feature.properties.province_id;
    var liclick = $(all_li_right_side[i]).attr("indexid");
    if (provinceclick - 1 == liclick) {
      var ppp = $(all_li_right_side[provinceclick - 1]);
      ppp.click();
    }
  }
  //pooria now
  if (e.target) {
    console.log();
    $.ajax({
      url:
        "https://rms.rmto.ir/public/contents/provinces/" +
        e.target.feature.properties.province_id,
      type: "GET",
      success: function (data) {
        number_data_city_persent = data.data;
      },
    });
  }
  // end pooria now
  $(".stat-list-li").remove();
  flagPopup = 1;
  flag_li_city = 1;
}

function addCityFeaturesToMap() {
  remove141Layer();
  removeCityFeaturesFromMap();
  removeFeaturesFromMap();
  keepMapFeatureColor = null;

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

function initStyleCityMapFeatures(feature) {
  let getRandom = getRandomFeatureColor();

  let makeStyle = {
    fillColor: getRandom.color,
    weight: 2,
    opacity: 1,
    color: "white",
    fillOpacity: 0.5,
  };

  return makeStyle;
}

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

function getRandomFeatureColor() {
  if (keepMapFeatureColor) {
    return { num: -1, color: keepMapFeatureColor };
  } else {
    let randomNum = Math.floor(Math.random() * 101);
    console.log(randomNum);
    return randomNum >= 83
      ? { num: randomNum, color: "#a366ff" }
      : randomNum >= 67
        ? { num: randomNum, color: "#2e86ab" }
        : randomNum >= 50
          ? { num: randomNum, color: "#66cc66" }
          : randomNum >= 31
            ? { num: randomNum, color: "#ffeda0" }
            : { num: randomNum, color: "#ff3f3f" };
  }
}

//pahne bandi end


function ShowBi(res) {
  // $("#showTitle").append(
  //   '<span class="count-this filteritem" style="font-size: 43px;">' +
  //   res.count_all +
  //   "</span>"
  // );
  // console.log(res.project_years[1395]);
  // $(".count-this").each(function () {
  //   // Start the counting from a specified number - in this case, 0!
  //   $(this)
  //     .prop("Counter", 0)
  //     .animate(
  //       {
  //         Counter: $(this).text(),
  //       },
  //       {
  //         // Speed of counter in ms, default animation style
  //         duration: 2000,
  //         easing: "swing",
  //         step: function (now) {
  //           // Round up the number
  //           $(this).text(Math.ceil(now));
  //         },
  //       }
  //     );
  // });

  var FirstChart = document.getElementById("myChartfirst").getContext("2d");

  var myChartFirst = new Chart(FirstChart, {
    type: "bar",
    data: {
      datasets: [
        {
          data: [
            res.counts.tollhouse_management_count,
            res.counts.technical_building_count,
            res.counts.upgrade_safety_count,
            res.counts.danger_prevention_count,
            res.counts.maintenance_project_count,
          ],
          backgroundColor: [
            chartColors[0],
            chartColors[1],
            chartColors[2],
            chartColors[3],
            chartColors[4],
          ],
        },
      ],
      labels: [
        "راهدارخانه (بهسازی و نوسازی)",
        "ابنیه فنی (نگهداری و ساخت )",
        "ارتقای ایمنی راه ",
        "   رفع نقاط حادثه خیز / پرتصادف",
        "روکش آسفالت (نگهداری راه )",
      ],
    },
    options: {
      onClick: (e) => {

        var firstPoint = myChartFirst.getElementAtEvent(e);

        if (firstPoint) {

          var label = myChartFirst.data.labels[firstPoint[0]._index];
          var value = myChartFirst.data.datasets[0].data[firstPoint[0]._index];

          console.log("roye mood ane");
          console.log(label);
          console.log(value);

        }

      },
      scales: {
        yAxes: [{
          ticks: {
            suggestedMin: 0,
            suggestedMax: 1017
          }
        }]
      },
      plugins: {
        datalabels: {
          anchor: "center",
          align: "center",
          offset: 10,
          color: "#fffff",
        },
      },
      responsive: true,
      legend: {
        display: false,
        position: "left",
      },
      title: {
        display: false,
        text: "تفکیک پروژه های راه روستایی",
        position: "bottom",
      },
      tooltips: {
        enabled: true,
      },
    },
  });


  var SecondChart = document.getElementById("myChartSecond").getContext("2d");

  var myChartSecond = new Chart(SecondChart, {
    type: "bar",
    data: {
      datasets: [
        {
          data: [
            res.project_status[8],
            res.project_status[7],
            res.project_status[6],
            res.project_status[5],
            res.project_status[4],
            res.project_status[3],
            res.project_status[2],
            res.project_status[1],
            res.project_status[0],
          ],
          backgroundColor: [
            chartColors[0],
            chartColors[1],
            chartColors[2],
            chartColors[3],
            chartColors[4],
            chartColors[5],
            chartColors[6],
            chartColors[7],
            chartColors[8],
          ],
        }
      ],
      labels: [
        "تکمیل و خاتمه یافته و بهره برداری شده ",
        "در حال آماده سازی برای افتتاح",
        "در حال اجرا متوقف",
        "در حال اجرا /فعال",
        "در حال تجهیز کارگاه",
        "در دست مناقصه",
        "در دست مطالعه و تهیه اسناد مناقصه",
        "در دست برنامه ریزی اولیه",
        "توسط استان بروزرسانی نشده ",
      ],
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            suggestedMin: 0,
            suggestedMax: 1017
          }
        }],
        xAxes: [{
          ticks: {
            display: false //this will remove only the label
          }
        }]
      },
      // plugins: {
      //   datalabels: {
      //     anchor: "center",
      //     align: "center",
      //     offset: 10,
      //     color: "#ff9999",
      //   },
      // },
      responsive: true,
      // legend: {
      //   display: true,
      //   position: "right",
      //   rtl: true,
      //   labels: {
      //     boxWidth: 13
      //   }
      // },
      legend: {
        display: false,
        position: "left",
        labels: {
          boxWidth: 13
        }
      },
      title: {
        display: false,
        text: "تفکیک پروژه های راه روستایی",
        position: "bottom",
      },
      tooltips: {
        enabled: true,
      },
    },
  });


  // myChartSecond.Legend.extend({
  //   afterFit: function() {
  //     this.width = this.height -10000;
  //   },
  // });

  // var SecondChartLeft = document
  //   .getElementById("myChartsecond")
  //   .getContext("2d");

  // var myChartSecLeft = new Chart(SecondChartLeft, {
  //   type: "pie",
  //   data: {
  //     datasets: [
  //       {
  //         data: [
  //           res.project_status[8],
  //           res.project_status[7],
  //           res.project_status[6],
  //           res.project_status[5],
  //           res.project_status[4],
  //           res.project_status[3],
  //           res.project_status[2],
  //           res.project_status[1],
  //           res.project_status[0],
  //         ],
  //         backgroundColor: [
  //           chartColors[0],
  //           chartColors[1],
  //           chartColors[2],
  //           chartColors[3],
  //           chartColors[4],
  //           chartColors[5],
  //           chartColors[6],
  //           chartColors[7],
  //           chartColors[8],
  //         ],
  //         label: "Dataset 1",
  //       },
  //     ],
  //     labels: [
  //       "تکمیل و خاتمه یافته و بهره برداری شده ",
  //       "در حال آماده سازی برای افتتاح",
  //       "در حال اجرا متوقف",
  //       "در حال اجرا /فعال",
  //       "در حال تجهیز کارگاه",
  //       "در دست مناقصه",
  //       "در دست مطالعه و تهیه اسناد مناقصه",
  //       "در دست برنامه ریزی اولیه",
  //       "توسط استان بروزرسانی نشده ",
  //     ],
  //   },
  //   options: {
  //     plugins: {
  //       datalabels: {
  //         anchor: "center",
  //         align: "end",
  //         offset: 10,
  //         color: "#fffff",
  //       },
  //     },
  //     responsive: true,
  //     legend: {
  //       display: true,
  //       position: "left",
  //     },
  //     title: {
  //       display: false,
  //       text: "تفکیک پروژه های راه روستایی",
  //       position: "bottom",
  //     },
  //     tooltips: {
  //       enabled: true,
  //     },
  //   },
  // });

  // var chartpie = document.getElementById("chartaxistype").getContext("2d");
  // var piechartshow = new Chart(chartpie, {
  //   type: "pie",
  //   data: {
  //     datasets: [
  //       {
  //         data: [
  //           res.axis_type_count[4],
  //           res.axis_type_count[3],
  //           res.axis_type_count[2],
  //           res.axis_type_count[1],
  //         ],
  //         backgroundColor: [
  //           chartColors[0],
  //           chartColors[1],
  //           chartColors[2],
  //           chartColors[3],
  //         ],
  //         label: "Dataset 1",
  //       },
  //     ],
  //     labels: ["شریانی", "اصلی", "فرعی ", "روستایی"],
  //   },
  //   options: {
  //     plugins: {
  //       datalabels: {
  //         anchor: "center",
  //         align: "center",
  //         offset: 10,
  //         color: "#fffff",
  //       },
  //     },
  //     responsive: true,
  //     legend: {
  //       display: true,
  //       position: "left",
  //     },
  //     title: {
  //       display: false,
  //       text: "تفکیک پروژه های راه روستایی",
  //       position: "bottom",
  //     },
  //     tooltips: {
  //       enabled: true,
  //     },
  //   },
  // });
  // var yearsarray = [];
  // var yearsnum = [];
  // $.each(res.project_years, function (key, value) {
  //   if (value != 0) {
  //     yearsarray.push(key);
  //     yearsnum.push(value);
  //   }
  // });
  // var yearshownchart = document
  //   .getElementById("yearshownchart")
  //   .getContext("2d");
  // var chartyear = new Chart(yearshownchart, {
  //   type: "bar",
  //   data: {
  //     labels: yearsarray,
  //     datasets: [
  //       {
  //         label: "تعداد",
  //         backgroundColor: chartColors[1],
  //         borderColor: chartColors[1],
  //         borderWidth: 1,
  //         data: yearsnum,
  //       },
  //     ],
  //   },
  //   options: {
  //     plugins: {
  //       datalabels: {
  //         display: false,
  //       },
  //     },
  //     responsive: true,
  //     legend: {
  //       display: true,
  //       position: "top",
  //     },
  //     title: {
  //       display: false,
  //       text: "تفکیک پروژه های انجام شده تاکنون",
  //       position: "bottom",
  //     },
  //     scales: {
  //       xAxes: [
  //         {
  //           display: true,
  //         },
  //       ],
  //       yAxes: [
  //         {
  //           display: true,
  //         },
  //       ],
  //     },
  //     tooltips: {
  //       enabled: true,
  //     },
  //   },
  // });
  // var numbers_array = [];
  // $.each(res.province_count, function (key, value) {
  //   if (value != 0) {
  //     numbers_array.push(value);
  //   }
  // });
  // var leastValue = [];
  // var mostValue = [];
  // var nameleast = [];
  // var namemost = [];
  // leastValue.push(res.final_province[Object.keys(res.final_province)[0]]);
  // leastValue.push(res.final_province[Object.keys(res.final_province)[1]]);
  // leastValue.push(res.final_province[Object.keys(res.final_province)[2]]);
  // nameleast.push(Object.keys(res.final_province)[0]);
  // nameleast.push(Object.keys(res.final_province)[1]);
  // nameleast.push(Object.keys(res.final_province)[2]);

  // mostValue.push(res.final_province[Object.keys(res.final_province)[34]]);
  // mostValue.push(res.final_province[Object.keys(res.final_province)[33]]);
  // mostValue.push(res.final_province[Object.keys(res.final_province)[32]]);
  // namemost.push(Object.keys(res.final_province)[34]);
  // namemost.push(Object.keys(res.final_province)[33]);
  // namemost.push(Object.keys(res.final_province)[32]);
  // var minchart =
  //   parseInt(res.final_province[Object.keys(res.final_province)[32]]) - 10;
  // var mostchart =
  //   parseInt(res.final_province[Object.keys(res.final_province)[32]]) + 20;
  // console.log(namemost);
  // var leastcity = document.getElementById("leastciyt").getContext("2d");
  // var chartleast = new Chart(leastcity, {
  //   type: "bar",
  //   data: {
  //     labels: nameleast,
  //     datasets: [
  //       {
  //         label: "تعداد",
  //         data: leastValue,
  //         backgroundColor: [
  //           chartleastred[2],
  //           chartleastred[1],
  //           chartleastred[0],
  //         ],
  //         borderWidth: 1,
  //       },
  //     ],
  //   },
  //   options: {
  //     plugins: {
  //       datalabels: {
  //         display: false,
  //       },
  //     },
  //     responsive: true,
  //     legend: {
  //       display: true,
  //       position: "top",
  //     },
  //     title: {
  //       display: false,
  //       text: "تفکیک پروژه های انجام شده تاکنون",
  //       position: "bottom",
  //     },
  //     scales: {
  //       xAxes: [
  //         {
  //           display: true,
  //         },
  //       ],
  //       yAxes: [
  //         {
  //           display: true,
  //         },
  //       ],
  //     },
  //     tooltips: {
  //       enabled: true,
  //     },
  //   },
  // });
  // console.log("min", minchart);
  // var mostcity = document.getElementById("mostcity").getContext("2d");
  // var chartmost = new Chart(mostcity, {
  //   type: "bar",
  //   data: {
  //     labels: namemost,
  //     datasets: [
  //       {
  //         label: "تعداد",
  //         data: mostValue,
  //         backgroundColor: [
  //           Chartmostgreen[1],
  //           Chartmostgreen[0],
  //           Chartmostgreen[2],
  //         ],
  //         borderWidth: 1,
  //       },
  //     ],
  //   },
  //   options: {
  //     plugins: {
  //       datalabels: {
  //         display: false,
  //       },
  //     },
  //     responsive: true,
  //     legend: {
  //       display: true,
  //       position: "top",
  //     },
  //     title: {
  //       display: false,
  //       text: "تفکیک پروژه های انجام شده تاکنون",
  //       position: "bottom",
  //     },
  //     scales: {
  //       xAxes: [
  //         {
  //           display: true,
  //         },
  //       ],
  //       yAxes: [
  //         {
  //           ticks: {
  //             beginAtZero: true,
  //           },
  //           display: true,
  //         },
  //       ],
  //     },
  //     tooltips: {
  //       enabled: true,
  //     },
  //   },
  // });
}