<script src="/js/qr-scanner.umd.min.js"></script>
<script language="javascript">
    var data_struct = [
        { name: "invoice_id", head: "", visible: 0, mixed: 1 },
        { name: "invoice_date", head: "Ngày", visible: 1, width: ["30%", "15%"], subinfo: [2, 10], subinfoclass: "subinfo", maininfoclass: "bb" },
        { name: "invoice_no", head: "Số phiếu", visible: 0, width: "", class: "bp" },
        { name: "contact_name", head: "Khách nhận", visible: 1, type: "text", width: ["70%", "35%"], subinfo: [7, 8], subinfoclass: "subinfo", maininfoclass: "bp" },
        { name: "delivery_no", head: "Số vận đơn", visible: [0, 1], type: "text", width: "15%" },
        { name: "finish_time", head: "Ngày xong", visible: [0, 1], type: "text", width: "15%" },
        { name: "realname", head: "Nhân viên giao", visible: [0, 1], type: "text", width: "20%" },
        { name: "contact_address", head: "", visible: 0, type: "text" },
        { name: "contact_phone", head: "", visible: 0, type: "text" },
        { name: "creator_realname", head: "", visible: 0, type: "text" },
        { name: "totalcost", head: "Tiền phiếu", visible: 0, type: "number", width: "", class: "br" },
    ];
    var gridViewEx = new GridViewEx(data_struct, "gridViewEx");
    gridViewEx.page_source = "xuathang_sogiaohang";
    gridViewEx.page_title = itxt("sogiaohang");
    var m_lastiddetails = null;
    UiControl.inputText("idshippingcodediv", "idshippingcode", "Số vận đơn", "showList");
    UiControl.inputWithClearButtonSetup();
    scanClear();
    initOneTime();

    function initOneTime() {
        //check xem da khoi tao chua
        var page_initflag = document.getElementById("page_initflag");
        if (page_initflag.value.length > 0)
            return;
        page_initflag.value = "1";
        setInnerById("idpageheader", gridViewEx.page_title.toUpperCase());
        showList(0);
    }
    function showList(pageno) {

        var iddtpfrom = document.getElementById("iddtpfrom");
        var iddtpto = document.getElementById("iddtpto");
        var idshippingcode = document.getElementById("idshippingcode");
        var url = "?page=" + gridViewEx.page_source + "&action=list&store_id=" + getSelectVal("store_id") +
            "&pageno=" + pageno + "&from=" + iddtpfrom.value + "&to=" + iddtpto.value + "&shippingcode=" + uriEncode(idshippingcode.value) + "&viewmode=" + getValById("viewmode");

        var dataString = "";
        jQuery.ajax({
            url: url,
            data: dataString,
            type: "GET",
            success: function (data) {
                //    showGridUpdateable(data, idcontainer, fnCallBackOnChange, fnCallBackOnClick, fnCallBackOnExpand) {
                //    showGrid(data, idContent, fnCmd, fnCmdTitle, fnCmdParams, idRowPrefix, fnViewOtherPage, fnViewOtherPageParams) {
                //    showGridCollapsible(data, idcontainer, fnCallBackOnExpand, arExtraButtons) {

                gridViewEx.m_arExtraButtons = [{ caption: "::", function: "menuPopup", class: "" }]
                gridViewEx.showGridCollapsible(getDataOk(data), "idcontent", "showDetails");
            },
            error: function () {
                showMsg(itxt("loi"));
                hideModal();
            }
        });
    }
    function showDetails(iddivshow, invoice_id) {
        var url = "?page=xuathang_sogiaohang&action=thongtin&invoice_id=" + invoice_id;
        var dataString = "";
        jQuery.ajax({
            url: url,
            data: dataString,
            type: "GET",
            success: function (data) {
                if (isDataFail(data)) {
                    showMsg([itxt("loi"), getDataFail(data)]);
                    return;
                } else {
                    var rdatas = getDataOk(data).split(g_split_row);
                    if (rdatas.length != 2) {
                        showMsg(itxt("dulieuloi"));
                        return;
                    }

                    var vals = rdatas[0].split(g_split_val);
                    if (vals.length != 21) {
                        showMsg(itxt("dulieuloi"));
                        return;
                    }
                    var first = false;
                    if (m_lastiddetails != null) {
                        setInnerById(m_lastiddetails, "");
                    }

                    else
                        first = true;

                    var html = '<div onclick="event.stopPropagation();" style="clear:both;padding:4px;width:100%;overflow: auto;-moz-box-sizing:border-box;box-sizing:border-box;">';
                    html += '<form  method="POST" action="?page=xuathang_phieugiaohang" onsubmit="return saveForm(this)">';
                    html += rdatas[1];
                    html += '</form></div>';
                    setInnerById(iddivshow, html);
                    m_lastiddetails = iddivshow;
                    {
                        UiControl.selectInputContact("idreceiver", "receiver", itxt("nguoinhan"));
                        UiControl.selectInputContact("idshipping_office", "shipping_office", itxt("trunggiannhan"));
                        UiControl.selectInputContact("idshipper", "shipper", itxt("shipper"));
                        UiControl.selectInputUsers("iduser", "user", itxt("nhanvien"));
                        UiControl.inputWithClearButtonSetup();
                        //idcontainer, idval, val_display, val_value
                        UiControl.selectInput_Update("idreceiver", "receiver", vals[1], vals[0]);
                        UiControl.selectInput_Update("idshipping_office", "shipping_office", vals[5], vals[4]);
                        UiControl.selectInput_Update("idshipper", "shipper", vals[9], vals[8]);
                        UiControl.selectInput_Update("iduser", "user", vals[13], vals[12]);
                    }

                }

            },
            error: function () {
                showMsg(itxt("loi"));
            }
        });
    }

    function saveForm(f) {
        var form = $(f);
        var url = form.attr('action');
        var dataString = form.serialize();

        jQuery.ajax({
            url: url,
            data: dataString,
            type: "POST",
            success: function (data) {
                if (isDataOk(data))
                    showMsg(itxt("daghithietlap"), itxt("thietlapinan"));
                else
                    showMsg([itxt("loi"), data]);
            },
            error: function () {

                showMsg(itxt("thatbai"), itxt("thietlapinan"));
            }
        });
        return false;
    }
    g_pageobj['{_UID_}'] =
    {
        capnhatSoVanDon: function (shippingcode, invoice_id) {
            showWaitModal();
            var url = "?page=xuathang_sogiaohang&action=update&invoice_id=" + invoice_id + "&shippingcode=" + uriEncode(shippingcode);
            var dataString = "";
            jQuery.ajax({
                url: url,
                data: dataString,
                type: "GET",
                success: function (data) {
                    if (isDataFail(data)) {
                        showModalBlock("<p>Thất bại</p>" + getDataFail(data));
                        return;
                    }
                    else if (isDataOk(data)) {
                        var html = "<div style='width:100%;-moz-box-sizing:border-box;box-sizing:border-box;line-height:150%'>";
                        html += "<p align='center'>Đã cập nhật. Nạp lại để xem hay đổi</p>";
                        html += "<input type=\"button\" class=\"btndlg cancel\" style=\"width:50%\" value=\"Đóng\" onclick=\"hideModalBlock(false)\">";
                        html += "<input type=\"button\" class=\"btndlg ok\" style=\"width:50%\" value=\"Nạp lại\" onclick=\"return showList()\">";
                        html += "</div>";
                        showModal(html);

                    }
                    else
                        showMsg(itxt("loi"));
                },
                error: function () {
                    showMsg(itxt("loi"));
                }
            });
        },
        quetSoVanDonDo: function (result, invoice_id) {
            hideModalBlock();
            scanClear();
            g_pageobj['{_UID_}'].capnhatSoVanDon(result.data, invoice_id);
        },
        quetSoVanDon: function (invoice_id) {
            var html = "<video id=\"qrvideopreview\" style=\"width: 300px;height: 300px;outline: 1px solid red;display:block;margin: 0px auto;\"></video>";
            html += "<input type=\"button\" class=\"btndlg cancel\" style=\"width:100%\" value=\"Đóng\" onclick=\"hideModalBlock(false)\">";
            showModalBlock(html, 'Quét số vận đơn - QR');

            if (isEmpty(g_scanner))
                g_scanner = new QrScanner(document.getElementById('qrvideopreview'), result => g_pageobj['{_UID_}'].quetSoVanDonDo(result, invoice_id), {
                    onDecodeError: error => {
                    },
                    highlightScanRegion: true,
                    highlightCodeOutline: true,
                });
            g_scanner.start();
        },
        nhapSoVanDon: function (invoice_id) {
            DlgGetText("Nhập vào số vận đơn", "g_pageobj['{_UID_}'].nhapSoVanDonDo", [invoice_id]);
        },
        nhapSoVanDonDo: function (idtextinput, invoice_id) {
            g_pageobj['{_UID_}'].capnhatSoVanDon(idtextinput.value, invoice_id);

        }, nhapHoanThanhGiao(invoice_id) {
            var html = '';
            html += '<div style="width:100%;padding:8px;-moz-box-sizing:border-box;box-sizing:border-box;">Chi phí giao<br>';
            html += '<input type="text" name="delivery_fee" value="" style="width: 100%;margin-bottom:8px" placeholder="chi phí giao">';
            html += 'Thời điểm giao xong<br>';
            html += '<input class="date input_invoice" id="delivery_date_finish" name="delivery_date_finish" type="text"'
                + 'style="float: right;width: 100%;font-weight: bold;"'
                + 'onclick="javascript:NewCssCal(\"delivery_date_finish\")" value="' + getCurDate() + '">';
            html += '</div><input type="button" style="width:100%;margin-top:8px" value="Hoàn thành" class="buttonbig done" onclick="g_pageobj[\'{_UID_}\'].nhapHoanThanhGiaoDo(' + invoice_id + ')">';
            showModal(html, 'Hoàn thành giao hàng', 1);
        },
        nhapHoanThanhGiaoDo: function (invoice_id) {
            var url = "?page=xuathang_sogiaohang&action=hoanthanhgiao&invoice_id=" + invoice_id + "&delivery_fee=" + getValById("delivery_fee") + "&delivery_date_finish=" + getValById("delivery_date_finish");

            var dataString = "";
            jQuery.ajax({
                url: url,
                data: dataString,
                type: "GET",
                success: function (data) {
                    if (isDataFail(data)) {
                        showMsg([itxt("loi"), getDataFail(data)]);
                        return;
                    } else {
                        showMsg(itxt("dakethucgiaohang"));
                    }

                },
                error: function () {
                    showModal(itxt("loi"));
                }
            });
        },
        nhapTrangThaiGiao(invoice_id) {
            var items = [{ id: 0, name: "(chưa xác định)" }, { id: 1, name: "Giao shipper ngoài" }, { id: 2, name: "Giao trung gian" }, { id: 3, name: "Giao người nhận" }];
            DlgSelect.showItemArray(items, "g_pageobj['{_UID_}'].nhapTrangThaiGiaoDo", [invoice_id]);
            //static showItemArray(dataArray,fnCallBack,fnCallBackParamArray,fnCallBackTitle)
        },
        nhapTrangThaiGiaoDo(invoice_id, status_id) {
            var url = "?page=s&action=capnhattrangthai&invoice_id=" + invoice_id + "&status_id=" + status_id;
            var dataString = "";
            jQuery.ajax({
                url: url,
                data: dataString,
                type: "GET",
                success: function (data) {
                    if (isDataFail(data)) {
                        showMsg([itxt("loi"), getDataFail(data)]);
                        return;
                    } else {
                        showModal(itxt('dacapnhat'));
                    }
                },
                error: function () {
                    showMsg(itxt("loi"));
                }
            });
        },
    };

    function menuPopup(invoice_id) {
        var menu = "";
        menu += "<a href='javascript:void(0)' onclick=\"javascript:g_pageobj['{_UID_}'].nhapSoVanDon(" + invoice_id + ")\" class='menu_popup_item'>Nhập số vận đơn" + "</a>";
        menu += "<a href='javascript:void(0)' onclick=\"javascript:g_pageobj['{_UID_}'].quetSoVanDon(" + invoice_id + ")\" class='menu_popup_item'>Quét số vận đơn" + "</a>";
        menu += "<a href='javascript:void(0)' onclick=\"javascript:g_pageobj['{_UID_}'].nhapTrangThaiGiao(" + invoice_id + ")\" class='menu_popup_item'>Trạng thái giao" + "</a>";
        menu += "<a href='javascript:void(0)' onclick=\"javascript:g_pageobj['{_UID_}'].nhapHoanThanhGiao(" + invoice_id + ")\" class='menu_popup_item'>Hoàn thành giao" + "</a>";

        showModal(menu, "MENU SỐ VẬN ĐƠN");
    }

    function dtp_changeduration_onchanged() {
        setValById("idshippingcode", "");
        showList();
    }

    function scanClear() {
        if (!isEmpty(g_scanner)) {
            g_scanner.stop();
            g_scanner.destroy();
            g_scanner = null;
        }
    }
    gLayout(true);
