@extends('layouts.login-screens')
@section('content')
 <!-- Content -->
 <div class="container-xxl">
  <div class="authentication-wrapper authentication-basic container-p-y">
    <div class="authentication-inner py-4">
      <!-- Forgot Password -->
      <!-- Logo -->
      <div class="card">
        <div class="card-body">
      <div class="app-brand justify-content-center">
        <a href="login.html" class="app-brand-link">
          <img src="{{asset('assets/dashboard/assets/img/elements/logo.jpg')}}"/>
        </a>

      </div>
      <!-- /Logo -->
      <h4 class="mb-2">Welcome to Deal Plexus! 👍</h4>
      <p class="mb-4">Please sign-in to your account</p>
      <form id="formAuthentication" onsubmit="verifyotpforforgot(); return false" class="mb-3" action="#" method="POST">
        <div class="mb-3">
          <label for="email" class="form-label">OTP</label>
          <input
          type="tel"
          class="form-control"
          id="optno"
          name="optno"
          maxlength="6"
          onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')"
          placeholder="Enter your OTP No"
          autofocus
          required
          />
        </div>
          <button
                  type="button"
                  class="btn btn-primary d-grid w-100"
                  data-bs-toggle="modal"
                  data-bs-target="#smallModal"
                  onclick="verifyotpforforgot()"
                >
                Verfiy OTP
          </button>
        </form>
      <div class="card">
        <div class="card-body">
          <div class="modal fade" id="smallModal_3" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-sm" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel2">Error</h5>
                  <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                  >X</button>
                </div>
                <div class="modal-body" id="body_msg">
                <p>Invalid OTP</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    Close
                  </button>
                  <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Ok</button>
                </div>
              </div>
            </div>
          </div>

          <div class="modal fade" id="smallModal_4" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-sm" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel2">Success</h5>
                  <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                  >X</button>
                </div>
                <div class="modal-body" id="body_msg">
                <p>Please reset your password</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    Close
                  </button>
                  <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Ok</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

      <!-- /Forgot Password -->
    </div>
  </div>
</div>

<!-- / Content -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<script type="text/javascript"> 
function verifyotpforforgot(){
            var username = "";
            var optno =$('#optno').val();
            $.ajax({
                type: 'post',
                url: "{{ route('verifyotpforforgot') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    username: username,
                    optno: optno,
                },
                success: function(data) {
                    if (data.status == true) {
                       $('#smallModal_4').modal('show');
                       $('#smallModal_4').on('hidden.bs.modal', function () {
                         // redirect...
                        window.location.href = "/change-password?"+"username="+username+"&otpno="+optno;
                      })  
                    } else {
                        $('#smallModal_3').modal('show');
                      
                    }
                }
            });
}
</script>
@endsection