var endpoint = "https://rms.rmto.ir/public/road-observation-problems/getlist";
var totalCounts = null;
var fromDate, toDate;

var map = null;
var startAbrarMarker = null;
var isSetStartAbrarMarker = false;
var endAbrarMarker = null;
var isSetEndAbrarMarker = false;

var routeControlsPath = [];
var popupArraysPath = [];
var polylinePath = null;

var mapCenterLat = null;
var mapCenterLng = null;

$(document).ready(function () {
  fromDate = $("#datepickfrom").persianDatepicker({
    format: "YYYY/MM/DD",
    autoClose: true,
    onSelect: function (unix) {
      fromDate.touched = true;

      $('#datepickto').prop('disabled', '');

      if (
        fromDate.getState().selected.unixDate >=
        toDate.getState().selected.unixDate
      ) {
        toDate.setDate(fromDate.getState().selected.unixDate);
      }

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

        toDate.options = { minDate: unix };

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

  toDate = $("#datepickto").persianDatepicker({
    format: "YYYY/MM/DD",
    autoClose: true,
    onSelect: function (unix) {
      toDate.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);

        }

      }*/
    },
  });


  var table = $("#example").DataTable({
    dom: 'lBfrtip',
    //   "pagingType": "full_numbers",
    pagingType: "simple_numbers",
    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: ": فعال سازی نمایش به صورت نزولی",
      },
    },
    columnDefs: [
      {
        searchable: false,
        orderable: false,
        targets: 8,
      },
      { type: "pstring", targets: 1 },
      {
        orderable: false,
        className: 'select-checkbox',
        targets: 8
      }
    ],
    order: [[0, "asc"]],
    processing: true,
    ajax: {
      url: endpoint,
      type: "GET",
      dataSrc: function (json) {
        // totalCounts = json.data.count;

        return json.data;
      },
      error: function (xhr, error, code) {
        console.log(xhr);
        console.log(code);
      }
    },
    columns: [
      {
        data: null,
        render: function (data, type, row, meta) {
          // console.log(meta.row);
          return meta.row + 1;
        },
      },
      { data: "ProvinceName", 
      width:60,
    },
      { data: "TownName" },
      { data: "Title" },
      { data: "EventTypeTitle" ,
      width:60},
      { data: "Description" },
      {
        orderable: false,
        className: "text-center",
        data: null,
        width:90, 
        render: function (data, type, row) {
           return "("+parseFloat(data.lat).toFixed(2)+" , "+parseFloat(data.lng).toFixed(2)+")"
        },
      },
      { data: "StartTime_DateTime",
      width:70, 
    },
      { data: "StartTime_DateTime",
      width:100, 
    },
      {
        orderable: false,
        className: "text-center",
        data: null,
        width:80,
        render: function (data, type, row) {
          if (data.rms_status == 1) {
            return `<input id="cBox${data.id}" type="checkbox" checked>`
          }
          else return `<input id="cBox${data.id}" type="checkbox"  >`
        },
      },
      {
        orderable: false,
        className: "location",
        data: null,
        render: function (data, type, row) {

          if (data.rms_start_latlng == null) {
            return `<div id="parentButton${data.id}"><button type="button" class="btn btn-secondary" onclick="showMapModal(` + data.id + `)">
            مختصات
          </button></div>`
          }
          else {
            return `<div id="parentButton${data.id}"><p class="text-center" alignment="center">(${data.rms_start_latlng[0]} , ${data.rms_start_latlng[1]})</p><button type="button" class="btn btn-primary" onclick="showMapModal(` + data.id + `)">
            مختصات
          </button></div>`;
          }
        },
      },
      {
        orderable: false,
        className: "text-center",
        data: null,
        width:80,
        render: function (data, type, row) {
          if (data.files[0] == null && data.files[1] == null) {
            return `
            <div id="uploadImageDivB${data.id}" style="margin-bottom: 5px; display:inline-block" title="پیش از اقدام"></div>
            <div id="uploadImageDivA${data.id}" style="margin-bottom: 5px; display:inline-block" title="پس از اقدام"></div>
            <div class="btn-secondary">
            <label class="fileBtn" for="uploadBefore${data.id}">پیش از اقدام</label>
              <input type="file" name="uploadBefore" id="uploadBefore${data.id}" style="display:none" class="uploadButton">
              </div>
              
              <div class="btn-secondary" style="margin-top:5px" >
            <label class="fileBtn" for="uploadAfter${data.id}">پس از اقدام</label>
              <input type="file" name="uploadAfter" id="uploadAfter${data.id}" style="display:none" class="uploadButton">
              </div>
            `;
          } else if (data.files[0] == null && data.files[1] != null) {
            let file1 = data.files[1].path.slice(7);
            return `
            <div id="uploadImageDivB${data.id}" style="margin-bottom: 5px; display:inline-block" title="پیش از اقدام"></div>
            <div id="uploadImageDivA${data.id}" style="margin-bottom: 5px; display:inline-block" title="پس از اقدام"></div>
            <div class="btn-secondary">
            <label class="fileBtn" for="uploadBefore${data.id}">پیش از اقدام</label>
              <input type="file" name="uploadBefore" id="uploadBefore${data.id}" style="display:none" class="uploadButton">
              </div>
              
              <div class="btn-primary" style="margin-top:5px" >
            <label class="fileBtn" for="uploadAfter${data.id}">پس از اقدام</label>
              <input type="file" name="uploadAfter" id="uploadAfter${data.id}" style="display:none" class="uploadButton">
              </div>
            `;
          } else if (data.files[0] != null && data.files[1] == null) {
            let file0 = data.files[0].path.slice(7);
            return `
            <div id="uploadImageDivB${data.id}" style="margin-bottom: 5px; display:inline-block" title="پیش از اقدام"></div>
            <div id="uploadImageDivA${data.id}" style="margin-bottom: 5px; display:inline-block" title="پس از اقدام"></div>
            <div class="btn-primary">
            <label class="fileBtn" for="uploadBefore${data.id}">پیش از اقدام</label>
              <input type="file" name="uploadBefore" id="uploadBefore${data.id}" style="display:none" class="uploadButton">
              </div>
              
              <div class="btn-secondary" style="margin-top:5px" >
            <label class="fileBtn" for="uploadAfter${data.id}">پس از اقدام</label>
              <input type="file" name="uploadAfter" id="uploadAfter${data.id}" style="display:none" class="uploadButton">
              </div>
            `;
          } else {
            let file0 = data.files[0].path.slice(7);
            let file1 = data.files[1].path.slice(7);
            return `
            <div id="uploadImageDivB${data.id}" style="margin-bottom: 5px; display:inline-block;" title="پیش از اقدام"></div>
            <div id="uploadImageDivA${data.id}" style="margin-bottom: 5px; display:inline-block" title="پس از اقدام"></div>
            <div class="btn-primary">
            <label class="fileBtn" for="uploadBefore${data.id}">پیش از اقدام</label>
              <input type="file" name="uploadBefore" id="uploadBefore${data.id}" style="display:none" class="uploadButton">
              </div>
              
              <div class="btn-primary" style="margin-top:5px" >
            <label class="fileBtn" for="uploadAfter${data.id}">پس از اقدام</label>
              <input type="file" name="uploadAfter" id="uploadAfter${data.id}" style="display:none" class="uploadButton">
              </div>
            `;
          }

        },
      },
      
      { data: "rms_last_activity",
      width:100, 
    },
      {
        orderable: false,
        className: "text-center",
        data: null,
        render: function (data, type, row) {
          if (data.rms_description == null) {
            return `<textarea id="desBox${data.id}" name="" placeholder="توضیحات " rows="" cols=""></textarea> `;
            
          }
          return `<textarea id="desBox${data.id}" name="" placeholder="توضیحات " rows="" cols="">${data.rms_description}</textarea> `;
        },
      },
      {
        orderable: false,
        className: "location",
        data: null,
        render: function (data, type, row) {

          return `<div id="submitDiv${data.id}"><button type="button" class="btn btn-success" onclick="saveFastReaction(` + data.id + `)">
            ثبت
          </button></div>`

        },
      }
      // { data: "date" },
      // {
      //   data: null,
      //   render: function (data, type, row) {
      //     return '<button class="btn btn-info btn-sm">مشاهده/ویرایش</i></button> / <button class="btn btn-info btn-sm">حذف</i></button > ';
      //   },
      // },
    ],
    buttons: [
      {
        extend: 'excelHtml5',
        title: 'Excel',
        text: 'خروجی به اکسل',
        messageTop: 'تعداد فعالیت های ثبت شده اداره کل'
      }
    ],

    "initComplete": function (settings, json) {

      $('.uploadButton').on('change', function (e) {
        var fileName = e.target.files[0].name;
        // console.log(fileName);
        $("#" + this.id).parent().addClass("btn-primary").removeClass("btn-secondary");
        if(this.id.slice(6,7) == "B"){
          console.log($("#uploadImageDivB" + this.id.slice(12)));
          $("#uploadImageDivB" + this.id.slice(12)).empty();
          $("#uploadImageDivB" + this.id.slice(12)).append(`<p>${fileName}</p>`);
        }else{
          $("#uploadImageDivA" + this.id.slice(11)).empty();
          $("#uploadImageDivA" + this.id.slice(11)).append(`<p>${fileName}</p>`)
        }
      });
    }

  });

  table
    .on("order.dt search.dt", function () {
      table
        .column(0, { search: "applied", order: "applied" })
        .nodes()
        .each(function (cell, i) {
          cell.innerHTML = i + 1;
        });
    })
    .draw();

  // $("#locationPicker").on("click" , function () {
  //   console.log("hi there mother");
  // })
});

