@extends('auth.auth_layout')
@section('title')
	Reset 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 - Reset Password Form -->
						<div class="col-md-6">
							<div class="card-body p-5">
								<form action="{{ route('password_update') }}" id="reset-password-form" method="POST">
									@csrf
									<input type="hidden" name="token" value="{{ $token ?? '' }}">
									<input type="hidden" name="email" value="{{ $email }}"/>
									
									<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">Reset Your Password</h2>
										<p class="mb-0 text-muted">Please enter a new password for your account.</p>
									</div>
									
									<div class="mb-3">
										<label class="form-label">Email Address</label>
										<input type="text" class="form-control" name="email" value="{{ $email }}" disabled placeholder="Email address">
										<span class="error-validation" id="email-error"></span>
									</div>
									
									<div class="mb-3">
										<label class="form-label">Password</label>
										<div class="pass-group">
											<input type="password" class="pass-input form-control" name="password" id="password" placeholder="Password">
											<span class="ti toggle-password ti-eye-off"></span>
										</div>
										<span class="error-validation" id="password-error">
											@error('password')
												{{ $message }}
											@enderror
										</span>
									</div>
									
									<div class="mb-3">
										<label class="form-label">Confirm Password</label>
										<div class="pass-group">
											<input type="password" class="pass-inputs form-control" name="password_confirmation" id="password_confirmation" placeholder="Confirm Password">
											<span class="ti toggle-passwords ti-eye-off"></span>
										</div>
										<span class="error-validation" id="password_confirmation-error">
											@error('confirm_password')
												{{ $message }}
											@enderror
										</span>
									</div>
									
									<div class="mb-4">
										<button class="btn btn-primary w-100" type="submit" id="resetButton">Reset Password</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/reset-password.js?v='.config('api.version')) }}"></script>
@endpush