var table;
//pooria
var list_province = [];
var list_citys = [];
var array_hold = [];
var array_hold_String = "";
var array_hold_String_edited;
var data_select_sec;
var array_hold_Axis_type = [];
var data_select_Axis_type;
var String_hold_Axis_type = "";
var String_edited_Axis_type;
var arry_select2_date;
var array_geted_date = [];
var hold_Data_p1 = "";
var pooriapo;
var edited_end_date;
var hold_Data_city1;
var city1_array = [];
var city1_String = "";
var city1_String_edited = "";
var hold_Data_city2;
var city2_array = [];
var city2_String = "";
var city2_String_edited = "";
var hold_Data_city3;
var city3_array = [];
var city3_String = "";
var city3_String_edited = "";
var hold_Data_province1;
var hold_Data_province2;
var hold_Data_province3;
var array_geted_date = [];
var edited_end_date;
//End pooria

function showLoaderScreen() {
  $(".divloader").css("display", "flex").hide().fadeIn();
}

function hideLoaderScreen() {
  $(".divloader").fadeOut();
}
var chartColors = [
  "#ff0000",
  "#00FF00",
  "#4962ac",
  "#4286d3",
  "#000c7f",
  "#2aa9db",
  "#8690ef",
  "#00587a",
  "#88b3cb",
  "rgba(255, 64, 255, 1)",
  "rgba(159, 159, 64, 1)",
  "#ff5c0f",
  "#4962ac",
];
$(document).ready(function () {
  // getProvinces();
  showLoaderScreen()
  table = $("#example").DataTable({
    dom: "<flB<t>ip>",
    pagingType: "simple_numbers",
    scrollX: true,
    // scrollY: "500px",
    responsive: true,
    language: {
      sEmptyTable: "هیچ داده‌ای در جدول وجود ندارد",
      sInfo: "نمایش _START_ تا _END_ از _TOTAL_ ردیف",
      sInfoEmpty: "نمایش 0 تا 0 از 0 ردیف",
      sInfoFiltered: "(فیلتر شده از _MAX_ ردیف)",
      sInfoPostFix: "",
      sInfoThousands: ",",
      sLengthMenu: "نمایش _MENU_ ردیف",
      sLoadingRecords: "در حال بارگذاری...",
      sProcessing: "در حال پردازش...",
      sSearch: "جستجو / فیلتر: ",
      sZeroRecords: "رکوردی با این مشخصات پیدا نشد",
      oPaginate: {
        sFirst: "برگه‌ی نخست",
        sLast: "برگه‌ی آخر",
        sNext: "بعدی",
        sPrevious: "قبلی",
      },
      oAria: {
        sSortAscending: ": فعال سازی نمایش به صورت صعودی",
        sSortDescending: ": فعال سازی نمایش به صورت نزولی",
      },
    },
    order: [[0, "asc"][(1, "asc")], [2, "desc"], [3, "desc"], [4, "desc"]],
    order: [[0, "desc"]],
    processing: true,
    select: true,
    destroy: true,
    ajax: {
      url: "https://rms.rmto.ir/api/danger-points-result",
      type: "GET",
      dataSrc: function (json) {
        console.log("kk", json)
        return json.data;
      },
    },
    columns: [
      // {
      //     className: "text-center",
      //     data: null,
      //     render: function (data, type, row, meta) {
      //         // console.log(meta.row);
      //         return meta.row + 1;
      //     },
      // },
      { data: "cd" },
      { data: "p" },
      { data: "a" },
      { data: "l" },
      { data: "c" },
      { data: "e" },
      { data: "g" },
      { data: "f" },
      { data: "b" },
      { data: "i" },
      { data: "d" },
      { data: "s" },
      { data: "zi" },
      { data: "pp" },
      { data: "ag" },
      { data: "sd" },
      { data: "j" },
      { data: "h" },


    ],
    columnDefs: [
      { className: "dir_ltr", "targets": [12, 13, 14, 15] }
    ],
    buttons: [
      //pooria
      {
        text:
          '<div class="d-flex flex-column"><i class="fa fa-filter mb-2 icon-color"></i> فیلترینگ پیشرفته</div>',
        action: function (e, dt, node, config) {
          if ($(".parent-filter").css("display") == "none") {
            $(".parent-filter").css("display", "block");
            // $("#append-input-forFilter2").addClass("d-none");
            // $("#append-input-forFilter3").addClass("d-none");
            // showLoaderScreen();
            setTimeout(() => {
              hideLoaderScreen();
            }, 200);
          } else if ($(".parent-filter").css("display") != "none") {
            $(".parent-filter").css("display", "none");
          }
        },
      },
      //end pooria
      {
        // extend: "download",
        // title: "Video",
        text:
          "<div class='d-flex flex-column'><i class='fa mb-2 fa-download icon-color'></i>دانلود فیلم راهنما</div>",
        action: function (e, dt, node, config) {
          window.open("/storage/video_2020-10-02_13-47-58.mp4", "_blank");
        },
      },

      {
        extend: "excelHtml5",
        title: "Excel",
        text:
          '<div class="d-flex flex-column"><i class="fa fa-book mb-2 icon-color"></i>خروجی به اکسل</div>',
        messageTop: "روکش آسفالت (نگهداری راه)",

        customize: function (xlsx) {
          var sheet = xlsx.xl.worksheets["sheet1.xml"];

          // Loop over the cells in column `C`
          $('row c[r^="M"]', sheet).each(function () {
            // Get the value

            $(this).attr("s", "52");
          });
          $('row c[r^="N"]', sheet).each(function () {
            // Get the value

            $(this).attr("s", "52");
          });
        },
      },
      {
        // extend: "download",
        // title: "Video",
        text:
          '<div class="d-flex flex-column"><i class="fa fa-check-circle mb-2 icon-color"></i> تحلیل</div>',
        action: function (e, dt, node, config) {
          //  alert("hiiiii")
          $("#stepModalmaintenance").modal("show");
          showbarchart()

        },
      },
    ],
    //pooria
    initComplete: function () {
      hideLoaderScreen()
      $("body").find(".dataTables_scrollBody").addClass("scrollbar");
      $(".dt-buttons").append(`<div class='parent-filter'>
            
            <div class='container'>
            <button onclick="pops()" class="btn-increase">+</button>
            <div class="row mt-2">
            <div class="col-12 mb-2"><select  id="select-province1" class="js-example-basic-multiple form-control-me stylescroll"></select></div>
            <div class="col-12" >
            <div id="append-input-forFilter2" class="my-2 d-none">   
                  <select id="select-province2" class="js-example-basic-multiple form-control-me mb-2 stylescroll"></select>                              
            </div>
            </div>
            <div class="col-12">
            <div id="append-input-forFilter3" class="my-2 d-none">
                   <select id="select-province3"
                class="js-example-basic-multiple form-control-me mb-2 stylescroll"></select>
               </div>
            </div>
          <div class="col-12 mb-2">
            <select class="typemehvar form-control" name="states[]" multiple="multiple">
              <option value="typefaryi">ازادراه</option>
              <option value="typeasli">بزرگراه</option>
              <option value="typeshryani">راه اصلی</option>
              <option value="typeasli">اصلی</option>
              <option value="rahefaryi">راه فرعی با عملکرد اصلی</option>
              <option value="daraje2">راه فرعی(درجه1یا2)</option>
              <option value="daraje3">راه روستایی(درجه3)</option>
            </select>
          </div>
           <div class="col-12 mb-2">
            <select class="geomtrydecribe form-control" name="states[]" multiple="multiple">
              <option value="masir ">مسیر مستقیم فاقد راه دسترسی</option>
              <option value="typeasli">	قوس قائم</option>
              <option value="typeshryani">	قوس افقی </option>
              <option value="typeshryani">قوس قائم و افقی </option>
              <option value="typeasli">تقاطع - قوس - منطقه مسکونی</option>
              <option value="typeasli">پل-تقاطع-قوس</option>
              <option value="typeasli">تقاطع</option>
              <option value="typeasli">پل-قوس</option>
              <option value="typeasli">پل-تقاطع</option>
              <option value="typeasli">پل - تقاطع - منطقه مسکونی</option>
              <option value="typeasli">پل</option>
              <option value="typeasli">میدان</option>
              <option value="typeasli">منطقه مسکونی</option>
            </select>
          </div>
        <div class="col-12 text-center"><button id="btn_filter_show" class="btn-set-filter px-2 py-1">فیلتر</button></div>
            </div>
            </div>
            </div>`);
      // $("table tbody tr td").addClass("text-nowrap")
      $(".js-example-basic-multiple").append(
        '<option   value="0">انتخاب اداره کل</option>'
      );
      $(".btn-increase").prop("disabled", true);
      init_row_filter();
      $("#select-province1").on("change", function () {
        init_data_filter1();
        $(".btn-increase").prop("disabled", false);
      });
      $("#select-province2").on("change", function () {
        init_data_filter2();
        $(".btn-increase").prop("disabled", false);
      });
      $("#select-province3").on("change", function () {
        init_data_filter3();
      });
      $(".typemehvar").select2({
        multiple: true,
        placeholder: "نوع راه",
        dir: "rtl",
        width: "resolve",
      });
      $(".geomtrydecribe").select2({
        multiple: true,
        placeholder: " توصیف هندسی ",
        dir: "rtl",
        width: "resolve",
      });
      var current_year;
      current_year = new persianDate().year();
      $(".typemehvar").on("change", function () {
        array_hold_Axis_type = [];
        data_select_Axis_type = null;
        String_hold_Axis_type = "";
        String_edited_Axis_type = "";
        data_select_Axis_type = $(".typemehvar").select2("data");
      });
      $(".geomtrydecribe").on("change", function () {
        array_hold_geo_type = [];
        data_select_geo_type = null;
        String_hold_geo_type = "";
        String_edited_geo_type = "";
        data_select_geo_type = $(".geomtrydecribe").select2("data");
      });
      $("#select-province1").on("change", function () {
        hold_Data_province1 = null;
        hold_Data_province1 = $("#select-province1 option:selected").text();
        console.log(typeof hold_Data_province1);
      });
      $("#select-province2").on("change", function () {
        hold_Data_province2 = null;
        hold_Data_province2 = $("#select-province2 option:selected").text();
      });
      $("#select-province3").on("change", function () {
        hold_Data_province3 = null;
        hold_Data_province3 = $("#select-province3 option:selected").text();
      });
      $("#btn_filter_show").on("click", function () {
        if ($(".typemehvar").select2("data").length == 0) {
          $("#example").DataTable().column(4).search("").draw();
        }
        var test = "|";
        var hold_Data_p1 = "";
        var pooriapo;

        if (
          ($("#select-province1").val() && $("#select-province1").val() != 0) ||
          ($("#select-province2").val() && $("#select-province2").val() != 0) ||
          ($("#select-province3").val() && $("#select-province3").val() != 0)
        ) {
          $("#example")
            .DataTable()
            .column(1)
            .search(
              hold_Data_province1 +
              test +
              hold_Data_province2 +
              test +
              hold_Data_province3,
              true,
              false
            )
            .draw();
        }

        if (hold_Data_city1) {
          for (let i = 0; i < hold_Data_city1.length; i++) {
            city1_array.push(hold_Data_city1[i].text.trim().concat("|"));
          }
        }
        for (let i = 0; i < city1_array.length; i++) {
          city1_String += city1_array[i];
        }
        if (city1_String[city1_String.length - 1] == "|") {
          city1_String_edited = city1_String.slice(0, city1_String.length - 1);
        }

        // hold_Data_city2 = $("#select-city2").select2("data");
        // for (let i = 0; i < hold_Data_city2.length; i++) {
        //   city2_array.push(hold_Data_city2[i].text.trim().concat("|"));
        // }
        // for (let i = 0; i < city2_array.length; i++) {
        //   city2_String += city2_array[i];
        // }
        // if (city2_String[city2_String.length - 1] == "|") {
        //   city2_String_edited = city2_String.slice(0, city2_String.length - 1);
        // }

        // hold_Data_city3 = $("#select-city3").select2("data");
        // for (let i = 0; i < hold_Data_city3.length; i++) {
        //   city3_array.push(hold_Data_city3[i].text.trim().concat("|"));
        // }
        // if (city3_array) {
        //   for (let i = 0; i < city3_array.length; i++) {
        //     city3_String += city3_array[i];
        //   }
        // }
        // if (city3_String[city3_String.length - 1] == "|") {
        //   city3_String_edited = city3_String.slice(0, city3_String.length - 1);
        // }

        var farsamoner;
        var farsamNum = 0;
        if (city1_String_edited) {
          farsamoner = city1_String_edited;
          farsamNum++;
        }
        if (city2_String_edited) {
          farsamNum != 0 ? (farsamoner += "|") : (farsamoner += "");
          farsamoner += city2_String_edited;
          farsamNum++;
        }
        if (city3_String_edited) {
          farsamNum != 0 ? (farsamoner += "|") : (farsamoner += "");
          farsamoner += city3_String_edited;
        }
        if (farsamoner) {
          $("#example")
            .DataTable()
            .column(2)
            .search(farsamoner, true, false)
            .draw();
        }
        if (data_select_sec) {
          for (let i = 0; i < data_select_sec.length; i++) {
            array_hold.push(data_select_sec[i].text.trim());
          }
          for (var i = 0; i < array_hold.length; i++) {
            array_hold_String += array_hold[i].concat("|");
          }

          if (array_hold_String[array_hold_String.length - 1] == "|") {
            array_hold_String_edited = array_hold_String.slice(
              0,
              array_hold_String.length - 1
            );
          }
          if (array_hold_String_edited) {
            $("#example")
              .DataTable()
              .column(10)
              .search(array_hold_String_edited, true, false)
              .draw();
          }
        }

        if (data_select_Axis_type) {
          for (var i = 0; i < data_select_Axis_type.length; i++) {
            array_hold_Axis_type.push(
              data_select_Axis_type[i].text.trim().concat("|")
            );
          }
          for (let i = 0; i < array_hold_Axis_type.length; i++) {
            String_hold_Axis_type += array_hold_Axis_type[i];
          }

          if (String_hold_Axis_type[String_hold_Axis_type.length - 1] === "|") {
            String_edited_Axis_type = String_hold_Axis_type.slice(
              0,
              String_hold_Axis_type.length - 1
            );
          }

          if (String_edited_Axis_type) {
            $("#example")
              .DataTable()
              .column(8)
              .search(String_edited_Axis_type, true, false)
              .draw();
          }
        }
        if (data_select_geo_type) {
          for (var i = 0; i < data_select_geo_type.length; i++) {
            array_hold_geo_type.push(
              data_select_geo_type[i].text.trim().concat("|")
            );
          }
          for (let i = 0; i < array_hold_geo_type.length; i++) {
            String_hold_geo_type += array_hold_geo_type[i];
          }

          if (String_hold_geo_type[String_hold_geo_type.length - 1] === "|") {
            String_edited_geo_type = String_hold_geo_type.slice(
              0,
              String_hold_geo_type.length - 1
            );
          }

          if (String_edited_geo_type) {
            $("#example")
              .DataTable()
              .column(6)
              .search(String_edited_geo_type, true, false)
              .draw();
          }
        }
        $(".parent-filter").css("display", "none");
      });
    },
    //End pooria
  });
  //pooria

  function init_row_filter() {
    showLoaderScreen();
    $.ajax({
      url: "https://rms.rmto.ir/public/contents/provinces",
      type: "GET",
      success: function (data) {
        hideLoaderScreen();
        list_province = data.data;
        for (let index = 0; index < list_province.length; index++) {
          $(".js-example-basic-multiple").append(
            "\
              <option value=" +
            list_province[index].id +
            ">" +
            list_province[index].name_fa +
            "</option>\
            "
          );
        }
      },
    });
  }
  function init_data_filter1() {
    let hold_idSelect = $("#select-province1").val();
    console.log(hold_idSelect);
    showLoaderScreen()
    $.ajax({
      url: "https://rms.rmto.ir/public/contents/provinces/" + hold_idSelect,
      type: "GET",
      success: function (data) {
        hideLoaderScreen()
        list_citys = data.data;
        $("#select-city1").html("");
        for (let index = 0; index < list_citys.length; index++) {
          $("#select-city1").append(
            "\
            <option value=" +
            list_citys[index].id +
            ">" +
            list_citys[index].name_fa +
            "</option>\
          "
          );
        }
      },
    });
  }
  function init_data_filter2() {
    let hold_idSelect = $("#select-province2").val();
    showLoaderScreen()
    $.ajax({
      url: "https://rms.rmto.ir/public/contents/provinces/" + hold_idSelect,
      type: "GET",
      success: function (data) {
        hideLoaderScreen()
        list_citys = data.data;
        $("#select-city2").html("");
        for (let index = 0; index < list_citys.length; index++) {
          $("#select-city2").append(
            "\
              <option value=" +
            list_citys[index].id +
            ">" +
            list_citys[index].name_fa +
            "</option>\
            "
          );
        }
      },
    });
  }
  function init_data_filter3() {
    let hold_idSelect = $("#select-province3").val();
    $.ajax({
      url: "https://rms.rmto.ir/public/contents/provinces/" + hold_idSelect,
      type: "GET",
      success: function (data) {
        list_citys = data.data;
        $("#select-city3").empty("");
        for (let index = 0; index < list_citys.length; index++) {
          $("#select-city3").append(
            "\
              <option value=" +
            list_citys[index].id +
            ">" +
            list_citys[index].name_fa +
            "</option>\
            "
          );
        }
      },
    });
  }
  //End pooria
  //yasi change end
});

