 <div id="container_Reportbc27" style="height:100%; margin:0px; padding:0px;overflow:'hidden'; border: 0px solid #cd0a0a">
	<div class="pane-header ui-state-active" id="Reportbc27_bar" >   
			<label style="margin-right:10px;">SOURCE</label>
				<select id="cb_datadok_bw27" style="margin-right:10px;width:80px" >
				  <option value="all" selected>ALL</option>
				  <option value="aw">AW</option>
				  <option value="wh">WH</option>
			</select>
			<label style="margin-right:10px;">PERIODE:</label>
			 <input id="txtStartReportbc27" type="text" value='<?php echo $start_date; ?>' style="margin-right:10px;width:80px" />
			 <label style="margin-right:10px;">S/D :</label>
			 <input id="txtEndReportbc27" type="text" value='<?php echo $end_date; ?>' style="margin-right:10px;width:80px" />
			 <button id="btnSearchReportbc27" >SEARCH</button>
			 <button id="btnPrintReportbc27PDF"  >PRINT PDF</button> 
			 <button id="btnPrintReportbc27XLX"  >PRINT XLS</button> 
			 <button id="btnPrintReportbc27XLXS" >PRINT XLSX</button>  
	</div>
	 <table id="tblReportbc27"  /><div id="ptblReportbc27"/> 
</div> 

