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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
  <link rel="stylesheet" href="assets/css/intlTelInput.min.css">
  <link rel="stylesheet" href="assets/css/CSS.css">
  <link href="./assets/css/uicons-regular-straight.css" rel="stylesheet">
  <title>Forget Password | iFlexapps</title>
</head>


<style>
  #FPError {
    position: absolute;
    top: 41px;
    left: 0;
    font-size: 12px;
    color: red;
  }


  #OTPError{
  position: absolute;
  top: 41px;
  left: 0;
  font-size: 12px;
  color: red;
}

#PasswordError {
    position: absolute;
    top: 53px;
    left: 0;
    font-size: 12px;
    color: red;
}
</style>

<body>


  <div class="container" style="display: flex; justify-content: center; align-items: center ; height: 100%;">

    <div class="row justify-content-center">


      <div class="col-sm-12 col-md-8 col-lg-10">

        <div class="card  p-3" style=" box-shadow: 0px 0px 3px 0px rgba(207,207,207);">


          <div class="container-fluid ">


            <div class="row">
              <div class="col-md-12 col-lg-7 text-center d-flex flex-column justify-content-center align-items-center ">
                <div class="row text-center">
                  <div class="col-md-12">

                    <img src="./assets/img/iflexlogo.svg" alt="" style="width: 100px; margin-top:20px">

                  </div>

                  <div class="col-md-12 mt-2 text-muted">

                    <h5>Forgot Password</h5>
                  </div>


                </div>

                <form method="post"   action="{{ route('update_password') }}" id="forget-form" class="w-100 text-center d-flex flex-column justify-content-center align-items-center mt-5 form-div form">
                    @csrf
                  <div class="container p-0">

                    <div class="row GotoOtp" id="">

                      <div class="col-md-12">
                        <div class="myusernamediv">
                          <input type="text" name="forgetID" id="forgetID"
                            class="form-control rounded rounded-3 py-2 username forgetID ">
                          <span class="idspan">iFlex ID or Email</span>
                          <label class="hide" id="FPError">Please Fill this Field</label>
                        </div>
                      </div>

                      <div class="col-sm-6 justify-content-center d-flex justify-content-sm-start">

                        <a href="/login" class="btn btn-primary customregbtn mb-3">Login Instead</a>
                      </div>

                      <div class="col-sm-6 justify-content-center d-flex justify-content-sm-end ">

                        <a class="btn btn-primary customregbtn mb-3 ancorcolor" id="FPOtp">Next</a>
                      </div>

                    </div>






                    <div class="row p-4 hide1 OtpForm " id="EnterOTP">
                      <div class="col-12 p-0">
                        <div style="padding: 15px 0; text-align: left;">
                          <h4>Verifying Your Phone Number</h4>
                        </div>
                      </div>

                      <div class="col-12 p-0">
                        <div style="padding: 5px 0; text-align: left;" class="text-muted">
                          <p>For your security, <strong>iFlex</strong> wants to make sure that it’s really you.
                            we have sent you OTP to <span>******<span id="phint"></span>.</span>
                            <i>Please Enter OTP</i> </p>
                        </div>
                      </div>

                      <div class="col-md-12 col-lg-12 p-0">
                        <div class="myusernamediv">
                          <input type="number" name="" id="otp" class="form-control rounded rounded-3 py-2 username OTP">
                          <span class="idspan">Enter OPT</span>
                          <label class="hide" id="OTPError">Please Fill this Field</label>
                        </div>
                      </div>


                      <div class="col-sm-12 justify-content-end d-flex justify-content-sm-end p-0 ">



                        <a class="btn btn-primary customregbtn mb-3 ancorcolor" id="SubmitOtp">Verify</a>
                      </div>

                    </div>







                    <div class="row PasswordForm hide1" id="">

                      <div class="col-md-12">
                        <div class="myusernamediv">
                          <input type="password" name="password" id="password"
                            class="form-control rounded rounded-3 py-2 username pass">
                          <span class="idspan ">Password</span>
                          <label class="hide" id="pemptyError">Please FIll this Field</label>
                        </div>
                      </div>

                      <div class="col-md-12 position-relative">
                        <div class="myusernamediv">
                          <input type="password" name="confirmpassword" id="confirmpassword"
                            class="form-control rounded rounded-3 py-2 username pass ">
                          <span class="idspan ">Confirm Password</span>
                          <label class="hide1" id="PasswordError">Passwords Must be same</label>
                          <label class="hide" id="cpemptyError">Please FIll this Field</label>
                        </div>

                        <div class="eyeicon">

                          <i style="font-size: 20px;" class="fi-rs-eye text-muted showpassword hide"></i>
                          <i style="font-size: 20px;" class="fi-rs-eye-crossed text-muted hidepassword"></i>


                        </div>
                      </div>



                      <div class="col-sm-12 justify-content-end d-flex justify-content-sm-end ">

                        <a class="btn btn-primary customregbtn mb-3 ancorcolor" id="Change">Submit</a>
                      </div>

                    </div>




                  </div>

                </form>


              </div>

              <div class="col-lg-5 col-md-12 regillus ">
                <div
                  style="height: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; ">


                  <div>
                    <img src="./assets/img/register.svg" style="width: 200px; margin-top: 100px;" alt="">
                  </div>
                  <div class="text-center pt-5 text-muted">
                    <p>Just one account and all of iFlex working for you.</p>
                  </div>
                </div>

              </div>

            </div>

          </div>

        </div>

      </div>


    </div>
  </div>






  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

  <script src="./assets/js/intlTelInput.min.js"></script>
  






  <script>
    window.otp="0";
    $(document).ready(function () {

    
      $("#FPOtp").click(function () {

        var status = true;
        if ($(".forgetID").val() == "") {
            $("#FPError").text("Please Fill this Field");
          $("#FPError").slideDown();
          status = false;
        } else {
            
            $("#FPOtp").text("Checking..");
            
        var id=$("#forgetID").val();
        $(document).ready(function() {

          $.ajax({
              url: '/checknsend',
              type: 'get',
              data: {
                iflex_id: id
                    },
              success: function(data) {
                 
                  if(data.otp==-1){
                      
                      $("#FPOtp").text("Next");
                      $("#FPError").text("Phone Number is Missing. Contact Support");
                     $("#FPError").slideDown();
                      
                  }else if(data.otp==0){
                      
                      $("#FPOtp").text("Next");
                      $("#FPError").text("Account Not Found");
                     $("#FPError").slideDown();            
                     
                  }else{
                      
                      $("#phint").text(data.phone);
                      data=(data.otp/7);
                      window.otp=data;
                      $("#FPError").slideUp();
                      $(".GotoOtp").addClass("hide1")
                      $(".OtpForm").removeClass("hide1")
                  }
                
              }
          });
      });

            
            
            
            
            
        
        }
      })



      $("#SubmitOtp").click(function () {

        var status = true;
        if ($(".OTP").val() == "") {
            $("#OTPError").text("Please Fill this Field");
          $("#OTPError").slideDown();
          status = false;
        } else {
            
          var user_otp=$("#otp").val();
          if(user_otp==otp & otp!=0){
            
          $("#OTPError").slideUp();
          $(".OtpForm").addClass("hide1");
          $(".PasswordForm").removeClass("hide1");
          
          
          }else{
              $("#OTPError").text("Wrong Otp");
            $("#OTPError").slideDown();    
          }
        }
      })



      $("#Change").click(function () {



        if( $("#password").val()==""){
            $("#pemptyError").slideDown();
            status=false;
          }
          else{            
            $("#pemptyError").slideUp(); 
            }
             

            if( $("#confirmpassword").val()==""){
              
              $("#cpemptyError").slideDown();
              $("#PasswordError").slideUp();
              status=false;
            }
            else{
              $("#cpemptyError").slideUp();
              var cpass=$("#confirmpassword").val();
              var pass=$("#password").val()
              if(pass!=cpass){
              
                $("#PasswordError").slideDown();
                $("#cpemptyError").slideUp();
                status=false;
              }else{
                $("#PasswordError").slideUp();
                
                document.getElementById("forget-form").submit();
                
                
                
                
              }
              
              }


})






    })
  </script>

<script src="./assets/js/Javascript.js"></script>

</body>

</html>