var toolbar_products = [
    {view: "button", id: "cmd_new_product", label: "Nuevo", type: "iconButton",
        autowidth: true, icon: "plus"},
    {view: "button", id: "cmd_edit_product", label: "Editar", type: "iconButton",
        autowidth: true, icon: "pencil"},
    {view: "button", id: "cmd_delete_product", label: "Eliminar", type: "iconButton",
        autowidth: true, icon: "minus"},
];


var grid_products_cols = [
    { id:"id", header:"ID", width: 75},
    { id:"key", header: ["Clave", {content: "textFilter"}], width: 100, sort:"string" },
    { id:"description", header: ["Descripción", {content: "textFilter"}], fillspace:true, sort:"string" },
    { id:"unidad", header: ["Unidad", {content: "selectFilter"}], width: 150, sort:"string" },
    { id:"price", header: ["Precio", {content: "numberFilter"}], width: 150, sort:"int", format: webix.i18n.priceFormat, css: "cell_right" },
];


var grid_products = {
    view: "datatable",
    id: "grid_products",
    select: "row",
    adjust: true,
    footer: true,
    resizeColumn: true,
    headermenu: true,
    columns: grid_products_cols,
    //~ onClick:{
        //~ cmd_edit_parter: cmd_edit_partner_click,
    //~ },
};


var controls_generals = [
    {view: "textarea", id: "description", name: "description", height: 200, label: "Descripción", required: true, labelPosition: "top", invalidMessage: "La Descripción es requerida"  },
    {cols: [{view: "text", id: "unidad", name: "unidad", label: "Unidad", width: 300, labelWidth: 130, labelAlign: "right", required: true, invalidMessage: "La Unidad es requerida" },{}]},
    {cols: [{view: "search", type: "text", id: "price", name: "price", label: "Valor Unitario", width: 300, labelWidth: 130, labelAlign: "right", required: true, icon:"calculator", invalidMessage: "Captura un valor númerico", inputAlign:"right" },{}]},
]


var controls_products = [
    {
        view: "tabview",
        tabbar: { options: ["Generales"]}, animate: true,
        cells: [
            {id: "Generales", rows: controls_generals},
        ]
    },
    {rows: [
        { template:"", type: "section" },
        { margin: 10, cols: [{},
            {view: "button", id: "cmd_save_product", label: "Guardar" , type: "form", autowidth: true, align:"center"},
            {view: "button", id: "cmd_cancel_product", label: "Cancelar" , type: "danger", autowidth: true, align:"center"},
            {}]
        },
    ]}
];


var form_product = {
    type: "space",
    cols: [{
        view: "form",
        id: "form_product",
        //~ width: 600,
        complexData: true,
        elements: controls_products,
        rules: {
            description: function(value){ return value.trim() != ""; },
            unidad: function(value){ return value.trim() != ""; },
            price: function(value){ return value.trim() != ""; },
        }
    }]
};


var multi_products = {
    id: "multi_products",
    animate: true,
    cells:[
        {id: "products_home", rows:[
            {view:"toolbar", elements: toolbar_products},
            grid_products,
        ]},
        {id: "product_new", rows:[form_product, {}]}
    ]
};


var app_products = {
    id: "app_products",
    rows:[
        {view: "template", id: "th_products", type: "header", template:"Administración de Productos" },
        multi_products
    ]
};