@extends('adminlte::auth.auth-page', ['auth_type' => 'login'])

@section('adminlte_css_pre')
    
@stop

@section('auth_header', 'Verifica in Due Passaggi')

@section('auth_body')
<div class="card-body">
    <p class="login-box-msg">Inserisci il codice di autenticazione per procedere</p>

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

    <div class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist">
        <a class="nav-item nav-link active" id="code-tab" data-toggle="pill" href="#code-content" role="tab">
            Codice Autenticazione
        </a>
        <a class="nav-item nav-link" id="recovery-tab" data-toggle="pill" href="#recovery-content" role="tab">
            Codice di Recupero
        </a>
    </div>

    <div class="tab-content" id="custom-tabs-two-tabContent">
        <div class="tab-pane fade show active" id="code-content" role="tabpanel">
            <form method="POST" action="{{ route('two-factor.login') }}" class="mt-3">
                @csrf
                <div class="input-group mb-3">
                    <input type="text" name="code" class="form-control @error('code') is-invalid @enderror" 
                           placeholder="Inserisci il codice di autenticazione" autofocus>
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-key"></span>
                        </div>
                    </div>
                    @error('code')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                <button type="submit" class="btn btn-primary btn-block">
                    Verifica Codice
                </button>
            </form>
        </div>
        <div class="tab-pane fade" id="recovery-content" role="tabpanel">
            <form method="POST" action="{{ route('two-factor.login') }}" class="mt-3">
                @csrf
                <div class="input-group mb-3">
                    <input type="text" name="recovery_code" class="form-control @error('recovery_code') is-invalid @enderror" 
                           placeholder="Inserisci un codice di recupero">
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-undo"></span>
                        </div>
                    </div>
                    @error('recovery_code')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                <button type="submit" class="btn btn-warning btn-block">
                    Usa Codice di Recupero
                </button>
            </form>
        </div>
    </div>
</div>
@endsection

@section('auth_footer')
    <p class="mb-1">
        <a href="{{ route('login') }}">Torna al login</a>
    </p>
@endsection