{% load static %} {% for group in user.groups.all %}
<script>
    swal({
        title: 'SUKSES',
        text: 'Anda Login Sebagai ' + "{{group}}",
        type: "success",
        icon: "success",
        confirmButtonColor: "#00BCD4"
    })
    var group = "{{group}}"
</script>

{% if group.name == 'Dinas Pekerjaan Umum dan Penataan Ruang' %}
<style>
    #btn_edit_kelurahan {
        display: block;
    }
    
    #btn_edit_tuplah {
        display: block;
    }
    
    #btn_edit_bangunan {
        display: block;
    }

    #btn_delete_bangunan {
        display: block;
    }
    
    #btn_jalan {
        display: block;
    }
    
    #btn_edit_gl {
        display: block;
    }

    #btn_edit_adm {
        display: block;
    }
    #btn_delete_adm {
        display: block;
    }

    .leaflet-popup{
        display: block;
    }
</style>
{% elif group.name == 'Dinas Kependudukan dan Pencatatan Sipil' %}
<style>
    #btn_edit_kelurahan {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Kesehatan' %}
<style>
    #btn_edit_rs {
        display: block;
    }
    
    #btn_edit_puskes {
        display: block;
    }
    
    #btn_edit_lk {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Ketahanan Pangan' %}
<style>
    #btn_edit_tuplah {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Lingkungan Hidup' %}
<style>
    #btn_edit_tuplah {
        display: block;
    }
    
    #btn_edit_bangunan {
        display: block;
    }

    #btn_delete_bangunan {
        display: block;
    }
    
    #btn_jalan {
        display: block;
    }
    
    #btn_edit_cb {
        display: block;
    }

    .leaflet-popup{
        display: block;
    }
</style>
{% elif group.name == 'Dinas Pariwisata dan Kebudayaan' %}
<style>
    #btn_edit_cb {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Pemberdayaan Masyarakat Desa' %}
<style>
    #btn_edit_kelurahan {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Pemberdayaan Perempuan dan PA' %}
<style>
    #btn_edit_kelurahan {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Kearsipan dan Perpustakaan' %}
<style>
    #btn_edit_adm {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Pendidikan' %}
<style>
    #btn_edit_sp {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Perdagangan dan Perindustrian' %}
<style>
    #btn_edit_spbu {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Perhubungan' %}
<style>
    #btn_edit_st {
        display: block;
    }
    
    #btn_edit_tr {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Perikanan dan Peternakan' %}
<style>
    #btn_edit_tuplah {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Pertanian' %}
<style>
    #btn_edit_tuplah {
        display: block;
    }
</style>
{% elif group.name == 'Dinas Perumahan dan Kawasan Permukiman' %}
<style>
    #btn_edit_tuplah {
        display: block;
    }
    
    #btn_edit_bangunan {
        display: block;
    }

    #btn_delete_bangunan {
        display: block;
    }

    .leaflet-popup{
        display: block;
    }

</style>
{% elif group.name == 'Dinas Sosial' %}
<style>
    #btn_edit_si {
        display: none;
    }
