 

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

<head>
  <!--Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <style>
    .background {
      width: 100%;
      height: 100%;
      margin: 5px;
      padding: 5px;

    }

    .content {
      width: 1400px;
      height: 800px;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: 20px;

      max-width: 100%;
      max-height: 100%;
      overflow: auto;
    }


    #fname-error {
      display: none;
    }

    #lname-error {
      display: none;
    }

    #username-error {
      display: none;
    }

    #email-error {
      display: none;
    }

    #password-guidelines {
      display: none;
    }

    #p1-error {
      display: none;
    }

    #p2-error {
      display: none;
    }

    #agree-error {
      display: none;
    }

    #user-valid {
      display: none;
    }

    #email-valid {
      display: none;
    }

    #state-error {
      display: none;
    }

    
  </style>


  <title>Register</title>
  <script>
    function checkfname() {
      var fname = document.forms["register"]["fname"].value.trim();

      //THis is to remove any accidental space added
      document.forms["register"]["fname"].value = fname;

      if (fname.length == 0) {
        document.getElementById('fname-error').style.display = 'inline';
        return false;
      } else {
        document.getElementById('fname-error').style.display = 'none';
        return true;
      }
    }

    function validateCode(){
          var thecode = document.forms["register"]["specify-code"].value.trim();
          document.forms["register"]["specify-code"].value = thecode;
          document.getElementById("specify-code-result").innerText = "";
     
            var request = new XMLHttpRequest();
            request.open("GET", "get_code_validation.php?q="+thecode, false);
            request.send();
            if (request.readyState == 4 && request.status == 200) {
              
                if (request.responseText[0] == "t") {
                document.getElementById("specify-code-result").innerText = "The code is for teacher" + 
                request.responseText.substring(1, request.responseText.length-1);
                
              }else if(request.responseText[0] == "s"){
                document.getElementById("specify-code-result").innerText = "The code is for students" + 
                request.responseText.substring(1,request.responseText.length-1);
            
              }else{
                document.getElementById("specify-code-result").innerText = "The code is for particpants";
              }
            }
          

        
    }

    function checklname() {

      var lname = document.forms["register"]["lname"].value.trim();

      document.forms["register"]["lname"].value = lname;

      if (lname.length == 0) {

        document.getElementById("lname-error").style.display = "inline";
        return false;

      } else {

        document.getElementById("lname-error").style.display = "none";
        return true;
      }
    }

    function checkUserName() {
      var username = document.forms["register"]["username"].value.trim();

      document.forms["register"]["username"].value = username;

      if (username.length <= 3) {

        document.getElementById("username-error").style.display = "inline";
        document.getElementById("user-valid").style.display = "none";
        return false;

      } else {

        document.getElementById("user-valid").style.display = "inline";
        document.getElementById("username-error").style.display = "none";
        document.getElementById("user-valid").style.backgroundColor = "orangered";
        document.getElementById("user-valid").style.fontWeight = "bold";
          var request = new XMLHttpRequest();
          request.open("GET","get_username_validation.php?q=" + username, false);
          request.send();
          if(request.readyState == 4 && request.status == 200){
            if (request.responseText.length == 1) {
                document.getElementById("user-valid").innerText = "Username Is Available!";
                document.getElementById("user-valid").style.backgroundColor = "greenyellow";
                return true;
              }else{
                document.getElementById("user-valid").innerText = "Username is Already Registered!";
                document.getElementById("user-valid").style.backgroundColor = "orangered";
              return false;
              }
          }
      }
    }

    

    function checkemail() {
      var email = document.forms["register"]["email"].value.trim();
      document.forms["register"]["email"].value = email;

      if (email.length <= 4) {

        document.getElementById("email-error").style.display = "inline";
        document.getElementById("email-valid").style.display = "none";
        return false;

      } else {
        var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

        if (email.match(mailformat)) {

          document.getElementById("email-error").style.display = "none";
          document.getElementById("email-valid").style.display = "inline";
          document.getElementById("email-valid").style.backgroundColor = "orangered";
          document.getElementById("email-valid").style.fontWeight = "bold";
          //document.getElementById("email-valid").style.display = "none";
          // xhttp = new XMLHttpRequest();
          // xhttp.onreadystatechange = function () {
          //   if (this.readyState == 4 && this.status == 200) {
             
          //     var theresponse = this.responseText;
          //     if (theresponse.length == 1) {
          //       document.getElementById("email-valid").innerText = "email is available!";
          //       return true;
          //     }

          //     if (theresponse.length > 1) {
          //       document.getElementById("email-valid").innerText = "email is taken!";
          //       return false;
          //     }
          //   }
          // };
          // xhttp.open("GET", "get_email_validation.php?q=" + email, false);
          // xhttp.send();

          var request = new XMLHttpRequest();
          request.open("GET","get_email_validation.php?q=" + email, false);
          request.send();
          if(request.readyState == 4 && request.status == 200){
            if (request.responseText.length == 1) {
                document.getElementById("email-valid").innerText = "Email Is Available!";
                document.getElementById("email-valid").style.backgroundColor = "greenyellow";
                return true;
              }else{
                document.getElementById("email-valid").innerText = "Email Is Already Registered";
                document.getElementById("email-valid").style.backgroundColor = "orangered";
              return false;
              }
          }
        }else {

          document.getElementById("email-valid").style.display = "none";
          document.getElementById("email-error").style.display = "inline";
          return false;

        }

          // alert("It still comes in here");
      }
    }

    function checkpassword() {
      var password = document.forms["register"]["password"].value.trim();
      document.forms["register"]["password"].value = password;

      var re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;

      if (re.test(password)) {
        document.getElementById("p1-error").style.display = 'none';
        document.getElementById("password-guidelines").style.display = 'none';
        return true;

      } else {

        document.getElementById("p1-error").style.display = 'inline';
        document.getElementById("password-guidelines").style.display = 'block';
        return false;

      }
    }

    function confirmPassword() {

      var password = document.forms["register"]["password"].value;

      var password2 = document.forms["register"]["password2"].value;

      if (password != password2) {

        document.getElementById("p2-error").style.display = "inline";
        return false;
      } else {
        document.getElementById("p2-error").style.display = "none";
        return true;
      }

    }

    function checkAgree(checkbx) {

      if (checkbx.checked) {

        document.getElementById("agree-error").style.display = "none";
        return true;

      } else {

        document.getElementById("agree-error").style.display = "inline";
        return false;

      }

    }

    function selectedState() {
      var e = document.getElementById("state");

      var result = e.options[e.selectedIndex].value;

      if (result == "") {

        document.getElementById("state-error").style.display = "inline";
        return false;

      } else {

        document.getElementById("state-error").style.display = "none";
        return true;

      }
    }

   

    function validateForm() {
      var fname = checkfname();
      var lname = checklname();
      var username = checkUserName();
      var email = checkemail();
      var password = checkpassword();
      var password2 = confirmPassword();
      var terms = checkAgree(document.getElementById("terms"));
      var state = selectedState();
      //var account = selectedAccount();

      // alert("The value of username in validate is:" + username);
      // alert("The value of email in validate is: " + email);

      if (!fname) {
        document.getElementById('fname-error').style.display = 'inline';
      }
      if (!lname) {
        document.getElementById("lname-error").style.display = "inline";
      }
      if (!username) {
        document.getElementById("username-error").style.display = "inline";
      }
      if (!email) {
        document.getElementById("email-error").style.display = "inline";
      }
      if (!password) {
        document.getElementById("p1-error").style.display = 'inline';
        document.getElementById("password-guidelines").style.display = 'block';
      }

      if (!password2) {
        document.getElementById("p2-error").style.display = "inline";
      }

      if (!terms) {
        document.getElementById("agree-error").style.display = "inline";
      }
      if (!state) {
        document.getElementById("state-error").style.display = "inline";
      }
      // if (!account) {
      //   document.getElementById("acc-error").style.display = "inline";
      // }


      if (lname && fname && username && password && password2
        && email && terms  && state) {
        return true;
      } else {
        event.preventDefault();
      }

    }

  </script>