$('#example').on('click', 'input.locationPicker', function (e) {
  alert("hi")

})

$("#sort_date").on("click", function () {
  if ($("#datepickfrom").val() != " " && $("#datepickto").val() != " ") {
    // console.log($("#datepickfrom").val());
    // console.log($("#datepickto").val());
    // console.log(fromDate.getState().selected);
    // console.log(
    //   moment(
    //     fromDate.getState().selected.year +
    //       "/" +
    //       fromDate.getState().selected.month +
    //       "/" +
    //       fromDate.getState().selected.date,
    //     "jYYYY/jM/jD"
    //   ).format("YYYY-M-D")
    // );

    let startDate = moment(
      fromDate.getState().selected.year +
      "/" +
      fromDate.getState().selected.month +
      "/" +
      fromDate.getState().selected.date,
      "jYYYY/jM/jD"
    ).format("YYYY-MM-DD");
    let endDate = moment(
      toDate.getState().selected.year +
      "/" +
      toDate.getState().selected.month +
      "/" +
      toDate.getState().selected.date,
      "jYYYY/jM/jD"
    ).format("YYYY-MM-DD");

    // $("#example").DataTable().clear().draw();
    $("#example")
      .DataTable()
      .ajax.url(endpoint + "?end-date=" + endDate + "&start-date=" + startDate)
      .load();

    // $.ajax({
    //   url: endpoint + "?end-date=" + endDate + "&start-date=" + startDate,
    //   type: "GET",
    //   success: function (result) {
    //     console.log(result);
    //     // $("#example").DataTable().fnClearTable();
    //     // $("#example").DataTable().fnAddData(result);
    //   },
    // });
  }
});

