Ext.define('App.view.Report_CustomerContainer', {
    extend: 'Ext.container.Container',
    alias: 'widget.report_CustomerContainer',
    resetFocusPosition: true,
    focusable:true,
    layout: 'vbox',

    defaults: {
        width: '100%',
        margin: '2 4 2 4'
    },

    doSearch: function() {
        var f = this.down('#searchCriteriaForm').getForm(),
            g = this.down('grid');

        Ext.apply(g.getStore().getProxy().extraParams, f.getValues());

        g.getStore().loadPage(1, {
            params: { start: 0 },
            callback: function(records, operation, success) {}
        });
    },



    params: {},
    initComponent: function() {
        var me = this,
            today = new Date(),
            y = today.getFullYear(),
            m = today.getMonth() - 1,
            firstDay = new Date(y, m, 1),
            lastDay = new Date(y, m + 1, 0);

        Ext.apply(me, {
            items: [
                {
                    xtype: 'form',
                    itemId: 'searchCriteriaForm',
                    bodyPadding: 15,
                    buttonAlign: 'left',
                    defaults: {
                        selectOnFocus: true
                    },
                    items: [
                        {
                            xtype: 'fieldcontainer',
                            layout: {
                                type: 'table',
                                columns: 3
                            },
                            defaults: {
                                width: '95%',
                                listeners: {
                                    specialkey: function(field, e) {
                                        if (e.getKey() == e.ENTER) me.doSearch();
                                    }
                                }
                            },
                            items: [
                                {
                                    xtype: 'datefield',
                                    fieldLabel: App.localeRes('Date From'),
                                    allowBlank: false,
                                    name: 'dateFrom',
                                    value: firstDay
                                },
                                {
                                    xtype: 'datefield',
                                    fieldLabel: App.localeRes('Date To'),
                                    allowBlank: false,
                                    name: 'dateTo',
                                    value: lastDay
                                }
                            ]
                        }
                    ],
                    buttons: [
                        {
                            text: App.localeRes('Search'),
                            iconCls: 'silk-magnifier',
                            handler: function(button, event) {
                                me.doSearch();
                            }
                        },
                        {
                            text: App.localeRes('Reset'),
                            handler: function(button, event) {
                                me.down('#searchCriteriaForm')
                                    .getForm()
                                    .reset();
                            }
                        },
                        {
                            text: App.localeRes('Export Excel'),
                            ui: 'soft-purple',
                            handler: function(button, event) {
                               
                                    var data = me
                                        .down('#searchCriteriaForm')
                                        .getForm()
                                        .getValues();
                                    window.open(
                                        App.url('/report/customer/excel') +
                                            '?dateFrom=' +
                                            data.dateFrom +
                                            '&dateTo=' +
                                            data.dateTo
                                    );
                            }
                        }
                    ]
                },
                {
                    xtype: 'report_CustomerGrid',
                    flex: 1
                }
            ]
        });

        me.callParent(arguments);
        me.doSearch();
    }
});

Ext.define('App.view.Report_CustomerGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.report_CustomerGrid',
    width: '100%',
    height: '100%',
    scrollable: {
        alwaysShow: true
    },

    reloadStore: function() {
        var me = this;
        me.getView().noRefreshHeaders = true;
        me.getStore().reload();
    },

    initComponent: function() {
        var me = this;
        Ext.apply(me, {
            bbar: {
                xtype: 'pagingtoolbar',
                displayInfo: true
            },
            store: Ext.create('App.store.Report_CustomerStore', {}),
            columns: [
                {
                    xtype: 'rownumberer',
                    width: 80
                },
                {
                    xtype: 'datecolumn',
                    dataIndex: 'created',
                    text: App.localeRes('Creation Date'),
                    flex: 1
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'customerName',
                    text: App.localeRes('Customer (Eng)'),
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'nameCh',
                    text: App.localeRes('Customer (Chinese)'),
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'phone1',
                    text: App.localeRes('Phone 1'),
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'phone2',
                    text: App.localeRes('Phone 2'),
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'email',
                    text: App.localeRes('Email'),
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'address',
                    text: App.localeRes('Address'),
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'remarks',
                    text: App.localeRes('Remarks'),
                },
                {
                    text: App.localeRes('Order Amount (Total)'),
                    dataIndex: 'orderAmount',
                    xtype: 'gridcolumn',
                    align: 'right',
                    flex: 1,
                    renderer: function(value, metaData, record, row, col, store, grid) {
                        return '$' + Ext.util.Format.number(value, '0,000.00');
                    }
                },
            ],
            listeners: {}
        });
        me.callParent(arguments);
    }
});
