<?php require_once("inc/init.php"); ?>
<?php include 'controller/admissionCode.php'; ?>

<!-- widget grid -->
<section id="widget-grid" class="">
<div class="alert alert-block alert-success">
	<a class="close" data-dismiss="alert" href="#">×</a>
	<h4 class="alert-heading"><i class="fa fa-check-square-o"></i> Student Registration Form</h4>
	<p>
		Be notified that some fileds are required!
	</p>
</div>
	<!-- row -->
	
		<div class="row">
			<article class="col-sm-12 col-md-12 col-lg-2"></article>
			<article class="col-sm-12 col-md-12 col-lg-8">
			<!-- Widget ID (each widget will need unique ID)-->
			<div class="jarviswidget" id="wid-id-3"  data-widget-editbutton="false" data-widget-custombutton="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-edit"></i> </span>
					<h2>Admission Form</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 no-padding">
						
						<form  id="checkout-form3" onsubmit="return false;"  class="smart-form" novalidate="novalidate" enctype="multipart/form-data">

							<fieldset>
								<div class="row">
									<section class="col col-6">
										<label class="input"> <i class="icon-prepend fa fa-user"></i>
											<input type="text" name="student_name" placeholder="Name (Surname first)" >
										</label>
									</section>
									
									<section class="col col-6">
										<label class="input"> <i class="icon-prepend fa fa-home"></i>
											<input type="text" name="postal_address" placeholder="Postal Address" >
										</label>
									</section>
								</div>
                                <div class="row">
                                	<section class="col col-6">
										<label class="input"> <i class="icon-prepend fa fa-home"></i>
											<input type="text" name="home_address" placeholder="Home Address">
										</label>
									</section>
									<section class="col col-6">
										<label class="input"> <i class="icon-prepend fa fa-inbox"></i>
											<input type="text" name="district" placeholder="District">
										</label>
									</section>

									
									
								</div>
								    <div class="row">
									<section class="col col-6">
										<label class="input"> <i class="icon-prepend fa fa-calendar"></i>
											<input type="date" name="dob" placeholder="Date of Birth" >
										</label>
									</section>
										<section class="col col-6">
										<label class="select">
											<select name="class" id="class_main" required="required" >
												<option value="" selected="" disabled=""> * Select Class</option>
													<?php 
												if ($classes) {
													foreach ($classes as $key) {
												 ?>
												 <option value="<?php echo $key['class_id']; ?>"><?php echo $key['class_name']; ?></option>
												 <?php 
												}
											}
												  ?>
												
											</select> <i></i> </label>
											<input type="hidden" id="class" name="class" value="">
									</section>

										<section class="col col-6">
										<label class="select">
											<select name="track_main" id="track_main" required="required" >
												<option value="" selected="" disabled=""> * Select Track</option>
													<?php 
												if ($classes) {
													foreach ($session as $key) {
												 ?>
												 <option value="<?php echo $key['track_id']; ?>"><?php echo $key['track_name']; ?></option>
												 <?php 
												}
											}
												  ?>
												
											</select> <i></i> </label>
											<input type="hidden" id="track" name="track" value="" >
									</section>
									<section class="col col-6">
										<label class="input"> <i class="icon-prepend fa fa-home"></i>
											<input type="text" name="jhs" placeholder="JHS Attended">
										</label>
									</section>
								
								</div>
								<div class="row">
									
										<section class="col col-6">
										<label class="select">
											<select name="form" id="form" required="required" >
												<option value="" selected="" disabled=""> * Select Form</option>
													<?php 
												if ($forms) {
													foreach ($forms as $key) {
												 ?>
												 <option value="<?php echo $key['form_id']; ?>"><?php echo $key['form']; ?></option>
												 <?php 
												}
											}
												  ?>
												
											</select> <i></i> </label>
											<!-- <input type="hidden" id="track" name="form" value="" > -->
									</section>
									<section class="col col-6">
										<label class="select">
											<select name="house" >
												<option value="" selected="" disabled=""> * Select House</option>
													<?php 
												if ($houses) {
													foreach ($houses as $key) {
												 ?>
												 <option value="<?php echo $key['house_id']; ?>"><?php echo $key['house_name']; ?></option>
												 <?php 
												}
											}
												  ?>
												
											</select> <i></i> </label>
											<!-- <input type="hidden" id="track" name="form" value="" > -->
									</section>
								</div>
								
							</fieldset>


							<fieldset>

								<div class="row">
									<section class="col col-6">
										<label class="input"> <i class="icon-prepend fa fa-user"></i>
											<input type="text" name="bece_index" placeholder="BECE Index Number" >
										</label>
									</section>
									<section class="col col-6">
										<label class="input"> <i class="icon-prepend fa fa-users"></i>
											<input type="text" name="religion" placeholder="Religion">
										</label>
									</section>
								</div>
                                <div class="row">
                                	<section class="col col-6">
										<label class="input"> <i class="icon-prepend fa fa-user"></i>
											<input type="text" name="father_name" placeholder="Name of Father">
										</label>
									</section>
									<section class="col col-6">
										<label class="input"> <i class="icon-prepend fa fa-user"></i>
											<input type="text" name="mother_name" placeholder="Name of Mother">
										</label>
									</section>
									
								</div>
								    <div class="row">
									<section class="col col-6">
										<label class="input"> <i class="icon-prepend fa fa-money"></i>
											<input type="text" name="father_occupation" placeholder="Occupation of Father">
										</label>
									</section>
									<section class="col col-6">
										<label class="input"> <i class="icon-prepend fa fa-money"></i>
											<input type="text" name="mother_occupation" placeholder="Occupation of Mother">
										</label>
									</section>
									<section class="col col-6">
										<label class="input"> <i class="icon-prepend fa fa-home"></i>
											<input type="text" name="father_address" placeholder="Address of Father">
										</label>
									</section>
									<section class="col col-6">
										<label class="input"> <i class="icon-prepend fa fa-home"></i>
											<input type="text" name="mother_address" placeholder="Address of Mother">
										</label>
									</section>
									<section class="col col-6">
										<label class="input"> <i class="icon-prepend fa fa-user"></i>
											<input type="text" name="guardian" placeholder="Name of Guardian">
										</label>
									</section>
									<section class="col col-6">
										<label class="input"> <i class="icon-prepend fa fa-user"></i>
											<input type="text" name="guardian_phone" placeholder="Telephone Number of Parent or Guardian">
										</label>
									</section>
								<section class="col col-6">
										<img src="img/default.png" id="image_preview" style="width: 50%;height: auto;">
										<span id="message"></span>
										<label class="input"> <i class="icon-prepend fa fa-photo"></i>
											<input type="file" name="student_picture" id="pic">
										</label>
									</section>
									<section class="col col-6">
										<label class="input"> <i class="icon-prepend fa fa-envelope"></i>
											<input type="email" name="guardian_email" placeholder="Email of Parent or Guardian">
										</label>
									</section>
								</div>

							</fieldset>

							<footer>
								<input type="hidden" name="admit">
							<input type="submit" id="admit" class="btn btn-primary" value="Save Form" form="checkout-form3">

							</footer>
						</form>

					</div>
					<!-- end widget content -->
					
				</div>
				<!-- end widget div -->
				
			</div>
			<!-- end widget -->
		</article>
		<!-- WIDGET END -->
		<article class="col-sm-12 col-md-12 col-lg-2"></article>
		</div>

		<!-- NEW WIDGET START -->
		<!-- <article class="col-sm-12 col-md-12 col-lg-6">



		</article> -->
		<!-- WIDGET END -->

	

	<!-- end row -->