function showMapModal(id) {

  $('#submitMap').attr('project-id', id);
  $("#exampleModalCenter").modal("show");

  if (isSetStartAbrarMarker) {

    isSetStartAbrarMarker = false;
    $('#pin-marker-start').removeClass('pin-set');

  }

  setTimeout(() => {
    if (map == null) {
      createLeafletMap()
    }

  }, 500);


}


$("#submitMap").on('click', function () {

  if (isSetStartAbrarMarker) {

    let id = $("#submitMap").attr('project-id');


    $("#parentButton" + id).empty();

    let htmlElement = `<p style="direction:ltr">(` + startAbrarMarker.getLatLng().lat.toFixed(2) + ` , ` + startAbrarMarker.getLatLng().lng.toFixed(2) + `)</p>
      <button type="button" class="btn btn-primary" onclick="showMapModal(` + id + `)">
    طول و عرض جغرافیایی
  </button>`


    $("#parentButton" + id).append(htmlElement);
    //   $("#parentButton" + id).append(`<div id="parentButton${data.id}"><button type="button" class="btn btn-primary" onclick="showMapModal(` + data.id + `)">
    //   طول و عرض جغرافیایی
    // </button></div>`);

    $("#exampleModalCenter").modal('toggle');
  } else {
    $('#pin-marker-start').removeClass('pin-move').addClass('pin-warn');
  }



});

function selectedFile(id) {
  // console.log(id);
}



var startAbrarDivIcon = L.divIcon({
  html: `
    <div id="pin-marker-start" class="pin-marker">
      <div class="map-pin-marker">
        <div class="pin-main-circle"></div>
        <div class="pin-white-circle"></div>
        <div class="pin-title-circle">
          <span class="title-circle-text">موقعیت</span>
        </div>
        <div class="pin-main-line"></div>
      </div>
      <div class="pin-main-shadow">
        <div class="shadow-dot">
        </div>
      </div>
    </div>
  `,
  iconSize: [55, 75],
  iconAnchor: [33, 64]
});

var endAbrarDivIcon = L.divIcon({
  html: `
    <div id="pin-marker-end" class="pin-marker">
      <div class="map-pin-marker">
        <div class="pin-main-circle"></div>
        <div class="pin-white-circle"></div>
        <div class="pin-title-circle">
          <span class="title-circle-text">Ł¾Ų§ŪŒŲ§Ł†</span>
        </div>
        <div class="pin-main-line"></div>
      </div>
      <div class="pin-main-shadow">
        <div class="shadow-dot">
        </div>
      </div>
    </div>
  `,
  iconSize: [55, 75],
  iconAnchor: [33, 64]
});

var projectEditId = null;
var projectEditData = [];
var abrarProjectSlider = null;

$('#abrar-list-card > .card-body .project-actions > button').on('click', function () {
  projectEditId = $(this).attr('data-id');

  $('#abrar-list-card > .card-header > .card-tools > button').click();
  $('#abrar-edit-card > .card-header > .card-title').text('ŁˆŪŒŲ±Ų§ŪŒŲ´ Ł¾Ų±ŁˆŚ˜Ł‡ Ų´Ł…Ų§Ų±Ł‡ ' + projectEditId);
  $('#abrar-edit-card').fadeIn(400, function () {
    getSpecificAbrarProject();
  });
});

$('#abrar-list-card > .card-header > .card-tools > button').on('click', function () {
  if ($('#abrar-list-card').hasClass('collapsed-card')) {
    projectEditId = null;

    if (!$('#abrar-edit-card').hasClass('collapsed-card')) {
      $('#abrar-edit-card > .card-header > .card-tools > button').click();
      $('#abrar-edit-card > .card-header > .card-title').text('');
      $('#abrar-edit-card').fadeOut();
      $('#abrar-edit-card .abrar-project-slider').hide();
      $('#abrar-edit-card .abrar-project-description').hide();
      $('#abrar-edit-card .abrar-project-date').hide();

      initialMarkerMapValue();
    }
  }
});

$('#abrar-edit-card > .card-footer > .btn.btn-danger').on('click', function () {
  $('#abrar-list-card > .card-header > .card-tools > button').click();
});

function getSpecificAbrarProject() {
  $.ajax({
    url: '/abrar-projects/' + projectEditId,
    type: 'GET',
    cache: false,
    contentType: false,
    processData: false,
    success: function (result) {
      //console.log(result);
      showSpecificAbrarProject(result.data);
      mapCenterLat = result.province.center_lat;
      mapCenterLng = result.province.center_long;
    },
    error: function (error) {
      //console.log(error);
    }
  });
}

