<div id="container_pasi_ceimap_item_master_<?php echo $bc_prefix;  ?>sa" style="height:100%; margin:0px; padding:0px;overflow:'hidden'; border: 0px solid #cd0a0a">
  <table class ="tablefixed"   border="0">
		  <tr  class="tr70">
			<td  class="tdauto" valign="top"> 
			    <div class="pane-header ui-state-active" >::SOURCE</div>
				 <div  class="ui-layout-content ui-widget-content-panel">
				 <label class="lbfield55">ITEM CODE</label><label class="lbcolon">:</label><input id="pasi_ceimap_source_code"name="pasi_ceimap_source_code" type="text" value="<?php echo $source_code;  ?>" style="width:180px" readonly />
				 <label class="lbfield55">NAME</label><label class="lbcolon">:</label><input id="pasi_ceimap_source_name"name="pasi_ceimap_source_name" type="text" value="<?php echo $source_name;  ?>" style="width:500px"readonly /><br \>
					</div> 
			</td>
		  </tr>
		  <tr class="trauto" id="pasi_ceimap_tab_container" >
			<td class="tdauto"  >	
			 		<div id="pasi_ceimap_tab"   style="height:100%;margin-bottom:10px">
						<ul>
							<li><a id="pasi_ceimap_tab_list" href="#pasi_ceimap_tab_list_container">LIST</a></li>
							<li><a id="pasi_ceimap_tab_current" href="#pasi_ceimap_tab_current_container">LAST MAP</a></li>
						</ul> 
						<div   id="pasi_ceimap_tab_list_container" >
									<table id="pasi_ceimap_beli_item_tbl"></table> <div id="ppasi_ceimap_beli_item_tbl"></div>
							
						 </div>
						<div  id="pasi_ceimap_tab_current_container">
									<table id="pasi_ceimap_beli_item_tbl_current"></table> <div id="ppasi_ceimap_beli_item_tbl_current"></div>
							
						</div>
					</div> 
 			</td>
		  </tr>
		  <tr  class="tr80">
			<td  class="tdauto" valign="top">
			    <div class="pane-header ui-state-active" >::MAPPING TO</div>
				 <div  class="ui-layout-content ui-widget-content-panel">
				 <label class="lbfield55">TYPE</label><label class="lbcolon">:</label><input id="pasi_ceimap_mapping_item_type"name="pasi_ceimap_mapping_item_type" type="text" value="" style="width:200px" readonly />
				 <label class="lbfield55">CODE</label><label class="lbcolon">:</label><input id="pasi_ceimap_mapping_item_code"name="pasi_ceimap_mapping_item_code" type="text" value="" style="width:120px" readonly />
				 <label class="lbfield55">ITEM NO</label><label class="lbcolon">:</label><input id="pasi_ceimap_mapping_item_no"name="pasi_ceimap_mapping_item_no" type="text" value="" style="width:120px" readonly /><br \>
				 <label class="lbfield55">NAME</label><label class="lbcolon">:</label><input id="pasi_ceimap_mapping_item_name"name="pasi_ceimap_mapping_item_name" type="text" value="" style="width:600px" readonly />
				</div> 
			</td>
		  </tr>
		</table>  
</div> 

