<script language="javascript">
    var data_struct = [
        { name: "empid", head: "", visible: 0 },
        { name: "name", head: "Nhân viên", visible: 1, type: "text", required: 1, width: "40%" },
        { name: "trienkhai", head: "Triển khai", visible: 1, type: "text", required: 0, subinfo: [3], width: "20%" },
        { name: "trienkhaibitra", head: "Bị trả", visible: 0, type: "number", required: 0 },
        { name: "banhang", head: "Bán hàng", visible: 1, type: "text", required: 0, subinfo: [5], width: "20%" },
        { name: "banhangbitra", head: "Bị trả", visible: 0, type: "number", required: 0 },
        { name: "tong", head: "Tổng HH", visible: 1, type: "number", required: 0, width: "20%" },
    ];
    var gridViewEx = new GridViewEx(data_struct, "gridViewEx");
    gridViewEx.page_source = "bc_hoahonghang";
    gridViewEx.page_title = itxt("hoahonghang");

    gLayout(true);
    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";
        showGoodsCategoryInSelect('idgoodscategory', '0', true);

        showList(0);
    }

    function showDetails(userid, pageno) {
        var goods_id = getValById("idgoodsid");
        var unit_id = getValById("idunitid");

        var category_id = getValById("idgoodscategory");

        var url = "?page=" + gridViewEx.page_source + "&pagesub=details&userid=" + userid + "&categoryid=" + category_id + "&goodsid=" + goods_id + "&unitid=" + unit_id + "&pageno=" + pageno;
        var dataString = "";
        jQuery.ajax({
            url: url,
            data: dataString,
            type: "GET",
            success: function (data) {
                hideModal();
                if (!isDataOk(data)) {
                    showMsg([itxt("loi"), getDataFail(data)]);
                    return;
                }
                data = getDataOk(data);
                DlgSelect.showSimple(data);
            },
            error: function () {
                showMsg(itxt("loi"));
            }
        });
    }

    function showList(pageno, goods_id, unit_id) {
        showWaitModal();
        if (isEmpty(goods_id)) goods_id = 0;
        if (isEmpty(unit_id)) unit_id = 0;
        var iddtpfrom = document.getElementById("iddtpfrom");
        var iddtpto = document.getElementById("iddtpto");
        var category_id = getValById("idgoodscategory");

        if (parseNumberVn(goods_id) > 0) {
            var idcategoryselect = document.getElementById("idgoodscategory");
            if (!isEmpty(idcategoryselect))
                idcategoryselect.selectedIndex = 0;
        } else if (category_id > 0) {
            UiControl.selectInput_Update("idgoods", "idgoodsid", "", 0);
            setValById("idunitid", 0);
        }
        var url = '?page=' + gridViewEx.page_source + '&pagesub=list&from=' + iddtpfrom.value + '&to=' + iddtpto.value + '&categoryid=' + category_id + '&goodsid=' + goods_id + "&unitid=" + unit_id;
        var dataString = "";
        jQuery.ajax({
            url: url,
            data: dataString,
            type: "GET",
            success: function (data) {
                if (!isDataOk(data)) {
                    showMsg([itxt("loi"), getDataFail(data)]);
                    return;
                }
                data = getDataOk(data);
                gridViewEx.showGrid(data, "idcontent", "showDetails");
            },
            error: function () {
                showMsg(itxt("loi"));
            }
        });

        hideModal();
    }
    function onGoodsSeelct(id, goods_id, unit_id, goods_name) {
        var vals = id.split(g_split_val);
        if (vals.length > 3) {
            showList(1, vals[1], vals[2]);
            setValById("idgoodsid", vals[1]);
            setValById("idunitid", vals[2]);
        } else {
            showList(1, goods_id, unit_id);
            UiControl.selectInput_Update("idgoods", "idgoodsid", goods_name, goods_id);
            setValById("idunitid", unit_id);
        }
    }
    function dtpOnChange() {
        showList(0);
    }
    UiControl.selectInputGoods("idgoods", "hàng", "onGoodsSeelct", "onGoodsSeelct", "XB");
    UiControl.inputWithClearButtonSetup();
</script>

<div class="pane_sub">
    <table style="width: 100%;border-collapse: collapse;" class="downgap" border="0px">
        <tr>
            <td>
                <select size="1" name="idgoodscategory" id="idgoodscategory" style="width:100%;float:right;"
                    class="input_invoice" onchange="showList(0)">
                    <option value="0">(Tất cả)</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <div id="idgoods" class="inputex" style="width: 100%;"></div>
                <input type="hidden" id="idgoodsid">
                <input type="hidden" id="idunitsid">

            </td>
        </tr>
        <tr>
            <td colspan="2">
                {_DTPDURATION_}
                <input type="button" value=">>" style="float:right;width:44px;" onclick="return showList(0)"
                    class="input_invoice">
            </td>
        </tr>
    </table>
</div>
<div class="pane_main">
    <div style="width: 100%;height: 3px;clear: both;"></div>
    <div id="idcontent">{_CONTENT_}</div>
</div>

<input type="hidden" id="page_initflag" value="">