@extends('layouts.app')

@section('title', __('Two-Factor Authentication'))

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-5 col-md-7">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4 p-md-5">
                    <div class="text-center mb-4">
                        <div class="security-icon mx-auto mb-3">
                            <i class="fas fa-shield-alt"></i>
                        </div>

                        <h1 class="h4 fw-bold mb-2">
                            {{ __('Two-Factor Authentication') }}
                        </h1>

                        <p id="authenticatorDescription" class="text-muted mb-0">
                            {{ __('Enter the six-digit code generated by your authenticator application.') }}
                        </p>

                        <p id="recoveryDescription" class="text-muted mb-0 d-none">
                            {{ __('Enter one of your emergency recovery codes.') }}
                        </p>
                    </div>

                    @if($errors->any())
                        <div class="alert alert-danger" role="alert">
                            <ul class="mb-0 ps-3">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

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

                        <div class="mb-3">
                            <label for="code" class="form-label fw-semibold">
                                {{ __('Authentication code') }}
                            </label>

                            <input
                                id="code"
                                type="text"
                                name="code"
                                value="{{ old('code') }}"
                                class="form-control form-control-lg text-center
                                    @error('code') is-invalid @enderror"
                                inputmode="numeric"
                                autocomplete="one-time-code"
                                pattern="[0-9]{6}"
                                maxlength="6"
                                placeholder="000000"
                                aria-describedby="authenticatorDescription"
                                autofocus
                                required
                            >

                            @error('code')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-sign-in-alt me-1"></i>
                            {{ __('Verify and continue') }}
                        </button>
                    </form>

                    {{-- Recovery-code form --}}
                    <form
                        id="recoveryForm"
                        method="POST"
                        action="{{ route('two-factor.login.store') }}"
                        class="d-none"
                    >
                        @csrf

                        <div class="mb-3">
                            <label for="recovery_code" class="form-label fw-semibold">
                                {{ __('Recovery code') }}
                            </label>

                            <input
                                id="recovery_code"
                                type="text"
                                name="recovery_code"
                                value="{{ old('recovery_code') }}"
                                class="form-control form-control-lg
                                    @error('recovery_code') is-invalid @enderror"
                                autocomplete="one-time-code"
                                maxlength="255"
                                placeholder="{{ __('Enter a recovery code') }}"
                                aria-describedby="recoveryDescription"
                            >

                            @error('recovery_code')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-key me-1"></i>
                            {{ __('Use recovery code') }}
                        </button>
                    </form>

                    <div class="text-center mt-4">
                        <button
                            type="button"
                            id="toggleChallengeMethod"
                            class="btn btn-link text-decoration-none p-0"
                        >
                            {{ __('Use a recovery code instead') }}
                        </button>
                    </div>

                    <hr class="my-4">

                    <div class="text-center">
                        <a
                            href="{{ route('login') }}"
                            class="btn btn-sm btn-outline-secondary"
                        >
                            <i class="fas fa-arrow-left me-1"></i>
                            {{ __('Cancel and return to login') }}
                        </a>
                    </div>
                </div>
            </div>

            <p class="text-center text-muted small mt-3">
                <i class="fas fa-lock me-1"></i>
                {{ __('This additional verification helps protect your account.') }}
            </p>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .security-icon {
        align-items: center;
        background: rgba(13, 110, 253, 0.12);
        border-radius: 50%;
        color: #0d6efd;
        display: flex;
        font-size: 1.75rem;
        height: 64px;
        justify-content: center;
        width: 64px;
    }

    #code {
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: 0.5rem;
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const toggle = document.getElementById('toggleChallengeMethod');
        const authenticatorForm = document.getElementById('authenticatorForm');
        const recoveryForm = document.getElementById('recoveryForm');
        const authenticatorDescription = document.getElementById('authenticatorDescription');
        const recoveryDescription = document.getElementById('recoveryDescription');
        const code = document.getElementById('code');
        const recoveryCode = document.getElementById('recovery_code');

        if (
            !toggle ||
            !authenticatorForm ||
            !recoveryForm ||
            !authenticatorDescription ||
            !recoveryDescription ||
            !code ||
            !recoveryCode
        ) {
            return;
        }

        let usingRecoveryCode = @json(
            old('recovery_code') !== null || $errors->has('recovery_code')
        );

        function renderMethod() {
            authenticatorForm.classList.toggle('d-none', usingRecoveryCode);
            recoveryForm.classList.toggle('d-none', !usingRecoveryCode);
            authenticatorDescription.classList.toggle('d-none', usingRecoveryCode);
            recoveryDescription.classList.toggle('d-none', !usingRecoveryCode);

            toggle.textContent = usingRecoveryCode
                ? @json(__('Use an authenticator code instead'))
                : @json(__('Use a recovery code instead'));

            code.required = !usingRecoveryCode;
            recoveryCode.required = usingRecoveryCode;

            if (usingRecoveryCode) {
                recoveryCode.focus();
            } else {
                code.focus();
            }
        }

        toggle.addEventListener('click', function () {
            usingRecoveryCode = !usingRecoveryCode;
            renderMethod();
        });

        code.addEventListener('input', function () {
            this.value = this.value
                .replace(/\D/g, '')
                .slice(0, 6);
        });

        recoveryCode.addEventListener('input', function () {
            this.value = this.value.trim();
        });

        renderMethod();
    });
</script>
@endpush