<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="shortcut icon" href="../assets/img/logo.png" type="image/x-icon">

  <title>Fresh Student Registration</title>

  <!-- Custom fonts for this template-->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

  <!-- Custom styles for this template-->
  <link href="../assets/css/sb-admin-2.css" rel="stylesheet" type = "text/css">
  <link href="../assets/css/formhack.css" rel="stylesheet">
  <link href="../assets/css/style.css" rel="stylesheet">
</head>

<body class="bg-gradient-primary">

  <div class="container">

    <!-- Outer Row -->
    <div class="row justify-content-center">

      <div class="col-xl-6 col-lg-6 col-md-9">

        <div class="card o-hidden border-0 shadow-lg my-5">
          <div class="card-body p-0">
            <!-- Nested Row within Card Body -->
            <div class="row">
              <div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
              <div class="col-lg-12">
                <div class="p-5">
                  
                  <div class="text-center">
                    <a href="#"><img src="../assets/img/logo.png" alt="" width = "100" height ="100"></a>
                    <h1 class="h4 text-gray-900 mb-4">Returning Student Registration
                    </h1>

                  </div>
                  <?php $page_session = \Config\Services::session(); ?>
                  <?php

                  if($page_session->getTempdata('loginError')):       
                  ?>
                  <div class = "alert alert-danger">
                       <?= $page_session->getTempdata('loginError'); ?>
                  </div>
                  <?php 
                  endif;
                  ?>

                   <?php $page_session = \Config\Services::session(); ?>
                  <?php

                  if($page_session->getTempdata('registerSuccess')):       
                  ?>
                  <div class = "alert alert-success">
                       <?= $page_session->getTempdata('registerSuccess'); ?>
                  </div>
                  <?php 
                  endif;
                  ?>
				  <?php $page_session = \Config\Services::session(); ?>
				  <?php
				  if($page_session->getTempdata('passwordChanged')):       
                  ?>
                  <div class = "alert alert-success">
                       <?= $page_session->getTempdata('passwordChanged'); ?>
                  </div>
                  <?php 
                  endif;
                  ?>
                  
                  <form class="user" id="register" role="form" action="<?= base_url().'/student/f_register' ?>" method="post">
						<input type = "text" name = "app_no" value = "<?= $app_no ?>" hidden>
						<input type = "text" name = "pin" value = "<?= $pin ?>" hidden>
				        <fieldset>
							<h6>Registration Number</h6>
							<label for="username" style = "width: 100%; margin-bottom: 0px">
							
							<div class="form-group">
							
								<input class="form-control form-control-user" placeholder="Registration no." name="reg" id = "reg" type="text" minlength="3" autofocus required>
								<ul class="input-requirements">
								<li>Hint: <?= $value ?></li>
								
									</ul>							
										</div>
										</label>
							
							<h6>Confirm Registration Number</h6>
							<label for="username" style = "width: 100%; margin-bottom: 0px">
							<div class="form-group">
							
								<input class="form-control form-control-user" placeholder="Registration no." name="creg" id = "creg" type="text" minlength="3" autofocus required>
								<ul class="input-requirements">
								<li>Hint: <?= $value ?></li>
								
									</ul>							
										</div>
							</label>
							<h6>Password</h6>
							<div class="form-group">
								<input class="form-control form-control-user" placeholder="Password" name="password" type="password" value="" required>
							</div>
							<h6>Confirm Password</h6>
							<div class="form-group">
								<input class="form-control form-control-user" placeholder="Password" name="cpassword" type="password" value="" required>
							</div>
							
							<!-- Change this to a button or input when using this as a form -->
							<button class="btn btn-primary btn-user btn-block">
							Register
							</button>
						</fieldset>
					</form>

                  <hr>
                
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>

  </div>

  <!-- Bootstrap core JavaScript-->
  <script src="../assets/vendor/jquery/jquery.min.js"></script>
  <script src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
  <!-- Core plugin JavaScript-->
  <script src="../assets/vendor/jquery-easing/jquery.easing.min.js"></script>

  <!-- Custom scripts for all pages-->
<!-- jQuery -->
<script src="../assets/bower_components/jquery/dist/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="../assets/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="../assets/bower_components/metisMenu/dist/metisMenu.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="../assets/js/dist/js/sb-admin-2.js"></script>
<script type = "text/javascript">
	/* ----------------------------

	CustomValidation prototype

	- Keeps track of the list of invalidity messages for this input
	- Keeps track of what validity checks need to be performed for this input
	- Performs the validity checks and sends feedback to the front end

---------------------------- */

function CustomValidation(input) {
	this.invalidities = [];
	this.validityChecks = [];

	//add reference to the input node
	this.inputNode = input;

	//trigger method to attach the listener
	this.registerListener();
}

