Ext.define("App.view.Report_OrderContainer", {
    extend: "Ext.container.Container",
    alias: "widget.report_OrderContainer",
    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(),
        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: 'textfield',
                                    fieldLabel: App.localeRes("Customer Name"),
                                    name: 'custName',
                                },
                                {
                                    xtype: 'textfield',
                                    fieldLabel: App.localeRes("Order No"),
                                    name: 'orderNo',
                                },
                                {
                                    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();
                                var str = '?dateFrom='+data.dateFrom+"&dateTo="+data.dateTo;
                                str = data.custName?"&custName="+data.custName: str;
                                str = data.orderNo?"&orderNo="+data.orderNo: str;
                                window.open( App.url("/report/order/excel")+str);
                            }
                        },
                        {
                            text: App.localeRes('Export First Order Excel'),
                            ui: 'soft-purple',
                            handler: function (button, event) {
                                window.open( App.url("/report/customer-first-order/excel"));
                            }
                        }
                    ]
                },
                {
                    xtype: "report_OrderGrid",
                    flex: 1
                }
            ],
        });

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

Ext.define('App.view.Report_OrderGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.report_OrderGrid',
    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_OrderStore', {}),
            columns: [
                {
                    xtype: 'rownumberer',
                    width: 80,
                },
                {
                    xtype: 'datecolumn',
                    dataIndex: 'date',
                    text: App.localeRes('Order Date'),
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'orderNo',
                    text: App.localeRes('Order No.'),
                    renderer: function (value, metaData, record, row, col, store, grid) {
                        //if(record.get('ignoreC')) return "<font  color='#CCD0D9'><b>"+value+"</b></font>";
                        if(record.get('status')==-2) return "<font  color='#CCD0D9'><b>"+value+"</b></font>";
                        if(record.get("type") == OrderTypeCombo.TYPE_S)
                            return "<font  color='#DB4C77'><b>"+value+"</b></font>";
                        return "<font  color='#10559A'><b>"+value+"</b></font>";
                    }, 
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'refNo',
                    text: App.localeRes('Ref No.'),
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'customerName',
                    text: App.localeRes('Customer'),
                    renderer: function(value, metaData, record, row, col, store, grid){
                        if (metaData) metaData.tdAttr = 'data-qtip="' 
                            + App.setCustTooltip(
                                record.get("customerName")
                                , record.get("phone")
                                , record.get("email")
                            )+ '"';
                            
                         return App.setClickableCustOrder(
                            Ext.id(), 
                            record.get('custId'),
                            value,
                            function(){
                                me.reloadStore();
                            });
                    }
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'status',
                    text: App.localeRes('Status'),
                    renderer: function(value, metaData, record, row, col, store, grid){
                        return StatusCombo.convertToString(value);
                    }
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'item',
                    text: App.localeRes('Item'),
                    width: 300,
                    renderer: function(value, metaData, record, row, col, store, grid){
						var itemStr = "";
						if(value){
							var items = value.split("||;");
							for(var i=0; i<items.length; i++){
								var name = items[i].split("|;")[0];
								itemStr = itemStr==""?"":itemStr+"\n";
								itemStr = itemStr+name;
							}
						}
						return '<div style="padding: 5px 0px 0px 10px;">' + App.nl2br(itemStr) + '</div>';
					}
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'item',
                    text: App.localeRes('Item Amount'),
                    align: 'right',
                    width: 120,
                    renderer: function(value, metaData, record, row, col, store, grid){
						var itemStr = "";
						if(value){
							var items = value.split("||;");
							for(var i=0; i<items.length; i++){
								var price = items[i].split("|;")[1];
								itemStr = itemStr==""?"":itemStr+"\n";
								itemStr = itemStr+App.numberFormat(price);
							}
						}
						return '<div style="padding: 5px 0px 0px 10px;">' + App.nl2br(itemStr) + '</div>';
					}
                },
                {
                    text: App.localeRes('Order Amount'),
                    dataIndex: 'orderAmount',
                    xtype: 'gridcolumn',
                    align: 'right',
                    width: 150,
                    renderer: function(value, metaData, record, row, col, store, grid){
                        if(!value) return "";
                        return "$"+ Ext.util.Format.number(value, '0,000.00');
                    }
                },
                {
                    text: App.localeRes('Remarks'),
                    dataIndex: 'remarks',
                    xtype: 'gridcolumn', 
                    width: 200,
                    renderer: function (value, metaData, record, row, col, store, grid) {
                        if(!value) return "";
                        return '<div style="padding: 5px 0px 0px 10px;">' + App.nl2br(value) + '</div>';
                    }
                }
            ],
            listeners: {}
        });
        me.callParent(arguments);
    }
});
