Ext.define('App.view.DateRemarkWindow', {
	extend: 'Ext.window.Window',
	xtype:"dateRemarkWindow",
	alias: 'widget.dateRemarkWindow',
	scrollable: true,
	constrainHeader: true,
	modal: true,
	layout: 'fit',
	padding: 10,
	width: '80%',
	height: '80%',
	initComponent: function() {
        var me = this;
        Ext.apply(me, {
			items: [
				{
					xtype: 'remarkGrid',
					itemId: 'remarkGrid',
					flex: 1,
					params: me.params
				},
			],
			listeners :{
				show: function(){
					me.down('remarkGrid').loadStore(me.params);
				},
				close: function(){
					if(me.callbackOnClose) me.callbackOnClose();
				}
			}
		});
		me.callParent(arguments);
	},	
});



Ext.define('App.view.remarkGrid', {
    extend: 'Ext.grid.Panel',
	alias: 'widget.remarkGrid',
	id: 'remarkGrid',
	layout: 'fit',
    width: '100%',
	height: '100%',
    scrollable: true,
	loadStore: function(params){
		var me = this;
		var store = me.getStore();
		store.add(params.records);
	},
	onSave: function() {
		var me = this;
		var store = me.getStore();
		var count = store.getCount();
		for (i = 0; i < count; i++) {
			var record = store.getAt(i);
			var temp ={
				id: record.get('id'),
				inDate: record.get('inDate'),
				inRemark: record.get('inRemark'),
				inStatus: record.get('inStatus'),
			}
			console.log(temp);
			Ext.Ajax.request({
				url: App.url("/order/updateindate"),
				params: temp,
				success: function(response, opts) {
					App.showMsg("Record Changed");
				},
				failure: function(response, opts) {
					App.showError("Cannot Delete : " + response.status);
				},
				scope: this
			});
		}
    },
	reloadStore: function() {
        var me = this;
        me.getStore().reload();
    },
	initComponent: function () {
        var me = this;

        Ext.apply(me, {

			store: Ext.create('App.store.OrderDateRemarksStore', {}) ,
            columns: [
				{
                    xtype: 'rownumberer',
                    width: 80
				},
				{
					xtype: 'actioncolumn',
                    text: '',
                    width: 30,
                    align: 'center',
                    items: [
                        {
                            iconCls: 'silk-cross',
                            tooltip: App.localeRes('Delete'),
                            handler: function(view, rowIndex, colIndex, item, e, record) {
                                me.store.remove(record);
                            },
                            scope: me
                        }
                    ]
				},
				{
                    xtype: 'gridcolumn',
                    dataIndex: 'orderNo',
                    width: 110,
                    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('type') == OrderTypeCombo.TYPE_S)
                            return "<font  color='#DB4C77'><b>" + value + '</b></font>';
                        return "<font  color='#10559A'><b>" + value + '</b></font>';
                    }
				},
				{
					xtype: 'datecolumn',
					width:150,
                    dataIndex: 'outDate',
					text: App.localeRes('Stock Out Date'),
                },
				{
					xtype:'gridcolumn',
					dataIndex: 'outRemark',
					flex:5,
					cellWrap: true,
					text: App.localeRes('Stock Out Remarks'),
					renderer: function (value, metaData, record, row, col, store, grid) {
						if(!value) return "";
                        return '<div style="padding: 5px 0px 0px 10px;">' + App.nl2br(value) + '</div>';
                    },
				},
				{
					xtype: 'datecolumn',
					width:150,
                    dataIndex: 'inDate',
					text: App.localeRes('Stock In Date'),
					cls: 'editable-column',
					editor: {
						completeOnEnter: false,
						field: {
							xtype: 'datefield',
							allowBlank: false
						}
					}
                },
				{
					xtype:'gridcolumn',
					dataIndex: 'inRemark',
					cls: 'editable-column',
					flex:5,
					cellWrap: true,
					text: App.localeRes('Stock In Remarks'),
					renderer: function (value, metaData, record, row, col, store, grid) {
						if(!value) return "";
                        return '<div style="padding: 5px 0px 0px 10px;">' + App.nl2br(value) + '</div>';
                    },
					editor: {
						completeOnEnter: false,
						field: {
							xtype: 'textarea',
							allowBlank: true
						}
					}
				},
				{
					xtype: 'gridcolumn',
					width:150,
					dataIndex: 'inStatus',
					cls: 'editable-column',
					text: App.localeRes('Status'),
					renderer: function (value, metaData, record, row, col, store, grid) {
						if(!value) return "";
						if(value == StockInOutStatusCombo.StockInOutStatus_PENDING) 
							return StockInOutStatusCombo.convertToString(StockInOutStatusCombo.StockInOutStatus_PENDING);
						if(value == StockInOutStatusCombo.StockInOutStatus_RECEIVED)
							return StockInOutStatusCombo.convertToString(StockInOutStatusCombo.StockInOutStatus_RECEIVED);
                    },
					editor: {
						completeOnEnter: false,
						field: {
							xtype: 'stockInOutStatusCombo',
							allowBlank: true
						}
					}
                },
			],
			plugins: {
				ptype: 'cellediting',
				clicksToEdit: 1
			},
			
			tbar: {
				items:[
					{
						xtype: 'datefield',
						dataIndex: 'inputDate',
						id:'inputDate',
						itemId: 'inputDate',
						value: new Date(),
						fieldLabel: App.localeRes('Default Date'),
						margin: "1 1 1 1",
					},
					{
						xtype: "button",
						text: App.localeRes("Change All"),
						//fixed:true,
						margin: "1 1 1 1",
						formBind: true,
						handler: function(button, event) {
							var store = me.getStore();
							var date = me.down('#inputDate').getValue();
							console.log(date);
							var count = store.getCount();
							console.log(count);
							for (i = 0; i < count; i++) {
								console.log(i);
								var record = store.getAt(i);
								console.log(record);
								record.set('inDate',date);
								record.commit();
							}
						}
					},
					'->',
					{
						xtype: 'orderCombo',
						width: 350,
						fieldLabel: App.localeRes("Order No."),
					},
					{
						xtype: "button",
						text: App.localeRes("Add"),
						margin: "1 1 1 1",
						handler: function(button, event) {
							var store = me.getStore();
							var orderCombo = me.down('orderCombo')
							var selection = orderCombo.getSelection();
							if(store.getById(selection.data.id)){
								App.showInfo( selection.data.type+selection.data.code+" already exists in list.", "Info");
								return;
							}
							store.add(new Ext.data.Model({
								id: selection.data.id,
								code: selection.data.code,
								type: selection.data.type,
								orderNo: selection.data.type+selection.data.code,
								outDate: selection.data.outDate,
								inDate: selection.data.inDate,
								outRemark: selection.data.outRemark,
								inRemark: selection.data.inRemark,
							}));
							orderCombo.clearValue();
						}
					}
				]
			},
			bbar: {
				ui: 'footer',
                padding: 0,
				items: [
					{
						hidden: true,
						flex: 1,
					},
					{
						xtype:'tbfill',
					},
					{
						xtype: "button",
						text: App.localeRes("Save"),
						ui: "blue",
						margin: "1 1 1 1",
						formBind: true,
						handler: function(button, event) {
							me.onSave();
							me.up('dateRemarkWindow').close();
						}
					}
				],
			},
		});
        me.callParent(arguments);
    }
});