<script type="text/javascript">
    
    $(document).ready(function(){
	
		$pasi_ceimap_tab_select=0;
		
		$("#pasi_ceimap_tab" ).tabs({ heightStyle: "fill"});
		$("#pasi_ceimap_tab div.ui-tabs-panel").css('height', $("#fragment-1").height());
 
		$("#pasi_ceimap_tab").tabs("select", 0); 
	   // $('#pasi_ceimap_tab').resizable({
			 // handles: 's',
			 // alsoResize: '.ui-tabs-panel'
		 // });
	 
		
		
	$(window).bind('resize', function() {  
		setTimeout(function(){
			setGridHight($("#pasi_ceimap_beli_item_tbl"),$("#pasi_ceimap_tab_container"),$('#pasi_ceimap_tab ul.ui-tabs-nav').outerHeight(true)); 
	},10); 
	
	}); 
	
	// $('body').on('resize', function () {
        // $("#pasi_ceimap_tab" ).tabs('refresh');
    // });
	
   
	jQuery("#pasi_ceimap_beli_item_tbl").jqGrid({
			url:'<?php echo base_url().'pasi_ceisa_invoice/ct_invoice_beli_map/loaddata'; ?>',
			mtype : "post",
			postData:{'q':'1'},
			datatype: "json",
			colNames:[
			'vw_t_master_item_item_id','TYPE','CODE','ITEM NO','NAME','UOM','type_item_id'
			
			]
			,colModel:[
			{name:'rID',index:'rID', width:80, hidden:true , align :'left'}
			,{name:'r6',index:'r6', width:80, stype: 'select', search:true, searchoptions:{searchhidden: true, value: 			'-100:All;1:FINISH GOODS;2:MATERIAL;3:MECHINE;4:SPAREPART;5:EQUIPMENT;6:SCRAP'}} 
 			,{name:'r1',index:'r1', width:120, hidden:false, align :'left'}
			,{name:'r4',index:'r4', width:200, hidden:false, align :'left'} 
			,{name:'r2',index:'r2', width:350, hidden:false, align :'left'}
			,{name:'r3',index:'r3', width:40, hidden:false, align :'left'}
			,{name:'r5',index:'r5', width:80, hidden:true, align :'left'}
			],
			rowNum:10,
			rowList:[10,20,30],
			pager: '#ppasi_ceimap_beli_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_ceimap_tbl").jqGrid('setCell',rowid,'statusdok','',{color:'green'});
					break;
					case '2':
						jQuery("#pasi_ceimap_tbl").jqGrid('setCell',rowid,'statusdok','',{color:'red'});
					break;
					case '1':
						jQuery("#pasi_ceimap_tbl").jqGrid('setCell',rowid,'statusdok','',{color:'blue'});
					break;
					
				} */
			},		    
			onSelectRow: function(id){ 
				var ret = jQuery("#pasi_ceimap_beli_item_tbl").jqGrid('getRowData',id);    
					$("#pasi_ceimap_mapping_item_type").val(ret.r6);
 					$("#pasi_ceimap_mapping_item_code").val(ret.r1);
 					$("#pasi_ceimap_mapping_item_no").val(ret.r4);
 					$("#pasi_ceimap_mapping_item_name").val(ret.r2) ;
  		 	 },
			gridComplete: function(){
				 
			},
		}); 
		
	              
		jQuery("#pasi_ceimap_beli_item_tbl").jqGrid('navGrid','#ppasi_ceimap_beli_item_tbl',{del:false,add:false,edit:false},{},{},{},{multipleSearch:false});
		jQuery("#pasi_ceimap_beli_item_tbl").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true, defaultSearch: 'cn', ignoreCase: true});
	
	
	jQuery("#pasi_ceimap_beli_item_tbl_current").jqGrid({
			url:'<?php echo base_url().'pasi_ceisa_invoice/ct_invoice_beli_map/loaddatalast'; ?>',
			mtype : "post",
			postData:{'q':'1'},
			datatype: "local",
			colNames:[
			'vw_t_master_item_item_id','TYPE','CODE','ITEM NO','NAME','UOM','MAP DATE','type_item_id'
			
			]
			,colModel:[
			{name:'rID',index:'rID', width:80, hidden:true , align :'left'}
			,{name:'r6',index:'r6', width:80, stype: 'select', search:true, searchoptions:{searchhidden: true, value: 			'-100:All;1:FINISH GOODS;2:MATERIAL;3:MECHINE;4:SPAREPART;5:EQUIPMENT;6:SCRAP'}} 
 			,{name:'r1',index:'r1', width:120, hidden:false, align :'left'}
			,{name:'r4',index:'r4', width:200, hidden:false, align :'left'} 
			,{name:'r2',index:'r2', width:300, hidden:false, align :'left'}
			,{name:'r3',index:'r3', width:40, hidden:false, align :'left'}
 			,{name:'r7',index:'r7', width:120, hidden:false, align :'left', searchoptions:{searchhidden: true,dataInit:function(el){$(el).datepicker({onSelect: function(date){jQuery("#pasi_ceimap_beli_item_tbl_current")[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:'r5',index:'r5', width:120, hidden:true, align :'left'}
			],
			rowNum:10,
			rowList:[10,20,30],
			pager: '#ppasi_ceimap_beli_item_tbl_current',
			sortname: 'r7',
			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_ceimap_tbl_current").jqGrid('setCell',rowid,'statusdok','',{color:'green'});
					break;
					case '2':
						jQuery("#pasi_ceimap_tbl_current").jqGrid('setCell',rowid,'statusdok','',{color:'red'});
					break;
					case '1':
						jQuery("#pasi_ceimap_tbl_current").jqGrid('setCell',rowid,'statusdok','',{color:'blue'});
					break;
					
				} */
			},		    
			onSelectRow: function(id){ 
				var ret = jQuery("#pasi_ceimap_beli_item_tbl_current").jqGrid('getRowData',id);    
					$("#pasi_ceimap_mapping_item_type").val(ret.r6);
 					$("#pasi_ceimap_mapping_item_code").val(ret.r1);
 					$("#pasi_ceimap_mapping_item_no").val(ret.r4);
 					$("#pasi_ceimap_mapping_item_name").val(ret.r2) ;
  		 	 },
			gridComplete: function(){
				 
			},
		}); 
		
	              
		jQuery("#pasi_ceimap_beli_item_tbl_current").jqGrid('navGrid','#ppasi_ceimap_beli_item_tbl_current',{del:false,add:false,edit:false},{},{},{},{multipleSearch:false});
		jQuery("#pasi_ceimap_beli_item_tbl_current").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true, defaultSearch: 'cn', ignoreCase: true});

		setTimeout(function(){
		 	setGridHight($("#pasi_ceimap_beli_item_tbl"),$("#pasi_ceimap_tab_container"),$("#pasi_ceimap_tab .ui-tabs-nav"),20); 
	 	},100);
	 	
		$('#pasi_ceimap_tab').bind('tabsselect', function(event, ui) {
			 
			$pasi_ceimap_tab_select=ui.index;
 			if(($pasi_ceimap_tab_select==0) )
			{
				setTimeout(function(){
					setGridHight($("#pasi_ceimap_beli_item_tbl"),$("#pasi_ceimap_tab_container"),$("#pasi_ceimap_tab .ui-tabs-nav"),20); 
				},50);
	 	
			}else
 	 		if(($pasi_ceimap_tab_select==1) )
			{
				setTimeout(function(){
					setGridHight($("#pasi_ceimap_beli_item_tbl_current"),$("#pasi_ceimap_tab_container"),$("#pasi_ceimap_tab .ui-tabs-nav"),20); 
				},50);
				
				var postData={
					item_code :'<?php echo $source_code;  ?>',
					item_name :'<?php echo $source_name;  ?>',
					bc_prefix  : '<?php echo $bc_prefix;  ?>'
				};
				$("#pasi_ceimap_beli_item_tbl_current").jqGrid('setGridParam',{postData:postData,datatype:'json'});
				$("#pasi_ceimap_beli_item_tbl_current").trigger("reloadGrid");
		
			}	 
		});	
 
	});
		  	
</script>

	
	