</style>
{% endif %}{% endfor %}
<script>
    function panel_samp() {
        if ($('#panel-samping').css('display') == 'block') {
            // $("#panel-samping").toggleClass("move");
            // $("#button_unhide_panel").toggleClass("move-btn");
            // $("#thisFooter").css('left', '380px');
            // $("#thisFooter").css('max-width', '900px');
            // $('#button_unhide').css('right', '85px');
            // $('#legenda').css('left', '380px');
            // $("#legenda").css('max-width', '900px');
        } else {
            // $("#panel-samping").toggleClass("move");
            // $("#button_unhide_panel").toggleClass("move-btn");
            // $("#thisFooter").css('left', '0px');
            // $("#thisFooter").css('max-width', '900px');
            // $('#button_unhide').css('right', '365px');
            // $('#legenda').css('left', '0px');
        }
    }

    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 + "");


    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) {
                        if (feature.administrasi.f9 == 'NONE') {
                            var path_img = "static/img/image_null.jpg"
                        } else {
                            var path_img = `"static/image/kelurahan/` + feature.administrasi.f9 + `"`
                        }


                        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>
                            <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>
                                <td>
                                    <input class="hidden" id="kode_desa_dagri" value="` + feature.administrasi.f1 + `"></input>
                                    <a href="/editkelurahan?kode_dagri=` + encodeURIComponent(feature.administrasi.f1) + `" class='btn 
                        btn-default btn_edit_kelurahan' style="left: 130px;">Edit</a>
                                </td>
                            </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)
                        panel_samp()



                    },
                    mouseover: function(e) {
                        var info_foot = `
                        <div class="col-xs-12">
                            <div class="row">
                            <div class="col-md-5" style="min-width: 300px;">
                                <div class="form-group">
                                    <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">
                                    <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="" style="min-width: 150px;padding-left:50px;bottom:-128px">
                                <i><b>
                                Sumber : DUKCAPIL, 2019
                                </b></i>
                
                            </div>
                            </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);
                    }
                });

            }
        });
    };






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

        var map_kel = L.map('map-kelurahan', {
            editable: true,
            zoomControl: false,
            drawControl: true
        }).setView([-4.125826277307029, 104.1881561279297], 10);

        mapxxx = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&s=Gal&apistyle=s.t:0|s.e:l|p.v:off', {
            maxZoom: 22,
            minZoom: 4,
        }).addTo(map_kel);

        $("#edit_kelurahan").css("display", "block")
        var id = $("#kode_desa_dagri").val()

        setTimeout(function() {
            map_kel.invalidateSize();
        }, 1000);

        $.ajax({
            url: "{% url 'apps:editkelurahan'%}",
            data: {
                'kode_dagri': id
            },
            dataType: 'json',
            success: function(data) {

                var ket_kel = ['kodekelurahan', 'kelurahan', 'kecamatan', 'kabupaten', 'provinsi', 'jumlahpenduduk', 'jumlahkk', 'luasdesa']

                var ket_penduduk = ['jumlahlakilaki', 'jumlahperempuan', 'belumkawin', 'kawin', 'ceraihidup', 'ceraimati', 'wajibktp', 'islam', 'kristen', 'katolik', 'hindu', 'budha', 'konghucu', 'kepercayaanlain', 'u0', 'u5', 'u10', 'u15', 'u20', 'u25', 'u30', 'u35', 'u40', 'u45', 'u50', 'u55', 'u60', 'u65', 'u70', 'u75']

                var ket_pendidik = ['tidaksekolah', 'belumtamat', 'tamatsd', 'tamatsltp', 'tamatslta', 'diplomai', 'diplomaiii', 'diplomaiv', 'strataii', 'strataiii', 'tidakbekerja', 'aparaturpemerintah', 'tenagapendidik', 'wiraswasta', 'pertanian', 'tenagakesehatan', 'pensiunan', 'pegawai', 'tentara', 'kepolisian', 'dosen', 'guru', 'pilot', 'pedagang', 'petani', 'peternak', 'nelayan', 'karyawan', 'buruh', 'pembantu', 'tukang', 'pendeta', 'pastor', 'ustadz', 'pengacara', 'notaris', 'arsitek', 'akuntan', 'dokter', 'bidan', 'perawat', 'psikiater', 'sopir', 'lainnya']

                var result_kelurahan = data.result_poly.administrasi;
                var result_penduduk = data.result_poly.penduduk;
                var result_pend_pekerja = data.result_poly.pekerjaan_pendidikan;
                var result_poi = data.result_poly.poi;

                for (var i = 0; i < result_kelurahan.length; i++) {
                    $("#" + ket_kel[i] + "").val(result_kelurahan[i])
                }
                for (var i = 0; i < result_penduduk.length; i++) {
                    $("#" + ket_penduduk[i] + "").val(result_penduduk[i])
                }
                for (var i = 0; i < result_pend_pekerja.length; i++) {
                    $("#" + ket_pendidik[i] + "").val(result_pend_pekerja[i])
                }

                var poldit = data.result_poly;

                map_kel.setView([data.avg_lo, data.avg_la], 12);
                //
                let lop_poly_edit = poldit['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 polygon_kel = L.polygon(list_poly_edit).addTo(map_kel)


                polygon_kel.enableEdit();

                var hasil = (JSON.stringify(polygon_kel.toGeoJSON()))
                $("#coordinatekel").val(hasil)
            }
        })
    });

    $('#btnsavevalidasi').click(function() {
        var ketket = ['kodekelurahan', 'kelurahan', 'kecamatan', 'kabupaten', 'provinsi', 'luasdesa', 'jumlahpenduduk', 'jumlahkk', 'jumlahlakilaki', 'jumlahperempuan', 'belumkawin', 'kawin', 'ceraihidup', 'ceraimati', 'wajibktp', 'islam', 'kristen', 'katolik', 'hindu', 'budha', 'konghucu', 'kepercayaanlain', 'u0', 'u5', 'u10', 'u15', 'u20', 'u25', 'u30', 'u35', 'u40', 'u45', 'u50', 'u55', 'u60', 'u65', 'u70', 'u75', 'tidaksekolah', 'belumtamat', 'tamatsd', 'tamatsltp', 'tamatslta', 'diplomai', 'diplomaiii', 'diplomaiv', 'strataii', 'strataiii', 'tidakbekerja', 'aparaturpemerintah', 'tenagapendidik', 'wiraswasta', 'pertanian', 'tenagakesehatan', 'pensiunan', 'pegawai', 'tentara', 'kepolisian', 'dosen', 'guru', 'pilot', 'pedagang', 'petani', 'peternak', 'nelayan', 'karyawan', 'buruh', 'pembantu', 'tukang', 'pendeta', 'pastor', 'ustadz', 'pengacara', 'notaris', 'arsitek', 'akuntan', 'dokter', 'bidan', 'perawat', 'psikiater', 'sopir', 'lainnya', 'coordinatekel']

        for (var i = 0; i < ketket.length; i++) {
            window[ketket[i]] = $('#' + ketket[i]).val()
        }

        var ketek = [kodekelurahan, kelurahan, kecamatan, kabupaten, provinsi, luasdesa, jumlahpenduduk, jumlahkk, jumlahlakilaki, jumlahperempuan, belumkawin, kawin, ceraihidup, ceraimati, wajibktp, islam, kristen, katolik, hindu, budha, konghucu, kepercayaanlain, u0, u5, u10, u15, u20, u25, u30, u35, u40, u45, u50, u55, u60, u65, u70, u75, tidaksekolah, belumtamat, tamatsd, tamatsltp, tamatslta, diplomai, diplomaiii, diplomaiv, strataii, strataiii, tidakbekerja, aparaturpemerintah, tenagapendidik, wiraswasta, pertanian, tenagakesehatan, pensiunan, pegawai, tentara, kepolisian, dosen, guru, pilot, pedagang, petani, peternak, nelayan, karyawan, buruh, pembantu, tukang, pendeta, pastor, ustadz, pengacara, notaris, arsitek, akuntan, dokter, bidan, perawat, psikiater, sopir, lainnya, coordinatekel]

        var ketek_json = {}

        for (var i = 0; i < ketket.length; i++) {
            ketek_json[ketket[i]] = ketek[i];
        }

        var data = new FormData();
        data.append("file", $("input[id^='file']")[0].files[0]);
        data.append("csrfmiddlewaretoken", "{{ csrf_token }}");

        $.each(ketek_json, function(key, value) {
            data.append(key, value);
        })
        data.append('coordinate', hasil)

        $.ajax({
            url: "{% url 'api:kependudukan' %}",
            data: data,
            dataType: 'json',
            type: 'POST',
            processData: false,
            contentType: false,
            mimeType: "multipart/form-data",
            success: function(data) {
                let response = data
                if (response.code == 0) {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "success",
                        icon: "success",
                        confirmButtonColor: "#00BCD4"
                    }).then((isok) => {
                        $("#modal_theme_info").css('display', 'none');
                    })
                } else {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "warning",
                        icon: "error",
                        confirmButtonColor: "#00BCD4"
                    })

                }

                for (var i = 0; i < data['penduduk'].length; i++) {
                    $('#' + ketket[i]).val(data['penduduk'][i])
                }
            }
        });
    });

    $('#savedatakelurahankel').click(function() {
        var data = new FormData();
        data.append("file", $("input[id^='file']")[0].files[0]);
        data.append("csrfmiddlewaretoken", "{{ csrf_token }}");

        var ket_kel = ['kodekelurahan', 'kelurahan', 'kecamatan', 'kabupaten', 'provinsi', 'luasdesa']

        var ket_penduduk = ['jumlahpenduduk', 'jumlahkk', 'jumlahlakilaki', 'jumlahperempuan', 'belumkawin', 'kawin', 'ceraihidup', 'ceraimati', 'wajibktp', 'islam', 'kristen', 'katolik', 'hindu', 'budha', 'konghucu', 'kepercayaanlain', 'u0', 'u5', 'u10', 'u15', 'u20', 'u25', 'u30', 'u35', 'u40', 'u45', 'u50', 'u55', 'u60', 'u65', 'u70', 'u75']

        var ket_pendidik = ['tidaksekolah', 'belumtamat', 'tamatsd', 'tamatsltp', 'tamatslta', 'diplomai', 'diplomaiii', 'diplomaiv', 'strataii', 'strataiii']

        var ket_pekerja = ['tidakbekerja', 'aparaturpemerintah', 'tenagapendidik', 'wiraswasta', 'pertanian', 'tenagakesehatan', 'pensiunan', 'pegawai', 'tentara', 'kepolisian', 'dosen', 'guru', 'pilot', 'pedagang', 'petani', 'peternak', 'nelayan', 'karyawan', 'buruh', 'pembantu', 'tukang', 'pendeta', 'pastor', 'ustadz', 'pengacara', 'notaris', 'arsitek', 'akuntan', 'dokter', 'bidan', 'perawat', 'psikiater', 'sopir', 'lainnya']

        var poi = []

        var data_kel = []
        var data_penduduk = []
        var data_pendidik = []
        var data_pekerjaan = []
        var data_all = []

        for (var i = 0; i < ket_kel.length; i++) {
            data_kel.push(`
            <tr>
                <th>` + ket_kel[i] + `</th>
                <td>` + $('#' + ket_kel[i]).val() + `</td>
            </tr>`)
        }

        for (var i = 0; i < ket_penduduk.length; i++) {
            data_penduduk.push(`
            <tr>
                <th>` + ket_penduduk[i] + `</th>
                <td>` + $('#' + ket_penduduk[i]).val() + `</td>
            </tr>`)
        }

        for (var i = 0; i < ket_pendidik.length; i++) {
            data_pendidik.push(`
            <tr>
                <th>` + ket_pendidik[i] + `</th>
                <td>` + $('#' + ket_pendidik[i]).val() + `</td>
            </tr>`)
        }

        for (var i = 0; i < ket_pekerja.length; i++) {
            data_pekerjaan.push(`
            <tr>
                <th>` + ket_pekerja[i] + `</th>
                <td>` + $('#' + ket_pekerja[i]).val() + `</td>
            </tr>`)
        }

        $("#valid-edit-kel").html(data_kel);
        $("#valid-edit-penduduk").html(data_penduduk);
        $("#valid-edit-pendidik").html(data_pendidik);
        $("#valid-edit-pekerja").html(data_pekerjaan);

    });


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


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


    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++) {

                    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.f2 == legenda[i]) {
                    return {
                        color: color[i],
                        weight: 0.5,
                        opacity: 2,
                        fillcolor: color[i],
                        fillOpacity: 5
                    };
                }
            }

        },
        onEachFeature: function(feature, layer) {
            layer.on({
                click: function(e) {

                    if (feature.legend.f4 == 'NONE') {
                        var path_img = "static/img/image_null.jpg"
                    } else {
                        var path_img = `"static/image/tuplah/` + feature.legend.f4 + `"`
                    }




                    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.legend.f2 + `
                                                </span>
                                            </h1>
                                        </div>
                                    </th>
                                </tr>
                            </div>
                            <div class= "container">
                                <tr>
                                    <th>
                                        <p>
                                            <span>Luas Lahan : ` + feature.legend.f3 + `</span>
                                        </p>
                                        <p class="text-center" style="margin-top: 25px;">
                                            <a href="#" class="btn btn-default" data-toggle="modal" data-target="#modal-edit-tuplah" id="btn_edit_tuplah" data-backdrop="static" data-keyboard="false"><i>Edit Informasi Jalan</i></a>
                                        </p>
                                    </th>
                                </tr>
                            </div>
                        </tbody>
                    </table>`;
                    $("#isi_panel").html(content)

                    $('#idtuplah').val(feature.legend.f1);

                    $("#coordinatetuplah").val(feature.geometry);
                    $("#panel-samping").css("display", "block");
                    $("#button_hide_panel").css("display", "block");
                    panel_samp()
                },
                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);
                }

            });
        }
    });

    var geo_tuplah_edit = L.geoJson(null, {
        style: function(feature) {
            return {
                weight: 0.5,
                opacity: 2,
            };
        }
    });

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

    function geotuplah() {
        var checkBox = document.getElementById("geo_tuplah");
        if (checkBox.checked == true) {
            loaderPage(true);
            $.ajax({
                url: "{% url 'api:tuplah'%}",
                dataType: 'json',
                type: 'GET',
                success: function(response) {
                    loaderPage(false);
                    map.setView([-4.125826277307029, 104.1881561279297], 13);
                    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()
        }
    }



    $(document).on("click", "#btn_edit_tuplah", function() {
        var map_edit_tuplah = L.map('map-edit-tuplah', {
            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_tuplah);

        if (group == "Dinas Pekerjaan Umum dan Penataan Ruang") {
            var id_poly = $('#idtuplah').val();


            $.ajax({
                url: "{% url 'api:edit-tuplah' %}",
                data: {
                    'idtuplah': id_poly
                },
                dataType: 'json',
                success: function(data) {
                    loaderPage(false);
                    let response = data
                    if (response.code == 0) {
                        setTimeout(function() {
                            map_edit_tuplah.invalidateSize();
                        }, 1000);


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

                        let lop_poly_edit = data['tuplah']['geometry']['coordinates'][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 polygon_edit_tuplah = L.polygon(list_poly_edit).addTo(map_edit_tuplah)
                        polygon_edit_tuplah.enableEdit();
                        $('#btnsavetuplah').click(function() {
                            var hasil = (JSON.stringify(polygon_edit_tuplah.toGeoJSON()))
                            $("#coordinatetuplah").val(hasil);
                        })
                    } else {
                        $("#modal-edit-tuplah").css('display', 'none');
                        swal({
                            title: response.info,
                            text: response.data,
                            type: "warning",
                            icon: "error",
                            confirmButtonColor: "#00BCD4"
                        })
                    }
                },
            })
        } else {
            $("#modal-edit-tuplah").css('display', 'none');
            swal({
                title: "Sorry",
                text: group + " Tidak memiliki akses",
                type: "warning",
                icon: "error",
                confirmButtonColor: "#00BCD4"
            })
        }


    });

    $(document).on("click", "#btnsavetuplah", function() {
        var id_poly = $('#idtuplah').val();
        var cord = $("#coordinatetuplah").val();

        var data = new FormData();
        data.append("file", $("input[id^='imgtuplah']")[0].files[0]);
        data.append("csrfmiddlewaretoken", "{{ csrf_token }}");

        data.append('idtuplah', id_poly)
        data.append('cord', cord)

        $.ajax({
            url: "{% url 'api:edit-tuplah-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-edit-tuplah").css('display', 'none');
                    })
                } else {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "warning",
                        icon: "error",
                        confirmButtonColor: "#00BCD4"
                    })

                }
            }
        })

    });

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

                            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 + `"`
                            }
                            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>
                                                        <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>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 " class="btn btn-link " data-dismiss="modal ">Close</button>
                                        <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 = `
                            <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.properties.f3 + `
                                                </span>
                                            </th>
                                        </tr>
                                    </div>
                                    <div class= "container">
                                        <tr style="height: 40px;">
                                            <th>
                                                <span>
                                                    ` + alamat + feature.administrasi.f1 + `, ` + feature.administrasi.f2 + `, ` + feature.administrasi.f3 + `, ` + feature.administrasi.f4 + `
                                                </span>
                                            </th>
                                        </tr>
                                    </div>
                                    <div class= "container">
                                        <tr style="height: 40px;">
                                            <th>
                                                <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>
                                                <p class="text-center" style="margin-top: 25px;">
                                                    <a href="#" class="btn btn-default" data-toggle="modal" data-target="#modal_bangunan_edit" id="btn_edit_bangunan" data-backdrop="static" data-keyboard="false"><i>Edit Informasi Bangunan</i></a>
                                                    <a href="#" id='btn_delete_bangunan' class='btn 
                                                        btn-default btn_edit_bangunan' data-toggle="modal" data-target="#modal_bangunan_delete" data-backdrop="static" data-keyboard="false"><i>Delete Bangunan</i></a>
                                                </p>
                                            </th>
                                        </tr>
                                    </div>
                                </tbody>
                            </table>`;
                            $("#isi_panel").html(content);
                            $("#modal_bangunan_edit").html(content_edit);
                            $("#modal_bangunan_delete").html(content_delete);
                        });
                        // $('#idbangunan').val(feature.properties.f1);
                        // $('#namebangunan').val(feature.properties.f2);
                        // $('#infobangunan').val(feature.properties.f3);

                        // $('#nmkelurahan').val(feature.administrasi.f1);
                        // $('#nmkecamatan').val(feature.administrasi.f2);
                        // $('#nmkabkota').val(feature.administrasi.f3);
                        // $('#nmprovinsi').val(feature.administrasi.f4);

                        // $('#luasbangunan').val(feature.administrasi.f6);
                        // $('#luastanah').val(feature.administrasi.f7);
                        // $('#tinggibangunan').val(feature.administrasi.f8);
                        // $('#pemilik').val(feature.administrasi.f10);
                        // $('#gambar').val(feature.administrasi.f9);

                        // $("#coordinatebangunan").val(feature.geometry);
                        $("#panel-samping").css("display", "block");
                        $("#button_hide_panel").css("display", "block");
                        
                        // $('#idbangunanhps').val(feature.properties.f1);
                        // $('#namebangunanhps').val(feature.properties.f2);
                        // $('#infobangunanhps').val(feature.properties.f3);

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


    var checkBox_building = document.getElementById("geo_building");
    var checkBox_2d = document.getElementById("2d-maps");

    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 (checkBox_building.checked == true || checkBox_2d.checked == true) {

            if (zoom > 17) {
                if (map.hasLayer(geo_bangunan)) {
                    geo_bangunan.clearLayers()
                    geo_bangunan.remove()
                }
                $.ajax({
                    url: "{% url 'api:building' %}",
                    data: {
                        'wetan': wetan,
                        'kulon': kulon,
                        'lor': lor,
                        'kidul': kidul
                    },
                    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_bangunan(list_poly);
                    }
                });
            }

            geo_bangunan.addTo(map)
        } else {
            geo_bangunan.clearLayers();
            geo_bangunan.remove()
        }
    });

    $(document).on("click", "#btn_edit_bangunan", function() {
        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 id_poly = $('#idbangunan').val();
        loaderPage(true);

        $.ajax({
            url: "{% 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);
                };

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

    $(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())
        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('luasbangunan', $('#luasbangunan').val())
        data.append('luastanah', $('#luastanah').val())
        data.append('tinggibangunan', $('#tinggibangunan').val())
        data.append('pemilik', $('#pemilik').val())

        $.ajax({
            url: "{% 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() {
        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: "{% 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: "{% 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"
                    })
                }
            }
        })

    });

    var geo_jalan = L.geoJson(null, {
        style: function(feature) {
            var zoom = map.getZoom()
            console.log(zoom)

            if (zoom < 18) {
                return {
                    color: "#808080",
                    weight: 8,
                    opacity: 2,
                    zIndex: 1000
                };
            } else if (zoom > 17 && zoom < 19) {
                return {
                    color: "#808080",
                    weight: 10,
                    opacity: 2,
                    zIndex: 1000
                };
            } else if (zoom > 18 && zoom < 20) {
                return {
                    color: "#808080",
                    weight: 20,
                    opacity: 2,
                    zIndex: 1000
                };
            } else if (zoom > 19 && zoom < 21) {
                return {
                    color: "#808080",
                    weight: 30,
                    opacity: 2,
                    zIndex: 1000
                };
            } else if (zoom > 20 && zoom < 22) {
                return {
                    color: "#808080",
                    weight: 50,
                    opacity: 2,
                    zIndex: 1000
                };
            } else if (zoom > 21 && zoom < 23) {

                return {
                    color: "#808080",
                    weight: 60,
                    opacity: 2,
                    zIndex: 1000
                };
            }
        },

        onEachFeature: function(feature, layer) {
            if (feature.properties) {
                layer.on({
                    click: function(e) {
                        var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) {
                            if (feature.properties.f6 == 'NONE') {
                                var path_img = "static/img/image_null.jpg"
                            } else {
                                var path_img = `"static/image/jalan/` + feature.properties.f6 + `"`
                            }

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

                            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: 237px;height:237"> 
                                        </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;">
                                                            ` + nmjalan + `
                                                        </span>
                                                    </h1>
                                                </div>
                                            </th>
                                        </tr>
                                    </div>
                                    <div class= "container">
                                        <tr style="height: 40px;">
                                            <th>
                                                <p>
                                                    <span>Panjang Jalan : ` + feature.properties.f3 + ` m</span>
                                                </p>
                                                <p>
                                                    <span>Panjang Jalan : ` + feature.properties.f3 + ` m</span>
                                                </p>
                                                <p>
                                                    <span>Lebar Jalan : ` + feature.properties.f4 + ` m</span>
                                                </p>
                                                <p>
                                                    <span>Tipe Jalan : ` + feature.properties.f5 + `</span>
                                                </p>
                                                <p class="text-center" style="margin-top: 25px;">
                                                    <a href="#" class="btn btn-default" data-toggle="modal" data-target="#modal-jalan" id="btn_jalan" data-backdrop="static" data-keyboard="false"><i>Edit Informasi Jalan</i></a>
                                                </p>
                                            </th>
                                            
                                        </tr>
                                    </div>
                                    <div class="container">
                                        <tr style="height: 40px;">
                                            <th id="history_panel">
                                                ` + history + `
                                            </th>
                                        </tr>
                                    </div>
                                </tbody>
                            </table>`;
                            $("#isi_panel").html(content);
                            $('#namajalan').val(nmjalan);
                        });

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


                        $("#coordinatejalan").val(feature.geometry);
                        $("#panel-samping").css("display", "block");
                        $("#button_hide_panel").css("display", "block");
                        panel_samp()
                    }
                });

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

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

            map.on("moveend", function(e) {
                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 && checkBox.checked == true) {
                    $.ajax({
                        url: "{% url 'api:jalan' %}",
                        data: {
                            'wetan': wetan,
                            'kulon': kulon,
                            'lor': lor,
                            'kidul': kidul
                        },
                        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);
                        }
                    });
                }
                geo_jalan.addTo(map);
            });

        } else {
            geo_jalan.clearLayers();
            geo_jalan.remove();
        }
    }

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

        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 id_poly = $('#idjalan').val();

        $.ajax({
            url: "{% 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);
                };


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

    $(document).on("click", "#btnsavejalan", function() {
        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', $("#namajalan").val())
        data.append('panjangjalan', $("#panjangjalan").val())
        data.append('lebarjalan', $("#lebarjalan").val())
        data.append('tipejalan', $("#tipejalan").val())
        data.append('cord', $("#coordinatejalan").val())

        $.ajax({
            url: "{% 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"
                    }).then((isok) => {
                        $("#modal-jalan").css('display', 'none');
                    })
                } else {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "warning",
                        icon: "error",
                        confirmButtonColor: "#00BCD4"
                    })
                }
            }
        })
    });

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

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


    //
    //    map_cesium.camera.moveEnd.addEventListener(function() {
    //        var cartographic = new Cesium.Cartographic();
    //        var windowPosition = new Cesium.Cartesian2(map_cesium.container.clientWidth / 2, map_cesium.container.clientHeight / 2);
    //        var pickRay = map_cesium.scene.camera.getPickRay(windowPosition);
    //        var pickPosition = map_cesium.scene.globe.pick(pickRay, map_cesium.scene);
    //        var pickPositionCartographic = map_cesium.scene.globe.ellipsoid.cartesianToCartographic(pickPosition);
    //        var longitudee = pickPositionCartographic.longitude * (180 / Math.PI);
    //        var lattitudee = pickPositionCartographic.latitude * (180 / Math.PI)
    //        var tinggi = (cartographic.height * 0.001).toFixed(1);
    //        console.log(lattitudee)
    //        console.log(longitudee)

    //$.ajax({
    //    url: "{% url 'api:3d-maps' %}",
    //    data: {
    //        'latt': lattitudee,
    //        'loog': longitudee
    //    },
    //    dataType: 'json',
    //    type: 'POST',
    //    success: function(data) {
    //        alert('fgggg')
    //
    //    }
    //});





    // });


    //    if (checkBox_3d.checked == true && checkBox_2d.checked == false) {
    //
    //        $("#map").css("display", "none");
    //        $("#map-cesium").css("display", "block");
    //    } else if (checkBox_3d.checked == false && checkBox_2d.checked == true) {
    //        $("#map").css("display", "block");
    //        $("#map-cesium").css("display", "none");
    //
    //    }


    // function map3d() {
    //     var checkBox_3d = document.getElementById("3d-maps");
    //     if (checkBox_3d.checked == true) {
    //         $("#map").css('display', 'none');
    //         $("#map-cesium").css('display', 'block');

    //         Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhOTc0NDkxMi02N2NkLTQwYjMtOTE1Yi1iMGNkZDU0Zjg3MGMiLCJpZCI6NDQ1ODgsImlhdCI6MTYxNDE0NjM5NH0.sRHzNNa7uV_huqGxERySWlL8J5UVx1VwU-pRwNd0GJk';

    //         var map_cesium = new Cesium.Viewer('map-cesium');

    //         map_cesium.camera.flyTo({
    //             destination: Cesium.Cartesian3.fromDegrees(104.171696, -4.120217, 10000)
    //         });
    //         map_cesium.camera.moveEnd.addEventListener(function() {
    //             var windowPosition = new Cesium.Cartesian2(map_cesium.container.clientWidth / 2, map_cesium.container.clientHeight / 2);
    //             var pickRay = map_cesium.scene.camera.getPickRay(windowPosition);
    //             var pickPosition = map_cesium.scene.globe.pick(pickRay, map_cesium.scene);
    //             var pickPositionCartographic = map_cesium.scene.globe.ellipsoid.cartesianToCartographic(pickPosition);
    //             var longitudee = pickPositionCartographic.longitude * (180 / Math.PI);
    //             var lattitudee = pickPositionCartographic.latitude * (180 / Math.PI)
    //             console.log(lattitudee)
    //             console.log(longitudee)

    //             $.ajax({
    //                 url: "{% url 'api:3d-maps' %}",
    //                 data: {
    //                     'latt': lattitudee,
    //                     'loog': longitudee
    //                 },
    //                 dataType: 'json',
    //                 success: function(data) {
    //                     for (var i = 0; i < data["polygon_o"].length; i++) {
    //                         polygon_oo = data["polygon_o"][i][0].replace(/&#x27;/g, '');
    //                         poll = JSON.parse("[" + polygon_oo + "]");

    //                         var poly_osm = map_cesium.entities.add({
    //                             polygon: {
    //                                 hierarchy: Cesium.Cartesian3.fromDegreesArray(
    //                                     poll
    //                                 ),
    //                                 height: 0,
    //                                 material: Cesium.Color.FLORALWHITE.withAlpha(0.7),
    //                                 outline: true,
    //                                 outlineColor: Cesium.Color.GREEN,
    //                             },
    //                             name: data["info_polygon"][i]
    //                         });
    //                         poly_osm.polygon.extrudedHeight = data["tinggi_pol"][i];
    //                         // poly_osm.polygon.extrudedHeight = 10;
    //                         // console.log(data["tinggi_pol"])
    //                     };
    //                 }
    //             });
    //         });
    //         map_cesium.selectedEntityChanged.addEventListener(function(selectedEntity) {
    //             if (Cesium.defined(selectedEntity)) {
    //                 if (Cesium.defined(selectedEntity.name)) {
    //                     var id_poly = selectedEntity.name

    //                     $.ajax({
    //                         url: "{% url 'api:edit' %}",
    //                         data: {
    //                             'id_poly': id_poly
    //                         },
    //                         dataType: 'json',
    //                         success: function(data) {
    //                             if (data['administrasi']['f9'] == 'NONE') {
    //                                 var path_img = "static/img/image_null.jpg"
    //                             } else {
    //                                 var path_img = `"static/image/bangunan/` + data['administrasi']['f9'] + `"`
    //                             }
    //                             content = `<table class="table table-hover 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;">
    //                                                             ` + data['properties']['f2'] + `
    //                                                         </span>
    //                                                     </h1>
    //                                                 </div>
    //                                             </th>
    //                                         </tr>
    //                                     </div>
    //                                     <div class= "container">
    //                                         <tr style="height: 30px;">
    //                                             <th>
    //                                                 <span>
    //                                                     ` + data['properties']['f3'] + `
    //                                                 </span>
    //                                             </th>
    //                                         </tr>
    //                                     </div>
    //                                     <div class= "container">
    //                                         <tr style="height: 40px;">
    //                                             <th>
    //                                                 <span>
    //                                                     ` + data['administrasi']['f1'] + `, ` + data['administrasi']['f2'] + `, ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f4'] + `
    //                                                 </span>
    //                                             </th>
    //                                         </tr>
    //                                     </div>
    //                                     <div class= "container">
    //                                         <tr style="height: 40px;">
    //                                             <th>
    //                                                 <p>
    //                                                     <span>Luas Bangunan : ` + data['administrasi']['f6'] + `</span>
    //                                                 </p>
    //                                                 <p>
    //                                                     <span>Luas Tanah : ` + data['administrasi']['f7'] + `</span>
    //                                                 </p>
    //                                                 <p>
    //                                                     <span>Tinggi Bangunan : ` + data['administrasi']['f8'] + `</span>
    //                                                 </p>
    //                                                 <p>
    //                                                     <span>Pemilik : ` + data['administrasi']['f10'] + `</span>
    //                                                 </p>
    //                                             </th>
    //                                         </tr>
    //                                     </div>
    //                                 </tbody>
    //                             </table>`;
    //                             $("#isi_panel").html(content)
    //                             $("#panel-samping").css("display", "block");
    //                             $("#button_hide_panel").css("display", "block");


    //                         }
    //                     })
    //                     console.log('Selected ' + selectedEntity.name);
    //                 } else {
    //                     console.log('Unknown entity selected.');
    //                 }
    //             } else {
    //                 console.log('Deselected.');
    //             }
    //         });

    //     } else {
    //         //map_cesium.entities.removeAll();
    //         //map_cesium.destroy();
    //         setTimeout(function() {
    //             map.invalidateSize();
    //         }, 1000);
    //         $("#map").css('display', 'block');
    //         $("#map-cesium").css('display', 'none');
    //     }
    // }
