<link rel="stylesheet" href="<?php echo base_url() ?>datatables/dataTables.bootstrap.css"/>
<script src="<?php echo base_url()?>datatables/jquery.dataTables.js"></script>
<script src="<?php echo base_url()?>datatables/dataTables.bootstrap.js"></script>
<style>
#scroll{
	width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}
</style>
<div class="container">
	<h2>Master Variable RTS</h2>
	<hr>
	<form class="form-horizontal">
	<input type="hidden" id="pilihan">
	  <div class="form-group">
		<label for="inputEmail3" class="col-sm-2 control-label">Filter Pencarian</label>
		<div class="col-sm-3">
		  <select class="form-control" id="filter_pencarian">
			<?php foreach($list_pencarian as $key=>$val){
				echo '<option value="'.$key.'">'.$val.'</option>';
			}?>
		  </select>
		</div>
		<div class="col-sm-3">
		  <select class="form-control" id="pilihan_filter"></select>
		  <input type="text" class="form-control" id="isian_filter" placeholder="Masukkan kata kunci"></select>
		</div>
	  </div>
	  <div class="form-group">
		<div class="col-sm-offset-2 col-sm-3">
		  <button type="button" id="proses" class="btn btn-default btn-sm">Proses</button>
		</div>
	  </div>
	</form>
	<div id="scroll">
	<table class="table table-bordered table-hover" id="mytable">
		<thead>
			<tr>
				<th width="80px">No</th>
				<?php echo $data_head_field;?>
			</tr>
		</thead>
	</table>
	</div>
</div>

<script type="text/javascript">
	$('#pilihan_filter').hide();
	$('#isian_filter').hide();

	$(document).ready(function() {
		
		$.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings)
		{
			return {
				"iStart": oSettings._iDisplayStart,
				"iEnd": oSettings.fnDisplayEnd(),
				"iLength": oSettings._iDisplayLength,
				"iTotal": oSettings.fnRecordsTotal(),
				"iFilteredTotal": oSettings.fnRecordsDisplay(),
				"iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
				"iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
			};
		};

		var t = $("#mytable").dataTable({
			bFilter: false, 
			initComplete: function() {
				var api = this.api();
				$('#mytable_filter input')
						.off('.DT')
						.on('keyup.DT', function(e) {
							if (e.keyCode == 13) {
								api.search(this.value).draw();
					}
				});
				
			
			},
			oLanguage: {
				sProcessing: "<img src='images/progress_bar.gif'>"
			},
			processing: true,
			serverSide: true,
			ajax: {"url": "<?php echo $this->uri->segment(1);?>/json", "type": "POST"},
			columns: [
				{
					"data": "ID",
					"orderable": false
				},
				<?php echo $data_field;?>
			],
			rowCallback: function(row, data, iDisplayIndex) {
				var info = this.fnPagingInfo();
				var page = info.iPage;
				var length = info.iLength;
				var index = page * length + (iDisplayIndex + 1);
				$('td:eq(0)', row).html(index);
			}
		});
		
		
		$('#pilihan_filter').hide();
		$('#isian_filter').hide();
		var list_jenis=	<?php echo ($jenis_pencarian);?>;
		$("#filter_pencarian").change(function(){

			var pilihan=list_jenis[$(this).val()];
			if(pilihan=='pilihan'){
				$("#pilihan").val('pilihan');
				$('#pilihan_filter').show();
				$('#isian_filter').hide();
				$.ajax({
					type: "POST",
					dataType: "html",
					url : "<?=base_url('master_data_rts/pilihan_detail_pencarian')?>",
					data: {id_variable:$(this).val()},
					success: function(response){
						$("#pilihan_filter").html(response);
					}
				});
			}else if(pilihan=='isian'){
				$("#pilihan").val('isian');
				$('#pilihan_filter').hide();
				$('#isian_filter').val('');
				$('#isian_filter').show();
			}else{
				$('#pilihan_filter').hide();
				$('#isian_filter').val('');
				$('#isian_filter').hide();
			}
		});
		
		
		function cari(){
			$.ajax({
				type: "POST",
				dataType: "html",
				url : "<?=base_url('master_data_rts/simpan_cari')?>",
				data: {filter_pencarian:$("#filter_pencarian").val(),pilihan:$("#pilihan").val(),pilihan_filter:$("#pilihan_filter").val(),isian_filter:$("#isian_filter").val()},
				success: function(response){
					t.fnDraw();
				}
			});
		}
		$("#proses").click(function(){
			cari();
		});
		
		$('#isian_filter').keypress(function (e) {
		  if (e.which == 13) {
			cari();
			return false;  
		  }
		});
		
		$(".dataTables_processing ").removeAttr("style");
		$(".dataTables_processing").removeClass("panel");
		$(".dataTables_processing").removeClass("panel-default");
	});
</script>

