<!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>Verify Phone | iFlexApps</title>
</head>

<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">
                <div class="row text-center text-lg-left">
                  <div class="col-12">

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

                  </div>
                </div>
                
                <form method="post"  action="{{ route('update_verification') }}" class="w-100 mt-5 form-div form" id="verification-form">
                  @csrf
                  <div class="container p-0">

                    <div class="row tophoneform1" id="registerform1">
                    <div class="col-md-12">
                    <p>You're just one step away from iFlex products. <br>Verify Your phone number now!</p>
                    <p>We always try to make our system more secure for you. Once you will verify your phone number so you can easily access all the applications of iFlex.</p>
                    <p>Verify Now!</p>
                    </div>
                    
                      <div class="col-sm-6">
                        <input type="hidden" id="senderphone" value="{{$user->phone}}">
                        <a class="btn btn-primary customregbtn mb-3 ancorcolor" id="gotoOTP" style="max-height:38px;">Send OTP</a>
                      </div>
                     

                    </div>




                    <div class="row p-4  hide1" id="phonenumnform1">



                      <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.
                            <strong>iFlex</strong> will send a text message with a 6-digit verification code.
                            <i>Standard rates may apply</i> </p>
                        </div>
                      </div>


                      <!--<div class="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-6 justify-content-center d-flex justify-content-sm-start p-0">

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

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

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




                    </div>




                    <div class="row p-4 hide1" 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.
                            <strong>iFlex</strong> will send a text message with a 6-digit verification code.
                            <i>Standard rates may apply</i> </p>
                        </div>
                      </div>



                      <div class="col-lg-12 p-0">
                        <div class="col-md-6 col-lg-6 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-6 justify-content-center d-flex justify-content-sm-end p-0 ">

                        <a type="submit" onclick="check_otp()" class="btn btn-primary mb-3 customregbtn form ">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: 60px;" alt="">
                  </div>
                  <div class="text-center pt-5 text-muted">
                     <p>A single <strong>iFlex ID</strong> and password gives you access, to all iFlex Products and Services.</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 src="./assets/js/Javascript.js"></script>





</body>

</html>

