@extends('admin.layouts.app')


@section('content')

<div class="row m-0">
  <!-- left section-login -->
  <div class="col-md-6 d-md-block d-none text-center align-self-center p-3">
  <div class="card-content">
    <img class="img-fluid" src="{{ url('assets/admin/assets/images/login.png') }}" alt="branding logo">
  </div>
  </div>
  <!-- right section image -->
  <div class="col-md-6 col-12 px-0">
  <div class="card disable-rounded-right mb-0 p-2 h-100 d-flex justify-content-center">
    <div class="card-header pb-1">
    <div class="card-title text-center mb-4 mt-2">
      <img src="{{ url('assets/admin/assets/images/sslwireless.png') }}" alt="" width="240">
    </div>
    </div>
    <div class="card-content">
    <div class="card-body">

      <form class="otc" name="one-time-code" action="#">

        <div class="row">
          <div class="col-lg-12 otp-div">
            <h5 class="text-center">One time password has been (OTP) sent to your mobile</h5> 
            <h6 class="text-center">Please Enter One Type Password (OTP) below: </h6> 

            <fieldset>
        
              <label for="otc-1">Number 1</label>
              <label for="otc-2">Number 2</label>
              <label for="otc-3">Number 3</label>
              <label for="otc-4">Number 4</label> 
              
              <div class="flex-row text-center">
              <input class="col-lg-3" type="number" pattern="[0-9]*"  value="" inputtype="numeric" autocomplete="one-time-code" id="otc-1" required>
          
              <!-- Autocomplete not to put on other input -->
              <input type="number" pattern="[0-9]*" min="0" max="9" maxlength="1"  value="" inputtype="numeric" id="otc-2" required>
              <input type="number" pattern="[0-9]*" min="0" max="9" maxlength="1"  value="" inputtype="numeric" id="otc-3" required>
              <input type="number" pattern="[0-9]*" min="0" max="9" maxlength="1"  value="" inputtype="numeric" id="otc-4" required>
              
              </div>
            </fieldset>
          </div> 
        </div> 
         

        <div class="d-flex justify-content-between mt-3 mb-3">
          <a id="changeNumber" class="mb-0 small font-weight-500" title="Change Number" href="#">Change Number</a>  
          <p id="otpTimer" class="small text-muted font-weight-500 mb-0">Resend OTP in <span id="countdown">30</span>s</p>
          <a id="resendOtp" class="small font-weight-500 d-none" title="Resend verification code" href="#">Resend OTP</a>           
        </div> 
        <button type="submit" class="btn btn-primary glow w-100 position-relative text-uppercase"> Verify</button>
      </form>




     
      <!-- <hr>
      <div class="text-center text-uppercase">
      <small class="mr-25">Don't have an account?</small>
      <a href="auth-register.html">
        <small>Sign up</small>
      </a>
      </div> -->
    </div>
    </div>
  </div>
  </div>
</div>

@endsection