<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Survey Assestment</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	
	<link rel="shortcut icon" href="<?php echo ASSETS_URL;?>images/favicon.ico" type="image/x-icon" />
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="<?php echo ASSETS_URL;?>bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="<?php echo ASSETS_URL;?>plugins/bootstrap-dialog/bootstrap-dialog.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="<?php echo ASSETS_URL;?>font-awesome/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="<?php echo ASSETS_URL;?>ionicons/css/ionicons.min.css">
    <!-- JQueryUI -->
	<link href="<?php echo ASSETS_URL;?>plugins/jQueryUI/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
    <!-- Theme style -->
    <link rel="stylesheet" href="<?php echo ASSETS_URL;?>AdminLTE/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="<?php echo ASSETS_URL;?>AdminLTE/css/skins/_all-skins.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- Source Javascript -->
    <!-- jQuery 2.1.4 -->
    <script src="<?php echo ASSETS_URL;?>plugins/jQuery/jQuery-2.1.4.min.js"></script>
	<script src="<?php echo ASSETS_URL;?>plugins/jQueryUI/jquery-ui-1.10.4.custom.min.js"></script>
    <!-- Bootstrap 3.3.5 -->
    <script src="<?php echo ASSETS_URL;?>bootstrap/js/bootstrap.min.js"></script>
    <script src="<?php echo ASSETS_URL;?>plugins/bootstrap-dialog/bootstrap-dialog.min.js"></script>
    <!-- SlimScroll -->
    <script src="<?php echo ASSETS_URL;?>plugins/slimScroll/jquery.slimscroll.min.js"></script>

	<script src="<?php echo ASSETS_URL;?>plugins/form/jquery.validate.js"></script>
	<script src="<?php echo ASSETS_URL;?>plugins/form/jquery.form.js"></script>
	<link rel="stylesheet" href="<?php echo ASSETS_URL;?>plugins/select2/select2.min.css" type="text/css"/>
	<script src="<?php echo ASSETS_URL;?>plugins/select2/select2.min.js"></script>

	<link rel="stylesheet" href="<?php echo ASSETS_URL;?>plugins/iCheck/square/blue.css" type="text/css"/>
	<script src="<?php echo ASSETS_URL;?>plugins/iCheck/icheck.min.js"></script>

	<script src="<?php echo ASSETS_URL;?>plugins/jquery.anystretch.min.js"></script>
	<script src="<?php echo ASSETS_URL;?>plugins/jquery.wizard.js"></script>

	<style type="text/css">
		#ubah ol { font-size:12pt;}
	</style>
  </head>
	<body style="overflow: visible;">
		<div class="wrapper">
			<div class="container">
				<div class="row" align="center" style="margin:7.5px 0px">
					<div id="logo" class="col-md-offset-3 col-md-6">
						<img width="215" height="135" data-retina="true" alt="Logo" src="<?php echo ASSETS_URL;?>images/esq.png">
					</div>					
				</div> <!-- end row -->
			</div> <!-- ./container -->
			
			<section class="container" > <!-- start review container -->
				<div class="row">
					<div class="col-md-12">
						<div class="box box-solid box-primary box-ubah">
							<div class="box-header" align="center">
								<h3 class="box-title">PERTANYAAN</h3>
							</div>  <!-- ./box-header -->
							
							<div class="box-body" id="example-1">

								<div id="top-wizard" align="center">
									<strong>Progress <span id="location"></span></strong>
									<div id="progressbar"></div>
									<div class="shadow"></div>
								</div> <!-- end top-wizard -->
								
								<form name="example-1" id="wrapped" method="POST" action="<?php echo site_url('survey/review_send/');?>" class="form-horizontal" >

									<div class="step">
										<br/>
										<div class="form-group">
											<label class="col-md-4 labelme">Name <span class="text-red">*</span></label>
											<div class="col-md-8">
												<input type="text" name="nama" id="nama" required class="form-control">
											</div>								
										</div>
										<div class="form-group">
											<label class="col-md-4 labelme">Usia <span class="text-red">*</span></label>
											<div class="col-md-8">
												<input type="text" name="usia" id="usia" required class="form-control" data-rule-digits="true">
											</div>								
										</div>
										<div class="form-group">
											<label class="col-md-4 labelme">Jenis kelamin <span class="text-red">*</span></label>
											<div class="col-md-8">
												<?php
												$gender = array('F'=> 'Female','M'=> 'Male',);
												echo form_dropdown('gender',$gender,'M','id="gender" class="form-control gender"  style="width: 100%" required');
												?>
											</div>								
										</div>
										<div class="form-group">
											<label class="col-md-4 labelme">Nama Perusahaan <span class="text-red">*</span></label>
											<div class="col-md-8">
												<input type="text" name="f_customer_name" id="f_customer_name" required class="form-control" readonly>
											</div>								
										</div>
										<div class="form-group">
											<label class="col-md-4 labelme">Tanggal Tes <span class="text-red">*</span></label>
											<div class="col-md-8">
												<input type="text" name="tanggal" id="tanggal" required class="form-control" value="<?php echo date('Y-m-d');?>" data-rule-dateISO="true">
											</div>								
										</div>
										<div class="form-group">
											<label class="col-md-4 labelme">Email <span class="text-red">*</span></label>
											<div class="col-md-8">
												<input type="text" name="email" id="email" required class="form-control">
											</div>								
										</div>
										<div class="form-group">
											<label class="col-md-4 labelme">Handphone <span class="text-red">*</span></label>
											<div class="col-md-8">
												<input type="text" name="hp" id="hp" required class="form-control" data-rule-digits="true">
											</div>								
										</div>
										<br/><br/>
									</div>
				
									<?php echo template_soal();?>
				
									<div id="bottom-wizard" align="center"  class="navigation clearfix">
										<button type="button" name="backward" class="btn backward"><i class="fa fa-angle-left" aria-hidden="true"></i> Backward</button>
										<button type="button" name="forward" class="btn forward">Forward <i class="fa fa-angle-right" aria-hidden="true"></i></button>
										<button type="submit" name="process" id="submit" class="submit btn btn-success"><i class="fa fa-send-o" aria-hidden="true"></i> Submit</button>
									</div><!-- end bottom-wizard -->

								
								</form>
								
							</div>  <!-- ./box-body -->

							<div class="box-foot">

							</div>  <!-- ./box-foot -->
							
						</div>  <!-- ./box -->
					</div>  <!-- ./col -->
				</div>  <!-- ./row -->
			</section>	 <!-- ./container -->
		</div> <!-- ./wrapper -->
		
