<script language="javascript">
    var data_struct = [
        { name: "id", head: "", visible: 0 },
        { name: "goods_id", head: "", visible: 0 },
        { name: "unit_id", head: "", visible: 0 },
        { name: "tenhang", head: "Tên hàng", visible: 1, type: "text", required: 1, merge: 1, width: "40%" },
        { name: "mahang", head: "Mã hàng", visible: 1, type: "text", required: 0, merge: 1, width: "20%" },
        { name: "dvt", head: "ĐVT", visible: 1, type: "text", required: 0, width: "10%" },
        { name: "soluong", head: "Số lượng", visible: 1, type: "number", required: 0, editable: 1, width: "10%" },
        { name: "dongia", head: "Đơn giá", visible: 1, type: "number", required: 0, editable: 1, width: "10%" },
        { name: "tontoithieu", head: "Tồn kho>=", visible: 1, type: "number", required: 0, editable: 1, width: "10%" },
    ];
    var gridViewEx = new GridViewEx(data_struct, "gridViewEx");
    gridViewEx.page_source = "kb_hangtondauky";
    gridViewEx.page_title = itxt("hangtondauky");

    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 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("loi"), getDataFail(data)]);
                    return;
                }
                showMsg(itxt("thanhcong"), gridViewEx.page_title, 500);

            },
            error: function () {
                showMsg(itxt("thatbai"), gridViewEx.page_title);
            }
        });
        return false;
    }
    async function onChangeInput(input, field_name, id, goods_id, unit_id) {
        input.classList = "divcell_input input_imagewait";
        var url = "?page=" + gridViewEx.page_source + "&pagesub=save&type=" + field_name + "&goods_id=" + goods_id + "&unit_id=" + unit_id + "&store_id=" + getSelectVal("store_id") + "&value=" + input.value;
        var data = await getSync(url);

        var idrow = document.getElementById(gridViewEx.getRowId(id));
        if (!isDataOk(data)) {
            showMsg([itxt("loi"), getDataFail(data)], "", 1000);
            idrow.style.fontWeight = "bold";
            idrow.style.color = "#FF0000";
            input.classList = "divcell_input input_imageerror";
            return;
        }

        var idrow = document.getElementById(gridViewEx.getRowId(id));
        idrow.style.fontWeight = "bold";
        idrow.style.color = "#0000FF";
        input.classList = "divcell_input input_imageok";
    }


    function showList(pageno) {
        var url = "?page=" + gridViewEx.page_source + "&pagesub=list&category_id=" + getSelectVal("category_id") +
            "&store_id=" + getSelectVal("store_id") + "&pageno=" + pageno;

        var dataString = "";
        jQuery.ajax({
            url: url,
            data: dataString,
            type: "GET",
            success: function (data) {

                gridViewEx.showGridUpdateable(data, "idcontent", "onChangeInput");
            },
            error: function () {
                showMsg(itxt("loi"));
                hideModal();
            }
        });
    }
</script>

<form method="POST" action="?page=kb_hangtondauky" onsubmit="return saveForm(this)">
    <input type="hidden" name="pageno" value="{_PAGENO_}" />
    <div class="pane_whole">
        <div style="width: 100%;display: flex;">
            <select size="1" name="store_id" id="store_id" style="padding:3px 0px;float:right;width:60%"
                onchange="return showList(0)">
                {_STORE_}
            </select>
            <select size="1" name="category_id" id="category_id" style="padding:3px 0px;float:right;width:40%"
                onchange="return showList(0)">
                <option value="0"></option>
                {_GOODSCATEGORY_}
            </select>
        </div>
        <div id="idcontent">{_GOODSLIST_}</div>
        <div style="clear:both"></div>
        <div style="width: 100%;">
        </div>
    </div>
    </div>
</form>
<input type="hidden" id="page_initflag" value="">