<script>
    var toggler = document.getElementsByClassName("ceret");
    var i;

    for (i = 0; i < toggler.length; i++) {
        toggler[i].addEventListener("click", function() {
            this.parentElement.querySelector(".nasted").classList.toggle("active");
            this.classList.toggle("ceret-down");
        });
    }


    var kecamatan = "{{ kecamatan }}".replace(/&#x27;/g, '"');
    var result_kec = JSON.parse("" + kecamatan + "");
    console.log(result_kec)

    var kelurahan = "{{ kelurahan }}".replace(/&#x27;/g, '"');
    var result_kel = JSON.parse("" + kelurahan + "")
    var geo_batas_kel = batas_desa_desa();

    function batas_desa_desa() {
        return L.geoJson(null, {
            style: function(feature) {
                return {
                    color: "#8E0B0B",
                    weight: 0.5,
                    opacity: 2,
                    fillcolor: "#F79997",
                    fillOpacity: 0.1
                };
            },
            onEachFeature: function(feature, layer) {
                layer.on({
                    click: function(e) {
                        content = `
                        <form action="{% url 'apps:edit_kel' %}" class="form-group" method="POST">

                            {% csrf_token %}
                            <fieldset id="data-poly">
                                <input class="hidden" type="text" name='kode_dagri' id="kode_desa" value="` + feature.administrasi.f1 + `">

 
                                <input id='btn_edit_kelurahan' class="btn btn-default" type="submit" value="Edit" style="position: absolute;
                                top: 260px;right: 5px;width: 60px;">

                                </div>
                            </fieldset>
                        </form>
        
                        <table class="table table-hover tasks-list">
                        <thead style="text-align: center;">
                            <tr>
                                <th style="padding: 0 0 0 0px;">
                                    <img src="static/img/maps/bing.png" alt="Image" style="width: 100%;max-height: 237px;height:237"> </th>
                            </tr>
                        </thead>
                        <tbody>
                            <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;
                                            font-family: ui-serif;">
                                                ` + feature.administrasi.f2 + ` , ` + feature.administrasi.f3 + `, ` + feature.administrasi.f4 + `
                                            </span>

                                        </h1>
                                    </div>
                                </th>
                            </tr>
                            <tr>
                                <th>
                                    <label class="text-semibold" style="margin-left:10px">Informasi Umum</label>
                                    <div>
                                        <table>
                                            <tr>
                                                <th>Kode Desa</th>
                                                <td>:&nbsp` + feature.administrasi.f1 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Luas Wilayah</th>
                                                <td>:&nbsp` + feature.administrasi.f8 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Jumlah Penduduk</th>
                                                <td>:&nbsp` + feature.administrasi.f6 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Jumlah KK</th>
                                                <td>:&nbsp` + feature.administrasi.f7 + `</td>
                                            </tr>
                                        </table>
                                    </div>
                                </th>
                            </tr>
                            <tr>
                                <th>
                                    <label class="text-semibold" style="margin-left:10px">Informasi Penduduk
                                    </label>

                                    <div>
                                        <table>
                                            <tr>
                                                <th>Jumlah Laki-laki</th>
                                                <td>:&nbsp` + feature.penduduk.f1 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Jumlah Perempuan</th>
                                                <td>:&nbsp` + feature.penduduk.f2 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Belum Kawin</th>
                                                <td>:&nbsp` + feature.penduduk.f3 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Kawin</th>
                                                <td>:&nbsp` + feature.penduduk.f4 + `</td>
                                            </tr>
                                            <tr>
                                                <th>cerai hidup</th>
                                                <td>:&nbsp` + feature.penduduk.f5 + `</td>
                                            </tr>
                                            <tr>
                                                <th>cerai mati</th>
                                                <td>:&nbsp` + feature.penduduk.f6 + `</td>
                                            </tr>
                                            <tr>
                                                <th>wajib KTP</th>
                                                <td>:&nbsp` + feature.penduduk.f7 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Islam</th>
                                                <td>:&nbsp` + feature.penduduk.f8 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Kristen</th>
                                                <td>:&nbsp` + feature.penduduk.f9 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Katolik</th>
                                                <td>:&nbsp` + feature.penduduk.f10 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Hindu</th>
                                                <td>:&nbsp` + feature.penduduk.f11 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Budha</th>
                                                <td>:&nbsp` + feature.penduduk.f12 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Konghucu</th>
                                                <td>:&nbsp` + feature.penduduk.f13 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Kepercayaan Lain</th>
                                                <td>:&nbsp` + feature.penduduk.f14 + `</td>
                                            </tr>
                                        </table>

                                    </div>
                                </th>
                            </tr>
                            <tr>
                                <th>
                                    <label class="text-semibold" style="margin-left:10px">Informasi Pendidikan</label>
                                    <div>
                                        <table>
                                            <tr>
                                                <th>Tidak Sekolah</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f1 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Belum Tamat</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f2 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Tamat SD</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f3 + `</td>
                                            </tr>
                                            <tr>
                                                <th>SLTP</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f4 + `</td>
                                            </tr>
                                            <tr>
                                                <th>SLTA</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f5 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Diploma I</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f6 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Diploma II</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f7 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Diploma IV/Strata I</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f8 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Strata II</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f9 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Strata III</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f10 + `</td>
                                            </tr>

                                        </table>
                                    </div>
                                </th>
                            </tr>
                            <tr>
                                <th>
                                    <label class="text-semibold" style="margin-left:10px">Informasi Pekerjaan</label>
                                    <div>
                                        <table>
                                            <tr>
                                                <th>Tidak Bekerja</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f11 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Aparatur Pemerintah</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f12 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Tenaga Pendidik</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f13 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Wiraswasta</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f14 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Pertanian</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f15 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Tenaga Kesehatan</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f16 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Pensiunan</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f17 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Pegawai</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Tentara</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f19 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Kepolisian</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f20 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Pedagang</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f21 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Petani</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f22 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Peternak</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f23 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Nelayan</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f24 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Karyawan</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f25 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Buruh</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f26 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Pembantu</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f27 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Tukang</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f28 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Pendeta</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f29 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Pastor</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f30 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Ustadz</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f31 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Dosen</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f32 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Guru</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f33 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Pilot</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f34 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Pengacara</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f35 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Notaris</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f36 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Arsitek</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f37 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Akuntan</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f38 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Konsultan</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f39 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Dokter</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f40 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Bidan</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f41 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Perawat</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f42 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Psikiater</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f43 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Sopir</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f44 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Lainnya</th>
                                                <td>:&nbsp` + feature.pekerjaan_pendidikan.f45 + `</td>
                                            </tr>
                                        </table>

                                    </div>
                                </th>
                            </tr>
                        </tbody>
                        </table>`;
                        $("#panel-samping").css("display", "block");
                        $("#button_hide_panel").css("display", "block")
                        $("#thisFooter").css('left', '380px');
                        $("#thisFooter").css('width', '930px');
                        $("#thisFooter").css('display', 'none');
                        $("#button_unhide").css('display', 'block')
                        $("#isi_panel").html(content)
                        $()


                    },
                    mouseover: function(e) {
                        var info_foot = `
                        <div class="col-xs-12">

                            <div class="col-md-5" style="min-width: 300px;">
                                <div class="form-group">
                                    <label class="text-semibold">Informasi</label>
                
                                    <div>
                                        <table>
                                            <tr>
                                                <th>Kode Desa</th>
                                                <td>:&nbsp` + feature.administrasi.f1 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Desa/Kelurahan</th>
                                                <td>:&nbsp` + feature.administrasi.f2 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Kecamatan</th>
                                                <td>:&nbsp` + feature.administrasi.f3 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Kabupaten/Kota</th>
                                                <td>:&nbsp` + feature.administrasi.f4 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Provinsi</th>
                                                <td>:&nbsp` + feature.administrasi.f5 + `</td>
                                            </tr>
                                            <tr>
                                                <th>Luas Wilayah</th>
                                                <td>:&nbsp` + feature.administrasi.f10 + `</td>
                                            </tr>
                                        </table>
                                    </div>
                
                                </div>
                            </div>
                            <div class="col-md-4" style="min-width: 150px;">
                                <div class="form-group" style="top: 25px;">
                                    <table>

                                        <tr>
                                            <th>Jumlah Penduduk</th>
                                            <td>:&nbsp` + feature.administrasi.f6 + `</td>
                                        </tr>
                                        <tr>
                                            <th>Jumlah KK</th>
                                            <td>:&nbsp` + feature.administrasi.f7 + `</td>
                                        </tr>
                                        <tr>
                                            <th>Jumlah Laki-laki</th>
                                            <td>:&nbsp` + feature.penduduk.f1 + `</td>
                                        </tr>
                                        <tr>
                                            <th>Jumlah Perempuan</th>
                                            <td>:&nbsp` + feature.penduduk.f2 + `</td>
                                        </tr>
                                        <tr>
                                        <tr>
                                            <th>Jumlah Puskesmas</th>
                                            <td>:&nbsp` + feature.poi.f1 + `</td>
                                        </tr>
                                        <tr>
                                            <th>Jumlah Sekolah</th>
                                            <td>:&nbsp` + feature.poi.f2 + `</td>
                                        </tr>
                                        <tr>
                                            <th>Jumlah Sarana Ibadah</th>
                                            <td>:&nbsp` + feature.poi.f3 + `</td>
                                        </tr>
                                        <tr>

                                    </table>
                                </div>
                            </div>
                            <div class="col-md-3" style="min-width: 150px;padding-left:50px;bottom:-128px">
                                <i><b>
                                Sumber : DUKCAPIL, 2019
                                </b></i>
                
                            </div>
                        </div>
                `;
                        $('#info-footer').html(info_foot)
                        var layer = e.target;
                        layer.setStyle({
                            weight: 0.5,
                            Color: "#067800",
                            fillColor: "#067800",

                        });
                        if (!L.Browser.ie && !L.Browser.opera) {
                            layer.bringToFront();
                        }

                    },
                    mouseout: function(e) {
                        geo_batas_kel.resetStyle(e.target);
                    }
                });

            }
        });
    };

    map.on('zoomend', function() {
        var zoom = map.getZoom();
        console.log(zoom)

        if (map.hasLayer(geo_batas_kel)) {
            geo_batas_kel.eachLayer(function(layer) {
                if (zoom >= 13 && (!layer.getTooltip())) {

                    layer.bindTooltip(layer.feature.administrasi.f2, {
                        sticky: true,
                        permanent: true,
                        interactive: false,
                        direction: 'center',
                        className: 'label-desa'
                    });
                } else if (zoom < 13 && (layer.getTooltip())) {
                    //console.log('remove tooltip');
                    layer.unbindTooltip();
                }
            });
        }

        if (map.hasLayer(geo_batas_kec)) {
            geo_batas_kec.eachLayer(function(layer) {
                if (zoom >= 11 && (!layer.getTooltip())) {

                    layer.bindTooltip(`KEC. ` + layer.feature.administrasi.f2, {
                        sticky: true,
                        permanent: true,
                        interactive: false,
                        direction: 'center',
                        className: 'label-kec'
                    });
                } else if (zoom < 11 && (layer.getTooltip())) {
                    //console.log('remove tooltip');
                    layer.unbindTooltip();
                }
            });
        }

    });


    var geo_batas_kec = L.geoJson(null, {
        style: function(feature) {
            return {
                color: "#08c96b",
                weight: 0.5,
                opacity: 1,
                fillcolor: "#98ff98",
                fillOpacity: 0.2
            };
        },
        onEachFeature: function(feature, layer) {
            layer.on({
                mouseover: function(e) {
                    var layer = e.target;
                    layer.setStyle({
                        weight: 0.5,
                        Color: "#067800",
                        fillColor: "#067800",

                    });
                    if (!L.Browser.ie && !L.Browser.opera) {
                        layer.bringToFront();
                    }

                },
                mouseout: function(e) {
                    geo_batas_kec.resetStyle(e.target);
                }
            });
        }
    });

    function geo_json_kel(data) {
        geo_batas_kel.addData(data)
    }

    function geo_json_kec(data) {
        geo_batas_kec.addData(data)
    }

    geo_json_kel(result_kel);
    //geo_json_jalan(result_jln)
    geo_json_kec(result_kec);

    function onEachFeature(feature, layer) {
        if (feature.properties && feature.properties.popupContent) {
            layer.bindPopup(feature.properties.popupContent);
        }
    }

    //   var geojsonFeature = {
    //       "type": "Feature",
    //       "properties": {
    //           "name": "Coors Field",
    //           "amenity": "Baseball Stadium",
    //           "popupContent": "This is where the Rockies play!"
    //       },
    //       "geometry": {
    //           "type": "Point",
    //           "coordinates": [104.1881561279297, -4.125826277307029]
    //       }
    //   };

    //L.geoJSON(geojsonFeature, {
    //    onEachFeature: onEachFeature
    //}).addTo(map);

    function batasdesa() {
        var checkBox = document.getElementById("batas_desa");
        if (checkBox.checked == true) {
            geo_batas_kel.addTo(map)
        } else {
            geo_batas_kel.remove()
        }
    }

    function bataskota() {
        var checkBox = document.getElementById("batas_kota");
        if (checkBox.checked == true) {
            geo_batas.addTo(map)
        } else {
            geo_batas.remove()
        }
    }

    function bataskec() {
        var checkBox = document.getElementById("batas_kec");
        if (checkBox.checked == true) {
            geo_batas_kec.addTo(map)
        } else {
            geo_batas_kec.remove()
        }
    }

    function batasall() {
        var checkBox = document.getElementById("batas_all");
        if (checkBox.checked == true) {
            document.getElementById("batas_kec").checked = true;
            document.getElementById("batas_kota").checked = true;
            document.getElementById("batas_desa").checked = true;
            geo_batas_kec.addTo(map)
            geo_batas.addTo(map)
            geo_batas_kel.addTo(map)
        } else {
            document.getElementById("batas_kec").checked = false;
            document.getElementById("batas_kota").checked = false;
            document.getElementById("batas_desa").checked = false;
            geo_batas_kec.remove()
            geo_batas_kel.remove()
            geo_batas.remove()
        }
    }

    var search_desa = batas_desa_desa();

    function geo_json_search(data) {
        search_desa.addData(data)
    }

    $("#search_desa").keyup(function() {
        var search = $(this).val();

        $.ajax({
            url: "{% url 'api:search'%}",
            data: {
                'namadesa': search
            },
            dataType: 'json',
            success: function(response) {

                var len = response['nama_des'].length;
                var data_de = []
                for (var i = 0; i < len; i++) {
                    console.log('fghj')
                    var id = response['nama_des'][i][0];
                    var desa = response['nama_des'][i][1];
                    var kec = response['nama_des'][i][2];

                    var da = `<li value='` + id + `'>` + desa + `,` + kec + `</li>`;
                    data_de.push(da)
                }

                $("#searchResult").html(data_de);


                // binding click event to li
                $("#searchResult li").bind("click", function() {
                    setsearch(this);
                });

            }
        })

    });

    function setsearch(element) {

        var value = $(element).text();
        var id = $(element).val();

        $("#search_desa").val(value);
        $("#searchResult").empty();

        $.ajax({
            url: "{% url 'api:ressearch' %}",
            data: {
                'id_desa_search': id
            },
            dataType: 'json',
            success: function(response) {
                var resultan = response['result'][0]
                geo_json_search(resultan);
                map.setView([resultan['geometry']['coordinates'][0][0][0][1], resultan['geometry']['coordinates'][0][0][0][0]], 14);
                search_desa.addTo(map)
                geo_batas.remove()
            }
        });
    }

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

    function normalse() {
        $("#searchResult").css('display', 'none');
    }

    function resse() {
        $("#searchResult").css('display', 'block');
    }
    // NEW
    var legenda = ['Belukar',
        'Belukar Rawa',
        'Hutan Lahan Kering Primer',
        'Hutan Lahan Kering Sekunder',
        'Hutan Tanaman',
        'Pemukiman',
        'Perkebunan',
        'Pertambangan',
        'Pertanian Lahan Kering',
        'Pertanian Lahan Kering Campur',
        'Savana / Padang rumput',
        'Sawah',
        'Tanah Terbuka',
        'Transmigrasi'
    ];

    var color = ['#002400',
        '#424200',
        '#004200',
        '#009e00',
        '#00db00',
        '#ffff00',
        '#5cff5c',
        '#caa677',
        '#b9894b',
        '#C0C0C0',
        '#ffc65c',
        '#ece0cf',
        '#ff1fff',
        '#c2a500'
    ]

    var geo_tuplah = L.geoJson(null, {
        style: function(feature) {

            for (var i = 0; i < legenda.length; i++) {
                var leg = legenda[i]
                var warna = color[i]
                if (feature.legend == legenda[i]) {
                    return {
                        color: color[i],
                        weight: 0.5,
                        opacity: 2,
                        fillcolor: color[i],
                        fillOpacity: 5
                    };
                }
            }

        },
        onEachFeature: function(feature, layer) {
            layer.on({
                mouseover: function(e) {
                    var layer = e.target;
                    layer.setStyle({
                        weight: 0.5,
                        fillOpacity: 0.5

                    });
                    if (!L.Browser.ie && !L.Browser.opera) {
                        layer.bringToFront();
                    }

                },
                mouseout: function(e) {
                    geo_tuplah.resetStyle(e.target);
                }

            });
        }
    });

    function geo_json_tuplah(data) {
        geo_tuplah.addData(data)
    }

    function geotuplah() {
        var checkBox = document.getElementById("geo_tuplah");
        if (checkBox.checked == true) {


            $.ajax({
                url: "{% url 'api:tuplah'%}",
                dataType: 'json',
                success: function(response) {
                    console.log(response['tuplah'])
                    var len = response['tuplah'].length;
                    var data_de = []
                    for (var i = 0; i < response['tuplah'].length; i++) {
                        geoj = response['tuplah'][i][0];
                        data_de.push(geoj);
                    }
                    geo_json_tuplah(data_de);
                }
            });

            $("#thisFooter").css('display', 'none');
            $("#legenda").css('display', 'block');
            geo_tuplah.addTo(map)
        } else {
            $("#button_unhide").css('display', 'block');
            $("#legenda").css('display', 'none');
            geo_tuplah.remove()
        }
    }

    var geocodeService = L.esri.Geocoding.geocodeService();
    var geocoderNominatim = new L.Control.Geocoder.Nominatim();

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

        onEachFeature: function(feature, layer) {
            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) {
                        //var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) {
                        var content = `
                        <table class="table table-hover tasks-list">
                            <thead style="text-align: center;">
                                <tr>
                                    <th style="padding: 0 0 0 0px;">
                                        <img src="static/img/maps/bing.png" alt="Image" style="width: 100%;max-height: 237px;height:237"> </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>
                                        <label class="text-semibold" style="margin-left:10px">Informasi Umum</label>
                                        <div>
                                            <table>
                                                <tr>
                                                    <th>Name</th>
                                                    <td style="padding-left: 20px;"><input type="text" class="search_desa" id="name_b" value="` + feature.properties.f2 + `" aria-controls="DataTables_Table_0"></td>
                                                </tr>
                                                <tr>
                                                    <th>Information</th>
                                                    <td style="padding-left: 20px;"><input type="text" class="search_desa" id="info_b" value="` + feature.properties.f3 + `" aria-controls="DataTables_Table_0"></td>
                                                </tr>
                                                <tr>
                                                    <th>Kelurahan</th>
                                                    <td style="padding-left: 20px;"><input type="text" class="search_desa" id="desa_b" value="` + feature.administrasi.f1 + `" aria-controls="DataTables_Table_0"></td>
                                                </tr>
                                                <tr>
                                                    <th>Kecamatan</th>
                                                    <td style="padding-left: 20px;"><input type="text" class="search_desa" id="kec_b" value="` + feature.administrasi.f2 + `" aria-controls="DataTables_Table_0"></td>
                                                </tr>
                                                <tr>
                                                    <th>Kab/Kota</th>
                                                    <td style="padding-left: 20px;"><input type="text" class="search_desa" id="kab_b" value="` + feature.administrasi.f3 + `" aria-controls="DataTables_Table_0"></td>
                                                </tr>
                                                <tr>
                                                    <th>Provinsi</th>
                                                    <td style="padding-left: 20px;"><input type="text" class="search_desa" id="pro_b" value="` + feature.administrasi.f4 + `" aria-controls="DataTables_Table_0"></td>
                                                </tr>
                                            </table>
                                        </div>
                                    </th>
                                </tr>
                                <tr>
                                    <th>
                                        <div class="tab-pane" id="right-tab3-feas-upl">
                                            <div id="map-edit" style="width:500px;height: 250px;">
                                        </div>
                                    </th
                                </tr>
                            </tbody>
                        </table>

                        `;

                        $("#isi_panel").html(content)
                        $('#id_poly').val(feature.properties.f1);
                        $('#id_poly_edit').val(feature.properties.f1);
                        $('#name').val(feature.properties.f2);
                        $('#information').val(feature.properties.f3);

                        $('#desa').val(feature.administrasi.f1);
                        $('#kecamatan').val(feature.administrasi.f2);
                        $('#kabupaten').val(feature.administrasi.f3);
                        $('#provinsi').val(feature.administrasi.f4);
                        $('#nomor_rumah').val(feature.administrasi.f5);

                        $('#sumber').val(feature.properties.f4);
                        $('#sumber_create').val(feature.properties.f4);
                        $('#sumber_delete').val(feature.properties.f4);

                        $('#id_poly_delete').val(feature.properties.f1);
                        $("#coordinateZoneedit").val(feature.geometry);

                        $("#panel-samping").css("display", "block");
                        $("#button-ijo").html(`
                        <a class='btn btn-danger' href="#" id="delete_1">Delete</a>
                        <a class='btn btn-warning' href="#" id='edit_1'>Edit</a>
                        `);
                        $("#edit_1").click(function() {
                            $("#modal_edit_1").modal("show")
                            $("#featureModal").modal("hide")
                        });

                        $("#delete_1").click(function() {
                            $("#modal_delete_1").modal("show")
                            $("#featureModal").modal("hide")
                        })
                    }
                });

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

    function geobangunan() {
        var checkBox = document.getElementById("geo_building");
        if (checkBox.checked == true) {
            map.on("movestart", function() {
                geo_bangunan.clearLayers();
            });

            map.on("moveend", function() {
                var wetan = map.getBounds().getEast();
                var kulon = map.getBounds().getWest();
                var lor = map.getBounds().getNorth()
                var kidul = map.getBounds().getSouth();
                var center = map.getBounds().getCenter();
                var zoom = map.getZoom()

                if (zoom > 17) {
                    $.ajax({
                        url: "{% url 'api:building' %}",
                        data: {
                            'wetan': wetan,
                            'kulon': kulon,
                            'lor': lor,
                            'kidul': kidul
                        },
                        dataType: 'json',
                        success: function(data) {
                            console.log(data)
                            let list_poly = [];
                            for (var i = 0; i < data['gen'].length; i++) {
                                geoj = data['gen'][i][0];
                                list_poly.push(geoj);
                            };
                            geo_json_bangunan(list_poly);
                        }
                    });
                }
                geo_bangunan.addTo(map);
            });

        } else {
            geo_bangunan.remove();
        }
    }

    $(document).on("click", "#edit", function() {
        //$(".leaflet-popup-content")[0]
        //document.getElementsByClassName('leaflet-popup-content')[0].style.width = "500px";
        //document.getElementsByClassName('leaflet-popup')[0].style.left = "-271px";

        var map_edit = 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 id_poly = $('#id-poly').val();
        loaderPage(true);
        $.ajax({
            url: "{% url 'api:edit' %}",
            data: {
                'id_poly': id_poly
            },
            dataType: 'json',
            success: function(data) {
                loaderPage(false);
                console.log(data)

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

                var polyly = L.polygon(list_poly_edit).addTo(map_edit)
                polyly.enableEdit();
                $('#buttonsaveedit').click(function() {
                    var hasil = (JSON.stringify(polyly.toGeoJSON()))
                    $("#coordinateZoneedit").val(hasil);
                })
            }
        })
    });


    $(document).on("click", "#buttonsaveedit", function() {
        var id_poly = $('#id-poly').val();
        var polygin = $('#coordinateZoneedit').val();
        console.log(polygin)

        $.ajax({
            url: "{% url 'api:validatedit' %}",
            data: {
                'id_poly': id_poly,
                'polygon': polygin,
                'name_b': $('#name_b').val(),
                'info_b': $('#info_b').val(),
                'desa_b': $('#desa_b').val(),
                'kec_b': $('#kec_b').val(),
                'kab_b': $('#kab_b').val(),
                'pro_b': $('#pro_b').val()
            },
            dataType: 'json',
            type: 'POST',
            success: function(data) {
                alert(data['status'])
            }
        })

    });

    var geo_jalan = L.geoJson(null, {
        style: function(feature) {
            return {
                color: "#808080",
                weight: 5,
                opacity: 2,
                zIndex: 1000
            };
        },

        onEachFeature: function(feature, layer) {
            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) {
                        console.log('cdcd')
                    }
                });

                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: 5,
                        Color: "#067800",
                        fillColor: "#067800",

                    });
                    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);
            layer.bindPopup(popupContent);
        }
    });

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

    function geojalan() {
        var checkBox = document.getElementById("geo_jalan");
        if (checkBox.checked == true) {
            map.on("movestart", function() {
                geo_jalan.clearLayers();
            });

            map.on("moveend", function() {
                var wetan = map.getBounds().getEast();
                var kulon = map.getBounds().getWest();
                var lor = map.getBounds().getNorth()
                var kidul = map.getBounds().getSouth();
                var center = map.getBounds().getCenter();
                var zoom = map.getZoom()

                if (zoom > 16) {
                    $.ajax({
                        url: "{% url 'api:jalan' %}",
                        data: {
                            'wetan': wetan,
                            'kulon': kulon,
                            'lor': lor,
                            'kidul': kidul
                        },
                        dataType: 'json',
                        success: function(data) {
                            console.log(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);
                        }
                    });
                }
                geo_jalan.addTo(map);
            });

        } else {
            geo_jalan.remove();
        }
    }

    var geo_sungai = L.geoJson(null, {
        style: function(feature) {
            return {
                color: "#00FFFF",
                weight: 1,
                opacity: 2,
                zIndex: 1000
            };
        },

        onEachFeature: function(feature, layer) {
            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) {
                        console.log('cdcd')
                    }
                });

                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_sungai.resetStyle(e.target);
                }
            });
        }
    });

    function geo_json_sungai(data) {
        geo_sungai.addData(data)
    }

    function geosungai() {
        var checkBox = document.getElementById("geo_sungai");
        if (checkBox.checked == true) {
            $.ajax({
                url: "{% url 'api:sungai' %}",
                dataType: 'json',
                success: function(data) {
                    console.log(data)
                    let list_poly = [];
                    for (var i = 0; i < data['gen'].length; i++) {
                        geoj = data['gen'][i][0];
                        list_poly.push(geoj);
                    };
                    geo_json_sungai(list_poly);
                }
            });
            geo_sungai.addTo(map);
        } else {
            geo_sungai.remove();
        }
    }

    $(document).on("click", "#delet-pol", function(e) {
        $("#modal_delete_1").modal("show");
    });

    $(document).on("click", "#buttondelete", function(e) {
        var id_poly = $('#id_poly_delete').val();
        $("#modal_delete_1").modal("hide")

        $.ajax({
            url: "{% url 'api:hapus' %}",
            data: {
                'id_poly': id_poly
            },
            dataType: 'json',
            type: 'POST',
            success: function(data) {

                alert("berhasil gaess")
            }
        });
    });

    $(document).on("click", "#btn_edit_kelurahan", function(e) {
        var kode_dagri = $('#kode_dagri').val()
        console.log(kode_dagri)

        $.ajax({
            url: "{% url 'apps:edit_kel' %}",
            data: {
                'kode_dagri': kode_dagri
            },
            dataType: 'json',
            success: function(data) {
                console.log('ceckceck')
            }
        });
    });
</script>