<div id="container_ms_item<?php echo $ms_type_id;  ?>" style="height:100%; margin:0px; padding:0px;overflow:'hidden'; border: 0px solid #cd0a0a">
	<div class="pane-header ui-state-active" id="ms_item_<?php echo $ms_type_id;  ?>_bar" >   
		<button type="button" id="ms_item_<?php echo $ms_type_id;  ?>_new">NEW</button> 
		<button type="button" id="ms_item_<?php echo $ms_type_id;  ?>_edit">EDIT</button> 
		<button type="button" id="ms_item_<?php echo $ms_type_id;  ?>_delete">DELETE</button> 
		<button type="button" id="ms_item_<?php echo $ms_type_id;  ?>_change_status">ENABLE</button> 
	</div>
<table id="ms_item_<?php echo $ms_type_id;  ?>_tbl"></table> <div id="pms_item_<?php echo $ms_type_id;  ?>_tbl"></div>
</div> 

<script type="text/javascript">
    
    $(document).ready(function(){
	
	$(window).bind('resize', function() {  
		setTimeout(function(){
			setGridHight($("#ms_item_<?php echo $ms_type_id;  ?>_tbl"),$("#container_ms_item<?php echo $ms_type_id;  ?>"),$("#ms_item_<?php echo $ms_type_id;  ?>_bar")); 
		},10); 
	}); 
		 
	$("#ms_item_<?php echo $ms_type_id;  ?>_new").button(); 
	$("#ms_item_<?php echo $ms_type_id;  ?>_edit").button(); 
	$("#ms_item_<?php echo $ms_type_id;  ?>_delete").button();  
	$("#ms_item_<?php echo $ms_type_id;  ?>_change_status").button();  

	 jQuery("#ms_item_<?php echo $ms_type_id;  ?>_new").click(function(){ 
		var $dialog = jQuery('<div \>')
			 .load('<?php echo base_url().'ms_master/ct_ms_item/view_new_item'; ?>',{ms_type_id:'<?php echo $ms_type_id;  ?>'})
			 .dialog({
				modal:true,
				width : 550,
				height : 300,
					title :'NEW ITEM',
					buttons: { 
						"CLOSE": function(){
							$dialog.dialog("close");  
						} ,
						"SAVE NEW ITEM": function(){  
							var form_edit = {
								ms_type_id			:'<?php echo $ms_type_id;  ?>',
								part_no				:$('#ms_item_<?php echo $ms_type_id;  ?>_part_no').val(),     
								part_name			:$('#ms_item_<?php echo $ms_type_id;  ?>_part_name').val(),     
								base_no				:$('#ms_item_<?php echo $ms_type_id;  ?>_base_no').val(),     
								part_custom_no		:$('#ms_item_<?php echo $ms_type_id;  ?>_part_custom_no').val(),   
								uom					:$('#ms_item_<?php echo $ms_type_id;  ?>_uom').val(),      
								consumable			:$('#ms_item_<?php echo $ms_type_id;  ?>_consumable').is(':checked')==true?'1':'0', 
								rack_no					:$('#ms_item_<?php echo $ms_type_id;  ?>_rack_no').val(),      
								sta_qty				:$('#ms_item_<?php echo $ms_type_id;  ?>_sta_qty').val(),      
								price_qty			:$('#ms_item_<?php echo $ms_type_id;  ?>_sta_price').val(),     
								service_level			:$('#ms_item_<?php echo $ms_type_id;  ?>_service_level').val(),      
					 	 	}; 
							jQuery('.ui-dialog button:nth-child(2)').button('disable'); 
							$.ajax({    
								url:'<?php echo base_url().'ms_master/ct_ms_item/new_item'; ?>',
								type : 'POST',
									data : form_edit,
									dataType: 'json',
									success: function(msg){
										if (msg.valid){ 
									 
										 	if(confirm('Data Saved, Next New Item?')){ 
												$('#ms_item_<?php echo $ms_type_id;  ?>_part_no').val('');
												$('#ms_item_<?php echo $ms_type_id;  ?>_part_name').val('');
												$('#ms_item_<?php echo $ms_type_id;  ?>_base_no').val('');
												$('#ms_item_<?php echo $ms_type_id;  ?>_base_name').val('');
												$('#ms_item_<?php echo $ms_type_id;  ?>_part_custom_no').val('');
												$('#ms_item_<?php echo $ms_type_id;  ?>_part_custom_name').val('');
												$('#ms_item_<?php echo $ms_type_id;  ?>_uom').val('');
												$("#ms_item_<?php echo $ms_type_id;  ?>_consumable").prop("checked",false);
												$('#ms_item_<?php echo $ms_type_id;  ?>_rack_no').val('');
												$('#ms_item_<?php echo $ms_type_id;  ?>_sta_qty').val('0');
												$('#ms_item_<?php echo $ms_type_id;  ?>_sta_price').val('0'); 
												$('#ms_item_<?php echo $ms_type_id;  ?>_service_level').val('80'); 
												$('#ms_item_<?php echo $ms_type_id;  ?>_part_no').focus();
											}else{ 
												$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_item_<?php echo $ms_type_id;  ?>_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_item_<?php echo $ms_type_id;  ?>_edit").click(function(){ 
		var mark_id = jQuery('#ms_item_<?php echo $ms_type_id;  ?>_tbl').jqGrid('getGridParam','selrow');   
		if(!mark_id){ alert("Pililh data yang akan di edit");exit;}    
		var row_data = jQuery("#ms_item_<?php echo $ms_type_id;  ?>_tbl").jqGrid('getRowData',mark_id);    
				 
		var $dialog = jQuery('<div \>')
			 .load('<?php echo base_url().'ms_master/ct_ms_item/view_edit_item'; ?>',{'row_data':row_data,ms_type_id:'<?php echo $ms_type_id;  ?>'})
			 .dialog({
				modal:true,
				width : 550,
				height : 300,
				title :'EDIT ITEM (' + row_data.r3 + ' - ' + row_data.r4 + ')',
					buttons: { 
						"CLOSE": function(){
							$dialog.dialog("close");  
						} ,
						"SAVE EDIT ITEM": function(){
							var form_edit = {
								ms_item_id:row_data.rID,
								part_no				:$('#ms_item_<?php echo $ms_type_id;  ?>_part_no').val(),     
								part_name			:$('#ms_item_<?php echo $ms_type_id;  ?>_part_name').val(),     
								base_no				:$('#ms_item_<?php echo $ms_type_id;  ?>_base_no').val(),     
								part_custom_no		:$('#ms_item_<?php echo $ms_type_id;  ?>_part_custom_no').val(),   
								uom					:$('#ms_item_<?php echo $ms_type_id;  ?>_uom').val(),      
								consumable			:$('#ms_item_<?php echo $ms_type_id;  ?>_consumable').is(':checked')==true?'1':'0', 
								rack_no					:$('#ms_item_<?php echo $ms_type_id;  ?>_rack_no').val(),      
								sta_qty					:$('#ms_item_<?php echo $ms_type_id;  ?>_sta_qty').val(),      
								price_qty				:$('#ms_item_<?php echo $ms_type_id;  ?>_sta_price').val(),    
								service_level			:$('#ms_item_<?php echo $ms_type_id;  ?>_service_level').val(),   
				 	 	}; 
							jQuery('.ui-dialog button:nth-child(2)').button('disable'); 
							$.ajax({    
								url:'<?php echo base_url().'ms_master/ct_ms_item/edit_item'; ?>',
								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_item_<?php echo $ms_type_id;  ?>_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_item_<?php echo $ms_type_id;  ?>_delete").click(function(){ 
		var mark_id = jQuery('#ms_item_<?php echo $ms_type_id;  ?>_tbl').jqGrid('getGridParam','selrow');   
		if(!mark_id){ alert("Pililh data yang akan di edit");exit;}    
		var row_data = jQuery("#ms_item_<?php echo $ms_type_id;  ?>_tbl").jqGrid('getRowData',mark_id);    
				 
		var $dialog = jQuery('<div \>')
			 .html(' <div class="ui-layout-content ui-widget-content-panel" style="margin-top:10px"> \
				Delete Item?\
				</div>\
				<div class="pane-footer ui-state-default" />')
				.dialog({
				modal:true,
				width : 400,
				height : 170,
				title :'DELETE ITEM',
					buttons: { 
						"CLOSE": function(){
							$dialog.dialog("close");  
						} ,
						"DELETE": function(){
							var form_edit = {
								ms_item_id:row_data.rID,
								status_id:row_data.r18=='1'?'0':'1',     
								status_info:$('#ms_item_<?php echo $ms_type_id;  ?>_status_info').val()
				 	 	}; 
							jQuery('.ui-dialog button:nth-child(2)').button('disable'); 
							$.ajax({    
								url:'<?php echo base_url().'ms_master/ct_ms_item/delete_item'; ?>',
								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_item_<?php echo $ms_type_id;  ?>_tbl').trigger('reloadGrid');
					},

					open: function(){  
						$("body").unblock();  
					} 
				}); 
	});
		 
		 
	jQuery("#ms_item_<?php echo $ms_type_id;  ?>_change_status").click(function(){ 
		var mark_id = jQuery('#ms_item_<?php echo $ms_type_id;  ?>_tbl').jqGrid('getGridParam','selrow');   
		if(!mark_id){ alert("Pilih data yang akan di edit");exit;}    
		var row_data = jQuery("#ms_item_<?php echo $ms_type_id;  ?>_tbl").jqGrid('getRowData',mark_id);    
				 
		var $dialog = jQuery('<div \>')
			 .html(' <div class="ui-layout-content ui-widget-content-panel" style="margin-top:10px"> \
				Rubah Status?\<br />\
				 <label class="lbfield55">Info</label><label class="lbcolon">:</label><input id="ms_item_<?php echo $ms_type_id;  ?>_status_info"name="ms_item_<?php echo $ms_type_id;  ?>_status_info"   style="width:250px"  type="text" />\
				</div>\
				<div class="pane-footer ui-state-default" />')
				.dialog({
				modal:true,
				width : 400,
				height : 170,
				title :'EDIT ITEM (' + row_data.r3 + ' - ' + row_data.r4 + ')',
					buttons: { 
						"CLOSE": function(){
							$dialog.dialog("close");  
						} ,
						"OK": function(){
							var form_edit = {
								ms_item_id:row_data.rID,
								status_id:row_data.r18=='1'?'0':'1',     
								status_info:$('#ms_item_<?php echo $ms_type_id;  ?>_status_info').val()
				 	 	}; 
							jQuery('.ui-dialog button:nth-child(2)').button('disable'); 
							$.ajax({    
								url:'<?php echo base_url().'ms_master/ct_ms_item/change_status'; ?>',
								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_item_<?php echo $ms_type_id;  ?>_tbl').trigger('reloadGrid');
					},

					open: function(){ 
						 
						$("body").unblock(); 
						    
					} 
				}); 
	});
		 
	jQuery("#ms_item_<?php echo $ms_type_id;  ?>_tbl").jqGrid({
			url:'<?php echo base_url().'ms_master/ct_ms_item/loaddata'; ?>',
			mtype : "post",
			postData:{ms_type_id:'<?php echo $ms_type_id;  ?>'},
			datatype: "json",
			colNames:[
			'dt_ms_item_ms_type_id','dt_ms_item_ms_type_id','enum_ms_type_ms_type_name','C','STATUS','NO','NAME'
			,'NO','NAME','NO','NAME','HS CODE'
			,'UOM' ,'QTY','PRICE','PRICE USD','RACK'
			,'SEVICE LEVEL','MIN QTY','MAX QTY','LAST QTY','DATE' ,'BY'
			,'dt_ms_item_ms_item_h_status_id','dt_ms_item_h_status_ms_item_status_id','INFO'
			,'DATE','BY','dt_ms_item_ms_item_h_price_id','DATE','BY'
			,'DATE','BY'
			]
			,colModel:[
			{name:'rID',index:'rID', width:80, hidden:true, align :'right'}
			,{name:'r1',index:'r1', width:80, hidden:true, align :'right'}
			,{name:'r2',index:'r2', width:80, hidden:true, align :'right'}
			,{name:'r10',index:'r10', width:40, editable: false, formatter:'checkbox',  align: "center",stype: "select", searchoptions: { value: "-100:All;1:Yes;0:No" }}
			,{name:'r19',index:'r19', width:80, stype: 'select', search:true, searchoptions:{searchhidden: true, value: '1:ENABLE;0:DISABLE;-100:All'}}
  			,{name:'r3',index:'r3', width:150, hidden:false, align :'left'}//dt_ms_item_part_no
			,{name:'r4',index:'r4', width:300, hidden:false, align :'left'}

			,{name:'r5',index:'r5', width:100, hidden:false, align :'left'} 
			,{name:'r11',index:'r11', width:200, hidden:false, align :'left'}
			,{name:'r6',index:'r6', width:60, hidden:false, align :'left'}
			,{name:'r7',index:'r7', width:200, hidden:false, align :'left'}
			,{name:'r8',index:'r8', width:60, hidden:false, align :'left'}
			
			,{name:'r9',index:'r9', width:60, hidden:false, align :'right'} 
			,{name:'r12',index:'r12', width:80, hidden:false, align :'right'}
			,{name:'r13',index:'r13', width:80, hidden:false, align :'right'}
			,{name:'r13d',index:'r13d', width:80, hidden:false, align :'right'}
			,{name:'r30',index:'r30', width:80, hidden:false, align :'right'} 
			
			,{name:'r28',index:'r28', width:80, hidden:false, align :'right'}   
			,{name:'r14',index:'r14', width:80, hidden:false, align :'right'} 
			,{name:'r14x',index:'r14x', width:80, hidden:false, align :'right'} 
			,{name:'r31',index:'r31', width:80, hidden:false, align :'right'} 
			,{name:'r15',index:'r15', width:125, hidden:false, align :'left', searchoptions:{searchhidden: true,dataInit:function(el){$(el).datepicker({onSelect: function(date){jQuery("#ms_item_<?php echo $ms_type_id;  ?>_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:'r16',index:'r16', width:80, hidden:false, align :'left'}
			
			,{name:'r17',index:'r17', width:80, hidden:true, align :'right'}
			,{name:'r18',index:'r18', width:200, hidden:true, align :'right'}
			,{name:'r20',index:'r20', width:200, hidden:false, align :'right'}
			,{name:'r21',index:'r21', width:125, hidden:false, align :'left', searchoptions:{searchhidden: true,dataInit:function(el){$(el).datepicker({onSelect: function(date){jQuery("#ms_item_<?php echo $ms_type_id;  ?>_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:'r22',index:'r22', width:80, hidden:false, align :'left'}
			,{name:'r23',index:'r23', width:80, hidden:true, align :'left'}
			,{name:'r24',index:'r24', width:125, hidden:false, align :'left', searchoptions:{searchhidden: true,dataInit:function(el){$(el).datepicker({onSelect: function(date){jQuery("#ms_item_<?php echo $ms_type_id;  ?>_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:'r25',index:'r25', width:80, hidden:false, align :'left'}

			,{name:'r26',index:'r26', width:125, hidden:false, align :'left', searchoptions:{searchhidden: true,dataInit:function(el){$(el).datepicker({onSelect: function(date){jQuery("#ms_item_<?php echo $ms_type_id;  ?>_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:'r27',index:'r27', width:80, hidden:false, align :'left'}

			],
			rowNum:10,
			rowList:[10,20,30],
			pager: '#pms_item_<?php echo $ms_type_id;  ?>_tbl',
			sortname: 'r1',
			viewrecords: true,
			sortorder: "desc",
			width: '',
			height: 100,
			//width: 950,
			//height:300,
			jsonReader: { repeatitems : false },
			caption:"DATA <?php echo strtoupper($ms_type_name);  ?>",
			rownumbers: true,
			loadonce: false,
			shrinkToFit: false,
			multiselect: false,
			afterInsertRow: function(rowid, aData){
				/*switch (aData.statusdok) {
					case 'DATA SENT':
						jQuery("#ms_item_<?php echo $ms_type_id;  ?>_tbl").jqGrid('setCell',rowid,'statusdok','',{color:'green'});
					break;
					case '2':
						jQuery("#ms_item_<?php echo $ms_type_id;  ?>_tbl").jqGrid('setCell',rowid,'statusdok','',{color:'red'});
					break;
					case '1':
						jQuery("#ms_item_<?php echo $ms_type_id;  ?>_tbl").jqGrid('setCell',rowid,'statusdok','',{color:'blue'});
					break;
					
				} */
			},
		    onSelectRow: function(rowid){ 
				var rowData = $("#ms_item_<?php echo $ms_type_id;  ?>_tbl").getRowData(rowid); 
		 		if (rowData.r18 == '1' ){ 
						 $( "#ms_item_<?php echo $ms_type_id;  ?>_change_status" ).find('span').text("DISABLE");
			     }
				else{
					 $( "#ms_item_<?php echo $ms_type_id;  ?>_change_status" ).find('span').text("ENABLE");
			    } 
  		 	 },
				
			gridComplete: function(){
				var rowIDs = jQuery("#ms_item_<?php echo $ms_type_id;  ?>_tbl").getDataIDs(); 
				var rowData = $("#ms_item_<?php echo $ms_type_id;  ?>_tbl").getRowData();
			
				for (var i = 0; i < rowData.length; i++) 
				{
				   var trElement = jQuery("#"+ rowIDs[i],jQuery('#ms_item_<?php echo $ms_type_id;  ?>_tbl'));
				   
					switch (rowData[i].r18) {
						case '0':
						   trElement.css({"color":"red"});
						break;
						
					}
				}
			},
		}); 
		
		jQuery("#ms_item_<?php echo $ms_type_id;  ?>_tbl").jqGrid('setGroupHeaders', 
            { useColSpanStyle: true, groupHeaders:[
	 		{startColumnName: 'r3', numberOfColumns: 2, titleText: '<em><center>PART</center></em>'},
 	 		{startColumnName: 'r5', numberOfColumns: 2, titleText: '<em><center>BASE PART</center></em>'},
 			{startColumnName: 'r6', numberOfColumns: 3, titleText: '<em><center>CUSTOM PART</center></em>'},
  			{startColumnName: 'r12', numberOfColumns: 3, titleText: '<em><center>BEGINNING BALANCE</center></em>'},
   			{startColumnName: 'r28', numberOfColumns: 4, titleText: '<em><center>STOCK CONTROL</center></em>'},
   			{startColumnName: 'r20', numberOfColumns: 3, titleText: '<em><center>STATUS</center></em>'},
  			{startColumnName: 'r24', numberOfColumns: 2, titleText: '<em><center>CREATE</center></em>'},
  			{startColumnName: 'r26', numberOfColumns: 2, titleText: '<em><center>MODIFY</center></em>'},
       ] });
			               
		jQuery("#ms_item_<?php echo $ms_type_id;  ?>_tbl").jqGrid('navGrid','#pms_item_<?php echo $ms_type_id;  ?>_tbl',{del:false,add:false,edit:false},{},{},{},{multipleSearch:false});
		jQuery("#ms_item_<?php echo $ms_type_id;  ?>_tbl").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true, defaultSearch: 'cn', ignoreCase: true});
	
	// var trHead =.find('thead') $("thead:first tr");
     //       $("thead:first tr th").height("100px");
     //       $("th:eq(3) div", trHead).addClass("rotate").css('margin-left', '2px').css('position', 'absolute');
     //       $("th:eq(4) div", trHead).addClass("rotate").css('margin-left', '2px').css('margin-bottom', '8px');   // minfix 2px
		//$("#jqgh_ms_ms_memo_scrap_tbl_r5").addClass("rotate").css('margin-left', '2px').css('position', 'absolute');; 
	setTimeout(function(){
			setGridHight($("#ms_item_<?php echo $ms_type_id;  ?>_tbl"),$("#container_ms_item<?php echo $ms_type_id;  ?>"),$("#ms_item_<?php echo $ms_type_id;  ?>_bar")); 
		},100); 
	});
		  	
</script>

	
	