{% 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>{{title}}</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%;
        }
        
        .modal-backdrop {
            opacity: 0.7;
        }
        
        .sidebar {
            padding: 0;
        }
        
        .form-group {
            margin-bottom: 0px;
        }
        
        .panel-body {
            padding: 0px 20px;
        }
        
        .row {
            margin-left: 0px;
            margin-right: 0px;
        }
        
        .modal-colors {
            background-color: #1a222f;
        }
        
        .lbl-top {
            margin-top: 10px;
        }
        
        .select2-selection--multiple:not([class*=bg-]) .select2-selection__choice {
            background-color: #eee;
            color: #333333;
            margin-top: 3px;
            margin-bottom: 3px;
            border-radius: 0px;
        }
        
        .page_loader {
            position: fixed;
            background: url('../../static/img/loadingz.gif') 50% 50% no-repeat rgb(249, 249, 249);
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            opacity: .5;
        }
        
        #map-insert>div.leaflet-control-container>div.leaflet-top.leaflet-left>div:nth-child(2) {
            display: none;
        }
        
        .leaflet-draw-draw-polygon,
        .leaflet-draw-draw-rectangle,
        .leaflet-draw-draw-circle,
        .leaflet-draw-draw-marker,
        .leaflet-draw-draw-circlemarker {
            display: none!important;
        }
        
        .leaflet-draw-toolbar {
            position: absolute;
        }
        
        .leaflet-draw-actions {
            padding: 0px 0px 0px 40px;
            list-style-type: none;
        }
        
        .leaflet-container ul li a {
            color: white;
        }
        
         ::-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;
        }
    </style>
    <style>
        .modal-header .btnGrp {
            position: absolute;
            top: 8px;
            right: 10px;
        }
        
        .min {
            width: 250px;
            height: 35px;
            overflow: hidden !important;
            padding: 0px !important;
            margin: 0px;
            float: left;
            position: static !important;
        }
        
        .min .modal-dialog,
        .min .modal-content {
            height: 100%;
            width: 100%;
            margin: 0px !important;
            padding: 0px !important;
        }
        
        .min .modal-header {
            height: 100%;
            width: 100%;
            margin: 0px !important;
            padding: 3px 5px !important;
        }
        
        .display-none {
            display: none;
        }
        
        button .fa {
            font-size: 16px;
            margin-left: 10px;
        }
        
        .min .fa {
            font-size: 14px;
        }
        
        .min .menuTab {
            display: none;
        }
        
        button:focus {
            outline: none;
        }
        
        .minmaxCon {
            height: 35px;
            bottom: 1px;
            left: 1px;
            position: fixed;
            right: 1px;
            z-index: 9999;
        }
    </style>
</head>

