//notif overlay
function cek_overlay() {
    var jml_ceklis = 0
    var check_tuplah = document.getElementById("geo_tuplah");
    var check_rumah = document.getElementById("geo_building");
    var check_jalan = document.getElementById("geo_jalan");
    var check_kota = document.getElementById("batas_kota");
    var check_kec = document.getElementById("batas_kec");
    var check_desa = document.getElementById("batas_desa");

    if (check_tuplah.checked == true) {
        jml_ceklis = jml_ceklis + 1
    }
    if (check_rumah.checked == true) {
        jml_ceklis = jml_ceklis + 1
    }
    if (check_jalan.checked == true) {
        jml_ceklis = jml_ceklis + 1
    }
    if (check_kota.checked == true) {
        jml_ceklis = jml_ceklis + 1
    }
    if (check_kec.checked == true) {
        jml_ceklis = jml_ceklis + 1
    }
    if (check_desa.checked == true) {
        jml_ceklis = jml_ceklis + 1
    }

    if (jml_ceklis != 0) {
        $(".jumlah-ceklis").html(`<div style="position: absolute;right: -5px;top: -5px;background: 
        #90CAFF;width: 20px;height: 20px;text-align: center;border-radius: 10px;color:#FFFFFF;"><b>` + jml_ceklis + `</b></div>`)

        $(".overlay-cek").css("background", "#1E2233")
        $(".overlay-cek").css("box-shadow", "0px 4px 47px rgb(175 141 246 / 86%)")

    } else {
        $(".jumlah-ceklis").html(``)
        $(".overlay-cek").css("background", "#FFFFFF")
        $(".overlay-cek").css("box-shadow", "0")
    }
}

cek_overlay()
    //tes
