// SIDEBAR JS
$("#sel-kec ").change(function() {
    var id_kec = $(this).val()
    // console.log(id_kec)

    // $(".datatable-show-all.list_perb").dataTable().fnDestroy();
    // $("#list_perbaikan").dataTable().fnDestroy();
    $(".datatab").dataTable().fnDestroy()
        // $("#dataperb").css('display', 'none')
        // $(".datatab").css('display', 'none')
        // $(".datatable-show-all.list_perb").html('kosong')

    $.ajax({
        url: "api/filt_perbaikan_kecamatan",
        data: {
            'id_kec': id_kec
        },
        dataType: 'json',
        success: function(data) {
            if (data['res_kel'] == 'all_kecamatan') {
                $('#sel-desa').html(`<option>Pilih Desa</option>`);
            } else {
                var data_all_desa = []
                for (var i = 0; i < data['res_kel'].length; i++) {
                    var id_k = data['res_kel'][i][0];
                    var data_k = data['res_kel'][i][1];

                    var data_kel = `<option value="` + id_k + ` ">` +
                        data_k +
                        `</option>`;
                    data_all_desa.push(data_kel)
                };
                $('#sel-desa').html(`<option>Pilih Desa</option>` + data_all_desa);
            }


            var data_perbaikan = []
            var number = 0;

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

                number += 1;
                var name_perbaikan = data['res_perbaikan'][i]['name_perbaikan'];
                var id_object = data['res_perbaikan'][i]['id_object'];
                var name = data['res_perbaikan'][i]['name'];
                var type = data['res_perbaikan'][i]['type'];
                var tgl_perbaikan = data['res_perbaikan'][i]['tgl_perbaikan'];
                var anggaran = data['res_perbaikan'][i]['anggaran'];
                var tgl_selesai = data['res_perbaikan'][i]['tgl_selesai'];
                var idbenar = data['res_perbaikan'][i]['id'];

                // console.log(id_object,idbenar)

                var data_gab = `<tr>
                    <td>` + number + `</td>
                    <td>` + name_perbaikan + `</td>
                    <td>` + name + `</td>
                    <td>` + type + `</td>
                    <td>` + tgl_perbaikan + `</td>
                    <td>` + tgl_selesai + `</td>
                    <td class="text-center ">
                        <a class="btn mdlFire " onclick="loaddetailid(`+id_object+`,`+idbenar+`) " data-toggle="modal " data-target="#modal_detail_perbaikan " style="background-color: #5A9AFB;color: white;border-radius: 5px;width: 85px;height: 25px; ">
                            <div style="margin-top: -5px; ">
                                <i class="icon-search4 text-muted text-size-base " style="color: white;font-size: 10px; "></i>
                                <span>&nbsp;&nbsp;
                                    Detail</span>
                            </div>

                        </a>
                    </td>
                </tr>`;

                // var data_gab = `<li class="media panel panel-body stack-media-on-mobile" style="background: transparent;border: none;color: white;">
                //     <div>
                //         ` + number + `
                //     </div>
                //     <div>
                //         ` + name_perbaikan + `
                //     </div>
                //     <div>
                //         ` + name + `
                //     </div>
                //     <div>
                //         ` + type + `
                //     </div>
                //     <div>
                //         ` + tgl_perbaikan + `
                //     </div>
                //     <div>
                //         ` + tgl_selesai + `
                //     </div>
                //     <div>
                //         ` + anggaran + `
                //     </div>
                //     <div>
                //         <a class="btn mdlFire " onclick="loaddetailid( '` + id_object + `') " data-toggle="modal" data-target="#modal_detail_perbaikan" style="background-color: #5A9AFB;color: white;border-radius: 5px;height: 25px; ">
                //             <span>
                //                 <i class="icon-search4 text-muted text-size-base " style="color: white;font-size: 10px; "></i>
                //                 &nbsp;&nbsp;
                //                     Detail
                //             </span>

                //         </a>
                //     </div>
                // </li>`;
                data_perbaikan.push(data_gab)
            };

            // $("#tbody_perbaikan").html(data_perbaikan)
            // $("#dataperb").html(data_perbaikan)
            $("#dataperb").html(data_gab)
            datatatata()
        }

    });


});

