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

@section('content')

<div class="main-card"> 
    <h1 class="text-center mb-5 page_title">Forgot Password</h1>
    
    <div class="row justify-content-center">
        <div class="col-lg-6"> 
            <div class="card content-card-otherpage border-0 shadow text-start">
                <div class="card-body d-flex flex-column">
                    <h6 class="m-b-5">Forgot your password? Enter your email you signed up with '{{ config('common.portal') }}'</h6>
                    <p class="text-muted">
                        This protects your account from unauthorized access.
                    </p>
                    <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>
<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