<body id="page-top " class="imm">

 

    <header class="imagr text-center text-white leny2">
    
      <div class="container">
        <h3>TheNewBroker</h3>
         <p>Start buying and selling bitcoins by creating an account at <br>Bitcove.</p>
           <div class = "box1 box pt-4 mx-auto">
              <form class="container mx-auto" method="post" name="frmChange" onSubmit="return validateInput(event)">
                  <div class = "container">
                      <div class = "row" >
                        <div>
                            <a href="index.html" class = "" ><i class = "fa fa-arrow-left"></i>  </a>
                        </div>
                         <div class = "ic mx-auto">
                           <h4>Sign Up</h4>
                            <hr class = "pt-0 mt-0 pb-2 hr-length">
                        </div>
                    </div>
                    </div> 

                    <input type="text" name="fullname" id="fullname" class="form-control sign" placeholder="Full Name">
                    <span id="fullname_res" style="color: red" class="required"></span><br/>

                    <input type="email" id="email" name="email" class="form-control sign" placeholder="Email">
                    <span id="email_res" style="color: red" class="required"></span><br/>  

                    <input type="tel" id="phoneNumber" name="phoneNumber" class = "form-control sign" placeholder="Phone Number">
                    <span id="phoneNumber_res" style="color: red" class="required"></span><br/>  

                    <input type="password" id="password" name="psw" class="form-control sign" placeholder="Password">
                    <span id="password_res" style="color: red" class="required"></span><br/>  

                    <input type="Password" id="confirmPassword" name="confirm_psw" class="form-control sign" placeholder="Confrim Password">
                    <span id="confirm_psw" style="color: red" class="required"></span><br/>

                  <button type="submit" class="btn btn-success light form-control log mt-4 mb-5" >Create account</btton>
                    <img src="">
              </form>
      </div>
        <a class="forgot mx-auto logg" href="<?php echo base_url();?>login">Already have an account ? <span class= "text-red">Login</span></a>
        <a class="forgot mx-auto logg pu " href="#">Resend Verification link</a>
    </header>

     <script>
      const validateInput = e => {
        e.preventDefault();
          var fullname, email, phoneNumber, password, confirmPassword, output  = true;
          fullname = document.frmChange.fullname;
          email = document.frmChange.email;
          phoneNumber = document.frmChange.phoneNumber;
          password = document.frmChange.psw;
          confirmPassword = document.frmChange.confirm_psw;

          if(!fullname.value) {
            fullname.focus();
            document.getElementById("fullname").style.borderColor = "red";
            document.getElementById('fullname_res').innerHTML = "This field is required";
            output = false;
          } else {
            document.getElementById("fullname").style.borderColor = "";
            document.getElementById('fullname_res').innerHTML = "";
          }

          if(!email.value) {
            email.focus();
            document.getElementById("email").style.borderColor = "red";
            document.getElementById('email_res').innerHTML = "This field is required";
            output = false;
          } else {
            document.getElementById("email").style.borderColor = "";
            document.getElementById('email_res').innerHTML = "";
            output = true;
          }

          if(!phoneNumber.value) {
            phoneNumber.focus();
            document.getElementById("phoneNumber").style.borderColor = "red";
            document.getElementById('phoneNumber_res').innerHTML = "This field is required";
            output = false;
          } else {
            document.getElementById("phoneNumber").style.borderColor = "";
            document.getElementById('phoneNumber_res').innerHTML = "";
            output = true;
          }
          
          if(!password.value) {
            password.focus();
            document.getElementById("password").style.borderColor = "red";
            document.getElementById('password_res').innerHTML = "This field is required";
            output = false;
          } else {
            document.getElementById("password").style.borderColor = "";
            document.getElementById('password_res').innerHTML = "";
            output = true;
          }

          if(password.value != confirmPassword.value) {
            password.value = "";
            confirmPassword.value = "";
            password.focus();
            document.getElementById("confirm_psw").innerHTML = "Password do not match";
            output = false;
          } else {
            document.getElementById("confirm_psw").innerHTML = "";
          }

          if(output == true) {
            $.ajax({
                  url: "register",
                  type: "POST",
                  data: {
                    fullname: fullname.value,
                    email: email.value,
                    phoneNumber: phoneNumber.value,
                    password: password.value
                  },
                  dataType: "JSON",
                  cache: false,
                  beforeSend: function() {
                   // $("#" + id)
                   //   .html("")
                   //   .hide();
                   // $("#loader_image").show();
                  },
                  success: function(jsonStr) {

                    if (jsonStr.status == "error") {
                      if (jsonStr.code == 0) {
                        toastr.warning("Sorry fields cannot be null");
                      }else if (jsonStr.code == 1) {
                        toastr.warning("Sorry all fields must be filled");
                      }else if (jsonStr.code == 2) {
                        toastr.warning("Sorry email already exist");
                        email.focus();
                      } else {
                        toastr.error("Error in operation, Please try again");
                      }
                    }
                    if (jsonStr.status == "success") {
                      if (jsonStr.code == 0) {
                        toastr.success("Registration successful");
                        window.location = "<?php echo base_url();?>success"
                      }
                    }
                    // $("#result").text(JSON.stringify(jsonStr));
                  }
                });
          }
      }
</script>