$("#sel-desa ").change(function() {
    var id_desa = $(this).val()
    // console.log(id_desa)

    // $(".datatab").dataTable().fnDestroy()
    // $(".datatable-show-all.list_perb").dataTable().fnDestroy();
    // $("#list_perbaikan").dataTable().fnDestroy();
    $(".datatab").dataTable().fnDestroy()

    $.ajax({
        url: "api/filt_perbaikan_desa",
        data: {
            'id_desa': id_desa
        },
        dataType: 'json',
        success: function(data) {

            var data_perbaikan = []
            var number = 0;

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

                number += 1;
                var name_perbaikan = data['res_perbaikan'][i]['name_perbaikan'];
                var id_object = data['res_perbaikan'][i]['id_object'];
                var name = data['res_perbaikan'][i]['name'];
                var type = data['res_perbaikan'][i]['type'];
                var tgl_perbaikan = data['res_perbaikan'][i]['tgl_perbaikan'];
                var anggaran = data['res_perbaikan'][i]['anggaran'];
                var tgl_selesai = data['res_perbaikan'][i]['tgl_selesai'];
                var idbenar = data['res_perbaikan'][i]['id'];

                // console.log(number, name, name_perbaikan)

                var data_gab = `<tr>
                    <td>` + number + `</td>
                    <td>` + name_perbaikan + `</td>
                    <td>` + name + `</td>
                    <td>` + type + `</td>
                    <td>` + tgl_perbaikan + `</td>
                    <td>` + tgl_selesai + `</td>
                    <td class="text-center ">
                        <a class="btn mdlFire " onclick="loaddetailid(`+id_object+`,`+idbenar+`)" data-toggle="modal " data-target="#modal_detail_perbaikan " style="background-color: #5A9AFB;color: white;border-radius: 5px;width: 85px;height: 25px; ">
                            <div style="margin-top: -5px; ">
                                <i class="icon-search4 text-muted text-size-base " style="color: white;font-size: 10px; "></i>
                                <span>&nbsp;&nbsp;
                                    Detail</span>
                            </div>

                        </a>
                    </td>
                </tr>`;

                // var data_gab = `<li class="media panel panel-body stack-media-on-mobile" style="background: transparent;border: none;color: white;">
                //     <div>
                //         ` + number + `
                //     </div>
                //     <div>
                //         ` + name_perbaikan + `
                //     </div>
                //     <div>
                //         ` + name + `
                //     </div>
                //     <div>
                //         ` + type + `
                //     </div>
                //     <div>
                //         ` + tgl_perbaikan + `
                //     </div>
                //     <div>
                //         ` + tgl_selesai + `
                //     </div>
                //     <div>
                //         ` + anggaran + `
                //     </div>
                //     <div>
                //         <a class="btn mdlFire " onclick="loaddetailid( '` + id_object + `') " data-toggle="modal" data-target="#modal_detail_perbaikan" style="background-color: #5A9AFB;color: white;border-radius: 5px;height: 25px; ">
                //             <span>
                //                 <i class="icon-search4 text-muted text-size-base " style="color: white;font-size: 10px; "></i>
                //                 &nbsp;&nbsp;
                //                     Detail
                //             </span>

                //         </a>
                //     </div>
                // </li>`;
                data_perbaikan.push(data_gab)
            };

            // $("#tbody_perbaikan ").html(data_perbaikan)
            // $("#dataperb").html(data_perbaikan)
            $("#dataperb").html(data_gab)
            datatatata()

        }

    });


});

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

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

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

        }, ],
        dom: '<"float-left "B>frtip',
        language: {
            search: ' _INPUT_',
            searchPlaceholder: 'Data Perbaikan...',
            lengthMenu: '<span>Show:</span><hr> _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');
        }
    });
}

