Ext.define('App.view.CalendarMeetingGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'calendarMeetingGrid',
    padding: 10,
    params: {},

    viewConfig : {
        enableTextSelection: true
    },

    loadStore: function(date) {
        var store = this.getStore();
        Ext.apply(store.getProxy().extraParams, { meetingDate: date });

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

    setSelectedDate: function(date) {
        this.params.date = date;
        this.down('#titleLabel').setHtml(
            '<b>' + App.localeRes('Meeting At : ') + Ext.Date.format(date, App.dateFormat) + '</b>'
        );
        this.loadStore(date);
    },

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            tbar: {
                defaultButtonUI: 'default',
                layout: 'hbox',
                padding: 0,
                items: [
                    {
                        xtype: 'label',
                        itemId: 'titleLabel',
                        padding: 10,
                        html: '<b>' + App.localeRes('Meeting') + '</b>'
                    },
                    '->',
                    {
                        xtype: 'button',
                        itemId: 'newMeetingBtn',
                        text: App.localeRes('New Meeting'),
                        margin: '0 0 16 0',
                        hidden: !App.isGranted(['MEETING_MAINTAIN']),
                        handler: function(button, event) {
                            App.loadModuleWin('meetingWindow', App.localeRes('Meeting'), {
                                params: {
                                    date: me.params.date
                                },
                                callbackOnClose: function() {
                                    me.loadStore(me.params.date);
                                    var container = me.up('calendarContainer');
                                    container.down('#calendarGrid').loadCalendarGrid();
                                }
                            });
                        }
                    },
                    {
                        xtype: 'button',
                        itemId: 'refreshBtn',
                        iconCls: 'x-fa fa-sync',
                        margin: '0 0 16 16',
                        handler: function(button, event){
                            var container = me.up('calendarContainer');
                            container.down('#calendarGrid').loadCalendarGrid();
                        }
                    },
                ]
            },
            store: Ext.create('App.store.MeetingStore', {}),
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'type',
                    text: App.localeRes('Type'),
                    width: 60,
                    renderer: function (value, metaData, record, row, col, store, grid) {
                        return '<div>'+MeetingTypeCombo.colorType(value)+'</div>';
                    },
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'date',
                    text: App.localeRes("Time"),
                    renderer: function(value, metaData, record, row, col, store, grid){
                        return App.convertTimestampToTime(value);
                    }
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'remarks',
                    text: App.localeRes('Details'),
                    flex: 1,
                    cellWrap: true,
                    renderer: function (value, metaData, record, row, col, store, grid) {
                        var str = "";
                        if(record.get("customerName")){

                            if (metaData) metaData.tdAttr = 'data-qtip="' 
                            + App.setCustTooltip(
                                record.get("customerName")
                                , record.get("phone")
                                , record.get("email")
                            )+ '"';

                            str = "<b>" + App.setClickableCustOrder(
                                Ext.id(), 
                                record.get('custId'),
                                record.get("customerName"),
                                function(){
                                    me.loadStore(me.params.date);
                                    var container = me.up('calendarContainer');
                                    container.down('#calendarGrid').loadCalendarGrid();
                                }) +"<b/>";
                        }
                        if(record.get("phone")){
                            str = str+" - "+record.get("phone")+"</b>";
                        }
                        if(record.get("orderNo")){
                            str = str==""?str:str+"<br/>";
                            str = str+App.localeRes("Order No.")+": "+record.get("orderNo");
                        }
                        str = str==""?str:str+"<br/>";
                        str = str+App.localeRes("Description")+" : "+"<br/>"+(value?value:" --");

                        str = str + "<br/>"+App.localeRes("Staff")+" : "+(record.get("staffName")?record.get("staffName"):"--");
                        
                        return '<div style="padding: 5px 0px 0px 10px;">' + App.nl2br(str) + '</div>';

                    }
                },
                {
                    xtype: 'actioncolumn',
                    text: '',
                    width: 40,
                    align: 'center',
                    hidden: !App.isGranted(['MEETING_MAINTAIN']),
                    items: [
                        {
                            iconCls: 'icon-edit',
                            tooltip: 'Edit',
                            handler: function (view, rowIndex, colIndex, item, e, record) {
                                App.loadModuleWin('meetingWindow', App.localeRes("Meeting"), {
                                    params: {
                                        record: record
                                    },
                                    callbackOnClose: function () {
                                        me.loadStore(me.params.date);
                                        me.reconfigure(me.getStore());
                                        var container = me.up('calendarContainer');
                                        container.down("#calendarGrid").loadCalendarGrid();
                                    }
                                });
                            },
                        }
                    ]
                },
                {
                    xtype: 'actioncolumn',
                    text: '',
                    width: 30,
                    align: 'center',
                    hidden: !App.isGranted(['MEETING_DELETE']),
                    items: [
                        {
                            iconCls: 'silk-cross',
                            tooltip: App.localeRes('Delete'),
                            handler: function(view, rowIndex, colIndex, item, e, record) {
                                App.confirm('Confirm Delete', 'Confirm Delete', function(buttonId, text, opt) {
                                    if (buttonId === 'yes') {
                                        if (App.isGranted(['MEETING_DELETE']) == true) {
                                            Ext.Ajax.request({
                                                url: App.url('/meeting/delete'),
                                                params: { id: record.get('id') },
                                                success: function(response, opts) {
                                                    App.showMsg('Meeting Deleted');
                                                    me.loadStore(me.params.date);
                                                    var container = me.up('calendarContainer');
                                                    container.down('#calendarGrid').loadCalendarGrid();
                                                },
                                                failure: function(response, opts) {
                                                    App.showError('Cannot Delete : ' + response.status);
                                                },
                                                scope: this
                                            });
                                        } else {
                                            App.showError(
                                                'You Have No Authority To Process This Action!',
                                                'Authority Issue'
                                            );
                                        }
                                    }
                                });
                            },
                            scope: me
                        }
                    ]
                },
            ],
        });


        me.callParent(arguments);
    }
});