function pops() {
  $(".btn-increase").prop("disabled", true);
  if ($("#select-province1").val() != 0) {
    $("#append-input-forFilter2").removeClass("d-none");
    $("#append-input-forFilter2")
      .parent()
      .css("border-top", "1px dashed orange");
  }
  if ($("#select-province2").val() != 0) {
    $("#append-input-forFilter3").removeClass("d-none");
    $("#append-input-forFilter3")
      .parent()
      .css("border-top", "1px dashed orange");
    $("#append-input-forFilter3")
      .parent()
      .css("border-bottom", "1px dashed orange");
  }
}


function showbarchart() {
  $.ajax({
    url: "https://rms.rmto.ir/api/danger-points-result-chart",
    type: "POST",
    cache: false,
    success: function (result) {
      // console.log("chart",result);
      // resu = result;
      ShowBi(result);
    },
    error: function (error) {
      console.log(error);
    },
  });
}

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");
  // console.log("avg",res.avg)
  // console.log("data",res.data)
  /*
  "ازادراه",
        "بزرگراه",
        "راه اصلی",
        "راه روستایی (درجه 3)",
        "راه فرعی (درجه 1 یا 2)",
        "راه فرعی با عملکرد اصلی",
  */
  var labels = res.data.map(function (e) {
    return e.g + '-' + e.b;
  });
  var data = res.data.map(function (e) {
    return e.s;
  });
  //  console.log("labels",labels)
  //  var data1 = res.data.map(function(e) {
  //    if(e.b == 'ازادراه')
  //     return e.s;
  //  });
  //  var data2 = res.data.map(function(e) {
  //    if(e.b == 'بزرگراه')
  //     return e.s;
  //  });
  //  var data3 = res.data.map(function(e) {
  //    if(e.b == 'راه اصلی')
  //     return e.s;
  //  });
  //  var data4 = res.data.map(function(e) {
  //    if(e.b == 'راه روستایی (درجه 3)')
  //     return e.s;
  //  });
  //  var data5 = res.data.map(function(e) {
  //    if(e.b == 'راه فرعی (درجه 1 یا 2)')
  //     return e.s;
  //  });
  //  var data6 = res.data.map(function(e) {
  //    if(e.b == 'راه فرعی با عملکرد اصلی')
  //     return e.s;
  //  });
  //  console.log("data1",data1)
  //  console.log("data2",data2)
  //  console.log("data3",data3)
  //  console.log("data4",data4)
  //  console.log("data5",data5)
  //  console.log("data6",data6)
  var color = res.data.map(function (e) {
    if (parseFloat(e.s) >= parseFloat(res.avg[0].ag))
      return chartColors[0];
    else
      return chartColors[1];
  });
  var avg_line = res.data.map(function (e) {
    return res.avg[0].ag;
  });
  var ticks = [20000, 15000, 10000, 5000, 4000, 3000, 2000, 1000, 50];

  console.log("data", avg_line)
  var myChartFirst = new Chart(FirstChart, {
    type: "bar",
    data: {

      datasets: [
        {

          data: data,
          backgroundColor: color,
        },
        // {

        //   data: data2,
        //   backgroundColor: '#122134',
        // }, 
        // {

        //   data: data3,
        //   backgroundColor: '#456543',
        // }, 
        // {

        //   data: data4,
        //   backgroundColor: '#325632',
        // }, 
        // {

        //   data: data5,
        //   backgroundColor: '#765423',
        // }, 
        // {

        //   data: data6,
        //   backgroundColor: '#543676',
        // }, 
        {
          label: 'میانگین کل',
          data: avg_line,
          // color: ['#0000FF'],
          fill: false,
          borderColor: '#4bc0c0',

          // Changes this dataset to become a line
          type: 'line'
        }
      ],
      // data: data,
      labels: labels,
      // labels: [
      //   "ازادراه",
      //   "بزرگراه",
      //   "راه اصلی",
      //   "راه روستایی (درجه 3)",
      //   "راه فرعی (درجه 1 یا 2)",
      //   "راه فرعی با عملکرد اصلی",
      // ],
    },
    options: {
      onClick: (e) => {

        var firstPoint = myChartFirst.getElementAtEvent(e);

        if (firstPoint[0]) {

          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: 200000
            // },
            // offset: false,
            // ticks: {
            //   autoSkip: false,
            //   min: ticks[ticks.length - 1],
            //   max: ticks[0]
            // },
            // afterBuildTicks: function(scale) {
            //   scale.ticks = ticks;
            //   return;
            // },
            // beforeUpdate: function(oScale) {
            //   return;
            // },
            stacked: true,
            gridLines: {
              display: true,
              color: "rgba(255,99,132,0.2)",
              //  offsetGridLines: false
            },
          },
        ],
        xAxes: [{
          ticks: {
            display: false //this will remove only the label
          },
          gridLines: {
            display: false
          }
        }]
      },
      annotation: {
        annotations: [{
          type: 'line',
          drawTime: 'afterDatasetsDraw',
          id: 'strip-line-1',
          mode: 'horizontal',
          scaleID: 'y-axis-0',
          value: 900,
          borderColor: 'red',
          borderWidth: 3
        }]
      },
      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: {
  //     onClick: (e) => {

  //       var secondPoint = myChartSecond.getElementAtEvent(e);

  //       if (secondPoint[0]) {

  //         var label = myChartSecond.data.labels[secondPoint[0]._index];
  //         var value = myChartSecond.data.datasets[0].data[secondPoint[0]._index];

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

  //       }
  //     },
  //     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,
  //     },
  //   },
  // });
}