//    $("#perbaikan_manage").click(function() {
//        // $(".datatable-show-all.list_perb").dataTable().fnDestroy();
//        $(".datatab").dataTable().fnDestroy();
//        setTimeout(function() {
//            datatatata()
//        }, 100);
//
//
//    })

function loaddetailid(ido,id) {
    $(".map_detail_p").html(``)
    var isObject = {};
    isObject.ido = ido;
    isObject.id = id;
    $("#iduser ").val(ido)
    
    // console.log(ido,id)

    $.ajax({
        url: "loadDetail",
        data: isObject,
        dataType: 'json',
        type: 'post',
        success: function(data) {
            $("#modal_detail_perbaikan").modal('show')

            $(".map_detail_p").html(`<div id="map_detail_perbaikan" style=" position: relative; height: 220px; width: 90%; border-radius: 5px; ">`)

            var map_detail_perbaikan = L.map('map_detail_perbaikan', {
                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_perbaikan);


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


            if (data.length === 0) {
                $(".nama_detail").text("Null");
                $(".type_detail ").html("Null");
                $(".tanggal_perbaikan_detail ").html("Null")
                    //                    $(".anggaran_detail ").html("Null")
                    //                    $(".penanggung_jawab_detail ").html("Null")
                    //                    $(".penanggung_jawab_lapangan_detail ").html("Null")
                    //                    $(".kontraktor_detail ").html("Null")
                $(".panjang_jalan_detail ").html("Null")
                $(".lebar_jalan_detail ").html("Null")
                    //$(".proposal_detail ").html(`
                    //    <a href="static/media/proposal/null" id="downloadproposal">
                    //        <img src="{% static 'img/icon-1/proposal.svg' %} " alt=" " style="height: 80px;width: 80px; ">
                    //    </a>`);
                    //
                    //
                    //$(".bukti_detail_perbaikan").html(`
                    //    <a href="static/media/bukti_penyelesaian/null" onclick="viewBukti() " id="view-bukti ">
                    //        <img src="{% static 'img/icon-1/bukti.svg' %} " alt=" " style="height: 70px;
                    //        width: 50px;">
                    //    </a>`);

            } else {
                // console.log(data[0]['jenis'])
                if (data[0]['jenis'] == 'jalan') {
                    $(".nama_detail").html(data[0]['name']);
                    $(".type_detail ").html(data[0]['type'])
                    $(".tanggal_perbaikan_detail ").text(data[0]['tgl_perbaikan'])
                        //$(".anggaran_detail ").html(data[0]['anggaran'])
                        //$(".penanggung_jawab_detail ").html(data[0]['pj'])
                        //$(".penanggung_jawab_lapangan_detail ").html(data[0]['pj_lapangan'])
                        //$(".kontraktor_detail ").html(data[0]['kontraktor'])
                    $(".panjang_jalan_detail ").html(data[0]['panjang'])
                    $(".lebar_jalan_detail ").html(data[0]['lbr_jln_reno'])
                        //$(".proposal_detail ").html(`
                        //    <a href="static/media/proposal/` + data[0]['proposal'] + `" target="_blank" "id="downloadproposal">
                        //        <img src="{% static 'img/icon-1/proposal.svg' %} " alt=" " style="height: 65px;width: 65px; ">
                        //    </a>`);
                        //
                        //
                        //$(".bukti_detail_perbaikan").html(`
                        //    <a href="static/media/bukti_penyelesaian/` + data[0].bukti_selesai + `" target="_blank" id="view-bukti">
                        //        <img src="{% static 'img/icon-1/bukti.svg' %} " alt=" " style="height: 70px;
                        //        width: 50px;">
                        //    </a>`);

                    $('.isi_detail_cek_jalan').show()
                    $('.map_detail_p_jalan').show()

                    map_detail_perbaikan.setView([data[0]['geometry']['coordinates'][0][0][1], data[0]['geometry']['coordinates'][0][0][0]], 18)

                    var myLines = [data[0]['geometry']];

                    var geo_jalan_perbaikan = L.geoJson(data[0]['geometry'], {
                        style: function(feature) {
                            return {
                                color: "#FAFA00",
                                weight: 10,
                                opacity: 2,
                                zIndex: 1001
                            };
                        }
                    }).addTo(map_detail_perbaikan);
                } else if (data[0]['jenis'] == 'bangunan') {
                    $(".nama_detail").html(data[0]['name']);
                    $(".type_detail ").html(data[0]['type'])
                    $(".tanggal_perbaikan_detail ").text(data[0]['tgl_perbaikan'])
                        // $(".anggaran_detail ").html(data[0]['anggaran'])
                        // $(".penanggung_jawab_detail ").html(data[0]['pj'])
                        // $(".penanggung_jawab_lapangan_detail ").html(data[0]['pj_lapangan'])
                        // $(".kontraktor_detail ").html(data[0]['kontraktor'])
                        //$(".proposal_detail ").html(`
                        //    <a href="static/media/proposal/` + data[0]['proposal'] + `" target="_blank" "id="downloadproposal">
                        //        <img src="{% static 'img/icon-1/proposal.svg' %} " alt=" " style="height: 65px;width: 65px; ">
                        //    </a>`);
                    $(".judul_panjang_jalan_detail ").html('Jenis Perbaikan')
                    $(".panjang_jalan_detail ").html(data[0]['jenis_perbaikan'])
                    $('.isi_detail_cek_jalan').hide()
                    $('.map_detail_p_jalan').hide()


                    //$(".bukti_detail_perbaikan").html(`
                    //    <a href="static/media/bukti_penyelesaian/` + data[0].bukti_selesai + `" target="_blank" id="view-bukti">
                    //        <img src="{% static 'img/icon-1/bukti.svg' %} " alt=" " style="height: 70px;
                    //        width: 50px;">
                    //    </a>`);
                }
            }
        }
    });
};

//    var element = $("#map_detail_perbaikan"); // global variable
//    var getCanvas; // global variable
//
//    $("#download_map").on('click', function() {
//        html2canvas(element, {
//            onrendered: function(canvas) {
//                $("#previewImage").append(canvas);
//                getCanvas = canvas;
//            }
//        });
//
//        var imgageData = getCanvas.toDataURL("image/png");
//        // Now browser starts downloading it instead of just showing it
//        var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
//        $("#download_map").attr("download", "image.png").attr("href", newData);
//    });




function download_user_list(type, fn, dl) {
    $.ajax({
        url: "api/user-data",
        dataType: 'json',

        success: function(data) {

            var thead = `<thead>
                            <tr>
                                <th>No.</th>
                                <th>Id user</th>
                                <th>Username</th>
                                <th>Nama</th>
                                <th>Email</th>
                                <th>Last Login</th>
                                <th>Status</th>
                            </tr>
                        </thead>`
            var data_user = []
            var number = 0;

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

                number += 1;
                var id = data['data'][i]['id'];
                var name = data['data'][i]['name'];
                var username = data['data'][i]['username'];
                var group = data['data'][i]['group'];
                var email = data['data'][i]['email'];
                var last = data['data'][i]['last'];
                var isactive = data['data'][i]['isactive'];


                var data_gab = `<tr>
                    <td>` + number + `</td>
                    <td>` + id + `</td>
                    <td>` + username + `</td>
                    <td>` + name + `</td>
                    <td>` + email + `</td>
                    <td>` + last + `</td>
                    <td>` + isactive + `</td>
                </tr>`;
                data_user.push(data_gab)
            }

            var tbody = `<tbody>
                            ` + data_user + `
                        </tbody>`;

            $("#table_downloader").html(thead + tbody)

            var elt = document.getElementById('table_downloader');

            var wb = XLSX.utils.table_to_book(elt, {
                sheet: "sheet1"
            });
            return dl ?
                XLSX.write(wb, {
                    bookType: type,
                    bookSST: true,
                    type: 'base64'
                }) :
                XLSX.writeFile(wb, fn || ('data_user.' + (type || 'xlsx')));


        }
    })
}

function download_all(type, fn, dl) {
    $.ajax({
        url: "api/download_perbaikan_data",
        dataType: 'json',

        success: function(data) {

            var thead = `<thead>
                <tr>
                    <th>No.</th>
                    <th>Id perbaikan</th>
                    <th>Jenis yang diperbaiki</th>
                    <th>Nama</th>
                    <th>Tipe</th>
                    <th>Panjang (Jika perbaikan jalan)</th>
                    <th>Tanggal Pembuatan/Peresmian</th>
                    <th>Tanggal Perbaikan</th>
                    <th>Tanggal Selesai</th>
                    <th>Anggaran</th>
                    <th>Penanggung Jawab</th>
                    <th>Penanggung Jawab Lapangan</th>
                    <th>Kontraktor</th>
                    <th>Panjang yang diperbaiki</th>
                    <th>Lebar yang diperbaiki</th>
                </tr>
            </thead>`
            var data_user = []
            var number = 0;

            for (var i = 0; i < data['data'].length; i++) {
                number += 1;
                var id = data['data'][i]['id'];
                var jenis_perbaikan = data['data'][i]['jenis_perbaikan'];
                var nama = data['data'][i]['nama'];
                var tipe = data['data'][i]['tipe'];
                var panjang = data['data'][i]['panjang'];
                var tgl_pembuatan = data['data'][i]['tgl_pembuatan'];
                var tgl_perbaikan = data['data'][i]['tgl_perbaikan'];
                var tgl_selesai = data['data'][i]['tgl_selesai'];
                var anggaran = data['data'][i]['anggaran'];
                var pj = data['data'][i]['pj'];
                var pj_lapangan = data['data'][i]['pj_lapangan'];
                var kontraktor = data['data'][i]['kontraktor'];
                var panjang_per = data['data'][i]['panjang_per'];
                var lebar_per = data['data'][i]['lebar_per'];



                var data_gab = `<tr>
                                <td>` + number + `</td>
                                <td>` + id + `</td>
                                <td>` + jenis_perbaikan + `</td>
                                <td>` + nama + `</td>
                                <td>` + tipe + `</td>
                                <td>` + panjang + `</td>
                                <td>` + tgl_pembuatan + `</td>
                                <td>` + tgl_perbaikan + `</td>
                                <td>` + tgl_selesai + `</td>
                                <td>` + anggaran + `</td>
                                <td>` + pj + `</td>
                                <td>` + pj_lapangan + `</td>
                                <td>` + kontraktor + `</td>
                                <td>` + panjang_per + `</td>
                                <td>` + lebar_per + `</td>
                                
                            </tr>`;
                data_user.push(data_gab)
            }

            var tbody = `<tbody>
                ` + data_user + `
            </tbody>`;

            $("#table_downloader").html(thead + tbody)

            var elt = document.getElementById('table_downloader');

            var wb = XLSX.utils.table_to_book(elt, {
                sheet: "sheet1"
            });
            return dl ?
                XLSX.write(wb, {
                    bookType: type,
                    bookSST: true,
                    type: 'base64'
                }) :
                XLSX.writeFile(wb, fn || ('data_perbaikan.' + (type || 'xlsx')));
        }
    });


}

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

$("#btn-hide-all").click(function() {
    $("#button_keterangan").removeClass("active");
    $("#manage_perbaikan").removeClass("active");
    $("#panel-sm").removeClass("active");
    $("#panel-sm2").removeClass("active");
    $("#panel-sm").css('display', 'none');
    $(this).css('display', 'none');
    $(this).removeClass("hid");
});

function btn_hid_all_close() {
    $("#button_keterangan").removeClass("active");
    $("#manage_perbaikan").removeClass("active");
    $("#panel-sm").removeClass("active");
    $("#panel-sm2").removeClass("active");
    $(this).css('display', 'none');
    $(this).removeClass("hid");
};

$("#keterangan_button").click(function() {
    $("#btn-hide-all").css('display', 'block');
    // $("#btn-hide-all").toggleClass("hid");
});

$("#perbaikan_manage").click(function() {
    $("#btn-hide-all").css('display', 'block');
    // $("#btn-hide-all").toggleClass("hid");
});

function gas_all() {
    var checkBox = document.getElementById("po_all");
    if (document.getElementById("po_all").checked == true) {
        document.getElementById("knt_adm").checked = true;
        document.getElementById("lyn_kes").checked = true;
        document.getElementById("pus").checked = true;
        document.getElementById("rusak").checked = true;
        document.getElementById("ibdh").checked = true;
        document.getElementById("dididik").checked = true;
        document.getElementById("tasiun").checked = true;
        document.getElementById("caheum").checked = true;
        document.getElementById("cabud").checked = true;
        document.getElementById("gardu").checked = true;
        k_adm()
        l_kes()
        pks()
        rs()
        fiksi()
        didik()
        sthall()
        temanggung()
        cb100()
        gl100()
    } else if (document.getElementById("po_all").checked == false) {
        document.getElementById("knt_adm").checked = false;
        document.getElementById("lyn_kes").checked = false;
        document.getElementById("pus").checked = false;
        document.getElementById("rusak").checked = false;
        document.getElementById("ibdh").checked = false;
        document.getElementById("dididik").checked = false;
        document.getElementById("tasiun").checked = false;
        document.getElementById("caheum").checked = false;
        document.getElementById("cabud").checked = false;
        document.getElementById("gardu").checked = false;
        k_adm()
        l_kes()
        pks()
        rs()
        fiksi()
        didik()
        sthall()
        temanggung()
        cb100()
        gl100()
    }
}

// function gas_poin(){
//     document.getElementById("po_all").checked == true;
//     k_adm()
//     l_kes()
//     pks()
//     rs()
//     fiksi()
//     didik()
//     sthall()
//     temanggung()
//     cb100()
//     gl100()
// }

// gas_poin()

function destroymodper() {
    $("#modal_detail_perbaikan").modal('hide')
}

$(".search_list").on('input', function() {
    var v = $(".inp_search_list").val()
    $.ajax({
        url: "api/search_list_perbaikan",
        dataType: 'json',
        data: {
            'v_list': v
        },
        success: function(data) {
            var data_perbaikan = []
            var number = 0;

            for (var i = 0; i < data.length; i++) {

                number += 1;
                var name_perbaikan = data[i][0];
                var id_object = data[i][1];
                var name = data[i][2];
                var type = data[i][3];
                var tgl_perbaikan = data[i][4];
                var anggaran = data[i][5];
                var tgl_selesai = data[i][6];
                var idbenar = data[i][9];

                var data_gab = `<li class="media panel panel-body stack-media-on-mobile" style="background: transparent;border: none;color: white;">
                    <div>
                        ` + number + `
                    </div>
                    <div>
                        ` + name_perbaikan + `
                    </div>
                    <div>
                        ` + name + `
                    </div>
                    <div>
                        ` + type + `
                    </div>
                    <div>
                        ` + tgl_perbaikan + `
                    </div>
                    <div>
                        ` + tgl_selesai + `
                    </div>
                    <div>
                        <a class="btn mdlFire " onclick="loaddetailid(`+id_object+`,`+idbenar+`)" data-toggle="modal" data-target="#modal_detail_perbaikan" style="background-color: #5A9AFB;color: white;border-radius: 5px;height: 25px; ">
                            <span>
                                <i class="icon-search4 text-muted text-size-base " style="color: white;font-size: 10px; "></i>
                                &nbsp;&nbsp;
                                    Detail
                            </span>
                            
                        </a>
                    </div>
                </li>`;
                data_perbaikan.push(data_gab)
            };

            $(".datatab").html(data_perbaikan)
        }
    });

});

