<div id="container_pasi_ceisa_master_po_item" style="height:100%; margin:0px; padding:0px;overflow:'hidden'; border: 0px solid #cd0a0a">
	<div class="pane-header ui-state-active" style="height:25px" id="pasi_ceisa_master_po_item_bar" >    
		<table style="width:100%">
		<tr>
			<td>LIST ITEM</td>
			<td>
			<button type="button" id="pasi_ceisa_master_po_item_map_auto" style="float: right;">Map Auto</button> 
			<button type="button" id="pasi_ceisa_master_po_item_map_manual" style="float: right;">Map Manual</button>  
			</td>
		</tr>
		</table> 
	</div>
<table id="pasi_ceisa_master_po_item_tbl"></table> <div id="ppasi_ceisa_master_po_item_tbl"></div>
</div> 

<script type="text/javascript">
    
    $(document).ready(function(){
	$("#pasi_ceisa_master_po_item_map_auto").button();  
	$("#pasi_ceisa_master_po_item_map_manual").button();  
 	
	$(window).bind('resize', function() {  
		setTimeout(function(){
			setGridHight($("#pasi_ceisa_master_po_item_tbl"),$("#container_pasi_ceisa_master_po_item"),$("#pasi_ceisa_master_po_item_bar")); 
		},10); 
	}); 
		   

 
 	
	  jQuery("#pasi_ceisa_master_po_item_status_close").click(function(){  
			var mark_id = jQuery('#pasi_ceisa_master_po_item_tbl').jqGrid('getGridParam','selrow');   
			if(!mark_id){ alert("Pililh dokumen yang akan di cancel");exit;}    
			var ret = jQuery("#pasi_ceisa_master_po_item_tbl").jqGrid('getRowData',mark_id);    
			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="pasi_ceisa_master_po_item_status_info" type="text" id="pasi_ceisa_master_po_item_status_info" 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 :'CLOSE PO',
				buttons: {
					"CLOSE": function(){
						$dialog.dialog("close");  
					} ,
					"PROSES": function(){ 
							 	var form_edit = {      
									po_id  : ret.rID,
									status_po_item_id  : '1',
									status_info :$("#pasi_ceisa_master_po_item_status_info").val()
							}; 
							
							$.ajax({    
							url:'<?php echo base_url().'pasi_ceisa_master/ct_pasi_po_item/update_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);  }
								} 
							});
							 
					} , 
				},
				close : function(){
					$dialog.dialog('destroy').remove();
					$('#pasi_ceisa_master_po_item_tbl').trigger('reloadGrid');
				},
				open: function(){
				$("body").unblock(); 
				}
			}); 
	}); 
	
	
	  jQuery("#pasi_ceisa_master_po_item_status_open").click(function(){  
			var mark_id = jQuery('#pasi_ceisa_master_po_item_tbl').jqGrid('getGridParam','selrow');   
			if(!mark_id){ alert("Pililh dokumen yang akan di cancel");exit;}    
			var ret = jQuery("#pasi_ceisa_master_po_item_tbl").jqGrid('getRowData',mark_id);    
			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="pasi_ceisa_master_po_item_status_info" type="text" id="pasi_ceisa_master_po_item_status_info" 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 :'OPEN PO',
				buttons: {
					"CLOSE": function(){
						$dialog.dialog("close");  
					} ,
					"PROSES": function(){ 
							 	var form_edit = {      
									po_id  : ret.rID,
									status_po_item_id  : '0',
									status_info :$("#pasi_ceisa_master_po_item_status_info").val()
							}; 
							
							$.ajax({    
							url:'<?php echo base_url().'pasi_ceisa_master/ct_pasi_po_item/update_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);  }
								} 
							});
							 
					} , 
				},
				close : function(){
					$dialog.dialog('destroy').remove();
					$('#pasi_ceisa_master_po_item_tbl').trigger('reloadGrid');
				},
				open: function(){
				$("body").unblock(); 
				}
			}); 
	}); 

		 
	jQuery("#pasi_ceisa_master_po_item_tbl").jqGrid({
			url:'<?php echo base_url().'pasi_ceisa_master/ct_pasi_po/loaddata_item'; ?>',
			mtype : "post",
			postData:{'po_id':'<?php echo $po_id;  ?>'},
			datatype: "json",
			colNames:[
			'dt_po_barang_po_barang_id','Item No','Item Name'
			,'Type','Description'
			,'Po','Send','Draft','Out Standing'
			,'mapping_item_id','type_item_id','Type','Code','Item No','Name'
			,'Amount','Amount USD'
			,'File Row','NO','Date','Date','By','Date','By'
			,'Date','By','dt_po_barang_po_id' 
			]
			,colModel:[
			{name:'rID',index:'rID', width:80, hidden:true, align :'right'}
			,{name:'r4',index:'r4', width:150, hidden:false, align :'left'}
			,{name:'r5',index:'r5', width:150, hidden:false, align :'left'}

			,{name:'r6',index:'r6', width:80, hidden:true, align :'left'}
			,{name:'r7',index:'r7', width:80, hidden:false, align :'left'}
			
			,{name:'r8',index:'r8', width:80, hidden:false, align :'right'}
			,{name:'r16',index:'r16', width:80, hidden:false, align :'right'} 
			,{name:'r17',index:'r17', width:80, hidden:false, align :'right'}
			,{name:'r18',index:'r18', width:80, hidden:false, align :'right'}
			
			,{name:'r11',index:'r11', width:80, hidden:true, align :'left'}
			,{name:'r12',index:'r12', width:80, hidden:true, align :'left'}
			,{name:'r15',index:'r15', width:80, hidden:false, align :'left'}
			,{name:'r13',index:'r13', width:80, hidden:false, align :'left'}
			,{name:'r13a',index:'r13a', width:80, hidden:false, align :'left'}
			,{name:'r14',index:'r14', width:80, hidden:false, align :'left'}
		
			,{name:'r9',index:'r9', width:80, hidden:false, align :'right'}
			,{name:'r10',index:'r10', width:80, hidden:false, align :'right'}

	
			
			,{name:'r1',index:'r1', width:80, hidden:false, align :'center'}
			,{name:'r2',index:'r2', width:80, hidden:false, align :'left'}
			,{name:'r3',index:'r3', width:80, hidden:false, align :'left', searchoptions:{searchhidden: true,dataInit:function(el){$(el).datepicker({onSelect: function(date){jQuery("#table_name")[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:'r24',index:'r24', width:80, hidden:false, align :'left', searchoptions:{searchhidden: true,dataInit:function(el){$(el).datepicker({onSelect: function(date){jQuery("#table_name")[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 :'right'}

			,{name:'r19',index:'r19', width:80, hidden:false, align :'left', searchoptions:{searchhidden: true,dataInit:function(el){$(el).datepicker({onSelect: function(date){jQuery("#table_name")[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:'r20',index:'r20', width:80, hidden:false, align :'right'}

			,{name:'r21',index:'r21', width:80, hidden:false, align :'left', searchoptions:{searchhidden: true,dataInit:function(el){$(el).datepicker({onSelect: function(date){jQuery("#table_name")[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 :'right'}
			,{name:'r23',index:'r23', width:80, hidden:false, align :'right'}


			],
			rowNum:10,
			rowList:[10,20,30],
			pager: '#ppasi_ceisa_master_po_item_tbl',
			sortname: 'r1',
			viewrecords: true,
			sortorder: "desc",
			width: '',
			height: 100,
			//width: 950,
			//height:300,
			jsonReader: { repeatitems : false },
			rownumbers: true,
			loadonce: false,
			shrinkToFit: false,
			multiselect: false,
			afterInsertRow: function(rowid, aData){
				/*switch (aData.statusdok) {
					case 'DATA SENT':
						jQuery("#pasi_ceisa_master_po_item_tbl").jqGrid('setCell',rowid,'statusdok','',{color:'green'});
					break;
					case '2':
						jQuery("#pasi_ceisa_master_po_item_tbl").jqGrid('setCell',rowid,'statusdok','',{color:'red'});
					break;
					case '1':
						jQuery("#pasi_ceisa_master_po_item_tbl").jqGrid('setCell',rowid,'statusdok','',{color:'blue'});
					break;
					
				} */
			},
			gridComplete: function(){
				var rowIDs = jQuery("#pasi_ceisa_master_po_item_tbl").getDataIDs(); 
				var rowData = $("#pasi_ceisa_master_po_item_tbl").getRowData(); 
				for (var i = 0; i < rowData.length; i++) 
				{
				   var trElement = jQuery("#"+ rowIDs[i],jQuery('#pasi_ceisa_master_po_item_tbl'));
				   
					switch (rowData[i].r13) {
						case '': 
						   trElement.css({"color":"red"});
						break;
					}
				}
			},
		}); 
		
		jQuery("#pasi_ceisa_master_po_item_tbl").jqGrid('setGroupHeaders', 
            { useColSpanStyle: true, groupHeaders:[
	 		{startColumnName: 'r2', numberOfColumns: 2, titleText: '<em><center>PR</center></em>'},
 			{startColumnName: 'r4', numberOfColumns: 4, titleText: '<em><center>PO ITEM</center></em>'}, 
			{startColumnName: 'r15', numberOfColumns: 4, titleText: '<em><center>INTERNAL ITEM</center></em>'}, 
  			{startColumnName: 'r8', numberOfColumns: 4, titleText: '<em><center>QUANTITY</center></em>'}, 
  			{startColumnName: 'r24', numberOfColumns: 2, titleText: '<em><center>Mapping</center></em>'}, 
  			{startColumnName: 'r19', numberOfColumns: 2, titleText: '<em><center>Create</center></em>'}, 
  			{startColumnName: 'r21', numberOfColumns: 2, titleText: '<em><center>Modify</center></em>'}, 
  	    ] });
			               
		jQuery("#pasi_ceisa_master_po_item_tbl").jqGrid('navGrid','#ppasi_ceisa_master_po_item_tbl',{del:false,add:false,edit:false},{},{},{},{multipleSearch:false});
		jQuery("#pasi_ceisa_master_po_item_tbl").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true, defaultSearch: 'cn', ignoreCase: true});
	
	
		
	setTimeout(function(){
			setGridHight($("#pasi_ceisa_master_po_item_tbl"),$("#container_pasi_ceisa_master_po_item"),$("#pasi_ceisa_master_po_item_bar")); 
		},100); 
	});
		  	
</script>

	
	