function panel_samp() {
    $("#panel-samping").addClass("move");
    $("#button_unhide_panel").addClass("move-btn");

}

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) {
                    var x = window.matchMedia("(max-width: 700px)")
                    if (x.matches) { // If media query matches
                        swal({
                            title: "Sorry",
                            text: "Untuk di mobile tampilan detail kelurahan tidak mendukung, Silahkan akses menggunakan laptop atau PC",
                            type: "warning",
                            icon: "error",
                            confirmButtonColor: "#00BCD4"
                        })

                        setTimeout(function() {

                        }, 500);
                    } else {
                        $('#modal_detail_kelurahan').modal('show');

                        if (feature.administrasi.f9 == 'NONE') {
                            var path_img = "static/img/image_null.png"
                        } else {
                            var path_img = `"static/image/kelurahan/` + feature.administrasi.f9 + `"`
                        }

                        $(".gambar_kelurahan").html(`<img src=` + path_img + ` alt="" style="width:360px;height:290px;border-top-left-radius: 10px;">`)

                        $(".nama_kelurahan").html(feature.administrasi.f2 + ` , ` + feature.administrasi.f3 + `, ` + feature.administrasi.f4)

                        $(".kode_kelurahan").html(feature.administrasi.f1)
                        $(".jumlah_penduduk_kelurahan").html(feature.administrasi.f6)
                        $(".luas_wilayah_kelurahan").html(feature.administrasi.f10.toFixed(3) + ' m2')
                        $(".jumlah_kk_kelurahan").html(feature.administrasi.f7)
                        $(".tombol-edit").html(`<a href="/editkelurahan?kode_dagri=` + encodeURIComponent(feature.administrasi.f1) + `" class='btn'>Edit</a>`)


                        var nama_data_penduduk = ['pria', 'wanita', 'belum_kawin', 'kawin', 'cerai_hidup', 'cerai_mati', 'wajib_ktp'];
                        var dataset_penduduk = [feature.penduduk.f1, feature.penduduk.f2, feature.penduduk.f3, feature.penduduk.f4, feature.penduduk.f5, feature.penduduk.f6, feature.penduduk.f7];

                        var nama_data_agama = ['islam', 'kristen', 'khatolik', 'hindu', 'budha', 'konghucu', 'kepercayaan_lain', ]
                        var dataset_agama = [feature.penduduk.f8, feature.penduduk.f9, feature.penduduk.f10, feature.penduduk.f11, feature.penduduk.f12, feature.penduduk.f13, feature.penduduk.f14]

                        var nama_data_pendidik = ['tidak_sekolah', 'belum_tamat', 'tamat_sd', 'sltp', 'slta', 'diploma_i', 'diploma_ii', 'diploma_iv', 'strata_ii', 'strata_iii'];
                        var dataset_pendidik = [feature.pekerjaan_pendidikan.f1, feature.pekerjaan_pendidikan.f2, feature.pekerjaan_pendidikan.f3, feature.pekerjaan_pendidikan.f4, feature.pekerjaan_pendidikan.f5, feature.pekerjaan_pendidikan.f6, feature.pekerjaan_pendidikan.f7, feature.pekerjaan_pendidikan.f8, feature.pekerjaan_pendidikan.f9, feature.pekerjaan_pendidikan.f10];


                        var nama_data_umur = ['Umur 0-4', 'Umur 5-9', 'Umur 10-14', 'Umur 15-19', 'Umur 20-24', 'Umur 25-29', 'Umur 30-34', 'Umur 35-39', 'Umur 40-44', 'Umur 45-49', 'Umur 50-54', 'Umur 55-59', 'Umur 60-64', 'Umur 65-69', 'Umur 70-74', 'Umur > 75'];
                        var dataset_umur = [feature.penduduk.f16, feature.penduduk.f17, feature.penduduk.f18, feature.penduduk.f19, feature.penduduk.f20, feature.penduduk.f21, feature.penduduk.f22, feature.penduduk.f23, feature.penduduk.f24, feature.penduduk.f25, feature.penduduk.f26, feature.penduduk.f27, feature.penduduk.f28, feature.penduduk.f29, feature.penduduk.f30];


                        var nama_data_pekerja = ['tidak_bekerja', 'aparatur_pemerintah', 'tenaga_pendidik', 'wiraswasta', 'pertanian', 'tenaga_kesehatan', 'pegawai', 'dokter', 'bidan', 'perawat', 'lainnya'];
                        var dataset_pekerja = [feature.pekerjaan_pendidikan.f11, feature.pekerjaan_pendidikan.f12, feature.pekerjaan_pendidikan.f13, feature.pekerjaan_pendidikan.f14, feature.pekerjaan_pendidikan.f15, feature.pekerjaan_pendidikan.f16, feature.pekerjaan_pendidikan.f18, feature.pekerjaan_pendidikan.f40, feature.pekerjaan_pendidikan.f41, feature.pekerjaan_pendidikan.f42, feature.pekerjaan_pendidikan.f45];

                        var colorPalette = ['#00D8B6', '#008FFB', '#FEB019', '#FF4560', '#775DD0']

                        var options_penduduk = {

                            series: [{
                                name: 'Penduduk',
                                data: dataset_penduduk
                            }],
                            chart: {
                                type: 'bar',
                                height: 350,
                                toolbar: {
                                    tools: {
                                        download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
                                    }
                                }
                            },
                            plotOptions: {
                                bar: {
                                    horizontal: false,
                                    columnWidth: '55%',
                                    endingShape: 'rounded'
                                },
                            },
                            dataLabels: {
                                enabled: false
                            },
                            stroke: {
                                show: true,
                                width: 2,
                                colors: ['transparent']
                            },
                            xaxis: {
                                categories: nama_data_penduduk,
                            },
                            yaxis: {
                                title: {
                                    text: 'Jumlah'
                                },
                                show: true
                            },
                            fill: {
                                type: 'gradient',
                                gradient: {
                                    type: "vertical",
                                    shadeIntensity: 1,
                                    opacityFrom: 0.7,
                                    opacityTo: 0.9,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 20,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 60,
                                        color: "#7282D8",
                                        opacity: 1
                                    }, {
                                        offset: 100,
                                        color: "#7282D8",
                                        opacity: 1
                                    }]
                                }
                            },
                            tooltip: {
                                y: {
                                    formatter: function(val) {
                                        var reverse = val.toString().split('').reverse().join(''),
                                            ribuan = reverse.match(/\d{1,3}/g);
                                        var ribuan = ribuan.join('.').split('').reverse().join('');
                                        return ribuan
                                    }
                                }
                            }
                        };

                        var options_agama = {
                            series: [{
                                name: 'Agama',
                                data: dataset_agama
                            }],
                            chart: {
                                type: 'bar',
                                height: 350,
                                toolbar: {
                                    tools: {
                                        download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
                                    }
                                }

                            },
                            plotOptions: {
                                bar: {
                                    horizontal: false,
                                    columnWidth: '55%',
                                    endingShape: 'rounded'
                                },
                            },
                            dataLabels: {
                                enabled: false
                            },
                            stroke: {
                                show: true,
                                width: 2,
                                colors: ['transparent']
                            },
                            xaxis: {
                                categories: nama_data_agama,
                            },
                            yaxis: {
                                title: {
                                    text: 'Jumlah'
                                },
                                show: true
                            },
                            fill: {
                                type: 'gradient',
                                gradient: {
                                    type: "vertical",
                                    shadeIntensity: 1,
                                    opacityFrom: 0.7,
                                    opacityTo: 0.9,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 20,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 60,
                                        color: "#7282D8",
                                        opacity: 1
                                    }, {
                                        offset: 100,
                                        color: "#7282D8",
                                        opacity: 1
                                    }]
                                }

                            },
                            tooltip: {
                                y: {
                                    formatter: function(val) {
                                        var reverse = val.toString().split('').reverse().join(''),
                                            ribuan = reverse.match(/\d{1,3}/g);
                                        var ribuan = ribuan.join('.').split('').reverse().join('');
                                        return ribuan
                                    }
                                }
                            }
                        };

                        var options_pendidik = {
                            series: [{
                                name: 'Informasi Pendidikan',
                                data: dataset_pendidik
                            }],
                            chart: {
                                type: 'bar',
                                height: 350,
                                toolbar: {
                                    tools: {
                                        download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
                                    }
                                }

                            },
                            plotOptions: {
                                bar: {
                                    horizontal: false,
                                    columnWidth: '55%',
                                    endingShape: 'rounded'
                                },
                            },
                            dataLabels: {
                                enabled: false
                            },
                            stroke: {
                                show: true,
                                width: 2,
                                colors: ['transparent']
                            },
                            xaxis: {
                                categories: nama_data_pendidik,
                            },
                            yaxis: {
                                title: {
                                    text: 'Jumlah'
                                },
                                show: true
                            },
                            fill: {
                                type: 'gradient',
                                gradient: {
                                    type: "vertical",
                                    shadeIntensity: 1,
                                    opacityFrom: 0.7,
                                    opacityTo: 0.9,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 20,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 60,
                                        color: "#7282D8",
                                        opacity: 1
                                    }, {
                                        offset: 100,
                                        color: "#7282D8",
                                        opacity: 1
                                    }]
                                }

                            },
                            tooltip: {
                                y: {
                                    formatter: function(val) {
                                        var reverse = val.toString().split('').reverse().join(''),
                                            ribuan = reverse.match(/\d{1,3}/g);
                                        var ribuan = ribuan.join('.').split('').reverse().join('');
                                        return ribuan
                                    }
                                }
                            }
                        };

                        var options_umur = {
                            series: [{
                                name: 'Umur',
                                data: dataset_umur
                            }],
                            chart: {
                                type: 'bar',
                                height: 350,
                                toolbar: {
                                    tools: {
                                        download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
                                    }
                                }

                            },
                            plotOptions: {
                                bar: {
                                    horizontal: true,
                                    columnWidth: '55%',
                                    endingShape: 'rounded'
                                },
                            },
                            dataLabels: {
                                enabled: false
                            },
                            stroke: {
                                show: true,
                                width: 2,
                                colors: ['transparent']
                            },
                            xaxis: {
                                categories: nama_data_umur,
                            },
                            yaxis: {
                                title: {
                                    text: 'Jumlah'
                                },
                                show: true
                            },
                            fill: {
                                type: 'gradient',
                                gradient: {
                                    type: "horizontal",
                                    shadeIntensity: 1,
                                    opacityFrom: 0.7,
                                    opacityTo: 0.9,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 20,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 60,
                                        color: "#7282D8",
                                        opacity: 1
                                    }, {
                                        offset: 100,
                                        color: "#7282D8",
                                        opacity: 1
                                    }]
                                }

                            },
                            tooltip: {
                                y: {
                                    formatter: function(val) {
                                        var reverse = val.toString().split('').reverse().join(''),
                                            ribuan = reverse.match(/\d{1,3}/g);
                                        var ribuan = ribuan.join('.').split('').reverse().join('');
                                        return ribuan
                                    }
                                }
                            }
                        };

                        var options_pekerja = {
                            series: [{
                                name: 'Informasi Pekerjaan',
                                data: dataset_pekerja
                            }],
                            chart: {
                                type: 'bar',
                                height: 350,
                                toolbar: {
                                    tools: {
                                        download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
                                    }
                                }

                            },
                            plotOptions: {
                                bar: {
                                    borderRadius: 4,
                                    horizontal: true,
                                },
                            },
                            dataLabels: {
                                enabled: false
                            },
                            xaxis: {
                                categories: nama_data_pekerja,
                            },
                            fill: {
                                type: 'gradient',
                                gradient: {
                                    type: "horizontal",
                                    shadeIntensity: 1,
                                    opacityFrom: 0.7,
                                    opacityTo: 0.9,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 20,
                                        color: "#6BB8FF",
                                        opacity: 1
                                    }, {
                                        offset: 60,
                                        color: "#7282D8",
                                        opacity: 1
                                    }, {
                                        offset: 100,
                                        color: "#7282D8",
                                        opacity: 1
                                    }]
                                }

                            },
                            tooltip: {
                                y: {
                                    formatter: function(val) {
                                        var reverse = val.toString().split('').reverse().join(''),
                                            ribuan = reverse.match(/\d{1,3}/g);
                                        var ribuan = ribuan.join('.').split('').reverse().join('');
                                        return ribuan
                                    }
                                }
                            }
                        };

                        var chart_penduduk = new ApexCharts(document.querySelector("#info_penduduk"), options_penduduk);

                        setTimeout(function() {
                            chart_penduduk.render();
                        }, 100);


                        var chart_pendidik = new ApexCharts(document.querySelector("#info_pendidik"), options_pendidik);
                        setTimeout(function() {
                            chart_pendidik.render();

                        }, 100);
                        var chart_umur = new ApexCharts(document.querySelector("#info_umur"), options_umur);
                        setTimeout(function() {
                            chart_umur.render();
                        }, 100);
                        var chart_pekerja = new ApexCharts(document.querySelector("#info_pekerjaan"), options_pekerja);
                        setTimeout(function() {
                            chart_pekerja.render();
                        }, 100);
                        var chart_agama = new ApexCharts(document.querySelector("#info_agama"), options_agama);
                        setTimeout(function() {
                            chart_agama.render();
                        }, 100);
                    }

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

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);
            },
            click: function(e) {
                // console.log(feature.administrasi)
                $('#modal_detail_kelurahan').modal('show');

                $(".nama_kelurahan").html(feature.administrasi.f2)

                $(".kode_kelurahan").html('-')
                $(".jumlah_penduduk_kelurahan").html(feature.administrasi.f4)
                $(".luas_wilayah_kelurahan").html(feature.administrasi.f3.toFixed(3)+' m2')
                $(".jumlah_kk_kelurahan").html(feature.administrasi.f5)
                $(".tombol-edit").html(`<a href="#" class='btn' data-toggle="modal" data-target="#modal_kecamatan" id="btn_edit_kec" data-backdrop="static" data-keyboard="false"><i>Edit</i></a>`)
                    // $(".tombol-edit").html(`<a href="/editkelurahan?kode_dagri=` + encodeURIComponent(feature.administrasi.f1) + `" class='btn'>Edit</a>`)

                var nama_data_penduduk = ['pria', 'wanita', 'belum_kawin', 'kawin', 'cerai_hidup', 'cerai_mati', 'wajib_ktp'];
                var dataset_penduduk = [feature.penduduk.f1, feature.penduduk.f2, feature.penduduk.f3, feature.penduduk.f4, feature.penduduk.f5, feature.penduduk.f6, feature.penduduk.f7];

                var nama_data_agama = ['islam', 'kristen', 'khatolik', 'hindu', 'budha', 'konghucu', 'kepercayaan_lain', ]
                var dataset_agama = [feature.penduduk.f8, feature.penduduk.f9, feature.penduduk.f10, feature.penduduk.f11, feature.penduduk.f12, feature.penduduk.f13, feature.penduduk.f14]

                var nama_data_pendidik = ['tidak_sekolah', 'belum_tamat', 'tamat_sd', 'sltp', 'slta', 'diploma_i', 'diploma_ii', 'diploma_iv', 'strata_ii', 'strata_iii'];
                var dataset_pendidik = [feature.pekerjaan_pendidikan.f1, feature.pekerjaan_pendidikan.f2, feature.pekerjaan_pendidikan.f3, feature.pekerjaan_pendidikan.f4, feature.pekerjaan_pendidikan.f5, feature.pekerjaan_pendidikan.f6, feature.pekerjaan_pendidikan.f7, feature.pekerjaan_pendidikan.f8, feature.pekerjaan_pendidikan.f9, feature.pekerjaan_pendidikan.f10];


                var nama_data_umur = ['Umur 0-4', 'Umur 5-9', 'Umur 10-14', 'Umur 15-19', 'Umur 20-24', 'Umur 25-29', 'Umur 30-34', 'Umur 35-39', 'Umur 40-44', 'Umur 45-49', 'Umur 50-54', 'Umur 55-59', 'Umur 60-64', 'Umur 65-69', 'Umur 70-74', 'Umur > 75'];
                var dataset_umur = [feature.penduduk.f16, feature.penduduk.f17, feature.penduduk.f18, feature.penduduk.f19, feature.penduduk.f20, feature.penduduk.f21, feature.penduduk.f22, feature.penduduk.f23, feature.penduduk.f24, feature.penduduk.f25, feature.penduduk.f26, feature.penduduk.f27, feature.penduduk.f28, feature.penduduk.f29, feature.penduduk.f30];


                var nama_data_pekerja = ['tidak_bekerja', 'aparatur_pemerintah', 'tenaga_pendidik', 'wiraswasta', 'pertanian', 'tenaga_kesehatan', 'pegawai', 'dokter', 'bidan', 'perawat', 'lainnya'];
                var dataset_pekerja = [feature.pekerjaan_pendidikan.f11, feature.pekerjaan_pendidikan.f12, feature.pekerjaan_pendidikan.f13, feature.pekerjaan_pendidikan.f14, feature.pekerjaan_pendidikan.f15, feature.pekerjaan_pendidikan.f16, feature.pekerjaan_pendidikan.f18, feature.pekerjaan_pendidikan.f40, feature.pekerjaan_pendidikan.f41, feature.pekerjaan_pendidikan.f42, feature.pekerjaan_pendidikan.f45];

                var colorPalette = ['#00D8B6', '#008FFB', '#FEB019', '#FF4560', '#775DD0']

                var options_penduduk = {

                    series: [{
                        name: 'Penduduk',
                        data: dataset_penduduk
                    }],
                    chart: {
                        type: 'bar',
                        height: 350,
                        toolbar: {
                            tools: {
                                download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
                            }
                        }
                    },
                    plotOptions: {
                        bar: {
                            horizontal: false,
                            columnWidth: '55%',
                            endingShape: 'rounded'
                        },
                    },
                    dataLabels: {
                        enabled: false
                    },
                    stroke: {
                        show: true,
                        width: 2,
                        colors: ['transparent']
                    },
                    xaxis: {
                        categories: nama_data_penduduk,
                    },
                    yaxis: {
                        title: {
                            text: 'Jumlah'
                        },
                        show: true
                    },
                    fill: {
                        type: 'gradient',
                        gradient: {
                            type: "vertical",
                            shadeIntensity: 1,
                            opacityFrom: 0.7,
                            opacityTo: 0.9,
                            colorStops: [{
                                offset: 0,
                                color: "#6BB8FF",
                                opacity: 1
                            }, {
                                offset: 20,
                                color: "#6BB8FF",
                                opacity: 1
                            }, {
                                offset: 60,
                                color: "#7282D8",
                                opacity: 1
                            }, {
                                offset: 100,
                                color: "#7282D8",
                                opacity: 1
                            }]
                        }
                    },
                    tooltip: {
                        y: {
                            formatter: function(val) {
                                var reverse = val.toString().split('').reverse().join(''),
                                    ribuan = reverse.match(/\d{1,3}/g);
                                var ribuan = ribuan.join('.').split('').reverse().join('');
                                return ribuan
                            }
                        }
                    }
                };

                var options_agama = {
                    series: [{
                        name: 'Agama',
                        data: dataset_agama
                    }],
                    chart: {
                        type: 'bar',
                        height: 350,
                        toolbar: {
                            tools: {
                                download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
                            }
                        }

                    },
                    plotOptions: {
                        bar: {
                            horizontal: false,
                            columnWidth: '55%',
                            endingShape: 'rounded'
                        },
                    },
                    dataLabels: {
                        enabled: false
                    },
                    stroke: {
                        show: true,
                        width: 2,
                        colors: ['transparent']
                    },
                    xaxis: {
                        categories: nama_data_agama,
                    },
                    yaxis: {
                        title: {
                            text: 'Jumlah'
                        },
                        show: true
                    },
                    fill: {
                        type: 'gradient',
                        gradient: {
                            type: "vertical",
                            shadeIntensity: 1,
                            opacityFrom: 0.7,
                            opacityTo: 0.9,
                            colorStops: [{
                                offset: 0,
                                color: "#6BB8FF",
                                opacity: 1
                            }, {
                                offset: 20,
                                color: "#6BB8FF",
                                opacity: 1
                            }, {
                                offset: 60,
                                color: "#7282D8",
                                opacity: 1
                            }, {
                                offset: 100,
                                color: "#7282D8",
                                opacity: 1
                            }]
                        }

                    },
                    tooltip: {
                        y: {
                            formatter: function(val) {
                                var reverse = val.toString().split('').reverse().join(''),
                                    ribuan = reverse.match(/\d{1,3}/g);
                                var ribuan = ribuan.join('.').split('').reverse().join('');
                                return ribuan
                            }
                        }
                    }
                };

                var options_pendidik = {
                    series: [{
                        name: 'Informasi Pendidikan',
                        data: dataset_pendidik
                    }],
                    chart: {
                        type: 'bar',
                        height: 350,
                        toolbar: {
                            tools: {
                                download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
                            }
                        }

                    },
                    plotOptions: {
                        bar: {
                            horizontal: false,
                            columnWidth: '55%',
                            endingShape: 'rounded'
                        },
                    },
                    dataLabels: {
                        enabled: false
                    },
                    stroke: {
                        show: true,
                        width: 2,
                        colors: ['transparent']
                    },
                    xaxis: {
                        categories: nama_data_pendidik,
                    },
                    yaxis: {
                        title: {
                            text: 'Jumlah'
                        },
                        show: true
                    },
                    fill: {
                        type: 'gradient',
                        gradient: {
                            type: "vertical",
                            shadeIntensity: 1,
                            opacityFrom: 0.7,
                            opacityTo: 0.9,
                            colorStops: [{
                                offset: 0,
                                color: "#6BB8FF",
                                opacity: 1
                            }, {
                                offset: 20,
                                color: "#6BB8FF",
                                opacity: 1
                            }, {
                                offset: 60,
                                color: "#7282D8",
                                opacity: 1
                            }, {
                                offset: 100,
                                color: "#7282D8",
                                opacity: 1
                            }]
                        }

                    },
                    tooltip: {
                        y: {
                            formatter: function(val) {
                                var reverse = val.toString().split('').reverse().join(''),
                                    ribuan = reverse.match(/\d{1,3}/g);
                                var ribuan = ribuan.join('.').split('').reverse().join('');
                                return ribuan
                            }
                        }
                    }
                };

                var options_umur = {
                    series: [{
                        name: 'Umur',
                        data: dataset_umur
                    }],
                    chart: {
                        type: 'bar',
                        height: 350,
                        toolbar: {
                            tools: {
                                download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
                            }
                        }

                    },
                    plotOptions: {
                        bar: {
                            horizontal: true,
                            columnWidth: '55%',
                            endingShape: 'rounded'
                        },
                    },
                    dataLabels: {
                        enabled: false
                    },
                    stroke: {
                        show: true,
                        width: 2,
                        colors: ['transparent']
                    },
                    xaxis: {
                        categories: nama_data_umur,
                    },
                    yaxis: {
                        title: {
                            text: 'Jumlah'
                        },
                        show: true
                    },
                    fill: {
                        type: 'gradient',
                        gradient: {
                            type: "horizontal",
                            shadeIntensity: 1,
                            opacityFrom: 0.7,
                            opacityTo: 0.9,
                            colorStops: [{
                                offset: 0,
                                color: "#6BB8FF",
                                opacity: 1
                            }, {
                                offset: 20,
                                color: "#6BB8FF",
                                opacity: 1
                            }, {
                                offset: 60,
                                color: "#7282D8",
                                opacity: 1
                            }, {
                                offset: 100,
                                color: "#7282D8",
                                opacity: 1
                            }]
                        }

                    },
                    tooltip: {
                        y: {
                            formatter: function(val) {
                                var reverse = val.toString().split('').reverse().join(''),
                                    ribuan = reverse.match(/\d{1,3}/g);
                                var ribuan = ribuan.join('.').split('').reverse().join('');
                                return ribuan
                            }
                        }
                    }
                };

                var options_pekerja = {
                    series: [{
                        name: 'Informasi Pekerjaan',
                        data: dataset_pekerja
                    }],
                    chart: {
                        type: 'bar',
                        height: 350,
                        toolbar: {
                            tools: {
                                download: '<div style="margin-left: 25px;"><i class=" icon-download4"></i><span>&nbsp;&nbsp; Download</span></div>',
                            }
                        }

                    },
                    plotOptions: {
                        bar: {
                            borderRadius: 4,
                            horizontal: true,
                        },
                    },
                    dataLabels: {
                        enabled: false
                    },
                    xaxis: {
                        categories: nama_data_pekerja,
                    },
                    fill: {
                        type: 'gradient',
                        gradient: {
                            type: "horizontal",
                            shadeIntensity: 1,
                            opacityFrom: 0.7,
                            opacityTo: 0.9,
                            colorStops: [{
                                offset: 0,
                                color: "#6BB8FF",
                                opacity: 1
                            }, {
                                offset: 20,
                                color: "#6BB8FF",
                                opacity: 1
                            }, {
                                offset: 60,
                                color: "#7282D8",
                                opacity: 1
                            }, {
                                offset: 100,
                                color: "#7282D8",
                                opacity: 1
                            }]
                        }

                    },
                    tooltip: {
                        y: {
                            formatter: function(val) {
                                var reverse = val.toString().split('').reverse().join(''),
                                    ribuan = reverse.match(/\d{1,3}/g);
                                var ribuan = ribuan.join('.').split('').reverse().join('');
                                return ribuan
                            }
                        }
                    }
                };

                var chart_penduduk = new ApexCharts(document.querySelector("#info_penduduk"), options_penduduk);

                setTimeout(function() {
                    chart_penduduk.render();
                }, 100);


                var chart_pendidik = new ApexCharts(document.querySelector("#info_pendidik"), options_pendidik);
                setTimeout(function() {
                    chart_pendidik.render();

                }, 100);
                var chart_umur = new ApexCharts(document.querySelector("#info_umur"), options_umur);
                setTimeout(function() {
                    chart_umur.render();
                }, 100);
                var chart_pekerja = new ApexCharts(document.querySelector("#info_pekerjaan"), options_pekerja);
                setTimeout(function() {
                    chart_pekerja.render();
                }, 100);
                var chart_agama = new ApexCharts(document.querySelector("#info_agama"), options_agama);
                setTimeout(function() {
                    chart_agama.render();
                }, 100);

                // $("modal_kecamatan").modal('show');
                // // var geocodeService = L.esri.Geocoding.geocodeService();
                // // var geocoderNominatim = new L.Control.Geocoder.Nominatim();
                // // var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) {
                // console.log(feature.administrasi.f1)
                content_edit_kec = `
                        <div class="modal-dialog modal-md">
                            <div class="modal-content">
                                <div class="modal-header bg-info">
                                        <button type="button" class="close" data-dismiss="modal" onclick="closemodalkec()">&times;</button>
                                        <h6 class="modal-title">Edit Kecamatan</h6>
                                </div>
                                <div class="modal-body" style="overflow-x: hidden;max-height: 450px;overflow-y: scroll;padding-left: 15px;">
                                    <div id="map-for-edit-kec" style="width: 540px;height: 340px;position: relative;margin: 10px;"></div>
                                    <input style="display:none;" id="id_kec" type="text" class="form-control" value="` + feature.administrasi.f1 + `"required>
                                    <input style="display:none;" id="coor_kec" type="text" class="form-control" value="">
                                    <input style="display:none;" id="poly_coor_kec" type="text" class="form-control" value="">
                                    
                                    <div class="form-group">
                                        <div class="row" style="margin-top: 15px;">
                                            <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Nama Kecamatan</label>
                                            <div class="col-lg-9">
                                                <input id="nama_kec" type="text" class="form-control" value="` + feature.administrasi.f2 + `"required>    
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top: 15px;">
                                            <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Luas Kecamatan</label>
                                            <div class="col-lg-6">
                                                <input id="luas_kec" type="text" class="form-control" value="` + feature.administrasi.f3.toFixed(3) + `"required>    
                                            </div>
                                            <div class="col-lg-3">
                                                <button type="submit" id="btn_ceklwas_kec" class="btn btn-primary" title="Check Luas" style="border-radius: 0px 10px 10px 0px;
                                                    outline: none;
                                                    background: linear-gradient(
                                                    201.55deg
                                                    , #72BBFF -24.21%, #3D5CCA 130.65%);"><i class="icon-search4 text-muted text-size-base" style="color: white;"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="modal-footer">
                                    
                                    <button type="button" class="btn btn-info" id="btn_edit_kec">Save Changes</button>
                                </div>
                            </div>
                        </div>`;
                $("#modal_kecamatan").html(content_edit_kec)
            }
        });
    }
});

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()
    // }
    // cek_overlay()
    var checkBox = document.getElementById("batas_desa");
    if (checkBox.checked == true) {
        // loaderPage(true);
        $('#scrapex').append(`<script id="idscrapexmin" type="text/javascript " src="static/js/apexcharts.min.js"><\/script>`);
        $('#scrapex').append(`<script id="idscrapex" type="text/javascript " src="static/js/apexcharts.js"><\/script>`);

        if (map.hasLayer(geo_batas_kel)) {
            geo_batas_kel.clearLayers()
            geo_batas_kel.remove()
                // geo_batas_kel.addTo(map)
        }
        $.ajax({
            url: "api/desangab",
            dataType: 'json',
            type: 'GET',
            success: function(response) {
                // loaderPage(false);
                // map.setView([-4.125826277307029, 104.1881561279297], 13);
                // var len = response['kecamatan'].length;
                // console.log(response)
                var data_de = []
                for (var i = 0; i < response['kembangdesa'].length; i++) {
                    geoj = response['kembangdesa'][i];
                    data_de.push(geoj);
                }
                // console.log(data_de)
                geo_json_kel(data_de);
            }
        });
        geo_batas_kel.addTo(map)
    } else {
        geo_batas_kel.clearLayers()
        geo_batas_kel.remove()
    }
    cek_overlay()
}

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

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

        $('#scrapex').append(`<script id="idscrapexmin" type="text/javascript " src="static/js/apexcharts.min.js"><\/script>`);
        $('#scrapex').append(`<script id="idscrapex" type="text/javascript " src="static/js/apexcharts.js"><\/script>`);

        if (map.hasLayer(geo_batas_kec)) {
            geo_batas_kec.clearLayers()
            geo_batas_kec.remove()
        }
        $.ajax({
            url: "api/kecamatan",
            dataType: 'json',
            type: 'GET',
            success: function(response) {
                // loaderPage(false);
                // map.setView([-4.125826277307029, 104.1881561279297], 13);
                // var len = response['kecamatan'].length;
                // console.log(response)
                var data_de = []
                for (var i = 0; i < response['kecamatan'].length; i++) {
                    geoj = response['kecamatan'][i];
                    data_de.push(geoj);
                }
                // console.log(data_de)
                geo_json_kec(data_de);
            }
        });
        geo_batas_kec.addTo(map)
    } else {
        geo_batas_kec.clearLayers()
        geo_batas_kec.remove()
    }
    cek_overlay()
}

