<!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>Change Phone | 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>

@include('dashboard-layout.navbar')
  <div class="container" style="display: flex; justify-content: center; align-items: center ; height: 100%; margin-top:55px;">

    <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>Change Phone</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="password" name="password" id="password"
                            class="form-control rounded rounded-3 py-2 username forgetID ">
                          <span class="idspan">Enter Your Password</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>Enter Your New 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.
                            iFlex will send a text message with a 6-digit verification code. Standard rates may apply
                             </p>
                        </div>
                      </div>

                      <div class="col-md-12 col-lg-12 p-0">
                        <div class="phonediv">
                          <input id="phone-s" class="form-control" id="selectedflag" type="tel">
                          <!-- <label class="hide1" id="NumberError">Please Enter valid number</label> -->
                          <span id="valid-msg" class="hide">✓ Valid</span>
                          <span id="error-msg" class="hide"></span>

                          <input type="hidden" id="senderphone" name="senderphone">
                        </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 position-relative">
                        
                        <div class="col-md-12 col-lg-12 p-0">
                          <div class="myusernamediv">
                            <input type="number" name="otp" id="otp"
                              class="form-control rounded rounded-3 py-2 username" >
                            <span class="idspan">Enter OPT</span>
                          </div>
                        </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 type="text/javascript">
    
    var input = document.querySelector("#phone-s"),
      errorMsg = document.querySelector("#error-msg"),
      validMsg = document.querySelector("#valid-msg");

    // here, the index maps to the error code returned from getValidationError - see readme
    var errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];

    // initialise plugin
    var heheh = window.intlTelInput(input, {
      separateDialCode: true,
      hiddenInput: "sender-phone",
      utilsScript: "/assets/js/utils.js"
    });

    var reset = function () {
      input.classList.remove("error");
      errorMsg.innerHTML = "";
      errorMsg.classList.add("hide");
      validMsg.classList.add("hide");
    };

    // on blur: validate
    input.addEventListener('keyup', function () {
      reset();
      if (input.value.trim()) {
        if (heheh.isValidNumber()) {
          validMsg.classList.remove("hide");
          window.st=true;
        } else {
          window.st=false;
          input.classList.add("error");
          var errorCode = heheh.getValidationError();
          errorMsg.innerHTML = errorMap[errorCode];
          errorMsg.classList.remove("hide");
        }
      }
    });

    // on keyup / change flag: reset
    input.addEventListener('change', reset);
    // input.addEventListener('keyup', reset);

    // end of tel input

  </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 pass=$("#password").val();
        $(document).ready(function() {

          $.ajax({
              url: '/checkpassword',
              type: 'get',
              data: {
                password: pass
                    },
              success: function(data) {
                 
                  if(data=="0"){
                      $("#FPError").text("Wrong Password");
                      $("#FPError").slideDown();
                      $("#FPOtp").text("Next");
                      
                      
                  }else if(data=="1"){
                      
                      $("#FPError").slideUp();
                      $(".GotoOtp").addClass("hide1")
                      $(".OtpForm").removeClass("hide1")  
                     
                  }
                
                    }
                });
            });
            
            
            
        
        }
      })



      $("#SubmitOtp").click(function () {
        
        
        
         var ph=heheh.getNumber();
         
  $("#senderphone").val(ph);

  if(st){

    $(document).ready(function() {

          $.ajax({
              url: '/sendotp',
              type: 'get',
              data: {
                phone: ph
                    },
              success: function(data) {
                data=(data/7);
                window.otp=data;
              }
          });
      });


          $(".OtpForm").addClass("hide1");
          $(".PasswordForm").removeClass("hide1");
  
    }else{
        $("#phone-s").css("border-color", "red");
    }

      })



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

         var enter_otp=$("#otp").val();
        if(enter_otp==otp & otp!=0){
        $("#Change").text("Wait..");            
            var ph=heheh.getNumber();
            var pass=$("#password").val();

        $(document).ready(function() {

          $.ajax({
              url: '/update_phone',
              type: 'get',
              data: {
                phone: ph,
                password: pass
                    },
              success: function(data) {
                if(data=="1"){
                    window.location.href="/dashboard";
                }else{
                    $("#Change").text("Submit");            
                }
              }
          });
        });
            
        }else{
            $("#otp").css('border-color','red');
        }
        
        
        })



    })
  </script>

<script src="./assets/js/Javascript.js"></script>
@include('dashboard-layout.footer')
</body>

</html>