<script type="text/javascript">
	    var infoDialog = new BootstrapDialog({
			onshown: function(dialogRef) {
					setTimeout(function(){
		               dialogRef.close();
		          }, 1500);                          
		    },		
		});

$(document).ready(function(){
	//$('#myDemograp').modal('show');
	$('#progressbar').progressbar();

	$('#submit').hide();
	$( "#example-1" ).wizard({
		stepsWrapper: "#wrapped",
		submit: ".submit",
		beforeForward: function( event, state ) {
			return !!$( this ).wizard( "form" ).valid();
		},
		afterSelect: function( event, state ) {
			console.log(state.percentComplete+' '+state.stepsComplete+' '+state.stepsPossible);
			$( "#progressbar" ).progressbar( "value", state.percentComplete );
			$( "#location" ).text( "(" + state.stepsComplete + "/" + state.stepsPossible + ")" );
			$('html, body').animate({ scrollTop: $("section.container").offset().top   }, 2000);
			if(state.stepsComplete == 2)
			{
				$('#submit').show().removeAttr('disabled');;
			}
			else
			{
				$('#submit').hide().attr('disabled','disabled');
			}
		}
	})
	.wizard( "form" ).submit(function( event ) {
		$(".box-ubah").append('<div class="overlay"><i class="fa fa-refresh fa-spin"></i></div>');
		event.preventDefault();
		//alert( "Form submitted!" );
		var url = "<?php echo site_url('survey/saveData');?>";
		var rec = $('#wrapped').serializeArray();
		var oForm = $('#wrapped');
		if(oForm[0].checkValidity()) {
			//alert( "Form submitted!" );
			$.post(url, rec, function(msg){
				if(msg.status== 'ok')
				{
					$("#example-1").html("<center><h1>Success</h1></center>");
					$('.overlay').remove();
				}
				else
				{
					infoDialog.realize();
					infoDialog.setTitle('Info').setMessage('<center>Gagal !!</center>').setType(BootstrapDialog.TYPE_DANGER).open();
					$('.overlay').remove();
				}
			}, 'json').fail(function(e){
					infoDialog.realize();
					infoDialog.setTitle('Info').setMessage('<center>'+e.statusText+'</center>').setType(BootstrapDialog.TYPE_DANGER).open();
					$('.overlay').remove();				
				});
		}
		else
		{
			infoDialog.realize();
			infoDialog.setTitle('Info').setMessage('<center>Data tidak lengkap. Coba lagi !!</center>').setType(BootstrapDialog.TYPE_DANGER).open();
			$('.overlay').remove();
		}
		
		//$("#wrapped").ajaxSubmit({
			//url: "<?php echo site_url('survey/saveData');?>",
			//type: 'post',
			//data: rec,
			//dataType: 'json',
			//success: function(data){
				//if(data.status == 'ok')
				//{
					//$(".box-title").text('Multiple Intelligences Test Result- based on Howard Gardner\'s MI Model');  
					//$("#ubah").html(data.view);
					//$('.overlay').remove();
				//}
				//else
				//{
					//alert('__GAGAL__');
					//$('.overlay').remove();
				//}
			//},
			//error: function(){
				//alert('__GAGAL__');
				//$('.overlay').remove();
			//}
		//});
	})
	.validate({
		errorPlacement: function( error, element ) {
			if ( element.is( ":radio" ) || element.is( ":checkbox" ) ) {
				error.insertBefore( element.next() );

			} else {
				error.insertAfter( element );
			}
		},
		highlight: function(element, errorClass, validClass) {
			$(element).parents('.form-group').removeClass('has-success').addClass('has-error');
		},
		unhighlight: function(element, errorClass, validClass) {
			$(element).parents('.form-group').removeClass('has-error').addClass('has-success');
		}
	});

	$("#gender").select2({
		placeholder: "Pilih Jenis Kelamin",
		allowClear: false,
		minimumResultsForSearch: Infinity,
	});

	$('#tanggal').datepicker({
		dateFormat: "yy-mm-dd",
		regional: "id",
	});
	
	//$('#soal').slimScroll({
        //height: '325px'
    //});	

	$(':input[type="radio"]').iCheck({
		checkboxClass: 'icheckbox_square-blue',
		radioClass: 'iradio_square-blue',
		increaseArea: '20%' // optional
	});
	
	//$('#formSoal').validate({
		//submitHandler: function(form) {
			//var rec = $('#formSoal').serializeArray();
			//$('.box').append('<div class="overlay"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div>');
			//$(form).ajaxSubmit({
				//url: "<?php echo site_url('survey/saveData');?>",
				//type: 'post',
				//data: rec,
				//dataType: 'json',
				//success: function(data){
					//if(data.status == 'ok')
					//{
						//$(".box-title").text('Multiple Intelligences Test Result- based on Howard Gardner\'s MI Model');  
						//$("#ubah").html(data.view);
						//$('.overlay').remove();
					//}
					//else
					//{
						//alert('__GAGAL__');
						//$('.overlay').remove();
					//}
				//},
				//error: function(){
					//alert('__GAGAL__');
					//$('.overlay').remove();
				//}
			//});
		//},
		//errorPlacement: function(error, element) { 
			//if ( element.is(':radio') || element.is(':checkbox') ) {
				//error.insertAfter( '#c'+element.context.id );;
			//} 
			//else { 
				//error.insertAfter( element );
			//}
		//},
		//highlight: function(element, errorClass, validClass) {
			//$(element).parents('.form-group').removeClass('has-success').addClass('has-error');
		//},
		//unhighlight: function(element, errorClass, validClass) {
			//$(element).parents('.form-group').removeClass('has-error').addClass('has-success');
		//}
	//});


//		$(this).prop('disabled', true);
//		$("#submit-button i").attr('class','fa fa-cog fa-spin fa-1x fa-fw'); 
	
})
</script>		
	</body>  
</html>  