function showSpecificAbrarProject(data) {
  $('[data-mask]').inputmask();

  $('#abrar-edit-card input[name=abrar-province-name]').val(data.province_name);
  $('#abrar-edit-card input[name=abrar-city-name]').val(data.city_name);
  $('#abrar-edit-card input[name=abrar-axis-name]').val(data.axis_name);
  $('#abrar-edit-card input[name=abrar-axis-length]').val(data.axis_length);

  for (let i = 0; i < 4; i++) {
    $('#abrar-edit-card #abrar-project-type-' + (i + 1)).prop('checked', false);
  }

  for (let i = 0; i < 9; i++) {
    $('#abrar-edit-card #abrar-project-status-' + (i + 1)).prop('checked', false);
  }

  if (data.project_type != null) {
    for (let i = 0; i < data.project_type.length; i++) {
      $('#abrar-edit-card #abrar-project-type-' + data.project_type[i]).prop('checked', true);
    }
  }

  abrarProjectSlider = $("#abrar-project-status-progress").slider({
    min: 0,
    max: 100,
    value: 0,
    ticks: [0, 100],
    ticks_snap_bounds: 1,
    formatter: function (value) {
      return value + 'ŁŖ';
    },
    tooltip: 'always',
    tooltip_position: 'bottom'
  });

  if (data.project_status != null) {
    $('#abrar-edit-card #abrar-project-status-' + data.project_status).prop('checked', true);

    if (([2, 5, 6]).includes(data.project_status)) {
      $('#abrar-edit-card .abrar-project-slider').show();
      abrarProjectSlider.slider('setValue', data.project_status_progress);
    }

    if (data.project_status == 6) {
      $('#abrar-edit-card .abrar-project-description').show();
      if (data.project_status_description != null) {
        $('#abrar-edit-card .abrar-project-description textarea').val(data.project_status_description);
      }
    }

    if (data.project_status == 9) {
      $('#abrar-edit-card .abrar-project-date').show();

      if (data.project_status_date != null) {
        $('#abrar-edit-card .abrar-project-date input[name=abrar-project-status-date]').attr('value', data.project_status_date);
      }
    }
  }

  $('#abrar-edit-card .abrar-project-date input[name=abrar-project-status-date]').persianDatepicker({
    format: 'YYYY/MM/DD',
    autoClose: true,
    initialValue: (data.project_status_date != null) ? true : false,
    initialValueType: 'persian'
  });

  if (data.project_start_latlng != null && data.project_end_latlng != null) {
    $('#abrar-edit-card input[name=abrar-project-latlng-start]').val(
      parseFloat(data.project_start_latlng[0]).toFixed(10) +
      parseFloat(data.project_start_latlng[1]).toFixed(10)
    )

    $('#abrar-edit-card input[name=abrar-project-latlng-end]').val(
      parseFloat(data.project_end_latlng[0]).toFixed(10) +
      parseFloat(data.project_end_latlng[1]).toFixed(10)
    )
  }

  setTimeout(() => {
    if ($('#abrar-edit-card').hasClass('collapsed-card')) {
      $('#abrar-edit-card > .card-header > .card-tools > button').click();
    }
  }, 100);

  setTimeout(() => {
    if (map == null) {
      createLeafletMap();
    }

    setTimeout(() => {
      checkStartMarkerValidation(false, true);
    }, 25);
    setTimeout(() => {
      checkEndMarkerValidation(false, true);
    }, 50);
  }, 200);
}

