// Map variables
var sourceLat = "",
    sourceLng = "",
    destLat = "",
    destLng = "";
var saveTotalDistance = null;
var sourceMarker, destMarker;
var routeControls = [];
var popupArrays = [];
var routeControlsPath = [];
var polylinePath = null;
var bounds = [
    [46.9130026312, 77.6166317076],
    [17.5782370061, 32.5092252948],
];

// Form Input
var selectedItem = 0;
var previousSelectedItem = 0;
var selectedSubItems = "";
var slideIndexlayer = 1;
var subItemsData = {};
var submitFormInput = [];
var mountslider
var contract_credit
var project_distance = {}
var files = []
var titlemodal = "";
var hasSubItemGotValue = true;
var projectType = 0;
var itemsData = null;
var requestId = null;
var startAbrarMarker = null;
var isSetStartAbrarMarker = false;
var endAbrarMarker = null;
var isSetEndAbrarMarker = false;
var map = null
var filesimage = []
var idkol
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],
});

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

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

function getLastURLPart(url) {
    var part = url.match(/.*\/(.+)/);
    if (!part) {
        return null;
    }
    return part[1];
}

$(document).ready(function () {
    var urlParams = new URLSearchParams(window.location.search);
    console.log("test", urlParams)
    var url = window.location.href;
    console.log(url)
    console.log(getLastURLPart(url));
    // console.log(urlParams.get('uid')); // "edit"
    idkol = getLastURLPart(url)
    let formData = new FormData();
    formData.append("id", idkol);
    $.ajax({
        url: "https://rms.rmto.ir/camp/get",
        type: "POST",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function (result) {
            console.log(result)
            showsubmit(result.data)
        },
    });


});
function showsubmit(data) {
    console.log("hhh", data)
    // Create leaflet map client
    filesimage = data.files
    map = L.map("map", {
        maxBounds: bounds,
        minZoom: 6,
    }).setView([data.start_latlng[0], data.start_latlng[1]], 9);

    // Create map tile layer
    L.tileLayer("https://testmap.141.ir/141map/{z}/{x}/{y}.png", {}).addTo(map);
    // console.log(data[0].start_latlng[0], data[0].start_latlng[1])
    startAbrarMarker = new L.marker(L.latLng(data.start_latlng[0], data.start_latlng[1]), {
        icon: startAbrarDivIcon,
    }).bindPopup(getPopupContentAccidentstart(data),
        { className: "customPopupStyle" })
        .addTo(map);

    endAbrarMarker = new L.marker(L.latLng(data.end_latlng[0], data.end_latlng[1]), {
        icon: endAbrarDivIcon,
    }).bindPopup(getPopupContentAccidentend(data),
        { className: "customPopupStyle" })
        .addTo(map);
    map.flyTo([data.end_latlng[0], data.end_latlng[1]], 12)
    setTimeout(function () {
        // drawPath(data[0].start_latlng, data[0].end_latlng)
        drawPath(data.start_latlng, data.end_latlng)
    }, 2000);
}

function drawPath(start, end) {
    if (routeControls.length) {
        $(routeControls).each(function (index, control) {
            map.removeControl(control);
            routeControls.splice(routeControls.indexOf(index), 1);
        });
    }
    // $.get(`https://testmap.141.ir/route/v1/driving/${sourceLng},${sourceLat};${destLng},${destLat}?overview=false&alternatives=true&steps=true`,
    //   function (data) {
    routeControls.push(
        L.Routing.control({
            waypoints: [
                L.latLng(parseFloat(start[0]), parseFloat(start[1])),
                L.latLng(parseFloat(end[0]), parseFloat(end[1])),
            ],
            fitSelectedRoutes: false,
            draggableWaypoints: true,
            createMarker: function () {
                return null;
            },
            lineOptions: {
                addWaypoints: false,
                styles: [
                    {
                        color: "#28a745",
                        opacity: 0.8,
                        weight: 5,
                    },
                ],
            },
        })
            .on("routesfound", function (e) {
                var divideBy = 2;

                for (let index = 0; index < popupArrays.length; index++) {
                    map.removeLayer(popupArrays[index]);
                }

                var customOptions = {
                    maxWidth: "300",
                    maxHeight: "150",
                    className: "customRouteEstimate",
                };
                var popup = new L.Popup(customOptions);

                var popupLocation = new L.LatLng(
                    e.routes[0].coordinates[
                        parseInt(e.routes[0].coordinates.length / divideBy)
                    ].lat,
                    e.routes[0].coordinates[
                        parseInt(e.routes[0].coordinates.length / divideBy)
                    ].lng
                );

                var popupContent =
                    '<span style="color:#FF5630; font-size:11px; font-family: IRANSansFaNum;">مسافت: </span>' +
                    parseFloat(e.routes[0].summary.totalDistance / 1000.0).toFixed(2) +
                    " کیلومتر";

                saveTotalDistance = parseFloat(
                    parseFloat(e.routes[0].summary.totalDistance / 1000.0).toFixed(2)
                );

                popup.setLatLng(popupLocation);
                popup.setContent(popupContent);

                popupArrays.push(popup);
                map.addLayer(popup);


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

    $(".leaflet-control-container").css("display", "none");
    $(".leaflet-routing-container-hide").css("display", "none");
}
function getPopupContentAccidentstart(array) {
    var data =
        '\
   <div class="popup">\
     <div class="popupTitle">\
       <img src="/dist/images/icons/caution.svg" alt="">\
       <span class="popupHeader"> ثبت محور دارای انسداد  </span>\
     </div>\
     <div class="popupHeaderContent"><div class="popUpBanner">اداره کل ' +
        array.province_fa +
        "، شهرستان: " +
        array.city_1_fa +
        '</div>\
     <div class="popupContent">\
     <div class="popUpBox" style="width:75px"><span>   نام محور </span><div class="popUpBoxContent">' +
        array.axis_name +
        '</div></div>\
     <div class="popUpBox" style="width:75px"><span>    نوع محور </span><div class="popUpBoxContent">' +
        showaxistype(array.axis_type) +
        '</div></div> </div>\
             <div class="popupContent">\
     <div class="popUpBox" style="width:75px">\
   <span> علت انسداد  </span><div class="popUpBoxContent">' +
        array.blockage_cause_fa +

        '</div> </div>\
       <div class="popUpBox" style="width:75px"><span>  پیش بینی تاریخ بازگشایی </span><div class="popUpBoxContent">' +
        array.prediction_time_fa +
        '</div></div>\
      </div>\
     </div>\
     <div class="popupContent">\
     <div class="popUpBox" style="width:75px"><span>  طول راه آسیب دیده   </span><div class="popUpBoxContent">' +
        array.blockage_length +
        '</div></div>\
     <div class="popUpBox" style="width:75px"><span>   برآورد اولیه خسارت    </span><div class="popUpBoxContent">' +
        array.blockage_damage_money +
        "" +
        '</div></div>\
      <div class="popupContent">\
     <div class="popUpBox" style="width:75px"><span> تعداد پل های اسیب دیده (دهانه بزرگتر از 6 متر ) </span><div class="popUpBoxContent">' +
        array.blockage_damage_higher_6_count +
        '</div></div>\
     <div class="popUpBox" style="width:75px"><span> تعداد پل های اسیب دیده (دهانه کوچکتر از 6 متر )  </span><div class="popUpBoxContent">' +
        array.blockage_damage_lower_6_count +
        '</div></div>\
     <div class="popupContent">\
     <div class="popUpBox" style="width:75px"><span> سایر ابنیه فنی  آسیب دیده</span><div class="popUpBoxContent">' +
        array.blockage_damage_count +
        '</div></div>\
     <div class="popUpBox" style="width:75px"><span> تعداد ماشین آلات فعال در محور  </span><div class="popUpBoxContent">' +
        array.active_cars_count +
        '</div></div>\
      <div class="popupContent">\
     <div class="popUpBox" style="width:75px"><span> تعداد عوامل راهدار فعال در محور</span><div class="popUpBoxContent">' +
        array.active_rahdar_count +
        '</div></div>\
     <div class="popUpBox" style="width:75px"><span> توضیحات   </span><div class="popUpBoxContent">' +
        array.block_axis_desc +
        '</div></div>\
     <button class="popUpBox showpicbutt" style="width:100% !important" onclick="show_point_photo(filesimage)"> نمایش تصاویر' +
        '</button>\
      </div>\
     </div>\
     </div>\
     </div>\
     </div>'
    // GenerateTable(project_distance)
    return data
}
function showprojectstatus(num) {
    if (num == 1) {
        return " در دست برنامه ریزی اولیه"
    }
    else if (num == 2) {
        return " در دست مطالعه و تهیه اسناد مناقصه"
    }
    else if (num == 3) {
        return "در دست مناقصه"
    }
    else if (num == 4) {
        return "در حال تجهیز کارگاه"
    }
    else if (num == 5) {
        return " در حال اجرا/فعال"
    }
    else if (num == 6) {
        return "در حال اجرا/متوقف "
    }
    else if (num == 7) {
        return " در حال آماده سازی برای افتتاح"
    }
    else if (num == 8) {
        return " تکمیل و خاتمه یافته و بهره برداری شده "


    }
    else {
        return "-"
    }
}
function getPopupContentAccidentend(array) {
    var data =
        '\
   <div class="popup">\
     <div class="popupTitle">\
       <img src="/dist/images/icons/caution.svg" alt="">\
       <span class="popupHeader"> ثبت محور دارای انسداد  </span>\
     </div>\
     <div class="popupHeaderContent"><div class="popUpBanner">اداره کل ' +
        array.province_fa +
        "، شهرستان: " +
        array.city_1_fa +
        '</div>\
     <div class="popupContent">\
     <div class="popUpBox" style="width:75px"><span>   نام محور </span><div class="popUpBoxContent">' +
        array.axis_name +
        '</div></div>\
     <div class="popUpBox" style="width:75px"><span>    نوع محور </span><div class="popUpBoxContent">' +
        showaxistype(array.axis_type) +
        '</div></div> </div>\
             <div class="popupContent">\
     <div class="popUpBox" style="width:75px">\
   <span> علت انسداد  </span><div class="popUpBoxContent">' +
        array.blockage_cause_fa +

        '</div> </div>\
       <div class="popUpBox" style="width:75px"><span>  پیش بینی تاریخ بازگشایی </span><div class="popUpBoxContent">' +
        array.prediction_time_fa +
        '</div></div>\
      </div>\
     </div>\
     <div class="popupContent">\
     <div class="popUpBox" style="width:75px"><span>  طول راه آسیب دیده   </span><div class="popUpBoxContent">' +
        array.blockage_length +
        '</div></div>\
     <div class="popUpBox" style="width:75px"><span>   برآورد اولیه خسارت    </span><div class="popUpBoxContent">' +
        array.blockage_damage_money +
        "" +
        '</div></div>\
      <div class="popupContent">\
     <div class="popUpBox" style="width:75px"><span> تعداد پل های اسیب دیده (دهانه بزرگتر از 6 متر ) </span><div class="popUpBoxContent">' +
        array.blockage_damage_higher_6_count +
        '</div></div>\
     <div class="popUpBox" style="width:75px"><span> تعداد پل های اسیب دیده (دهانه کوچکتر از 6 متر )  </span><div class="popUpBoxContent">' +
        array.blockage_damage_lower_6_count +
        '</div></div>\
     <div class="popupContent">\
     <div class="popUpBox" style="width:75px"><span> سایر ابنیه فنی  آسیب دیده</span><div class="popUpBoxContent">' +
        array.blockage_damage_count +
        '</div></div>\
     <div class="popUpBox" style="width:75px"><span> تعداد ماشین آلات فعال در محور  </span><div class="popUpBoxContent">' +
        array.active_cars_count +
        '</div></div>\
      <div class="popupContent">\
     <div class="popUpBox" style="width:75px"><span> تعداد عوامل راهدار فعال در محور</span><div class="popUpBoxContent">' +
        array.active_rahdar_count +
        '</div></div>\
     <div class="popUpBox" style="width:75px"><span> توضیحات   </span><div class="popUpBoxContent">' +
        array.block_axis_desc +
        '</div></div>\
     <button class="popUpBox showpicbutt" style="width:100% !important" onclick="show_point_photo(filesimage)"> نمایش تصاویر' +
        '</button>\
      </div>\
     </div>\
     </div>\
     </div>\
     </div>'
    // GenerateTable(project_distance)
    return data

}

function showcity(array) {
    console.log("array", array)
    var dataname = ""
    for (let i = 0; i < array.length; i++) {
        dataname += array[i].name + " "
        // console.log(i, array[i].name )
    }
    // console.log(dataname)
    return dataname
}
function showaxistype(num) {
    if (num == 1) {
        return "شریانی"
    }
    else if (num == 2) {
        return "اصلی"
    }
    else if (num == 3) {
        return "فرعی"
    }
    else return "روستایی"
}




$("#slideroverlay > .camera-overlay").on("click", function () {
    $(this).parent().css("display", "none");
    $("#slideshow-slide").find(".mySlides").remove();
    $("#slideshow-dot").find(".dot").remove();
});
$("#slideroverlay .close").on("click", function () {
    $(this).parent().parent().css("display", "none");
    $("#slideshow-slide").find(".mySlides").remove();
    $("#slideshow-dot").find(".dot").remove();
});
$("#slideroverlay #slideshow-slide .prev").on("click", function () {
    layerslidershow((slideIndexlayer -= 1));
});

$("#slideroverlay #slideshow-slide .next").on("click", function () {
    layerslidershow((slideIndexlayer += 1));
});

function show_point_photo(array) {
    console.log("array", array)
    var dataLength = array.length;
    console.log(dataLength)
    $("#slideshow-slide").find(".mySlides").remove();
    $("#slideshow-dot").find(".dot").remove();
    $(array).each(function (index, item) {
        var imageUrl = "https://rms.rmto.ir/storage" + array[index].path.slice(6)
        // console.log(index,item)
        let divSlide =
            '<div class="mySlides"><div class="numbertext">' +
            dataLength +
            " / " +
            (index + 1) +
            '</div><img src="' +
            imageUrl + '"><div class="text" style="display:none>' +
            "</div></div>";
        $("#slideshow-slide").append(divSlide);
        $("#slideshow-dot").append(
            '<span class="dot" onclick="currentCameraSlide(' +
            (index + 1) +
            ')"></span>'
        );
    });
    if (dataLength > 0) {
        slideindex = 1;
        layerslidershow(slideindex);
        $("#slideroverlay").css("display", "block");
    }
    // console.log(array.length)

}
function layerslidershow(n) {
    let slides = $("#slideroverlay #slideshow-slide .mySlides");
    let dots = $("#slideroverlay #slideshow-dot .dot");

    if (n > slides.length) {
        slideIndexlayer = 1;
    }
    if (n < 1) {
        slideIndexlayer = slides.length;
    }

    $(slides).each(function () {
        $(this).css("display", "none");
    });
    $(dots).each(function () {
        $(this).removeClass("active");
    });

    $(slides[slideIndexlayer - 1]).css("display", "block");
    $(dots[slideIndexlayer - 1]).addClass("active");
}

function updatemodalmarker() {
    // updatenameofproject(project_distance)
    projectstatus()
    fillinput(contract_credit, project_status)
    updateslider(mountslider)
    percentofpogress(mountslider)
    // showimage()
    $("#updatemodal").modal('show')
}
function updatenameofproject(object) {
    var returnval = ""
    $("#form-update").empty()
    $.each(object, function (index, value) {
        if (index == 1) {
            returnval =
                `<p class="headerproject">روکش آسفالت</p> <div class="form-row" id="rookesh">
                        <div class="form-group col-md-6">
                              <label>  کیلومتر </label>
                              <input type="number" min="0" max=${value[0]} class="form-control modalformkilo" id="rookesh1"
                               placeholder="کیلومتر" value=${value[0]} />

                          </div>
                         <div class="form-group col-md-6">
                           <label> تناژ </label>
                            <input type="number" min="0" max=${value[1]} class="form-control modalformkilo" id="rookesh2"
                              placeholder="تناژ" value=${value[1]} >
                          </div>
                   </div>`
        }

        if (index == 2) {
            returnval =
                `    <p class="headerproject">  ماسه آسفالت </p>    <div class="form-row" id="mase">
                        <div class="form-group col-md-6">
                              <label>  کیلومتر</label>
                              <input type="number" min="0" max=${value[0]} class="form-control modalformkilo" id="mase1"
                              name="ekipnum" placeholder="کیلومتر"  value="${value[0]}"/>

                          </div>
                         <div class="form-group col-md-6">
                           <label>تناژ  </label>
                            <input type="number" min="0" max=${value[1]} class="form-control modalformkilo" id="mase2"
                              name="ekipnum" placeholder="تناژ" value="${value[1]}"/>
                          </div>
                   </div>`

        }

        if (index == 3) {
            returnval =
                `<p class="headerproject">بازیافت سرد و گرم</p> <div class="form-row" id="trace">
                        <div class="form-group col-md-6">
                              <label>  کیلومتر </label>
                              <input type="number" min="0"  max=${value[0]} class="form-control modalformkilo" id="trace1"
                              name="ekipnum" placeholder="کیلومتر" value="${value[0]}" />

                          </div>
                         <div class="form-group col-md-6">
                           <label> تناژ </label>
                            <input type="number" min="0" max=${value[1]} class="form-control modalformkilo" id="trace2"
                              name="ekipnum" placeholder="تناژ" value="${value[1]}"/>
                          </div>
                   </div>`

        }

        if (index == 4) {
            returnval =
                `<p class="headerproject">میکروسرفیسینگ</p> <div class="form-row" id="micro" >
                        <div class="form-group col-md-6">
                              <label>   کیلومتر  </label>
                              <input type="number" min="0" max=${value[0]} class="form-control modalformkilo" id="micro1"
                              name="ekipnum" placeholder="کیلومتر"  value="${value[0]}" />

                          </div>
                         <div class="form-group col-md-6">
                           <label> تناژ </label>
                            <input type="number" min="0" max=${value[1]} class="form-control modalformkilo" id="micro2"
                              name="ekipnum" placeholder="تناژ"  value="${value[1]}"/>
                          </div>
                   </div>`

        }

        if (index == 5) {
            returnval =
                `<p class="headerproject">  چیپ سیل  </p>   <div class="form-row" id="chip">
                        <div class="form-group col-md-6">
                              <label>  کیلومتر  </label>
                              <input type="number" min="0" max=${value[0]} class="form-control modalformkilo" id="chip1"
                              name="ekipnum" placeholder="کیلومتر"  value="${value[0]}" />

                          </div>
                         <div class="form-group col-md-6">
                           <label> تناژ </label>
                            <input type="number" min="0" max=${value[1]} class="form-control modalformkilo" id="chip2"
                              name="ekipnum" placeholder="تناژ"  value="${value[1]}"/>
                          </div>
                   </div>`
        }

        if (index == 6) {
            returnval =
                `  <p class="headerproject">   اسلاری سیل   </p>   <div class="form-row" id="slary">
                        <div class="form-group col-md-6">
                              <label>  کیلومتر  </label>
                              <input type="number" min="0" max=${value[0]} class="form-control modalformkilo" id="slary1"
                              name="ekipnum" placeholder="کیلومتر" value="${value[0]}"/>

                          </div>
                         <div class="form-group col-md-6">
                           <label>تناژ  </label>
                            <input type="number" min="0"  max=${value[1]} class="form-control modalformkilo" id="slary2"
                              name="ekipnum" placeholder="تناژ" value="${value[1]}"/>
                          </div>
                   </div>`

        }

        if (index == 7) {
            returnval =
                `<p class="headerproject"> اسکراب سیل </p> <div class="form-row" id="eskerab" >
                        <div class="form-group col-md-6">
                              <label>    کیلومتر   </label>
                              <input type="number" min="0" max=${value[0]} class="form-control modalformkilo" id="eskerab1"
                              name="ekipnum" placeholder="کیلومتر" value="${value[0]}"/>

                          </div>
                         <div class="form-group col-md-6">
                           <label> تناژ  </label>
                            <input type="number" min="0" max=${value[1]} class="form-control modalformkilo" id="eskerab2"
                              name="ekipnum" placeholder="تناژ" value="${value[1]}"/>
                          </div>
                   </div>`

        }

        if (index == 8) {
            returnval =
                `    <p class="headerproject">  فوگ سیل </p>  <div class="form-row" id="fog">
                        <div class="form-group col-md-6">
                              <label>کیلومتر</label>
                              <input type="number" min="0" max=${value[0]} class="form-control modalformkilo" id="fog1"
                              name="ekipnum" placeholder="کیلومتر" value="${value[0]}" />

                          </div>
                         <div class="form-group col-md-6">
                           <label> تناژ </label>
                            <input type="number" min="0" max=${value[1]} class="form-control modalformkilo" id="fog2"
                              name="ekipnum" placeholder="تناژ" value="${value[1]}"/>
                          </div>
                   </div>`

        }

        if (index == 9) {
            returnval =
                ` <p class="headerproject">   سیل کت   </p>  <div class="form-row" id="kat" >
                        <div class="form-group col-md-6">
                              <label>   کیلومتر  </label>
                              <input type="number" min="0" max=${value[0]} class="form-control modalformkilo" id="kat1"
                              name="ekipnum" placeholder="کیلومتر" value="${value[0]}"/>

                          </div>
                         <div class="form-group col-md-6">
                           <label> تناژ </label>
                            <input type="number" min="0" max=${value[1]} class="form-control modalformkilo" id="kat2"
                              name="ekipnum" placeholder="تناژ" value="${value[1]}"/>
                          </div>
                   </div>`

        }
        if (index == 10) {
            returnval =
                `<p class="headerproject">  کیپ سیل   </p> <div class="form-row"  id="kipseil">
                        <div class="form-group col-md-6">
                              <label> کیلومتر  </label>
                              <input type="number" min="0" max=${value[0]} class="form-control modalformkilo" id="kipseil1"
                              name="ekipnum" placeholder="کیلومتر"  value="${value[0]}"/>
                          </div>
                         <div class="form-group col-md-6">
                           <label> تناژ </label>
                            <input type="number" min="0" max=${value[1]} class="form-control modalformkilo" id="kipseil2"
                              name="ekipnum" placeholder="تناژ" value="${value[1]}"/>
                          </div>
                   </div>`

        }
        if (index == 11) {
            returnval =
                ` <p class="headerproject"> آسفالت سرد/ردمیکس </p>  <div class="form-row" id="redmix">
                        <div class="form-group col-md-6">
                              <label>  کیلومتر  </label>
                              <input type="number" min="0" max=${value[0]} class="form-control modalformkilo" id="redmix1"
                              name="ekipnum" placeholder="کیلومتر" value="${value[0]}" />

                          </div>
                         <div class="form-group col-md-6">
                           <label> تناژ  </label>
                            <input type="number" min="0" max=${value[1]} class="form-control modalformkilo" id="redmix2"
                              name="ekipnum" placeholder="تناژ" value="${value[1]}"/>
                          </div>
                   </div>`

        }
        if (index == 12) {
            returnval =
                ` <p class="headerproject"> لکه گیری</p> <div class="form-row"  id="lake">
                        <div class="form-group col-md-4">
                              <label>    کیلومتر    </label>
                              <input type="number" min="0" max=${value[0]} class="form-control modalformkilo" id="lake1"
                              name="ekipnum" placeholder="کیلومتر" value="${value[0]}" />

                          </div>
                         <div class="form-group col-md-4">
                           <label> متر مربع   </label>
                            <input type="number" min="0" max=${value[1]} class="form-control modalformkilo" id="lake2"
                              name="ekipnum" placeholder="تناژ" value="${value[1]}" />
                          </div>
                            <div class="form-group col-md-4">
                           <label> تناژ  </label>
                            <input type="number" min="0" max=${value[2]} class="form-control modalformkilo " id="lake3"
                              name="ekipnum" placeholder="متر مربع " value="${value[2]}" />
                          </div>
                   </div>`
        }
        if (index == 13) {
            returnval =
                ` <p class="headerproject"> درزگیری</p> <div class="form-row" id="darzgiri" >
                        <div class="form-group col-md-6">
                              <label>    کیلومتر   </label>
                              <input type="number" min="0"  max=${value[0]} class="form-control modalformkilo" id="darzgiri1"
                              name="ekipnum" placeholder="کیلومتر"  value="${value[0]}"/>

                          </div>
                   </div>`
        }
        $("#form-update").append(returnval)
    });
}
function updateslider(mountslider) {
    var test = `
   <div class="form-group" id="allsliderphysici">
     <label class="slider-label"> پیشرفت فیزیکی</label>
       </div>
  `
    $("#form-update").append(test)
    percentofpogress(mountslider)
}
function percentofpogress(mountslider) {
    let test =
        '<div class="project-slider status-slider-body pr-2 pl-2 mb-5 mt-1">\
                <input class="allex2" type="text" data-slider-step="1"  data-slider-value="' +
        mountslider +
        '"/></div> ';

    $("#allsliderphysici").empty();

    $("#allsliderphysici").append(
        '<label class="allslider-label" for="inputAddress2"> پیشرفت فیزیکی</label>'
    );
    $("#allsliderphysici").append(test);

    $(".allex2").slider({
        min: 0,
        max: 100,
        formatter: function (value) {
            return value + "٪";
        },
        tooltip: "always",
        tooltip_position: "bottom",
    });
}
function projectstatus() {
    var test =
        `<div class="form-row" >
                        <div class="form-group col-md-6">
                              <label> مطالبات پیمانکار  </label>
                              <input type="number" min="0" class="form-control modalformkilo" id="moneypey"
                               />

                          </div>
                         <div class="form-group col-md-6">
                           <label> آخرین وضعیت پروژه </label>
                                 <select
                                class="form-control modalformkilo"
                                id="laststaus"
                              >
                                <option value="0">انتخاب  وضعیت</option>
                                <option value="1">در حال تجهیزکارگاه</option>
                                <option value="2">در حال اجرا/فعال</option>
                                <option value="3">در حال اجرا/متوقف</option>
                                <option value="4">در حال آماده سازی برای افتتاح</option>
                                <option value="5"> تکمیل و خاتمه یافته و بهره برداری شده </option>
                              </select>
                          </div>
                   </div>`
    $("#form-update").append(test)
}
function fillinput(num1, num2) {
    $("#moneypey").val(num1)
    $("#laststaus").val(num2)
}
//ali start kon az inja
function showimage() {
    var test =
        `<div class="form-row" >
                        <div class="form-group col-md-3">

                                <label class="file-input-modal-container">
                                  <div class="file-input-modal">
                                    <img id="firstshow" src="/dist/images/icons/add-image.svg" alt="your image"
                                      style="height: 20px; margin-top: 5px;" />
                                    <img id="image_upload_first" class="zoomimage" alt="your image"
                                      style=" display: none;" />
                                  </div>
                                  <input class="file-input " id="inputFile1" type="file"
                                    accept="image/*">
                                </label>
                          </div>
                         <div class="form-group col-md-3">

                                <label class="file-input-modal-container">
                                  <div class="file-input-modal">
                                    <img id="secondshow" src="/dist/images/icons/add-image.svg" alt="your image"
                                      style="height: 20px; margin-top: 5px;" />
                                    <img id="image_upload_second" name="" class="zoomimage" alt="your image"
                                     style=" display: none" />
                                  </div>
                                  <input class="file-input" type="file" id="inputFile2"
                                     accept="image/*">
                                </label>
                          </div>
                              <div class="form-group col-md-3">
                                <label class="file-input-modal-container">
                                  <div class="file-input-modal">
                                    <img id="thirdshow" src="/dist/images/icons/add-image.svg" alt="your image"
                                      style="height: 20px; margin-top: 5px;" />
                                    <img id="image_upload_third" name="" class="zoomimage" alt="your image"
                                      style=" display: none" />
                                  </div>
                                  <input class="file-input" type="file" id="inputFile3"
                                     accept="image/*">
                                </label>
                          </div>
                              <div class="form-group col-md-3">
                                <label class="file-input-modal-container">
                                  <div class="file-input-modal">
                                    <img id="fourthshow" src="/dist/images/icons/add-image.svg" alt="your image"
                                      style="height: 20px; margin-top: 5px;" />
                                    <img id="image_upload_fourth" name="" class="zoomimage" alt="your image"
                                      style=" display: none" />
                                  </div>
                                  <input class="file-input" type="file" id="inputFile4"
                                     accept="image/*">
                                </label>
                          </div>
                           <div class="form-group col-md-3">
                                <label class="file-input-modal-container">
                                  <div class="file-input-modal">
                                    <img id="fifthshow" src="/dist/images/icons/add-image.svg" alt="your image"
                                      style="height: 20px; margin-top: 5px;" />
                                    <img id="image_upload_fifth" name="" class="zoomimage" alt="your image"
                                      style=" display: none" />
                                  </div>
                                  <input class="file-input" type="file" id="inputFile5"
                                     accept="image/*">
                                </label>
                          </div>
                           <div class="form-group col-md-3">
                                <label class="file-input-modal-container">
                                  <div class="file-input-modal">
                                    <img id="sixshow" src="/dist/images/icons/add-image.svg" alt="your image"
                                      style="height: 20px; margin-top: 5px;" />
                                    <img id="image_upload_six" name="" class="zoomimage" alt="your image"
                                      style=" display: none" />
                                  </div>
                                  <input class="file-input" type="file" id="inputFile6"
                                     accept="image/*">
                                </label>
                          </div>
                           <div class="form-group col-md-3">
                                <label class="file-input-modal-container">
                                  <div class="file-input-modal">
                                    <img id="sevenshow" src="/dist/images/icons/add-image.svg" alt="your image"
                                      style="height: 20px; margin-top: 5px;" />
                                    <img id="image_upload_seven" name="" class="zoomimage" alt="your image"
                                      style=" display: none" />
                                  </div>
                                  <input class="file-input" type="file" id="inputFile7"
                                     accept="image/*">
                                </label>
                          </div>
                           <div class="form-group col-md-3">
                                <label class="file-input-modal-container">
                                  <div class="file-input-modal">
                                    <img id="eightshow" src="/dist/images/icons/add-image.svg" alt="your image"
                                      style="height: 20px; margin-top: 5px;" />
                                    <img id="image_upload_eight" name="" class="zoomimage" alt="your image"
                                      style=" display: none" />
                                  </div>
                                  <input class="file-input" type="file" id="inputFile8"
                                     accept="image/*">
                                </label>
                          </div>
                   </div>`
    $("#form-update").append(test)
    $("#inputFile1").change(function () {
        // console.log("1")
        $("#firstshow").css("display", "none");
        readURL1(this);
    });
    $("#inputFile2").change(function () {
        // console.log("2")

        $("#secondshow").css("display", "none");
        readURL2(this);
    });
    $("#inputFile3").change(function () {
        // console.log("3")

        $("#thirdshow").css("display", "none");
        readURL3(this);
    });
    $("#inputFile4").change(function () {
        // console.log("4")

        $("#fourthshow").css("display", "none");
        readURL4(this);
    });
    $("#inputFile5").change(function () {
        // console.log("4")

        $("#fifthshow").css("display", "none");
        readURL5(this);
    });
    $("#inputFile6").change(function () {
        // console.log("4")

        $("#sixshow").css("display", "none");
        readURL6(this);
    });
    $("#inputFile7").change(function () {
        // console.log("4")

        $("#sevenshow").css("display", "none");
        readURL7(this);
    });
    $("#inputFile8").change(function () {
        // console.log("4")

        $("#eightshow").css("display", "none");
        readURL8(this);
    });
}
function readURL1(input) {
    // console.log("1")
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $("#image_upload_first").css("display", "block");
            $("#image_upload_first").attr("src", e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}
function readURL2(input) {
    // console.log("2")
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $("#image_upload_second").css("display", "block");
            $("#image_upload_second").attr("src", e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}
function readURL3(input) {
    // console.log("3")
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $("#image_upload_third").css("display", "block");
            $("#image_upload_third").attr("src", e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}
function readURL4(input) {
    // console.log("4")
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $("#image_upload_fourth").css("display", "block");
            $("#image_upload_fourth").attr("src", e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}
function readURL5(input) {
    // console.log("4")
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $("#image_upload_fifth").css("display", "block");
            $("#image_upload_fifth").attr("src", e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}
function readURL6(input) {
    // console.log("4")
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $("#image_upload_six").css("display", "block");
            $("#image_upload_six").attr("src", e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}
function readURL7(input) {
    // console.log("4")
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $("#image_upload_seven").css("display", "block");
            $("#image_upload_seven").attr("src", e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}
function readURL8(input) {
    // console.log("4")
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $("#image_upload_eight").css("display", "block");
            $("#image_upload_eight").attr("src", e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}
// ali inja tamame
$("#reverse").on('click', function () {
    $("#updatemodal").modal('hide')
})

$("#submitlatlng").on('click', function () {
    var obj = {}
    var rookesh1 = ""
    var rookesh2 = ""
    var mase1 = ""
    var mase2 = ""
    var trace1 = ""
    var trace2 = ""
    var micro1 = ""
    var micro2 = ""
    var chip1 = ""
    var chip2 = ""
    var slary1 = ""
    var slary2 = ""
    var eskerab1 = ""
    var eskerab2 = ""
    var fog1 = ""
    var fog2 = ""
    var kat1 = ""
    var kat2 = ""
    var kipseil1 = ""
    var kipseil2 = ""
    var redmix1 = ""
    var redmix2 = ""
    var lake1 = ""
    var lake2 = ""
    var lake3 = ""
    var darzgiri = ""
    if ($("#rookesh").length != 0) {
        rookesh1 = $("#rookesh1").val()
        rookesh2 = $("#rookesh2").val()
        obj[1] = [rookesh1, rookesh2]
    }
    if ($("#mase").length != 0) {
        mase1 = $("#mase1").val()
        mase2 = $("#mase2").val()
        obj[2] = [mase1, mase2]
    }
    if ($("#trace").length != 0) {
        trace1 = $("#trace1").val()
        trace2 = $("#trace2").val()
        obj[3] = [trace1, trace2]
    }
    if ($("#micro").length != 0) {
        micro1 = $("#micro1").val()
        micro2 = $("#micro2").val()
        obj[4] = [micro1, micro2]
    }
    if ($("#chip").length != 0) {
        chip1 = $("#chip1").val()
        chip2 = $("#chip2").val()
        obj[5] = [chip1, chip2]
    }
    if ($("#slary").length != 0) {
        slary1 = $("#slary1").val()
        slary2 = $("#slary2").val()
        obj[6] = [slary1, slary2]
    }
    if ($("#eskerab").length != 0) {
        eskerab1 = $("#eskerab1").val()
        eskerab2 = $("#eskerab2").val()
        obj[7] = [eskerab1, eskerab2]
    }
    if ($("#fog").length != 0) {
        fog1 = $("#fog1").val()
        fog2 = $("#fog2").val()
        obj[8] = [fog1, fog2]
    }
    if ($("#kat").length != 0) {
        kat1 = $("#kat1").val()
        kat2 = $("#kat2").val()
        obj[9] = [kat1, kat2]
    }
    if ($("#kipseil").length != 0) {
        kipseil1 = $("#kipseil1").val()
        kipseil2 = $("#kipseil2").val()
        obj[10] = [kipseil1, kipseil2]
    }
    if ($("#redmix").length != 0) {
        redmix1 = $("#redmix1").val()
        redmix2 = $("#redmix2").val()
        obj[11] = [redmix1, redmix2]
    }
    if ($("#lake").length != 0) {
        lake1 = $("#lake1").val()
        lake2 = $("#lake2").val()
        lake3 = $("#lake3").val()
        obj[12] = [lake1, lake2, lake3]
    }
    if ($("#darzgiri").length != 0) {
        darzgiri1 = $("#darzgiri1").val()
        obj[13] = [darzgiri1]
    }
    var contractor_credit = $("#moneypey").val()
    var project_status = $("#laststaus").val()
    var physical_progress = $(".allex2").val()
    let formData = new FormData();
    let project_distance = JSON.stringify(obj);
    formData.append("project-distance-update", project_distance);
    formData.append("contractor-credit", contractor_credit);
    formData.append("project-status", project_status);
    formData.append("physical-progress", physical_progress);
    // for (var value of formData.values()) {
    //     console.log(value);
    // }

    Swal.fire({
        icon: "warning",
        title: "آیا برای بروزرسانی  مطمئن هستید؟",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "بله، تایید می‌شود",
        cancelButtonText: "منصرف شدم!",
        showLoaderOnConfirm: true,
        preConfirm: () => {
            $.ajax({
                url: "https://rms.rmto.ir/rahdari/road-upgrade-safety/" + idkol + "/edit-distance-update",
                type: "POST",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (result) {
                    Swal.fire({
                        icon: 'success',
                        title: 'با موفقیت بروزرسانی شد',
                        confirmButtonText: 'بستن',
                        preConfirm: () => {
                            location.reload()
                        }

                    })

                },
                error: function (error) {
                    console.log(error);
                    Swal.fire({
                        icon: "error",
                        title: "خطا",
                        confirmButtonText: "بستن",
                    });
                },
            });
        },
    });

})

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[0]},${dest[1]}?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(start, end) {

    drawStartToEndPath(
        'axis',
        [
            start[0],
            start[1]
        ],
        [
            end[0],
            end[1]
        ]
    );

}