@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 -->
      <div class="card">
        <div class="card-body">
          <!-- Logo -->
          <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">Forgot Password? 🔒</h4>
          <p class="mb-4">Enter your Email or Contact No. and we'll send you instructions to reset your password</p>
          <form id="formAuthentication" onsubmit="getuserloginotp(); return false" class="mb-3" action="#" method="POST">
            <div class="mb-3">
              <label for="email" class="form-label">Email / Mobile No.</label>
              <input
                type="text"
                class="form-control"
                id="userloginotp"
                name="userloginotp"
                placeholder="Enter your Email/mobile No."
                autofocus
              />
            </div>
            
          
        <button
                      type="button"
                      id="send_otp"
                      class="btn btn-primary d-grid w-100"
                      data-bs-toggle="modal"
                      data-bs-target="#smallModal"
                      onclick="getuserloginotp()"
                    >
                        Send OTP
                    </button>
                  </form>
           <div class="modal fade" id="smallModal_1" 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>This email id/phone no. is not registered with us</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_2" 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>OTP sent to your email/phone</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_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 class="text-center">
            <a href="{{url('login')}}" class="d-flex align-items-center justify-content-center">
              <i class="bx bx-chevron-left scaleX-n1-rtl bx-sm"></i>
              Back to login
            </a>
          </div>
        </div>
      </div>
      <!-- /Forgot Password -->
    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="userotpfrom" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" onclick="hidemodal()" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
           <div class="card">
            <div class="card-body">
              <div class="app-brand justify-content-center">
                 <a href="/" class="app-brand-link mb-3">
              <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>
                <div class="mb-3">
                  <label for="email" class="form-label">OTP No.</label>
                  <input
                    type="number"
                    class="form-control"
                    id="optno"
                    name="optno"
                    placeholder="Enter your OTP No"
                    autofocus
                    required
                  />
                </div>
                 <div class="mb-3">
                  <button class="btn btn-primary d-grid w-100" type="button" onclick="verifyotpforforgot()" data-bs-dismiss="modal">Verfiy OTP</button>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="changepwdmodal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <!--<button type="button" onclick="hidemodal()" class="close" data-dismiss="modal">&times;</button>-->
          <h4>Please reset your password</h4>
        </div>
        <div class="modal-body">
           <div class="card">
            <div class="card-body">
          <a href="/" class="app-brand-link mb-3">
              <img src="{{asset('assets/dashboard/assets/img/elements/logo.jpg')}}"/>
            </a>
                <div class="mb-3">
                  <label for="email" class="form-label">New Password.</label>
                  <input
                    type="password"
                    class="form-control"
                    id="password"
                    name="password"
                    placeholder="Enter your password."
                    autofocus
                  />
                </div>
               <div class="mb-3">
                  <label for="email" class="form-label">Confirm Password.</label>
                  <input
                    type="password"
                    class="form-control"
                    id="password_confirmation"
                    name="password_confirmation"
                    placeholder="Enter your password."
                    autofocus
                  />
                </div>
                <button class="btn btn-primary d-grid w-100" onclick="changespaawsord()" type="button" >Save changes</button>
              </div>
            </div>
        </div>
      </div>
    </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 getuserloginotp(){
            var username =$('#userloginotp').val();
            $('#send_otp').attr('disabled','disabled');
            $.ajax({
                type: 'post',
                url: "{{ route('userloginwithotp') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    username: username,
                },
                success: function(data) {
                    if (data.status == true) {
                       $('#smallModal_2').modal('show');
                       $('#smallModal_2').on('hidden.bs.modal', function () {
                        // redirect...
                         window.location.href = "/otp-verify?"+"username="+username;
                        })
                    } else {
                       $('#smallModal_1').modal("show"); 
                       $('#userotpfrom').modal("hide"); 
                       $('#smallModal_1').on('hidden.bs.modal', function () {
                         $('#send_otp').removeAttr('disabled');
                       })
                    }
                }
            });
}

// function hidemodal(){
//     $('#userotpfrom').modal("hide");
// }

function hidemodal_1(){
    $('#userotpfrom').modal("hide");
}
  
</script>
@endsection