var point_bangunan = L.geoJSON(null, {
    pointToLayer: function(feature, latlng) {
        return L.circleMarker(latlng, {
            radius: 8,
            fillColor: '#ff7800',
            color: '#000',
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
        });
    }
})

function geo_json_po_bangunan(data) {
    point_bangunan.addData(data)
}

var marker_cluster_point_bangunan = L.markerClusterGroup({
    iconCreateFunction: function(cluster) {
        var childCount = cluster.getChildCount();

        return new L.DivIcon({
            html: '<div><span>' + childCount + '</span></div>',
            className: 'marker-cluster-adm',
            iconSize: new L.Point(40, 40)
        });
    },
    //Disable all of the defaults:
    spiderfyOnMaxZoom: false,
    showCoverageOnHover: false
});

var progress = document.getElementById('progress');
var progressBar = document.getElementById('progress-bar');

function updateProgressBar(processed, total, elapsed, layersArray) {
    if (elapsed > 1000) {
        // if it takes more than a second to load, display the progress bar:
        progress.style.display = 'block';
        progressBar.style.width = Math.round(processed / total * 100) + '%';
    }

    if (processed === total) {
        // all markers processed - hide the progress bar:
        progress.style.display = 'none';
    }
}

var markers = L.markerClusterGroup({ chunkedLoading: true, chunkProgress: updateProgressBar });

var markerList = [];

function getPointsBangunan(lat, lng, rad) {
    $.ajax({
        url: "api/pointBangunan_",
        data: {
            'center_lat': lat,
            'center_lon': lng,
            'radius': rad
        },
        dataType: 'json',
        success: function(response) {
            console.log(response)
            var pointResult = response.result;
            var mark_lis = []
            for (var i = 0; i < pointResult.length; i++) {
                var wkt_geom = pointResult[i];
                var wkt = wkt_geom.replace("POINT(", "").replace(")", "").split(" ")
                var marker = L.marker(L.latLng(+(wkt[1]), +(wkt[0])), {
                    icon: L.divIcon({
                        className: 'invisible-marker'
                    })
                });
                mark_lis.push(marker)
            }
            markers.addLayers(mark_lis);
            map.addLayer(markers);
        }
    });
}

function loadMapsCluster() {
    $("#bangpoints").html(`<script src="static/bangunan.js"></script>`)

    for (var i = 0; i < bangunanPoints.length; i++) {
        var a = bangunanPoints[i];
        var marker = L.marker(L.latLng(a[0], a[1]), {
            icon: L.divIcon({
                className: 'invisible-marker'
            })
        });
        markerList.push(marker);
    }
    //console.log('start clustering: ' + window.performance.now());

    markers.addLayers(markerList);
    map.addLayer(markers);
    return 1;
}

function x() {
    if (loadMapsCluster) {
        alert('gfdgfd')
        loaderPage(false);
    }
}

function georumah() {
    // loaderPage(true)

    var checkBox = document.getElementById("geo_building");

    if (checkBox.checked == true) {
        console.log(markerList.length)

        // if (markerList.length == 0) {

        //     $.ajax({
        //         url: "api/pointBangunan",
        //         dataType: 'json',
        //         success: function(response) {

        //             $("#bangpoints").html(`<script src="static/bangunan.js"></script>`)

        //             for (var i = 0; i < bangunanPoints.length; i++) {
        //                 var a = bangunanPoints[i];
        //                 var marker = L.marker(L.latLng(a[0], a[1]), {
        //                     icon: L.divIcon({
        //                         className: 'invisible-marker'
        //                     })
        //                 });
        //                 markerList.push(marker);
        //             }
        //             //console.log('start clustering: ' + window.performance.now());

        //             markers.addLayers(markerList);
        //             map.addLayer(markers);

        //             if (map.hasLayer(markers)) {
        //                 loaderPage(false);
        //             }
        //         }
        //     });

        // } else {
        //     markers.addLayers(markerList);
        //     map.addLayer(markers);
        //     if (map.hasLayer(markers)) {
        //         loaderPage(false);
        //     }

        // }

        $(".help_bangunan").html('Polygon Bangunan dan Line Jalan terlihat pada zoom > 16')
    } else {
        loaderPage(false);
        $(".help_bangunan").html('')
        markers.clearLayers()
        markers.remove()
    }
    cek_overlay()
}

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.addTo(map)
            // geo_batas_kel.addTo(map)
            // geo_batas_kec.addTo(map)
        bataskec()
        batasdesa()
    } 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()
    }
    cek_overlay()
}

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: "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='` + desa + `,` + kec + `'>` + 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: "api/ressearch",
        data: {
            'id_desa_search': id
        },
        dataType: 'json',
        success: function(response) {

            console.log(response)
        }
    });
}

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) {
                $("#modal_detail_non_kelurahan").modal("show")

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

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

                $(".btn_action").html(`<div class="tombol-edit-keterangan text-center" style="
                background-color: #5A9AFB;
                position: absolute;
                width: 40px;
                height: 40px;
                bottom: 2px;
                right: 5px;
                border: 1pt solid rosybrown;
                border-radius: 8px;
                ">
                        <a href="#" class="btn" id="btn_edit_tuplah" style="border-bottom-left-radius: 8px;border-top-right-radius: 8px;width: 100%;height: 100%;bottom: 0px;color: white;"><i class="icon-pencil5"></i></a>
                    </div>`)
                if (list_perm.indexOf('delete_tuplah') >= 0 === false) {
                    $(".tombol-delete-keterangan").remove();
                }

                if (list_perm.indexOf('change_tuplah') >= 0 === false) {
                    $(".tombol-edit-keterangan").remove();
                }

                $(".nama_keterangan").html(feature.legend.f2)

                $(".isi_keterangan").html(`
                        <input type="text" name="idtuplah" id="idtuplah" class="hidden" value="">

                        <input type="text" name="coordinatetuplah" id="coordinatetuplah" class="hidden" value="">
                        <input type="text" name="luastuplah" id="lwastuplah" class="hidden" value="">
    
                        <div class="col-md-12">
                            <div>
                                <div>
                                    <span>Jenis Lahan</span>
                                </div>
                                <div>
                                    <span>Null</span>
                                </div>
                            </div>
                            <div>
                                <div>
                                    <span>Luas Lahan</span>
                                </div>
                                <div>
                                    <span style="font-family: 'Roboto';">` + feature.legend.f3 + ` m2</span>
                                </div>
                            </div>
                        </div>`)


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

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

    cek_overlay()
}


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

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


$(document).on("click", "#btn_edit_tuplah", function() {
    if (map_edit_tuplah.hasLayer(polygon_edit_tuplah)) {
        polygon_edit_tuplah.remove()
    }
    var id_poly = $('#idtuplah').val();

    var lwastup = $("#lwastuplah").val();
    $("#modal_detail_non_kelurahan").modal("hide")

    $.ajax({
        url: "api/edit-tuplah",
        data: {
            'idtuplah': id_poly
        },
        dataType: 'json',
        success: function(data) {
            $("#modal-edit-tuplah").modal("show")
            $(".modal_detail_non_kelurahan").modal("hide")
            console.log(data)

            loaderPage(false);
            $("#luas_tuplah_edit").val(lwastup);
            let response = data
            if (response.code == 0) {
                setTimeout(function() {
                    map_edit_tuplah.invalidateSize();
                }, 1000);

                let lop_poly_edit = data['tuplah']['geometry']['coordinates'];
                let list_poly_edit = [];
                var latt = 0;
                var longg = 0;
                for (var i = 0; i < lop_poly_edit.length; i++) {
                    geoj = lop_poly_edit[i];

                    for (var i = 0; i < geoj.length; i++) {
                        polygigi = [geoj[i][1], geoj[i][0]]
                        list_poly_edit.push(polygigi);
                        latt += geoj[i][0]
                        longg += geoj[i][1]
                    }
                };
                var lattt = latt / list_poly_edit.length
                var longgg = longg / list_poly_edit.length

                map_edit_tuplah.setView([longgg, lattt], 14);

                polygon_edit_tuplah = L.polygon(list_poly_edit).addTo(map_edit_tuplah)
                polygon_edit_tuplah.enableEdit();


                $('#btn_ceklwas').click(function() {
                    var hasil = (JSON.stringify(polygon_edit_tuplah.toGeoJSON()))
                    var seeArea = L.GeometryUtil.geodesicArea(polygon_edit_tuplah.getLatLngs()[0]);
                    var fixarea = seeArea.toFixed(3)
                    var separ = fixarea.toString().split(".");
                    // var areacom = separ.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                    separ.join(".");
                    $("#luas_tuplah_edit").val(fixarea);
                })

                $('#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"
                })
            }
        },
    })
});