$("#perbaikan_manage").on("click", function() {
    $.ajax({
        url: "api/dataperbaikan",
        dataType: 'json',
        type: 'get',
        success: function(data) {

            // console.log(data)
            var data_per = []
            var num = 0
            for (i in data) {
                num += 1;

                var data_i = `<li class="media panel panel-body stack-media-on-mobile" id="cunli" style="background: transparent;border: none;color: white;">
                            <div>
                                ` + num + `
                            </div>
                            <div>
                                ` + data[i].name_perbaikan + `
                            </div>
                            <div>
                                ` + data[i].name + `
                            </div>
                            <div>
                                ` + data[i].desa + `, ` + data[i].kecamatan + `
                            </div>
                            <div>
                                ` + data[i].type + `
                            </div>
                            <div>
                                ` + data[i].tgl_perbaikan + `
                            </div>
                            <div>
                                ` + data[i].tgl_selesai + `
                            </div>
                            <div>
                                <a class="btn mdlFire " onclick="loaddetailid(`+data[i].id_object+`,`+data[i].id+`)" data-toggle="modal" data-target="#modal_detail_perbaikan" style="background-color: #5A9AFB;color: white;border-radius: 5px;">
                                    <i class="icon-search4 text-muted text-size-base " style="color: white;font-size: 10px; "></i> &nbsp;&nbsp; Detail
                                </a>
                            </div>
                            </li>`;

                data_per.push(data_i)

            }
            $("#dataperb").html(data_per)

            var x = window.matchMedia("(min-width: 700px)")
            if (x.matches) { // If media query matches
                $(".search_list").css('display', 'none')

                $.fn.dataList = function(options) {
                    this.each(function() {
                        var $table = $(this);
                        if ($table.is('ul')) {
                            var $ul = $table;
                            $table = $ul.wrap('<table><tbody/></table').closest('table');
                            $ul.find('li').wrap('<tr></tr>').contents().unwrap();
                            $ul.find('div').wrap('<td><td/>').contents().unwrap();
                            $ul.contents().unwrap()
                            $table.prepend(`<thead><tr><th>No.</th>
                                <th>Sarana Perbaikan</th>
                                <th>Nama</th>
                                <th>Alamat</th>
                                <th>Type</th>
                                <th>Tanggal Mulai</th>
                                <th>Tanggal Selesai</th>
                                <th>Keterangan</th>
                                </tr></thead>`);
                        }
                        $table.dataTable(options);
                    });
                }
                $('.datatab').dataList({
                    "pageLength": 15,
                    autoWidth: false,
                    columnDefs: [{
                        orderable: false,
                        width: '20px',
                        targets: [0],
                    }, ],
                    dom: '<"float-left "B>frtip',
                    language: {
                        search: ' _INPUT_',
                        searchPlaceholder: 'Data Perbaikan...',
                        lengthMenu: '<span>Show:</span><hr> _MENU_',
                        paginate: {
                            'first': 'First',
                            'last': 'Last',
                            'next': '&rarr;',
                            'previous': '&larr;'
                        }
                    },
                });
                $('.datatab').DataTable({
                    autoWidth: false,
                    columnDefs: [{
                        orderable: false,
                        width: '20px',
                        targets: [0],

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

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

                    }, ],
                    dom: '<"float-left "B>frtip',
                    language: {
                        search: ' _INPUT_',
                        searchPlaceholder: 'Data Perbaikan...',
                        lengthMenu: '<span>Show:</span><hr> _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');
                    }
                });
            } else {
                $(".search_list").css('display', 'block')
                $("#download_perbaikan").css('display', 'none')
                    //            document.querySelector("#perbaikan-dashboard\\  > div > div.container-detached > div > ul > li > div:nth-child(1)").style.display = 'none';
                    //$('.datatab').dataTable({
                    //    "pageLength": 15
                    //});
            }
        }
    })
})