{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
    <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.css">

    <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>

    <!-- Global stylesheets -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
    <link href="{% static 'css/icons/icomoon/styles.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/core.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/components.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/colors.css' %}" rel="stylesheet" type="text/css">
    <script src="{% static 'js/Leaflet.Editables.js' %}"></script>

    <!-- /global stylesheets -->
    <style>
        .page-container {
            padding: 0;
            height: 100%;
        }
        
        .sidebar {
            padding: 0;
        }
        
        .form-group {
            margin-bottom: 0px;
        }
        
        .panel-body {
            padding: 0px 20px;
        }
        
        .row {
            margin-left: 0px;
            margin-right: 0px;
        }
        
         ::-webkit-scrollbar {
            width: 10px;
        }
        /* Track */
        
         ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        /* Handle */
        
         ::-webkit-scrollbar-thumb {
            background: #888;
        }
        /* Handle on hover */
        
         ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        
        .leaflet-control-container {
            display: none;
        }
    </style>
</head>

<body>

    <!-- Main navbar -->
    <!-- Main navbar -->
    <div class="navbar navbar-inverse">
        <div class="navbar-header">
            <a class="navbar-brand" href="{% url 'apps:dashboard' %}">
                <!-- <h3>NationalAddress</h3> -->
                <i class=" icon-location4"></i>
                <b>&nbsp;&nbsp;OKU-GIS</b>
            </a>

            <ul class="nav navbar-nav pull-right visible-xs-block">
                <li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li>
            </ul>
        </div>
        <div class="navbar-collapse collapse" id="navbar-mobile">

            <p class="navbar-text"><span class="label bg-success-400">Online</span></p>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown dropdown-user">
                    <a class="dropdown-toggle" data-toggle="dropdown">
                        <img src="{% static 'img/placeholder.jpg' %}" alt="">
                        <span>{{user.username}}</span>
                        <i class="caret"></i>
                    </a>

                    <ul class="dropdown-menu dropdown-menu-right">
                        <li><a href="#"><i class="icon-user-plus"></i> My profile</a></li>
                        <li><a href="#"><i class="icon-cog5"></i> Account settings</a></li>
                        <li class="divider"></li>

                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- /main navbar -->


    <!-- Page container -->
    <div class="page-container">

        <!-- Page content -->
        <div class="page-content">

            <!-- Main sidebar -->
            <div class="sidebar sidebar-main" style="height: 95vh;
            min-height: 607px;">
                <div class="sidebar-content" style="height: 100%;">

                    <!-- User menu -->
                    <div class="sidebar-user">
                        <div class="category-content">
                            <div class="media">
                                <a href="#" class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle img-sm" alt=""></a>
                                <div class="media-body">
                                    <span class="media-heading text-semibold">{{user.username}}</span>
                                    <div class="text-size-mini text-muted">
                                        <i class="icon-pin text-size-small"></i>
                                    </div>
                                </div>

                                <div class="media-right media-middle">
                                    <ul class="icons-list">
                                        <li>
                                            <a href="#"><i class="icon-cog3"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /user menu -->


                    <!-- Main navigation -->
                    <div class="sidebar-category sidebar-category-visible">
                        <div class="category-content no-padding">
                            <ul class="navigation navigation-main navigation-accordion">

                                <!-- Main -->
                                <li class="navigation-header"> <i class="icon-menu" title="Main pages"></i></li>
                                <li><a class="tablinks" onclick="openInfo(event, 'info-maps')" id="defaultOpen"><span>Kelurahan & Batas Wilayah</span></a></li>
                                <li><a class="tablinks" onclick="openInfo(event, 'info-penduduk')" id="defaultOpen"><span>Kependudukan</span></a></li>
                                <li><a class="tablinks" onclick="openInfo(event, 'info-pendidikan')" id="defaultOpen"><span>Pendidikan</span></a></li>
                                <li><a class="tablinks" onclick="openInfo(event, 'info-pekerjaan')" id="defaultOpen"><span>Pekerjaan</span></a></li>
                                <li><a class="tablinks" onclick="openInfo(event, 'info-poi')" id="defaultOpen"><span>POI</span></a></li>

                            </ul>
                            </li>
                            <!-- /page kits -->

                            </ul>
                        </div>
                    </div>
                    <!-- /main navigation -->

                </div>
            </div>
            <!-- /main sidebar -->


            <!-- Main content -->
            <div class="content-wrapper" id="info-maps">
                <div>
                    <!-- Page header -->
                    <div class="page-header page-header-default" style="margin-bottom: 0px;">
                        <div class="breadcrumb-line">
                            <ul class="breadcrumb">
                                <li>Informasi Maps Batas Desa & Kelurahan</li>
                            </ul>
                        </div>
                    </div>
                    <!-- /page header -->

                    <!-- Content area -->
                    <div class="content" style="padding: 15px;">
                        <!-- Main charts -->
                        <!-- Sales stats -->
                        <div class="panel panel-flat">
                            <div class="panel-heading">
                                <h6 class="panel-title">Informasi Kelurahan</h6>
                            </div>
                            <div class="panel-body form-horizontal form-validate-jquery">

                                <div class="row">
                                    <div class="col-lg-7">
                                        <div>
                                            <div id="map" class="map-container" style="padding-top: -100px; max-width:600px; max-height:385px;margin-bottom: 15px;"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <fieldset class="content-group">
                                            <input type="text" class="hidden" name="coordinatekel" id="coordinatekel" value="">
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label">Image</label>
                                                <div class="col-lg-9">
                                                    <input type="file" id="file" name="images[]" multiple accept="image/jpg,image/png,image/jpeg,image/gif">
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-lg-3 control-label">Kode Kelurahan/Desa:</label>
                                                <div class="col-lg-9">
                                                    <input type="text" name="kodekelurahan" id="kodekelurahan" class="form-control" value={{result_poly.administrasi.f1}}>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label">Kelurahan/Desa</label>
                                                <div class="col-lg-9">
                                                    <input type="text" name="kelurahan" id="kelurahan" class="form-control">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label">Kecamatan</label>
                                                <div class="col-lg-9">
                                                    <input type="text" name="kecamatan" id="kecamatan" class="form-control" value={{kec}}>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label">Kabupaten/Kota</label>
                                                <div class="col-lg-9">
                                                    <input type="text" name="kabupaten" id="kabupaten" class="form-control" value={{result_poly.administrasi.f4}}>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label">Provinsi:</label>
                                                <div class="col-lg-9">
                                                    <input type="text" name="provinsi" id="provinsi" class="form-control" value={{result_poly.administrasi.f5}}>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label">Luas Desa:</label>
                                                <div class="col-lg-9">
                                                    <input type="text" name="luasdesa" id="luasdesa" class="form-control" value={{result_poly.administrasi.f8}}>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </div>
                                    <div class="text-right">
                                        <!-- <button type="reset" class="btn btn-default" id="reset">Reset <i class="icon-reload-alt position-right"></i></button> -->
                                        <input id="savedatakelurahankel" class="btn btn-primary" value="SAVE" style="bottom: 15px;" data-toggle="modal" data-target="#modal_theme_info">
                                    </div>
                                </div>
                            </div>
                            <!-- /form validation -->
                        </div>
                    </div>
                    <!-- /main charts -->
                </div>
            </div>

            <div class="content-wrapper" id="info-penduduk" style="display: none;">
                <div>
                    <!-- Page header -->
                    <div class="page-header page-header-default" style="margin-bottom: 0px;">
                        <div class="breadcrumb-line">
                            <ul class="breadcrumb">
                                <li>KEPENDUDUKAN</li>
                            </ul>
                        </div>
                    </div>
                    <!-- /page header -->

                    <!-- Content area -->
                    <div class="content" style="padding: 15px;">
                        <!-- Main charts -->
                        <div class="row">
                            <div>
                                <!-- Traffic sources -->
                                <div class="panel panel-flat">
                                    <div class="panel-heading">
                                        <h6 class="panel-title">Informasi Kependudukan Desa {{result_poly.administrasi.f2}}</h6>
                                    </div>

                                    <div class="panel-body form-horizontal form-validate-jquery">



                                        <div class="row">
                                            <div class="col-md-4" style="max-width: 335px;">
                                                <fieldset>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Jumlah Penduduk:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" name="jumlahpenduduk" id="jumlahpenduduk" class="form-control" value={{result_poly.administrasi.f6}}>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Jumlah KK:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" name="jumlahkk" id="jumlahkk" class="form-control" value={{result_poly.administrasi.f7}}>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Jumlah Laki-laki:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" name="jumlahlakilaki" id="jumlahlakilaki" class="form-control" value={{result_poly.penduduk.f1}}>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Jumlah Perempuan:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" name="jumlahperempuan" id="jumlahperempuan" class="form-control" value={{result_poly.penduduk.f2}}>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Belum Kawin</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" name="belumkawin" id="belumkawin" class="form-control" value={{result_poly.penduduk.f3}}>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Kawin</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" name="kawin" id="kawin" class="form-control" value={{result_poly.penduduk.f4}}>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Cerai Hidup</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" name="ceraihidup" id="ceraihidup" class="form-control" value={{result_poly.penduduk.f5}}>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Cerai Mati</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" name="ceraimati" id="ceraimati" class="form-control" value={{result_poly.penduduk.f6}}>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">wajib KTP</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" name="wajibktp" id="wajibktp" class="form-control" value={{result_poly.penduduk.f7}}>
                                                        </div>
                                                    </div>
                                                </fieldset>
                                            </div>

                                            <div class="col-md-4" style="max-width: 400px;">
                                                <fieldset>

                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Islam:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" name="islam" id="islam" class="form-control" value="{{result_poly.penduduk.f8}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Kristen:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" name="kristen" id="kristen" class="form-control" value="{{result_poly.penduduk.f9}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Katolik:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" name="katolik" id="katolik" class="form-control" value="{{result_poly.penduduk.f10}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Hindu:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" name="hindu" id="hindu" class="form-control" value="{{result_poly.penduduk.f11}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Budha:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" name="budha" id="budha" class="form-control" value="{{result_poly.penduduk.f12}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Konghucu:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" name="konghucu" id="konghucu" class="form-control" value="{{result_poly.penduduk.f13}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Kepercayaan Lain:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" name="kepercayaanlain" id="kepercayaanlain" class="form-control" value="{{result_poly.penduduk.f14}}">
                                                        </div>
                                                    </div>
                                                </fieldset>
                                            </div>


                                            <div class="col-md-4" style="max-width: 400px;">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <fieldset>
                                                            <div class="form-group">
                                                                <label class="col-lg-3 control-label">U0:</label>
                                                                <div class="col-lg-9">
                                                                    <input type="text" name="u0" id="u0" class="form-control" value="{{result_poly.penduduk.f15}}">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-3 control-label">U5:</label>
                                                                <div class="col-lg-9">
                                                                    <input type="text" name="u5" id="u5" class="form-control" value="{{result_poly.penduduk.f16}}">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-3 control-label">U10:</label>
                                                                <div class="col-lg-9">
                                                                    <input type="text" name="u10" id="u10" class="form-control" value="{{result_poly.penduduk.f17}}">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-3 control-label">U15:</label>
                                                                <div class="col-lg-9">
                                                                    <input type="text" name="u15" id="u15" class="form-control" value="{{result_poly.penduduk.f18}}">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-3 control-label">U20:</label>
                                                                <div class="col-lg-9">
                                                                    <input type="text" name="u20" id="u20" class="form-control" value="{{result_poly.penduduk.f19}}">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-3 control-label">U25:</label>
                                                                <div class="col-lg-9">
                                                                    <input type="text" name="u25" id="u25" class="form-control" value="{{result_poly.penduduk.f20}}">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-3 control-label">U30:</label>
                                                                <div class="col-lg-9">
                                                                    <input type="text" name="u30" id="u30" class="form-control" value="{{result_poly.penduduk.f21}}">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-3 control-label">U35:</label>
                                                                <div class="col-lg-9">
                                                                    <input type="text" name="u35" id="u35" class="form-control" value="{{result_poly.penduduk.f22}}">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-3 control-label">U40:</label>
                                                                <div class="col-lg-9">
                                                                    <input type="text" name="u40" id="u40" class="form-control" value="{{result_poly.penduduk.f23}}">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-3 control-label">U45:</label>
                                                                <div class="col-lg-9">
                                                                    <input type="text" name="u45" id="u45" class="form-control" value="{{result_poly.penduduk.f24}}">
                                                                </div>
                                                            </div>
                                                        </fieldset>

                                                    </div>
                                                    <div class="col-md-6">
                                                        <fieldset>
                                                            <div class="form-group">
                                                                <label class="col-lg-3 control-label">U50:</label>
                                                                <div class="col-lg-9">
                                                                    <input type="text" name="u50" id="u50" class="form-control" value="{{result_poly.penduduk.f25}}">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-3 control-label">U55:</label>
                                                                <div class="col-lg-9">
                                                                    <input type="text" name="u55" id="u55" class="form-control" value="{{result_poly.penduduk.f26}}">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-3 control-label">U60:</label>
                                                                <div class="col-lg-9">
                                                                    <input type="text" name="u60" id="u60" class="form-control" value="{{result_poly.penduduk.f27}}">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-3 control-label">U65:</label>
                                                                <div class="col-lg-9">
                                                                    <input type="text" name="u65" id="u65" class="form-control" value="{{result_poly.penduduk.f28}}">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-3 control-label">U70:</label>
                                                                <div class="col-lg-9">
                                                                    <input type="text" name="u70" id="u70" class="form-control" value="{{result_poly.penduduk.f29}}">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-3 control-label">U75:</label>
                                                                <div class="col-lg-9">
                                                                    <input type="text" name="u75" id="u75" class="form-control" value="{{result_poly.penduduk.f30}}">
                                                                </div>
                                                            </div>
                                                        </fieldset>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                        <div class="text-right">
                                            <input id="savedatakelurahanpenduduk" class="btn btn-primary" value="SAVE" style="bottom: 15px;">

                                        </div>

                                    </div>
                                </div>
                                <!-- /traffic sources -->

                            </div>


                            <!-- /sales stats -->

                        </div>
                    </div>
                    <!-- /main charts -->
                </div>
            </div>

            <div class="content-wrapper" id="info-pendidikan" style="display: none;">
                <div>
                    <!-- Page header -->
                    <div class="page-header page-header-default" style="margin-bottom: 0px;">
                        <div class="breadcrumb-line">
                            <ul class="breadcrumb">
                                <li>PENDIDIKAN</li>
                            </ul>
                        </div>
                    </div>
                    <!-- /page header -->

                    <!-- Content area -->
                    <div class="content" style="padding: 15px;">
                        <!-- Main charts -->
                        <div class="row">
                            <div>
                                <!-- Traffic sources -->
                                <div class="panel panel-flat">
                                    <div class="panel-heading">
                                        <h6 class="panel-title">Informasi Kependidikan Penduduk Kelurahan/Desa {{result_poly.administrasi.f2}}</h6>
                                    </div>

                                    <div class="panel-body form-horizontal form-validate-jquery">

                                        <div class="row">
                                            <div class="col-md-6" style="max-width: 500px;">
                                                <fieldset>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Tidak Sekolah</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="tidaksekolah" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f1}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Belum Tamat:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="belumtamat" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f2}}">
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Tamat SD:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="tamatsd" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f3}}">
                                                        </div>
                                                    </div>


                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Tamat SLTP:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="tamatsltp" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f4}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Tamat SLTA:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="tamatslta" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f5}}">
                                                        </div>
                                                    </div>
                                                </fieldset>
                                            </div>

                                            <div class="col-md-6">
                                                <fieldset>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Diploma I:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="diplomai" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f6}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Diploma III:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="diplomaiii" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f6}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Diploma IV/ Strata I:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="diplomaiv" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f7}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Starta II:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="strataii" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f8}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Satrta III:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="strataiii" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f9}}">
                                                        </div>
                                                    </div>
                                                </fieldset>
                                            </div>
                                        </div>

                                        <div class="text-right">
                                            <input id="savedatakelurahanpendidik" class="btn btn-primary" value="SAVE" style="bottom: 15px;">
                                        </div>
                                    </div>
                                </div>
                                <!-- /traffic sources -->

                            </div>


                            <!-- /sales stats -->

                        </div>
                    </div>
                    <!-- /main charts -->
                </div>
            </div>


            <div class="content-wrapper" id="info-pekerjaan" style="display: none;">
                <div>
                    <!-- Page header -->
                    <div class="page-header page-header-default" style="margin-bottom: 0px;">
                        <div class="breadcrumb-line">
                            <ul class="breadcrumb">
                                <li>PEKERJAAN</li>
                            </ul>
                        </div>
                    </div>
                    <!-- /page header -->

                    <!-- Content area -->
                    <div class="content" style="padding: 15px;">
                        <!-- Main charts -->
                        <div class="row">
                            <div>
                                <!-- Traffic sources -->
                                <div class="panel panel-flat">
                                    <div class="panel-heading">
                                        <h6 class="panel-title">Informasi Pekerjaan Penduduk Kelurahan/Desa {{result_poly.administrasi.f2}}</h6>
                                    </div>

                                    <div class="panel-body form-horizontal form-validate-jquery">

                                        <div class="row">
                                            <div class="col-md-4" style="max-width: 400px;">
                                                <fieldset>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Tidak Bekerja:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="tidakbekerja" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f10}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Aparatur Pemerintah:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="aparaturpemerintah" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f11}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Tenaga Pendidik:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="tenagapendidik" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f12}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Wiraswasta:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="wiraswasta" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f13}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Pertanian:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="pertanian" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f14}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Tenaga Kesehatan:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="tenagakesehatan" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f15}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Pensiunan:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="pensiunan" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f17}}">
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Pegawai:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="pegawai" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f18}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Tentara:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="tentara" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f19}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Kepolisian:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="kepolisian" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f20}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">

                                                        <label class="col-lg-3 control-label">Dosen:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="dosen" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f32}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Guru:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="guru" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f33}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Pilot:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="pilot" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f34}}">
                                                        </div>
                                                    </div>
                                                </fieldset>
                                            </div>
                                            <div class="col-md-4" style="max-width: 400px;">
                                                <fieldset>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Pedagang:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="pedagang" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f21}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Petani:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="petani" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f22}}">
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Peternak:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="peternak" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f23}}">
                                                        </div>
                                                    </div>


                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Nelayan:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="nelayan" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f24}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Karyawan:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="karyawan" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f25}}">
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Buruh:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="buruh" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f26}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Pembantu:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="pembantu" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f27}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Tukang:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="tukang" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f28}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Pendeta:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="pendeta" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f29}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Pastor:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="pastor" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f30}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Ustadz:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="ustadz" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f31}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Dokter:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="dokter" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f39}}">
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Bidan:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="bidan" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f40}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Perawat:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="perawat" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f41}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Psikiater:</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="psikiater" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f42}}">
                                                        </div>
                                                    </div>

                                                </fieldset>
                                            </div>
                                            <div class="col-md-4" style="max-width: 400px;">
                                                <div class="form-group">
                                                    <label class="col-lg-3 control-label">Pengacara:</label>
                                                    <div class="col-lg-9">
                                                        <input type="text" id="pengacara" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f35}}">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-lg-3 control-label">Notaris:</label>
                                                    <div class="col-lg-9">
                                                        <input type="text" id="notaris" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f36}}">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-lg-3 control-label">Arsitek:</label>
                                                    <div class="col-lg-9">
                                                        <input type="text" id="arsitek" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f37}}">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-lg-3 control-label">Akuntan:</label>
                                                    <div class="col-lg-9">
                                                        <input type="text" id="akuntan" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f38}}">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-lg-3 control-label">Sopir:</label>
                                                    <div class="col-lg-9">
                                                        <input type="text" id="sopir" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f43}}">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-lg-3 control-label">Lainnya:</label>
                                                    <div class="col-lg-9">
                                                        <input type="text" id="lainnya" class="form-control" value="{{result_poly.pekerjaan_pendidikan.f44}}">
                                                    </div>
                                                </div>
                                                </fieldset>
                                            </div>
                                        </div>

                                        <div class="text-right">
                                            <input id="savedatakelurahanpekerja" class="btn btn-primary" value="SAVE" style="bottom: 15px;">
                                        </div>
                                    </div>
                                </div>
                                <!-- /traffic sources -->

                            </div>


                            <!-- /sales stats -->

                        </div>
                    </div>
                    <!-- /main charts -->
                </div>
            </div>



            <div class="content-wrapper" id="info-poi" style="display: none;">
                <div>
                    <!-- Page header -->
                    <div class="page-header page-header-default" style="margin-bottom: 0px;">
                        <div class="breadcrumb-line">
                            <ul class="breadcrumb">
                                <li>TEMPAT TEMPAT PENTING</li>
                            </ul>
                        </div>
                    </div>
                    <!-- /page header -->

                    <!-- Content area -->
                    <div class="content" style="padding: 15px;">
                        <!-- Main charts -->
                        <div class="row">
                            <div>
                                <!-- Traffic sources -->
                                <div class="panel panel-flat">
                                    <div class="panel-heading">
                                        <h6 class="panel-title">Informasi Tempat di Kelurahan/Desa {{result_poly.administrasi.f2}}</h6>
                                    </div>

                                    <div class="panel-body form-horizontal form-validate-jquery">

                                        <div class="row">
                                            <div class="col-md-6" style="margin-left: 30px;max-width: 500px;">
                                                <fieldset>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Puskesmas</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="puskesmas" class="form-control" value="{{result_poly.poi.f1}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Sekolah</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="sekolah" class="form-control" value="{{result_poly.poi.f2}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Sarana Ibadah</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="saranaibadah" class="form-control" value="{{result_poly.poi.f3}}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">Tempat Wisata</label>
                                                        <div class="col-lg-9">
                                                            <input type="text" id="tempatwisata" class="form-control" value="{{result_poly.poi.f3}}">
                                                        </div>
                                                    </div>
                                                </fieldset>
                                            </div>

                                            <div class="text-right">
                                                <input id="savedatakelurahanpoi" class="btn btn-primary" value="SAVE" style="bottom: 15px;">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /traffic sources -->

                                </div>


                                <!-- /sales stats -->

                            </div>
                        </div>
                        <!-- /main charts -->
                    </div>
                </div>

            </div>
            <!-- /main content -->
        </div>
        <!-- /page content -->
    </div>
    <!-- /page container -->

    <div id="modal_theme_info" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 400px;margin-left: 100px;">
                <div class="modal-header bg-info">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h6 class="modal-title">Info header</h6>
                </div>

                <div class="modal-body" style="max-height: 450px;overflow-y: auto;">

                    <img id="blah" src="#" style="max-width: 275px;max-height: 275px;margin-left: 45px;" alt="your image" />
                    <table id="valid-edit-kel" style="margin-bottom: 20px;"></table>
                    <table id="valid-edit-penduduk" style="margin-bottom: 20px;"></table>
                    <table id="valid-edit-pendidik" style="margin-bottom: 20px;"></table>
                    <table id="valid-edit-pekerja" style="margin-bottom: 20px;"></table>
                    <div id="validasi-edit" style="width: 350px; margin-left:10px;">

                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                    <button type="button" id="btnsavevalidasi" class="btn btn-info">Save changes</button>
                </div>
            </div>
        </div>
    </div>



    <!-- Core JS files -->
    <script type="text/javascript" src="{% static 'js/plugins/loaders/pace.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/core/libraries/jquery.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/core/libraries/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/loaders/blockui.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/ui/nicescroll.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/ui/drilldown.js' %}"></script>
    <!-- /core JS files -->

    <script src="https://use.fontawesome.com/d232835e93.js"></script>

    <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script> -->

    <script src="https://unpkg.com/esri-leaflet@2.5.1/dist/esri-leaflet.js"></script>
    <script src="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.js"></script>
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.js"></script>


    <!-- Theme JS files -->
    <script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/visualization/d3/d3_tooltip.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/forms/styling/switchery.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/forms/styling/uniform.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/forms/selects/bootstrap_multiselect.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/ui/moment/moment.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/pickers/daterangepicker.js' %}"></script>

    <!-- /theme JS files -->

    <script src="{% static 'js/leaflet-bing-layer.js' %}"></script>
</body>

</html>

<script>
    $(document).ready(function() {
        $("#kelurahan").val("{{ desa }}");
        $("#kecamatan").val("{{ kec }}");
        $("#kabupaten").val("{{ kab }}");
        $("#provinsi").val("{{ prov }}");

    });

    file.onchange = evt => {
        const [fil] = file.files
        if (fil) {
            blah.src = URL.createObjectURL(fil)
        }
    }

    function openInfo(evt, infName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("content-wrapper");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(infName).style.display = "block";
        evt.currentTarget.className += " active";
    }
    var map = L.map('map', {
        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);

    var polygon_edit = "{{ result_poly }}".replace(/&#x27;/g, '"');
    var poldit = JSON.parse("" + polygon_edit + "")



    map.setView(["{{ avg_lo }}", "{{ 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 polyly = L.polygon(list_poly_edit).addTo(map)
    polyly.enableEdit();
    var hasil = (JSON.stringify(polyly.toGeoJSON()))
    console.log(hasil)

    $('#btnsavevalidasi').click(function() {


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

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

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

        var ketek_json = {}

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

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

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

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

                }

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

                    $('#' + ketket[i]).val(data['penduduk'][i])
                }
            }
        });
    });

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

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

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

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

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

        var poi = []

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

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

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

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

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

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

    });
</script>