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"},
]


function doc_xml(obj){
    var node = "<img src='/static/img/file-xml.png' height='20' width='20' style='margin: 5px 0px'/>"
    return node
}


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: 'xml', header: '', adjust: 'data', template: doc_xml},
    {id: "uuid", header: ["UUID", {content: "textFilter"}], adjust: "data",
        sort:"string"},
    {id: "fecha", header: ["Fecha y Hora"], adjust: "data", sort:"string"},
    {id: "tipo_comprobante", header: ["Tipo", {content: "selectFilter"}],
        adjust: 'header', sort: 'string'},
    {id: "estatus", header: ["Estatus", {content: "selectFilter"}],
        adjust: "data", sort:"string"},
    {id: 'total_mn', header: ['Total M.N.', {content: 'numberFilter'}], width: 150,
        sort: 'int', format: webix.i18n.priceFormat, css: 'right'},
    {id: "cliente", 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: 'delete', header: '', width: 30, css: 'delete'},
    {id: "key", header:{text: 'Clave', css: 'center'}, width: 100},
    {id: "description", header:{text: 'Descripción', css: 'center'},
        fillspace: true},
    {id: "unit", header:{text: 'Unidad', css: 'center'}, width: 100},
    {id: 'cant', header: {text: 'Cantidad', css: 'center'}, width: 100,
        format: webix.i18n.numberFormat, css:'right', editor: 'text'},
    {id: "price", header:{text: 'Valor Unitario', css: 'center'}, width: 100,
        format: webix.i18n.priceFormat, css:'right', editor: 'text'},
    {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: []
}


var grid_totals_cols = [
    {id: 'id', header: 'ID', hidden: true},
    {id: 'concepto', header: 'Concepto', width: 200,
        footer: {text: 'TOTAL', css:'right_footer'}, css:'right'},
    {id: 'importe', header: 'Importe', width: 150,
        footer: {content: 'summColumn', css:'right_footer'},
        format: webix.i18n.priceFormat, css:'right'},
]


var grid_totals = {
    view: 'datatable',
    id: 'grid_totals',
    select: false,
    width: 350,
    header: false,
    footer: true,
    autoheight: true,
    columns: grid_totals_cols,
    data: [{id: 1, concepto: 'SubTotal', importe: 0}]
}


var suggest_partners = {
    view: 'gridsuggest',
    id: 'grid_partners_found',
    name: 'grid_partners_found',
    body: {
        autoConfig: false,
        header: false,
        columns: [
            {id: 'id', hidden: true},
            {id: 'nombre', adjust: 'data'},
            {id: 'rfc', adjust: 'data'}],
        dataFeed:function(text){
            if (text.length > 2){
                this.load('/values/partner?name=' + text)
            }else{
                this.hide()
            }
        }
    }
}

var suggest_products = {
    view: 'gridsuggest',
    id: 'grid_products_found',
    name: 'grid_products_found',
    body: {
        autoConfig: false,
        header: true,
        columns: [
            {id: 'id', hidden: true},
            {id: 'key', adjust: 'data'},
            {id: 'description', adjust: 'data'},
            {id: 'unit', adjust: 'data'},
            {id: 'price', adjust: 'data', format: webix.i18n.priceFormat}
        ],
        dataFeed:function(text){
            if (text.length > 2){
                this.load('/values/product?name=' + text)
            }else{
                this.hide()
            }
        }
    }
}


var body_comprobante = {cols: [
    {
        view: 'richselect',
        id: 'lst_tipo_comprobante',
        label: 'Tipo',
        labelPosition: 'top',
        required: true,
        value: 'I',
        options: [
            {id: 'I', value: 'Ingreso'},
            {id: 'E', value: 'Egreso'},
            {id: 'T', value: 'Traslado'}
        ]
    },
    {
        view: 'richselect',
        id: 'lst_serie',
        label: 'Serie',
        labelPosition: 'top',
        options: [],
        //~ options: '/values/series',
        //~ on: {
            //~ onAfterRender: webix.once(function(){
                //~ this.getPopup().getList().waitData.then(webix.bind(function(){
                    //~ this.setValue(this.getPopup().getList().getFirstId())
                //~ }, this))
            //~ }),
        //~ }
    }
]}


