<script>
    var ds_goods_stock_mix = [
        { name: "id", head: "", visible: 0, type: "text" },
        { 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: 0, subinfo: (g_viewmode == 0) ? [6] : [6], width: "60%", subinfoclass: "subinfo" },
        { name: "mahang", head: "Mã hàng", visible: 0, type: "text", required: 0, merge: 0 },
        { name: "dvt", head: "ĐVT", visible: (g_viewmode == 0) ? 0 : 1, type: "text", required: 0, width: "6%" },
        { name: "color", head: "Màu", visible: 0, type: "text", required: 0, subinfobreak: " ", subinfoclass: "goods_color" },
        { name: "ready", head: "Sẵn", visible: 1, type: "number", required: 1, editable: 0, width: (g_viewmode == 0) ? "20%" : "8%", class: "bb" },
        { name: "ton", head: "Tồn", visible: 1, type: "number", required: 1, editable: 0, subinfo: (g_viewmode == 0) ? [9] : null, width: (g_viewmode == 0) ? "20%" : "8%" },
        { name: "tonmax", head: "Max", visible: (g_viewmode == 0) ? 0 : 1, type: "number", required: 1, editable: 0, class: "br", width: "8%" },
        { name: "gianhap", head: "Giá vốn", visible: (g_viewmode == 0) ? 0 : 1, type: "number", round: 1, required: 0, editable: 0, width: (g_viewmode == 0) ? "30%" : "10%" },
        { name: "giabuon", head: "Giá buôn", visible: (g_viewmode == 0) ? 0 : 1, type: "number", required: 0, editable: 1, width: "10%", class: "bg" },
        { name: "giale", head: "Giá lẻ", visible: (g_viewmode == 0) ? 0 : 1, type: "number", required: 0, editable: 1, width: "10%", class: "bd" },
    ];
    var gridViewEx = new GridViewEx(ds_goods_stock_mix, "gridViewEx");
    gridViewEx.page_source = "bc_hangtonkhotohop";
    gridViewEx.page_title = itxt("bc_hangtonkhotohop");

    var gridViewExMixDetails = new GridViewEx(ds_goods_mix_material, "gridViewExMixDetails");
    gridViewExMixDetails.page_source = "bc_hangtonkhotohop";

    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";
        showStoreInSelect("idstore");
        showGoodsMixTemplateInSelect(null, "idtemplate", -1);
        showList(0);
    }
    function menuPopupItem(id) {
        var vals = id.split(gIdCombineChar);
        if (vals.length != 2) return;
        var menu;
        menu = "<a href='javascript:void(0)' onclick='javascript:mShowGoodsEximDetails(1," + getValById("idstore") + "," + vals[0] + "," + vals[1] + ",\"\")' class='menu_popup_item'>Xem nhập xuất" + "</a>";
        menu += "<a href='javascript:void(0)' onclick='javascript:menuShowMixDetails(" + vals[0] + "," + vals[1] + ",\"xb\")' class='menu_popup_item'>Danh sách nguyên liệu" + "</a>";
        showModal(menu, itxt("chitietmathang"));
    }
    function showList(pageno) {
        showWaitModal(0, 1000);
        var templateid = getValById("idtemplate");
        var storeid = getValById("idstore");
        var showmode = getSelectVal("idshowmode");//0:only ready, 1: all
        var sgoodsname = getValById("idgoodsname"); if (!isEmpty(sgoodsname)) sgoodsname = encodeURIComponent(sgoodsname);
        var sgoodscode = getValById("idgoodscode"); if (!isEmpty(sgoodscode)) sgoodscode = encodeURIComponent(sgoodscode);

        var url = "?page=" + gridViewEx.page_source + "&pagesub=list&template_id=" + templateid +
            "&goodsname=" + sgoodsname + "&goodscode=" + sgoodscode + "&pageno=" + pageno +
            "&store_id=" + storeid + "&showmode=" + showmode;
        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);
                gridViewEx.showGrid(data, "idcontentlist", 'menuPopupItem');
            },
            error: function () {
                hideModal();
            }
        });
    }
    function menuShowMixDetails(goods_id, unit_id) {
        var url = "?page=" + gridViewEx.page_source + "&pagesub=listmaterial&goods_id=" + goods_id +
            "&unit_id=" + unit_id + "&store_id=" + getSelectVal("idstore");
        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);
                var dataShow = gridViewExMixDetails.showGrid(data);
                showModal(dataShow);
            },
            error: function () {
                hideModal();
            }
        });
    }
</script>

<div style="width: 100%;display: flex;">
    <input type="search" id="idgoodsname" oninput="showList(0)" style="width: 25%;float: left;" placeholder="tên hàng">
    <input type="search" id="idgoodscode" oninput="showList(0)" style="width: 15%;float: left;" placeholder="mã hàng">
    <select size="1" name="idstore" id="idstore" style="width:22%;float: left;" onchange="showList(0)"></select>
    <select size="1" name="idtemplate" id="idtemplate" style="width:18%; float:right" onchange="showList(0)"></select>
    <select size="1" name="idshowmode" id="idshowmode" style="width:20%; float:right" onchange="showList(0)">
        <option value="0">Xem hàng sẵn</option>
        <option value="1">Xem mọi hàng</option>
    </select>

</div>
<div id="idcontentlist"></div>
<input type="hidden" id="page_initflag" value="">