function createLeafletMap() {
  let bounds = [
    [42.9130026312, 75.6166317076],
    [20.5782370061, 35.5092252948]
  ];

  map = new L.map('abrar-map', {
    maxBounds: bounds,
    minZoom: 6
  }).setView([32.4279, 53.6880], 9);

  L.tileLayer('https://testmap.141.ir/141map/{z}/{x}/{y}.png', {}).addTo(map);

  startAbrarMarker = new L.marker(L.latLng(map.getCenter()), {
    icon: startAbrarDivIcon,
    draggable: true
  }).addTo(map);

  endAbrarMarker = new L.marker(L.latLng(map.getCenter()), {
    icon: endAbrarDivIcon,
    draggable: true
  });

  map.on('move', function () {
    if (!isSetStartAbrarMarker) {
      startAbrarMarker.setLatLng(L.latLng(map.getCenter()));
      $('#pin-marker-start').removeClass('pin-set pin-warn').addClass('pin-move');
    }


  });

  map.on('moveend', function () {
    if (!isSetStartAbrarMarker) {
      startAbrarMarker.setLatLng(L.latLng(map.getCenter()));
      $('#pin-marker-start').removeClass('pin-move pin-set');
    }

    if (isSetStartAbrarMarker) {
      endAbrarMarker.setLatLng(L.latLng(map.getCenter()));
      $('#pin-marker-end').removeClass('pin-move pin-set');
    }
  });

  startAbrarMarker.on('click', function () {
    if (!isSetStartAbrarMarker) {
      startAbrarMarker.setLatLng(L.latLng(map.getCenter()));
      isSetStartAbrarMarker = true;

      $('#pin-marker-start').removeClass('pin-move pin-warn').addClass('pin-set');

      $('#abrar-edit-card input[name=abrar-project-latlng-start]').val(
        startAbrarMarker.getLatLng().lat.toFixed(10) +
        startAbrarMarker.getLatLng().lng.toFixed(10)
      );
      $('#abrar-edit-card input[name=abrar-project-latlng-start]').removeClass('is-invalid-input');



      // let markerLatLng = [
      //   startAbrarMarker.getLatLng().lat,
      //   startAbrarMarker.getLatLng().lng + 0.0008
      // ];

      // map.setView(markerLatLng);
      // endAbrarMarker.setLatLng(markerLatLng);
      // endAbrarMarker.addTo(map);
    }
  });

  // endAbrarMarker.on('click', function () {
  //   if (!isSetEndAbrarMarker) {
  //     endAbrarMarker.setLatLng(L.latLng(map.getCenter()));
  //     isSetEndAbrarMarker = true;

  //     $('#pin-marker-end').removeClass('pin-move').addClass('pin-set');

  //     $('#abrar-edit-card input[name=abrar-project-latlng-end]').val(
  //       endAbrarMarker.getLatLng().lat.toFixed(10) +
  //       endAbrarMarker.getLatLng().lng.toFixed(10)
  //     );
  //     $('#abrar-edit-card input[name=abrar-project-latlng-end]').removeClass('is-invalid-input');

  //     checkMarkersAndDrawPath();
  //   }
  // });

  startAbrarMarker.on('drag', function () {
    $('#pin-marker-start').addClass('pin-move');
    checkMarkersAndDrawPath();
  });

  endAbrarMarker.on('drag', function () {
    $('#pin-marker-end').addClass('pin-move');
    checkMarkersAndDrawPath();
  });

  startAbrarMarker.on('dragend', function () {
    $('#pin-marker-start').removeClass('pin-move');

    if ($('#pin-marker-start').hasClass('pin-set') || isSetStartAbrarMarker) {
      $('#abrar-edit-card input[name=abrar-project-latlng-start]').val(
        startAbrarMarker.getLatLng().lat.toFixed(10) +
        startAbrarMarker.getLatLng().lng.toFixed(10)
      );
      $('#abrar-edit-card input[name=abrar-project-latlng-start]').removeClass('is-invalid-input');
      $('#pin-marker-start').addClass('pin-set');
      checkMarkersAndDrawPath();
    } else {
      map.setView(startAbrarMarker.getLatLng());
    }
  });

  endAbrarMarker.on('dragend', function () {
    $('#pin-marker-end').removeClass('pin-move');

    if ($('#pin-marker-end').hasClass('pin-set') || isSetEndAbrarMarker) {
      $('#abrar-edit-card input[name=abrar-project-latlng-end]').val(
        endAbrarMarker.getLatLng().lat.toFixed(10) +
        endAbrarMarker.getLatLng().lng.toFixed(10)
      );
      $('#abrar-edit-card input[name=abrar-project-latlng-end]').removeClass('is-invalid-input');
      $('#pin-marker-end').addClass('pin-set');
      checkMarkersAndDrawPath();
    } else {
      map.setView(endAbrarMarker.getLatLng());
    }
  });
}

function initialMarkerMapValue() {
  endAbrarMarker.remove();
  isSetEndAbrarMarker = false;
  map.setView([32.4279, 53.6880], 9);
  startAbrarMarker.setLatLng(L.latLng(map.getCenter()));
  isSetStartAbrarMarker = false;

  removeStartToEndPath();

  $('#pin-marker-start').removeClass('pin-move pin-set');
  $('#pin-marker-end').removeClass('pin-move pin-set');

  $('#abrar-edit-card input[name=abrar-project-latlng-start]').val('');
  $('#abrar-edit-card input[name=abrar-project-latlng-end]').val('');
  $('#abrar-edit-card input[name=abrar-project-latlng-start]').removeClass('is-invalid-input');
  $('#abrar-edit-card input[name=abrar-project-latlng-end]').removeClass('is-invalid-input');
}

$('#abrar-edit-card input[name=abrar-project-status]').on('change', function () {
  let statusId = parseInt(($(this)[0].id).slice(-1));

  if ($(this).prop('checked')) {
    $('#abrar-edit-card .project-status-label').removeClass('is-invalid-text');

    if (([2, 5, 6]).includes(statusId)) {
      abrarProjectSlider.slider('setValue', 0);
      $('#abrar-edit-card .abrar-project-slider').fadeIn();
    } else {
      $('#abrar-edit-card .abrar-project-slider').fadeOut();
    }

    if (statusId == 6) {
      $('#abrar-edit-card .abrar-project-description textarea').val('');
      $('#abrar-edit-card .abrar-project-description').fadeIn();
      $('#abrar-edit-card .abrar-project-description textarea').removeClass('is-invalid-box');
    } else {
      $('#abrar-edit-card .abrar-project-description').fadeOut();
    }

    if (statusId == 9) {
      $('#abrar-edit-card .abrar-project-date').fadeIn();
      $('#abrar-edit-card input[name=abrar-project-status-date]').removeClass('is-invalid-box');
    } else {
      $('#abrar-edit-card .abrar-project-date').fadeOut();
    }
  }
});

$('#abrar-edit-card input[name=abrar-project-type]').on('change', function () {
  if ($(this).prop('checked')) {
    $('#abrar-edit-card .project-type-label').removeClass('is-invalid-text');
  }
});