$(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: "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');
                    location.reload()
                })
            } else {
                swal({
                    title: response.info,
                    text: response.data,
                    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) {

                    $("#modal_detail_non_kelurahan").modal('show');

                    if (feature.properties.f2 == null) {
                        var namajalan = "unnamed"
                    }



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

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

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

                    if (list_perm.indexOf('change_jalan') >= 0 === false) {
                        $(".tombol-edit-keterangan").remove();
                    }


                    if (feature.properties.f7 != null) {
                        // console.log(feature.properties.f7)
                        var list_history = feature.properties.f7

                        // console.log(list_history[0].split(",")[0])
                        var perbaikan_jl = `<div class='row'>
                            
                            <label class="col-md-8">` + list_history[0].split(",")[1] + `</label>
                            

                            <a class="col-md-4" onclick="getdetailper(` + list_history[0].split(",")[0] + `)" data-toggle="modal" data-target="#modal_detail_perbaikan_dash"><i>Detail</i></a>

                        </div>
                        <a class="col-md-6" class="btn" id="btn_perbaikan_jalan" data-toggle="modal" data-target="#input_perbaikan"><i>Input Perbaikan</i></a>`

                    } else {
                        var perbaikan_jl = `<div class='row'>
                            <div class="col-md-6">
                                <label class="col-md-6">Null</label>
                            </div>
                            
                        </div>
                        <a class="col-md-6" class="btn" id="btn_perbaikan_jalan" data-toggle="modal" data-target="#input_perbaikan"><i>Input Perbaikan</i></a>
                        `
                    }
                    $(".nama_keterangan").html(`
                                        <div>
                                            <span style="font-size: large;">
                                                ` + feature.properties.f2 + `
                                            </span>
                                        </div>
                                        <div>
                                            <span></span>
                                        </div>
                                        `)

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

                                    </div>

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

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

                                `)

                    content_his_jal = `
                        <div class="modal-dialog" style="height: max-content;">
                            <div class="modal-content">
                                <div class="modal-header" style="height: 50px;background: #1E2233;border-top-left-radius: 10px;border-top-right-radius: 10px;">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h5 class="modal-title title-create" style="color: white;margin-left: 25px;">Input Perbaikan</h5>
                                </div>
                                <div class="modal-body" style="max-height: 450px;overflow-y: auto;">
                                    <div class="tab-pane has-padding" id="panel-tab2">
                                        <div class="tab-pane" id="bottom-justified-data">

                                            <div class="tabbable">
                                                <ul class="nav nav-tabs nav-tabs-bottom nav-justified">
                                                    <li onclick="changetabs(this)" class="active"><a href="#left-tab1-feas-upl" data-toggle="tab">Koordinat</a></li>
                                                    <li onclick="changetabs(this)"><a href="#right-tab2-feas-upl" data-toggle="tab">Informasi Umum</a></li>
                                                </ul>
                                                
                                                <div class="tab-content">
                                                    <div class="tab-pane active" id="left-tab1-feas-upl">
                                                        <input type="text" class="hidden" id="poly_create_input">
                                                        <input type="text" class="hidden" id="id_jalan_perbaikan">
                                                        <input type="text" class="hidden" id="type_id">
                                                        <div id="map-insert" style="height: 375px;width: 100%">
                                                        </div>
                                                    </div>
                                                
                                                    <div class="tab-pane" id="right-tab2-feas-upl">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label>Nama Jalan :</label>
                                                                    <input type="text" id="namajalan2" class="form-control" value="">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>Type Jalan :</label>
                                                                    <input type="text" id="typejalan" class="form-control" value="">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>Kelurahan :</label>
                                                                    <input type="text" id="kelurahan" class="form-control" value="">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>Kecamatan :</label>
                                                                    <input type="text" id="kecamatan" class="form-control" value="">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>Anggaran :</label>
                                                                    <input type="text" id="anggaran" class="form-control" value="">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>Pihak yang Mengesahkan :</label>
                                                                    <input type="text" id="pihakpengesahan" class="form-control" value="">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>Tanggal Disetujui :</label>
                                                                    <input type="date" id="tgldisetujui" class="form-control" value="">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>Tanggal Mulai Perbaikan :</label>
                                                                    <input type="date" id="tglmulaiperbaikan" class="form-control" value="">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>Tanggal Selesai Perbaikan :</label>
                                                                    <input type="date" id="tglselesaiperbaikan" class="form-control" value="">
                                                                </div>

                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label>Penanggung Jawab Lapangan :</label>
                                                                    <input type="text" id="pjlapangan" class="form-control" value="">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>Kontraktor :</label>
                                                                    <input type="text" id="kontraktor" class="form-control" value="">
                                                                </div>

                                                                <div class="form-group">
                                                                    <label>Panjang Jalan Keseluruhan :</label>
                                                                    <input type="text" id="panjangjalanall" class="form-control" value="">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>Panjang Jalan Perbaikan :</label>
                                                                    <input type="text" id="panjangjalanperbaikan" class="form-control" value="">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>Sumber Dana :</label>
                                                                    <input type="text" id="sumber_dana" class="form-control" value="">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>Lebar Jalan Perbaikan :</label>
                                                                    <input type="text" id="lebarjalanperbaikan" class="form-control" value="">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>Jenis Perbaikan :</label>
                                                                    <input type="text" id="jenisperbaikan" class="form-control" value="">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>Proposal (.pdf):</label>
                                                                    <input type="file" id="proposal">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>Bukti Selesai Perbaikan (.png/.jpg/.jpeg/):</label>
                                                                    <input type="file" id="buktiselesai">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

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

                    $('#namajalanedit').val(feature.properties.f2);

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

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

                    $("#input_perbaikan").html(content_his_jal);

                }
            });

            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) {
        $(".help_bangunan").html('Polygon Bangunan dan Line Jalan terlihat pada zoom > 16')
        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: "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 {
        $(".help_bangunan").html('')
        geo_jalan.clearLayers();
        geo_jalan.remove();
    }
    cek_overlay()
}

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

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

$(document).on("click", "#btn_jalan", function() {
    $("#koordinat_cek").addClass("active")
    $("#info_umum").removeClass("active")
    $("#left-tab1-feas-upl-j").addClass("active")
    $("#right-tab2-feas-upl-j").removeClass("active")

    if (map_edit_jalan.hasLayer(polygon_edit_jalan)) {
        polygon_edit_jalan.remove()
    }
    var id_poly = $('#idjalan').val();
    $("#modal-jalan").modal("show")
    $.ajax({
        url: "api/edit-jalan",
        data: {
            'idjalan': id_poly
        },
        dataType: 'json',
        success: function(data) {
            loaderPage(false);

            $("#modal_detail_non_kelurahan").modal("hide")
            setTimeout(function() {
                map_edit_jalan.invalidateSize();
            }, 1000);


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

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


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


$(document).on("click", "#btn_hapus_jalan", function() {
    $("#modal-hapus-jalan").modal("show")
    $("#modal_detail_non_kelurahan").modal("hide")
    var id_poly = $('#idjalan').val();

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

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

$(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', $("#namajalanedit").val())
    data.append('panjangjalan', $("#panjangjalan").val())
    data.append('lebarjalan', $("#lebarjalan").val())
    data.append('tipejalan', $("#tipejalan").val())
    data.append('cord', $("#coordinatejalan").val())

    $.ajax({
        url: "api/edit-jalan-valid",
        data: data,
        dataType: 'json',
        type: 'POST',
        processData: false,
        contentType: false,
        success: function(data) {
            loaderPage(false);
            let response = data;
            if (response.code == 0) {
                swal({
                    title: response.info,
                    text: response.data,
                    type: "success",
                    icon: "success",
                    confirmButtonColor: "#00BCD4"
                }, function() {
                    $("#modal-jalan").modal('hide');
                })
            } 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: "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: "api/hapus",
        data: {
            'id_poly': id_poly
        },
        dataType: 'json',
        type: 'POST',
        success: function(data) {

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

function closemodalkec(){
    $("#modal_detail_kelurahan").modal("show")
}

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

    $("#modal_detail_kelurahan").modal("hide")

    var map_edit_kec = new L.map('map-for-edit-kec', {
        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_kec);

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

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

    var id_poly_kec = $('#id_kec').val();
    
    loaderPage(true);

    $.ajax({
        url: "api/edit_kec",
        data: {
            'id_kec': id_poly_kec
        },
        dataType: 'json',
        success: function(data) {

            setTimeout(function() {
                map_edit_kec.invalidateSize();
            }, 1000);
            loaderPage(false);
            
            // console.log(data[0])
            map_edit_kec.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 11);

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

            polylyly = L.polygon(list_poly_edit).addTo(map_edit_kec)
            polylyly.enableEdit();

            var hasil = (JSON.stringify(polylyly.toGeoJSON()))
            $("#coorkec").val(hasil);

            // polylyly.change(function() {
            $('#btn_ceklwas_kec').click(function() {
                var seeArea = L.GeometryUtil.geodesicArea(polylyly.getLatLngs()[0]);
                var fixarea = seeArea.toFixed(3)
                var separ = fixarea.toString().split(".");
                // var areacom = separ.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                separ.join(".");
                $("#luas_kec").val(fixarea);
            })

            $('#btn_edit_kec').click(function() {
                var hasil = (JSON.stringify(polylyly.toGeoJSON()))
                $("#coorkec").val(hasil);
            })
        }
    });
});

//
//    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: "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: "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: "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');
//     }
// }
// function destroyfade() {
//     $(".modal-backdrop").css("display", "none")
//     $(".modal-backdrop").removeClass('show');
//     $("body").css('padding-right', '0px !important')
//     document.querySelector("#right-tab2-feas-upli > div > div:nth-child(6) > div > label").html(`Pimpinan`)
//     document.querySelector("#right-tab2-feas-upli > div > div:nth-child(3)").css("display", "block")
// }

// function destroyWraper() {
//     $("#input_perbaikan").css("display", "none");
//     $("#edit_kelurahan").css("display", "none");
// }



$(document).on("click", "#btn_perbaikan_jalan", function() {
    // $("#input_perbaikan").css("display", "block");
    // $("#koordinat_cek").addClass("active")
    // $("#info_umum").removeClass("active")
    // $("#left-tab1-feas-upl-j").addClass("active")
    // $("#right-tab2-feas-upl-j").removeClass("active")

    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
                }
            },
            polyline: true,
        },
        edit: {
            featureGroup: editableLayers, //REQUIRED!!
            remove: true
        },
        color: 'red'
    };

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

    var partmbd = 0

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

            var tempLatLng = null;
            var totalDistance = 0.00000;
            $.each(e.layer._latlngs, function(i, latlng) {
                if (tempLatLng == null) {
                    tempLatLng = latlng;
                    return;
                }

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

            $("#panjangjalanperbaikan").val((partmbd).toFixed(2));
        }
        editableLayers.addLayer(layer);
    });
    // console.log(editableLayers)

    function getjalanper(id) {
        $.ajax({
            url: "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);

            }
        });
    };

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

    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: "input-perbaikan",
        data: {
            'id_jalan': id_jalan
        },
        dataType: 'json',
        success: function(data) {
            if ((data[0] == null) || (data[0] == "")) {
                $("#namajalan2").val();
            } else {
                $("#namajalan2").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]);
            $("#map-insert > div.leaflet-control-container > div.leaflet-top.leaflet-left > div:nth-child(1) > div > div > a.leaflet-draw-draw-marker").css("display", "none")
            $('#save-perbaikan').click(function() {
                // console.log(editableLayers)
                var hasil = JSON.stringify(editableLayers.toGeoJSON());
                var h2 = hasil.replace(`{"type":"FeatureCollection","features":`,``)
                var h3 = h2.replace(/{"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates":/g,"")
                var h4 = h3.replace(/}},/g,",")
                var h5 = h4.replace(/}}]}/g,"]")
                // console.log(h5)
                $("#coorjalbaru").val(h5);
                // console.log(hasil);
                // console.log($("#coorjalbaru").val());
            })
        }
    })
});

$(document).on("click", "#save-perbaikan", function() {
    // $("#save-perbaikan").click(function() {

    // var hasil = JSON.stringify(editableLayers.toGeoJSON());
    // var hasil = $()
    var polijalbar = $("#coorjalbaru").val();
    var id_jalan = $("#id_jalan_perbaikan").val();
    var type_id = $("#type_id").val();
    var name = $("#namajalan2").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 sumber_dana = $("#sumber_dana").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': polijalbar
    }, {
        '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
    }, {
        'sumber_dana': sumber_dana
    }, {
        'lbr_perbaikan': lbr_perbaikan
    }, {
        'jenis_perbaikan': jenis_perbaikan
            // }, {
            //     'luas': luas
    }, {
        'kelurahan': kelurahan
    }, {
        'kecamatan': kecamatan
    }]

    // console.log(data_umum)
    data = new FormData()
    data.append("proposal", $("input[id^='proposal']")[0].files[0]);
    data.append("bukti_selesai", $("input[id^='buktiselesai']")[0].files[0]);
    for (var i = 0; i < data_umum.length; i++) {
        var keyss = Object.keys(data_umum[i]);
        data.append(keyss[0], data_umum[i][keyss[0]])
    }

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


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

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

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

//     if (map.hasLayer(geo_po_cagar_budaya)) {

//         geo_po_cagar_budaya.eachLayer(function(layer) {
//             if (zoom >= 10 && (!layer.getTooltip())) {

//                 conten = `

//                         <div id="bottom-justified-data" style="text-align: center;">
//                             <div >
//                                 <img src="static/img/image/` + layer.feature.administrasi.f4 + `" alt="Image" style="width: 150px!important;height: 125px;">
//                             </div>

//                             <div >
//                                 <div style="font-family: Google Sans,Roboto,Arial,sans-serif;
//                                 letter-spacing: 0">
//                                     <p >
//                                         ` + layer.feature.administrasi.f1 + `
//                                     </p>
//                                 </div>
//                             </div>
//                         </div>
//                     `;


//                 layer.bindTooltip(conten, {
//                     sticky: true,
//                     permanent: false,
//                     interactive: false,
//                     direction: 'top',
//                     offset: [0, -25],
//                     className: 'my-label'
//                 });
//             } else if (zoom < 10 && (layer.getTooltip())) {
//                 //console.log('remove tooltip');
//                 layer.unbindTooltip();
//             }
//         });
//     }

//     if (map.hasLayer(geo_po_rumah_sakit)) {

//         geo_po_rumah_sakit.eachLayer(function(layer) {
//             if (zoom >= 10 && (!layer.getTooltip())) {
//                 if (layer.feature.administrasi.f8 == 'None') {
//                     var gmb = "rs.svg";
//                 } else {
//                     var gmb = layer.feature.administrasi.f8;
//                 }
//                 conten = `

//                         <div id="bottom-justified-data" style="text-align: center;">
//                             <div >
//                                 <img src="static/img/image/` + gmb + `" alt="Image" style="width: 150px!important;height: 125px;">
//                             </div>

//                             <div >
//                                 <div style="font-family: Google Sans,Roboto,Arial,sans-serif;
//                                 letter-spacing: 0">
//                                     <p >
//                                         ` + layer.feature.administrasi.f1 + `
//                                     </p>
//                                 </div>
//                             </div>
//                         </div>
//                     `;