var opt_metodo_pago = [
    {id: 'PUE', value: 'Pago en una sola exhibición'},
    {id: 'PPD', value: 'Pago en parcialidades o diferido'}
]


var body_opciones = {rows: [
    {view: 'richselect', id: 'lst_forma_pago', label: 'Forma de Pago',
        labelPosition: 'top', required: true, options: []},
    {view: 'richselect', id: 'lst_metodo_pago', label: 'Método de Pago',
        labelPosition: 'top', options: opt_metodo_pago, value: 'PUE',
        required: true},
    {view: 'text', id: 'txt_condicion_pago', label: 'Condiciones de Pago',
        labelPosition: 'top'},
]}


var body_moneda = {cols: [
        {view: 'richselect', id: 'lst_moneda', label: 'Nombre',
            labelPosition: 'top', required: true, options: []},
        {view: 'text', type: 'text', id: 'txt_tipo_cambio', value: '1.00',
            label: 'Tipo de Cambio', labelPosition: 'top', required: true,
            invalidMessage: 'Captura un valor númerico', inputAlign: 'right',
            readonly: true}
]}


var body_uso_cfdi = {
    view: 'richselect',
    id: 'lst_uso_cfdi',
    required: true,
    options: []
}


var controls_generate = [
    {cols: [ {rows:[
        {view: 'fieldset', label: 'Buscar Cliente', body: {rows: [
            {cols: [
                {view:"search", id:"search_partner_id", name:"search_partner_id",
                    label:"por Clave", labelPosition:'top', maxWidth:200,
                    placeholder:'Captura la clave'},
                {view: 'search', id: 'search_partner_name',
                    name: 'search_partner_name', label: 'por Nombre o RFC',
                    labelPosition: 'top', suggest: suggest_partners,
                    placeholder: 'Captura al menos tres letras'},
            ]},
            {cols: [{view: "label", id: "lbl_partner_title", name: "lbl_partner_title", label: 'Seleccionado: ', autowidth:true},
                {view: "label", id: "lbl_partner", name: "lbl_partner", label: 'Ninguno'},
            ]}
        ]}},
        {view: 'fieldset', label: 'Buscar Producto', body: {rows: [
            {cols: [{view:"search", id:"search_product_id", name:"search_product_id", label:"por Clave", labelPosition:'top', maxWidth:200, placeholder:'Captura la clave'},
                {view:"search", id:"search_product_name", name:"search_product_name", label:"por Descripción", labelPosition:'top', suggest:suggest_products, placeholder:'Captura al menos tres letras'},
            ]},
        ]}}
    ]},
    {maxWidth: 10},
    {maxWidth: 300, rows: [
        {view: 'fieldset', label: 'Comprobante', body: body_comprobante},
        {view: 'fieldset', label: 'Opciones de Pago', body: body_opciones},
        {view: 'fieldset', label: 'Moneda', body: body_moneda},
        {view: 'fieldset', label: 'Uso del CFDI', body: body_uso_cfdi},
        ]}
    ]},
    {view: 'label', label: 'Detalle', height: 30, align: 'left'},
    grid_details,
    {minHeight: 15, maxHeight: 15},
    {cols: [{}, grid_totals]}
]


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_timbrar", label: "Timbrar",
                type: "form", autowidth: true, align:"center"},
            {view: 'button', id: 'cmd_close_invoice', label: 'Salir',
                type: 'danger', autowidth: true, align: 'center'},
            {}]
        },
    ]}
]


var form_invoice = {
    type: "space",
    cols: [{
        view: "form",
        id: "form_invoice",
        complexData: true,
        elements: controls_invoices,
    }]
};


var multi_invoices = {
    id: "multi_invoices",
    view: 'multiview',
    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
    ]
};