</script>
<script type="text/javascript" src="{% static 'js/plugins/tables/datatables/datatables.min.js' %}"></script>
<script>
    function destroyfade() {
        $(".modal-backdrop").css("display", "none")
        $(".modal-backdrop").removeClass('show');
        $("body").css('padding-right', '0px !important')
    }

    function destroyWraper() {
        $("#input_perbaikan").css("display", "none");
        $("#edit_kelurahan").css("display", "none");
    }
    var map_input = L.map('map-insert', {
        editable: true,
        zoomControl: false,
        drawControl: true
    }).setView([-4.125826277307029, 104.1881561279297], 10);

    maps = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&s=Gal&apistyle=s.t:0|s.e:l|p.v:off', {
        maxZoom: 22,
        minZoom: 4,
    }).addTo(map_input);

    var editableLayers = new L.FeatureGroup();
    map_input.addLayer(editableLayers);

    var options = {
        position: 'topleft',
        draw: {
            polyline: {
                shapeOptions: {
                    color: 'red',
                    weight: 10
                }
            },
            // disable toolbar item by setting it to false
            polyline: true,
        },
        edit: {
            featureGroup: editableLayers, //REQUIRED!!
            remove: true
        },
        color: 'red'
    };

    var drawControl = new L.Control.Draw(options);
    map_input.addControl(drawControl);

    map_input.on('draw:created', function(e) {
        var type = e.layerType,
            layer = e.layer;
        layer.options.color = 'yellow';
        layer.options.weight = 10;
        layer.options.opacity = 1;
        var koordina = ""
        if (type === 'polyline') {


            // Calculating the distance of the polyline
            var tempLatLng = null;
            var totalDistance = 0.00000;
            $.each(e.layer._latlngs, function(i, latlng) {
                if (tempLatLng == null) {
                    tempLatLng = latlng;
                    return;
                }

                totalDistance += tempLatLng.distanceTo(latlng);
                tempLatLng = latlng;
            });
            e.layer.bindPopup((totalDistance).toFixed(2) + ' meter');
            e.layer.openPopup();

            $("#panjangjalanperbaikan").val((totalDistance).toFixed(2) + ' meter');
        }

        $("#poly_create_input").val(JSON.stringify(koordina));

        editableLayers.addLayer(layer);
    });

    function getjalanper(id) {
        $.ajax({
            url: "{% url 'apps:get-jalan-perbaikan' %}",
            data: {
                'id': id
            },
            dataType: 'json',
            success: function(data) {
                map.setView([data[0]['geometry']['coordinates'][0][0][1], data[0]['geometry']['coordinates'][0][0][0]], 18)

                var geo_jalan_perbaikan = L.geoJson(data[0], {
                    style: function(feature) {
                        return {
                            color: "#FAFA00",
                            weight: 10,
                            opacity: 2,
                            zIndex: 1999
                        };
                    }
                }).addTo(map);

            }
        });
    };

    function getdetailper(id) {
        $.ajax({
            url: "{% url 'apps:get-detail-perbaikan' %}",
            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].pjg_jln_reno + `</td>
                        <td>` + data[i].lbr_jln_reno + `</td>
                        <td><a onclick="loadmapruas('` + data[i].id + `','` + data[i].id_object + `')" id="loaddetailcoord" data-toggle="modal" data-target="#modal_detail_ruas">View</a></td>
                        <td><a href="media/proposal/` + data[i].proposal + `" id="downloadproposal">View</a></td>
                        <td><a href="media/bukti_penyelesaian/` + data[i].bukti_selesai + `" onclick="viewBukti()" id="view-bukti">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>panjang jalan yang di perbaiki</th>
                            <th>Lebar Jalan yang di Perbaiki</th>
                            <th>Ruas yang di perbaiki</th>
                            <th>Proposal</th>
                            <th>Bukti Penyelesaian</th>
                        </tr>
                    </thead>
                    <tbody>
                        ` + isi_modal_detail + `
                    </tbody>
                </table>`)

            }
        });
    };


    var geo_jalan_input = L.geoJson(null, {
        style: function(feature) {
            return {
                color: "#06FF08",
                weight: 8,
                opacity: 2,
                zIndex: 1000
            };
        }
    }).addTo(map_input);


    $(document).on("click", "#btn_perbaikan_jalan", function() {
        geo_jalan_input.clearLayers(geo_jalan_input)
        $("#input_perbaikan").css("display", "block");
        var id_jalan = $("#idjalan").val();

        editableLayers.clearLayers();

        setTimeout(function() {
            map_input.invalidateSize();
        }, 1000);

        $.ajax({
            url: "{% url 'apps:input-perbaikan' %}",
            data: {
                'id_jalan': id_jalan
            },
            dataType: 'json',
            success: function(data) {
                $("#namajalan").val(data[0]);
                $("#typejalan").val(data[1]);
                $("#panjangjalanall").val(data[2]);
                $("#id_jalan_perbaikan").val(data[4]);
                $("#type_id").val(data[5])


                var latlngs = data[3];
                map_input.setView([latlngs['geometry']['coordinates'][0][0][1], latlngs['geometry']['coordinates'][0][0][0]], 17)

                geo_jalan_input.addData(data[3]);

            }
        })
    });

    $("#save-perbaikan").click(function() {

        var hasil = JSON.stringify(editableLayers.toGeoJSON());
        var id_jalan = $("#id_jalan_perbaikan").val();
        var type_id = $("#type_id").val();
        var name = $("#namajalan").val();
        var type = $("#typejalan").val();
        var tgl_perbaikan = $("#tglmulaiperbaikan").val();
        var tgl_selesai = $("#tglselesaiperbaikan").val();
        var tgl_disetujui = $("#tgldisetujui").val();
        var anggaran = $("#anggaran").val();
        var proposal = $("#proposal").val();
        var bukti_selesai = $("#buktiselesai").val();
        var pj = $("#pihakpengesahan").val();
        var pj_lapangan = $("#pjlapangan").val();
        var kontraktor = $("#kontraktor").val();
        var pjg_perbaikan = $("#panjangjalanperbaikan").val();
        var lbr_perbaikan = $("#lebarjalanperbaikan").val();
        var jenis_perbaikan = $("#jenisperbaikan").val();
        var luas = $("#luas").val();
        var kelurahan = $("#kelurahan").val();
        var kecamatan = $("#kecamatan").val();

        var data_umum = [{
            'coord': hasil
        }, {
            'object_id': id_jalan
        }, {
            'type_id': type_id
        }, {
            'name': name
        }, {
            'type': type
        }, {
            'tgl_selesai': tgl_selesai
        }, {
            'tgl_perbaikan': tgl_perbaikan
        }, {
            'tgl_disetujui': tgl_disetujui
        }, {
            'anggaran': anggaran
        }, {
            'pj': pj
        }, {
            'pj_lapangan': pj_lapangan
        }, {
            'kontraktor': kontraktor
        }, {
            'pjg_perbaikan': pjg_perbaikan
        }, {
            'lbr_perbaikan': lbr_perbaikan
        }, {
            'jenis_perbaikan': jenis_perbaikan
        }, {
            'luas': luas
        }, {
            'kelurahan': kelurahan
        }, {
            'kecamatan': kecamatan
        }]

        data = new FormData()
        data.append("proposal", $("input[id^='proposal']")[0].files[0]);
        data.append("bukti_selesai", $("input[id^='buktiselesai']")[0].files[0]);
        console.log(data)
        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: "{% url 'apps:save-perbaikan' %}",
            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").css("display", "none");
                        $("#info-jalan").css("display", "block");
                        $("#info-pendidikan").css("display", "none");
                    })
                } else {
                    swal({
                        title: response.info,
                        text: response.data,
                        type: "warning",
                        icon: "error",
                        confirmButtonColor: "#00BCD4"
                    })

                }
            }
        })
    });

    $('.datatable-show-all').DataTable({
        autoWidth: false,
        columnDefs: [{
                orderable: false,
                width: '20px',
                targets: [0],

            },
            // {
            //     width: '100px',
            //     targets: [ 4 ]
            // },
            {
                orderable: false,
                width: '20px',
                targets: [6],

            }, {
                orderable: false,
                width: '20px',
                targets: [7],

            },
        ],
        dom: '<"float-left"B>frtip',
        buttons: [{
            text: 'Tambah User',
            action: function(e, dt, node, config) {
                $("#modalAddButton").click()
                $("#inUsername").attr("disabled", false);
                $("#inUsername").val(null);
                $("#inNameF").val(null);
                $("#inNameL").val(null);
                $("#inEmail").val(null);
                $("#iduser").val(null);
                $(".modstit").html("Tambah User")
                loadGroups(null)
            }
        }],
        language: {
            search: '<span>Filter:</span> _INPUT_',
            searchPlaceholder: 'Type to filter...',
            lengthMenu: '<span>Show:</span> _MENU_',
            paginate: {
                'first': 'First',
                'last': 'Last',
                'next': '&rarr;',
                'previous': '&larr;'
            }
        },
        drawCallback: function() {
            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
        },
        preDrawCallback: function() {
            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
        }

    });


    $('.datatable-groups').DataTable({
        autoWidth: false,
        columnDefs: [{
            orderable: false,
            width: '100px',
            targets: [2]
        }, {
            orderable: false,
            width: '100px',
            targets: [0]
        }],
        dom: '<"float-left"B>frtip',
        buttons: [{
            text: 'Tambah Group',
            action: function(e, dt, node, config) {
                $("#modalAddButtong").click();
                $("#idgroup").val(null);
                $(".modstitg").html("Tambah Group")
                $("#inGroupName").val(null)
                $("#container_sparent").css("display", "block")
                loadGroups(null)
            }
        }],
        language: {
            search: '<span>Filter:</span> _INPUT_',
            searchPlaceholder: 'Type to filter...',
            lengthMenu: '<span>Show:</span> _MENU_',
            paginate: {
                'first': 'First',
                'last': 'Last',
                'next': '&rarr;',
                'previous': '&larr;'
            }
        },
        drawCallback: function() {
            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
        },
        preDrawCallback: function() {
            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
        }

    });

    $("#modalAddButton").click(function() {
        $("body").css("padding-right", "0px !important")
    })

    $("#saveuser").on("click", function() {
        addUser()
    })


    function loadjlbyid(id) {
        var isObject = {};
        isObject.id = id;
        $("#iduser").val(id)

        $.ajax({
            url: "{% url 'apps:loadDetail' %}",
            data: isObject,
            dataType: 'json',
            type: 'post',
            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].pjg_jln_reno + `</td>
                        <td>` + data[i].lbr_jln_reno + `</td>
                        <td><a onclick="loadmapruas('` + data[i].id + `','` + data[i].id_object + `')" id="loaddetailcoord" data-toggle="modal" data-target="#modal_detail_ruas">View</a></td>
                        <td><a href="media/proposal/` + data[i].proposal + `" id="downloadproposal">View</a></td>
                        <td><a href="media/bukti_penyelesaian/` + data[i].bukti_selesai + `" onclick="viewBukti()" id="view-bukti">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>panjang jalan yang di perbaiki</th>
                            <th>Lebar Jalan yang di Perbaiki</th>
                            <th>Ruas yang di perbaiki</th>
                            <th>Proposal</th>
                            <th>Bukti Penyelesaian</th>
                        </tr>
                    </thead>
                    <tbody>
                        ` + isi_modal_detail + `
                    </tbody>
                </table>`)

            }
        });
    }


    function destroylayer() {
        map_detail_by_id
    }

    $(".leaflet-draw-draw-polyline").html('<span class="fa fa-expand"></span>')
    $(".leaflet-draw-actions-top").html(`<li class=""><a class="btn btn-primary" href="#" title="Finish drawing">Finish</a></li><li class=""><a class="" href="#" title="Delete last point drawn">Delete last point</a></li><li class=""><a class="" href="#" title="Cancel drawing">Cancel</a></li>`);

    loaderPage(false);

    function loaderPage(stat) {
        if (stat == true) {
            $('.page_loader').show();
        } else {
            $('.page_loader').hide();
            $(".panel-flat").css("display", "block")
        }
    };

    function cetakExcel() {
        var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
        var textRange;
        var j = 0;
        tab = document.getElementById('isi_detail'); // id of table

        for (j = 0; j < tab.rows.length; j++) {
            tab_text = tab_text + tab.rows[j].innerHTML + "</tr>";
            //tab_text=tab_text+"</tr>";
        }

        tab_text = tab_text + "</table>";
        tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, ""); //remove if u want links in your table
        tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table
        tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params

        var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");

        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
        {
            txtArea1.document.open("txt/html", "replace");
            txtArea1.document.write(tab_text);
            txtArea1.document.close();
            txtArea1.focus();
            sa = txtArea1.document.execCommand("SaveAs", true, "Say Thanks to Sumit.xls");
        } else //other browser not tested on IE 11
            sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));

        return (sa);
    }




    var $content, $modal, $apnData, $modalCon;

    $content = $(".min");

    $(".mdlFire").click(function(e) {

        e.preventDefault();

        var $id = $(this).attr("data-target");
    });

    $(".modalMinimize").on("click", function() {
        $modalCon = $(this).closest(".mymodal").attr("id");
        $apnData = $(this).closest(".mymodal");
        $modal = "#" + $modalCon;
        $(".modal-backdrop").addClass("display-none");
        $($modal).toggleClass("min");

        if ($($modal).hasClass("min")) {
            $(".minmaxCon").append($apnData);
            $(this).find("i").toggleClass('fa-minus').toggleClass('fa-clone');
        } else {
            $(".container").append($apnData);
            $(this).find("i").toggleClass('fa-clone').toggleClass('fa-minus');
        };
    });

    $("button[data-dismiss='modal']").click(function() {
        $(this).closest(".mymodal").removeClass("min");
        $(".container").removeClass($apnData);
        $(this).next('.modalMinimize').find("i").removeClass('fa fa-clone').addClass('fa fa-minus');
    });
</script>