// $(window).on("load", function() {
//     loaderPage(true);
// });

$(document).ready(function() {
    // loaderPage(true);
    const $valueSpan = $('.valueSpan');
    const $value_address = $('#slider-address');
    const $value_point = $('#slider-point');
    $valueSpan.html($value_address.val());
    $value_address.on('input change', () => {
        $valueSpan.html($value_address.val());
    });

    $valueSpan.html($value_point.val());
    $value_point.on('input change', () => {
        $valueSpan.html($value_point.val());
    });

});

var lat, lng, latlng;
var container = $(".leaflet-control-layers")[0];
var markerClusters = new L.MarkerClusterGroup({
    spiderfyOnMaxZoom: true,
    showCoverageOnHover: false,
    zoomToBoundsOnClick: true,
    disableClusteringAtZoom: 16
});
var marker = {};

$(window).resize(function() {
    sizeLayerControl();
});


if (!("ontouchstart" in window)) {
    $(document).on("mouseover", ".feature-row", function(e) {
        highlight.clearLayers().addLayer(L.circleMarker([$(this).attr("lat"), $(this).attr("lng")], highlightStyle));
    });
}

$(document).on("mouseout", ".feature-row", clearHighlight);

$("#about-btn").click(function() {
    $("#aboutModal").modal("show");
    $(".navbar-collapse.in").collapse("hide");
    return false;
});

$("#login-btn").click(function() {
    $("#loginModal").modal("show");
    $(".navbar-collapse.in").collapse("hide");
    return false;
});

$("#sid").click(function() {
    $("#sid").css('display', 'none');
    $("#sidebar").css('display', 'block');
    $("#offsid").css('display', 'block');

});

$("#offsid").click(function() {
    $("#offsid").css('display', 'none');
    $("#sidebar").css('display', 'none');
    $("#sid").css('display', 'block');
});

$("#button_hide").click(function() {
    $("#thisFooter").css('display', 'none');
    $("#button_unhide").css('display', 'block');

})

$("#button_unhide").click(function() {
    $("#thisFooter").css('display', 'block');
    $("#button_unhide").css('display', 'none');
})

$("#button_hide_panel").click(function() {
    $("#panel-samping").toggleClass("move");

    // $("#panel-samping").css('display', 'none');
    $("#button_unhide_panel").css('display', 'block');
    $("#button_hide_panel").css('display', 'none');
    // $("#thisFooter").css('left', '0px');
    // $('#legenda').css('left', '0px');


})

var cek_layer_keterangan = 1
var cek_layer_perbaikan = 0


$("#button_keterangan").click(function() {
    if (cek_layer_keterangan == 0){
        // $("#button_keterangan").removeClass("asctive");
        // $("#button_keterangan").removeAttr("class");
        $(".pace-done").toggleClass("sidebar-move")

        $("#panel-samping").toggleClass("move");
        $(".mymodal").toggleClass("input_perbaikan")
        $("#button_unhide_panel").toggleClass("move-btn");
        $("#keterangan_button").css("background", "#353847")
        $("#perbaikan_manage").css("background", "#1E2233")

        $("#panel-sm").addClass("active");
        cek_layer_keterangan = 1
        cek_layer_perbaikan = 0
        
    }else{
        $("#button_keterangan").addClass("asctive");
        $("#keterangan_button").css("background", "#1E2233")
        $("#manage_perbaikan").removeClass("active");
        $("#panel-sm").removeClass("active");
        $("#panel-sm2").removeClass("active");
        $("#panel-sm").css('display', 'none');
        cek_layer_keterangan = 0
        cek_layer_perbaikan = 0
    }
})

$("#button_keterangan").addClass("active");



$("#button_unhide_panel").click(function() {
    $(".pace-done").toggleClass("sidebar-move")
    $("#panel-samping").toggleClass("move");
    $(".mymodal").toggleClass("input_perbaikan")
    $(this).toggleClass("move-btn");
})


$("#manage_perbaikan").click(function() {
    console.log('a')
    if(cek_layer_perbaikan == 0){
        console.log('b')
        cek_layer_perbaikan = 1
        cek_layer_keterangan = 0
        $(".pace-done").toggleClass("sidebar-move");
        $("#panel-samping").toggleClass("move");
        $(".mymodal").toggleClass("input_perbaikan");
        $("#button_unhide_panel").toggleClass("move-btn");
        $("#panel-sm2").addClass("active");
        $("#perbaikan_manage").css("background", "#353847")
        $("#keterangan_button").css("background", "#1E2233")
    
        $("#perbaikan-dashboard").toggleClass("perbaikan-dashboard");
    }else{
        console.log('c')
        cek_layer_perbaikan = 0
        cek_layer_keterangan = 0
        $("#perbaikan_manage").css("background", "#1E2233")

        $("#manage_perbaikan").addClass("active");
        $("#panel-sm").removeClass("active");
        $("#panel-sm2").removeClass("active");
        $("#panel-sm").css('display', 'none');
    }
})


function sizeLayerControl() {
    $(".leaflet-control-layers").css("max-height", $("#map").height() - 50);
}

function clearHighlight() {
    highlight.clearLayers();
}

var highlight = L.geoJson(null);
var highlightStyle = {
    stroke: false,
    fillColor: "#00FFFF",
    fillOpacity: 0.7,
    radius: 10
};

map.on("click", function(e) {
    highlight.clearLayers();
});

function updateAttribution(e) {
    $.each(map._layers, function(index, layer) {
        if (layer.getAttribution) {
            $("#attribution").html((layer.getAttribution()));
        }
    });
}
map.on("layeradd", updateAttribution);
map.on("layerremove", updateAttribution);

var attributionControl = L.control({
    position: "topleft"
});

attributionControl.onAdd = function(map) {
    var div = L.DomUtil.create("div", "leaflet-control-attribution");
    return div;
};
map.addControl(attributionControl);

var zoomControl = L.control.zoom({
    position: "bottomright"
}).addTo(map);

var locateControl = L.control.locate({
    position: "bottomright",
    drawCircle: false,
    follow: true,
    setView: true,
    keepCurrentZoomLevel: false,
    markerStyle: {
        weight: 1,
        opacity: 0.8,
        fillOpacity: 0.8
    },
    circleStyle: {
        weight: 1,
        clickable: false
    },
    icon: "fa fa-map-marker",
    metric: false,
    strings: {
        title: "My location",
    },
    locateOptions: {}
}).addTo(map);

if (document.body.clientWidth <= 767) {
    var isCollapsed = true;
} else {
    var isCollapsed = false;
}

$("#featureModal").on("hidden.bs.modal", function(e) {
    $(document).on("mouseout", ".feature-row", clearHighlight);
});