</head>

<body>

  <br />
  <br />
  <div class="section-1-container section-container">
    <div class="container">
      <form name="register" action="display_post_data.php" onsubmit="return validateForm();" method="POST">
        <div class="form-row">
          <div class="form-group col-md-6">

            <label for="fname">First Name<span id="fname-error" class="small alert alert-danger" style="background-color: white;"><b>Cannot be empty</b></span></label>
            <input type="text" class="form-control" name="fname" id="fname" onblur="checkfname()" placeholder="First Name">
          </div>
          <div class="form-group col-md-6">
            <label for="lname">Last Name<span id="lname-error" class="small alert alert-danger" style="background-color: white;"><b>Cannot be empty</b></span></label>
            <input type="text" class="form-control" name="lname" id="lname" onblur="checklname()" placeholder="Last Name">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="username">Username 
              <span id="username-error" class=" small alert alert-danger" style="background-color: white;"><b>Contain at least 4 words</b></span></label>
            <input type="text" class="form-control" name="username" id="username" onblur="checkUserName()" placeholder="Username">
            <span id="user-valid" class=" small alert alert-warning" style="background-color: yellow;"></span>
          </div>
          <div class="form-group col-md-6">
            <label for="email">Email <span id="email-error" class="small alert alert-danger"
                style="background-color: white;"><b>Enter valid email</b></span></label>
            <input type="text" class="form-control" name="email" id="email" onblur="checkemail()" placeholder="Email">
            <span id="email-valid" class=" small alert alert-warning" style="background-color: yellow;"></span>
          </div>
        </div>
        <div class="form-row" id="password-guidelines">
          <div class="alert alert-warning" role="alert">
            <h4 class="alert-heading">Guidelines For Password</h4>
            <p>Password is a combination of small, large alphabets and numbers with special symbols if possible. It
              should contain at least one of each and should have a length of at least 8 words.</p>
            <hr>
            <p class="mb-0">Reason: Just to ensure that your account remains secure.</p>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="inputEmail4">Password <span id="p1-error" class="small alert alert-danger"
                style="background-color: white;"><b>Please look
                  above</b></span></label>
            <input type="password" class="form-control" name="password" id="password" onblur="checkpassword()"
              placeholder="Password">
          </div>
          <div class="form-group col-md-6">
            <label for="inputPassword4">Re-enter Password <span id="p2-error" class="small alert alert-danger"
                style="background-color: white;"><b>Password don't
                  match</b></span></label>
            <input type="password" class="form-control" name="password2" id="re-password" onblur="confirmPassword()"
              placeholder="Re-enter Password">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="city">City</label>
            <input type="text" class="form-control" id="city" placeholder="City">
          </div>
          <div class="form-group col-md-4">
            <label for="state">State</label><span id="state-error" class="small alert alert-danger"
              style="background-color: white;"><b>Select valid state</b></span>
            <select id="state" name="state" class="form-control" onchange="selectedState()">
              <option selected disabled value="">Select A State</option>
              <option value="NSW">New South Wales</option>
              <option value="QLD">Queensland</option>
              <option value="SA">South-Australia</option>
              <option value="TAS">Tasmania</option>
              <option value="VIC">Victoria</option>
              <option value="WA">Western Australia</option>
            </select>
          </div>
          <div class="form-group col-md-2">
            <label for="zip">Zip</label>
            <input type="text" class="form-control" id="zip" placeholder="####">
          </div>
        </div>
        

        <div class="form-row" id="specify-code-section">
					<div class="form-group col-md-6">
					<label for="specify-code">Specify Code</label>
					<input type="text" class="form-control" name="specify-code"  id="specify-code" onblur="validateCode()"  placeholder="Code for teachers and students">
					<div id="specify-code-result" style="padding: 5px;"></div>
					</div>
				</div>


        <div id="agree-error" class="small alert alert-danger" style="background-color: white;"><b>Please agree to terms
            and conditions</b></div>
        <br />
        <div class="form-group">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="agree" id="terms" onchange="checkAgree(this)">
            <label class="form-check-label" for="terms">
              I agree to <a href="">Terms and Conditions</a>
            </label>
          </div>
        </div>
        <input type="submit" class="btn btn-primary btn-lg btn-block" name="submit" value="Register">
      </form>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
    crossorigin="anonymous"></script>
    
</body>

</html> 