@php $pageName = 'Two-Factor Authentication' @endphp
@extends('layouts.auth_app')

@section('content')
<div class="container h-p100">
    <div class="row align-items-center justify-content-md-center h-p100">
        <div class="col-lg-5 col-md-8 col-12">
            <div class="login-box shadow-lg rounded bg-white p-4">
                <div class="login-box-body text-center">
                    <h3 class="text-success fw-bold mb-3">Two-Factor Authentication</h3>
                    <p class="text-muted mb-4">
                        {{ __('Please enter the OTP sent to your email to proceed. If you didn\'t receive the email, you
                        can request another one below.') }}
                    </p>

                    <!-- OTP Form -->
                    <form method="POST" action="{{ route('verify.sent.otp') }}">@csrf
                        <div class="form-group mb-3">
                            <x-input-label for="otp" :value="__('Enter OTP')" />
                            <x-text-input id="otp" class="form-control rounded text-center fw-bold fs-5"
                                placeholder="Enter OTP" type="text" name="otp" :value="old('otp')" required autofocus />
                            <x-input-error :messages="$errors->get('otp')" class="mt-2 text-danger" />
                        </div>

                        <input type="hidden" name="user_id" value="{{ $user_id }}">

                        <div class="row">
                            <div class="col-12 text-center mb-3">
                                <button type="submit" class="btn btn-primary w-100 fw-bold py-2">
                                    {{ __('Proceed') }}
                                </button>
                            </div>
                        </div>
                    </form>

                    <!-- Resend OTP -->
                    <form method="POST" action="{{ route('resend.otp', $user_id) }}">
                        @csrf
                        <button type="submit" class="btn btn-success w-100 fw-bold py-2">
                            {{ __('Resend OTP') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection