// 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 idAsli
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 getLastURLPart(url) {
    var part = url.match(/.*\/(.+)/);
    if (!part) {
        return null;
    }
    return part[1];
}
(() => {
    const heightHeader = $('.header').height()

    document.getElementById('map').style.setProperty('height', `calc(100vh - ${heightHeader}px)`)
})()
$(document).ready(function () {
    var url = window.location.href;
    idAsli = getLastURLPart(url)
    let formData = new FormData();
    formData.append("id", idAsli);
    $.ajax({
        url: "/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) {
            showsubmit(result.data)
        },
    });
});
function showsubmit(data) {
    console.log(data)
    filesimage = data.files
    map = L.map("map", {
        maxBounds: bounds,
        minZoom: 6,
    }).setView([data.start_latlng[0], data.start_latlng[1]], 9);

    L.tileLayer("https://rmsmap.rmto.ir/141map/{z}/{x}/{y}.png", {}).addTo(map);
    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.flyToBounds([[data.start_latlng[0], data.start_latlng[1]], [data.end_latlng[0], data.end_latlng[1]]])
    drawPath(data.start_latlng, data.end_latlng)
    $("#pin-marker-start").removeClass("pin-move").addClass("pin-set");
    $("#pin-marker-end").removeClass("pin-move").addClass("pin-set");

}

function drawPath(start, end) {
    if (routeControls.length) {
        $(routeControls).each(function (index, control) {
            map.removeControl(control);
            routeControls.splice(routeControls.indexOf(index), 1);
        });
    }
    // $.get(`https://rmsmap.rmto.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(data) {
    var data =
        '\
    <div class="popup">\
      <div class="popupTitle">\
        <img src="../../dist/images/icons/tollHouse.svg" alt="">\
        <span class="popupHeader"> ثبت محور دارای انسداد (' +
        data.province_fa +
        ') </span>\
      </div>\
      <div class="popupHeaderContent"><div class="popUpBanner">اداره کل ' +
        data.province_fa +
        "، شهرستان: " +
        data.city_1_fa +
        '</div>\
      <div class="popupContent row col-12">\
        <div class="col-6" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> نام محور </span><div class="popUpBoxContent">' +
        data.axis_name +
        '</div></div>\
        <div class="col-6" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> نوع محور </span><div class="popUpBoxContent">' +
        data.axis_type_fa +
        '</div></div>\
        <div class="col-12" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> علت انسداد </span><div class="popUpBoxContent">' +
        data.blockage_cause_fa +
        '</div></div>\
        <div class=" col-6" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints">  پیش بینی تاریخ بازگشایی </span><div class="popUpBoxContent">' +
        data.prediction_time_fa +
        '</div></div>\
        <div class=" col-6" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints">  طول راه آسیب دیده </span><div class="popUpBoxContent">' +
        data.blockage_length +
        '</div></div>\
        <div class=" col-6" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> برآورد اولیه خسارت  </span><div class="popUpBoxContent">' +
        data.blockage_damage_money +
        '</div></div>\
        <div class=" col-6" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تعداد پل های اسیب دیده (دهانه بزرگتر از 6 متر )  </span><div class="popUpBoxContent">' +
        data.blockage_damage_higher_6_count +
        '</div></div>\
        <div class="col-4" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تعداد پل های اسیب دیده (دهانه کوچکتر از 6 متر ) </span><div class="popUpBoxContent">' +
        data.blockage_damage_lower_6_count +
        '</div></div>\
        <div class="col-4" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> سایر ابنیه فنی آسیب دیده </span><div class="popUpBoxContent">' +
        data.blockage_damage_count +
        '</div></div>\
        <div class="col-4" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تعداد ماشین آلات فعال در محور </span><div class="popUpBoxContent">' +
        data.active_cars_count +
        '</div></div>\
        <div class=" col-6" style="border-left:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تعداد عوامل راهدار فعال در محور </span><div class="popUpBoxContent">' +
        data.active_rahdar_count +
        '</div></div>\
        <div class=" col-6" style="text-align:center;"><span class="header-popupcontent-allpoints"> توضیحات</span><div class="popUpBoxContent">' +
        data.block_axis_desc +
        '</div></div>\
      </div>\
    </div>'
    return data
}

function getPopupContentAccidentend(data) {
    var data =
        '\
    <div class="popup">\
      <div class="popupTitle">\
        <img src="../../dist/images/icons/tollHouse.svg" alt="">\
        <span class="popupHeader"> ثبت محور دارای انسداد (' +
        data.province_fa +
        ') </span>\
      </div>\
      <div class="popupHeaderContent"><div class="popUpBanner">اداره کل ' +
        data.province_fa +
        "، شهرستان: " +
        data.city_1_fa +
        '</div>\
      <div class="popupContent row col-12">\
        <div class="col-6" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> نام محور </span><div class="popUpBoxContent">' +
        data.axis_name +
        '</div></div>\
        <div class="col-6" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> نوع محور </span><div class="popUpBoxContent">' +
        data.axis_type_fa +
        '</div></div>\
        <div class="col-12" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> علت انسداد </span><div class="popUpBoxContent">' +
        data.blockage_cause_fa +
        '</div></div>\
        <div class=" col-6" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints">  پیش بینی تاریخ بازگشایی </span><div class="popUpBoxContent">' +
        data.prediction_time_fa +
        '</div></div>\
        <div class=" col-6" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints">  طول راه آسیب دیده </span><div class="popUpBoxContent">' +
        data.blockage_length +
        '</div></div>\
        <div class=" col-6" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> برآورد اولیه خسارت  </span><div class="popUpBoxContent">' +
        data.blockage_damage_money +
        '</div></div>\
        <div class=" col-6" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تعداد پل های اسیب دیده (دهانه بزرگتر از 6 متر )  </span><div class="popUpBoxContent">' +
        data.blockage_damage_higher_6_count +
        '</div></div>\
        <div class="col-4" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تعداد پل های اسیب دیده (دهانه کوچکتر از 6 متر ) </span><div class="popUpBoxContent">' +
        data.blockage_damage_lower_6_count +
        '</div></div>\
        <div class="col-4" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> سایر ابنیه فنی آسیب دیده </span><div class="popUpBoxContent">' +
        data.blockage_damage_count +
        '</div></div>\
        <div class="col-4" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تعداد ماشین آلات فعال در محور </span><div class="popUpBoxContent">' +
        data.active_cars_count +
        '</div></div>\
        <div class=" col-6" style="border-left:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تعداد عوامل راهدار فعال در محور </span><div class="popUpBoxContent">' +
        data.active_rahdar_count +
        '</div></div>\
        <div class=" col-6" style="text-align:center;"><span class="header-popupcontent-allpoints"> توضیحات</span><div class="popUpBoxContent">' +
        data.block_axis_desc +
        '</div></div>\
      </div>\
    </div>'
    return data
}