<script> 
  $(document).ready(function(){ 
	$(window).bind('resize', function() {   
		 setTimeout(function(){
		 setGridHight($("#tblReportbc27"),$("#container_Reportbc27"),$("#Reportbc27_bar")); 
  		},10); 
	}) ;
	
	$("#btnSearchReportbc27").button();
	$("#btnPrintReportbc27PDF").button();
	$("#btnPrintReportbc27XLX").button(); 
	$("#btnPrintReportbc27XLXS").button(); 
 
    $( "#txtEndReportbc27" ).datepicker({
		dateFormat:'yy-mm-dd',
		defaultDate: "+1w",
		changeMonth: true,
		changeYear: true,
		numberOfMonths: 4,
		onClose: function( selectedDate ) {
		//$( "#txtStartReportbc27" ).datepicker( "option", "maxDate", selectedDate );
		}
    });
	 
	$( "#txtStartReportbc27" ).datepicker({
		dateFormat:'yy-mm-dd',
		defaultDate: "+1w",
		changeMonth: true,
		changeYear: true,
		numberOfMonths: 4,
		onClose: function( selectedDate ) {
		$( "#txtEndReportbc27" ).datepicker( "option", "minDate", selectedDate );
		}
    });
	
    
	$("#btnSearchReportbc27").click(function(){ 
		var	start_date 	=	$.datepicker.formatDate('yymmdd', new Date($("#txtStartReportbc27").val())) ; 
	 	var end_date	=	$.datepicker.formatDate('yymmdd', new Date($("#txtEndReportbc27").val())) ; 
		jQuery("#tblReportbc27").jqGrid('setGridParam', { postData: {start_date : start_date, end_date : end_date,source:$("#cb_datadok_bw27").val() } });
		$('#tblReportbc27').trigger( 'reloadGrid' );
	});
	
	function reportPrint(format){
 		var	start_date 	=	$.datepicker.formatDate('yymmdd', new Date($("#txtStartReportbc27").val())) ;
		var end_date	=	$.datepicker.formatDate('yymmdd', new Date($("#txtEndReportbc27").val())) ;
		var source	=	$("#cb_datadok_bw27").val();
		
		var dialog = jQuery('<div />')
					 .html('<div class="ui-layout-content ui-widget-content-panel">\
									<p >Are u want to print report?</p>\
								   </div>\
									<div class="pane-footer ui-state-default"></div>\
									<form hidden id="frmPrintReportbc27" method="POST" action="<?php echo base_url().'reports/ct_monthlyreport/print_bc27'; ?>"/>');  
		dialog.dialog({
				modal:true,
				width : 300,
				height : 150,
				title :'Report bc27',
				buttons: { 
					"CLOSE": function(){
						dialog.dialog("close");  
					},
					"PRINT": function() { 
					
 					$("#frmPrintReportbc27").append($("<input>").attr({"value":start_date , "name":'start_date'})); 
					$("#frmPrintReportbc27").append($("<input>").attr({"value":end_date , "name":'end_date'}));  
					$("#frmPrintReportBC23").append($("<input>").attr({"value":source , "name":'source'}));
					$("#frmPrintReportbc27").append($("<input>").attr({"value":format , "name":'format'}));  
					$("#frmPrintReportbc27").submit();  
					
					dialog.dialog("close");  
					}
				},
				close : function(){
					dialog.dialog('destroy').remove(); 
				},
				open: function(){
					$("body").unblock(); 
				}
			}); 
	
	} 

	$("#btnPrintReportbc27PDF").button().click(function(){	
		reportPrint('pdf');
 	})	
 	$("#btnPrintReportbc27XLX").button().click(function(){	
		reportPrint('xls');
 	})	
 	$("#btnPrintReportbc27XLXS").button().click(function(){	
		reportPrint('xlsx');
 	})	
  
	jQuery("#tblReportbc27").jqGrid({
	   url:'<?php echo base_url().'reports/ct_monthlyreport/load_bc27'; ?>',
                mtype : "post",
				postData:{'q':'1','start_date':'<?php echo $start_date_grid;?>','end_date':'<?php echo $end_date_grid;?>'},
			   datatype: "json",
                colNames:['AJU'
				,'DAFTAR'
				,'TANGGAL'
				,'TGL PEMASUKAN'
				,'KB PENGIRIM'
				,'KP B/C'
				,'KET.'
				,'INVOICE'
				,'JENIS'
				,'JUMLAH'
				,'STN'
				,'AMOUNT USD'
				,'GROSS KG'
				,'JUMLAH'
				,'JENIS'
				],
                colModel:[ 
                    {name:'r1',index:'r1', width:200},
                    {name:'r2',index:'r2', width:90},  
                    {name:'r3',index:'r3', width:90},  
                    {name:'r4',index:'r4', width:90,align:'right'},  
                    {name:'r5',index:'r5', width:90},  
					{name:'r6',index:'r6', width:90},
					{name:'r7',index:'r7', width:100},
					{name:'r8',index:'r8', width:90},
					{name:'r9',index:'r9', width:90},
					{name:'r10',index:'r10', width:90},
					{name:'r11',index:'r11', width:90},
					{name:'r12',index:'r12', width:90},
					{name:'r13',index:'r13', width:90},
					{name:'r14',index:'R14', width:90},
					{name:'r15',index:'r15', width:90},
					//{name:'r16',index:'r16', width:90},
                ],
	    rowNum:15,
		rowList:[10,15,20,30,50,100],
		pager: '#ptblReportbc27',
		sortname: 'r1',
	 	sortorder: "asc",
		shrinkToFit:false,
		autowidth: false,           
		width: '',
		height: 100,
 		rownumbers:true,
 		jsonReader: { repeatitems : false }, 
		viewrecords : true,  
		gridview:true
	}); 
	 	
	jQuery("#tblReportbc27").jqGrid('setGroupHeaders', 
          { useColSpanStyle: true, groupHeaders:[
            {startColumnName: 'r1', numberOfColumns: 3, titleText: '<em><center>REGISTER</center></em>'} 
			//,{startColumnName: 'r3', numberOfColumns: 2, titleText: '<em><center>PEB</center></em>'}
			,{startColumnName: 'r9', numberOfColumns: 3, titleText: '<em><center>URAIAN BARANG</center></em>'}
			,{startColumnName: 'r14', numberOfColumns: 2, titleText: '<em><center>KEMASAN</center></em>'}
			] 
			});

 	jQuery("#tblReportbc27").jqGrid('navGrid','#ptblReportbc27',{edit:false,add:false,del:false,view:true});  
	jQuery("#tblReportbc27").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false, defaultSearch: 'cn', ignoreCase: false}); 
	
	 setTimeout(function(){
		 setGridHight($("#tblReportbc27"),$("#container_Reportbc27"),$("#Reportbc27_bar")); 
	},10); 
 	
});

</script> 

  