//                 layer.bindTooltip(conten, {
//                     sticky: true,
//                     permanent: false,
//                     interactive: false,
//                     direction: 'top',
//                     offset: [0, -25],
//                     className: 'my-label'
//                 });
//             } else if (zoom < 10 && (layer.getTooltip())) {
//                 //console.log('remove tooltip');
//                 layer.unbindTooltip();
//             }
//         });
//     }

//     if (map.hasLayer(geo_po_spbu)) {

//         geo_po_spbu.eachLayer(function(layer) {
//             if (zoom >= 10 && (!layer.getTooltip())) {
//                 if (layer.feature.administrasi.f8 == 'None') {
//                     var gmb = "rs.svg";
//                 } else {
//                     var gmb = layer.feature.administrasi.f8;
//                 }
//                 conten = `

//                         <div id="bottom-justified-data" style="text-align: center;">
//                             <div >
//                                 <img src="static/img/image/` + gmb + `" alt="Image" style="width: 150px!important;height: 125px;">
//                             </div>

//                             <div >
//                                 <div style="font-family: Google Sans,Roboto,Arial,sans-serif;
//                                 letter-spacing: 0">
//                                     <p >
//                                         ` + layer.feature.administrasi.f1 + `
//                                     </p>
//                                 </div>
//                             </div>
//                         </div>
//                     `;

//                 layer.bindTooltip(conten, {
//                     sticky: true,
//                     permanent: false,
//                     interactive: false,
//                     direction: 'top',
//                     offset: [0, -25],
//                     className: 'my-label'
//                 });
//             } else if (zoom < 10 && (layer.getTooltip())) {
//                 //console.log('remove tooltip');
//                 layer.unbindTooltip();
//             }
//         });
//     }

//     if (map.hasLayer(geo_po_stasiun)) {

//         geo_po_stasiun.eachLayer(function(layer) {
//             if (zoom >= 10 && (!layer.getTooltip())) {
//                 if (layer.feature.administrasi.f8 == 'None') {
//                     var gmb = "rs.svg";
//                 } else {
//                     var gmb = layer.feature.administrasi.f8;
//                 }
//                 conten = `

//                         <div id="bottom-justified-data" style="text-align: center;">
//                             <div >
//                                 <img src="static/img/image/` + gmb + `" alt="Image" style="width: 150px!important;height: 125px;">
//                             </div>

//                             <div >
//                                 <div style="font-family: Google Sans,Roboto,Arial,sans-serif;
//                                 letter-spacing: 0">
//                                     <p >
//                                         ` + layer.feature.administrasi.f1 + `
//                                     </p>
//                                 </div>
//                             </div>
//                         </div>
//                     `;


//                 layer.bindTooltip(conten, {
//                     sticky: true,
//                     permanent: false,
//                     interactive: false,
//                     direction: 'top',
//                     offset: [0, -25],
//                     className: 'my-label'
//                 });
//             } else if (zoom < 10 && (layer.getTooltip())) {
//                 //console.log('remove tooltip');
//                 layer.unbindTooltip();
//             }
//         });
//     }


//     if (map.hasLayer(geo_po_terminal)) {

//         geo_po_terminal.eachLayer(function(layer) {
//             if (zoom >= 10 && (!layer.getTooltip())) {
//                 if (layer.feature.administrasi.f8 == 'None') {
//                     var gmb = "rs.svg";
//                 } else {
//                     var gmb = layer.feature.administrasi.f8;
//                 }
//                 conten = `
//                         <div id="bottom-justified-data" style="text-align: center;">
//                             <div >
//                                 <img src="static/img/image/` + gmb + `" alt="Image" style="width: 150px!important;height: 125px;">
//                             </div>

//                             <div >
//                                 <div style="font-family: Google Sans,Roboto,Arial,sans-serif;
//                                 letter-spacing: 0">
//                                     <p >
//                                         ` + layer.feature.administrasi.f1 + `
//                                     </p>
//                                 </div>
//                             </div>
//                         </div>
//                     `;


//                 layer.bindTooltip(conten, {
//                     sticky: true,
//                     permanent: false,
//                     interactive: false,
//                     direction: 'top',
//                     offset: [0, -25],
//                     className: 'my-label'
//                 });
//             } else if (zoom < 10 && (layer.getTooltip())) {
//                 //console.log('remove tooltip');
//                 layer.unbindTooltip();
//             }
//         });
//     }
// });

