<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ARS</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/Logo-ESQMPP-02.png" 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;}
		body {
		    background: #ffffff url("<?php echo ASSETS_URL;?>images/background_mpp.jpg") repeat right top;
		}
	</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-6" align="left">
<!--
						<img width="300" height="105" data-retina="true" alt="Logo" src="<?php echo ASSETS_URL;?>images/logo_mpp.png">
-->
					</div>					
					<div id="logo" class="col-md-6" align="right">
						<img width="255" height="105" data-retina="true" alt="Logo" src="<?php echo ASSETS_URL;?>images/logo_ars.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">BIODATA</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">
										<div class="col-md-12" align="left">
											<span class="lead">Isilah secara lengkap.</span>
										</div>
										<br/><br/>
										<div class="form-group">
											<label class="col-md-4 labelme">Nama Lengkap <span class="text-red">*</span></label>
											<div class="col-md-8">
												<input type="text" name="nama" id="nama" required class="form-control" placeholder="Name ..." >
											</div>								
										</div>
										<div class="form-group">
											<label class="col-md-4 labelme">Tanggal Lahir <span class="text-red">*</span></label>
											<div class="col-md-8">
												<input type="text" name="usia" id="usia" required class="form-control" data-rule-dateISO="true" placeholder="Tanggal Lahir ...">
											</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('L'=> 'Laki-Laki','P'=> 'Perempuan',);
												echo form_dropdown('gender',$gender,'L','id="gender" class="form-control gender"  style="width: 100%" required');
												?>
											</div>								
										</div>
										<div class="form-group">
											<label class="col-md-4 labelme">Alamat</label>
											<div class="col-md-8">
												<input type="text" name="f_address" id="f_address" class="form-control" placeholder="Alamat ...">
											</div>								
										</div>
										<div class="form-group">
											<label class="col-md-4 labelme">Perusahaan / Intansi </label>
											<div class="col-md-8">
												<input type="text" name="f_customer_name" id="f_customer_name" required class="form-control" value="<?php echo $namecompany;?>" 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">Perusahaan / Intansi <span class="text-red">*</span></label>
											<div class="col-md-8">
												<input type="text" name="perusahaan" id="perusahaan" required class="form-control" placeholder="Perusahaan / Intansi ...">
											</div>								
										</div>