</section>
<!-- end widget grid -->

<script type="text/javascript">
	/* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

	pageSetUp();

	// PAGE RELATED SCRIPTS

	// pagefunction

	var pagefunction = function() {

		// load bootstrap wizard
		
		loadScript("js/plugin/bootstrap-wizard/jquery.bootstrap.wizard.min.js", runBootstrapWizard);

		//Bootstrap Wizard Validations

		function runBootstrapWizard() {

			var $validator = $("#wizard-1").validate({

				rules : {
					
					fname : {
						required : true
					},
					lname : {
						required : true
					}
				},

				messages : {
					fname : "Please specify your First name",
					lname : "Please specify your Last name",
					email : {
						required : "We need your email address to contact you",
						email : "Your email address must be in the format of name@domain.com"
					}
				},

				highlight : function(element) {
					$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
				},
				unhighlight : function(element) {
					$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
				},
				errorElement : 'span',
				errorClass : 'help-block',
				errorPlacement : function(error, element) {
					if (element.parent('.input-group').length) {
						error.insertAfter(element.parent());
					} else {
						error.insertAfter(element);
					}
				}
			});

			$('#bootstrap-wizard-1').bootstrapWizard({

				'tabClass' : 'form-wizard',
				'onNext' : function(tab, navigation, index) {
					var $valid = $("#wizard-1").valid();
					if (!$valid) {
						$validator.focusInvalid();
						return false;
					} else {
						$('#bootstrap-wizard-1').find('.form-wizard').children('li').eq(index - 1).addClass('complete');
						$('#bootstrap-wizard-1').find('.form-wizard').children('li').eq(index - 1).find('.step').html('<i class="fa fa-check"></i>');
					}
				}
			});

		var $checkoutForm3 = $('#checkout-form3').validate({
		// Rules for form validation
			rules : {
				class : {
					required : true
				},
				student_name : {
					required : true
				}
				
			},
	
			// Messages for form validation
			messages : {
				name : {
					required : 'Please enter student name'
				},
				guardian_email : {
					required : 'Please enter Parent or Guardian\'s email address',
					email : 'Please enter a VALID email address'
				},
				home_phone : {
					required : 'Please enter Parent or Guardian phone number'
				},
				track : {
					required : 'Please select a track',
					digits : 'Digits only please'
				},
				class : {
					required : 'Please choose a class'
				},
				name : {
					required : 'Please enter name on your card'
				},
				month : {
					required : 'Select month'
				},
				year : {
					required : 'Enter year',
					digits : 'Digits only please'
				}
			},
	
			// Do not change code below
			errorPlacement : function(error, element) {
				error.insertAfter(element.parent());
			}
		});



		

		// START AND FINISH DATE
		$('#startdate').datepicker({
			dateFormat : 'dd.mm.yy',
			prevText : '<i class="fa fa-chevron-left"></i>',
			nextText : '<i class="fa fa-chevron-right"></i>',
			onSelect : function(selectedDate) {
				$('#finishdate').datepicker('option', 'minDate', selectedDate);
			}
		});
		
		$('#finishdate').datepicker({
			dateFormat : 'dd.mm.yy',
			prevText : '<i class="fa fa-chevron-left"></i>',
			nextText : '<i class="fa fa-chevron-right"></i>',
			onSelect : function(selectedDate) {
				$('#startdate').datepicker('option', 'maxDate', selectedDate);
			}
		});
		};



				Dropzone.autoDiscover = false;
		$("#mydropzone").dropzone({
			//url: "/file/post",
			addRemoveLinks : true,
			maxFilesize: 0.5,
			dictDefaultMessage: '<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i> Drop files <span class="font-xs">to upload</span></span><span>&nbsp&nbsp<h4 class="display-inline"> (Or Click)</h4></span>',
			dictResponseError: 'Error uploading file!'
		});


	};

	$(document).ready(function(){
		$("#pic").change(function() {
           
           
        $("#message").empty(); // To remove the previous error message
        var file = this.files[0];
        var imagefile = file.type;
        var match= ["image/jpeg","image/png","image/jpg"];
        if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
        {
        
        $("#message").html("<p id='error'>Please Select A valid Image File</p>"+"Note"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
        return false;
        }
        else
        {
        var reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[0]);
        }
        });
        
           function imageIsLoaded(e) {
        $("#pic").css("color","green");
        $('#image_preview').css("display", "block");
       
        $("#image_preview").attr('src',e.target.result);
        myimage = e.target.result;
    };
		$('#track_main').change(function(){
			var track = $('#track_main').val();
			$('#track').val(track);
		});
		$('#class_main').change(function(){
			var class_val = $('#class_main').val();
			$('#class').val(class_val);
		});
	

		$('#checkout-form3').on('submit',function(){
			if ($('#track').val()==''
				|| $('#class').val()=='' || $('#name').val()=='') {
				return;
			}
		   var form = new FormData($("#checkout-form3")[0]);
// var data = new FormData(form); 
   $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "ajax/admission.php",
            data: form,
            processData: false,
            contentType: false,
            cache: false,
            timeout: 600000,
beforeSend: function(response){

    },
    complete: function(response){
       
    },
    success: function(response){
    	console.log(response)
    	if (response.charAt(0) == 0) {
    		$.smallBox({
					title : "Student Data Saved Successfully",
					content : "<i class='fa fa-clock-o'></i> <i>just now...</i>",
					color : "#000000",
					iconSmall : "fa fa-check bounce animated",
					timeout : 4000
				});
				$("#image_preview").attr('src','img/default.png');
				$('#pic').val('');
    		 $('#checkout-form3').find("input[type=text], textarea,input[type=email],input[type=phone]").val("");
    	}else{
    		$.smallBox({
					title : "Student Data not Saved!",
					content : "<i class='fa fa-clock-o'></i> <i>just now...</i>",
					color : "#C46A69",
					iconSmall : "fa fa-check bounce animated",
					timeout : 4000
				});
    	}

    }
	});
   return false;
});
	});

	

	// end pagefunction
	// Load form valisation dependency 
	loadScript("js/plugin/jquery-form/jquery-form.min.js", pagefunction);
	loadScript("js/plugin/dropzone/dropzone.min.js", pagefunction);
	// Load bootstrap wizard dependency then run pagefunction
	// pagefunction();

</script>
