@extends('auth.auth_layout')
@section('title')
	2FA 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 - 2FA Form -->
						<div class="col-md-6">
							<div class="card-body p-5">
								<form action="{{ route('login2fa.post') }}" id="login2fa-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">2-Factor-Authentication</h2>
										<p class="mb-0 text-muted">Please enter the <strong>OTP</strong> generated on your Authenticator App.</p>
										<p class="mb-0 text-muted">Ensure you submit the current one because it refreshes every 30 seconds.</p>
									</div>
									
									<div class="mb-3">
										<label class="form-label">Enter OTP <span class="text-danger">*</span></label>
										<input type="number" class="form-control" name="otp" placeholder="Enter OTP">
										@error('otp')
											<span class="error">{{ $message }}</span>
										@enderror
									</div>
									
									<div class="mb-3 row">
										<div class="col-md-6">
											<button class="btn btn-primary w-100">Verify OTP</button>
										</div>
										<div class="col-md-6">
											<a href="{{ route('logout') }}" class="btn btn-outline-primary w-100">Back To Sign In</a>
										</div>
									</div>
									
									<div class="text-center mb-3">
										Lost access to your 2FA code?
										<a class="hover-a" href="{{ route('recover2fa') }}">Recover Account</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/login2fa.js') }}"></script>
@endpush