@extends('frontend.layout')

@section('content')


		<div class="container-fuild">
			<div class=" w-100 overflow-hidden position-relative flex-wrap d-block vh-100">
				<div class="row">
                    <div class="col-lg-6 col-md-12 col-sm-12">
						<div class="row justify-content-center align-items-center vh-100 overflow-auto flex-wrap login-bg1 ">
							<div class="col-md-9 mx-auto p-4">
								<form id="forgot-password-form">
									<div>
										<div class=" mx-auto mb-5 text-center">
											<img id="company-logo" src="assets/img/full-logo.svg"
												class="img-fluid" alt="Logo">
										</div>
										<div class="card">
											<div class="card-body">
												<div class=" mb-4">
													<h2 class="mb-2">{{ __('Forgot Password?')}}</h2>
													<p class="mb-0 fs-16">{{ __('Enter your email, we will send you a otp to reset your password.')}}</p>
												</div>
                                                <div class="row">
                                                   
                                                    <div class="col-md-12">
                                                        <div class="mb-3">
                                                            <label class="form-label">{{ __('Email')}}</label>
                                                            <div class="input-icon mb-3 position-relative">
                                                                <input type="email" value="" class="form-control validate-input" id="email">
                                                                <span class="input-icon-addon">
                                                                    <i class="ti ti-mail"></i>
                                                                </span>
																<div class="invalid-feedback" id="emailError">
																	@error('email')
																		{{ $message }}
																	@enderror
																</div>
																<div class="valid-feedback"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                </div>
                                                											
												<button id="send-otp" type="submit" class="btn btn-primary w-100 justify-content-center">{{ __('Send Mail')}}</button>
                                                
											</div>
										</div>
										<div class="mt-5 text-center">
											<p class="mb-0 text-gray-9"> <i class="ti ti-circle-arrow-left"></i> {{ __('Back to')}} <a href="{{ route('signin')}}" class="link-primary">{{ __('Sign In')}}</a></p>
										</div>
									</div>
								</form>
							</div>

						</div>
					</div>
					<div class="col-lg-6 p-0">
						<div class="d-lg-flex align-items-center justify-content-center position-relative d-lg-block d-none flex-wrap vh-100 overflowy-auto login-bg2 ">
                            <div class="floating-bg">
								<img src="assets/img/bg/circle-1.png" alt="Img">
								<img src="assets/img/bg/circle-2.png" alt="Img">
								<img src="assets/img/bg/emoji-01.svg" alt="Img">
								<img src="assets/img/bg/emoji-02.svg" alt="Img">
								<img src="assets/img/bg/emoji-03.svg" alt="Img">
								<img src="assets/img/bg/emoji-04.svg" alt="Img">
								<img src="assets/img/bg/right-arrow-01.svg" alt="Img">
								<img src="assets/img/bg/right-arrow-02.svg" alt="Img">
                                
                            </div>
                            <div class="floating-avatar ">
                                <span class="avatar avatar-xl avatar-rounded border border-white">
									<img src="assets/img/profiles/avatar-12.jpg" alt="img">
								</span>
                                <span class="avatar avatar-xl avatar-rounded border border-white">
									<img src="assets/img/profiles/avatar-01.jpg" alt="img">
								</span>
                                <span class="avatar avatar-xl avatar-rounded border border-white">
									<img src="assets/img/profiles/avatar-02.jpg" alt="img">
								</span>
                                <span class="avatar avatar-xl avatar-rounded border border-white">
									<img src="assets/img/profiles/avatar-05.jpg" alt="img">
								</span>
                            </div>
							<div class="text-center">
								<img src="assets/img/bg/login-bg-1.svg" class="login-img" alt="Img">
							</div>
						</div>
					</div>

				</div>



			</div>
		</div>
		<script type="module" src="assets/js/firebase/firebaseForgotPassword.js" crossorigin="anonymous"></script>
@endsection