//klik kanan begin
map.on('contextmenu', function(e) {

    $("#modal_option_create").modal("show");
    $("#map-create-all").remove();




    $(".btn_create_jalan").click(function() {
        $("#create_all > div > ul").css("display", "block")
        $("#modal__create").modal("show");
        $(".title-create").html("Create Jalan")
        $(".tombol_action_create").html(`<input type="button" id="create-jal" value="Create" style="z-index: 1000;position:relative;">`)
        $(".tab_1").html("Koordinat")
        $(".tab_2").html("Informasi Jalan")
        $(".tombol_save_create").html(`<input type="button" class="btn btn-primary" id="create_save_jalan" value="SAVE" style="margin-right:30px;">
        <input type="text" name="poly_create" class="hidden" id="poly_create_jalan" value="">`)
        $("#koordinatjalan").html(`
                                    <div class="form-group">
                                        <div id="map-create-all" style="height: 300px;">
                                            <div class="tombol_action_create">
                                                <input type="button" id="create-jal" value="Create" style="z-index: 1000;position:relative;">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label" style="margin-top:10px">Image</label>
                                            <div class="col-lg-9" style="margin-top:10px">
                                                <input type="file" id="img_jalan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
                                            </div>
                                        </div>
                                    </div>`)



        $("#informasi_create").html(`
                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label lbl-top" style="margin-top: 15px;">Nama Jalan</label>
                                            <div class="col-lg-8">
                                                <input id="nama_jalan_create" type="text" class="form-control" value="" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label lbl-top" style="margin-top: 15px;">Panjang Jalan (m)</label>
                                            <div class="col-lg-8">
                                                <input id="panjang_jalan_create" type="text" class="form-control" value="" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label lbl-top" style="margin-top: 15px;">Lebar Jalan (m)</label>
                                            <div class="col-lg-8">
                                                <input id="lebar_jalan_create" type="text" class="form-control" value="" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label lbl-top" style="margin-top: 15px;">Tipe Jalan</label>
                                            <div class="col-lg-8">
                                                <input id="tipe_jalan_create" type="text" class="form-control" value="" required>
                                            </div>
                                        </div>
                                    </div>
                                    `);

        var map_create_all = L.map('map-create-all', {
            editable: true,
            zoomControl: false,
            drawControl: true
        }).setView([e.latlng.lat, e.latlng.lng], 20);

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

        setTimeout(function() {
            map_create_all.invalidateSize();
        }, 500);

        var lineDraweredit = new L.Draw.Polyline(map_create_all, polygon_options);

        lineDraweredit.on("click", function(event) {
            shapecoords.innerHTML = event.latlng.toString();
            map_create_all.fire("click", event); // Trigger a map click as well.
        });

        map_create_all.on('draw:created', function(e) {

            var type = e.layerType,
                layer = e.layer;

            layer.options.color = 'yellow';
            layer.options.weight = 10;
            var koordina = ""
            if (type === '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));
                e.layer.openPopup();

                $("#panjang_jalan_create").val((totalDistance).toFixed(2));
            }
            $("#poly_create_jalan").val(JSON.stringify(layer.toGeoJSON()));
            layer.addTo(map_create_all);
        });

        $("#create-jal").click(function() {
            lineDraweredit.enable();
        })
        $("#map-create-all>div.leaflet-control-container>div.leaflet-top.leaflet-left>div>div>div").css("display", "none")
        $("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div").css("display", "none")


    })
    $(".btn_create_bangunan").click(function() {
        $("#create_all > div > ul").css("display", "block")
        $("#modal__create").modal("show");
        $(".title-create").html("Create Bangunan")
        $(".tombol_action_create").html(`<input type="button" id="create" value="Create" style="z-index: 1000;position:relative;">`)
        $(".tab_1").html("Koordinat")
        $(".tab_2").html("Informasi Bangunan")
        $(".tombol_save_create").html(`<input type="button" class="btn btn-primary" id="create_save_bangunan" value="SAVE" style="margin-right:30px;">
        <input type="text" name="poly_create" class="hidden" id="poly_create_bangunan" value="">`)
        $("#koordinatjalan").html(`
                                    <div class="form-group">
                                        <div id="map-create-all" style="height: 300px;">
                                            <div class="tombol_action_create">
                                                <input type="button" id="create" value="Create" style="z-index: 1000;position:relative;">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label" style="margin-top:10px">Image</label>
                                            <div class="col-lg-9" style="margin-top:10px">
                                                <input type="file" id="img_bangunan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
                                            </div>
                                        </div>
                                    </div>`)

        $("#informasi_create").html(`
                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label lbl-top" >Nama Bangunan</label>
                                            <div class="col-lg-9">
                                                <input id="name_create" type="text" class="form-control" value="" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label lbl-top" >Jenis Bangunan</label>
                                            <div class="col-lg-9">
                                                <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;" id="tipe_point_b" data-placeholder="select point.." class="select-size-md">
                                                    <option value="null" selected disabled>-- Pilih Jenis Point --</option>
                                                    <option value="bangunan">Bangunan Biasa</option>
                                                    <option value="kantor_administrasi">Kantor Administrasi</option>
                                                    <option value="layanan_kesehatan">Layanan Kesehatan</option>
                                                    <option value="puskesmas">Puskesmas</option>
                                                    <option value="rumah_sakit">Rumah Sakit</option>
                                                    <option value="sarana_ibadah">Sarana Ibadah</option>
                                                    <option value="sarana_pendidikan">Sarana Pendidikan</option>
                                                    <option value="stasiun">Stasiun</option>
                                                    <option value="terminal_bus">Terminal Bus</option>
                                                    <option value="cagar_budaya">Cagar Budaya dan Tempat Wisata</option>
                                                    <option value="gardu_listrik">Gardu Listrik</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label lbl-top" >Tipe Bangunan</label>
                                            <div class="col-lg-9">
                                                <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;width: 220px;" id="tipe_point_2_b" data-placeholder="select point.." class="select-size-md">
                                                    <option value="null" selected disabled>-- Pilih Tipe Point --</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label lbl-top" >Nama Point</label>
                                            <div class="col-lg-9">
                                                <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;width: 220px;" id="tipe_point_3_b" data-placeholder="select point.." class="select-size-md">
                                                    <option value="null" selected disabled>-- Pilih Point --</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label lbl-top" >Informasi Bangunan</label>
                                            <div class="col-lg-9">
                                                <input id="info_create" type="text" class="form-control" value="" placeholder="Rumah/Gedung/Ruko/Pabrik/dsb" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label lbl-top" >Alamat</label>
                                            <div class="col-lg-9">
                                                <input id="alamat_create" type="text" class="form-control" value="" placeholder="cth : Jl. Contoh Rt 005/01 No.01" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label lbl-top" >Luas Bangunan</label>
                                            <div class="col-lg-6">
                                                <input id="luas_bangunan_create" type="text" class="form-control" value="" required>
                                            </div>
                                            <div class="col-lg-3">
                                                <select id="satuan_luas_bangunan" >
                                                    <option>m2</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label lbl-top">Luas Tanah</label>
                                            <div class="col-lg-6">
                                                <input id="luas_tanah_create" type="text" class="form-control" value="" required>
                                            </div>
                                            <div class="col-lg-3">
                                                <select id="satuan_luas_tanah">
                                                    <option>m2</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label lbl-top">Tinggi Bangunan</label>
                                            <div class="col-lg-6">
                                                <input id="tinggi_bangunan_create" type="text" class="form-control" value="" required>
                                            </div>
                                            <div class="col-lg-3">m</div>
                                        </div>
                                    </div>

                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label lbl-top">Jumlah Lantai</label>
                                            <div class="col-lg-9">
                                                <input id="lantai" type="text" class="form-control" value="" placeholder="Estimasi Per Lantai = 3m" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label lbl-top" >Pemilik</label>
                                            <div class="col-lg-9">
                                                <input id="pemilik_create" type="text" class="form-control" value="" placeholder="cth : Ali Budiman, S.Si." required>
                                            </div>
                                        </div>
                                    </div>
                                    `);

        var map_create_all = L.map('map-create-all', {
            editable: true,
            zoomControl: false,
            drawControl: true
        }).setView([e.latlng.lat, e.latlng.lng], 20);

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

        setTimeout(function() {
            map_create_all.invalidateSize();
        }, 500);

        $('#create').click(function() {
            polygonDraweredit.enable();
        });

        var Marker = {};
        var Poly = {};

        map_create_all.on(L.Draw.Event.CREATED, function(e) {
            var layer = e.layer;

            $("#poly_create_bangunan").empty();

            var type = e.layerType;
            var layer = e.layer;

            var shape = layer.toGeoJSON();
            let geoShape = shape.geometry.coordinates[0];

            let kordinat = "";
            for (j in geoShape) {

                kordinat += geoShape[j][0] + ' ' + geoShape[j][1];

                if (j <= (geoShape.length - 2)) {
                    kordinat += ', ';
                }
            }
            window.thisBaseDrawPolygonLayer = layer;
            $("#poly_create_bangunan").val(JSON.stringify(kordinat));
            var seeArea = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
            var fixarea = seeArea.toFixed(3)
            $("#luas_bangunan_create").val(fixarea);
        });

        polygon_options = {
            showArea: false,
            shapeOptions: {
                stroke: true,
                color: '#6e83f0',
                weight: 1.5,
                opacity: 2,
                fill: false,
                fillColor: null, //same as color by default
                clickable: true
            }
        }

        var polygonDraweredit = new L.Draw.Polygon(map_create_all, polygon_options);

        polygonDraweredit.on("click", function(event) {
            shapecoords.innerHTML = event.latlng.toString();
            map_create_all.fire("click", event); // Trigger a map click as well.
        });

        map_create_all.on('draw:created', function(e) {
            var type = e.layerType,
                layer = e.layer;

            var lay = layer.addTo(map_create_all);
            Poly = lay;
        });

        $("#tipe_point_b").change(function() {
            var tipe = $(this).val();

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

        $("#tipe_point_2_b").change(function() {
            var jenis = $(this).val();
            var tipx = $("#tipe_point_b").val();

            $.ajax({
                url: "api/change-jenis",
                data: {
                    'tipe': tipx,
                    'jenis': jenis
                },
                dataType: 'json',
                success: function(data) {
                    // console.log(data)
                    var data_all_kab = []
                    for (var i = 0; i < data['result'].length; i++) {
                        var data_id = data['result'][i][0];
                        var data_po = data['result'][i][1];
                        var data_kab = `<option value="` + data_id + `">` + data_po + `</option>`;
                        data_all_kab.push(data_kab)
                    };
                    $('#tipe_point_3_b').html(`<option value="null" selected disabled>-- Pilih Point --</option>` + data_all_kab);
                }
            });
        });
        $("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div").css("display", "none")
    });

    $(".btn_create_lahan").click(function() {
        $("#create_all > div > ul").css("display", "block")
        $("#modal__create").modal("show");
        $(".title-create").html("Create Lahan")
        $(".tombol_action_create").html(`<input type="button" id="create" value="Create" style="z-index: 1000;position:relative;">`)
        $(".tab_1").html("Koordinat")
        $(".tab_2").html("Informasi Lahan")
        $(".tombol_save_create").html(`<input type="button" class="btn btn-primary" id="create_save_lahan" value="SAVE" style="margin-right:30px;">
        <input type="text" name="poly_create" class="hidden" id="poly_create_lahan" value="">`)
        $("#koordinatjalan").html(`
                                    <div class="form-group">
                                        <div id="map-create-all" style="height: 300px;">
                                            <div class="tombol_action_create">
                                                <input type="button" id="create" value="Create" style="z-index: 1000;position:relative;">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label" style="margin-top:10px">Image</label>
                                            <div class="col-lg-9" style="margin-top:10px">
                                                <input type="file" id="img_lahan" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
                                            </div>
                                        </div>
                                    </div>`)

        $("#informasi_create").html(`
                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label lbl-top" >Nama Lahan</label>
                                            <div class="col-lg-9">
                                                <input id="name_create" type="text" class="form-control" value="" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label lbl-top" >Jenis Lahan</label>
                                            <div class="col-lg-9">
                                                <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;" id="tipe_point_lahan" data-placeholder="select point.." class="select-size-md">
                                                    <option value="null" selected disabled>-- Pilih Jenis Lahan --</option>
                                                    <option value="Belukar">Belukar</option>
                                                    <option value="Belukar Rawa">Belukar Rawa</option>
                                                    <option value="Hutan Lahan Kering Primer">Hutan Lahan Kering Primer</option>
                                                    <option value="Hutan Lahan Kering Sekunder">Hutan Lahan Kering Sekunder</option>
                                                    <option value="Hutan Tanaman">Hutan Tanaman</option>
                                                    <option value="Pemukiman">Pemukiman</option>
                                                    <option value="Perkebunan">Perkebunan</option>
                                                    <option value="Pertambangan">Pertambangan</option>
                                                    <option value="Pertanian Lahan Kering">Pertanian Lahan Kering</option>
                                                    <option value="Pertanian Lahan Kering Campur">Pertanian Lahan Kering Campur</option>
                                                    <option value="Savana / Padang rumput">Savana / Padang rumput</option>
                                                    <option value="Sawah">Sawah</option>
                                                    <option value="Tanah Terbuka">Tanah Terbuka</option>
                                                    <option value="Transmigrasi">Transmigrasi</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label lbl-top" >Tahun</label>
                                            <div class="col-lg-9">
                                                <input id="tahun_create" type="text" class="form-control" value="" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label lbl-top" >Luas Lahan</label>
                                            <div class="col-lg-6">
                                                <input id="luas_lahan_create" type="text" class="form-control" value="" required>
                                            </div>
                                            <div class="col-lg-3" style="margin-top:8px;">
                                                <span>m2</span>
                                            </div>
                                        </div>
                                    </div>
                                    `);

        var nowyear = new Date().getFullYear();
        $("#tahun_create").val(nowyear);

        var map_create_all = L.map('map-create-all', {
            editable: true,
            zoomControl: false,
            drawControl: true
        }).setView([e.latlng.lat, e.latlng.lng], 20);

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

        setTimeout(function() {
            map_create_all.invalidateSize();
        }, 500);

        $('#create').click(function() {
            polygonDraweredit.enable();
        });

        var Marker = {};
        var Poly = {};

        map_create_all.on(L.Draw.Event.CREATED, function(e) {
            var layer = e.layer;

            $("#poly_create_lahan").empty();

            var type = e.layerType;
            var layer = e.layer;

            var shape = layer.toGeoJSON();
            let geoShape = shape.geometry.coordinates[0];

            let kordinat = "";
            for (j in geoShape) {

                kordinat += geoShape[j][0] + ' ' + geoShape[j][1];

                if (j <= (geoShape.length - 2)) {
                    kordinat += ', ';
                }
            }
            window.thisBaseDrawPolygonLayer = layer;
            $("#poly_create_lahan").val(JSON.stringify(kordinat));
            var seeArea = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
            var fixarea = seeArea.toFixed(3)
            $("#luas_lahan_create").val(fixarea);

        });

        polygon_options = {
            showArea: false,
            shapeOptions: {
                stroke: true,
                color: '#6e83f0',
                weight: 1.5,
                opacity: 2,
                fill: false,
                fillColor: null, //same as color by default
                clickable: true
            }
        }

        var polygonDraweredit = new L.Draw.Polygon(map_create_all, polygon_options);

        //            polygonDraweredit.on("click", function(event) {
        //                shapecoords.innerHTML = event.latlng.toString();
        //                map_create_all.fire("click", event); // Trigger a map click as well.
        //            });

        map_create_all.on('draw:created', function(e) {
            var type = e.layerType,
                layer = e.layer;

            var lay = layer.addTo(map_create_all);
            Poly = lay;
        });

        $("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div").css("display", "none")
    });

    $(".btn_create_point").click(function() {
        $("#modal__create").modal("show");
        $(".title-create").html("Create Point")
        $(".tombol_action_create").html(``)
        $(".tab_1").html("Koordinat")
        $(".tab_2").html("Informasi Point")
        $("#create_all > div > ul").css("display", "block")
        $(".tombol_save_create").html(`<input type="button" class="btn btn-primary" id="btnsavepoint" value="SAVE">
        <input type="text" name="poly_create_point" class="hidden" id="poly_create_point" value="">`)

        $("#koordinatjalan").html(`
                                    <div class="form-group">
                                        <div id="map-create-all" style="height: 300px;">
                                            <!-- <div class="tombol_action_create">
                                                <input type="button" class="leaflet-draw-draw-marker" value="Create" style="z-index: 1000;position:relative;">
                                            </div> -->
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label" style="margin-top:10px">Image</label>
                                            <div class="col-lg-9" style="margin-top:10px">
                                                <input type="file" id="gambar_pitik" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
                                            </div>
                                        </div>
                                    </div>`)

        $("#informasi_create").html(`
        <div class="row" style="margin-top: 15px;">
            <div class="form-group">
                <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Nama Point</label>
                <div class="col-lg-9">
                    <input id="name_create_point" type="text" class="form-control" value="" required>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 15px;">
            <div class="form-group">
                <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Jenis Point</label>
                <div class="col-lg-9">
                    <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;" id="tipe_point" data-placeholder="select point.." class="select-size-md">
                        <option value="null" selected disabled>-- Pilih Jenis Point --</option>
                        <option value="kantor_administrasi">Kantor Administrasi</option>
                        <option value="layanan_kesehatan">Layanan Kesehatan</option>
                        <option value="puskesmas">Puskesmas</option>
                        <option value="rumah_sakit">Rumah Sakit</option>
                        <option value="sarana_ibadah">Sarana Ibadah</option>
                        <option value="sarana_pendidikan">Sarana Pendidikan</option>
                        <option value="stasiun">Stasiun</option>
                        <option value="terminal_bus">Terminal Bus</option>
                        <option value="cagar_budaya">Cagar Budaya dan Tempat Wisata</option>
                        <option value="gardu_listrik">Gardu Listrik</option>

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

        <div class="row" style="margin-top: 15px;">
            <div class="form-group">
                <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Tipe Point</label>
                <div class="col-lg-9">
                    <select style="border-bottom: 1px solid rgb(83, 83, 83) !important;width: 220px;" id="tipe_point_2" data-placeholder="select point.." class="select-size-md">
                        <option value="null" selected disabled>-- Pilih Tipe Point --</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 15px;">
            <div class="form-group">
                <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Alamat</label>
                <div class="col-lg-9">
                    <input id="alamat_create_point" type="text" class="form-control" value="" placeholder="cth : Jl. Contoh Rt 005/01 No.01" required>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 15px;">
            <div class="form-group">
                <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Luas Tanah</label>
                <div class="col-lg-6">
                    <input id="luas_tanah_point" type="text" class="form-control" value="" required>
                </div>
                <div class="col-lg-3">
                    <select id="satuan_luas_tanah" style="margin-top: 15px;">
                            <option>m2</option>
                        </select>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 15px;">
            <div class="form-group">
                <label class="col-lg-3 control-label lbl-top" style="margin-top: 15px;">Pimpinan</label>
                <div class="col-lg-9">
                    <input id="pemilik_point" type="text" class="form-control" value="" placeholder="cth : Ali Budiman, S.Si." required>
                </div>
            </div>
        </div>
                                    `);


        var map_create_all = L.map('map-create-all', {
            editable: true,
            zoomControl: false,
            drawControl: true
        }).setView([e.latlng.lat, e.latlng.lng], 20.5);

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

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

        $(".leaflet-draw-draw-marker").html('<span>Create</span>')

        var drawControl = new L.Control.Draw(drawPluginOptions);
        map_create_all.addControl(drawControl);

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

        // define custom marker
        var MyCustomMarker = L.Icon.extend({
            options: {
                shadowUrl: null,
                iconAnchor: new L.Point(12, 12),
                iconSize: new L.Point(24, 24),
            }
        });

        var drawPluginOptions = {
            position: 'topright',
            draw: {
                marker: {
                    title: "soyel1",
                    icon: new MyCustomMarker()
                },
                marker: true
            },
            edit: {
                featureGroup: editableLayers, //REQUIRED!!
                remove: true
            }
        };

        var drawControl = new L.Control.Draw(drawPluginOptions);
        map_create_all.addControl(drawControl);

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

        map_create_all.on('draw:created', function(e) {
            var type = e.layerType,
                layer = e.layer;

            editableLayers.addLayer(layer);
            $("#poly_create_point").val(JSON.stringify(layer.toGeoJSON()));
            $("#modal_point").modal()
            map.closePopup();
        });

        $("#tipe_point").change(function() {
            var tipe = $(this).val();

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

        $("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div:nth-child(2) > div > div").css("display", "none")
        $(".leaflet-draw-draw-marker").css("padding", "0px!important")
        $(".leaflet-draw-draw-marker").css("width", "100%!important")
        $("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-right").css("display", "none")
        $("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div:nth-child(1) > div > div > a.leaflet-draw-draw-polyline").css("display", "none")
        $("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div:nth-child(2) > div > div > a.leaflet-draw-draw-marker").css("display", "block!important")

    })

    $(".btn_cek_KDBKLB").click(function() {
        $("#koordinatjalan").addClass("active")
        $("#informasi_create").removeClass("active")
        $("#tab_koor").addClass("active")
        $("#tab_info").removeClass("active")
        $("#modal__create").modal("show");
        $(".title-create").html("Cek KDB & KLB")
        $(".tombol_save_create").html('')
        $(".tab_1").html("Koordinat")
        $(".tab_2").html("Informasi")
        $("#create_all > div > ul").css("display", "none")
        $("#koordinatjalan").html(`
                                    <div class="jumlah_lantai" style="margin-top: -15px;">jumlah_lantai : 0
                                    </div>
                                    <div class="form-group">
                                        <div id="map-create-all" style="height: 300px;">
                                            <!-- <div class="tombol_action_create">
                                                <input type="button" class="leaflet-draw-draw-marker" value="Create" style="z-index: 1000;position:relative;">
                                            </div> -->
                                            <div style="margin:10px;">
                                                <input type="button" id="create_poly_rumah" value="Create Polygon Rumah" style="z-index: 1000;position:relative;border: transparent;border-radius: 5px;display:none;">
                                                <input type="button" id="create_poly_tanah" value="Create Polygon Tanah" style="z-index: 1000;position:relative;border: transparent;border-radius: 5px;background: antiquewhite;">
                                                <input type="button" id="delete_poly" value="Reset" style="z-index: 1000;position:relative;background: azure;border: transparent;border-radius: 5px;display:none;margin-top: 5px;">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                
                                                <div class="row" style="margin-top: 5px;margin-right:5px!important;">
                                                    <div class="form-group">
                                                        <label class="control-label lbl-top">Luas Lantai (m2)</label>
                                                        <div class="">
                                                            <input id="luas_polygon_lantai" type="text" class="form-control" value="" required>
                                                        </div>
                                                        <div class="alert alert-danger" id="notificationluaslantai" style="display: none;margin: 0px;padding-top: 0px;padding-bottom: 0px;font-size: 10px;position: absolute;top: -5px;left: 110px;">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row" style="margin-top: 5px;margin-right:5px!important;">
                                                    <div class="form-group">
                                                        <label class="control-label lbl-top">Luas Rumah (m2)</label>
                                                        <div class="">
                                                            <input id="luas_polygon_rumah" type="text" class="form-control" value="" required>
                                                        </div>
                                                        <div class="alert alert-danger" id="notificationluasrumah" style="display: none;margin: 0px;padding-top: 0px;padding-bottom: 0px;font-size: 10px;position: absolute;top: -5px;left: 110px;">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row" style="margin-top: 5px;margin-right:5px!important;">
                                                    <div class="form-group">
                                                        <label class="control-label lbl-top">Luas Tanah (m2)</label>
                                                        <div class="">
                                                            <input id="luas_polygon_tanah" type="text" class="form-control" value="" required>
                                                        </div>
                                                        <div class="alert alert-danger" id="notificationluastanah" style="display: none;margin: 0px;padding-top: 0px;padding-bottom: 0px;font-size: 10px;position: absolute;top: -5px;left: 110px;">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="row" style="margin-top: 5px;margin-left:5px!important;">
                                                    <div class="form-group">
                                                        <label class="control-label lbl-top">Sisa Luas Tanah (m2):</label>
                                                        <div class="">
                                                            <input id="sisa_luas_tanah" type="text" class="form-control" value="" required disabled>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="row" style="margin-top: 5px;margin-left:5px!important;">
                                                    <div class="form-group">
                                                        <label class="control-label lbl-top">KDB (%):</label>
                                                        <div class="">
                                                            <input id="KDB_polygon_rumah" type="text" class="form-control" value="" required disabled>
                                                        </div>
                                                    </div>
                                                </div>
                                    
                                                <div class="row" style="margin-top: 5px;margin-left:5px!important;">
                                                    <div class="form-group">
                                                        <label class="control-label lbl-top">KLB :</label>
                                                        <div class="">
                                                            <input id="KLB_polygon_rumah" type="text" class="form-control" value="" required disabled>
                                                        </div>
                                                    </div>
                                                </div>
    
                                            </div>
                                        </div>
                                    </div>`)

        $("#informasi_create").html(``);

        var map_create_all = L.map('map-create-all', {
            editable: true,
            zoomControl: false,
            drawControl: true
        }).setView([e.latlng.lat, e.latlng.lng], 20.5);

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

        setTimeout(function() {
            map_create_all.invalidateSize();
        }, 500);

        $("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div > div > div").css("display", "none")


        $("#create_poly_rumah").click(function() {

            polygonDraweredit.enable();
            $("#create_poly_tanah").val('tambah polygon rumah')
        })

        $("#create_poly_tanah").click(function() {
            $('#create_poly_rumah').css("display", "block")
            $('#create_poly_tanah').css("display", "none")
            $('#delete_poly').css("display", "block")

            polygonDraweredit_tanah.enable();


        })

        //            function get_luas(lt_p, lo_p) {
        //                var lt_po = lt_p
        //                var lo_po = lo_p
        //
        //                var lat_rad = []
        //                var YY = []
        //                var XX = []
        //                var area = []
        //
        //                for (var i = 0; i < lt_po.length; i++) {
        //                    lt_rad = lt_po[i] / 180 * (22 / 7)
        //                    lat_rad.push(lt_rad)
        //                }
        //
        //                for (var y = 0; y < lt_po.length; y++) {
        //                    if (y == 0 || y == lt_po.length - 1) {
        //                        YY.push(0)
        //                    } else {
        //                        yyy = (lt_po[y] - lt_po[0]) / 360 * (6378137 * 2 * (22 / 7))
        //                        YY.push(yyy)
        //                    }
        //                }
        //
        //                for (var x = 0; x < lo_po.length; x++) {
        //                    if (x == 0 || x == lo_po.length - 1) {
        //                        XX.push(0)
        //                    } else {
        //                        xxx = (lo_po[x] - lo_po[0]) / 360 * (6378137 * 2 * (22 / 7) * Math.cos(lat_rad[x]))
        //                        XX.push(xxx)
        //                    }
        //                }
        //
        //                for (var i = 0; i < lo_po.length; i++) {
        //                    if (i == 0 || i == lo_po.length - 1) {
        //                        area.push(0)
        //                    } else {
        //                        are = ((YY[i - 1] * XX[i]) - (XX[i - 1] * YY[i])) / 2
        //                        area.push(are)
        //                    }
        //                }
        //
        //                function getSum(total, num) {
        //                    return total + Math.round(num);
        //                }
        //
        //                var luas_area = area.reduce(getSum, 0)
        //                return luas_area
        //            }



        var luas_all = []
        window.thisBaseDrawPolygonLayer = [];

        map_create_all.on(L.Draw.Event.CREATED, function(e) {
            var type = e.layerType;
            var layer = e.layer;

            var shape = layer.toGeoJSON();
            let geoShape = shape.geometry.coordinates[0];

            let kordinat = "";

            for (j in geoShape) {
                kordinat += geoShape[j][0] + ' ' + geoShape[j][1];
                if (j <= (geoShape.length - 2)) {
                    kordinat += ', ';
                }
            }

            var seeArea = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
            var fixarea = seeArea.toFixed(3)

            luas_all.push(fixarea)
            if (luas_all.length > 1) {
                var luas_tanah = luas_all[0]
                var luas_rumah = luas_all[1]
                var luas_lantai = luas_all[1]
                var jumlah_lantai = luas_all - 1

                $("#luas_polygon_rumah").val(parseFloat(luas_rumah).toFixed(2))
                $("#luas_polygon_tanah").val(parseFloat(luas_tanah).toFixed(2))

                $("#sisa_luas_tanah").val((luas_all[0] - luas_all[1]).toFixed(2))
                var aaa = 0


                if (luas_all.length > 2) {
                    var array_lan = luas_all.slice(2)
                    for (var i = 0; i < array_lan.length; i++) {
                        luas_lantai = parseFloat(luas_lantai) + parseFloat(array_lan[i])
                    }
                }

                $("#luas_polygon_lantai").val(parseFloat(luas_lantai).toFixed(2))
                $(".jumlah_lantai").html("jumlah lantai : " + (luas_all.length - 1))

                var klb = luas_lantai / luas_tanah
                var kdb = luas_rumah / luas_tanah * 100

                $("#KDB_polygon_rumah").val(parseFloat(kdb).toFixed(2))
                $("#KLB_polygon_rumah").val(parseFloat(klb).toFixed(2))

            }

            window.thisBaseDrawPolygonLayer.push(layer);
        });


        polygon_options = {
            showArea: false,
            shapeOptions: {
                stroke: true,
                color: '#6e83f0',
                weight: 1.5,
                opacity: 2,
                fill: true,
                fillColor: null, //same as color by default
                fillOpacity: 0.3,
                clickable: true
            }
        }

        polygon_options_tanah = {
            showArea: false,
            shapeOptions: {
                stroke: true,
                color: '#fff',
                weight: 1.5,
                opacity: 2,
                fill: true,
                fillColor: null, //same as color by default
                fillOpacity: 0.3,
                clickable: true
            }
        }

        var polygonDraweredit_tanah = new L.Draw.Polygon(map_create_all, polygon_options_tanah);
        var polygonDraweredit = new L.Draw.Polygon(map_create_all, polygon_options);

        //            polygonDraweredit.on("click", function(event) {
        //                shapecoords.innerHTML = event.latlng.toString();
        //                map_create_all.fire("click", event); // Trigger a map click as well.
        //            });
        //
        //            polygonDraweredit_tanah.on("click", function(event) {
        //                var type = event.layerType;map_
        //                shapecoords.innerHTML = event.latlng.toString();
        //                map_create_all.fire("click", event); // Trigger a map click as well.
        //            });


        map_create_all.on('draw:created', function(e) {
            var type = e.layerType,
                layer = e.layer;

            var lay = layer.addTo(map_create_all);
            Poly = lay;
        });

        $("#delete_poly").click(function() {
            if (window.thisBaseDrawPolygonLayer != []) {
                for (var i = 0; i < window.thisBaseDrawPolygonLayer.length; i++) {
                    window.thisBaseDrawPolygonLayer[i].remove()
                }
                window.thisBaseDrawPolygonLayer = [];
                luas_all = [];

                $('#create_poly_rumah').css("display", "none")
                $('#create_poly_tanah').css("display", "block")
                $(".jumlah_lantai").html("jumlah lantai : 0")
                $("#luas_polygon_rumah").val("")
                $("#luas_polygon_tanah").val("")
                $("#luas_polygon_lantai").val("")
                $("#KDB_polygon_rumah").val("")
                $("#KLB_polygon_rumah").val("")
                $("#sisa_luas_tanah").val("")

            }

        });

        function isi_all() {
            var luas_rumah = $("#luas_polygon_rumah").val()
            var luas_tanah = $("#luas_polygon_tanah").val()
            var luas_lantai = $("#luas_polygon_lantai").val()

            if (luas_rumah == null) {
                luas_rumah = 1
            }

            if (luas_tanah == null) {
                luas_tanah = 1
            }

            if (luas_lantai == null) {
                luas_lantai = 1
            }

            var klb = luas_lantai / luas_tanah
            var kdb = luas_rumah / luas_tanah * 100

            $("#sisa_luas_tanah").val(luas_tanah - luas_rumah)
            $("#KDB_polygon_rumah").val(kdb)
            $("#KLB_polygon_rumah").val(klb)
        }

        $('#luas_polygon_rumah').on('input', function() {
            isi_all()


            //                if (luas_tanah.indexOf(' ') !== -1 && luas_tanah != null) {
            //                    var luas_tanah_ret = luas_tanah.split(" ")[0]
            //                } else if (luas_tanah.indexOf(' ') === -1 && luas_tanah != null) {
            //                    var luas_tanah_ret = luas_tanah
            //                }
            //
            //                if (luas_tanah !== null) {
            //                    try {
            //
            //                        luas_tanah_ret = convert_to_float(luas_tanah)
            //                    } catch {
            //                        $("#notificationluastanah").css("display", "block")
            //                        $("#notificationluastanah").html("Pastikan yang anda masukan adalah angka")
            //                    }
            //                }

        });
        $('#luas_polygon_tanah').on('input', function() {
            isi_all()
        });
        $('#luas_polygon_lantai').on('input', function() {
            isi_all()
        });

    })

    $(".btn_cek_PBB").click(function() {
        $("#koordinatjalan").addClass("active")
        $("#informasi_create").removeClass("active")
        $("#tab_koor").addClass("active")
        $("#tab_info").removeClass("active")
        $("#modal__create").modal("show");
        $(".title-create").html("Cek PBB")
        $(".tombol_save_create").html('')
        $(".tab_1").html("Koordinat")
        $(".tab_2").html("Informasi")
        $("#create_all > div > ul").css("display", "none")
        $("#koordinatjalan").html(`
                                    <div class="jumlah_lantai" style="margin-top: -15px;">jumlah_lantai : 0
                                    </div>
                                    <div class="form-group">
                                        <div id="map-create-all" style="height: 300px;">
                                            <!-- <div class="tombol_action_create">
                                                <input type="button" class="leaflet-draw-draw-marker" value="Create" style="z-index: 1000;position:relative;">
                                            </div> -->
                                            <div style="margin:10px;">
                                                <input type="button" id="create_poly_rumah" value="Create Polygon Rumah" style="z-index: 1000;position:relative;border: transparent;border-radius: 5px;display:none;">
                                                <input type="button" id="create_poly_tanah" value="Create Polygon Tanah" style="z-index: 1000;position:relative;border: transparent;border-radius: 5px;background: antiquewhite;">
                                                <input type="button" id="delete_poly" value="Reset" style="z-index: 1000;position:relative;background: azure;border: transparent;border-radius: 5px;display:none;margin-top: 5px;">
                                            </div>
                                        </div>
                                        <div class="row">

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

                                                <div class="row" style="margin-top: 5px;margin-right:5px!important;">
                                                    <div class="form-group">
                                                        <label class="control-label lbl-top">Luas Rumah (m2)</label>
                                                        <div class="">
                                                            <input id="luas_polygon_rumah" type="text" class="form-control" value="" required>
                                                        </div>
                                                        <div class="alert alert-danger" id="notificationluasrumah" style="display: none;margin: 0px;padding-top: 0px;padding-bottom: 0px;font-size: 10px;position: absolute;top: -5px;left: 110px;">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row" style="margin-top: 5px;margin-right:5px!important;">
                                                    <div class="form-group">
                                                        <label class="control-label lbl-top">Luas Tanah (m2)</label>
                                                        <div class="">
                                                            <input id="luas_polygon_tanah" type="text" class="form-control" value="" required>
                                                        </div>
                                                        <div class="alert alert-danger" id="notificationluastanah" style="display: none;margin: 0px;padding-top: 0px;padding-bottom: 0px;font-size: 10px;position: absolute;top: -5px;left: 110px;">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row" style="margin-top: 5px;margin-right:5px!important;">
                                                    <div class="form-group">
                                                        <label class="control-label lbl-top">NJOP dasar PBB : (Rp)</label>
                                                        <div class="">
                                                            <input id="nilai_njop_pbb" type="text" class="form-control" value="" required disabled>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row" style="margin-top: 5px;margin-right:5px!important;">
                                                    <div class="form-group">
                                                        <label class="control-label lbl-top">NJKP : (Rp)</label>
                                                        <div class="">
                                                            <input id="nilai_njkp" type="text" class="form-control" value="" required disabled>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

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

                                                <div class="row" style="margin-top: 5px;margin-left:5px!important;">
                                                    <div class="form-group">
                                                        <label class="control-label lbl-top">NJOP Bangunan Per m2 : (Rp)</label>
                                                        <div class="">
                                                            <input id="nilai_njop_bangunan" type="text" class="form-control" value="" required>
                                                        </div>
                                                        <div class="alert alert-danger" id="notificationluaslantai" style="display: none;margin: 0px;padding-top: 0px;padding-bottom: 0px;font-size: 10px;position: absolute;top: -5px;left: 110px;">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row" style="margin-top: 5px;margin-left:5px!important;">
                                                    <div class="form-group">
                                                        <label class="control-label lbl-top">NJOP Bumi Per m2 : (Rp)</label>
                                                        <div class="">
                                                            <input id="nilai_njop_bumi" type="text" class="form-control" value="" required>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row" style="margin-top: 5px;margin-left:5px!important;">
                                                    <div class="form-group">
                                                        <label class="control-label lbl-top">NJOPTKP: (Rp)</label>
                                                        <div class="">
                                                            <input id="nilai_njop_tkp" type="text" class="form-control" value="0" required>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row" style="margin-top: 5px;margin-left:5px!important;">
                                                    <div class="form-group">
                                                        <label class="control-label lbl-top">PBB : (Rp)</label>
                                                        <div class="">
                                                            <input id="nilai_jml_pbb" type="text" class="form-control" value="" required disabled>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                    </div>`)

        $("#informasi_create").html(``);

        var map_create_all = L.map('map-create-all', {
            editable: true,
            zoomControl: false,
            drawControl: true
        }).setView([e.latlng.lat, e.latlng.lng], 20.5);

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

        setTimeout(function() {
            map_create_all.invalidateSize();
        }, 500);

        $("#map-create-all > div.leaflet-control-container > div.leaflet-top.leaflet-left > div > div > div").css("display", "none")


        $("#create_poly_rumah").click(function() {

            polygonDraweredit.enable();
            $("#create_poly_tanah").val('tambah polygon rumah')
        })

        $("#create_poly_tanah").click(function() {
            $('#create_poly_rumah').css("display", "block")
            $('#create_poly_tanah').css("display", "none")
            $('#delete_poly').css("display", "block")

            polygonDraweredit_tanah.enable();
        })

        var luas_all = []
        window.thisBaseDrawPolygonLayer = [];

        map_create_all.on(L.Draw.Event.CREATED, function(e) {
            var type = e.layerType;
            var layer = e.layer;

            var shape = layer.toGeoJSON();
            let geoShape = shape.geometry.coordinates[0];

            let kordinat = "";

            for (j in geoShape) {
                kordinat += geoShape[j][0] + ' ' + geoShape[j][1];
                if (j <= (geoShape.length - 2)) {
                    kordinat += ', ';
                }
            }

            var seeArea = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
            var fixarea = seeArea.toFixed(3)

            luas_all.push(fixarea)
            if (luas_all.length > 1) {
                var luas_tanah = luas_all[0]
                var luas_rumah = luas_all[1]
                var luas_lantai = luas_all[1]
                var jumlah_lantai = luas_all - 1

                $("#luas_polygon_rumah").val(parseFloat(luas_rumah).toFixed(2))
                $("#luas_polygon_tanah").val(parseFloat(luas_tanah).toFixed(2))

                $("#sisa_luas_tanah").val((luas_all[0] - luas_all[1]).toFixed(2))
                var aaa = 0


                // if (luas_all.length > 2) {
                //     var array_lan = luas_all.slice(2)
                //     for (var i = 0; i < array_lan.length; i++) {
                //         luas_lantai = parseFloat(luas_lantai) + parseFloat(array_lan[i])
                //     }
                // }

                // $("#luas_polygon_lantai").val(parseFloat(luas_lantai).toFixed(2))
                // $(".jumlah_lantai").html("jumlah lantai : " + (luas_all.length - 1))

                // var klb = luas_lantai / luas_tanah
                // var kdb = luas_rumah / luas_tanah * 100

                // $("#KDB_polygon_rumah").val(parseFloat(kdb).toFixed(2))
                // $("#KLB_polygon_rumah").val(parseFloat(klb).toFixed(2))

            }

            window.thisBaseDrawPolygonLayer.push(layer);
        });


        polygon_options = {
            showArea: false,
            shapeOptions: {
                stroke: true,
                color: '#6e83f0',
                weight: 1.5,
                opacity: 2,
                fill: true,
                fillColor: null, //same as color by default
                fillOpacity: 0.3,
                clickable: true
            }
        }

        polygon_options_tanah = {
            showArea: false,
            shapeOptions: {
                stroke: true,
                color: '#fff',
                weight: 1.5,
                opacity: 2,
                fill: true,
                fillColor: null, //same as color by default
                fillOpacity: 0.3,
                clickable: true
            }
        }

        var polygonDraweredit_tanah = new L.Draw.Polygon(map_create_all, polygon_options_tanah);
        var polygonDraweredit = new L.Draw.Polygon(map_create_all, polygon_options);

        //            polygonDraweredit.on("click", function(event) {
        //                shapecoords.innerHTML = event.latlng.toString();
        //                map_create_all.fire("click", event); // Trigger a map click as well.
        //            });
        //
        //            polygonDraweredit_tanah.on("click", function(event) {
        //                var type = event.layerType;map_
        //                shapecoords.innerHTML = event.latlng.toString();
        //                map_create_all.fire("click", event); // Trigger a map click as well.
        //            });


        map_create_all.on('draw:created', function(e) {
            var type = e.layerType,
                layer = e.layer;

            var lay = layer.addTo(map_create_all);
            Poly = lay;
        });

        $("#delete_poly").click(function() {
            if (window.thisBaseDrawPolygonLayer != []) {
                for (var i = 0; i < window.thisBaseDrawPolygonLayer.length; i++) {
                    window.thisBaseDrawPolygonLayer[i].remove()
                }
                window.thisBaseDrawPolygonLayer = [];
                luas_all = [];

                $('#create_poly_rumah').css("display", "none")
                $('#create_poly_tanah').css("display", "block")
                $(".jumlah_lantai").html("jumlah lantai : 0")
                $("#luas_polygon_rumah").val("")
                $("#luas_polygon_tanah").val("")
                $("#nilai_njop_bumi").val("")
                $("#nilai_njop_bangunan").val("")
                $("#nilai_njop_tkp").val("")
                $("#nilai_njop_pbb").val("")
                $("#nilai_njkp").val("")
                $("#nilai_jml_pbb").val("")

            }

        });

        function isi_all() {
            var luas_rumah = $("#luas_polygon_rumah").val()
            var luas_tanah = $("#luas_polygon_tanah").val()
            var njop_bumi = $("#nilai_njop_bumi").val()
            var njop_bang = $("#nilai_njop_bangunan").val()
            var njop_tkp = $("#nilai_njop_tkp").val()

            njop_bumi.toLocaleString()
            njop_bang.toLocaleString()

            if (luas_rumah == null) {
                luas_rumah = 0
            }

            if (luas_tanah == null) {
                luas_tanah = 0
            }

            if (njop_bumi == null) {
                njop_bumi = 0
            }

            if (njop_bang == null) {
                njop_bang = 0
            }

            if (njop_tkp == null) {
                njop_tkp = 0
            }

            t_njop_bumi = njop_bumi * luas_tanah
            t_njop_bang = njop_bang * luas_rumah
            njop_d_pbb = t_njop_bang + t_njop_bumi
            njkp_blm = njop_d_pbb - njop_tkp
            njkp = 40/100 * njkp_blm
            pbb = 0.5/100 *njkp
            // pbb.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            // var separ_pbb = pbb.toString().split(".");
            // separ_pbb.join(".")
            pbx = pbb.toFixed(2)

            $("#nilai_njop_pbb").val(njop_d_pbb.toLocaleString())
            $("#nilai_njkp").val(njkp.toLocaleString())
            $("#nilai_jml_pbb").val(pbb.toLocaleString())
        }

        $('#luas_polygon_rumah').on('input', function() {
            isi_all()


            //                if (luas_tanah.indexOf(' ') !== -1 && luas_tanah != null) {
            //                    var luas_tanah_ret = luas_tanah.split(" ")[0]
            //                } else if (luas_tanah.indexOf(' ') === -1 && luas_tanah != null) {
            //                    var luas_tanah_ret = luas_tanah
            //                }
            //
            //                if (luas_tanah !== null) {
            //                    try {
            //
            //                        luas_tanah_ret = convert_to_float(luas_tanah)
            //                    } catch {
            //                        $("#notificationluastanah").css("display", "block")
            //                        $("#notificationluastanah").html("Pastikan yang anda masukan adalah angka")
            //                    }
            //                }

        });
        $('#luas_polygon_tanah').on('input', function() {
            isi_all()
        });
        $('#luas_polygon_lantai').on('input', function() {
            isi_all()
        });
        $('#nilai_njop_bumi').on('input', function() {
            isi_all()
        });
        $('#nilai_njop_bangunan').on('input', function() {
            isi_all()
        });
        $('#nilai_njop_tkp').on('input', function() {
            isi_all()
        });

    })
});

$(document).on("click", "#informasi_poo", function() {
    var luas_rumah = $("#luas_polygon_rumah").val()
    var luas_tanah = $("#luas_polygon_tanah").val()
    if (luas_rumah != null) {
        var luas_rumah_ret = luas_rumah.split(" ")[0]
    } else {
        var luas_rumah_ret = 1
    }

    if (luas_tanah != null) {
        var luas_tanah_ret = luas_tanah.split(" ")[0]
    } else {
        var luas_tanah_ret = 1
    }

    var klb = luas_tanah_ret / luas_rumah_ret
    var kdb = luas_rumah_ret / luas_tanah_ret * 100

    $("#KDB_polygon_rumah").val(kdb + ' %')
    $("#KLB_polygon_rumah").val(klb)
})

$(document).on("click", "#create_save_jalan", function(e) {
    data = new FormData()
    data.append("gambar", $("input[id^='img_jalan']")[0].files[0]);
    data.append("polyline", $("#poly_create_jalan").val())
    data.append("name_jalan", $("#nama_jalan_create").val())
    data.append("panjang_jalan", $("#panjang_jalan_create").val())
    data.append("lebar_jalan", $("#lebar_jalan_create").val())
    data.append("tipe_jalan", $("#tipe_jalan_create").val())

    $.ajax({
        url: "api/create-jalan",
        data: data,
        dataType: 'json',
        type: 'POST',
        processData: false,
        contentType: false,
        success: function(data) {
            let response = data
            if (response.status == 0) {
                swal({
                    title: response.info,
                    text: response.data,
                    type: "success",
                    icon: "success",
                    confirmButtonColor: "#00BCD4"
                })
                $("#modal__create").modal("toggle");
                $("#modal_option_create").modal("toggle");

                // $("#modal_option_create").css("display", "none");
            } else {
                swal({
                    title: response.info,
                    text: response.data,
                    type: "warning",
                    icon: "error",
                    confirmButtonColor: "#00BCD4"
                })

            }
            map.closePopup();
        }
    });
});


$(document).on("click", "#create_save_bangunan", function(e) {
    var polygin = $('#poly_create_bangunan').val();
    var name_poly = $('#name_create').val();
    var tdb = $('#tipe_point_b').val();
    var remark = $('#tipe_point_2_b').val();
    var poin_id = $('#tipe_point_3_b').val();
    var napo = $("#tipe_point_3_b option:selected").text();
    var info_poly = $('#info_create').val();
    var alamat_poly = $('#alamat_create').val();
    var lb_poly = $('#luas_bangunan_create').val();
    var lt_poly = $('#luas_tanah_create').val();
    var tb_poly = $('#tinggi_bangunan_create').val();
    var ltbang = $('#lantai').val();
    var mpu_poly = $('#pemilik_create').val();

    $.ajax({
        url: "api/c_bangunan",
        data: {
            'polygon': polygin,
            'name': name_poly,
            'tipedb': tdb,
            'poin_id': poin_id,
            'nama_po': napo,
            'remark': remark,
            'info': info_poly,
            'alamat': alamat_poly,
            'lb': lb_poly,
            'lt': lt_poly,
            'tb': tb_poly,
            'ltb': ltbang,
            'pemilik': mpu_poly
        },
        dataType: 'json',
        // type: 'POST',
        // processData: false,
        // contentType: false,
        success: function(data) {
            let response = data
            if (response.status == 0) {
                swal({
                    title: response.info,
                    text: response.data,
                    type: "success",
                    icon: "success",
                    confirmButtonColor: "#00BCD4"
                })
                $("#modal__create").modal("toggle");
                $("#modal_option_create").modal("toggle");
                // $("#modal_option_create").css("display", "none");
            } else {
                swal({
                    title: response.info,
                    text: response.data,
                    type: "warning",
                    icon: "error",
                    confirmButtonColor: "#00BCD4"
                })

            }
            map.closePopup();
        }
    });
});

$(document).on("click", "#create_save_lahan", function(e) {
    var polygin = $('#poly_create_lahan').val();
    var name_poly = $('#name_create').val();
    var tdb = $('#tipe_point_lahan').val();
    var alamat_poly = $('#tahun_create').val();
    var lb_poly = $('#luas_lahan_create').val();
    $.ajax({
        url: "api/c_lahan",
        data: {
            'polygon': polygin,
            'name': name_poly,
            'tipelh': tdb,
            'tahun': alamat_poly,
            'luas': lb_poly,
        },
        dataType: 'json',
        // type: 'POST',
        // processData: false,
        // contentType: false,
        success: function(data) {
            let response = data
            if (response.status == 0) {
                swal({
                    title: response.info,
                    text: response.data,
                    type: "success",
                    icon: "success",
                    confirmButtonColor: "#00BCD4"
                })
                $("#modal__create").modal("toggle");
                $("#modal_option_create").modal("toggle");
                // $("#modal_option_create").css("display", "none");
            } else {
                swal({
                    title: response.info,
                    text: response.data,
                    type: "warning",
                    icon: "error",
                    confirmButtonColor: "#00BCD4"
                })

            }
            map.closePopup();
        }
    });
});


$(document).on("click", "#btnsavepoint", function(e) {
    data = new FormData()
    data.append("gambar", $("input[id^='gambar_pitik']")[0].files[0]);
    data.append("point", $("#poly_create_point").val())
    data.append("name_create_point", $("#name_create_point").val())
    data.append("tipe_point", $("#tipe_point").val())
    data.append("info_create_point", $("#tipe_point_2").val())
    data.append("alamat_create_point", $("#alamat_create_point").val())
    data.append("luas_tanah_point", $("#luas_tanah_point").val())
    data.append("pemilik_point", $("#pemilik_point").val())

    $.ajax({
        url: "api/create-point",
        data: data,
        dataType: 'json',
        type: 'POST',
        processData: false,
        contentType: false,
        success: function(data) {
            let response = data
            if (response.status == 0) {
                swal({
                    title: response.info,
                    text: response.data,
                    type: "success",
                    icon: "success",
                    confirmButtonColor: "#00BCD4"
                }, function() {
                    // $("#modal_point").css('display', 'none');
                    // location.reload();
                    $("#modal__create").modal("toggle");
                    $("#modal_option_create").modal("toggle");
                    // $("#modal_option_create").css("display", "none");
                })
            } else {
                swal({
                    title: response.info,
                    text: response.data,
                    type: "warning",
                    icon: "error",
                    confirmButtonColor: "#00BCD4"
                })

            }
            map.closePopup();
        }
    });
});