// $(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');


})

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



$("#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() {
    $(".pace-done").toggleClass("sidebar-move");
    $("#panel-samping").toggleClass("move");
    $(".mymodal").toggleClass("input_perbaikan");
    $("#button_unhide_panel").toggleClass("move-btn");

    $("#perbaikan-dashboard").toggleClass("perbaikan-dashboard");

    // var content_perbaikan = `
    //                         <div id="panel-samping-child" class="sidebar-2" style="background: #1B1F2D;position: absolute;z-index: 9;width: 23%;height:100vh;left: -30%;transition: all 0.5s ease;">
    //                             <div style="margin-left: 50px;background: #1B1F2D;">
    //                                 <div class="header" style="margin-top: 25px;background: #2F3445;">
    //                                     <h6 class="panel-title" style="color: #ffff;margin-left: 20px;font-size: 12pt;">Laporan Perbaikan<a class="heading-elements-toggle"><i class="icon-more"></i></a></h6>
    //                                 </div>
    //                                 <div class="bod" style="margin-top: 10px;margin-left:6px;">
    //                                     <div style="color: white;">
    //                                         <span>Filter:</span>
    //                                     </div>

    //                                     <div class="form-group" style="margin-top: 15px;width: 250px;">
    //                                         <select name="select" id="sel-kec" class="form-control input-sm" style="background-color: #393E54;border-radius: 8px;border-color: #393E54;color: white;">
    //                                         <option value="opt1">Pilih Kecamatan</option>
    //                                         <option value="opt1">Pilih Kecamatan</option>
    //                                         <option value="opt1">Pilih Kecamatan</option>
    //                                         {% for nama_kecamatan in kec_res %}
    //                                         {% endfor %}

    //                                     </select>
    //                                     </div>

    //                                     <div class="form-group" style="margin-top: 15px;width: 250px;">
    //                                         <select name="select" id="sel-desa" class="form-control input-sm" style="background-color: #393E54;border-radius: 8px;border-color: #393E54;color: white;">
    //                                         <option value="opt1">Pilih Desa</option>
    //                                     </select>
    //                                     </div>
    //                                 </div>
    //                             </div>
    //                         </div>
    //                         <div class="panel panel-flat" id="perbaikan-dashboard" style="background: #181B27;position: absolute;z-index: 9;width: 77%;height:100vh;left: 23%;transition: all 0.5s ease;color: white; border: none;">

    //                             <div class="panel-heading" style="background-color:#181B27;border-bottom: 0.5pt solid #313649;">
    //                                 <h6 class="panel-title">Table Data Perbaikan</h6>
    //                             </div>

    //                             <div class="panel-body">
    //                                 <table class="table table-responsive datatable-show-all table-sm" id="userList" style="word-wrap:break-word;">
    //                                     <thead>
    //                                         <tr>
    //                                             <th>No.</th>
    //                                             <th>Sarana Perbaiakn</th>
    //                                             <th>Nama</th>
    //                                             <th>Type</th>
    //                                             <th>Tanggal Mulai</th>
    //                                             <th>Tanggal Selesai</th>
    //                                             <th>Anggaran</th>
    //                                             <th>Keterangan</th>
    //                                         </tr>
    //                                     </thead>
    //                                     <tbody id="loop-perbaikan">

    //                                         {% for all in res_all %}
    //                                         <tr>
    //                                             <td>{{forloop.counter}}</td>
    //                                             <td>{{all.name_perbaikan}}</td>
    //                                             <td>{{all.name}}</td>
    //                                             <td>{{all.type}}</td>
    //                                             <td>{{all.tgl_perbaikan}}</td>
    //                                             <td>{{all.tgl_selesai}}</td>
    //                                             <td>{{all.anggaran}}</td>
    //                                             <td class="text-center">
    //                                                 <a class="mdlFire" onclick="loadjlbyid('{{all.id_object}}')" data-toggle="modal" data-target="#modal_detail">Detail</a>
    //                                             </td>
    //                                         </tr>

    //                                         {% endfor %}
    //                                     </tbody>
    //                                 </table>
    //                             </div>
    //                         </div>`;

    // $("#panel-samping").html(content_perbaikan)
})


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);
});