var dar = null;
$('#search_spes li a').on('click', function() {
    $('#input_search').val(null)
    tes = $(this).text();
    dar = tes
    if (dar == ' Point') {
        $("#pilihcari").html('<i class="icon-location4 text-muted text-size-base" style="color: #5A9AFB;"></i>')
    } else if (dar == ' Bangunan') {
        $("#pilihcari").html('<i class="icon-home4 text-muted text-size-base" style="color: #5A9AFB;"></i>')
    } else if (dar == ' Jalan') {
        $("#pilihcari").html('<i class="icon-git-branch text-muted text-size-base" style="color: #5A9AFB;"></i>')
    } else if (dar == ' Reset') {
        $("#pilihcari").html('')
    }
});

var res_in = null;
var res_id = null;
$('#input_search').on('input', function() {

    var inp = $('#input_search').val()
    console.log(inp)

    $.ajax({
        url: "api/search_spes",
        data: {
            "type": dar,
            'inp': inp
        },
        dataType: 'json',
        success: function(data) {

            var availableTags = []
            for (let i = 0; i < data.result.length; i++) {
                var tt = null;
                var mm = null;
                if (dar == ' Point') {
                    tt = data.result[i][1];
                    mm = [data.result[i][0], data.result[i][2], data.result[i][3], data.result[i][4]];
                } else {
                    tt = data.result[i][1];
                    mm = [data.result[i][0], data.result[i][2]];
                }

                var source = {
                    label: tt,
                    id: mm
                }
                availableTags.push(source)
            }


            $("#input_search").autocomplete({
                source: availableTags,
                select: function(event, ui) {
                    var e = ui.item;
                    res_in = e.label;
                    res_id = e.id;
                    $("#input_search").append(res_in);
                    // $("#input_search").val(result);
                    // $("#input_search_id").val(res_id);
                }
            });
        }
    });
});

