@extends('eliteadmin::layouts.auth')

@section('title', 'Two-Factor Verification')
@section('brand_heading', 'Verify your identity')
@section('brand_description', 'Enter the 6-digit code sent to your WhatsApp number to complete sign in.')

@section('content')
    <div class="auth-card">
        <div class="auth-card-header">
            <h1 class="auth-title">WhatsApp verification</h1>
            <p class="auth-subtitle">We sent a code to {{ $phoneHint }}</p>
        </div>

        @if (session('status'))
            <x-eliteadmin::alert type="success" :message="session('status')" class="mb-3" />
        @endif

        @if (session('error'))
            <x-eliteadmin::alert type="danger" :message="session('error')" class="mb-3" />
        @endif

        @if ($errors->any())
            <x-eliteadmin::alert type="danger" :dismissible="false" class="mb-3">
                {{ $errors->first() }}
            </x-eliteadmin::alert>
        @endif

        <form class="auth-form" action="{{ route('two-factor.verify') }}" method="POST" novalidate>
            @csrf

            <div class="form-group">
                <label for="code" class="form-label">Verification code</label>
                <input type="text" name="code" id="code"
                       class="form-control text-center @error('code') is-invalid @enderror"
                       inputmode="numeric" pattern="[0-9]{6}" maxlength="6"
                       placeholder="000000" autocomplete="one-time-code" required autofocus>
                @error('code')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
            </div>

            <button type="submit" class="btn btn-primary btn-block">Verify and continue</button>
        </form>

        <form action="{{ route('two-factor.resend') }}" method="POST" class="mt-3 text-center">
            @csrf
            <button type="submit" class="btn btn-link auth-link p-0">Resend code</button>
        </form>

        <p class="auth-footer-text mt-3 mb-0">
            <a href="{{ route('login') }}" class="auth-link">Back to sign in</a>
        </p>
    </div>
@endsection