@extends('user.layouts.applogin-newui')

@section('content')
 <section data-test="page-section" data-section-theme="white" class="page-section 
         full-bleed-section
         layout-engine-section
         background-width--full-bleed
         section-height--small
         content-width--wide
         horizontal-alignment--center
         vertical-alignment--middle
         white">
      <div class="section-border">
         <div class="section-background">
         </div>
      </div>  
      <div class="content-wrapper" style="">
          <div class="content content_over_wrapper">
             <div data-fluid-engine="true"> 
                 <div class="fluid-engine fe-66608f2b92ee81c96a558808"> 
                 <div class="fe-block fe-block-66608f2b3d44970e371204eb m-b-40" style="mix-blend-mode: normal;">
                     <h1 class="text-center mb-5 page_title" id="candidate-detail-title">Forgot Password</h1>
                     <div class="row justify-content-center">  
                        <p class="text-muted mx-auto col-10 col-md-10 col-lg-10 text-center"><strong>Forgot your password? Enter your email you signed up with '{{ config('common.portal') }}'</strong></p>
                        <p class="text-muted mx-auto col-10 col-md-10 col-lg-10 text-center">This protects your account from unauthorized access. </p> 
                     </div> 
                 </div> 
                <div class="fe-block fe-block-66608f2b8dbb5260ed880dc5">
                    <div class="sqs-block website-component-block sqs-block-website-component sqs-block-code code-block" data-block-type="1337" data-definition-name="website.components.code" data-sqsp-block="code" id="block-66608f2b8dbb5260ed880dc5">
                       <div class="sqs-block-content">
                           <div class="row justify-content-center">
                                <div class="col-lg-8">
                                    <div class="card content-card-otherpage border-0 shadow text-start">
                                        <div class="card-body d-flex flex-column">
                                            <form class="d-flex flex-column"> 
                                                <div class="mb-3">
                                                    <label class="form-label text-start">Email Address <span class="text-danger text-required">*</span></label>
                                                    <input type="email" class="form-control" placeholder="Enter your email address">
                                                </div>  
                                                 <div class="mb-3">
                                                    {!! NoCaptcha::renderJs() !!}
                                                    {!! NoCaptcha::display(['data-theme' => 'light']) !!} 
                                                    <div class="help-block with-errors">
                                                        @if ($errors->has('g-recaptcha-response')) {{ $errors->first('g-recaptcha-response') }} @endif
                                                    </div>  
                                                </div>
                                                <button class="btn btn-info align-self-start">
                                                    Continue to Reset Password
                                                </button>

                                                <div class="mt-5">
                                                    <p>Don't remember your email address, <a href="mailto:admin@yopmail.com">contact us</a> <br/> If remember your email address, Please <a href="{{ route("login.newui") }} ">click here</a> to login.</p> 
                                                </div>
                                            </form> 
                                        </div>
                                    </div>
                                </div>
                            </div> 
                        </div>
                    </div>
                </div>
           </div>
        </div>
     </div>
  </div>
</section> 
<script type="text/javascript">
$(document).on('click', '.toggle-password', function () { 
    $(this).toggleClass("fa-eye fa-eye-slash");

    let input = $($(this).attr("toggle"));

    if (input.attr("type") === "password") {
        input.attr("type", "text");
    } else {
        input.attr("type", "password");
    }
});
</script> 
@endsection