<div id="container_ms_change_part" style="height:100%; margin:0px; padding:0px;overflow:'hidden'; border: 0px solid #cd0a0a">

	<div class="pane-header ui-state-active" id="ms_change_part_bar" >   
		<button type="button" id="ms_change_part_view">View Item</button> 
		<button type="button" id="ms_change_part_new">New</button> 
		<button type="button" id="ms_change_part_edit">Edit</button> 
		<button type="button" id="ms_change_part_cancel">Cancel</button> 
		<button type="button" id="ms_change_part_approve">Approve</button> 
	</div>
	
	<table id="ms_change_part_list_tbl"></table> <div id="pms_change_part_list_tbl"></div>
	
</div> 

<script type="text/javascript">
    
	$(document).ready(function(){
	
		$(window).bind('resize', function() {  
			setTimeout(function(){
				setGridHight($("#ms_change_part_list_tbl"),$("#container_ms_change_part"),$("#ms_change_part_bar")); 
			},10); 
		}); 
		   
		$("#ms_change_part_approve").button(); 
		$("#ms_change_part_cancel").button();  
		$("#ms_change_part_view").button();  

		jQuery("#ms_change_part_view").button().click(function(){
		
			var mark_id = jQuery('#ms_change_part_list_tbl').jqGrid('getGridParam','selrow');   
			if(!mark_id){ alert("Pilih Row data terlebih dahulu");exit;}    
			var row_data = jQuery("#ms_change_part_list_tbl").jqGrid('getRowData',mark_id);    
				 
			var $dialog = jQuery('<div \>')
			.load('<?php echo base_url().'ms_change_part/ct_ms_change_part_list/view_item'; ?>',{'row_data':row_data})
			.dialog({
				modal:true,
				width : 1100,
				height : 650,
				title :'LIST ITEM CHANGE PART (' + row_data.r2 + ' - ' + row_data.r3 + ')',
				buttons: { 
					"CLOSE": function(){
						$dialog.dialog("close");  
					} 
				},
				close : function(){
					$dialog.dialog('destroy').remove();
					$('#ms_change_part_list_tbl').trigger('reloadGrid');
				},

				open: function(){  
					$("body").unblock();  
				} 
			}); 
		});

		jQuery("#ms_change_part_new").button().click(function(){ 
			var $dialog = jQuery('<div \>')
			.load('<?php echo base_url().'ms_change_part/ct_ms_change_part_list/view_new_item'; ?>',{'1':'1'})
			.dialog({
				modal:true,
				width : 1100,
				height : 650,
				title :'NEW PART LIST',
				buttons: { 
					"CLOSE": function(){
						$dialog.dialog("close");  
					} 
				},
				close : function(){
					$dialog.dialog('destroy').remove();
					$('#ms_change_part_list_tbl').trigger('reloadGrid');
				},
				open: function(){
					jQuery('.ui-dialog .ui-dialog-buttonpane').append('<br><a id="ms_prod_car_line_dialog_info" style="color:red">WARNING !!! \
					Supply with date greater than document date will cause minus in CUSTOM REPORT</a>');
					$('#ms_prod_car_line_dialog_info').hide();
					$("body").unblock(); 
				}
			}); 
		});
	
		jQuery("#ms_change_part_edit").button().click(function(){
			
			var mark_id = jQuery('#ms_change_part_list_tbl').jqGrid('getGridParam','selrow');   
			if(!mark_id){ alert("Pililh data yang akan di edit");exit;}    
			var row_data = jQuery("#ms_change_part_list_tbl").jqGrid('getRowData',mark_id);    
				 
			var $dialog = jQuery('<div \>')
			.load('<?php echo base_url().'ms_change_part/ct_ms_change_part_list/view_new_item'; ?>',{'row_data':row_data})
			.dialog({
				modal:true,
				width : 1100,
				height : 650,
				title :'EDIT PART LIST (' + row_data.r2 + ' - ' + row_data.r3 + ')',
				buttons: { 
					"CLOSE": function(){
						$dialog.dialog("close");  
					} 
				},
				close : function(){
					$dialog.dialog('destroy').remove();
					$('#ms_change_part_list_tbl').trigger('reloadGrid');
				},

				open: function(){ 
					jQuery('.ui-dialog .ui-dialog-buttonpane').append('<br><a id="ms_prod_car_line_dialog_info" style="color:red">WARNING !!! \
					Supply with date greater than document date will cause minus in CUSTOM REPORT</a>');
					$('#ms_prod_car_line_dialog_info').hide();
					$("body").unblock();     
				} 
			}); 
		});
		  
		jQuery("#ms_change_part_approve").click(function(){  
			var mark_id = jQuery('#ms_change_part_list_tbl').jqGrid('getGridParam','selrow');   
			if(!mark_id){ alert("Pililh dokumen yang akan di approve");exit;}    
				
			var $dialog =  $('<div />')
			.html(' <div class="ui-layout-content ui-widget-content-panel" style="margin-top:10px"> \
			Approve dokumen? data akan masuk ke dalam laporan mutasi <br /><br />\
			</div>')
			.dialog({
				modal:true,
				width : 500,
				height : 200,
				title :'FINISH DOCUMENT BC ',
				buttons: {
					"CLOSE": function(){
						$dialog.dialog("close");  
					} ,
					
					"APPROVE": function(){ 
					
						var ret = jQuery("#ms_change_part_list_tbl").jqGrid('getRowData',mark_id);    
						var form_edit = {      
							header_id  : ret.rID
						}; 
								 	
	
						$.ajax({    
							url:'<?php echo base_url().'ms_change_part/ct_ms_change_part_list/approve_header'; ?>',
							type : 'POST',
							data : form_edit,
							dataType: 'json',
							success: function(msg){
								if (msg.valid){
									alert(msg.stsmsg);  
									$dialog.dialog("close");  
								} else { alert(msg.stsno+msg.stsmsg);  }
							} 
						});
					} , 
				},
				close : function(){
					$dialog.dialog('destroy').remove();
					$('#ms_change_part_list_tbl').trigger('reloadGrid');
				},
				open: function(){  
					jQuery('.ui-dialog button:nth-child(1)').attr('tabindex', jQuery('.ui-dialog button:nth-child(2)').attr('tabindex') +1);  
					$("body").unblock(); 
				}
			}); 
		}); 
	
		  
		jQuery("#ms_change_part_cancel").click(function(){  
			var mark_id = jQuery('#ms_change_part_list_tbl').jqGrid('getGridParam','selrow');   
			if(!mark_id){ alert("Pililh dokumen yang akan di cancel");exit;}    
		
			var $dialog =  $('<div />')
				.html(' <div class="ui-layout-content ui-widget-content-panel" style="margin-top:10px"> \
				<table class="tablefixed" > \
				<input type="hidden" id="doc_in_id23"> \
							<tr> \
							<td class="td100">Info Cancel</td> \
							  <td width="10"><div align="center">:</div></td> \
								<td colspan="3"><input name="txt_prod_car_line_info_cancel" type="text" id="txt_prod_car_line_info_cancel" style="width:100%;text-align:left;" /></td> \
							</tr> \
						</table> \
				</div>\
				<div class="pane-footer ui-state-default" />')
			.dialog({
				modal:true,
				width : 500,
				height : 150,
				title :'CANCEL DOCUMENT',
				buttons: {
					"CLOSE": function(){
						$dialog.dialog("close");  
					},
					"CANCEL DOCUMENT": function(){ 
						var ret = jQuery("#ms_change_part_list_tbl").jqGrid('getRowData',mark_id);    
						var form_edit = {      
							header_id  : ret.rID,
							info  : $('#txt_prod_car_line_info_cancel').val()  
						}; 
							
						jQuery('.ui-dialog button:nth-child(2)').button('disable'); 
						$.ajax({    
							url:'<?php echo base_url().'ms_change_part/ct_ms_change_part_list/cancel_header'; ?>',
							type : 'POST',
							data : form_edit,
							dataType: 'json',
							success: function(msg){
								if (msg.valid){
									alert(msg.stsmsg);  
									$dialog.dialog("close");  
								} else { alert(msg.stsno+msg.stsmsg);  }
							} 
						}).always(function() {
									jQuery('.ui-dialog button:nth-child(2)').button('enable'); 
						});	 
					} , 
				},
				close : function(){
					$dialog.dialog('destroy').remove();
					$('#ms_change_part_list_tbl').trigger('reloadGrid');
				},
				open: function(){
					$("body").unblock(); 
				}
			}); 
		}); 
		  
		jQuery("#ms_change_part_list_tbl").jqGrid({
			
			url:'<?php echo base_url().'ms_change_part/ct_ms_change_part_list/loaddata'; ?>',
			mtype : "post",
			postData:{'1':'1'},
			datatype: "json",
			colNames:[
				'ms_part_list_change_part_id'
				,'STATUS'
				,'NO'
				,'DATE'
				,'PART NO'
				,'PART NAME'
				,'CAR LINE NO'
				,'CAR LINE NAME'
				,'ASSETS NUMBER'
				,'INFO'
				,'DATE'
				,'BY'
				,'DATE'
				,'BY'
				,'DATE'
				,'BY'
				,'ms_item_id'
				,'assets_list_id'
				,'ms_part_list_change_part_status_id'
				,'ms_part_list_change_part_h_status_id'
			]
			,colModel:[
				{name:'rID',index:'rID', width:80, hidden:true, align :'right'}
				,{name:'r1',index:'r1', width:80, stype: 'select', search:true, searchoptions:{searchhidden: true, value: '-100:All;0:EDIT;1:APPROVE;-1:CANCEL'}}
				,{name:'r2',index:'r2', width:150, hidden:false, align :'left'}
				,{name:'r3',index:'r3', width:100, hidden:false, align :'left', searchoptions:{searchhidden: true,dataInit:function(el){$(el).datepicker({onSelect: function(date){jQuery("#ms_item_type_prosses_tbl")[0].triggerToolbar();},changeMonth: true,changeYear: true,dateFormat:'dd/mm/yy', showButtonPanel: true, beforeShow: function(input) {  setTimeout(function() { var buttonPane = $(input).datepicker("widget").find( ".ui-datepicker-buttonpane" );   var btn = $('<button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" type="button">Clear</button>');   btn.unbind("click").bind("click", function () {   $.datepicker._clearDate( input );   });   btn.appendTo( buttonPane );  }, 1 );  }  });}}}
				,{name:'r4',index:'r4', width:100, hidden:false, align :'left'}
				,{name:'r5',index:'r5', width:150, hidden:false, align :'right'}
				
				,{name:'r6',index:'r6', width:150, hidden:false, align :'right'}
				,{name:'r7',index:'r7', width:150, hidden:false, align :'right'}
				
				,{name:'r8',index:'r8', width:250, hidden:false, align :'right'}
				,{name:'r9',index:'r9', width:250, hidden:false, align :'right'}
				,{name:'r10',index:'r10', width:80, hidden:false, align :'left', searchoptions:{searchhidden: true,dataInit:function(el){$(el).datepicker({onSelect: function(date){jQuery("#ms_item_type_prosses_tbl")[0].triggerToolbar();},changeMonth: true,changeYear: true,dateFormat:'dd/mm/yy', showButtonPanel: true, beforeShow: function(input) {  setTimeout(function() { var buttonPane = $(input).datepicker("widget").find( ".ui-datepicker-buttonpane" );   var btn = $('<button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" type="button">Clear</button>');   btn.unbind("click").bind("click", function () {   $.datepicker._clearDate( input );   });   btn.appendTo( buttonPane );  }, 1 );  }  });}}}
				,{name:'r11',index:'r11', width:120, hidden:false, align :'left'}
				,{name:'r12',index:'r12', width:80, hidden:false, align :'left', searchoptions:{searchhidden: true,dataInit:function(el){$(el).datepicker({onSelect: function(date){jQuery("#ms_item_type_prosses_tbl")[0].triggerToolbar();},changeMonth: true,changeYear: true,dateFormat:'dd/mm/yy', showButtonPanel: true, beforeShow: function(input) {  setTimeout(function() { var buttonPane = $(input).datepicker("widget").find( ".ui-datepicker-buttonpane" );   var btn = $('<button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" type="button">Clear</button>');   btn.unbind("click").bind("click", function () {   $.datepicker._clearDate( input );   });   btn.appendTo( buttonPane );  }, 1 );  }  });}}}
				,{name:'r13',index:'r13', width:120, hidden:false, align :'left'}
				,{name:'r14',index:'r14', width:80, hidden:false, align :'left', searchoptions:{searchhidden: true,dataInit:function(el){$(el).datepicker({onSelect: function(date){jQuery("#ms_item_type_prosses_tbl")[0].triggerToolbar();},changeMonth: true,changeYear: true,dateFormat:'dd/mm/yy', showButtonPanel: true, beforeShow: function(input) {  setTimeout(function() { var buttonPane = $(input).datepicker("widget").find( ".ui-datepicker-buttonpane" );   var btn = $('<button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" type="button">Clear</button>');   btn.unbind("click").bind("click", function () {   $.datepicker._clearDate( input );   });   btn.appendTo( buttonPane );  }, 1 );  }  });}}}
				,{name:'r15',index:'r15', width:120, hidden:false, align :'left'}
				,{name:'r16',index:'r16', width:80, hidden:true, align :'left'}
				,{name:'r17',index:'r17', width:80, hidden:true, align :'left'}
				,{name:'r18',index:'r18', width:80, hidden:true, align :'left'}
				,{name:'r19',index:'r19', width:80, hidden:true, align :'left'}
			],
			
			rowNum:10,
			rowList:[10,20,30],
			pager: '#pms_change_part_list_tbl',
			sortname: 'r1',
			viewrecords: true,
			sortorder: "desc",
			width: '',
			height: 100,
			jsonReader: { repeatitems : false },
			caption:"DATA CHANGE PART",
			rownumbers: true,
			loadonce: false,
			shrinkToFit: false,
			multiselect: false,
			afterInsertRow: function(rowid, aData){
				/*switch (aData.statusdok) {
					case 'DATA SENT':
						jQuery("#ms_change_part_list_tbl").jqGrid('setCell',rowid,'statusdok','',{color:'green'});
					break;
					case '2':
						jQuery("#ms_change_part_list_tbl").jqGrid('setCell',rowid,'statusdok','',{color:'red'});
					break;
					case '1':
						jQuery("#ms_change_part_list_tbl").jqGrid('setCell',rowid,'statusdok','',{color:'blue'});
					break;	
				} */
			},
			gridComplete: function(){
				var rowIDs = jQuery("#ms_change_part_list_tbl").getDataIDs(); 
				var rowData = $("#ms_change_part_list_tbl").getRowData();
			
				for (var i = 0; i < rowData.length; i++) 
				{
				   var trElement = jQuery("#"+ rowIDs[i],jQuery('#ms_change_part_list_tbl'));
				   
					switch (rowData[i].r18) { 
						case '1':
						   trElement.css({"color":"blue"});
						break; 
						case '-1':
						   trElement.css({"color":"red"});
						break;
					}
				}
			},
		}); 
		
		jQuery("#ms_change_part_list_tbl").jqGrid('setGroupHeaders', 
			{ useColSpanStyle: true, groupHeaders:[
				{startColumnName: 'r2', numberOfColumns: 2, titleText: '<em><center>PRODUCTION</center></em>'}, 
				{startColumnName: 'r9', numberOfColumns: 3, titleText: '<em><center>STATUS</center></em>'}, 
				{startColumnName: 'r12', numberOfColumns: 2, titleText: '<em><center>CREATE</center></em>'}, 
				{startColumnName: 'r14', numberOfColumns: 2, titleText: '<em><center>MODIFY</center></em>'}, 
			] });
			               
		jQuery("#ms_change_part_list_tbl").jqGrid('navGrid','#pms_change_part_list_tbl',{del:false,add:false,edit:false},{},{},{},{multipleSearch:false});
		jQuery("#ms_change_part_list_tbl").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true, defaultSearch: 'cn', ignoreCase: true});
	
		setTimeout(function(){
			setGridHight($("#ms_change_part_list_tbl"),$("#container_ms_change_part"),$("#ms_change_part_bar")); 
		},100); 
	});
		  	
</script>

	
	