{{-- Extends layout --}}
@extends('layout.public')



{{-- Content --}}
@section('content')
<style>
  .show {
    display: block;
  }

  .hide {
    display: none;
  }
</style>
<!-- row -->
<div class="container-fluid row">

<div class="col-md-6">
      <div class="authincation-content">
          <div class="row no-gutters">
              <div class="col-xl-12">
                  <div class="auth-form">
                      <h4 class="text-center mb-4">Sign up</h4>
                      <div id="formdiv">
                        <!--<form action="{!! url('/index'); !!}">-->


                             <div class="form-group">
                                <label class="mb-1"><strong>Name</strong></label>
                                <input type="text" class="form-control" placeholder="your name" id="name" name="name" required maxlength="250" onkeypress="return isChar(event);" onchange="return nameCheck_char(this,'Name');">
                            </div>
                            <div class="form-group">
                                <label class="mb-1"><strong>Email</strong></label>
                                <input type="email" class="form-control" placeholder="hello@example.com" id="email" name="email" required>
                            </div>
                            <div class="form-group">
                                <label class="mb-1"><strong>Phone</strong>&nbsp;<small><i>(OTP will be send to this number)</i></small></label>
                                <div class="input-group mb-3">
                                  <div class="input-group-prepend">
                                    <select class="form-control" name="country_code" id="country_code">
                                        <option selected>&nbsp;+91&nbsp;</option>
                                    </select>
                                  </div>
                                  <input type="tel" id="phone" name="phone" class="form-control" value="" maxlength="10" placeholder="Enter 10 digit mobile number" pattern="[0-9]{1}[0-9]{9}" required>
                                </div>
                            </div>
                            

                            <div class="form-group">
                                <label class="mb-1"><strong>Password</strong>&nbsp;<small><i>(should have atleast 1 digit, 1 alphabet and minimum length is 6)</i></small></label>
                                <input type="password" id="password" name="password" class="form-control" value=""  placeholder="Enter New Password" required pattern="^(?=.*[0-9])(?=.*[a-z])\S{6,}" minlength="6">


                            </div>

                            <!-- confirm password -->

                            <div class="form-group">
                                  <label class="mb-1"><strong>Confirm New Password</strong>&nbsp;<small><i>(should have atleast 1 digit, 1 alphabet and minimum length is 6)</i></small></label>
                                  <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Enter Confirm New Password" required pattern="^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])\S{6,}" minlength="6">
                            </div>
                            
                            <div class="text-center">
                                <button type="button" id="submitForm" class="btn btn-primary btn-block">Sign Me Up</button>
                            </div>
                        <!--</form>-->
                      </div>


                      <div id="otpdiv" class ="hide">
                        <div class="form-group">
                          <label for="emotpail">OTP:</label>
                          <input type="otp" class="form-control" id="otp" placeholder="Enter OTP" name="otp">
                        </div>
                        <button id="otpSubmit" class="btn btn-primary btn-block">Submit</button>
                        <a href="#" class="pull-right" id="resendotpobj">Resend OTP</a>
                      </div>

                      <div id="logindiv" class ="hide">
                        <div class="form-group">
                          <h4 class="text-center mb-4">Thank You for Verifying with us. Please verify your email, we have send a verification mail before login.</h4>
                          
                        </div>
                        <a href="{!! url('/user/login'); !!}"><button id="loginbtn" class="btn btn-primary btn-block">Go to login page</button></a>
                      </div>
                      
                  </div>
              </div>
          </div>
      </div>
  </div>


  <div class="col-md-6">
    
    <div class="col-xl-12">
        <div class="authincation-content">
            <div class="row no-gutters">
              <div class="col-xl-12">
                  <div class="auth-form">
                      <div class="new-account mt-3">
                          <p>Already have an account? </p>
                          <div class="text-center">
                              <a class="text-primary" href="{!! url('/user/login'); !!}"><button type="button" class="btn btn-primary btn-block">Sign In</button></a>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
        </div>
    </div>
  </div>
</div>

<script>        
         
            $('#phone').keypress(function(e) {
                var a = [];
                var k = e.which;
                

                for (i = 48; i < 58; i++)
                    a.push(i);

                if (!(a.indexOf(k)>=0))
                    e.preventDefault();
            });
      
       </script>   
<script>

