var toolbar_tickets = [
    {view: 'button', id: 'cmd_nuevo_ticket', label: 'Nuevo', type: 'iconButton',
        autowidth: true, icon: 'plus'},
    {},
    {view: 'button', id: 'cmd_cancelar_ticket', label: 'Cancelar',
        type: 'iconButton', autowidth: true, icon: 'ban'},
]


var toolbar_tickets_filter = [
    {view: 'richselect', id: 'filter_year_ticket', label: 'Año',
        labelAlign: 'right', labelWidth: 50, width: 150, options: []},
    {view: 'richselect', id: 'filter_month_ticket', label: 'Mes',
        labelAlign: 'right', labelWidth: 50, width: 200, options: months},
    {view: 'daterangepicker', id: 'filter_dates_ticket', label: 'Fechas',
        labelAlign: 'right', width: 300},
]


var grid_tickets_cols = [
    {id: 'index', header: '#', adjust: 'data', css: 'right',
        footer: {content: 'rowCount', colspan: 3, css: 'right'}},
    {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: 'right', footer: {text: 'Tickets', colspan: 3}},
    {id: "fecha", header: ["Fecha y Hora"],
        adjust: "data", sort: "date"},
    {id: "estatus", header: ["Estatus", {content: "selectFilter"}],
        adjust: "data", sort:"string"},
    {id: 'total', header: ['Total', {content: 'numberFilter'}], width: 150,
        sort: 'int', format: webix.i18n.priceFormat, css: 'right'},
    {id: "cliente", header: ["Razón Social", {content: "selectFilter"}],
        fillspace:true, sort:"string"},
    {id: 'pdf', header: 'PDF', adjust: 'data', template: get_icon('pdf')},
    {id: 'print', header: 'I', adjust: 'data', template: get_icon('print')},
    {id: 'email', header: '', adjust: 'data', template: get_icon('email')}
]


var grid_tickets = {
    view: 'datatable',
    id: 'grid_tickets',
    select: 'row',
    adjust: true,
    footer: true,
    resizeColumn: true,
    headermenu: true,
    columns: grid_tickets_cols,
    on:{
        'data->onStoreUpdated':function(){
            this.data.each(function(obj, i){
                obj.index = i + 1
            })
        }
    },
}


var rows_tickets_home = [
    {view: 'toolbar', elements: toolbar_tickets},
    {view: 'toolbar', elements: toolbar_tickets_filter},
    grid_tickets,
]


var tbody_buscar_producto = {rows: [
    {cols: [
        {view: 'search', id: 'tsearch_product_key', name: 'tsearch_product_key',
            label: 'por Clave', labelPosition:'top', maxWidth: 250,
            placeholder: 'Presiona ENTER para buscar'},
        {view: 'search', id: 'tsearch_product_name', name: 'search_product_name',
            label: 'por Descripción', labelPosition:'top', suggest: [],
            placeholder: 'Captura al menos tres letras'},
    ]},
]}



var grid_tdetails_cols = [
    {id: "id", header:"ID", hidden: true},
    {id: 'delete', header: '', width: 30, css: 'delete'},
    {id: "clave", header:{text: 'Clave', css: 'center'}, width: 100},
    {id: "clave_sat", hidden: true},
    {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: 'descuento', header:{text: 'Descuento', css: 'center'}, hidden: true,
        width: 80, format: webix.i18n.priceFormat, css: 'right', editor: 'text'},
    {id: 'precio_final', hidden: true, header: 'precio_final', width: 80,
        format: webix.i18n.priceFormat, css: 'right'},
    {id: "importe", header:{text: 'Importe', css: 'center'}, width: 150,
        format: webix.i18n.priceFormat, css: 'right'},
]


var grid_tdetails = {
    view: 'datatable',
    id: 'grid_tdetails',
    select: 'row',
    adjust: true,
    autoheight: true,
    editable: true,
    columns: grid_tdetails_cols,
    data: [],
}


var controls_generate_ticket = [
    {minHeight: 10, maxHeight: 10},
    {cols: [{rows: [
        {view: 'fieldset', label: 'Buscar Producto', body: tbody_buscar_producto},
        ]},
        {maxWidth: 10},
        {maxWidth: 300, rows: [
            {view: 'fieldset', label: 'Información', body: {}},
        ]},
    ]},
    {view: 'label', label: 'Detalle', height: 30, align: 'left'},
    grid_tdetails,
    {minHeight: 20, maxHeight: 20},
    {margin: 20, cols: [{},
        {view: 'button', id: 'cmd_generar_ticket', label: 'Generar',
            icon: 'ticket', type: 'iconButton', autowidth: true, align: 'center'},
        {}]
    },
    {rows: [
        {template: '', type: 'section'},
        {margin: 10, cols: [{},
            {view: 'button', id: 'cmd_cerrar_ticket', label: 'Cerrar',
                type: 'danger', autowidth: true, align: 'center'}
            ]
        },
    ]}
]


var controls_new_ticket = [
    {
        view: 'tabview',
        id: 'tv_new_ticket',
        animate: true,
        cells: [
            {id: 'Generar', rows: controls_generate_ticket},
        ]
    },
]


var form_new_ticket = {
    type: 'space',
    responsive: true,
    cols: [{
        view: 'form',
        id: 'form_new_ticket',
        complexData: true,
        scroll: true,
        elements: controls_new_ticket,
    }]
}


var multi_tickets = {
    id: 'multi_tickets',
    view: 'multiview',
    animate: true,
    cells:[
        {id: 'tickets_new', rows:[form_new_ticket]}
        {id: 'tickets_new', rows:[]}
    ],
}


var app_tickets = {
    id: 'app_tickets',
    rows:[
        {view: 'template', id: 'th_ticckets', type: 'header',
            template: 'Punto de venta - Tickets'},
        multi_tickets
    ],
}