@extends('auth.layout.app')

@section('title', config('app.name') . ' - Two Factor Authentication')

@section('content')
<div class="kt-card max-w-md w-full">
    <div class="kt-card-content flex flex-col gap-2 p-10">

        <img alt="image" class="h-20 mb-2" src="{{asset('assets/media/illustrations/34.svg')}}">
        {{-- Header pour le code d'authentification --}}
        <div id="auth-code-header" @if($errors->has('recovery_code')) style="display: none;" @endif>
            <div class="text-center">
                <h3 class="text-2xl font-semibold text-gray-900 mb-2">
                    {{ __('Authentication Code') }}
                </h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    {{ __('Enter the authentication code provided by your authenticator application.') }}
                </p>
            </div>
        </div>

        {{-- Header pour le code de récupération --}}
        <div id="recovery-code-header" @if(!$errors->has('recovery_code')) style="display: none;" @endif>
            <div class="text-center mb-2">
                <h3 class="text-2xl font-semibold text-gray-900 mb-2">
                    {{ __('Recovery Code') }}
                </h3>
                
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    {{ __('Please confirm access to your account by entering one of your emergency recovery codes.') }}
                </p>
            </div>
        </div>

        <form method="POST" action="{{ route('two-factor.login.store') }}">
            @csrf

            <div class="space-y-5 text-center">
                {{-- Section code d'authentification (6 chiffres OTP) --}}
                <div id="auth-code-section" @if($errors->has('recovery_code')) style="display: none;" @endif>
                    <div class="flex items-center justify-center my-5">
                        <label class="sr-only">{{ __('OTP Code') }}</label>
                        <div class="flex flex-wrap justify-center gap-2.5">
                            @for ($i = 0; $i < 6; $i++)
                                <input
                                    class="kt-input focus:border-primary/10 focus:ring-3 focus:ring-primary/10 size-11 shrink-0 px-0 text-center"
                                    maxlength="1"
                                    name="code_{{ $i }}"
                                    type="text"
                                    inputmode="numeric"
                                    pattern="[0-9]"
                                    autocomplete="off"
                                    oninput="handleOtpInput(this, {{ $i }})"
                                    onkeydown="handleOtpBackspace(event, this)"
                                    onpaste="handleOtpPaste(event)"
                                    @if($i === 0) id="first-otp-input" @endif
                                >
                            @endfor
                        </div>
                        {{-- Champ caché pour soumettre le code complet --}}
                        <input type="hidden" name="code" id="code-hidden">
                    </div>

                    @error('code')
                        <p class="text-sm text-red-600 dark:text-red-400">
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                {{-- Section code de récupération --}}
                <div id="recovery-code-section" @if(!$errors->has('recovery_code')) style="display: none;" @endif>
                    <div class="my-5">
                        <input
                            type="text"
                            name="recovery_code"
                            id="recovery-code-input"
                            class="kt-input kt-input-lg w-full"
                            autocomplete="one-time-code"
                            value="{{ old('recovery_code') }}"
                            placeholder="{{ __('Enter recovery code') }}"
                            @if($errors->has('recovery_code')) required @endif
                        />
                    </div>

                    @error('recovery_code')
                        <p class="text-sm text-red-600">
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <button type="submit" class="kt-btn kt-btn-primary w-full">
                    {{ __('valid code') }}
                </button>
            </div>
            <div class="mt-5 space-x-0.5 text-sm leading-5 text-center">
                <span class="text-xs text-secondary-foreground">{{ __('or you can') }}</span>
                <div class="text-xs kt-link hover:underline">
                    <span id="toggle-to-recovery" onclick="toggleInputMode(true)" @if($errors->has('recovery_code')) style="display: none;" @endif>
                        {{ __('login using a recovery code') }}
                    </span>
                    <span id="toggle-to-auth" onclick="toggleInputMode(false)" @if(!$errors->has('recovery_code')) style="display: none;" @endif>
                        {{ __('login using an authentication code') }}
                    </span>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
    @vite('resources/js/modules/auth/two-factor-auth.js')
@endpush