<script type="text/javascript">
    // import moment from "moment";

    var startDate = moment().subtract(6, 'days');
    var endDate = moment();
    $(document).ready(function () {
        getUserData();
        GetUserRole();
        getListProv();
        getListCity();
        initDateRangePicker();
        $("#form_add").submit(function (e) {
            e.preventDefault();

        });

        $("#form_trx_update").submit(function (e) {
            e.preventDefault();
            commitUpdateOrder();
        });
    });


    function getListProv() {
        $.ajax({
            url: "/search/list_prov",
            type: "GET",
            // beforeSend: function (xhr) {
            //     if (localStorage.token) {
            //         xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.token);
            //     }
            // },
            error: function (error) {

                //  console.log(error.status);
                if (error.status === 401) {
                    localStorage.removeItem("token");
                }
            },
            success: function (data) {
                // console.log(`asdasdas`)
                // console.log(data)

                $('#search_province').html("");
                $('#search_province').append("<option value=''>--Pilih Provinsi--</option>");
                $.each(data.data, function (key, value) {
                    // console.log(value)
                    $("#search_province").append('<option value="' + value.prov_name + '">' + value.prov_name + '</option>');
                });
            }

        });
    }

    function getListCity() {

        $('#search_province').change(function () {
           // console.log('city oke')
            if ($('#search_province').val()) {
                $.ajax({
                    url: "/search/list_city/" + $('#search_province').val(),
                    type: "GET",
                    // beforeSend: function (xhr) {
                    //     if (localStorage.token) {
                    //         xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.token);
                    //     }
                    // },
                    success: function (data) {
                        $('#search_city').html("");

                        $('#search_city').append("<option value=''>--Pilih Kab/Kota--</option>");

                        $.each(data.data, function (key, value) {
                            $("#search_city").append('<option value="' + value.city_name + '">' + value.city_name + '</option>');

                        });
                    }
                });
            }
        });
    }

    var userDataTables;

    function getUserData() {
        userDataTables = $('#data-table-user').DataTable(
            {
                "searching": false,
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": '/order/list-datatable',
                    "headers": {'Authorization': 'Bearer ' + localStorage.token},
                    "data": function (d) {
                        d.list_msisdn = $("#search_msisdn").val();
                        d.status = $("select[name=search_status]").val();
                        d.province = $("select[name=search_province]").val();
                        d.city = $("select[name=search_city]").val();
                        d.date_order = $("select[name=search_order_daterange]").val();

                    },
                    "error": function (error) {
                        //  console.log(error.status);
                        if (error.status === 401) {
                            localStorage.removeItem("token");
                            swal("Oops !", "Token anda habis, Silahkan login kembali", "warning");
                            $(location).attr('href', "/auth/login");
                        }
                    },
                },
                "order": [[5, "desc"]],
                "columnDefs" : [
                    {
                        "render": function (data, type, row) {
                            return '<td>' + moment(data).format("D MMMM YYYY H:m:s") + '</td>';
                        },
                        "targets": 5
                    },
                    {
                        "render": function (data, type, row) {
                            var btnUpdate = row[6] == 'Open' ? '<button style="margin : 3px" data-toggle="modal" data-target="#modal-edit-user" onclick=viewUpdateOrder("' + row[7] + '") type="button" class="btn btn-warning btn-sm"> <i class="mdi mdi-pencil mr-1"></i> <span>Update</span> </button>' : '';
                            return '' +
                                '<button style="margin : 3px" data-toggle="modal" data-target="#modal-detail-user" onclick=viewDetailOrder("' + row[7] + '") type="button" class="btn btn-primary btn-sm"> <i class="mdi mdi-eye mr-1"></i> <span>Detail</span> </button>' +btnUpdate;
                        },
                        "targets": 7
                    }
                ]
            });
        $("#search_data").click(function () {
            userDataTables.draw();
        });
    }

    function GetUserRole() {
        $.ajax({
            url: "/role/list",
            type: "GET",
            beforeSend: function (xhr) {
                if (localStorage.token) {
                    xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.token);
                }
            },
            success: function (data) {
             //   console.log(data);
                $(".add_role").html("");
                $(".add_role").append('<option value="">--Pilih Role--</option>');
                $.each(data.data, function (key, value) {
                    $(".add_role").append('<option value="' + value.id_role + '">' + value.nama + '</option>');
                });

                $("#edit_role").html("");
                $("#edit_role").append('<option value="">--Pilih Role--</option>');
                $.each(data.data, function (key, value) {
                    $("#edit_role").append('<option value="' + value.id_role + '">' + value.nama + '</option>');
                });
            }
        });
    }

    function viewUpdateOrder(i){
        $("#pg-order-update").show();
        $(".roz-unstealth").hide();
       // console.log(i);
        showLoading();
        $.ajax({
            url: "/order/order_detail",
            type: "POST",
            data: { order_id: i},
            beforeSend: function (xhr) {
                if (localStorage.token) {
                    xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.token);
                }
            },
            error: function (error) {
              //  console.log(error.status);
                if (error.status === 401) {
                    localStorage.removeItem("token");
                    swal("Oops !", "Token anda habis, Silahkan login kembali", "warning");
                    $(location).attr('href', "/auth/login");
                }
            },
            success: function (data) {
                hideLoading();
                if(data.data.order_detail && data.data.order_detail.length > 0){
                    var custID = data.data.order_detail[0].customer_order_id;
                    var custMSISDN = data.data.order_detail[0].list_msisdn;
                    var custCreated = data.data.order_detail[0].created_at;
                    var custAddress = data.data.order_detail[0].list_address;
                    var custName = data.data.order_detail[0].list_name;
                    var custMail = data.data.order_detail[0].list_email;
                    $("#up_trx_address").val(custAddress);
                    $("#up_trx_cust_name").val(custName);
                    $("#up_trx_date").val(custCreated);
                    $("#up_trx_id").val(i);
                    $("#up_trx_mail").val(custMail);
                    $("#up_trx_old_msisdn").val(custMSISDN);
                    $("#up_trx_new_msisdn").html("");
                    $("#up_trx_new_msisdn").focus();
                }

                // if(data.data && data.data.length > 0){
                //     var custID = data.data[0].customer_order_id;
                //     var custMSISDN = data.data[0].list_msisdn;
                //     var custCreated = data.data[0].created_at;
                //     var custAddress = data.data[0].list_address;
                //     var custName = data.data[0].list_name;
                //     $("#up_trx_address").val(custAddress);
                //     $("#up_trx_cust_name").val(custName);
                //     $("#up_trx_date").val(custCreated);
                //     $("#up_trx_id").val(i);
                //     $("#up_trx_old_msisdn").val(custMSISDN);
                // }
            }
        });

    }

    function viewDetailOrder(i){
        $("#pg-order-detail").show();
        $(".roz-unstealth").hide();
        showLoading();
        $.ajax({
            url: "/order/order_detail",
            type: "POST",
            data: { order_id: i},
            beforeSend: function (xhr) {
                if (localStorage.token) {
                    xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.token);
                }
            },
            error: function (error) {
                //  console.log(error.status);
                if (error.status === 401) {
                    localStorage.removeItem("token");
                    swal("Oops !", "Token anda habis, Silahkan login kembali", "warning");
                    $(location).attr('href', "/auth/login");
                }
            },
            success: function (data) {
              //  console.log(data)
                hideLoading();
                if(data.data.order_detail && data.data.order_hist.length > 0){
                    var custID = data.data.order_detail[0].customer_order_id;
                    var custMSISDN = data.data.order_detail[0].list_msisdn;
                    var custCreated = data.data.order_detail[0].created_at;
                    var custAddress = data.data.order_detail[0].list_address;
                    var custName = data.data.order_detail[0].list_name;
                    var rt = data.data.order_detail[0].list_rt;
                    var rw = data.data.order_detail[0].list_rw;
                    var email = data.data.order_detail[0].list_email;
                    var provinsi = data.data.order_detail[0].list_provinsi;
                    var kota = data.data.order_detail[0].list_kota;
                    var kode_pos = data.data.order_detail[0].list_pos_code;
                    var kel = data.data.order_detail[0].list_id_kel;
                    var kec = data.data.order_detail[0].list_id_kec;
                    var agenName = data.data.order_detail[0].t_nama_agen;
                    var agenNomor = data.data.order_detail[0].t_nomor_agen;
                    var agenlokasi = data.data.order_detail[0].t_lokasi_kerja;

                    var infoagen = agenName == null ? 'Belum Verifikasi Agen' : 'Nama : '+agenName+' | NoHP : '+agenNomor+' | Lokasi : '+agenlokasi;

                    $("#add_listAddress").val(custAddress);
                    $("#add_listName").val(custName);
                    $("#add_created_at").val(custCreated);
                    $("#add_trx_id").val(i);
                    $("#add_listMsisdn").val(custMSISDN);
                    $("#add_agen").val(infoagen);
                    $("#add_listKec").val(kec);
                    $("#add_listKel").val(kel);
                    $("#add_listRt").val(rt);
                    $("#add_listRw").val(rw);
                    $("#add_listPos").val(kode_pos);
                    $("#add_listEmail").val(email);
                    $("#add_province").val(provinsi);
                    $("#add_city").val(kota);


                    $("#dt-history-container").html("");

                    if(data.data.order_hist.length > 0) {
                      //  console.dir(data.data.order_hist);
                        // $("#data-table-order-hist").find("tbody").html("");
                        for (var v = 0; v < data.data.order_hist.length; v++) {
                            var notes = parseInt(data.data.order_hist[v].status_order) == 1 ? 'Submit ' : 'Verifikasi';
                            var tActivity = parseInt(data.data.order_hist[v].status_order) == 1 ? 'Submit order kartu 4G oleh pelanggan' : 'Pengiriman & verifikasi oleh Agen';
                            var vID = data.data.order_hist[v].hist_id;
                            var vOrderBy = data.data.order_hist[v].created_by;
                            var vOrderCreated = data.data.order_hist[v].created_at;
                            var vOrderAgen = data.data.order_hist[v].t_nama_agen == null ? vOrderBy : data.data.order_hist[v].t_nama_agen;
                            var vOrderIcon = parseInt(data.data.order_hist[v].status_order) == 1 ? ' mdi-account-box bg-info-lighten text-info ' : ' mdi-approval bg-primary-lighten text-primary ';
                            var vOrderText = parseInt(data.data.order_hist[v].status_order) == 1 ? ' text-info ' : ' text-primary ';
                            var thtml = '<div class="timeline-item">\n' +
                                '                                        <i class="mdi '+vOrderIcon+' timeline-icon"></i>\n' +
                                '                                        <div class="timeline-item-info">\n' +
                                '                                            <a href="#" class="'+vOrderText+' font-weight-bold mb-1 d-block">'+tActivity+'</a>\n' +
                                '                                            <small>'+notes+' oleh '+vOrderAgen+'</small>\n' +
                                '                                            <p>\n' +
                                '                                                <small class="text-muted">'+vOrderCreated+'</small>\n' +
                                '                                            </p>\n' +
                                '                                        </div>\n' +
                                '                                    </div>';
                            $("#dt-history-container").append(thtml);
                        }
                    }
                }else{
                    swal("Oops !", "Data tidak ditemukan", "warning");
                  //  $(location).attr('href', "/order/list");
                }
            }
        });
    }

    function commitUpdateOrder() {
        console.log("uhui");

        var oldNum = $("#up_trx_old_msisdn").val();
        var newNum = $("#up_trx_new_msisdn").val();
        var orderID = $("#up_trx_id").val();
        if (newNum) {

            var idFile = $('#t_cust_id_file').prop('files')[0];
            if (!$('#t_cust_id_file').prop('files')[0]) {
                swal("Oops !", "Silahkan upload foto ID & kartu pelanggan !", "warning");
                return false;
            } else {
                var fSize = $('#t_cust_id_file').prop('files')[0].size / 1024 / 1024;
                if (fSize > 4) {
                    swal("Oops !", "Ukuran foto maksimal 4MB !", "warning");
                    return false;
                }
            }

            var form_data = new FormData();
            form_data.append('d_cust_file', idFile);
            form_data.append("d_new_num", newNum);
            form_data.append("d_old_num", oldNum);
            form_data.append("d_order_id", orderID);

            $.ajax({
                url: "/order/update_order",
                dataType: 'json',
                cache: false,
                contentType: false,
                processData: false,
                type: "POST",
                data: form_data,
                beforeSend: function (xhr) {
                    if (localStorage.token) {
                        xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.token);
                    }
                },
                error: function (error) {
                    //  console.log(error.status);
                    if (error.status === 401) {
                        localStorage.removeItem("token");
                        swal("Oops !", "Token anda habis, Silahkan login kembali", "warning");
                        $(location).attr('href', "/auth/login");
                    }
                },
                success: function (data) {
                    // cancelUpdateForm();
                    $(location).attr('href', "/order/list");
                    triggerEvent("trigger-clear");
                    $("#up_trx_new_msisdn").html("");
                    swal("Update Berhasil", "Data order pelanggan berhasil diupdate.", "success");

                }
            });
        } else {
            swal("Oops !", "Silahkan isi nomor baru pelanggan !", "warning");
        }


    }

    function cancelUpdateForm(){
        $(".roz-stealth").hide();
        $("#pg-order-list").show();
    }

    function triggerEvent(buttonId) {
        if (document.getElementById(buttonId) == null
            || document.getElementById(buttonId) == undefined) {
            return;
        }
        if (document.getElementById(buttonId).dispatchEvent) {
            var e = document.createEvent("MouseEvents");
            e.initEvent("click", true, true);
            document.getElementById(buttonId).dispatchEvent(e);
        } else {
            document.getElementById(buttonId).click();
        }
    }

    function initDateRangePicker() {
        $('input[name="search_order_daterange"]').daterangepicker({
            ranges: {
                '7 Hari Terakhir': [moment().subtract(6, 'days'), moment()],
                '30 Hari Terakhir': [moment().subtract(29, 'days'), moment()],
                'Bulan Ini': [moment().startOf('month'), moment().endOf('month')],
                'Tahun Ini': [moment().startOf('year'), moment().endOf('year')]
            },
            "showCustomRangeLabel": false,
            "alwaysShowCalendars": true,
            "startDate": moment().subtract(6, 'days'),
            "endDate": moment()
        }, function (start, end, label) {
            startDate = start;
            endDate = end;
        });
    }

</script>