@extends('layouts.app')

@section('title', 'İki Faktörlü Kimlik Doğrulama')

@section('content')
<div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
        <div>
            <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100">
                İki Faktörlü Kimlik Doğrulama
            </h2>
            <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
                Lütfen kimlik doğrulama uygulamanızdan 6 haneli kodu girin
            </p>
        </div>
        <form class="mt-8 space-y-6" method="POST" action="{{ route('two-factor.verify.post') }}">
            @csrf
            <div>
                <label for="code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Doğrulama Kodu
                </label>
                <input 
                    id="code" 
                    name="code" 
                    type="text" 
                    required 
                    maxlength="6"
                    autocomplete="off"
                    autofocus
                    class="appearance-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm text-center text-2xl tracking-widest" 
                    placeholder="000000">
                @error('code')
                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>

            <div class="text-sm text-center">
                <p class="text-gray-600 dark:text-gray-400">
                    Kurtarma kodunuz mu var? 
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">
                        Kurtarma kodu kullan
                    </a>
                </p>
            </div>

            <div>
                <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    Doğrula
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.getElementById('code').addEventListener('input', function(e) {
    // Only allow numbers
    this.value = this.value.replace(/[^0-9]/g, '');
    
    // Auto-submit when 6 digits are entered
    if (this.value.length === 6) {
        this.form.submit();
    }
});
</script>
@endpush
@endsection