$('#abrar-edit-card input[name=abrar-project-latlng-start]').on('keyup', function () {
  checkStartMarkerValidation();
});

$('#abrar-edit-card input[name=abrar-project-latlng-end]').on('keyup', function () {
  checkEndMarkerValidation();
});

function checkStartMarkerValidation(forSaveData = false, pageOnLoad = false) {
  let reg = /^([0-9]){2}\.([0-9])+$/;
  let startLatLngVal = ($('#abrar-edit-card input[name=abrar-project-latlng-start]').val()).split(' - ');
  let startLatLng = startLatLngVal.map(function (e) {
    e = e.replace(/_/g, '');
    return parseFloat(e.slice(1, -1));
  });

  if (isNaN(startLatLng[0])) {
    if (!forSaveData) {
      $('#abrar-edit-card input[name=abrar-project-latlng-start]').removeClass('is-invalid-input');
    } else {
      $('#abrar-edit-card input[name=abrar-project-latlng-start]').addClass('is-invalid-input');
    }
    $('#pin-marker-start').removeClass('pin-move pin-set');
    $('#abrar-edit-card input[name=abrar-project-latlng-start]').val('');
    $('#abrar-edit-card input[name=abrar-project-latlng-start]').attr('placeholder', '(Ų´Ų±ŁˆŲ¹) => (Ų·ŁˆŁ„ Ų¬ŲŗŲ±Ų§ŁŪŒŲ§ŪŒŪŒ) - (Ų¹Ų±Ų¶ Ų¬ŲŗŲ±Ų§ŁŪŒŲ§ŪŒŪŒ)');
    return false;
  } else if (!startLatLng == 2 || !reg.test(startLatLng[0]) || !reg.test(startLatLng[1])) {
    $('#abrar-edit-card input[name=abrar-project-latlng-start]').addClass('is-invalid-input');
    $('#pin-marker-start').removeClass('pin-move pin-set');
    return false;
  } else {
    if (!forSaveData) {
      $('#abrar-edit-card input[name=abrar-project-latlng-start]').removeClass('is-invalid-input');

      startAbrarMarker.setLatLng(startLatLng);

      if (pageOnLoad) {
        setTimeout(() => {
          $('#pin-marker-start').removeClass('pin-move').addClass('pin-set');
          startAbrarMarker.setLatLng(startLatLng);
        }, 10);
      } else {
        $('#pin-marker-start').removeClass('pin-move').addClass('pin-set');
      }

      if (!isSetEndAbrarMarker) {
        let markerLatLng = [
          startAbrarMarker.getLatLng().lat,
          startAbrarMarker.getLatLng().lng + 0.0008
        ]

        map.setView(markerLatLng);
        endAbrarMarker.setLatLng(markerLatLng);

        if (!isSetStartAbrarMarker) {
          endAbrarMarker.addTo(map);
        }
      }

      isSetStartAbrarMarker = true;
    } else {
      projectEditData['project-start-latlng'] = [
        startAbrarMarker.getLatLng().lat.toFixed(10),
        startAbrarMarker.getLatLng().lng.toFixed(10)
      ];
    }

    checkMarkersAndDrawPath();

    return true;
  }
}

function checkEndMarkerValidation(forSaveData = false, pageOnLoad = false) {
  let reg = /^([0-9]){2}\.([0-9])+$/;
  let endLatLngVal = ($('#abrar-edit-card input[name=abrar-project-latlng-end]').val()).split(' - ');
  let endLatLng = endLatLngVal.map(function (e) {
    e = e.replace(/_/g, '');
    return parseFloat(e.slice(1, -1));
  });

  if (isNaN(endLatLng[0])) {
    if (!forSaveData) {
      $('#abrar-edit-card input[name=abrar-project-latlng-end]').removeClass('is-invalid-input');
    } else {
      $('#abrar-edit-card input[name=abrar-project-latlng-end]').addClass('is-invalid-input');
    }
    $('#pin-marker-end').removeClass('pin-move pin-set');
    $('#abrar-edit-card input[name=abrar-project-latlng-end]').val('');
    $('#abrar-edit-card input[name=abrar-project-latlng-end]').attr('placeholder', '(Ł¾Ų§ŪŒŲ§Ł†) => (Ų·ŁˆŁ„ Ų¬ŲŗŲ±Ų§ŁŪŒŲ§ŪŒŪŒ) - (Ų¹Ų±Ų¶ Ų¬ŲŗŲ±Ų§ŁŪŒŲ§ŪŒŪŒ)');
    return false;
  } else if (!endLatLng == 2 || !reg.test(endLatLng[0]) || !reg.test(endLatLng[1])) {
    $('#abrar-edit-card input[name=abrar-project-latlng-end]').addClass('is-invalid-input');
    $('#pin-marker-end').removeClass('pin-move pin-set');
    return false;
  } else {
    if (!forSaveData) {
      $('#abrar-edit-card input[name=abrar-project-latlng-end]').removeClass('is-invalid-input');

      endAbrarMarker.setLatLng(endLatLng);
      isSetEndAbrarMarker = true;

      if (pageOnLoad) {
        setTimeout(() => {
          $('#pin-marker-end').removeClass('pin-move').addClass('pin-set');
          endAbrarMarker.setLatLng(endLatLng);
        }, 10);
      } else {
        $('#pin-marker-end').removeClass('pin-move').addClass('pin-set');
      }
    } else {
      projectEditData['project-end-latlng'] = [
        endAbrarMarker.getLatLng().lat.toFixed(10),
        endAbrarMarker.getLatLng().lng.toFixed(10)
      ];
    }

    checkMarkersAndDrawPath();

    return true;
  }
}