function isChar(evt) 
{
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 47 && charCode < 58) 
    {
        return false;
    }
   
}
/////check given string suitable for names... accepts only a-z,A-Z,'///////////////////////////////////////////////
function nameCheck_char (field,fieldname) 
{  
    var inputString = field.value;
    // Same, but here we instead check for characters. NOT matching the pattern. Above we capture all legal chars, here we capture all illegal chars by adding a ^ inside the class,
    // And overwrite them with "".
    var newStr = inputString.match(/^([a-zA-Z ]){2,250}$/, "");
    // If the lengths aren't equal, something was removed. If something was removed, the string contained illegal chars. Returns true if no illegal chars, else false.
    if(newStr== null)
    {
        sweetAlert("Oops...", "Name field is not valid, please enter correct input for Name", "error");
        field.value = "";
        field.focus();
        return false;   
    }
}
$(function(){

  $("#submitForm").click(function(){
      var name=$("#name").val();
      var phone= $("#phone").val();
      var password= $("#password").val();
      var confirm_password= $("#confirm_password").val();
      var email = $("#email").val();
      var country_code = $("#country_code").val();
      var csrf = "{{csrf_token()}}";

      if(!name||!phone||!password||!confirm_password||!email)
      {
        alert("Please enter all fields");
        return false;
      }
      if(!ValidateEmail(email))
      {
        return false;
      }
      if(!ValidatePhone(phone))
      {
        return false;
      }

      ////password policy check/////

      if(!CheckPasswordPolicy(password))
      {
        return false;
      }

      if(!CheckConfirmPasswordPolicy(confirm_password))
      {
        return false;
      }

      if(!ValidatePassword(password,confirm_password))
      {
        return false;
      }

      ///////////////////////////////

      $.ajax({
          type: "POST",
          url: "{{ url('user/registerpost')}}",
          dataType : 'json',
          data: {_token: csrf, name: name, phone: phone, email: email, password: password, confirm_password:confirm_password, country_code: country_code},
          success: function( result ) {
            
             
            if(result.statusCode == 200){
                    
                    console.log(result);
                    
                    $("#formdiv").removeClass('show');
                    $("#formdiv").addClass('hide');
                    $("#otpdiv").removeClass('hide'); 
                    $("#otpdiv").addClass('show'); 
                    }
            else{
                alert("Oops! Seems this user already exist with us. Please try forgot password option!");
            }
            
          }
      });  
  });


  $("#resendotpobj").click(function(){
     var phone= $("#phone").val();
     var csrf = "{{csrf_token()}}";
    $.ajax({
          type: "POST",
          url: "{{ url('user/otp_resend')}}",
          dataType : 'json',
          data: {_token: csrf, phone: phone},
          success: function( result ) {
            
             
            if(result.statusCode == 200){
                    
                    console.log(result);
                    alert("OTP resent, please check");
                    
                   
                    $("#resendotpobj").addClass('hide');
                    
                    }
            else{
                alert("Oops! Somethign went Wrong!");
            }
            
          }
      });  
  });


  $("#otpSubmit").click(function(){
      var name=$("#name").val();
      var phone= $("#phone").val();
      var password= $("#password").val();
      var confirm_password= $("#confirm_password").val();
      var email = $("#email").val();
      var csrf = "{{csrf_token()}}";
      var country_code = $("#country_code").val();

      var otpentered = $("#otp").val();

      

      $.ajax({
          type: "POST",
          url: "{{ url('user/otpverify')}}",
          dataType : 'json',
          data: {_token: csrf, name: name, phone: phone, email: email, password: password,confirm_password:confirm_password, otpentered: otpentered, country_code: country_code},
          success: function( result ) {
            
            console.log(result);
             
            if(result.statusCode == 200){
                    //alert("OTP matches");

                    //location.replace("/showresult");

                    $("#formdiv").removeClass('show');
                    $("#formdiv").addClass('hide');
                    $("#otpdiv").removeClass('show'); 
                    $("#otpdiv").addClass('hide'); 

                    $("#logindiv").removeClass('hide'); 
                    $("#logindiv").addClass('show');

                    
                    }
            else{
               sweetAlert("Oops...", "OTP doesnot match !!", "error");
            }
            
          }
      });   
  });



});

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

 if (mail.match(mailformat))
  {
    return (true);
  }
    alert("You have entered an invalid email address!");
    return (false);
}

function ValidatePhone(phone) 
{
  var phoneformat =/^\d{10}$/;

 if (phone.match(phoneformat))
  {
    return (true);
  }
    alert("You have entered an invalid phone number!");
    return (false);
}

function ValidatePassword(password,confirm_password)
{
    if(password!=confirm_password)
    {
        alert("Password and Confirm Password should be matched.!");
        document.getElementById('password').value="";
        document.getElementById('confirm_password').value="";
        document.getElementById('password').focus();
        return (false);
    }
    else if((password<6) || (confirm_password<6))
    {
        alert("Minimum length of the password is 6.");
        document.getElementById('password').value="";
        document.getElementById('confirm_password').value="";
        document.getElementById('password').focus();
        return (false);
    }
    else
    {
        return (true);
    }
     
}
function CheckPasswordPolicy(password)
{
    passformat = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])\S{6,}/;
    if (password.match(passformat))
    {
      return (true);
    }
    alert("You have entered an invalid password. It should contains 1 digit, 1 lowercase alphabet and one uppercase alphabet and minimum length is 6!");
    document.getElementById('password').value="";
    document.getElementById('password').focus();
    return (false);
}

function CheckConfirmPasswordPolicy(confirm_password)
{
    passformat = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])\S{6,}/;
    if (confirm_password.match(passformat))
    {
      return (true);
    }
    alert("You have entered an invalid password. It should contains 1 digit, 1 lowercase alphabet and one uppercase alphabet and minimum length is 6!");
    document.getElementById('confirm_password').value="";
    document.getElementById('confirm_password').focus();
    return (false);
}

</script>                
             


@endsection