<body style="padding-right: 0px !important;">

    <!-- Main navbar -->
    <!-- Main navbar -->
    {% include 'includes/navbar.html' %}
    <!-- /main navbar -->


    <!-- Page container -->
    <div class="page-container" style="top: 48px;">

        <!-- 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="{% static '/img/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>
                        </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-jalan')" id="defaultOpen"><span>Manajemen Perbaikan</span></a></li>
                                <!-- <li><a class="tablinks" onclick="openInfo(event, 'info-pendidikan')" id="defaultOpen"><span>Sarana Pendidikan</span></a></li> -->
                                <!-- <li><a class="tablinks" onclick="openInfo(event, 'info-ibadah')" id="defaultOpen"><span>Sarana Ibadah</span></a></li>
                                <li><a class="tablinks" onclick="openInfo(event, 'info-kesehatan')" id="defaultOpen"><span>Sarana Kesehatan</span></a></li>
                                <li><a class="tablinks" onclick="openInfo(event, 'info-jembatan')" id="defaultOpen"><span>Jembatan</span></a></li> -->


                                <!-- /page kits -->

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

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


            <!-- Main content -->
            <!-- User management Tab -->



            <div class="content-wrapper" id="info-jalan">
                <div>
                    <!-- Content area -->
                    <div class="content" style="padding: 15px;">
                        <!-- Main charts -->
                        <!-- Sales stats -->
                        <div class="panel panel-flat" style="display: none;">
                            <div class="panel-heading">
                                <h6 class="panel-title">Table Data Perbaikan</h6>
                                <!-- <input  name="" id=""> -->
                                <!-- <button class="btn btn-primary btn-sm" id="inputdata" style="bottom: 15px;
                                float: right;
                                width: 80px;
                                height: 32px;
                                margin-top: -15px;">Input Data</button> -->
                            </div>

                            <hr style="margin-top: 0px;">

                            <div class="panel-body">
                                <table class="table table-responsive datatable-show-all table-sm" id="userList" style="word-wrap:break-word;">
                                    <thead>
                                        <tr>
                                            <th>No.</th>
                                            <th>Sarana Perbaiakn</th>
                                            <th>Nama</th>
                                            <th>Type</th>
                                            <th>Tanggal Mulai</th>
                                            <th>Tanggal Selesai</th>
                                            <th>Anggaran</th>
                                            <th>Keterangan</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                        {% for all in res_all %}
                                        <tr>
                                            <td>{{forloop.counter}}</td>
                                            <td>{{all.name_perbaikan}}</td>
                                            <td>{{all.name}}</td>
                                            <td>{{all.type}}</td>
                                            <td>{{all.tgl_perbaikan}}</td>
                                            <td>{{all.tgl_selesai}}</td>
                                            <td>{{all.anggaran}}</td>
                                            <td class="text-center">
                                                <a class="mdlFire" onclick="loadjlbyid('{{all.id_object}}')" data-toggle="modal" data-target="#modal_detail">Detail</a>
                                            </td>
                                        </tr>

                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <!-- /form validation -->
                        </div>
                    </div>
                    <!-- /main charts -->
                </div>
            </div>


            <div class="content-wrapper mymodal" id="input_perbaikan" style="display: none;">
                <div class="content" style="padding: 15px;">
                    <!-- Main charts -->
                    <div class="panel panel-flat" style="display: none;">
                        <div class="panel-body" style="padding-top: 10px;">
                            <div class="tabbable">
                                <ul class="nav nav-tabs nav-tabs-bottom nav-justified">
                                    <button type="button" class="close" onclick="destroyWraper()">&times;</button>
                                    <button class="close modalMinimize" style="right: 50px;"> <i class='fa fa-minus'></i> </button>
                                    <li class="active"><a href="#left-tab-input-coordinat" data-toggle="tab">Koordinat</a></li>
                                    <li><a href="#right-tab-input-informasi" data-toggle="tab">Insert Informasi</a></li>
                                </ul>
                            </div>
                            <div class="tab-content">
                                <div class="tab-pane active" id="left-tab-input-coordinat">
                                    <div class="modal-body" style="max-height: 450px;overflow-y: auto;">
                                        <input type="text" class="hidden" id="poly_create">
                                        <input type="text" class="hidden" id="id_jalan_perbaikan">
                                        <input type="text" class="hidden" id="type_id">
                                        <div id="map-insert" style="height: 400px;width: 100%">
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane" id="right-tab-input-informasi">
                                    <div class="modal-body" style="max-height: 450px;overflow-y: auto;">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Nama Jalan :</label>
                                                    <input type="text" id="namajalan" 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>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 class="panel-footer">
                            <input type="submit" class="btn btn-default" id="save-perbaikan" value="SAVE">

                            <button type="button" class="btn btn-link" onclick="destroyWraper()">Close</button>
                        </div>
                    </div>

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

            </div>



            <!-- end user management tab -->


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

    <div id="modal_detail" class="modal fade mymodal" style="padding-top: 0px;padding-bottom: 0px;right: -11px;">
        <div class="modal-dialog modal-lg" style="width: 100%;height: 100%;margin: 0;bottom: 0;">
            <div class="modal-content" style="height: 100%;">
                <div class="modal-header bg-info" style="background-color:#28343a">
                    <button type="button" class="close" data-dismiss="modal"> <i class='fa fa-times'></i> </button>
                    <button class="close modalMinimize" style="right: 50px;"> <i class='fa fa-minus'></i> </button>
                    <h6 class="modal-title">Info Detail</h6>
                </div>

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

                    <div class="panel-body" id="isi_modal_detail">
                        <table class="table table-responsive datatable-show-all table-sm" id="isi_detail" style="word-wrap:break-word;">
                        </table>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-link" onclick="cetakExcel()">Cetak</button>
                </div>
            </div>
        </div>
    </div>

    <div id="modal_detail_ruas" class="modal fade mymodal">
        <div class="modal-dialog modal-md" style="margin-top: 60px;">
            <div class="modal-content">
                <div class="modal-header bg-info" style="background-color:#28343a">
                    <button type="button" class="close" onclick="destroylayer()" data-dismiss="modal">&times;</button>
                    <button class="close modalMinimize" style="right: 50px;"> <i class='fa fa-minus'></i> </button>
                    <h6 class="modal-title">Koordinat Jalan yang di Perbaiki</h6>
                </div>

                <div class="modal-body" style="overflow-y: auto;">
                    <div id="map-detail-by-id" style="height: 350px;"></div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-link" onclick="destroylayer()" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="minmaxCon"></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>
    <script src="{% static 'js/plugins/notifications/sweet_alert.min.js' %}"></script>

    <!-- <script type="text/javascript" src="{% static 'js/plugins/ui/ripple.min.js' %}"></script> -->
    <!-- /theme JS files -->

    <script src="{% static 'js/leaflet-bing-layer.js' %}"></script>
    <!-- <script src="https://unpkg.com/sweetalert/dists/sweetalert.min.js"></script> -->
    <script type="text/javascript" src="{% static 'js/plugins/tables/datatables/datatables.min.js' %}"></script>

    <script type="text/javascript" src="{% static 'js/core/libraries/jquery_ui/interactions.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/forms/selects/select2.min.js' %}"></script>


    <script type="text/javascript" src="{% static 'js/pages/form_select2.js' %}"></script>