function showLoaderScreen() {
  $('.starter-loader-container').css('display', 'flex').hide().fadeIn();
}

function hideLoaderScreen() {
  $('.starter-loader-container').fadeOut();
}

$('#abrar-edit-card > .card-footer > .btn.btn-success').on('click', function () {
  saveAbrarFormData();
});

function checkPersianWordValidation(str) {
  let reg = /^[\u0600-\u06FF\s\.]+$/;

  if (!reg.test(str)) {
    return false;
  }
  return true;
}

function checkDataValidation() {
  let isDataValid = true;

  if ($('#abrar-edit-card input[name=abrar-project-type]:checked').length === 0) {
    isDataValid = false;
    $('#abrar-edit-card .project-type-label').addClass('is-invalid-text');
  } else {
    let projectTypeChecked = $('#abrar-edit-card input[name=abrar-project-type]:checked');
    let projectType = [];

    for (let i = 0; i < projectTypeChecked.length; i++) {
      projectType[i] = parseInt((projectTypeChecked[i].id).slice(-1));
    }

    projectEditData['project-type'] = projectType;
  }

  if ($('#abrar-edit-card input[name=abrar-project-status]:checked').length === 0) {
    isDataValid = false;
    $('#abrar-edit-card .project-status-label').addClass('is-invalid-text');
  } else {
    let statusId = parseInt(($('#abrar-edit-card input[name=abrar-project-status]:checked')[0].id).slice(-1));
    projectEditData['project-status'] = statusId;

    if (([2, 5, 6]).includes(statusId)) {
      projectEditData['project-status-progress'] = abrarProjectSlider.slider('getValue');
    } else {
      projectEditData['project-status-progress'] = null;
    }

    if (statusId == 6) {
      if ($('#abrar-edit-card .abrar-project-description textarea').val() == '' || !checkPersianWordValidation($('#abrar-edit-card .abrar-project-description textarea').val())) {
        isDataValid = false;
        $('#abrar-edit-card .abrar-project-description textarea').addClass('is-invalid-box');
      } else {
        $('#abrar-edit-card .abrar-project-description textarea').removeClass('is-invalid-box');
        projectEditData['project-status-description'] = $('#abrar-edit-card .abrar-project-description textarea').val();
      }
    } else {
      projectEditData['project-status-description'] = null;
    }

    if (statusId == 9) {
      if ($('#abrar-edit-card input[name=abrar-project-status-date]').val() == '') {
        isDataValid = false;
        $('#abrar-edit-card input[name=abrar-project-status-date]').addClass('is-invalid-box');
      } else {
        let regDate = /^Ū±[Ū³-Ū´][Ū°|Ū¹][Ū°-Ū¹]\/[Ū°-Ū±][Ū°-Ū¹]\/[Ū°-Ū³][Ū°-Ū¹]$/;

        if (regDate.test($('#abrar-edit-card input[name=abrar-project-status-date]').val())) {
          $('#abrar-edit-card input[name=abrar-project-status-date]').removeClass('is-invalid-box');
          projectEditData['project-status-date'] = $('#abrar-edit-card input[name=abrar-project-status-date]').val();
        } else {
          isDataValid = false;
          $('#abrar-edit-card input[name=abrar-project-status-date]').addClass('is-invalid-box');
          projectEditData['project-status-date'] = null;
        }
      }
    } else {
      projectEditData['project-status-date'] = null;
    }
  }

  if (!checkStartMarkerValidation(true)) {
    isDataValid = false;
  }

  if (!checkEndMarkerValidation(true)) {
    isDataValid = false;
  }

  return isDataValid;
}



function saveFastReaction(id) {
  // if (checkDataValidation()) {
  showLoaderScreen();

  formData = new FormData();

  let fileIndex = 0

  formData.append('rms-status', $('#cBox' + (id)).prop('checked') ? "1" : "0");

  if($("#parentButton" + id).children("p").length)
  {
    formData.append('rms-start-latlng' , $("#parentButton" + id).children("p").html().slice(1,$("#parentButton" + id).children("p").html().length-1))
  }
  

  if ($('#uploadBefore' + (id))[0].files.length > 0) {
    formData.append('files_' + fileIndex, $('#uploadBefore' + (id))[0].files[0]);
    fileIndex++
  }
  if ($('#uploadAfter' + (id))[0].files.length > 0) {
    formData.append('files_' + fileIndex, $('#uploadAfter' + (id))[0].files[0]);
  }
  if ($('#desBox' + id ).val() != "") {
    formData.append('rms-description', $('#desBox' + id ).val());
  }


  // formData.append('project-status', projectEditData['project-status']);
  // if (projectEditData['project-status-progress'] != null) {
  //   formData.append('project-status-progress', projectEditData['project-status-progress']);
  // }
  // if (projectEditData['project-status-description'] != null) {
  //   formData.append('project-status-description', projectEditData['project-status-description']);
  // }
  // if (projectEditData['project-status-date'] != null) {
  //   formData.append('project-status-date', projectEditData['project-status-date']);
  // }
  // formData.append('project-start-latlng', projectEditData['project-start-latlng']);
  // formData.append('project-end-latlng', projectEditData['project-end-latlng']);

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

  $.ajax({
    url: "https://rms.rmto.ir/api/public/road-observation-problems/" + id + "/edit",
    type: 'POST',
    data: formData,
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    cache: false,
    contentType: false,
    processData: false,
    success: function (result) {
      //console.log(result);
      setTimeout(() => {
        hideLoaderScreen();
        // window.open("/rmto?newAbrarProjectId=" + projectEditId, '_self');
      }, 200);
    },
    error: function (error) {
      console.log(error);
      hideLoaderScreen();
    }
  });
  // }
}

