@extends('layouts.guest')

@section('content')
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-900 via-cyan-900 to-gray-900 relative overflow-hidden">
    <!-- Animated Background -->
    <div class="absolute inset-0 overflow-hidden">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-cyan-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
        <div class="absolute top-40 left-40 w-80 h-80 bg-teal-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
    </div>

    <div class="relative z-10 w-full max-w-3xl mx-auto px-6 py-8">
        <!-- Logo & Title -->
        <div class="text-center mb-8">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 mb-4">
                <i class="fas fa-shield-alt text-2xl text-white"></i>
            </div>
            <h1 class="text-3xl font-bold text-white mb-2">Verify Your Identity</h1>
            <p class="text-gray-400">Enter the 6-digit code sent to your email</p>
        </div>

        <!-- OTP Card -->
        <div class="backdrop-blur-xl bg-white/10 rounded-3xl p-8 shadow-2xl border border-white/20">
            @if (session('status'))
                <div class="mb-6 p-4 rounded-xl bg-green-500/20 border border-green-500/30 text-green-300 text-sm">
                    <i class="fas fa-check-circle mr-2"></i>{{ session('status') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="mb-6 p-4 rounded-xl bg-red-500/20 border border-red-500/30 text-red-300 text-sm">
                    <i class="fas fa-exclamation-circle mr-2"></i>
                    {{ $errors->first() }}
                </div>
            @endif

            <form method="POST" action="{{ route('otp.verify') }}" x-data="otpForm()" @keydown.enter.prevent="submitOtp">
                @csrf

                <!-- OTP Input Boxes -->
                <div class="mb-8">
                    <label class="block text-gray-300 text-sm font-medium mb-4 text-center">Verification Code</label>
                    <div class="flex justify-center space-x-3">
                        @for ($i = 0; $i < 6; $i++)
                            <input 
                                type="text"
                                maxlength="1"
                                class="w-12 h-14 text-center text-xl font-bold bg-white/5 border border-white/20 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-all"
                                x-model="otp[{{ $i }}]"
                                @input="handleInput($event, {{ $i }})"
                                @keydown.backspace="handleBackspace($event, {{ $i }})"
                                :ref="'otp' + {{ $i }}"
                            >
                        @endfor
                    </div>
                    <input type="hidden" name="otp" :value="otp.join('')">
                </div>

                <!-- Timer -->
                <div class="text-center mb-6" x-show="countdown > 0">
                    <p class="text-gray-400 text-sm">
                        Code expires in <span class="text-cyan-400 font-mono" x-text="formatTime(countdown)"></span>
                    </p>
                </div>

                <!-- Verify Button -->
                <button 
                    type="submit"
                    :disabled="!isComplete || loading"
                    class="w-full py-3 px-4 bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-700 hover:to-blue-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold rounded-xl shadow-lg hover:shadow-cyan-500/25 transition-all duration-300 flex items-center justify-center"
                >
                    <span x-show="!loading">
                        <i class="fas fa-check-circle mr-2"></i>Verify Code
                    </span>
                    <span x-show="loading">
                        <i class="fas fa-spinner fa-spin mr-2"></i>Verifying...
                    </span>
                </button>
            </form>

            <!-- Resend Code -->
            <div class="text-center mt-6">
                @if ($remainingAttempts > 0)
                    <p class="text-gray-500 text-sm mb-2">{{ $remainingAttempts }} attempts remaining</p>
                @endif
                
                <form method="POST" action="{{ route('otp.resend') }}">
                    @csrf
                    <button 
                        type="submit"
                        class="text-cyan-400 hover:text-cyan-300 text-sm font-medium transition-colors"
                    >
                        <i class="fas fa-redo mr-1"></i>Resend Code
                    </button>
                </form>
            </div>

            <!-- Cancel -->
            <div class="text-center mt-4">
                <form method="POST" action="{{ route('otp.cancel') }}">
                    @csrf
                    <button type="submit" class="text-gray-500 hover:text-gray-400 text-sm transition-colors">
                        <i class="fas fa-times mr-1"></i>Cancel
                    </button>
                </form>
            </div>
        </div>

        <!-- Help Text -->
        <div class="text-center mt-6">
            <p class="text-gray-500 text-sm">
                <i class="fas fa-info-circle mr-1"></i>
                Didn't receive the code? Check your spam folder or contact support.
            </p>
        </div>
    </div>
</div>

<script>
function otpForm() {
    return {
        otp: ['', '', '', '', '', ''],
        countdown: {{ $expiresInSeconds ?? 600 }},
        loading: false,
        
        init() {
            this.$refs.otp0?.focus();
            this.startCountdown();
        },
        
        get isComplete() {
            return this.otp.every(digit => digit !== '');
        },
        
        handleInput(event, index) {
            const value = event.target.value.replace(/[^0-9]/g, '');
            this.otp[index] = value;
            
            if (value && index < 5) {
                this.$refs['otp' + (index + 1)]?.focus();
            }
            
            // Auto-submit when complete
            if (this.isComplete) {
                this.$el.closest('form').submit();
            }
        },
        
        handleBackspace(event, index) {
            if (!this.otp[index] && index > 0) {
                this.$refs['otp' + (index - 1)]?.focus();
            }
        },
        
        startCountdown() {
            const timer = setInterval(() => {
                if (this.countdown > 0) {
                    this.countdown--;
                } else {
                    clearInterval(timer);
                }
            }, 1000);
        },
        
        formatTime(seconds) {
            const mins = Math.floor(seconds / 60);
            const secs = seconds % 60;
            return `${mins}:${secs.toString().padStart(2, '0')}`;
        },
        
        submitOtp() {
            if (this.isComplete) {
                this.$el.closest('form').submit();
            }
        }
    }
}
</script>

<style>
    @keyframes blob {
        0% { transform: translate(0px, 0px) scale(1); }
        33% { transform: translate(30px, -50px) scale(1.1); }
        66% { transform: translate(-20px, 20px) scale(0.9); }
        100% { transform: translate(0px, 0px) scale(1); }
    }
    .animate-blob { animation: blob 7s infinite; }
    .animation-delay-2000 { animation-delay: 2s; }
    .animation-delay-4000 { animation-delay: 4s; }
</style>
@endsection