<script type="text/javascript">	
$(document).ready(function() {
	$("#tabs").tabs({selected:0});
	$("#form").load('spv/users/form.php');
	$("#tampil_data").load('spv/users/tampil_data.php');
	
	$("#txt_cari").keyup(function() {
		var cari 	= $("#txt_cari").val();
		var level	= $("#txt_cari_level").val();

		$.ajax({
			type	: "GET",
			url		: "spv/users/tampil_data.php",
			data	: "cari="+cari,
			timeout	: 3000,
			beforeSend	: function(){		
				$("#tampil_data").html("<img src='loading.gif' />");			
			},				  
			success	: function(data){
				$("#tampil_data").html(data);
				$("#cari_txt_all").attr("checked","checked");
				$("#cari_txt_all").attr("checked","checked");
			}
		});
	});
	
	$(".cari_level").click(function() {
		var level = $(".cari_level:checked").val();
		
		$.ajax({
			type	: "GET",
			url	: "spv/users/tampil_data.php",
			data	: "level="+level,
			timeout	: 3000,
			beforeSend	: function(){		
				$("#tampil_data").html("<img src='loading.gif' />");			
			},				  
			success	: function(data){
				$("#tampil_data").html(data);
				$("#txt_cari").val('');
			}
		});
	});
});
</script>

<style type="text/css">
#info {
	font-size:12px;
	font-weight:bold;
	color:#F00;
}
</style>
<?php
echo "<div id='tabs'>";
echo "<ul >
	       <li><a href='#form'>INPUT PENGGUNA</a></li>
	       <li><a href='#data'>DAFTAR PENGGUNA</a></li>
      </ul>";
	echo "<div id='form'></div>";
	
	echo "<div id='data'>
			<div id='pencarian'>
			<fieldset>
			<legend>Filter Data</legend>
			<table width='100%'>
				<tr>
					<td width='6%'>Cari Kata</td>
					<td width='1%'>:</td>
					<td><input type='text' name='txt_cari' id='txt_cari' size='80'></td>
				</tr>
			</table>
			<table width='100%'>
				<tr>
					<td width='6%'>Level</td>
					<td width='1%'>:</td>
					<td><input type='radio' name='cari_txt_level' id='cari_txt_level' value='Administrator' class='cari_level' >Administrator 
						<input type='radio' name='cari_txt_level' id='cari_txt_level' value='Kasir_Retail' class='cari_level' >Kasir_Retail
						<input type='radio' name='cari_txt_level' id='cari_txt_level' value='Kasir_Grosir' class='cari_level' >Kasir_Grosir
						<input type='radio' name='cari_txt_level' id='cari_txt_level' value='Gudang' class='cari_level' >Gudang
						<input type='radio' name='cari_txt_level' id='cari_txt_level' value='MB' class='cari_level' >MB
						<input type='radio' name='cari_txt_level' id='cari_txt_level' value='all' class='cari_level' >All
					</td>
				</tr>	
			</table>
			</fieldset>
			</div><br>
			<div id='tampil_data' align='center' style='overflow-x: auto;height: 400px;scroll-behavior: smooth'></div>
	</div>";
	echo "<div id='info' align='center'></div>";
echo "</div>";
?>