<div class="jarviswidget" id="wid-id-4" data-widget-colorbutton="false" data-widget-editbutton="false">
				<!-- widget options:
				usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-togglebutton="false"
				data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false"
				data-widget-custombutton="false"
				data-widget-collapsed="true"
				data-widget-sortable="false"

				-->
				<header>
					<!-- <span class="widget-icon"> <i class="fa fa-eye"></i> </span>-->
					<h2>Reporting Transaksi Siswa</h2>

				</header>

				<!-- widget div-->
				<div>

					<!-- widget edit box -->
					<div class="jarviswidget-editbox">
						<!-- This area used as dropdown edit box -->

					</div>
					<!-- end widget edit box -->

					<!-- widget content -->
					<div class="widget-body">

						<!--<div class="alert adjusted alert-info fade in">
							<button class="close" data-dismiss="alert">
								×
							</button>
							<i class="fa-fw fa-lg fa fa-exclamation"></i>
							<strong>Hey hey!</strong> This is an inline form!
						</div>-->
						<div class="well">
						<form class="form-inline" id="rep-form" action="<?php echo @$action; ?>" method="post" >
							
							<fieldset>
                            <div class="form-group">
							
                            	<div class="form-group">
									<div class="col-md-10">
										<?php echo $nama_smk; ?>
									</div>									
								</div>
                                
                                <div class="form-group">
									<div class="col-md-10">
										<?php echo $mappingJur; ?>
									</div>									
								</div>
                                
								<div class="form-group">
									<div class="col-md-10">
										<?php echo $kelas; ?>
									</div>									
								</div>
                                
                                <div class="form-group">
									<div class="col-md-10">
										<?php echo $ruang; ?>
									</div>									
								</div>
                                					
								</div>
								<button type="submit" class="btn btn-primary">
									Cari
								</button>
							</fieldset>							
						</form>
						</div>
						<br>
						<?php echo $excell; ?>
						<br>
						<br>
						<div id="value-tr" class="table-responsive" style="max-height:550px;">
								
						</div>
						
					</div>
					<!-- end widget content -->
				</div>
				<!-- end widget div -->
			</div>
			<!-- end widget -->
<script>
function cekKelas(id_smk, id_jur) {
		$.ajax({
			type:"POST",
			dataType: "html",
			beforeSend : function() {
				$("#id-MappingKls").html("Populating data, please wait..");
			},
			url : "<?php echo site_url("/") . $controller . "/cekKelas"; ?>",
			data : "id_smk="+id_smk+"&&id_jur="+id_jur,
			success:function(msg){
				$("#id-MappingKls").html(msg);
			},
			error:function(){
				alert("Load failed");
			}
		});
	}
	
function getRuang(kelas, id_mapping_jur) {
		$.ajax({
			type:"POST",
			dataType: "html",
			beforeSend : function() {
				$("#id-Mapping").html("Populating data, please wait..");
			},
			url : "<?php echo site_url("/") . $controller . "/getRuang"; ?>",
			data : "kelas="+kelas+"&&id_mapping_jur="+id_mapping_jur,
			success:function(msg){
				$("#id-MappingRuang").html(msg);
			},
			error:function(){
				alert("Load failed");
			}
		});
	}
	
function getJurusan(smk) {
		$.ajax({
			type:"POST",
			dataType: "html",
			beforeSend : function() {
				$("#id-MappingJur").html("Populating data, please wait..");
			},
			url : "<?php echo site_url("/") . $controller . "/getJurusan"; ?>",
			data : "smk="+smk,
			success:function(msg){
				$("#id-MappingJur").html(msg);
			},
			error:function(){
				alert("Load failed");
			}
		});
	}
	$(function() {
		$('#periode').datetimepicker({
			format: 'YYYY-MM-DD'
		});
		
		$('#until').datetimepicker({
			format: 'YYYY-MM-DD'
		});
		$(".chosen-select").chosen();	
		// Validation
		$("#rep-form").validate({
			// Rules for form validation
			rules : {
				periode : {
					required : true							
				}/* ,
				until : {
					required : true
				} */
			},
			
			submitHandler : function(form) {
				
				$(form).ajaxSubmit({
					/* beforeSubmit: function() {
						$("#button_id").append('<i class="fa fa-gear fa-1x fa-spin">');
					}, */
					dataType: 'html',
					success : function(msg) {
						 $("#value-tr").html(msg);
						//alert("tes");
						/* if (msg.msg == "noauth") {
							window.location = base_url;
						}
						else if (msg.error == true) {
							write_error_html(msg.field);
							
							//button manipulating
							$("#hiddenElement").val("true");
							$(".fa-spin").remove();
							$("#cancel").removeAttr("disabled");
							$("#button_id").removeAttr("disabled");
						} else {
							window.location.hash = base_url + 'create_agent/';
						} */
					}
				});
				
			},

			// Messages for form validation
			messages : {
				periode : {
					required : 'Pilih Tanggal Awal Transaksi'
						
				}/* ,
				until : {
					required : 'Pilih Tanggal Akhir Transaksi'
						
				} */
			},

			// Do not change code below
			errorPlacement : function(error, element) {
				error.insertAfter(element.parent());
			}
		});
	});
</script>			