@extends('auth.auth_layout')
@section('title')
	Login - 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 - Login Form -->
						<div class="col-md-6">
							<div class="card-body p-5">
								<form action="{{ route('login.post') }}" id="login-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;">
										<!-- New Alert System -->
									</div>
									
									<div class="mb-4 text-center">
										<h2 class="mb-2">Sign In</h2>
										{{-- <p class="mb-0 text-muted">Please enter your details to sign in.</p> --}}
									</div>
									
									<div class="mb-3">
										<label class="form-label">Email Address</label>
										<input type="text" value="" class="form-control" name="email" 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" placeholder="Password">
											<span class="ti toggle-password ti-eye-off"></span>
										</div>
										<span class="error-validation" id="password-error"></span>
									</div>
									
									<div class="mb-4">
										<button class="btn btn-primary w-100">Sign In</button>
									</div>
									
									<div class="text-center mb-3">
										<a class="hover-a" href="{{ route('forgot_password') }}">Forgot Password?</a>
									</div>
								</form>
							</div>
						</div>
						
						@include('auth.partials.hrms_content')
					</div>
					
					<!-- Footer -->
					{{-- <div class="card-footer bg-transparent text-center py-3">
						<p class="mb-0 text-muted small">Don't have an account? <a href="#" class="text-primary">Contact Admin</a></p>
					</div> --}}
				</div>
			</div>
		</div>
		@include('auth.partials.footer')
	</div>
	<!-- /Main Wrapper -->

@endsection

@push('auth_js')
	<script src="{{ asset('assets/validation/login.js') }}"></script>
@endpush