</body>

</html>

<script>
    jQuery(document).ajaxSend(function(event, xhr, settings) {
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        function sameOrigin(url) {
            // url could be relative or scheme relative or absolute
            var host = document.location.host; // host + port
            var protocol = document.location.protocol;
            var sr_origin = '//' + host;
            var origin = protocol + sr_origin;
            // Allow absolute or scheme relative URLs to same origin
            return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
                (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
                // or any other URL that isn't scheme relative or absolute i.e relative.
                !(/^(\/\/|http:|https:).*/.test(url));
        }

        function safeMethod(method) {
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }

        if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
        }
    });

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

    function destroyfade() {
        $(".modal-backdrop").css("display", "none")
        $(".modal-backdrop").removeClass('show');
        $("body").css('padding-right', '0px !important')
    }

    function destroyWraper() {
        $("#input_perbaikan").css("display", "none");
        $("#info-jalan").css("display", "block");
        $("#info-pendidikan").css("display", "none");
    }

    $("#inputdata").on("click", function() {
        $("#input_perbaikan").css("display", "block");
        $("#info-jalan").css("display", "none");
        $("#info-pendidikan").css("display", "none");

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

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


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

                var geo_jalan = L.geoJson(data[3], {
                    style: function(feature) {
                        return {
                            color: "#808080",
                            weight: 8,
                            opacity: 2,
                            zIndex: 1000
                        };
                    }
                }).addTo(map_input);
            }
        })
    });

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

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

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


            data.append(keyss[0], data_umum[i][keyss[0]])
        }

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

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

                }
            }
        })
    });





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

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

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

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

    });


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

    });

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

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


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

        $.ajax({
            url: "{% url 'apps:loadDetail' %}",
            data: isObject,
            dataType: 'json',
            type: 'post',
            success: function(data) {

                isi_modal_detail = []
                for (var i = 0; i < data.length; i++) {
                    isi_modal_detail.push(`<tr>
                        <td>` + i + `</td>
                        <td>` + data[i].name + `</td>
                        <td>` + data[i].type + `</td>
                        <td>` + data[i].tgl_perbaikan + `</td>
                        <td>` + data[i].anggaran + `</td>
                        <td>` + data[i].pj + `</td>
                        <td>` + data[i].pj_lapangan + `</td>
                        <td>` + data[i].kontraktor + `</td>
                        <td>` + data[i].pjg_jln_reno + `</td>
                        <td>` + data[i].lbr_jln_reno + `</td>
                        <td><a onclick="loadmapruas('` + data[i].id + `','` + data[i].id_object + `')" id="loaddetailcoord" data-toggle="modal" data-target="#modal_detail_ruas">View</a></td>
                        <td><a href="media/proposal/` + data[i].proposal + `" id="downloadproposal">View</a></td>
                        <td><a href="media/bukti_penyelesaian/` + data[i].bukti_selesai + `" onclick="viewBukti()" id="view-bukti">View</a></td>
                    </tr>`)
                }

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

            }
        });
    }


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

    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: 21,
        minZoom: 4,
    }).addTo(map_detail_by_id);


    function loadmapruas(id_tbl, id_jl) {

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

        $("#map-detail-by-id > div.leaflet-control-container").css("display", "none")

        $.ajax({
            url: "{% url 'apps:load-jl-by-id-detail' %}",
            data: {
                "id": id_tbl,
                "id_jl": id_jl
            },
            dataType: 'json',
            success: function(data) {
                console.log(data)
                map_detail_by_id.setView([data[0]['geometry']['coordinates'][0][0][1], data[0]['geometry']['coordinates'][0][0][0]], 18)

                var geo_jalan = L.geoJson(data[1], {
                    style: function(feature) {
                        return {
                            color: "#808080",
                            weight: 15,
                            opacity: 2,
                            zIndex: 1000
                        };
                    }
                }).addTo(map_detail_by_id);

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

            }
        })
    }

    function destroylayer() {
        map_detail_by_id
    }

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

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

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

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

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

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


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

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

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


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

    loaderPage(false);

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

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

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

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

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

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

        return (sa);
    }




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

    $content = $(".min");

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

        e.preventDefault();

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

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

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

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