var markerList = [];
var markerLayers = null;

var marker141List = [];
var marker141Layers = null;

var keepChartNum = null;

const API_ENDPOINT = 'https://141.ir/api';
const MAP_ENDPOINT = 'https://testmap.141.ir';
const MAP_MIN_ZOOM = 6;

// IRAN bounds, by this order:
// [North, East]
// [South, West]
var bounds = [
    [42.9130026312, 75.6166317076],
    [20.5782370061, 30.5092252948]
];

// Create leaflet map client
var map = L.map('map', {
    maxBounds: bounds,
    minZoom: MAP_MIN_ZOOM,
    maxZoom: 10,
    zoomControl: false
}).setView([32.62, 53.25], 6);

// Create map tile layer
L.tileLayer(MAP_ENDPOINT + '/141map/{z}/{x}/{y}.png', {}).addTo(map);

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

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

showAccPoints();

// $.get('/accident-251-points', function (result) {
//     let roadAccidentPoints = result.data;
//     // console.log(roadAccidentPoints[0])
//     // marker141Layers = L.markerClusterGroup();
//     //console.log(roadAccidentPoints)
//     for (let i = 0; i < roadAccidentPoints.length; i++) {
//         try {
//             let setIcon = null;

//         if (roadAccidentPoints[i].progress == '100') {
//           setIcon = '#28a745';  
//         } else {
//           setIcon = '#dc3545';
//         }

//             let marker = L.circleMarker(
//                 [roadAccidentPoints[i].lat, roadAccidentPoints[i].lng],
//                 {
//                     color: setIcon,
//                     radius: 3,
//                     stroke: false,
//                     fillOpacity: 1,
//                     title: roadAccidentPoints[i]
//                 }
//             ).on('click', function (e) {
//                 let valueprogress = "";
//                 let datatext = this.options.title;
//                 $("#pointedit").modal('show')
//                 $("#opration").val(datatext.operation);//oparation
//                 $("#target").val(datatext.target);//target
//                 $("#action").val(datatext.actions);//action
//                 valueprogress = datatext.progress;

//                 var test = "<div class=\"project-slider status-slider-body pr-2 pl-2 mb-5 mt-1\">\
//           <input class=\"ex2\" type=\"text\" data-slider-step=\"1\"  data-slider-value=\""+ valueprogress + "\"/>\</div> "

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

//                 $('.ex2').slider({
//                     min: 0,
//                     max: 100,
//                     formatter: function (value) {
//                         return (value + '٪');
//                     },
//                     tooltip: 'always',
//                     tooltip_position: 'bottom'
//                 });

//                 $("#cost").val(datatext.cost);//cost
//                 $("#end-date").val(datatext.end_date);//end-date
//             });
//             // marker141List.push();
//             map.addLayer(marker)
//         }
//         catch (e) {

//         }
//     }
//     // marker141Layers.addLayers(marker141List);
//     // map.addLayer(marker141Layers);
//     // hideLoaderScreen();
// });





// Project icons
var blueIcon = L.divIcon({
    className: 'custom-div-icon',
    html: "<span class='beacon beacon-blue'></span>",
    iconSize: [30, 42],
    // iconAnchor: [15, 42]
});
var greenIcon = L.divIcon({
    className: 'custom-div-icon',
    html: "<span class='beacon beacon-green'></span>",
    iconSize: [30, 42],
    // iconAnchor: [15, 42]
});
var yellowIcon = L.divIcon({
    className: 'custom-div-icon',
    html: "<span class='beacon beacon-yellow'></span>",
    iconSize: [30, 42],
    // iconAnchor: [15, 42]
});
var redIcon = L.divIcon({
    className: 'custom-div-icon',
    html: "<span class='beacon beacon-red'></span>",
    iconSize: [30, 42],
    // iconAnchor: [15, 42]
});



//251 points 





// ------------- Ali End ------------------------

$("#editpoints").on('click', function () {
    saveEditedPoint();
});


function showAccPoints() {
    remove141Layer();
    showLoaderScreen();

    $.get('/accident-251-points', function (result) {
        let roadAccidentPoints = result.data;
        // console.log(roadAccidentPoints[0])
        // marker141Layers = L.markerClusterGroup();
        //console.log(roadAccidentPoints)
        let markerG = [];

        for (let i = 0; i < roadAccidentPoints.length; i++) {
            try {
                let setIcon = null;
    
            if (roadAccidentPoints[i].progress == '100') {
              setIcon = '#28a745';  
            } else {
              setIcon = '#dc3545';
            }
    
                let marker = L.circleMarker(
                    [roadAccidentPoints[i].lat, roadAccidentPoints[i].lng],
                    {
                        color: setIcon,
                        radius: 3,
                        stroke: false,
                        fillOpacity: 1,
                        title: roadAccidentPoints[i]
                    }
                ).on('click', function (e) {
                    let valueprogress = "";
                    let datatext = this.options.title;
                    $("#pointedit").modal('show')
                    $("#pointid").val(datatext.id);
                    $("#opration").val(datatext.operation);//oparation
                    $("#target").val(datatext.target);//target
                    $("#action").val(datatext.actions);//action
                    valueprogress = datatext.progress;
    
                    var test = "<div class=\"project-slider status-slider-body pr-2 pl-2 mb-5 mt-1\">\
              <input class=\"ex2\" type=\"text\" data-slider-step=\"1\"  data-slider-value=\""+ valueprogress + "\"/>\</div> "
    
              $("#sliderphysici").empty();
              
              $("#sliderphysici").append('<label for="inputAddress2"> پیشرفت فیزیکی</label>')
                    $("#sliderphysici").append(test)
    
                    $('.ex2').slider({
                        min: 0,
                        max: 100,
                        formatter: function (value) {
                            return (value + '٪');
                        },
                        tooltip: 'always',
                        tooltip_position: 'bottom'
                    });
    
                    $("#cost").val(datatext.cost);//cost
                    $("#end-date").val(datatext.end_date);//end-date
                });
                // marker141List.push();
                markerG.push(marker);
                //map.addLayer(marker)
            }
            catch (e) {
    
            }
        }
        marker141Layers = L.layerGroup(markerG);
    // marker141Layers.addLayers(marker141List);
    map.addLayer(marker141Layers);
    hideLoaderScreen();
    });
}

function saveEditedPoint() {
    $("#pointedit").modal('hide');
    showLoaderScreen();

    //console.log($('.ex2').slider('getValue'))

    formData = new FormData();

    formData.append('operation', $("#opration").val());
    formData.append('target', $("#target").val());
    formData.append('actions', $("#action").val());
    formData.append('progress', $('.ex2').slider('getValue'));
    formData.append('cost', $("#cost").val());
    formData.append('end_date', $("#end-date").val());
    // TODO: send files
    //console.log($('input[name=modalUpFile]'));
    for (let i = 0; i < $('input[name=modalUpFile]')[0].files.length; i++) {
    formData.append('point_files_' + i, $('input[name=modalUpFile]')[0].files[i]);
    }

    $.ajax({
        url: '/accident-251-points/' + $("#pointid").val(),
        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);
          showAccPoints();
        },
        error: function (error) {
          console.log(error);
          hideLoaderScreen();
        }
      });
}

function remove141Layer() {
    if (marker141Layers != null) {
      marker141List = [];
      map.removeLayer(marker141Layers);
  
      //$('.left-menu-141 > .item-menu-141.item-141-active').removeClass('item-141-active');
    }
  }