function drawStartToEndPath(pathType, source, dest) {
  if (routeControlsPath.length) {
    $(routeControlsPath).each(function (index, control) {
      map.removeControl(control);
      routeControlsPath.splice(routeControlsPath.indexOf(index), 1);
    });
  }
  if (polylinePath != null) {
    map.removeLayer(polylinePath);
  }
  switch (pathType) {
    case 'line': {
      polylinePath = L.polyline(
        [
          [source[0], source[1]], [dest[0], dest[1]]
        ],
        {
          color: '#0073e6',
          opacity: .6,
          weight: 5
        }
      ).addTo(map);
      break;
    }
    case 'axis': {
      $.get(`https://testmap.141.ir/route/v1/driving/${source[1]},${source[0]};${dest[1]},${dest[0]}?overview=false&alternatives=true&steps=true`,
        function (data) {
          routeControlsPath.push(
            L.Routing.control({
              waypoints: [
                L.latLng(parseFloat(source[0]), parseFloat(source[1])),
                L.latLng(parseFloat(dest[0]), parseFloat(dest[1]))
              ],
              fitSelectedRoutes: false,
              draggableWaypoints: true,
              createMarker: function () { return null; },
              lineOptions: {
                addWaypoints: false,
                styles: [{
                  color: '#0073e6',
                  opacity: .6,
                  weight: 5
                }]
              },
            }).on('routesfound', function (e) {
              for (let index = 0; index < popupArraysPath.length; index++) {
                if (popupArraysPath[index] !== null) {
                  map.removeLayer(popupArraysPath[index]);
                }
              }

              /*let popup = new L.Popup({
                'maxWidth': '300',
                'maxHeight': '150',
                'className': 'customRouteEstimate'
              });

              let popupLocation = new L.LatLng(e.routes[0].coordinates[parseInt(e.routes[0]
                .coordinates
                .length /
                2)].lat,
                e.routes[0].coordinates[parseInt(e.routes[0].coordinates.length / 2)]
                  .lng);
              let popupContent = "<span style=\"color:#FF5630 ; font-size:11px\">Ł…Ų³Ų§ŁŲŖ : </span>" + parseFloat(e.routes[0].summary.totalDistance / 1000.0).toFixed(2) + " Ś©ŪŒŁ„ŁˆŁ…ŲŖŲ±";
              popup.setLatLng(popupLocation);
              popup.setContent(popupContent);
              popupArraysPath.push(popup);
              map.addLayer(popup);*/

            }).addTo(map)
          );
        });

      $('.leaflet-control-container').css('display', 'none');
      $('.leaflet-routing-container-hide').css('display', 'none');
      break;
    }
  }
}


function checkMarkersAndDrawPath() {
  if (($('#pin-marker-start').hasClass('pin-set') && !$('#pin-marker-start').hasClass('pin-move'))
    && ($('#pin-marker-end').hasClass('pin-set') && !$('#pin-marker-end').hasClass('pin-move'))) {
    drawStartToEndPath(
      'line',
      [
        startAbrarMarker.getLatLng().lat,
        startAbrarMarker.getLatLng().lng
      ],
      [
        endAbrarMarker.getLatLng().lat,
        endAbrarMarker.getLatLng().lng
      ]
    );
  } else {
    setTimeout(() => {
      if (($('#pin-marker-start').hasClass('pin-set') && !$('#pin-marker-start').hasClass('pin-move'))
        && ($('#pin-marker-end').hasClass('pin-set') && !$('#pin-marker-end').hasClass('pin-move'))) {
        drawStartToEndPath(
          'line',
          [
            startAbrarMarker.getLatLng().lat,
            startAbrarMarker.getLatLng().lng
          ],
          [
            endAbrarMarker.getLatLng().lat,
            endAbrarMarker.getLatLng().lng
          ]
        );
      } else {
        if (routeControlsPath.length) {
          $(routeControlsPath).each(function (index, control) {
            map.removeControl(control);
            routeControlsPath.splice(routeControlsPath.indexOf(index), 1);
          });
        }
        if (polylinePath != null) {
          map.removeLayer(polylinePath);
        }
      }
    }, 20);
  }
}

function removeStartToEndPath() {
  if (routeControlsPath.length) {
    $(routeControlsPath).each(function (index, control) {
      map.removeControl(control);
      routeControlsPath.splice(routeControlsPath.indexOf(index), 1);
    });
  }
  if (polylinePath != null) {
    map.removeLayer(polylinePath);
  }
}