<?php require "_header.php";?>
<script type="text/javascript">
var secFields = [{
	name: 'work_id',
    type: 'int'
    },{
 	name: 'work_details',
    type: 'string'
},
{
 	name: 'hours',
    type: 'string'
}
]

var hoursstore = new Ext.data.ArrayStore({
           fields: ['hours'],
	     data: [['9-10'],['10-11'],['11-12'],['12-1'],['1-2'],['2-3'],['3-4'],['4-5'],['5-6'],['6-7']]
}); 

var Store = new Ext.data.JsonStore({
    url:'data/work-grid-filter.php',
    root: 'rowe',
	remoteSort: true,
    sortInfo: {
    	field: 'work_id',
        direction: 'ASC'
   	},
    fields: secFields,
    idProperty: 'work_id',
	autoLoad: true,
    writer:new Ext.data.JsonWriter()
});

Ext.onReady(function(){
	
	Ext.QuickTips.init();
    
	var colModel = new Ext.grid.ColumnModel([
		{ 
			header: "Work Id", 
			dataIndex: 'work_id',
			sortable: true, 
			hidden: true 
		},
		
		
		{ 
			id: 'work_details',
			header: "Work Details",
			width: 50,
			dataIndex: 'work_details',
			align: 'left',
			sortable: true
        },
		{ 
			id: 'hours',
			header: "hours",
			width: 50,
			dataIndex: 'hours',
			align: 'left',
			sortable: true
        }
		
    ]);
	
	var flgalert = 0;
	
	var grid = new Ext.grid.GridPanel({
		ds: Store,
		cm: colModel,
		sm: new Ext.grid.RowSelectionModel({
			singleSelect: false,
			listeners:{
				rowselect: function(sm, row, rec){
					Ext.getCmp("company-form").getForm().loadRecord(rec);
					gridForm.getForm().findField('work_details').enable();
					Ext.getCmp('btnSave').enable();
					Ext.getCmp('btnDel').enable();
					Ext.getCmp('btnAdd').disable();
				}
			}
		}),
		autoExpandColumn: 'work_details',
		height: 250,
		border: true
	});
	
	var gridForm = new Ext.FormPanel({	
		id: 'company-form',
		frame: true,
		url:'save-work.php',
		labelAlign: 'left',
		bodyStyle:'padding:5px',
    	layout: 'column',
    	items:[
			{
				columnWidth: .60,
				xtype: 'fieldset',
				labelWidth: 110 ,
				defaults: {border:false},
				defaultType: 'textfield',
				height:160,
				bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
				border:false,
				style:{
					"margin-left": "10px", 
					"margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0" 
				},
            	items:[	
				{   
				width:258,
				xtype: 'combo',
				name: 'hours',
				id:'hours',
				labelSeparator:'',	
				fieldLabel :'Hours:',
				forceSelection:true,				
				displayField:'hours',
				valueField: 'hours',
				emptyText:'',
				labelStyle:'font-weight:bold;font-size:14px;color:red;',
				allowBlank:false,
				style:{'font-size':'16px'},
				triggerAction:'all',
				mode:'local',
				store: hoursstore,
				disabled:true,

				},				
				 {
						xtype: 'textarea',
						name: 'work_details',
						id:'work_details',
						labelSeparator:'',	
						fieldLabel :'Work Details:',
						labelStyle:'font-weight:bold;font-size:14px;color:red;',
						width:258,
						style:{'font-size':'16px'},
						allowBlank:true,
						disabled:true,
						
				 },
					{
						xtype: 'numberfield',
						name: 'work_id',
						id:'work_id',
						hidden:true
					},
					{
						xtype: 'textfield',
						name: 'mode',
						id:'mode',
						value:'edit',
						hidden:true
					}
				]
			},
			{
				columnWidth: .40,
				layout: 'fit',
				items:[grid]
			}
        ]
    });

	var DesignationWindow = new Ext.Window({
		title: 'Daily Work Entry',
		width:820,		
		height:440,		
		border: false,
		modal:true,
		layout: 'fit',
		closeAction:'close',
		collapsible:true,
		items: gridForm,
		buttonAlign: 'center',
	    buttons:[
			{
				text: 'Add New',
				name:'btnAdd',
				iconCls: 'icon-add',
				id:'btnAdd',
				handler: function (){
					gridForm.getForm().findField('work_id').setValue(0);
					gridForm.getForm().findField('work_details').reset();
					gridForm.getForm().findField('work_details').enable();
					gridForm.getForm().findField('hours').enable();
					gridForm.getForm().findField('work_details').focus(true,500);
					Ext.getCmp('btnAdd').disable();
					Ext.getCmp('btnDel').disable();
					Ext.getCmp('btnSave').enable();
				}
			},{
				text: 'Save', 
				name:'btnSave',
				iconCls: 'icon-save',		
				id:'btnSave',
				disabled:true,
				handler: function (){
					gridForm.getForm().submit({
						waitMsg: 'Saving...',
						success: function(){
							Ext.getCmp('btnDel').disable();
							Ext.getCmp('btnSave').disable();
							gridForm.getForm().findField('work_details').disable();
							Store.load();	
							gridForm.getForm().reset();
							grid.getSelectionModel().clearSelections();
							Ext.getCmp('btnAdd').enable();
						},
						failure: function(){
							Ext.MessageBox.show({
								title: 'Error',
							   	msg: 'Please fill up complete form.',
							   	buttons: Ext.MessageBox.OK,
							   	icon:Ext.MessageBox.ERROR
							});									
						}
					});							
				}						 
			},{
				text: 'Delete',
				name:'btnDel',
				iconCls:'remove',
				id:'btnDel',
				disabled: true,
				handler: function(){
					gridForm.getForm().findField('mode').setValue('delete');
					if(gridForm.getForm().findField('work_details').getValue() !=''){
					Ext.MessageBox.confirm('Confirmation', ' Are you sure want to delete.?', deletesubject);
					Ext.getCmp('btnAdd').enable();
						
					} 
				}	
			},{
				text: 'Reset', 
			    iconCls: 'icon-reset',		
				name:'btnreset',
				id:'btnreset',
				handler: function(){
					gridForm.getForm().reset();
					gridForm.getForm().findField('work_details').disable();
					Ext.getCmp('btnSave').disable();
					Ext.getCmp('btnDel').disable();
					Ext.getCmp('btnAdd').enable();
					grid.getSelectionModel().clearSelections();
				}
			},{
				text: 'Close', 
				name:'btnclose',
				iconCls: 'icon-close',		
				id:'btnclose',
				handler: function(){
					DesignationWindow.close();
				}
			}
		]
	});
	
	var varWidth =  (screen.width - DesignationWindow.width)/2;
    DesignationWindow.setPosition(varWidth,((screen.height/4)-100));
	DesignationWindow.show();
	

	
	function deletesubject(btn){
		if(btn=='yes'){			  			
			gridForm.getForm().submit({
				waitMsg: 'Loading...',
				success: function(){
					
					gridForm.getForm().reset();
					gridForm.getForm().findField('work_details').disable();
					Ext.getCmp('btnSave').disable();
					Ext.getCmp('btnDel').disable();
					Store.load();
					
				},
				failure: function(){
					Ext.MessageBox.show({
						title: 'Error',
						msg: 'Please fill up complete form.',
						buttons: Ext.MessageBox.OK,
						icon:Ext.MessageBox.ERROR
					});									
				}
			});
		} 
	}
});
</script>
<!-- end custom CSS/JS -->
<div id="main-content" align="center"></div>
<?php require "_footer.php";?>