<div class="container-fluid konsumen-detail-view" id="container-wrapper">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Detail Order Konsumen</h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="./">Home</a></li>
            <li class="breadcrumb-item"><a href="<?=base_url('konsumen');?>">Pelanggan</a></li>
            <li class="breadcrumb-item active" aria-current="page">Detail Order Pelanggan</li>
        </ol>
    </div>
    <div class="card">
        <div class="row">
            <div class="col-md-12">
                <div class="card-header pb-0">
                    <div class="input-group input-group-sm konsumen-filter-toolbar">
                        <div class="input-group-prepend">
                            <span class="input-group-text">SORT</span>
                        </div>
                        <select id="sortBy" class="form-control custom-select w-5" onchange="FilterKonsumen()">
                            <option value="ASC">ASC</option>
                            <option value="DESC">DESC</option>
                        </select>
                        <div class="input-group-prepend">
                            <span class="input-group-text">LIMIT</span>
                        </div>
                        <select id="limits" name="limits" class="form-control custom-select"
                        onchange="FilterKonsumen()">
                            <option value="10">10</option>
                            <option value="20">20</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                        
                        <div class="input-group-append">
                            <span class="input-group-text">Tanggal</span>
                        </div>
                        <input type="text" id="periode" class="form-control w-10 date-piutang" name="range"
                        onchange="FilterKonsumen();" />
                        
                        <input type="text" id="keywords" class="form-control" placeholder="Cari data"
                        oninput="scheduleFilterKonsumen();" />
                        <div class="input-group-prepend detail-filter-actions">
                            <button type="button" data-toggle="tooltip" class="btn btn-danger btn-sm clear_detail detail-filter-btn"
                            data-original-title="Clear"><i class="fa fa-times fa-1x"></i> Clear</button>
                            <button type="button" class="btn btn-secondary print_detail detail-filter-btn">
                                <i class="fa fa-fw fa-print"></i> Print
                            </button>
                            <button type="button" data-member="<?=$member;?>" data-jenis="<?=$jenis;?>"
                            data-id="<?php echo encrypt_url($id); ?>" class="btn btn-warning edit_konsumen_detail detail-filter-btn">
                                <i class="fa fa-fw fa-user"></i> Detail
                            </button>
                        </div>
                    </div>
                </div>
                <div class="post-list pt-0" id="dataKonsumen">
                    <?php $this->load->view('konsumen/_detail_order_table', [
                        'rows' => $result,
                        'button_class' => 'cek_transaksi'
                    ]); ?>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    @media (min-width:1200px){
        .konsumen-detail-view .card-header{
            padding:1rem!important;
            border-bottom:1px solid #e3e6f0;
            background:#fff;
        }
        .konsumen-detail-view .konsumen-filter-toolbar{
            display:flex!important;
            width:100%;
            align-items:center;
            flex-wrap:nowrap;
        }
        .konsumen-detail-view .konsumen-filter-toolbar > .input-group-prepend:not(.detail-filter-actions),
        .konsumen-detail-view .konsumen-filter-toolbar > .input-group-append{
            flex:0 0 auto;
            margin:0;
        }
        .konsumen-detail-view .konsumen-filter-toolbar > .input-group-prepend:not(:first-child):not(.detail-filter-actions),
        .konsumen-detail-view .konsumen-filter-toolbar > .input-group-append{
            margin-left:.5rem;
        }
        .konsumen-detail-view .konsumen-filter-toolbar .input-group-text{
            display:inline-flex;
            height:38px;
            padding:0 .72rem;
            align-items:center;
            justify-content:center;
            border:1px solid var(--app-theme-color, #3f51b5);
            border-radius:.25rem 0 0 .25rem;
            background:var(--app-theme-color, #3f51b5);
            box-shadow:0 .125rem .25rem rgba(58,59,69,.14);
            color:var(--app-theme-text-color, #fff);
            font-size:.75rem;
            font-weight:600;
            line-height:1;
            letter-spacing:.01em;
            white-space:nowrap;
        }
        .konsumen-detail-view .konsumen-filter-toolbar > .custom-select,
        .konsumen-detail-view .konsumen-filter-toolbar > .form-control{
            height:38px;
            min-width:0;
            border:1px solid #d1d3e2;
            box-shadow:none;
            color:#3a3b45;
            font-size:.8rem;
        }
        .konsumen-detail-view .konsumen-filter-toolbar > .custom-select{
            flex:0 0 auto;
            width:100px!important;
            border-left:0;
            border-radius:0 .25rem .25rem 0;
            padding-left:.65rem;
        }
        .konsumen-detail-view .konsumen-filter-toolbar > #periode{
            flex:0 0 280px;
            width:280px!important;
            padding:0 .75rem;
            border-left:0;
            border-radius:0 .25rem .25rem 0;
        }
        .konsumen-detail-view .konsumen-filter-toolbar > #keywords{
            flex:1 1 180px;
            width:auto!important;
            min-width:140px;
            margin-left:.5rem;
            padding:0 .75rem;
            border-radius:.25rem!important;
        }
        .konsumen-detail-view .konsumen-filter-toolbar > .custom-select:focus,
        .konsumen-detail-view .konsumen-filter-toolbar > #periode:focus,
        .konsumen-detail-view .konsumen-filter-toolbar > #keywords:focus{
            position:relative;
            z-index:2;
            border-color:#6f7bd9;
            outline:0;
            box-shadow:0 0 0 .15rem rgba(63,81,181,.12);
        }
        .konsumen-detail-view .detail-filter-actions{
            display:flex;
            flex:0 0 auto;
            align-items:center;
            gap:.5rem;
            margin-left:.5rem;
        }
        .konsumen-detail-view .detail-filter-actions .detail-filter-btn{
            display:inline-flex;
            height:38px;
            padding:0 .72rem;
            align-items:center;
            justify-content:center;
            gap:.3rem;
            border:0;
            border-radius:.25rem!important;
            box-shadow:0 .125rem .25rem rgba(58,59,69,.18);
            color:#fff;
            font-size:.8rem;
            font-weight:600;
            line-height:1;
            white-space:nowrap;
        }
        .konsumen-detail-view .detail-filter-actions .clear_detail{background:#ff4d4f}
        .konsumen-detail-view .detail-filter-actions .print_detail{background:#3f51b5}
        .konsumen-detail-view .detail-filter-actions .edit_konsumen_detail{background:#ff9818}
        .konsumen-detail-view .detail-filter-actions .detail-filter-btn:hover,
        .konsumen-detail-view .detail-filter-actions .detail-filter-btn:focus{
            color:#fff;
            filter:brightness(.96);
            outline:0;
            box-shadow:0 .2rem .4rem rgba(58,59,69,.24);
        }
    }
    .konsumen-detail-view .nowrap{white-space:nowrap}
    .konsumen-detail-view .col-no{width:44px;min-width:44px}
    .konsumen-detail-view .col-trx{width:92px;min-width:92px}
    .konsumen-detail-view .col-tanggal{width:120px;min-width:120px}
    .konsumen-detail-view .col-kasir{width:90px;min-width:90px}
    .konsumen-detail-view .col-pelanggan{width:130px;min-width:130px}
    .konsumen-detail-view .col-rincian{width:34%;min-width:360px}
    .konsumen-detail-view .col-money{width:86px;min-width:86px}
    .konsumen-detail-view .table-shell{
        padding:12px;
        border:1px solid #e4e9f1;
        border-radius:11px;
        background:#fff;
        box-shadow:0 6px 18px rgba(15,23,42,.07);
        overflow-x:auto;
        overflow-y:hidden;
    }
    .konsumen-detail-view .table-modern{
        width:100%;
        min-width:1240px;
        margin-bottom:0;
        border:1px solid #e4e9f1;
        border-collapse:collapse;
        background:#fff;
        color:#475467;
        font-size:12px;
    }
    .konsumen-detail-view .table-modern th,
    .konsumen-detail-view .table-modern td{
        border:1px solid #e7ebf2;
        padding:.5rem .55rem;
        vertical-align:middle;
        font-variant-numeric:tabular-nums;
        line-height:1.3;
    }
    .konsumen-detail-view .thead-section th{
        font-weight:800;
        font-size:11px;
        background:#f3f6fb;
        color:#344054;
        text-align:center;
        vertical-align:middle!important;
    }
    .konsumen-detail-view .thead-dark th{
        color:#fff;
        background-color:#5b5d6b;
        border-color:#515360;
    }
    .konsumen-detail-view .table-modern tbody tr:hover{background:#f8fbff}
    .konsumen-detail-view .table-modern tbody tr:nth-child(even){background:#fcfdff}
    .konsumen-detail-view .row-cancelled td{background:#ffe5e5!important;color:#9b1c1c}
    .konsumen-detail-view .trx-chip{
        padding:4px 8px;
        border:1px solid #cfe0f8;
        border-radius:4px;
        background:#eaf3ff;
        color:#1769e8;
        box-shadow:none;
        font-size:11px;
        font-weight:800;
    }
    .konsumen-detail-view .nested-table{
        table-layout:auto;
        min-width:100%;
        border-collapse:collapse;
        border:0;
        background:#fff;
    }
    .konsumen-detail-view .nested-table th,
    .konsumen-detail-view .nested-table td{
        border:1px solid #e7ebf2;
        padding:.36rem .45rem;
        text-align:center;
        vertical-align:middle;
    }
    .konsumen-detail-view .nested-table thead th{
        background:#f8fafc;
        color:#475467;
        font-weight:700;
        font-size:10.5px;
        white-space:nowrap;
    }
    .konsumen-detail-view .nested-table td{white-space:nowrap}
    .konsumen-detail-view .nested-table .col-nama{
        white-space:normal!important;
        word-break:break-word;
        overflow-wrap:anywhere;
        min-width:180px;
        padding-right:.8rem;
    }
    .konsumen-detail-view .nested-table th:nth-child(2),
    .konsumen-detail-view .nested-table td:nth-child(2){min-width:70px}
    .konsumen-detail-view .nested-table th:nth-child(3),
    .konsumen-detail-view .nested-table td:nth-child(3){min-width:60px}
    .konsumen-detail-view .nested-table th:nth-child(4),
    .konsumen-detail-view .nested-table td:nth-child(4){min-width:82px}
    .konsumen-detail-view .cell-rincian{background:#fff}
    .konsumen-detail-view .cell-money{
        text-align:right!important;
        padding-right:.85rem!important;
    }
    .konsumen-detail-view tfoot .row-total th{
        background:#f8fafc;
        color:#344054;
        font-weight:800;
        border-top:1px solid #dfe5ee;
    }
    .konsumen-detail-view tfoot .row-total th:not(:first-child){
        text-align:right;
        padding-right:.85rem;
    }
    .konsumen-detail-view .konsumen-result-count{
        padding:12px 2px 2px;
        color:#667085;
        font-size:12px;
        font-weight:600;
    }
    .konsumen-detail-view .table-shell .table-modern > thead > tr > th,
    .konsumen-detail-view .table-shell .table-modern > tbody > tr > td,
    .konsumen-detail-view .table-shell .table-modern > tfoot > tr > th,
    .konsumen-detail-view .table-shell .nested-table th,
    .konsumen-detail-view .table-shell .nested-table td,
    .konsumen-detail-view .table-shell .trx-chip,
    .konsumen-detail-view .table-shell .col-pelanggan-cell a{
        font-size:12px!important;
        line-height:1.35;
    }
    @media (max-width:1399.98px){
        .konsumen-detail-view .table-modern{min-width:1220px}
        .konsumen-detail-view .col-rincian{min-width:340px}
    }
    @media (max-width:1199.98px){
        .konsumen-detail-view .col-rincian{min-width:320px}
    }
    @media (max-width:991.98px){
        .konsumen-detail-view .table-modern{min-width:1180px}
        .konsumen-detail-view .col-rincian{min-width:300px}
    }
    @media (max-width:767.98px){
        .konsumen-detail-view .table-modern{min-width:1000px}
        .konsumen-detail-view .table-shell .table-modern > thead > tr > th,
        .konsumen-detail-view .table-shell .table-modern > tbody > tr > td,
        .konsumen-detail-view .table-shell .table-modern > tfoot > tr > th,
        .konsumen-detail-view .table-shell .nested-table th,
        .konsumen-detail-view .table-shell .nested-table td,
        .konsumen-detail-view .table-shell .trx-chip,
        .konsumen-detail-view .table-shell .col-pelanggan-cell a{
            font-size:11px!important;
        }
    }
</style>

<div id="edit-konsumen-detail" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content flat">
            <form role="form" id="form-edit-detail" method="post">
                <div class="modal-header bg-danger py-1 flat">
                    <h4 class="modal-title text-light">Edit Pelanggan</h4>
                </div>
                <div class="modal-body">
                    <span id="error_input"></span>
                    <div class="form-group row mb-0">
                        <label class="col-sm-5 col-form-label">Tlp. pelanggan</label>
                        <div class="col-sm-7">
                            <div class="input-group">
                                <input class="form-control phone form-control-sm" id="telepon_edit_detail"
                                name="telepon_edit" autofocus="" required>
                                <input type="hidden" class="form-control" id="id_edit" name="id_edit">
                            </div>
                            <div id="feedback-telp-edit" class="feedback"></div>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">Panggilan</label>
                        <div class="col-sm-7">
                            <select name="panggilan_edit" id="panggilan_edit" class="form-control custom-select pl-1"
                            required>
                                <option value="" selected></option>
                                <option value="Bpk">Bpk</option>
                                <option value="Ibu">Ibu</option>
                                <option value="Mba">Mba</option>
                                <option value="Mas">Mas</option>
                                <option value="Kak">Kak</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-0">
                        <label class="col-sm-5 col-form-label">Nama pelanggan</label>
                        <div class="col-sm-7">
                            <input class="form-control form-control-sm" id="nama_edit" name="nama_edit"
                            autofocus="autofocus" required>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">Alamat pelanggan</label>
                        <div class="col-sm-7">
                            <textarea id="alamat_edit" name="alamat_edit" class="form-control" rows="1"
                            required></textarea>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">Member</label>
                        <div class="col-sm-7">
                            <select name="jenis_member_edit" id="jenis_member_edit"
                            class="custom-select form-control form-control-sm" data-valueKey="id"
                            data-displayKey="name" required>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">Jenis</label>
                        <div class="col-sm-7">
                            <select name="jenis_lembaga_edit" id="jenis_lembaga_edit"
                            class="custom-select form-control form-control-sm" data-valueKey="id"
                            data-displayKey="name" required>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-0 tampil_lembaga">
                        <label class="col-sm-5 col-form-label">Nama perusahaan</label>
                        <div class="col-sm-7">
                            <input class="form-control form-control-sm" id="nama_perusahaan_edit"
                            name="nama_perusahaan_edit">
                        </div>
                    </div>
                    <div class="form-group row mb-1 tampil_lembaga">
                        <label class="col-sm-5 col-form-label">Alamat</label>
                        <div class="col-sm-7">
                            <textarea id="alamat_perusahaan_edit" name="alamat_perusahaan_edit" class="form-control"
                            rows="1"></textarea>
                        </div>
                    </div>
                    <div class="form-group row mb-0 tampil_lembaga">
                        <label class="col-sm-5 col-form-label">No. Telepon</label>
                        <div class="col-sm-7">
                            <input class="form-control form-control-sm" id="no_telp_edit_detail" name="no_telp_edit"
                            value="Personal">
                        </div>
                    </div>
                    <div class="form-group row mb-1 tampil_lembaga">
                        <label class="col-sm-5 col-form-label">Tampilkan Data</label>
                        <div class="col-sm-7">
                            <select name="tampil_edit" id="tampil_edit"
                            class="form-control custom-select form-control-sm pl-1 flat" required>
                                <option value="0" selected>Pribadi</option>
                                <option value="1">Perusahaan</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">Referal</label>
                        <div class="col-sm-7">
                            <select name="via_edit" id="via_edit"
                            class="form-control custom-select form-control-sm pl-1" required>
                                <option value="build" selected>langsung</option>
                                <option value="wa">whatsapp</option>
                                <option value="fb">facebook</option>
                                <option value="ig">instagram</option>
                                <option value="tw">twitter</option>
                                <option value="em">email</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">Boleh Utang</label>
                        <div class="col-sm-7">
                            <select name="status_edit" id="status_edit"
                            class="form-control custom-select form-control-sm pl-1" required>
                                <option value="1">Ya</option>
                                <option value="0">Tidak</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label class="col-sm-5 col-form-label">Max Ngutang</label>
                        <div class="col-sm-7">
                            <div class="input-group input-group-sm">
                                <input class="form-control form-control-sm" id="max_u_edit" name="max_u">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">Kali</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer p-1">
                    <button type="submit" class="btn btn-success update_konsumen_detail">Update</button>
                    <button type="button" class="btn btn-danger tutup-con" data-dismiss="modal">Tutup</button>
                </div>
            </form>
        </div>
    </div>
</div>
<form id="form_print" action="<?=base_url();?>konsumen/print_detail" method="post" target="_blank">
    <input type="hidden" name="periode" id="print_periode">
    <input type="hidden" name="limits" id="print_limits">
    <input type="hidden" name="id_user" value="<?=$id;?>">
</form>
<input type="hidden" id="idkon" value="<?=$id;?>">
<script>
    const input_edit_detail = document.querySelector("#telepon_edit_detail");
    const no_telp_edit_detail = document.querySelector("#no_telp_edit_detail");
    
    const iti_edit_detail = window.intlTelInput(input_edit_detail, {
        initialCountry: "id",
        hiddenInput: () => "full_phone",
        utilsScript: base_url +"assets/build/js/utils.js"
    });
    
    const iti2_edit_detail = window.intlTelInput(no_telp_edit_detail, {
        initialCountry: "id",
        hiddenInput: () => "full_phone_edit",
        utilsScript:base_url +"assets/build/js/utils.js"
    });
    input_edit_detail.addEventListener('keyup', function() {
        $('input[name="full_phone"]').val(iti_edit_detail.getNumber());
        $('input[name="full_phone_country"]').val(iti_edit_detail.getSelectedCountryData()['iso2']);
        
    });
    input_edit_detail.addEventListener('change', function() {
        if (!iti_edit_detail.isValidNumber()) {
            $("#feedback-telp-edit").html('Invalid nomor');
            $("#feedback-telp-edit").addClass("text-danger");
            $("#telepon_edit").addClass("is-invalid text-danger");
            
            $("#dispu").html('');
            $(".takada").hide();
            $(".update_data").prop("disabled", true);
            resetForm();
            $("#jenis_member_edit,#panggilan_edit,#nama_edit,#alamat_edit,#perusahaan_edit,#jenis_lembaga_edit,#alamat_perusahaan_edit,#no_telp_edit_detail,#tampil_data,#via_edit,#save-cari,#status_edit,#max_u_edit")
            .prop("disabled", true);
            
            } else {
            $("#jenis_member_edit,#panggilan_edit,#nama_edit,#alamat_edit,#perusahaan_edit,#jenis_lembaga_edit,#alamat_perusahaan_edit,#no_telp_edit_detail,#tampil_data,#via_edit,#save-cari,#status_edit,#max_u_edit")
            .prop("disabled", false);
            $(".update_data").prop("disabled", false);
            
            $("#feedback-telp-edit").html('');
            $("#feedback-telp-edit").removeClass("text-danger").addClass('text-success');
            $("#telepon_edit").removeClass('is-invalid text-danger').addClass("is-valid text-success");
        }
    });
    // listen to the telephone input for changes
    input_edit_detail.addEventListener('countrychange', () => {
        $("#telepon_edit").change();
    });
    
    $(document).on('click', '.clear_detail', function(e) {
        e.preventDefault();
        $("#periode").val('');
        $("#keywords").val('');
        FilterKonsumen()
    });
    $(document).on('click', '.print_detail', function(e) {
        e.preventDefault();
        var periode = $("#periode").val();
        var limits = $("#limits").val();
        $("#print_periode").val(periode);
        $("#print_limits").val(limits);
        $("#form_print").submit();
    });
    $('.date-piutang').daterangepicker({
        "autoApply": true,
        "dateLimit": {
            "days": 120
        },
        "alwaysShowCalendars": true,
        "startDate": moment().startOf('month'),
        "endDate": end,
        "opens": "left",
        locale: {
            format: 'DD/MM/YYYY'
        },
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf(
            'month')],
            'Last Year': [moment().subtract(1, 'years').endOf('week').startOf('day')]
        }
        }, function(start, end, label) {
        // console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
    });
    $("#status").change(function() {
        var id = $("#status").val();
        if (id == 1) {
            $("#max_u_edit").prop("readonly", true);
            } else {
            $("#max_u_edit").prop("readonly", false);
        }
    });
    $(document).on('click', '.edit_konsumen_detail', function(e) {
        e.preventDefault();
        
        var dataID = $(this).attr('data-id');
        var jenis = $(this).attr('data-jenis');
        var member = $(this).attr('data-member');
        // console.log(member)
        $.ajax({
            'url': base_url + 'konsumen/cek_konsumen',
            'data': {
                id: dataID
            },
            'method': 'POST',
            dataType: 'json',
            beforeSend: function() {
                $('body').loading();
                load_jenis_lembaga('edit', jenis);
                load_jenis_member('edit', member);
            },
            success: function(data) {
                // console.log(data)
                if (level != 'admin') {
                    $('.update_konsumen_detail').attr('disabled', true);
                }
                if (level == 'owner') {
                    $('.update_konsumen_detail').attr('disabled', false);
                }
                
                if (data.jenis > 1) {
                    $('.tampil_lembaga').show();
                    } else {
                    $('.tampil_lembaga').hide();
                }
                $('#edit-konsumen-detail').modal('show');
                $('#error_piutang').css('display', 'none');
                $("#id_edit").val(data.id);
                $("#panggilan_edit").val(data.panggilan);
                $("#telepon_edit_detail").val(data.nohp);
                $("#nama_edit").val(data.nama);
                $("#alamat_edit").val(data.alamat1);
                $("#jenis_member_edit").val(data.jenis_member);
                $("#jenis_lembaga_edit").val(data.jenis);
                $("#nama_perusahaan_edit").val(data.perusahaan);
                $("#alamat_perusahaan_edit").val(data.alamat2);
                $("#no_telp_edit_detail").val(data.no_telp);
                $("#via_edit").val(data.via);
                $("#status_edit").val(data.boleh);
                $("#tampil_edit").val(data.tampil);
                $("#max_u_edit").val(data.max);
                $('body').loading('stop');
            },
            error: function(xhr, ajaxOptions, thrownError) {
                sweet('Peringatan!!!', thrownError, 'warning', 'warning');
                $('body').loading('stop');
            }
        })
    });
    $("#form-edit-detail").submit(function(e) {
        e.preventDefault();
        var dataform = $("#form-edit-detail").serialize();
        $.ajax({
            url: base_url + "konsumen/update_konsumen",
            type: "post",
            data: dataform,
            dataType: 'json',
            beforeSend: function() {
                $('body').loading();
            },
            success: function(arr) {
                if (arr.status == 200) {
                    $('.edit_konsumen_detail').attr('data-member', arr.idmember);
                    showNotif('bottom-right', 'Update!!!', arr.msg, 'success');
                    $('#edit-konsumen-detail').modal('hide');
                    searchFilterKonsumen();
                    } else {
                    showNotif('bottom-right', 'Peringatan!!!', arr.msg, 'error');
                }
                $('body').loading('stop');
            },
            error: function(xhr, ajaxOptions, thrownError) {
                sweet('Peringatan!!!', thrownError, 'warning', 'warning');
                $('body').loading('stop');
            }
        });
    });
    
    var konsumenFilterRequest = null;
    var konsumenFilterTimer = null;

    function scheduleFilterKonsumen() {
        clearTimeout(konsumenFilterTimer);
        konsumenFilterTimer = setTimeout(function() {
            FilterKonsumen(0);
        }, 250);
    }

    function FilterKonsumen(page_num) {
        page_num = page_num ? page_num : 0;
        var keywords = $('#keywords').val();
        var sortBy = $('#sortBy').val();
        var limits = $('#limits').val();
        var idkon = $('#idkon').val();
        var periode = $('#periode').val();
     
        var urlnya = base_url+"konsumen/ajaxDKonsumen/" + page_num
        if (konsumenFilterRequest) {
            konsumenFilterRequest.abort();
        }

        konsumenFilterRequest = $.ajax({
            type: 'POST',
            url: urlnya,
            data: {
                page: page_num,
                keywords: keywords,
                sortBy: sortBy,
                limits: limits,
                idkon: idkon,
                periode: periode
            },
            beforeSend: function() {
                $('.loadings').show();
            },
            success: function(html) {
                $('#dataKonsumen').html(html);
                $('.loadings').fadeOut("slow");
            },
            error: function(xhr, status, error) {
                if (status !== 'abort') {
                    sweet('Peringatan!!!', error, 'warning', 'warning');
                }
                $('.loadings').hide();
            },
            complete: function() {
                konsumenFilterRequest = null;
            }
        });
    }
</script>