$(document).on("click", "#btn_search_spes", function() {

    nama = null;
    idm = null;
    rem = null;
    geo = null;
    db = null;

    if (dar == ' Point') {
        nama = res_in;
        idm = res_id[0];
        rem = res_id[1];
        geo = res_id[2];
        db = res_id[3];
        $.ajax({
            url: "api/search_lanjut",
            data: {
                "type": dar,
                'idx': idm,
                'db': db
            },
            dataType: 'json',
            success: function(data) {
                var geocodeService = L.esri.Geocoding.geocodeService();
                var geocoderNominatim = new L.Control.Geocoder.Nominatim();
                var dapoin = [data[0][0]['geometry']['coordinates'][1], data[0][0]['geometry']['coordinates'][0]]
                //console.log(data[0])
                    // map.setView([data[0]['geometry']['coordinates'][0][0][0][1], data[0]['geometry']['coordinates'][0][0][0][0]], 19);
                    // var result_point = JSON.parse("" + data + "")
                    // //console.log(result_point)

                var geo_point = L.geoJson(null, {
                    pointToLayer: function(feature, latlng) {
                        // var smallIcon = new L.Icon({
                        //     iconSize: [25, 25],
                        //     iconAnchor: [13, 27],
                        //     popupAnchor: [1, -24],
                        //     iconUrl: 'static/img/icon/loc.svg',
                        //     shadowUrl: 'static/img/icon/shadow.svg',
                        //     shadowSize: [35, 35],
                        //     shadowAnchor: [22, 31]
                        // });
                        var marker = L.marker(latlng, {
                            // icon: smallIcon
                        });
                        conten = `
                                    <div id="bottom-justified-data" style="text-align: center;">
                                        <div >
                                            <img src="static/img/image/` + feature.administrasi.f8 + `" alt="Image" style="width: 150px!important;height: 125px;">
                                        </div>

                                        <div >
                                            <div style="font-family: Google Sans,Roboto,Arial,sans-serif;
                                            letter-spacing: 0">
                                                <p>
                                                    ` + feature.administrasi.f1 + `
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                `;
                        marker.bindTooltip(conten, {
                            permanent: true,
                            className: "my-label",
                            direction: 'top',
                            offset: [0, -25]
                        });
                        return marker
                    },
                    onEachFeature: function(feature, layer) {
                        layer.on({
                            click: function(e) {
                                $("#modal_detail_non_kelurahan").modal('show');
                                var tay;
                                // var geocodeService = L.esri.Geocoding.geocodeService();
                                // var geocoderNominatim = new L.Control.Geocoder.Nominatim();
                                var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) {
                                    tay = result.address.Address;
                                    // aladije(result.address.Address)
                                    if (feature.administrasi.f3 == 'alamat') {
                                        if (tay != '') {
                                            var alamak = tay;

                                        } else {
                                            alamak = ""
                                        }

                                    } else {
                                        var alamak = feature.administrasi.f3;

                                    }
                                    if (feature.administrasi.f10 == 'bpk') {
                                        var raja = "";
                                    } else {
                                        var raja = feature.administrasi.f10;
                                    }
                                    content_edit_point = `
                                        <div class="modal-dialog md">
                                            <div class="modal-content">
                                                <div class="modal-header bg-info" >
                                                        <button type="button" class="close" data-dismiss="modal" onclick="destroyfade()">&times;</button>
                                                        <h6 class="modal-title">Edit Point</h6>
                                                </div>
                                                    
                                                    <div class="tab-pane has-padding" id="panel-tab2">
                                                        <div class="tab-pane" id="bottom-justified-data">

                                                            <div class="tabbable">
                                                                <ul class="nav nav-tabs nav-tabs-bottom nav-justified">
                                                                    <li onclick="changetabs(this)" class="active"><a href="#right-tab2-feas-upli" data-toggle="tab">Koordinat</a></li>
                                                                    <li onclick="changetabs(this)"><a href="#left-tab1-feas-upli" data-toggle="tab">Informasi Umum</a></li>
                                                                    
                                                                </ul>

                                                                <div class="tab-content">

                                                                    <div class="tab-pane active" id="right-tab2-feas-upli">
                                                                        <div class="form-group">
                                                                            <div id="map-for-edit" style="width: 400px;height: 300px;position: relative;margin-left: 100px;"></div>
                                                                            <div class="form-group">
                                                                                <label class="col-lg-2 control-label" style="margin-top:10px">Image</label>
                                                                                <div class="col-lg-9" style="margin-top:10px">
                                                                                    <input type="file" id="file" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
                                                                                    <input style="display:none;" id="gambar" type="text" class="form-control" value="` + feature.administrasi.f8 + `"required>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div class="tab-pane" id="left-tab1-feas-upli">

                                                                        <div class="modal-body" style="overflow-x: hidden;max-height: 300px;overflow-y: scroll;padding-left: 15px;">

                                                                                    <div class="form-group">
                                                                                            <input style="display:none;" id="idpo" type="text" class="form-control" value="` + feature.administrasi.f15 + `"required>
                                                                                            <input style="display:none;" id="coordinateZoneeditpo" type="text" class="form-control" value=""required>
                                                                                    </div>

                                                                                <div class="row" style="margin-top: 15px;">
                                                                                    <div class="form-group">
                                                                                        <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Nama Point</label>
                                                                                        <div class="col-lg-9">
                                                                                            <input id="namobj" type="text" class="form-control" value="` + feature.administrasi.f1 + `"required>    
                                                                                        </div>
                                                                                        
                                                                                    </div>
                                                                                </div>

                                                                                <div class="row" style="margin-top: 15px;">
                                                                                    <div class="form-group">
                                                                                        <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Tipe Point</label>
                                                                                        <div class="col-lg-8">
                                                                                            <select id="remark" style="margin-top: 15px;">
                                                                                                <option>` + feature.administrasi.f2 + `</option>
                                                                                            </select>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                            
                                                                                <div class="row" style="margin-top: 15px;">
                                                                                    <div class="form-group">
                                                                                        <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Alamat</label>
                                                                                        <div class="col-lg-4">
                                                                                            <input id="alamat" type="text" class="form-control" value="` + alamak + `"required>
                                                                                        </div>
                                                                                        <div class="col-lg-4" style="margin-top: 15px;">` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `</div>
                                                                                    </div>
                                                                                </div>

                                                                                <div class="row" style="margin-top: 15px;">
                                                                                    <div class="form-group">
                                                                                        <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Luas Tanah</label>
                                                                                        <div class="col-lg-6">
                                                                                            <input id="luas_tanah" type="text" class="form-control" value="` + feature.administrasi.f5 + `"required>
                                                                                        </div>
                                                                                        <div class="col-lg-3">
                                                                                            <select id="satuan_luas_tanah" style="margin-top: 15px;">
                                                                                                <option>m2</option>
                                                                                                <option>Km2</option>
                                                                                                <option>Hektar</option>
                                                                                            </select>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                            
                                                                                <div class="row" style="margin-top: 15px;">
                                                                                    <div class="form-group">
                                                                                        <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Pemimpin</label>
                                                                                        <div class="col-lg-9">
                                                                                            <input id="perangkat" type="text" class="form-control" value="` + raja + `"required>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                        
                                                                        </div>
                                                                    </div>

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

                                                    <hr>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-info" id="saveeditspo">Save changes</button>
                                                    </div>
                                            </div>
                                        </div>`
                                    if (feature.administrasi.f8 == 'None') {
                                        var gmb = "static/img/image_null.png";
                                    } else {
                                        var gmb = "static/img/image/" + feature.administrasi.f8;
                                    }

                                    $(".gambar_keterangan").html(`<img src="` + gmb + `" alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;">`)

                                    $(".nama_keterangan").html(`<div>
                                                                        <span style="font-size: large;">
                                                                            ` + feature.administrasi.f1 + `
                                                                        </span>
                                                                    </div>
                                                                    <div>
                                                                        <span>
                                                                            ` +
                                        alamak + `, ` + feature.administrasi.f14 + `, ` + feature.administrasi.f13 + `, ` + feature.administrasi.f12 + `
                                                                        </span>
                                                                    </div>
                
                                                                    `)

                                    $(".isi_keterangan").html(`<input type="text" name="idjalan" id="idjalan" class="hidden" value="">
                                                                    <input type="text" name="coordinatejalan" id="coordinatejalan" class="hidden" value="">
                                                                    <div>
                                                                        <div>
                                                                            <span>Jenis Bangunan</span>
                                                                        </div>
                                                                        <div>
                                                                            <span>
                                                                                ` + feature.administrasi.f2 + `
                                                                            </span>
                                                                        </div>
                                                                    </div>
                                                                    <div>
                                                                        <div>
                                                                            <span>Luas</span>
                                                                        </div>
                                                                        <div>
                                                                            <span style="font-family: 'Roboto';">` + feature.administrasi.f5 + ` m</span>
                                                                        </div>
                                                                    </div>
                
                                                                    <div>
                                                                        <div>
                                                                            <span>Pimpinan</span>
                                                                        </div>
                                                                        <div>
                                                                            <span>` + raja + `</span>
                                                                        </div>
                                                                    </div>`);

                                    $(".btn_action").html(`<div class="tombol-edit-keterangan text-center" style="background-color: #5A9AFB;position: absolute;width: 40px;height: 40px;bottom: 2px;right: 5px;border: 1pt solid rosybrown;border-radius: 8px;">
                                                                        <a href="#" id="btn_edit_point" data-toggle="modal" data-target="#modal_adm" data-backdrop="static" data-keyboard="false" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;" title="Edit"><i class="icon-pencil5"></i></a>
                                                                        </div>
                                                                        `)
                                    $("#modal_adm").html(content_edit_point)
                                    panel_samp();
                                })
                                hidelegend();
                            }
                        })
                    }
                });

                function geo_json_point(data) {
                    geo_point.addData(data)
                }

                geo_json_point(data[0])

                geo_point.addTo(map);

                map.setView([data[0][0]['geometry']['coordinates'][1], data[0][0]['geometry']['coordinates'][0]], 19);

                $(document).on("click", "#btn_search_spes", function() {
                    geo_point.clearLayers()
                    geo_point.remove()
                });

                $('#search_spes li a').on('click', function() {
                    $('#input_search').val(null)
                    tes = $(this).text();
                    dar = tes
                    if (dar == ' Reset') {
                        geo_point.clearLayers();
                        geo_point.remove();
                    }
                });

                // $.ajax({
                //     url: "api/search_lanjut",
                //     data: {
                //         'type': dar,
                //         'idx': idm,
                //         'db': db
                //     },
                //     dataType: 'json',
                //     success: function(data) {
                //         //console.log(data)

                //         dapoin = [data[0][0]['geometry']['coordinates'][1], data[0][0]['geometry']['coordinates'][0]]
                //         // var poinin = L.marker(dapoin).addTo(map)
                //         geo_json_point(dapoin)
                //     }
                // });

                $(document).on("click", "#btn_edit_point", function() {
                    var map_edit = L.map('map-for-edit', {
                        editable: true,
                        zoomControl: false,
                        drawControl: true
                    }).setView([-2, 118], 5);

                    mapss = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
                        maxZoom: 22,
                        minZoom: 4,
                    }).addTo(map_edit);

                    var idspo = idm
                    var dbspo = db
                    loaderPage(false);
                    $.ajax({
                        url: "api/editspo",
                        data: {
                            'id_point': idspo,
                            'db_point': dbspo
                        },
                        dataType: 'json',
                        success: function(data) {
                            loaderPage(false);
                            setTimeout(function() {
                                map_edit.invalidateSize();
                            }, 1000);
                            // map_edit.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19);
                            map_edit.setView([data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]], 19);
                            let dapoin = [data['geometry']['coordinates'][1], data['geometry']['coordinates'][0]]
                            var poinin = L.marker(dapoin).addTo(map_edit)
                            poinin.enableEdit();
                            $('#saveeditspo').click(function() {
                                var hasil = (JSON.stringify(poinin.toGeoJSON()))
                                $("#coordinateZoneeditpo").val(hasil);
                            })
                        }
                    })
                });

                $(document).on("click", "#saveeditspo", function() {
                    var idspo = $('#idpo').val();
                    var poi = $('#coordinateZoneeditpo').val();
                    var dbsave = db
                    var data = new FormData();
                    data.append("file", $("input[id^='file']")[0].files[0]);
                    data.append("csrfmiddlewaretoken", "{{ csrf_token }}");
                    data.append('idspo', idspo)
                    data.append('namobj', $('#namobj').val())
                    data.append('remark', $('#remark').val())
                    data.append('luas', $('#luas_tanah').val())
                    data.append('alamat', $('#alamat').val())
                    data.append('perangkat', $('#perangkat').val())
                    data.append('point', poi),
                        data.append('gambar', $('#gambar').val()),
                        data.append('dbspo', dbsave)
                    //console.log(data)
                    $.ajax({
                        url: "api/saveeditspo",
                        data: data,
                        dataType: 'json',
                        type: 'POST',
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            let response = data
                            if (response.status == 0) {
                                swal({
                                    title: response.info,
                                    text: response.data,
                                    type: "success",
                                    icon: "success",
                                    confirmButtonColor: "#00BCD4"
                                }, function() {
                                    $("#modal_adm").modal('hide');
                                    $("#modal_detail_non_kelurahan").modal('hide')
                                        //location.reload();
                                })
                            } else {
                                swal({
                                    title: 'Error',
                                    text: 'Hubungi Developer',
                                    type: "warning",
                                    icon: "error",
                                    confirmButtonColor: "#00BCD4"
                                })
                            }
                            //location.reload()
                        }
                    })

                });

            }
        });

    } else if (dar == ' Bangunan') {
        nama = res_in;
        idm = res_id[0];
        geo = res_id[1];

        $.ajax({
            url: "api/search_lanjut",
            data: {
                "type": dar,
                'idx': idm
            },
            dataType: 'json',
            success: function(data) {
                var geocodeService = L.esri.Geocoding.geocodeService();
                var geocoderNominatim = new L.Control.Geocoder.Nominatim();
                // map.setView([data[0]['geometry']['coordinates'][0][0][0][1], data[0]['geometry']['coordinates'][0][0][0][0]], 19);

                var geo_bangunan = L.geoJson(null, {
                    style: function(feature) {
                        return {
                            color: "#ff0008",
                            weight: 1,
                            opacity: 2,
                            zIndex: 1000
                        };
                        geo_bangunan.clearLayers();
                        geo_bangunan.remove();
                    },

                    onEachFeature: function(feature, layer) {
                        // gasin()
                        if (feature.properties) {

                            var lattitud, longitud;
                            if (feature.geometry.type == 'MultiPolygon') {
                                lattitud = feature.geometry.coordinates[0][0][0][1];
                                longitud = feature.geometry.coordinates[0][0][0][0];

                            } else {
                                lattitud = feature.geometry.coordinates[0][0][1];
                                longitud = feature.geometry.coordinates[0][0][0];
                            };

                            layer.on({
                                click: function(e) {
                                    $("#modal_detail_non_kelurahan").modal('show');
                                    var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) {

                                        if (result.address.Address != '') {
                                            var alamat = result.address.Address + `, `
                                        } else {
                                            var alamat = ''
                                        };

                                        if (feature.administrasi.f9 == 'None') {
                                            var path_img = "static/img/image_null.jpg"
                                        } else {
                                            var path_img = `"static/image/bangunan/` + feature.administrasi.f9 + `"`
                                        }
                                        // var list_history = feature.properties.f4
                                        // for (var i = 0; i < list_history.length; i++) {
                                        //     var dt_history = list_history[i].split(",");
                                        //     //console.log(dt_history[0])
                                        //     //console.log(dt_history[1])
                                        //     //console.log(dt_history[2])
                                        // }
                                        // if (feature.administrasi.f11 != 'None'){
                                        //     var cbb = `<option value="null" disabled>-- Pilih Jenis Point --</option>
                                        //                     <option value="bangunan" `if(feature.administrasi.f11 != 'bangunan'){`selected`};` >Bangunan Biasa</option>
                                        //                     <option value="kantor_administrasi">Kantor Administrasi</option>
                                        //                     <option value="layanan_kesehatan">Layanan Kesehatan</option>
                                        //                     <option value="puskesmas">Puskesmas</option>
                                        //                     <option value="rumah_sakit">Rumah Sakit</option>
                                        //                     <option value="sarana_ibadah">Sarana Ibadah</option>
                                        //                     <option value="sarana_pendidikan">Sarana Pendidikan</option>
                                        //                     <option value="spbu">SPBU</option>
                                        //                     <option value="stasiun">Stasiun</option>
                                        //                     <option value="terminal_bus">Terminal Bus</option>
                                        //                     <option value="cagar_budaya">Cagar Budaya dan Tempat Wisata</option>
                                        //                     <option value="gardu_listrik">Gardu Listrik</option>`
                                        // }


                                        content_edit = `
                                        <div class="modal-dialog" style="width: max-content;height: max-content;">
                                            <div class="modal-content">
                                                <div class="modal-header bg-info" style="background-color:#40777c;">
                                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                    <h6 class="modal-title">Edit Polygon Bangunan dan Informasinya</h6>
                                                </div>
                                                <div class="modal-body" style="max-height: 450px;overflow-y: auto;">
                                                    <div class="row">
                                                        <div class="col-md-5">
                                                            <div id="map-edit" style="width:400px;height: 350px;">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <input type="text" class="hidden" name="coordinatebangunan" id="coordinatebangunan" value="` + feature.geometry + `">
                                                            <table>
                                                                <tr style="margin-top: 10px">
                                                                    <th>
                                                                        Image
                                                                    </th>
                                                                    <td>
                                                                        <input type="file" id="imgbangunan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
                                                                        <input style="display:none;" id="gambar" type="text" class="form-control" value="` + feature.administrasi.f9 + `"required>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <input type="text" name="idbangunan" id="idbangunan" class="form-control hidden" value="` + feature.properties.f1 + `" disable>
                                                                        <input style="display:none;" id="coordinateZoneeditbang" type="text" class="form-control" value=""required>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <th>Nama Bangunan</th>
                                                                    <td>
                                                                        <input type="text" name="namebangunan" id="namebangunan" class="form-control" value="` + feature.properties.f2 + `">
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <th>Jenis Bangunan</th>
                                                                    <td>
                                                                        <input type="text" class="hidden" name="tipe1" id="tipe111" value="` + feature.administrasi.f11 + `">
                                                                        <input type="text" class="hidden" name="tipe1" id="tipe222" value="` + feature.administrasi.f12 + `">
                                                                        <input type="text" class="hidden" name="tipe1" id="tipe333" value="` + feature.administrasi.f13 + `">
                                                                        <input type="text" class="hidden" name="tipe1" id="tipe444" value="` + feature.administrasi.f14 + `">
                                                                        <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;width: 220px;" id="tipe_point_b_e" data-placeholder="select point.." class="select-size-md">
                                                                            <option value="null" selected disabled>-- Pilih Jenis Point --</option>
                                                                            <option value="bangunan">Bangunan Biasa</option>
                                                                            <option value="kantor_administrasi">Kantor Administrasi</option>
                                                                            <option value="layanan_kesehatan">Layanan Kesehatan</option>
                                                                            <option value="puskesmas">Puskesmas</option>
                                                                            <option value="rumah_sakit">Rumah Sakit</option>
                                                                            <option value="sarana_ibadah">Sarana Ibadah</option>
                                                                            <option value="sarana_pendidikan">Sarana Pendidikan</option>
                                                                            <option value="stasiun">Stasiun</option>
                                                                            <option value="terminal_bus">Terminal Bus</option>
                                                                            <option value="cagar_budaya">Cagar Budaya dan Tempat Wisata</option>
                                                                            <option value="gardu_listrik">Gardu Listrik</option>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <th>Tipe Bangunan</th>
                                                                    <td>
                                                                        <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;width: 220px;" id="tipe_point_2_b_e" data-placeholder="select point.." class="select-size-md">
                                                                        <option value="null" selected disabled>-- Pilih Tipe Point --</option>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <th>Point Bangunan</th>
                                                                    <td>
                                                                        <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;width: 220px;" id="tipe_point_3_b_e" data-placeholder="select point.." class="select-size-md">
                                                                        <option value="null" selected disabled>-- Pilih Point --</option>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <th>Informasi Bangunan</th>
                                                                    <td>
                                                                        <input type="text" name="infobangunan" id="infobangunan" class="form-control" value="` + feature.properties.f3 + `">
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <th>Kelurahan</th>
                                                                    <td>
                                                                        <input type=" text " name="nmkelurahan " id="nmkelurahan" class="form-control " value="` + feature.administrasi.f1 + `">
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <th>Kecamatan</th>
                                                                    <td>
                                                                        <input type="text " name="nmkecamatan " id="nmkecamatan" class="form-control " value="` + feature.administrasi.f2 + `">
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <th>Kab/Kota</th>
                                                                    <td>
                                                                        <input type="text " name="nmkabkota " id="nmkabkota" class="form-control " value="` + feature.administrasi.f3 + `">
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <th>Provinsi</th>
                                                                    <td>
                                                                        <input type="text " name="nmprovinsi " id="nmprovinsi" class="form-control " value="` + feature.administrasi.f4 + `">
                                                                    </td>
                                                                </tr>

                                                            </table>
                                                        </div>

                                                        <div class="col-md-3 ">

                                                            <table>
                                                                <tr>
                                                                    <th>Luas Bangunan</th>
                                                                    <td>
                                                                        <input type="text " name="luasbangunan " id="luasbangunan" class="form-control " value="` + feature.administrasi.f6 + `">
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <th>Luas Tanah</th>
                                                                    <td>
                                                                        <input type="text " name="luastanah " id="luastanah" class="form-control " value="` + feature.administrasi.f7 + `">
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <th>Tinggi Bangunan</th>
                                                                    <td>
                                                                        <input type="text " name="tinggibangunan " id="tinggibangunan" class="form-control " value="` + feature.administrasi.f8 + `">
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <th>Pemilik</th>
                                                                    <td>
                                                                        <input type="text " name="pemilik " id="pemilik" class="form-control " value="` + feature.administrasi.f10 + `">
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="modal-footer ">
                                                    <button type="button " id="btnsavebangunan" class="btn btn-info ">Save changes</button>
                                                </div>
                                            </div>
                                        </div>`;
                                        content_delete = `
                                        <div class="modal-dialog" style="width: max-content;height: max-content;">
                                            <div class="modal-content">
                                                <div class="modal-header bg-info" style="background-color:#40777c;">
                                                    <table>
                                                        <tr>
                                                            <th><h6 class="modal-title">Delete Bangunan dan Informasinya</h6></th>
                                                            <td><button type="button" class="close" data-dismiss="modal">&times;</button></td>
                                                        </tr>
                                                    </table>
                                                </div>
                                                <div class="form-group" style="margin-bottom:10px;">
                                                    <div id="map-delete" style="width: 300px;height: 250px;position: relative;margin-left: 10px;margin-right: 10px;margin-top: 10px;"></div>
                                                    <div class="form-group">
                                                        <div class="col-lg-12" style="margin-top:10px;margin-bottom:10px;">
                                                            <input type="text" class="hidden" name="coordinatebangunan" id="coordinatebangunanhps" value="">
                                                            <input type="text" name="idbangunan" id="idbangunanhps" class="form-control hidden" value="` + feature.properties.f1 + `" disable>
                                                            <input type="text" name="namebangunan" id="namebangunanhps" class="form-control" value="` + feature.properties.f2 + `">
                                                            <input type="text" name="infobangunan" id="infobangunanhps" class="form-control" value="` + feature.properties.f3 + `">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="modal-footer">
                                                    <button type="button" id="btnsavedeletebangunan" class="btn btn-info">Hapus</button>
                                                </div>
                                            </div>
                                        </div>`;
                                        content_inp_his_bang = `
                                        <div class="modal-dialog" style="height: max-content;">
                                            <div class="modal-content">
                                                <div class="modal-header bg-info" style="background-color:#40777c;">
                                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                    <h6 class="modal-title">Renovasi Bangunan</h6>
                                                </div>
                                                <div class="modal-body" style="max-height: 450px;overflow-y: auto;">
                                                    <div class="tab-pane has-padding" id="panel-tab2">
                                                        <div class="tab-pane" id="bottom-justified-data">

                                                            <div class="tabbable">
                                                                <ul class="nav nav-tabs nav-tabs-bottom nav-justified">
                                                                    <li onclick="changetabs(this)" class="active"><a href="#left-tab1-feas-upl" data-toggle="tab">Koordinat</a></li>
                                                                    <li onclick="changetabs(this)"><a href="#right-tab2-feas-upl" data-toggle="tab">Informasi Umum</a></li>
                                                                </ul>

                                                                <div class="tab-content">
                                                                    <div class="tab-pane active" id="left-tab1-feas-upl">
                                                                        <input type="text" class="hidden" id="poly_create_input_bang">
                                                                        <input type="text" class="hidden" id="id_bang_perbaikan" value="` + feature.properties.f1 + `" disable>
                                                                        <input type="text" class="hidden" id="type_id_bang">
                                                                        <div id="map-insert-renov-bang-s" style="height: 375px;width: 100%">
                                                                        </div>
                                                                    </div>

                                                                    <div class="tab-pane" id="right-tab2-feas-upl">

                                                                        <div class="row">
                                                                            <div class="col-md-6">
                                                                                <div class="form-group">
                                                                                    <label>Nama :</label>
                                                                                    <input type="text" id="nama_bang" class="form-control" value="">
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <label>Jenis :</label>
                                                                                    <input type="text" id="type_bang" class="form-control" value="">
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <label>Kelurahan :</label>
                                                                                    <input type="text" id="kelurahan_bang" class="form-control" value="">
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <label>Kecamatan :</label>
                                                                                    <input type="text" id="kecamatan_bang" class="form-control" value="">
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <label>Tanggal Disetujui :</label>
                                                                                    <input type="date" id="tgldisetujui_bang" class="form-control" value="">
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <label>Tanggal Mulai Perbaikan :</label>
                                                                                    <input type="date" id="tglmulaiperbaikan_bang" class="form-control" value="">
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <label>Tanggal Selesai Perbaikan :</label>
                                                                                    <input type="date" id="tglselesaiperbaikan_bang" class="form-control" value="">
                                                                                </div>
                                            
                                                                            </div>
                                                                            <div class="col-md-6">
                                                                                <div class="form-group">
                                                                                    <label>Anggaran :</label>
                                                                                    <input type="text" id="anggaran_bang" class="form-control" value="">
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <label>Pihak yang Mengesahkan :</label>
                                                                                    <input type="text" id="pihakpengesahan_bang" class="form-control" value="">
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <label>Penanggung Jawab Lapangan :</label>
                                                                                    <input type="text" id="pjlapangan_bang" class="form-control" value="">
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <label>Jenis Perbaikan :</label>
                                                                                    <input type="text" id="jenisperbaikan_bang" class="form-control" value="">
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <label>Kontraktor/Vendor :</label>
                                                                                    <input type="text" id="kontraktor_bang" class="form-control" value="">
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <label>Proposal (.pdf):</label>
                                                                                    <input type="file" id="proposal_bang">
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <label>Bukti Selesai Perbaikan (.png/.jpg/.jpeg/):</label>
                                                                                    <input type="file" id="buktiselesai_bang">
                                                                                </div>
                                            
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <input type="text" id="coorbangbaru" class="hidden"  value="">
                                                    <button type="button" class="btn btn-info" id="save-perbaikan_bang" style="float: right; margin-top: 5px; margin-right: 10px;">SAVE</button>
                                                </div>
                                            </div>
                                        </div>`;
                                        var history
                                        if (feature.administrasi.f11 == 'kantor_administrasi' || feature.administrasi.f11 == 'layanan_kesehatan' || feature.administrasi.f11 == 'puskesmas' ||
                                            feature.administrasi.f11 == 'rumah_sakit' || feature.administrasi.f11 == 'sarana_pendidikan' || feature.administrasi.f11 == 'stasiun' ||
                                            feature.administrasi.f11 == 'terminal_bus' || feature.administrasi.f11 == 'cagar_budaya' || feature.administrasi.f11 == 'gardu_listrik') {
                                            if (feature.properties.f4 != null) {
                                                var list_history = feature.properties.f4
                                                var list_history_panel = ``
                                                for (var i = 0; i < list_history.length; i++) {
                                                    var dt_history = list_history[i].split(",");
                                                    var data_history = `<div class="form-group" style="margin-bottom:0px;">
                                                                            <div class="row">
                                                                                <label class="col-md-6">` + dt_history[1] + `</label>
                                                                                <label class="col-md-6">` + dt_history[2] + `</label>
                                                                            </div>
                                                                        </div>`;
                                                    list_history_panel += data_history
                                                };

                                                history = `
                                                <div>
                                                    <div style="margin-top: 150px;">
                                                        <span>Perbaikan Terakhir</span>
                                                        <span>
                                                            <a id='btn_detail_per_bang' onclick="getdetailperbang(` + feature.properties.f1 + `)" data-toggle="modal" data-target="#modal_detail" style = "text-align:right; margin-right:26px;"><i>Detail</i></a>
                                                        </span>
                                                    </div>
                                                    <div>
                                                        <span>
                                                            <tr style="height: 40px;">
                                                                <th id="history_panel">
                                                                    <div class="form-group" style="margin-bottom:0px;">
                                                                        <div class="row">
                                                                            <label class="col-md-6">` + list_history[0].split(",")[1] + `</label>
                                                                            <label class="col-md-6">` + list_history[0].split(",")[2] + `</label>
                                                                        </div>
                                                                    </div>
                                                                </th>
                                                            </tr>
                                                        </span>
                                                    </div>
                                                </div>
                                                    `;
                                            } else {
                                                history = `
                                                <div>
                                                    <div style="margin-top: 150px;">
                                                        <span>Perbaikan Terakhir</span>
                                                    </div>
                                                    <div>
                                                        <span>
                                                            <tr style="height: 40px;">
                                                                <th id="history_panel">
                                                                    <p class="text-center" style="margin-top: 10px;"><i>Belum Ada History</i></p>
                                                                </th>
                                                            </tr>
                                                        </span>
                                                    </div>
                                                </div>
                                                `;
                                            }
                                        } else {
                                            history = ``
                                        }

                                        content = `
                                            <table class="table tasks-list">
                                                <thead style="text-align: center;">
                                                    <tr>
                                                        <th style="padding: 0 0 0 0px;">
                                                            <img src=` + path_img + ` alt="Image" style="width: 100%;max-height: 368px;height:368"> 
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <div class= "container">
                                                        <tr style="height: 100px;">
                                                            <th>
                                                                <div>
                                                                    <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif;
                                                                    letter-spacing: 0;
                                                                    font-weight: 400;">
                                                                        <span style="font-size: x-large;">
                                                                            ` + feature.properties.f2 + `
                                                                        </span>
                                                                    </h1>
                                                                </div>
                                                            </th>
                                                        </tr>
                                                    </div>
                                                    <div class= "container">
                                                        <tr style="height: 30px;">
                                                            <th>
                                                                <span>
                                                                    ` + feature.administrasi.f12 + `
                                                                </span>
                                                            </th>
                                                        </tr>
                                                    </div>
                                                    <div class= "container">
                                                        <tr style="height: 40px;">
                                                            <th>
                                                                <p style="text-align:center;">
                                                                    <img src="static/img/icon/samping_location.svg" alt="Image" style="height: 30px; width: 30px;">
                                                                </p>
                                                                <p>
                                                                    <span>
                                                                        ` + alamat + feature.administrasi.f1 + `, ` + feature.administrasi.f2 + `, ` + feature.administrasi.f3 + `, ` + feature.administrasi.f4 + `
                                                                    </span>
                                                                </p>
                                                            </th>
                                                        </tr>
                                                    </div>
                                                    <div class= "container">
                                                        <tr style="height: 40px;">
                                                            <th>
                                                                <p style="text-align:center;">
                                                                    <img src="static/img/icon/samping_informasi.svg" alt="Image" style="height: 30px; width: 30px;">
                                                                </p>
                                                                <p>
                                                                    <span>Luas Bangunan : ` + feature.administrasi.f6 + `</span>
                                                                </p>
                                                                <p>
                                                                    <span>Luas Tanah : ` + feature.administrasi.f7 + `</span>
                                                                </p>
                                                                <p>
                                                                    <span>Tinggi Bangunan : ` + feature.administrasi.f8 + `</span>
                                                                </p>
                                                                <p>
                                                                    <span>Pemilik : ` + feature.administrasi.f10 + `</span>
                                                                </p>
                                                            </th>
                                                        </tr>
                                                    </div>
                                                    <div class= "container">
                                                        <tr style="height: 40px;">
                                                            <th>
                                                                <p class="text-center" style="margin-top: 5px;">
                                                                    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#modal_bangunan_edit" id="btn_edit_bangunan" data-backdrop="static" data-keyboard="false" style="border-radius: 200px; margin-bottom: 5px;"><i class="fa fa-edit" style="color:#ffffff"> </i><i style="margin-left: 5px;">Edit Informasi Bangunan</i></a>
                                                                    <a href="#" id='btn_delete_bangunan' class='btn 
                                                                        btn-primary btn_edit_bangunan' data-toggle="modal" data-target="#modal_bangunan_delete" data-backdrop="static" data-keyboard="false" style="border-radius: 200px; margin-bottom: 5px;"><i class="fa fa-trash" style="color:#ffffff"> </i><i style="margin-left: 5px;">Delete Bangunan</i></a>
                                                                </p>
                                                            </th>
                                                        </tr>
                                                    </div>
                                                    <div class="container">
                                                        ` + history + `
                                                    </div>
                                                </tbody>
                                            </table>
                                        `;
                                        $(".gambar_keterangan").html(`<img src=` + path_img + ` alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;">`)
                                        $(".nama_keterangan").html(`<div>
                                                                        <span style="font-size: large;">
                                                                            ` + feature.properties.f2 + `
                                                                        </span>
                                                                    </div>
                                                                    <div>
                                                                        <span>
                                                                            ` + alamat + feature.administrasi.f1 + `, ` + feature.administrasi.f2 + `, ` + feature.administrasi.f3 + `, ` + feature.administrasi.f4 + `
                                                                        </span>
                                                                    </div>
                
                                                                    `)

                                        $(".isi_keterangan").html(`<input type="text" name="idjalan" id="idjalan" class="hidden" value="">
                                                    <input type="text" name="coordinatejalan" id="coordinatejalan" class="hidden" value="">
                                                <div class="col-md-6">
                                                    <div>
                                                        <div>
                                                            <span style="font-family: 'gilroylight';">Jenis Bangunan</span>
                                                        </div>
                                                        <div>
                                                            <span style="font-family: 'gilroysemibold';">` + feature.administrasi.f12 + `</span>
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <div style="margin-top:5px;">
                                                            <span style="font-family: 'gilroylight';">Luas Bangunan</span>
                                                        </div>
                                                        <div>
                                                            <span style="font-family: 'gilroysemibold';">` + feature.administrasi.f6 + ` m</span>
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <div>
                                                            <span style="font-family: 'gilroylight';">Luas Tanah</span>
                                                        </div>
                                                        <div>
                                                            <span style="font-family: 'gilroysemibold';">` + feature.administrasi.f7 + ` m</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div>
                                                        <div>
                                                            <span style="font-family: 'gilroylight';">Tinggi Bangunan</span>
                                                        </div>
                                                        <div>
                                                            <span style="font-family: 'gilroysemibold';">` + feature.administrasi.f8 + ` m</span>
                                                        </div>
                                                    </div>

                                                    <div>
                                                        <div style="margin-top:5px;">
                                                            <span style="font-family: 'gilroylight';">Pemilik</span>
                                                        </div>
                                                        <div>
                                                            <span style="font-family: 'gilroysemibold';">` + feature.administrasi.f10 + ` m</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                    ` + history + `
                                                `);

                                        $(".btn_action").html(`<div class="tombol-edit-keterangan text-center" style="background-color: #5A9AFB;position: absolute;width: 40px;height: 40px;bottom: 2px;right: 5px;border: 1pt solid rosybrown;border-radius: 8px;">
                                                                        <a href="#" id="btn_edit_bangunan" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;"><i class="icon-pencil5"></i></a>
                                                                        </div>
                                                                        <div class="tombol-delete-keterangan text-center" style="background-color: indianred;position: absolute;width: 40px;height: 40px;bottom: 2px;right: 50px;border: 1pt solid rosybrown;border-radius: 10px;">
                                                                            <a href="#" id="btn_delete_bangunan" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;"><i class="icon-eraser2"></i></a>
                                                                        </div>
                                                                        `)
                                        $("#isi_panel").html(content);
                                        $("#modal_bangunan_edit").html(content_edit);
                                        $("#modal_bangunan_delete").html(content_delete);
                                        $("#input_perbaikan_bang-s").html(content_inp_his_bang);
                                        panel_samp();
                                    });
                                    $("#panel-samping").css("display", "block");
                                    $("#button_hide_panel").css("display", "block");
                                    panel_samp()
                                }
                            });

                            pool.push({
                                name: feature.properties.f2,
                                id: L.stamp(layer),
                                lat: lattitud,
                                lng: longitud
                            });
                        }
                        layer.on({
                            mouseover: function(e) {
                                var layer = e.target;
                                layer.setStyle({
                                    weight: 1,
                                    Color: "#067800",
                                    fillColor: "#067800",

                                });
                                if (!L.Browser.ie && !L.Browser.opera) {
                                    layer.bringToFront();
                                }
                            },
                            mouseout: function(e) {
                                geo_bangunan.resetStyle(e.target);
                            }
                        });
                    }
                });

                function geo_json_bangunan(data) {
                    geo_bangunan.addData(data)
                }
                // map.on("movestart", function() {
                //     geo_bangunan.clearLayers();
                // });

                $(document).on("click", "#btn_search_spes", function() {
                    geo_bangunan.clearLayers()
                    geo_bangunan.remove()
                });

                $('#search_spes li a').on('click', function() {
                    $('#input_search').val(null)
                    tes = $(this).text();
                    dar = tes
                    if (dar == ' Reset') {
                        geo_bangunan.clearLayers();
                        geo_bangunan.remove();
                    }
                });

                // geo_bangunan.clearLayers();
                // geo_bangunan.remove();
                $.ajax({
                    url: "api/search_lanjut",
                    data: {
                        'type': dar,
                        'idx': idm,
                        'db': db
                    },
                    dataType: 'json',
                    success: function(data) {
                        // if (map.hasLayer(geo_bangunan)) {
                        //     geo_bangunan.clearLayers()
                        //     geo_bangunan.remove()
                        // }
                        let list_poly = [];
                        for (var i = 0; i < data['gen'].length; i++) {
                            geoj = data['gen'][i][0];
                            list_poly.push(geoj);
                        };
                        // geo_bangunan.clearLayers()
                        // geo_bangunan.remove()
                        geo_json_bangunan(list_poly);
                    }
                });
                map.setView([data['gen'][0][0]['geometry']['coordinates'][0][0][0][1], data['gen'][0][0]['geometry']['coordinates'][0][0][0][0]], 19);

                geo_bangunan.addTo(map);

                $(document).on("click", "#btn_edit_bangunan", function() {
                    $("#modal_bangunan_edit").css('display', 'block');
                    var tipe1 = $('#tipe111').val();
                    $('#tipe_point_b_e option[value=' + tipe1 + ']').attr('selected', 'selected');

                    $("#tipe_point_b_e").change(function() {
                        $('#tipe_point_2_b_e').empty();
                        $('#tipe_point_3_b_e').empty();
                        var tipe = $(this).val();

                        $.ajax({
                            url: "api/change-tipe",
                            data: {
                                'tipe': tipe
                            },
                            dataType: 'json',
                            success: function(data) {

                                var data_all_kab = []
                                for (var i = 0; i < data['result'].length; i++) {
                                    var data_k = data['result'][i][0];

                                    // if (feature.administrasi.f12 == data_k){
                                    //     var data_kab = `<option value="` + data_k + `" selected>` + data_k + `</option>`;
                                    // } else{
                                    //     var data_kab = `<option value="` + data_k + `">` + data_k + `</option>`;
                                    // }
                                    var data_kab = `<option value="` + data_k + `">` + data_k + `</option>`;
                                    data_all_kab.push(data_kab)
                                };
                                $('#tipe_point_2_b_e').html(`<option value="null" selected disabled>-- Pilih Tipe Point --</option>` + data_all_kab);
                            }
                        });
                    });

                    var tipe2 = $('#tipe222').val();
                    if (tipe2 == 'null') {
                        $('#tipe_point_2_b_e').html(`<option value="null" selected disabled>-- Pilih Tipe Point --</option>`);
                    } else {
                        $('#tipe_point_2_b_e').html(`<option value="` + tipe2 + `" selected>` + tipe2 + `</option>`);
                    }

                    $("#tipe_point_2_b_e").change(function() {
                        $('#tipe_point_3_b_e').empty();
                        var jenis = $(this).val();
                        var tipx = $("#tipe_point_b_e").val();

                        $.ajax({
                            url: "api/change-jenis",
                            data: {
                                'tipe': tipx,
                                'jenis': jenis
                            },
                            dataType: 'json',
                            success: function(data) {
                                var data_all_kab = []
                                for (var i = 0; i < data['result'].length; i++) {
                                    var data_id = data['result'][i][0];
                                    var data_po = data['result'][i][1];
                                    var data_kab = `<option value="` + data_id + `">` + data_po + `</option>`;
                                    data_all_kab.push(data_kab)
                                };
                                $('#tipe_point_3_b_e').html(`<option value="null" selected disabled>-- Pilih Point --</option>` + data_all_kab);
                            }
                        });
                    });

                    var tipe3 = $('#tipe333').val();
                    var tipe4 = $('#tipe444').val();

                    if (tipe3 == 'null') {
                        $('#tipe_point_3_b_e').html(`<option value="null" selected disabled>-- Pilih Point --</option>`);
                    } else {
                        $('#tipe_point_3_b_e').html(`<option value="` + tipe3 + `" selected>` + tipe4 + `</option>`);
                    }

                    var map_edit = new L.map('map-edit', {
                        editable: true,
                        zoomControl: false,
                        drawControl: true
                    }).setView([-2, 118], 5);

                    mapss = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
                        maxZoom: 22,
                        minZoom: 4,
                    }).addTo(map_edit);

                    var polylyly = L.polygon([
                        [-4.1283969, 104.1674575],
                        [-4.128396, 104.1674947],
                        [-4.1284664, 104.1674964],
                        [-4.1284674, 104.1674593],
                        [-4.1283969, 104.1674575]
                    ]).addTo(map_edit)

                    if (map_edit.hasLayer(polylyly)) {
                        polylyly.remove()
                    }

                    var id_poly = $('#idbangunan').val();
                    loaderPage(true);

                    $.ajax({
                        url: "api/edit",
                        data: {
                            'id_poly': id_poly
                        },
                        dataType: 'json',
                        success: function(data) {

                            setTimeout(function() {
                                map_edit.invalidateSize();
                            }, 1000);
                            loaderPage(false);

                            map_edit.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19);

                            let lop_poly_edit = data['geometry']['coordinates'][0][0];
                            let list_poly_edit = [];
                            for (var i = 0; i < lop_poly_edit.length; i++) {
                                geoj = lop_poly_edit[i][0];
                                polygigi = [lop_poly_edit[i][1], lop_poly_edit[i][0]]
                                list_poly_edit.push(polygigi);
                            };

                            polylyly = L.polygon(list_poly_edit).addTo(map_edit)
                            polylyly.enableEdit();
                            var hasil = (JSON.stringify(polylyly.toGeoJSON()))
                            $('#btnsavebangunan').click(function() {
                                var hasil = (JSON.stringify(polylyly.toGeoJSON()))
                                $("#coordinatebangunan").val(hasil);
                                // map_edit.remove()
                            })
                        }
                    })
                });

                $(document).on("click", "#btnsavebangunan", function() {
                    var data = new FormData();
                    data.append("file", $("input[id^='imgbangunan']")[0].files[0]);
                    data.append("csrfmiddlewaretoken", "{{ csrf_token }}");
                    data.append('name_b', $('#namebangunan').val())
                    data.append('polygon', $('#coordinatebangunan').val())

                    var polyg = $("#coordinatebangunan").val();


                    data.append('info_b', $('#infobangunan').val())
                    data.append('desa_b', $('#nmkelurahan').val())
                    data.append('kec_b', $('#nmkecamatan').val())
                    data.append('kab_b', $('#nmkabkota').val())
                    data.append('pro_b', $('#nmprovinsi').val())
                    data.append('id_poly', $('#idbangunan').val())
                    data.append('gambar', $('#gambar').val())

                    data.append('tipedbbe', $('#tipe_point_b_e').val())
                    data.append('remarkbe', $('#tipe_point_2_b_e').val())
                    data.append('poinbe', $('#tipe_point_3_b_e').val())
                    var remark = $('#tipe_point_2_b_e').val();
                    var poin_id = $('#tipe_point_3_b_e').val();
                    var napo = $("#tipe_point_3_b_e option:selected").text();
                    data.append('napo', $('#tipe_point_3_b_e option:selected').text())

                    data.append('luasbangunan_b', $('#luasbangunan').val())
                    data.append('luastanah_b', $('#luastanah').val())
                    data.append('tinggibangunan_b', $('#tinggibangunan').val())
                    data.append('pemilik_b', $('#pemilik').val())

                    $.ajax({
                        url: "api/validatedit",
                        data: data,
                        dataType: 'json',
                        type: 'POST',
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            let response = data
                            if (response.code == 0) {
                                swal({
                                    title: response.info,
                                    text: response.data,
                                    type: "success",
                                    icon: "success",
                                    confirmButtonColor: "#00BCD4"
                                }, function() {
                                    $("#modal_bangunan_edit").css('display', 'none');
                                })
                            } else {
                                swal({
                                    title: response.info,
                                    text: response.data,
                                    type: "warning",
                                    icon: "error",
                                    confirmButtonColor: "#00BCD4"
                                })

                            }
                        }
                    })

                });

                $(document).on("click", "#btn_delete_bangunan", function() {
                    $("#modal_bangunan_delete").css('display', 'block');
                    var map_delete = new L.map('map-delete', {
                        editable: true,
                        zoomControl: false,
                        drawControl: true
                    }).setView([-2, 118], 5);

                    mapss = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
                        maxZoom: 22,
                        minZoom: 4,
                    }).addTo(map_delete);

                    var id_polyhps = $('#idbangunanhps').val();
                    // //console.log(id_polyhps)
                    loaderPage(true);

                    $.ajax({
                        url: "api/edit",
                        data: {
                            'id_poly': id_polyhps
                        },
                        dataType: 'json',
                        success: function(data) {

                            setTimeout(function() {
                                map_delete.invalidateSize();
                            }, 1000);
                            loaderPage(false);

                            map_delete.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 19);

                            let lop_poly_edit = data['geometry']['coordinates'][0][0];
                            let list_poly_edit = [];
                            for (var i = 0; i < lop_poly_edit.length; i++) {
                                geoj = lop_poly_edit[i][0];
                                polygigi = [lop_poly_edit[i][1], lop_poly_edit[i][0]]
                                list_poly_edit.push(polygigi);
                            };

                            var polyly = L.polygon(list_poly_edit).addTo(map_delete)
                            $('#btnsavedeletebangunan').click(function() {
                                var hasil = (JSON.stringify(polyly.toGeoJSON()))
                                $("#coordinatebangunan").val(hasil);
                            })
                        }
                    })
                });

                $(document).on("click", "#btnsavedeletebangunan", function() {

                    var data = new FormData();
                    data.append('id_poly', $('#idbangunan').val())

                    $.ajax({
                        url: "api/hapus",
                        data: data,
                        dataType: 'json',
                        type: 'POST',
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            let response = data
                            if (response.code == 0) {
                                swal({
                                    title: response.info,
                                    text: response.data,
                                    type: "success",
                                    icon: "success",
                                    confirmButtonColor: "#00BCD4"
                                }, function() {
                                    $("#modal_bangunan_delete").css('display', 'none');
                                })
                            } else {
                                swal({
                                    title: 'Error',
                                    text: 'Hubungi Mereka',
                                    type: "warning",
                                    icon: "error",
                                    confirmButtonColor: "#00BCD4"
                                })
                            }
                        }
                    })

                });

                $(document).on("click", "#btn_perbaikan_bangunan", function() {
                    // $("#input_perbaikan_bang-s").css("display", "block");
                    var map_bang = new L.map('map-insert-renov-bang-s', {
                        editable: false,
                        zoomControl: false,
                        drawControl: true
                    }).setView([-2, 118], 5);

                    mapssx = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
                        maxZoom: 22,
                        minZoom: 4,
                    }).addTo(map_bang);

                    // if (map_bang.hasLayer(polyxxx)) {
                    //     polyxxx.remove()
                    // }

                    var id_polyx = $('#id_bang_perbaikan').val();

                    loaderPage(true);

                    $.ajax({
                        url: "input-perbaikan-bang",
                        data: {
                            'id_bangunan': id_polyx
                        },
                        dataType: 'json',
                        success: function(data) {

                            setTimeout(function() {
                                map_bang.invalidateSize();
                            }, 1000);
                            loaderPage(false);

                            $("#nama_bang").val(data[0]);
                            $("#type_bang").val(data[4]);
                            $("#id_bang_perbaikan").val(data[3]);
                            $("#type_id_bang").val("1");
                            $("#kelurahan_bang").val(data[5]);
                            $("#kecamatan_bang").val(data[6]);

                            var latlngs = data[2];

                            var lattitud, longitud;

                            map_bang.setView([data[2]['geometry']['coordinates'][0][0][0][1], data[2]['geometry']['coordinates'][0][0][0][0]], 19);

                            let lop_poly_edit = data[2]['geometry']['coordinates'][0][0];
                            let list_poly_edit = [];
                            for (var i = 0; i < lop_poly_edit.length; i++) {
                                geoj = lop_poly_edit[i][0];
                                polygigi = [lop_poly_edit[i][1], lop_poly_edit[i][0]]
                                list_poly_edit.push(polygigi);
                            };

                            polylyly = L.polygon(list_poly_edit).addTo(map_bang)
                            polylyly.enableEdit();
                            var hasil = (JSON.stringify(polylyly.toGeoJSON()))
                            $('#save-perbaikan_bang').click(function() {
                                $("#coorbangbaru").val(hasil);
                            })
                        }
                    })
                });

                $(document).on("click", "#save-perbaikan_bang", function(e) {
                    var polyginbang = $('#coorbangbaru').val();
                    var type_id = $("#type_id").val();
                    var idbang = $('#id_bang_perbaikan').val();
                    var namabang = $('#nama_bang').val();
                    var type = $("#type_bang").val();
                    var tgl_perbaikan = $("#tglmulaiperbaikan_bang").val();
                    var tgl_selesai = $("#tglselesaiperbaikan_bang").val();
                    var tgl_disetujui = $("#tgldisetujui_bang").val();
                    var anggaran = $("#anggaran_bang").val();
                    var proposal = $("#proposal_bang").val();
                    var bukti_selesai = $("#buktiselesai_bang").val();

                    var pj = $("#pihakpengesahan_bang").val();
                    var pj_lapangan = $("#pjlapangan_bang").val();
                    var kontraktor = $("#kontraktor_bang").val();
                    var jenis_perbaikan = $("#jenisperbaikan_bang").val();
                    var kelurahan = $("#kelurahan_bang").val();
                    var kecamatan = $("#kecamatan_bang").val();

                    var data_umum = [{
                        'coordbang': polyginbang
                    }, {
                        'object_idbang': idbang
                    }, {
                        'type_idbang': type_id
                    }, {
                        'namebang': namabang
                    }, {
                        'typebang': type
                    }, {
                        'tgl_selesaibang': tgl_selesai
                    }, {
                        'tgl_perbaikanbang': tgl_perbaikan
                    }, {
                        'tgl_disetujuibang': tgl_disetujui
                    }, {
                        'anggaranbang': anggaran
                    }, {
                        'pjbang': pj
                    }, {
                        'pj_lapanganbang': pj_lapangan
                    }, {
                        'jenis_perbaikanbang': jenis_perbaikan
                    }, {
                        'kontraktorbang': kontraktor
                    }, {
                        'kelurahanbang': kelurahan
                    }, {
                        'kecamatanbang': kecamatan
                    }]

                    data = new FormData()
                    data.append("proposal_bang", $("input[id^='proposal_bang']")[0].files[0]);
                    data.append("bukti_selesai_bang", $("input[id^='buktiselesai_bang']")[0].files[0]);
                    for (var i = 0; i < data_umum.length; i++) {
                        var keyss = Object.keys(data_umum[i]);
                        data.append(keyss[0], data_umum[i][keyss[0]])
                    }

                    $.ajax({
                        url: "save-perbaikan-bang",
                        data: data,
                        dataType: 'json',
                        type: 'POST',
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            let response = data;

                            if (response.code == 0) {
                                swal({
                                    title: response.info,
                                    text: response.data,
                                    type: "success",
                                    icon: "success",
                                    confirmButtonColor: "#00BCD4"
                                }, function() {
                                    $("#input_perbaikan_bang-s").css("display", "none");
                                })
                            } else {
                                swal({
                                    title: response.info,
                                    text: response.data,
                                    type: "warning",
                                    icon: "error",
                                    confirmButtonColor: "#00BCD4"
                                })

                            }
                        }
                    })
                });

                function getdetailperbang(id) {
                    $.ajax({
                        url: "get-detail-perbaikan-bang",
                        data: {
                            'id': id
                        },
                        dataType: 'json',
                        success: function(data) {

                            isi_modal_detail = []
                            for (var i = 0; i < data.length; i++) {
                                isi_modal_detail.push(`
                                <tr>
                                    <td>` + i + `</td>
                                    <td>` + data[i].name + `</td>
                                    <td>` + data[i].type + `</td>
                                    <td>` + data[i].tgl_perbaikan + `</td>
                                    <td>` + data[i].anggaran + `</td>
                                    <td>` + data[i].pj + `</td>
                                    <td>` + data[i].pj_lapangan + `</td>
                                    <td>` + data[i].kontraktor + `</td>
                                    <td>` + data[i].jenis_perbaikan + `</td>
                                    <td><a href="media/proposal/` + data[i].proposal + `" id="downloadproposal" target="_blank">View</a></td>
                                    <td><a href="media/bukti_penyelesaian/` + data[i].bukti_selesai + `" onclick="viewBukti()" id="view-bukti" target="_blank">View</a></td>
                                </tr>`)
                            }

                            $("#isi_modal_detail").html(`                
                            <table class="table table-responsive datatable-show-all table-sm" id="isi_detail" style="word-wrap:break-word;">
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Nama</th>
                                        <th>Type</th>
                                        <th>Tanggal Perbaikan</th>
                                        <th>Anggaran</th>
                                        <th>Penanggung Jawab</th>
                                        <th>Penanggung Jawab Lapangan</th>
                                        <th>Kontraktor</th>
                                        <th>Jenis Perbaikan</th>
                                        <th>Proposal</th>
                                        <th>Bukti Penyelesaian</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    ` + isi_modal_detail + `
                                </tbody>
                            </table>`)

                        }
                    });
                };
            }
        });

    } else if (dar == ' Jalan') {
        nama = res_in;
        idm = res_id[0];
        geo = res_id[1];
        $.ajax({
            url: "api/search_lanjut",
            data: {
                "type": dar,
                'idx': idm
            },
            dataType: 'json',
            success: function(data) {
                var geo_jalan = L.geoJson(null, {

                    onEachFeature: function(feature, layer) {
                        if (feature.properties) {
                            layer.on({

                                click: function(e) {
                                    $("#modal_detail_non_kelurahan").modal('show');
                                    // var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) {
                                    if (feature.properties.f2 == null) {
                                        var namajalan = "unnamed"
                                    } else {
                                        var namajalan = feature.properties.f2
                                    }

                                    if (feature.properties.f6 == 'None') {
                                        var path_img = "static/img/image_null.png"
                                    } else {
                                        var path_img = `"static/image/jalan/` + feature.properties.f6 + `"`
                                    }
                                    $(".gambar_keterangan").html(`<img src=` + path_img + ` alt="" style="width:100%;height:240px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;">`)

                                    $(".nama_keterangan").html(namajalan)

                                    $(".btn_action").html(`<div class="tombol-edit-keterangan text-center" style="background-color: #5A9AFB;position: absolute;width: 40px;height: 40px;bottom: 2px;right: 5px;border: 1pt solid rosybrown;border-radius: 8px;">
                                            <a href="#" id="btn_jalan" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;"><i class="icon-pencil5"></i></a>
                                            </div>
                                            <div class="tombol-delete-keterangan text-center" style="background-color: indianred;position: absolute;width: 40px;height: 40px;bottom: 2px;right: 50px;border: 1pt solid rosybrown;border-radius: 10px;">
                                                <a href="#" id="btn_hapus_jalan" class="btn" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;"><i class="icon-eraser2"></i></a>
                                            </div>
                                            `)

                                    if (feature.properties.f7 != null) {
                                        var list_history = feature.properties.f7
                                        //console.log(list_history[0].split(",")[0])
                                        var perbaikan_jl = `<div class='row'>
                                                
                                                <label class="col-md-8">` + list_history[0].split(",")[1] + `</label>
                                                
                    
                                                <a class="col-md-4" onclick="getdetailper(` + list_history[0].split(",")[0] + `)" data-toggle="modal" data-target="#modal_detail_perbaikan_dash"><i>Detail</i></a>
                    
                                            </div>`

                                    } else {
                                        var perbaikan_jl = `<div class='row'>
                                                                <div class="col-md-6">
                                                                    <label class="col-md-6">Null</label>
                                                                </div>
                                                            </div>`

                                    }
                                    $(".nama_keterangan").html(`
                                                    <div>
                                                        <span style="font-size: large;">
                                                            ` + feature.properties.f2 + `
                                                        </span>
                                                    </div>
                                                    <div>
                                                        <span></span>
                                                    </div>
                                                    `)

                                    $(".isi_keterangan").html(`
                                                    <input type="text" name="idjalan" id="idjalan" class="hidden" value="">
                                                    <input type="text" name="coordinatejalan" id="coordinatejalan" class="hidden" value="">
                                                        <div>
                                                            <div>
                                                                <span>Panjang Jalan</span>
                                                            </div>
                                                            <div>
                                                                <span>` + feature.properties.f3 + `m</span>
                                                            </div>
                                                        </div>
                                                        <div>
                                                            <div>
                                                                <span>Lebar Jalan</span>
                                                            </div>
                                                            <div>
                                                                <span style="font-family: 'Roboto';">` + feature.properties.f4 + ` m</span>
                                                            </div>
                                                        </div>

                                                        <div>
                                                            <div>
                                                                <span>Tipe Jalan</span>
                                                            </div>
                                                            <div>
                                                                <span>` + feature.properties.f5 + `</span>
                                                            </div>
                                                        </div>

                                                        <div>
                                                            <div>
                                                                <span>Perbaikan Terakhir</span>
                                                            </div>
                                                            <div>
                                                                <span>` + perbaikan_jl + `</span>
                                                            </div>
                                                        </div>

                                                    `)
                                        //if (result.address.Address != '') {
                                        //    var nmjalan = result.address.Address
                                        //} else {
                                        //    var nmjalan = feature.properties.f2
                                        //};
                                        //
                                        //var history
                                        //if (feature.properties.f7 != null) {
                                        //    var list_history = feature.properties.f7
                                        //
                                        //    var list_history_panel = ``
                                        //    for (var i = 0; i < list_history.length; i++) {
                                        //        var dt_history = list_history[i].split(",");
                                        //
                                        //        var data_history = `<div class="form-group" style="margin-bottom:0px;">
                                        //                                <div class="row">
                                        //                                    <label class="col-md-6">` + dt_history[1] + `</label>
                                        //                                    <a class="col-md-3" onclick="getjalanper(` + dt_history[0] + `)"><i>View Ruas<///i></a>
                                        //                                    <a class="col-md-3" onclick="getdetailper(` + dt_history[0] + `)" //data-toggle="modal" data-target="#modal_detail"><i>View Detail</i></a>
                                        //                                </div>
                                        //                            </div>`;
                                        //        list_history_panel += data_history
                                        //    };
                                        //
                                        //    history = `<p class="text-center">
                                        //                    History Perbaikan
                                        //                </p>
                                        //                    <br>
                                        //                    ` + list_history_panel + `
                                        //                <p class="text-center" style="margin-top: 10px;">
                                        //                    <a href="#" id='btn_perbaikan_jalan' class="btn btn-default"><i>Tambah History Perbaikan</i><///a>
                                        //                </p>`;
                                        //} else {
                                        //    history = `<p class="text-center">
                                        //                    History Perbaikan
                                        //                </p>
                                        //                    <br>
                                        //                <p class="text-center" style="margin-top: 10px;">
                                        //                    <a href="#" id='btn_perbaikan_jalan' class="btn btn-default"><i>Input History Perbaikan</i></a>
                                        //                </p>`;
                                        //}
                                        //

                                    $('#namajalanedit').val(namajalan);

                                    // });

                                    $('#idjalan').val(feature.properties.f1);
                                    $('#panjangjalan').val(feature.properties.f3);
                                    $('#lebarjalan').val(feature.properties.f4);
                                    $('#tipejalan').val(feature.properties.f5);

                                    $("#coordinatejalan").val(feature.geometry);

                                    var najal = $('#namajalanedit').val();
                                    //console.log(najal)
                                    var ijal = $('#idjalan').val();
                                    //console.log(ijal)
                                }
                            });

                            pool.push({
                                name: feature.properties.f2,
                                id: L.stamp(layer),
                            });
                        }
                        layer.on({

                            mouseover: function(e) {
                                var layer = e.target;
                                layer.setStyle({
                                    weight: 10,
                                    Color: "#fffc00",
                                    fillColor: "#fffc00",
                                    fillOpacity: 2,
                                    opacity: 2,


                                });
                                if (!L.Browser.ie && !L.Browser.opera) {
                                    layer.bringToFront();
                                }
                            },
                            mouseout: function(e) {
                                geo_jalan.resetStyle(e.target);
                            }
                        });
                        var popupContent = feature.properties.f2;
                        layer.bindTooltip(popupContent);


                    }
                });

                function geo_json_jalan(data) {
                    geo_jalan.addData(data)
                }

                $(document).on("click", "#btn_search_spes", function() {
                    geo_jalan.clearLayers()
                    geo_jalan.remove()
                });

                $('#search_spes li a').on('click', function() {
                    $('#input_search').val(null)
                    tes = $(this).text();
                    dar = tes
                    if (dar == ' Reset') {
                        geo_jalan.clearLayers();
                        geo_jalan.remove();
                    }
                });

                $.ajax({
                    url: "api/search_lanjut",
                    data: {
                        'type': dar,
                        'idx': idm,
                    },
                    dataType: 'json',
                    success: function(data) {

                        let list_poly = [];
                        for (var i = 0; i < data['gen'].length; i++) {
                            geoj = data['gen'][i][0];
                            list_poly.push(geoj);
                        };
                        geo_json_jalan(list_poly);
                        if (data['gen'][0][0]['geometry']['type'] == "MultiLineString") {
                            var alat = data['gen'][0][0]['geometry']['coordinates'][0][0][1];
                            var alng = data['gen'][0][0]['geometry']['coordinates'][0][0][0];
                            var lop_poly_edit = data['gen'][0][0]['geometry']['coordinates'][0];
                        } else {
                            var alat = data['gen'][0][0]['geometry']['coordinates'][0][1];
                            var alng = data['gen'][0][0]['geometry']['coordinates'][0][0];
                            var lop_poly_edit = data['gen'][0][0]['geometry']['coordinates'];
                        };
                        map.setView([alat, alng], 18);
                    }
                });
                // map.setView([data['gen'][0][0]['geometry']['coordinates'][0][0][0][1], data['gen'][0][0]['geometry']['coordinates'][0][0][0][0]], 19);
                geo_jalan.addTo(map);

                var map_edit_jalan = L.map('map-jalan', {
                    editable: true,
                    zoomControl: false,
                    drawControl: true
                }).setView([-2, 118], 5);

                mapss = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                    maxZoom: 22,
                    minZoom: 4,
                }).addTo(map_edit_jalan);
                var polygon_edit_jalan = new L.Polyline([
                    [-4.11941282399997, 104.170558774],
                    [-4.11965812399992, 104.170414073]
                ], {
                    color: 'blue',
                    weight: 3,
                    opacity: 0.5,
                    smoothFactor: 1
                });

                $(document).on("click", "#btn_jalan", function() {
                    $("#modal-jalan").css('display', 'block');
                    if (map_edit_jalan.hasLayer(polygon_edit_jalan)) {
                        polygon_edit_jalan.remove()
                    }
                    var id_poly = $('#idjalan').val();
                    //console.log(id_poly)
                        // var id_poly = idm

                    $.ajax({
                        url: "api/edit-jalan",
                        data: {
                            'idjalan': id_poly
                        },
                        dataType: 'json',
                        success: function(data) {
                            loaderPage(false);
                            setTimeout(function() {
                                map_edit_jalan.invalidateSize();
                            }, 1000);


                            if (data['jalan']['geometry']['type'] == "MultiLineString") {
                                var alat = data['jalan']['geometry']['coordinates'][0][0][1];
                                var alng = data['jalan']['geometry']['coordinates'][0][0][0];
                                var lop_poly_edit = data['jalan']['geometry']['coordinates'][0];
                            } else {
                                var alat = data['jalan']['geometry']['coordinates'][0][1];
                                var alng = data['jalan']['geometry']['coordinates'][0][0];
                                var lop_poly_edit = data['jalan']['geometry']['coordinates'];
                            };
                            map_edit_jalan.setView([alat, alng], 18);

                            let list_poly_edit = [];
                            for (var i = 0; i < lop_poly_edit.length; i++) {
                                geoj = lop_poly_edit[i][0];
                                polygigi = [lop_poly_edit[i][1], lop_poly_edit[i][0]]
                                list_poly_edit.push(polygigi);
                            };


                            polygon_edit_jalan = new L.Polyline(list_poly_edit, {
                                color: 'blue',
                                weight: 3,
                                opacity: 0.5,
                                smoothFactor: 1
                            });
                            polygon_edit_jalan.addTo(map_edit_jalan);
                            polygon_edit_jalan.enableEdit();
                            $('#btnsavejalan').click(function() {
                                var hasil = (JSON.stringify(polygon_edit_jalan.toGeoJSON()))
                                $("#coordinatejalan").val(hasil);
                            })
                        }
                    })
                });

                //tes
                $(document).on("click", "#btn_hapus_jalan", function() {
                    $("#modal-hapus-jalan").css('display', 'block');
                    var id_poly = $('#idjalan').val();

                    $.ajax({
                        url: "api/edit-jalan",
                        data: {
                            'idjalan': id_poly
                        },
                        dataType: 'json',
                        success: function(data) {
                            loaderPage(false);
                            $("#isi_modal_delete").html(`Hapus Jalan dengan nama jalan ` + data['nama'] + ``);
                            $("#idjlnhps").val(id_poly)
                        }
                    })
                });

                $('#btnhpsjalan').click(function() {
                    var id_poly = $('#idjlnhps').val();
                    $.ajax({
                        url: "api/hapus-jalan",
                        data: {
                            'idjalan': id_poly
                        },
                        dataType: 'json',
                        success: function(data) {
                            let response = data;
                            if (response.code == 0) {
                                swal({
                                    title: response.info,
                                    text: response.data,
                                    type: "success",
                                    icon: "success",
                                    confirmButtonColor: "#00BCD4"
                                }, function() {
                                    $("#modal-hapus-jalan").css('display', 'none');
                                })
                            } else {
                                swal({
                                    title: response.info,
                                    text: response.data,
                                    type: "warning",
                                    icon: "error",
                                    confirmButtonColor: "#00BCD4"
                                })
                            }
                        }
                    });
                });

                $(document).on("click", "#btnsavejalan", function() {
                    var cek = $("#namajalanedit").val()
                    //console.log(cek)
                    var data = new FormData();
                    data.append("file", $("input[id^='imgjalan']")[0].files[0]);
                    data.append("csrfmiddlewaretoken", "{{ csrf_token }}");

                    data.append('idjalan', $("#idjalan").val())
                    data.append('namajalan', $("#namajalanedit").val())
                    data.append('panjangjalan', $("#panjangjalan").val())
                    data.append('lebarjalan', $("#lebarjalan").val())
                    data.append('tipejalan', $("#tipejalan").val())
                    data.append('cord', $("#coordinatejalan").val())

                    $.ajax({
                        url: "api/edit-jalan-valid",
                        data: data,
                        dataType: 'json',
                        type: 'POST',
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            loaderPage(false);
                            let response = data;
                            if (response.code == 0) {
                                swal({
                                    title: response.info,
                                    text: response.data,
                                    type: "success",
                                    icon: "success",
                                    confirmButtonColor: "#00BCD4"
                                }, function() {
                                    $("#modal-jalan").css('display', 'none');
                                })
                            } else {
                                swal({
                                    title: response.info,
                                    text: response.data,
                                    type: "warning",
                                    icon: "error",
                                    confirmButtonColor: "#00BCD4"
                                })
                            }
                        }
                    })
                });
            }
        });
    }
});