-->
										<div class="form-group">
											<label class="col-md-4 labelme">Bagian / Jabatan <span class="text-red">*</span></label>
											<div class="col-md-8">
												<input type="text" name="jabatan" id="jabatan" required class="form-control" placeholder="Bagian / Jabatan ...">
											</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" placeholder="Email ..." data-rule-email="true">
											</div>								
										</div>
										<div class="form-group">
											<label class="col-md-4 labelme">Telephone / HP <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" placeholder="Handphone ...">
											</div>								
										</div>
										<div class="form-group">
											<label class="col-md-4 labelme">Facebook / Instagram</label>
											<div class="col-md-8">
												<input type="text" name="f_sosmed" id="f_sosmed" class="form-control" placeholder="Sosial Media ...">
											</div>								
										</div>
										<div class="form-group">
											<label class="col-md-4 labelme">Apakah sudah mempunyai Usaha / Bisnis <span class="text-red">*</span></label>
											<div class="col-md-8">
												<input type="radio" name="f_bisnis" id="f_bisnis" class="form-control f_bisnis" Value="Ya" required> YA 
												&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
												<input type="radio" name="f_bisnis" id="f_bisnis" class="form-control f_bisnis" value="Tidak" required> Tidak
											</div>								
											<div class="pesan_f_bisnis"></div>								
										</div>
										<div class="form-group" id="punya_bisnis">
											<label class="col-md-4 labelme">Jenis Usaha / Aktivitas yang sudah dijalani</label>
											<div class="col-md-8">
												<input type="checkbox" name="f_bisnis1[]" id="f_bisnis1" class="f_bisnis1" value="Kuliner / Makanan"> Kuliner / Makanan<br/>
												<input type="checkbox" name="f_bisnis1[]" id="f_bisnis1" class="f_bisnis1" value="Perkebunan"> Perkebunan<br/>
												<input type="checkbox" name="f_bisnis1[]" id="f_bisnis1" class="f_bisnis1" value="Perikanan"> Perikanan<br/>
												<input type="checkbox" name="f_bisnis1[]" id="f_bisnis1" class="f_bisnis1" value="Peternakan"> Peternakan<br/>
												<input type="checkbox" name="f_bisnis1[]" id="f_bisnis1" class="f_bisnis1" value="Retail / Berdagang"> Retail / Berdagang<br/>
												<input type="checkbox" name="f_bisnis1[]" id="f_bisnis1" class="f_bisnis1" value="Properti / Kost an"> Properti / Kost an<br/>
												<input type="checkbox" name="f_bisnis11" id="f_bisnis11" class="f_bisnis11" value="Profesi"> Profesi : <input type="text" name="f_profesi" id="f_profesi" class="form-control" placeholder="Profesi ..." disabled style="width:40%;display:inline-table;"><br/>
												<input type="checkbox" name="f_bisnis12" id="f_bisnis12" class="f_bisnis12" value="Lainnya"> Lainnya : <input type="text" name="f_lain" id="f_lain" class="form-control" placeholder="Lainnya ..." disabled style="width:40%;display:inline-table;"><br/>
											</div>								
										</div>
										<div class="form-group">
											<label class="col-md-4 labelme">Minat / Rencana usaha saat pensiun</label>
											<div class="col-md-8">
												<input type="checkbox" name="f_bisnis2[]" id="f_bisnis2" class="f_bisnis2" value="Kuliner / Makanan"> Kuliner / Makanan<br/>
												<input type="checkbox" name="f_bisnis2[]" id="f_bisnis2" class="f_bisnis2" value="Perkebunan"> Perkebunan<br/>
												<input type="checkbox" name="f_bisnis2[]" id="f_bisnis2" class="f_bisnis2" value="Perikanan"> Perikanan<br/>
												<input type="checkbox" name="f_bisnis2[]" id="f_bisnis2" class="f_bisnis2" value="Peternakan"> Peternakan<br/>
												<input type="checkbox" name="f_bisnis2[]" id="f_bisnis2" class="f_bisnis2" value="Retail / Berdagang"> Retail / Berdagang<br/>
												<input type="checkbox" name="f_bisnis2[]" id="f_bisnis2" class="f_bisnis2" value="Properti / Kost an"> Properti / Kost an<br/>
												<input type="checkbox" name="f_bisnis2[]" id="f_bisnis2" class="f_bisnis2" value="Bisnis Online"> Bisnis Online<br/>
												<input type="checkbox" name="f_bisnis21" id="f_bisnis21" class="f_bisnis21" value="Profesi"> Profesi : <input type="text" name="f_profesi2" id="f_profesi2" class="form-control" placeholder="Profesi ..." disabled style="width:40%;display:inline-table;"><br/>
												<input type="checkbox" name="f_bisnis22" id="f_bisnis22" class="f_bisnis22" value="Lainnya"> Lainnya : <input type="text" name="f_lain2" id="f_lain2" class="form-control" placeholder="Lainnya ..." disabled style="width:40%;display:inline-table;"><br/>
											</div>								
										</div>
										<div class="form-group">
											<label class="col-md-4 labelme">Ukuran Baju Kaos (Jika terdapat fasilitas) <span class="text-red">*</span></label>
											<div class="col-md-8">
												<?php
												$uk_kaos = array(''=> '-- Pilih --','S'=> 'S','M'=> 'M','L'=> 'L','XL'=> 'XL','2XL'=> '2XL','3XL'=> '3XL','4XL'=> '4XL',);
												echo form_dropdown('uk_kaos',$uk_kaos,false,'id="uk_kaos" class="form-control uk_kaos"  style="width: 100%" required');
												?>
											</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();
	$('#punya_bisnis').hide();

	$('#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');
			}
			
			if(state.stepsComplete != 0)
			{
				$("h3.box-title").text('PERTANYAAN');
			}
			else
			{
				$("h3.box-title").text('BIODATA');
			}
		}
	})
	.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('c/saveData/'.$this->uri->segment(2));?>";
		var rec = $('#wrapped').serializeArray();
		var oForm = $('#wrapped');
		if(oForm[0].checkValidity()) {
			//alert( "Form submitted!" );
			$.post(url, rec, function(msg){
				if(msg.status== 'ok')
				{
					var isi = "<center><p class=\"lead\">"+
							"Terima kasih atas kepercayaan Bapak / Ibu.<br/>"+
							"Sampai berjumpa di Pelatihan Masa Persiapan Pensiun - ESQ MPP.<br/>"+
							"<a href=\"http://www.esqmpp.com/\" target=\"blank\">www.esqmpp.com</a>"+
							"</p></center>";
					$("h3.box-title").text('');		
					$("#example-1").html(isi);
					$('.overlay').remove();
				}
				else
				{
					infoDialog.realize();
					infoDialog.setTitle('Info').setMessage('<center>Gagal !!</center>').setType(BootstrapDialog.TYPE_DANGER).open();
					$('.overlay').remove();
				}
			}, 'json').fail(function(e){
					console.log(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 ) {
				console.log(element)
			if ( element.is( ":radio" ) || element.is( ":checkbox" ) ) {
				//error.insertBefore( element.next() );
				error.appendTo($(".pesan_"+element.attr("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');
		//}
	});

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

	$("#uk_kaos").select2({
		placeholder: "Pilih Ukuran Kaos",
		allowClear: false,
		minimumResultsForSearch: Infinity,
	});

	$('#usia').datepicker({
		changeMonth : true,
		changeYear : true,
		dateFormat: "yy-mm-dd",
		regional: "id",
		yearRange: "-100:+0",
	});
	
	//$('#soal').slimScroll({
        //height: '325px'
    //});	

	$(':input[type="radio"]').iCheck({
		checkboxClass: 'icheckbox_square-blue',
		radioClass: 'iradio_square-blue',
		increaseArea: '20%' // optional
	}).on('ifChecked', function(event){
		$(".pesan_"+$(this).attr("id")).html("");
	});
	
	$(':input[type="checkbox"]').iCheck({
		checkboxClass: 'icheckbox_square-blue',
		radioClass: 'iradio_square-blue',
		increaseArea: '20%' // optional
	});

	$('.f_bisnis').on('ifChanged', function(e){
		console.log(e.target.value)
		if(e.target.value == 'Ya') {
			$('#punya_bisnis').show();
		} else {
			$('#punya_bisnis').hide();
			$('.f_bisnis1').iCheck('uncheck');
			$('#f_profesi').val('');
			$('#f_profesi').attr('disabled',true);
			$('#f_lain').val('');
			$('#f_lain').attr('disabled',true);
		}
	});
	
	$('#f_bisnis11').on('ifChanged', function(e){
		console.log(e.target.checked)
		if(e.target.checked) {
			$('#f_profesi').attr('disabled',false);
		} else {
			$('#f_profesi').attr('disabled',true);
		}
	});
	$('#f_bisnis12').on('ifChanged', function(e){
		console.log(e.target.checked)
		if(e.target.checked) {
			$('#f_lain').attr('disabled',false);
		} else {
			$('#f_lain').attr('disabled',true);
		}
	});

	$('#f_bisnis21').on('ifChanged', function(e){
		console.log(e.target.checked)
		if(e.target.checked) {
			$('#f_profesi2').attr('disabled',false);
		} else {
			$('#f_profesi2').attr('disabled',true);
		}
	});
	$('#f_bisnis22').on('ifChanged', function(e){
		console.log(e.target.checked)
		if(e.target.checked) {
			$('#f_lain2').attr('disabled',false);
		} else {
			$('#f_lain2').attr('disabled',true);
		}
	});

	//$('#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>  
