var toolbar_invoices = [
    {view: "button", id: "cmd_new_invoice", label: "Nueva", type: "iconButton",
        autowidth: true, icon: "plus"},
    {view: "button", id: "cmd_edit_invoice", label: "Editar", type: "iconButton",
        autowidth: true, icon: "pencil"},
    {view: "button", id: "cmd_delete_invoice", label: "Eliminar", type: "iconButton",
        autowidth: true, icon: "minus"},
];


var grid_invoices_cols = [
    {id: "id", header:"ID", hidden:true},
    {id: "serie", header: ["Serie", {content: "selectFilter"}], adjust: "data", sort:"string"},
    {id: "folio", header: ["Folio", {content: "numberFilter"}], adjust: "data", sort:"int", css: "cell_right"},
    {id: "uuid", header: ["UUID", {content: "textFilter"}], adjust: "data", sort:"string"},
    {id: "fecha", header: ["Fecha y Hora"], adjust: "data", sort:"string"},
    {id: "tipo", header: ["Tipo", {content: "selectFilter"}], adjust: "data", sort:"string"},
    {id: "estatus", header: ["Estatus", {content: "selectFilter"}], adjust: "data", sort:"string"},
    {id: "total", header: ["Total M.N.", {content: "numberFilter"}], width: 150, sort:"int", format: webix.i18n.priceFormat, css: "cell_right"},
    {id: "partner", header: ["Razón Social", {content: "selectFilter"}], fillspace:true, sort:"string"},
];


var grid_invoices = {
    view: "datatable",
    id: "grid_invoices",
    select: "row",
    adjust: true,
    footer: true,
    resizeColumn: true,
    headermenu: true,
    columns: grid_invoices_cols,
};


var grid_details_cols = [
    {id:"id", header:"ID", hidden: true},
    {id:"key", header:{text: 'Clave', css: 'center'}, width: 100},
    {id:"description", header:{text: 'Descripción', css: 'center'}, fillspace: true},
    {id:"unidad", header:{text: 'Unidad', css: 'center'}, width: 100},
    {id:"cant", header:{text: 'Cantidad', css: 'center'}, width: 100, format: webix.i18n.priceFormat, css:'right'},
    {id:"price", header:{text: 'Valor Unitario', css: 'center'}, width: 100, format: webix.i18n.priceFormat, css:'right'},
    {id:"importe", header:{text: 'Importe', css: 'center'}, width: 150, format: webix.i18n.priceFormat, css:'right'},
];


var grid_details = {
    view: "datatable",
    id: "grid_details",
    select: "row",
    adjust: true,
    autoheight: true,
    columns: grid_details_cols,
    data: [
        {id:1, key:'001', description:'Uno', unidad:'Pieza', cant:1, price:100, importe:100},
        {id:2, key:'002', description:'Dos', unidad:'Pieza', cant:2, price:200, importe:400},
    ]
};


var controls_generate = [
    {view: "text", id: "search_partner", name: "search_partner", label: "Buscar Cliente", required: true, labelPosition: "top"},
    {view: "text", id: "search_product", name: "search_product", label: "Buscar Producto", required: true, labelPosition: "top"},
    {view:"label", label:'Detalle', height:30, align:'left'},
    grid_details,
]


var controls_invoices = [
    {
        view: "tabview",
        tabbar: {options: ["Generar"]}, animate: true,
        cells: [
            {id: "Generar", rows: controls_generate},
        ]
    },
    {rows: [
        { template:"", type: "section" },
        { margin: 10, cols: [{},
            {view: "button", id: "cmd_save_invoice", label: "Guardar" , type: "form", autowidth: true, align:"center"},
            {view: "button", id: "cmd_send_invoice", label: "Timbrar" , type: "form", autowidth: true, align:"center"},
            {view: "button", id: "cmd_cancel_invoice", label: "Cancelar" , type: "danger", autowidth: true, align:"center"},
            {}]
        },
    ]}
];


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


var multi_invoices = {
    id: "multi_invoices",
    animate: true,
    cells:[
        {id: "invoices_home", rows:[
            {view:"toolbar", elements: toolbar_invoices},
            grid_invoices,
        ]},
        {id: "invoices_new", rows:[form_invoice, {}]}
    ]
};


var app_invoices = {
    id: "app_invoices",
    rows:[
        {view: "template", id: "th_invoices", type: "header", template:"Administración de Facturas" },
        multi_invoices
    ]
};