@extends('layout')

@section('title', __('store/two-factor.verify_title'))

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-5">
            <div class="card shadow-sm border-0">
                <div class="card-body p-4">
                    <div class="text-center mb-4">
                        <div class="rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 64px; height: 64px; background: var(--bs-primary-bg-subtle);">
                            <i class="fas fa-shield-alt fa-2x text-primary"></i>
                        </div>
                        <h4 class="mb-1">{{ __('store/two-factor.verify_title') }}</h4>
                        <p class="text-muted">
                            @if(($method ?? 'totp') === 'totp')
                                {{ __('store/two-factor.verify_description') }}
                            @else
                                {{ __('store/two-factor.verify_channel_description', ['method' => __('store/two-factor.method_' . $method), 'target' => $maskedTarget ?? '']) }}
                            @endif
                        </p>
                    </div>

                    @if(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif
                    @if(session('warning'))
                        <div class="alert alert-warning">{{ session('warning') }}</div>
                    @endif
                    @if($errors->any())
                        <div class="alert alert-danger">
                            @foreach($errors->all() as $error)
                                <div>{{ $error }}</div>
                            @endforeach
                        </div>
                    @endif

                    <form method="POST" action="{{ route('store.auth.2fa.verify.post') }}">
                        @csrf

                        <div class="mb-3">
                            <label for="code" class="form-label">{{ __('store/two-factor.code_label') }}</label>
                            <input type="text" class="form-control form-control-lg text-center @error('code') is-invalid @enderror"
                                   id="code" name="code" maxlength="8" autocomplete="one-time-code"
                                   placeholder="000000" autofocus>
                            @error('code')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text small">{{ __('store/two-factor.backup_code_hint') }}</div>
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-check me-1"></i>{{ __('store/two-factor.verify_button') }}
                            </button>
                        </div>
                    </form>

                    @if(($method ?? 'totp') !== 'totp')
                        <div class="text-center mt-3">
                            <form method="POST" action="{{ route('store.auth.2fa.resend') }}">
                                @csrf
                                <button type="submit" class="btn btn-link btn-sm">
                                    <i class="fas fa-paper-plane me-1"></i>{{ __('store/two-factor.resend_button') }}
                                </button>
                            </form>
                        </div>
                    @endif

                    <div class="text-center mt-3">
                        <form method="POST" action="{{ route('store.auth.logout') }}">
                            @csrf
                            <button type="submit" class="btn btn-link text-muted btn-sm">
                                <i class="fas fa-sign-out-alt me-1"></i>{{ __('store/two-factor.use_different_account') }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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