@extends('layouts.responsive')

@section('title', 'Verify Phone Number')

@section('meta')
<meta name="description" content="Verify your phone number to secure your SwiftPay account.">
<meta name="keywords" content="SwiftPay phone verification, account security">
@endsection

@section('content')
<div class="min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-sm">
        <div class="text-center mb-8">
            <div class="flex justify-center mb-6">
                <div class="w-20 h-20 bg-gradient-to-br from-success-500 to-success-700 rounded-2xl flex items-center justify-center shadow-2xl">
                    <i class="fas fa-mobile-alt text-white text-2xl"></i>
                </div>
            </div>
            <h1 class="text-3xl font-bold text-white mb-2">Verify Your Phone</h1>
            <p class="text-gray-400 text-center">
                We've sent a 6-digit code to<br>
                <span class="font-semibold text-white">{{ auth()->user()->phone }}</span>
            </p>
        </div>
        
        @if(session('success'))
            <div class="mb-6 bg-success-600/20 border border-success-600/30 text-success-400 px-4 py-3 rounded-2xl flex items-center">
                <i class="fas fa-check-circle mr-3 text-lg"></i>
                <span>{{ session('success') }}</span>
            </div>
        @endif
        
        @if(session('warning'))
            <div class="mb-6 bg-yellow-600/20 border border-yellow-600/30 text-yellow-400 px-4 py-3 rounded-2xl flex items-center">
                <i class="fas fa-exclamation-triangle mr-3 text-lg"></i>
                <span>{{ session('warning') }}</span>
            </div>
        @endif
        
        <form method="POST" action="{{ route('verify.phone') }}" class="space-y-6">
            @csrf
            
            <div>
                <label for="otp" class="form-label text-center block">
                    Verification Code
                </label>
                <input id="otp" type="text" name="otp" value="{{ old('otp') }}" 
                       class="form-input @error('otp') border-red-500 @enderror text-center text-3xl font-mono tracking-[0.5em] py-6" 
                       placeholder="000000"
                       maxlength="6"
                       pattern="[0-9]{6}"
                       required autofocus>
                @error('otp')
                    <p class="mt-2 text-sm text-red-400 flex items-center justify-center">
                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                    </p>
                @enderror
                <p class="mt-2 text-sm text-gray-400 text-center">Enter the 6-digit code sent to your phone</p>
            </div>

            <div>
                <button type="submit" class="btn btn-success w-full py-4 text-base font-semibold">
                    <i class="fas fa-check mr-2"></i>
                    Verify Phone Number
                </button>
            </div>
        </form>

        <!-- Resend Code -->
        <div class="mt-8 text-center">
            <p class="text-gray-400 text-sm">
                Didn't receive the code? 
                <button type="button" onclick="resendCode()" id="resend-btn" class="font-medium text-success-400 hover:text-success-300 transition-colors">
                    Resend Code
                </button>
            </p>
            <p class="text-xs text-gray-500 mt-2" id="countdown"></p>
        </div>

        <!-- Wrong Number -->
        <div class="mt-6 text-center">
            <p class="text-gray-400 text-sm">
                Wrong phone number? 
                <a href="{{ route('logout') }}" 
                   onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
                   class="font-medium text-primary-400 hover:text-primary-300 transition-colors">
                    Start over
                </a>
            </p>
            <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
                @csrf
            </form>
        </div>

        <!-- Security Notice -->
        <div class="mt-8 p-4 bg-dark-800/30 backdrop-blur-sm border border-dark-700 rounded-2xl">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <i class="fas fa-info-circle text-primary-400 text-lg"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-primary-400 mb-1">Why verify your phone?</h3>
                    <p class="text-sm text-gray-300">
                        Phone verification adds security and helps us notify you of important account activities.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
let countdown = 60;
let resendTimer;

function startCountdown() {
    const resendBtn = document.getElementById('resend-btn');
    const countdownEl = document.getElementById('countdown');
    
    resendBtn.style.opacity = '0.5';
    resendBtn.style.pointerEvents = 'none';
    
    resendTimer = setInterval(function() {
        countdownEl.textContent = `Resend available in ${countdown} seconds`;
        countdown--;
        
        if (countdown < 0) {
            clearInterval(resendTimer);
            resendBtn.style.opacity = '1';
            resendBtn.style.pointerEvents = 'auto';
            countdownEl.textContent = '';
            countdown = 60;
        }
    }, 1000);
}

function resendCode() {
    // Show loading state
    const resendBtn = document.getElementById('resend-btn');
    const originalText = resendBtn.textContent;
    resendBtn.textContent = 'Sending...';
    resendBtn.disabled = true;
    
    // Make AJAX request to resend OTP
    fetch('{{ route("verify.phone.resend") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content') || '{{ csrf_token() }}'
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Show success message
            if (window.fintechApp) {
                window.fintechApp.showSuccess(data.message);
            } else {
                alert(data.message);
            }
            
            // Start countdown
            startCountdown();
        } else {
            // Show error message
            if (window.fintechApp) {
                window.fintechApp.showError(data.message);
            } else {
                alert('Error: ' + data.message);
            }
        }
    })
    .catch(error => {
        console.error('Error:', error);
        // Show generic error message
        if (window.fintechApp) {
            window.fintechApp.showError('Failed to resend verification code. Please try again.');
        } else {
            alert('Failed to resend verification code. Please try again.');
        }
    })
    .finally(() => {
        // Reset button
        resendBtn.textContent = originalText;
        resendBtn.disabled = false;
    });
}

// Auto-focus and format OTP input
document.getElementById('otp').addEventListener('input', function(e) {
    e.target.value = e.target.value.replace(/[^0-9]/g, '');
    
    // Auto-submit when 6 digits are entered
    if (e.target.value.length === 6) {
        setTimeout(() => {
            e.target.closest('form').submit();
        }, 500);
    }
    // Removed auto-submit for accessibility: user must submit manually
    // if (e.target.value.length === 6) {
    //     setTimeout(() => {
    //         e.target.closest('form').submit();
    //     }, 500);
    /* 
     Removed auto-submit for accessibility: user must submit manually
     if (e.target.value.length === 6) {
         setTimeout(() => {
             e.target.closest('form').submit();
         }, 500);
     }
});

// Add spacing animation for better UX
document.getElementById('otp').addEventListener('keydown', function(e) {
    // Add haptic feedback if available
    // Only vibrate if supported and user does not prefer reduced motion
    if (
        navigator.vibrate &&
        !window.matchMedia('(prefers-reduced-motion: reduce)').matches
    ) {
        navigator.vibrate(50);
    }
});

// Start countdown on page load
document.addEventListener('DOMContentLoaded', function() {
    startCountdown();
});
</script>
@endpush
@endsection