</script>
</head>
<div class="pane_sub">
    <table class="downgap" style="width: 100%;border-collapse: collapse;" cellpadding="0" cellspacing="0" border="0px">
        <tr>
            <td>
                <select size="1" class="input_invoice" name="store_id" id="store_id" style="width:100%;float: left;"
                    onchange="setValById('idshippingcode','');return showList()">
                    {_STORE_}
                </select>
            </td>
            <td>
                <select size="1" class="input_invoice" name="viewmode" id="viewmode" style="width: 100%;float: left;"
                    onchange="setValById('idshippingcode','');return showList()">
                    <option value="0">(xem mọi phiếu)</option>
                    <option value="1">không số vận đơn</option>
                    <option value="2">có số vận đơn</option>
                </select>

            </td>
        </tr>
        <tr>
            <td colspan="2">
                {_DTPDURATION_}
                <input type="submit" class="input_invoice" value=">>" style="float:right;width:44px"
                    onclick="return showList()">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div style="width: 100%;" id="idshippingcodediv" class="inputex">
            </td>
        </tr>
    </table>
</div>
<div class="pane_main">
    <div id="idcontent"></div>
</div>

<div class="pane_bottom_gap"></div>
<div class="pane_bottom">
</div>
<input type="hidden" id="page_initflag" value="">