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: "clave", header:{text: 'Clave', css: 'center'}, width: 100},
    {id: "descripcion", header:{text: 'Descripción', css: 'center'},
        fillspace: true, editor: 'text'},
    {id: "unidad", header:{text: 'Unidad', css: 'center'}, width: 100},
    {id: 'cantidad', header: {text: 'Cantidad', css: 'center'}, width: 100,
        format: webix.i18n.numberFormat, css:'right', editor: 'text'},
    {id: "valor_unitario", 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,
    editable: 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_clients_found',
    name: 'grid_clients_found',
    body: {
        autoConfig: false,
        header: false,
        columns: [
            {id: 'id', hidden: true},
            {id: 'nombre', adjust: 'data'},
            {id: 'rfc', adjust: 'data'},
            {id: 'forma_pago', hidden: true},
            {id: 'uso_cfdi', hidden: true},
        ],
        dataFeed:function(text){
            if (text.length > 2){
                this.load('/values/client?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: 'clave', adjust: 'data'},
            {id: 'descripcion', adjust: 'data'},
            {id: 'unidad', adjust: 'data'},
            {id: 'valor_unitario', 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 = {rows: [{
    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: [],
        },
    ]},
    {view: 'richselect', id: 'lst_uso_cfdi', name: 'uso_cfdi', required: true,
        labelPosition: 'top', label: 'Uso del CFDI', options: []},
]}


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', name: '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, readonly: true,
        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_regimen_fiscal = {
    view: 'richselect',
    id: 'lst_regimen_fiscal',
    required: true,
    options: []
}


var controls_generate = [
    {cols: [ {rows:[
        {view: 'fieldset', label: 'Buscar Cliente', body: {rows: [
            {cols: [
                {view:"search", id:"search_client_id", name:"search_client_id",
                    label:"por Clave", labelPosition:'top', maxWidth:200,
                    placeholder:'Captura la clave'},
                {view: 'search', id: 'search_client_name',
                    name: 'search_client_name', label: 'por Nombre o RFC',
                    labelPosition: 'top', suggest: suggest_partners,
                    placeholder: 'Captura al menos tres letras'},
            ]},
            {cols: [{
                view: 'label', id: 'lbl_client_title',
                    name: "lbl_client_title", label: 'Seleccionado: ',
                    autowidth:true},
                {view: 'label', id: 'lbl_client', name: 'lbl_client',
                    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', id: 'fs_moneda', label: 'Moneda', body: body_moneda},
        {view: 'fieldset', id: 'fs_regimen_fiscal', label: 'Regimen Fiscal',
            body: body_regimen_fiscal},
        ]}
    ]},
    {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: 'Cancelar',
                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
    ]
}