CustomValidation.prototype = {
	addInvalidity: function(message) {
		this.invalidities.push(message);
	},
	getInvalidities: function() {
		return this.invalidities.join('. \n');
	},
	checkValidity: function(input) {
		for ( var i = 0; i < this.validityChecks.length; i++ ) {

			var isInvalid = this.validityChecks[i].isInvalid(input);
			if (isInvalid) {
				this.addInvalidity(this.validityChecks[i].invalidityMessage);
			}

			var requirementElement = this.validityChecks[i].element;

			if (requirementElement) {
				if (isInvalid) {
					requirementElement.classList.add('invalid');
					requirementElement.classList.remove('valid');
				} else {
					requirementElement.classList.remove('invalid');
					requirementElement.classList.add('valid');
				}

			} // end if requirementElement
		} // end for
	},
	checkInput: function() { // checkInput now encapsulated

		this.inputNode.CustomValidation.invalidities = [];
		this.checkValidity(this.inputNode);

		if ( this.inputNode.CustomValidation.invalidities.length === 0 && this.inputNode.value !== '' ) {
			this.inputNode.setCustomValidity('');
		} else {
			var message = this.inputNode.CustomValidation.getInvalidities();
			this.inputNode.setCustomValidity(message);
		}
	},
	registerListener: function() { //register the listener here

		var CustomValidation = this;

		this.inputNode.addEventListener('keyup', function() {
			CustomValidation.checkInput();
		});


	}

};



/* ----------------------------

	Validity Checks

	The arrays of validity checks for each input
	Comprised of three things
		1. isInvalid() - the function to determine if the input fulfills a particular requirement
		2. invalidityMessage - the error message to display if the field is invalid
		3. element - The element that states the requirement

---------------------------- */

var usernameValidityChecks = [
	{
		isInvalid: function(input) {
		var pattern = "<?= $value ?>";
		var flag = true;	
		if(input.value.includes(pattern)){
			var pos = input.value.lastIndexOf('/');
			//alert(pos);
		    if(isNumber(input.value.charAt(pos+1)) &&  isNumber(input.value.charAt(pos+2)) && isNumber(input.value.charAt(pos+3))){
				    flag = false;
				}
		}
			//alert(input.value != pattern);
			return flag;
		},
		invalidityMessage: 'You have to type the correct format',
		element: document.querySelector('label[for="username"] .input-requirements li:nth-child(1)')
	},
	/* {
		isInvalid: function(input) {
			var illegalCharacters = input.value.match(/[^a-zA-Z0-9]/g);
			return illegalCharacters ? true : false;
		},
		invalidityMessage: 'Only letters and numbers are allowed',
		element: document.querySelector('.form-control .input-requirements li:nth-child(2)')
	} */
];

var usernameValidityChecks2 = [
	{
		isInvalid: function(input) {
		var pattern = "<?= $value ?>";
		var flag = true;	
		if(input.value.includes(pattern)){
			var pos = input.value.lastIndexOf('/');
			//alert();
		    if(isNumber(input.value.charAt(pos+1)) &&  isNumber(input.value.charAt(pos+2)) && isNumber(input.value.charAt(pos+3))){
				    flag = false;
				}
		}
			//alert(input.value != pattern);
			return flag;
		},
		invalidityMessage: 'You have to type the correct format',
		element: document.querySelector('label[for="username"] .input-requirements li:nth-child(1)')
	},
	/* {
		isInvalid: function(input) {
			var illegalCharacters = input.value.match(/[^a-zA-Z0-9]/g);
			return illegalCharacters ? true : false;
		},
		invalidityMessage: 'Only letters and numbers are allowed',
		element: document.querySelector('.form-control .input-requirements li:nth-child(2)')
	} */
];

/* ----------------------------

	Setup CustomValidation

	Setup the CustomValidation prototype for each input
	Also sets which array of validity checks to use for that input

---------------------------- */

var usernameInput = document.getElementById('reg');
var usernameInput2 = document.getElementById('creg');
var passwordInput = document.getElementById('password');
var passwordRepeatInput = document.getElementById('password_repeat');

usernameInput.CustomValidation = new CustomValidation(usernameInput);
usernameInput.CustomValidation.validityChecks = usernameValidityChecks;

usernameInput2.CustomValidation = new CustomValidation(usernameInput2);
usernameInput2.CustomValidation.validityChecks = usernameValidityChecks2;

passwordInput.CustomValidation = new CustomValidation(passwordInput);
passwordInput.CustomValidation.validityChecks = passwordValidityChecks;

passwordRepeatInput.CustomValidation = new CustomValidation(passwordRepeatInput);
passwordRepeatInput.CustomValidation.validityChecks = passwordRepeatValidityChecks;




/* ----------------------------

	Event Listeners

---------------------------- */

var inputs = document.querySelectorAll('input:not([type="submit"])');


var submit = document.querySelector('input[type="submit"');
var form = document.getElementById('register');

function validate() {
	for (var i = 0; i < inputs.length; i++) {
		inputs[i].CustomValidation.checkInput();
	}
}

function isNumber(n){
	return /^-?[\d.]+(?:e-?\d+)?$/.test(n);
}

submit.addEventListener('click', validate);
form.addEventListener('submit', validate);

</script>
<script type ='text/javascript'>
	      $(document).ready(function(){
		  
		   $('#exampleModal').on('hidden.bs.modal', function(){
		      
			     window.location.replace("login.php");
				 
			 
			   });
		 }); 
	 </script>

</body>

</html>
