@extends('auth.auth_layout')
@section('title')
	Forgot Password - HRMS
@endsection
@section('auth_content')
	<!-- Main Wrapper -->
	<div class="main-wrapper" data-color="primary" style="min-height: 100vh; display: flex; flex-direction: column;">
		<div class="pt-5">
			@include('partials.new_alerts')
		</div>
		<div class="container-fluid flex-grow-1 d-flex align-items-center">
			<div class="d-flex justify-content-center w-100 p-4">
				<div class="card shadow-lg border-0" style="max-width: 900px; width: 100%;">
					<div class="row g-0">
						<!-- Left Section - Forgot Password Form -->
						<div class="col-md-6">
							<div class="card-body p-5">
								<form action="{{ route('forgot_password.post') }}" id="forgot-password-form" method="POST">
									@csrf
									<div class="text-center mb-4">
										<img src="{{ asset('assets/img/logo.png') }}" class="img-fluid mb-3" alt="Logo" style="max-height: 50px;">
									</div>
									
									<div class="mb-4 text-center">
										<h2 class="mb-2">Forgot your password?</h2>
										<p class="mb-0 text-muted">Enter your email and we'll send you instructions to reset your password.</p>
									</div>
									
									<div class="mb-3">
										<label class="form-label">Email Address</label>
										<input type="text" class="form-control" name="email" value="{{ old('email') }}" placeholder="Email address">
										<span class="error-validation" id="email-error"></span>
									</div>
									
									<div class="mb-4">
										<button class="btn btn-primary w-100" type="submit" id="send-link-button">Send Reset Link</button>
									</div>
									
									<div class="text-center mb-3">
										Remember your password?
										<a class="hover-a" href="{{ route('login') }}">Sign In</a>
									</div>
								</form>
							</div>
						</div>
						
						@include('auth.partials.hrms_content')
					</div>
				</div>
			</div>
		</div>
		@include('auth.partials.footer')
	</div>
	<!-- /Main Wrapper -->

@endsection

@push('auth_js')
    <script src="{{ asset('assets/validation/forgot-password.js?v='.config('api.version')) }}"></script>
@endpush