/* ini ngaruh sama element yang punya class "switchery-" */
var primary = document.querySelectorAll("[class^=switchery-");
/* ------------------- */

for (var z = 0; z < primary.length; z++) {
    var switchery = new Switchery(primary[z], {
        color: '#5A9AFB',
        secondaryColor: '#3B3E47',
        jackColor: '#fff',
        jackSecondaryColor: '#fff'
    });
}

//    $("#perbaikan_manage").click(function() {
//        var x = window.matchMedia("(max-width: 700px)")
//        if (x.matches) { // If media query matches
//            swal({
//                title: "Sorry",
//                text: "Untuk di mobile tampilan manajemen perbaikan tidak mendukung, Silahkan akses menggunakan laptop atau PC",
//                type: "warning",
//                icon: "error",
//                confirmButtonColor: "#00BCD4"
//            })
//
//            setTimeout(function() {
//                $("#panel-sm2").removeClass('active')
//                $("#manage_perbaikan").removeClass('active')
//                $("#btn-hide-all").css("display", "none")
//            }, 500);
//        }
//    })

$('.leaflet-bottom.leaflet-right>.leaflet-control-attribution.leaflet-control').html(`Powered by <a href="https://khansia.co.id" target="_blank">Khansia</a> with <a href="https://leafletjs.com" target="_blank">Leaflet</a>`)
$('.leaflet-bottom.leaflet-right>.leaflet-control-attribution.leaflet-control').css("right", "50px")