@extends('layouts.login-screens')
@section('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" 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" 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 class="btn btn-primary d-grid w-100" onclick="getuserloginotp()" type="button" >Send OTP</button>
              </form>
              <div class="text-center">
                <a href="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 -->



          <!-- modal start otp   -->



<div class="container">
  <!-- Trigger the modal with a button -->
  <!-- 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">
              <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()">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>
        </div>
        <div class="modal-body">
           <div class="card">
            <div class="card-body">
          <a href="/" class="app-brand-link">
              <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>







<!-- modal end  --> 
        </div>
      </div>



    </div>

<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();
            $.ajax({
                type: 'post',
                url: "{{ route('userloginwithotp') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    username: username,
                },
                success: function(data) {
                    if (data.status == true) {
                        toast_success(" Forgot-Password ", "OTP Sended To Your Credentials");
                       $('#userotpfrom').modal("show"); 
                    } else {
                   toast_error(" Forgot-Password ", "Invalid Credentials"); 
                       $('#userotpfrom').modal("hide"); 
                    }
                }
            });
}

  
function verifyotpforforgot(){
            var username =$('#userloginotp').val();
            var optno =$('#optno').val();
            // var remember = formContainer.find('input[name="remember"]').val();
            $.ajax({
                type: 'post',
                url: "{{ route('verifyotpforforgot') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    username: username,
                    optno: optno,
                },
                success: function(data) {
                    if (data.status == true) {
                       toast_success(" Forgot-Password ", "OTP IS Verfiyed");
                        $('#userotpfrom').modal("hide");  
                        $('#changepwdmodal').modal("show");  
                    } else {
                   toast_error(" Forgot-Password ", "Invalid OTP"); 
                    }
                }
            });
}


function changespaawsord(){
           var username =$('#userloginotp').val();
            var optno =$('#optno').val();
            var password =$('#password').val();
            var password_confirmation =$('#password_confirmation').val();
            if(password !== password_confirmation){
                toast_error(" Forgot-Password ", "Invalid Password Not Match"); 
              return true; 
            }
            $.ajax({
                type: 'post',
                url: "{{ route('changespaawsord') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    password: password,
                    username: username,
                    optno: optno
                },
                success: function(data) {
                    if (data.status == true) {
                         toast_success(" Forgot-Password ", "Your Password Has Changed");
                        window.location = "login"; 
                    } else {
                      toast_error(" Forgot-Password ", "Invalid Password Not Match"); 
                    }
                }
            });
}


 

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