@extends('layouts.app')

@section('styles')
<style>
    .otp-input:focus {
        box-shadow: 0 0 0 4px rgba(0, 105, 72, 0.1);
    }
    .glow-button {
        box-shadow: 0 4px 14px 0 rgba(0, 105, 72, 0.25);
    }
</style>
@endsection

@section('header-back')
    <a href="{{ route('verification.index') }}" class="hover:opacity-80 transition-opacity active:scale-95 transition-transform flex items-center justify-center p-2 rounded-full">
        <span class="material-symbols-outlined text-primary" data-icon="arrow_back">arrow_back</span>
    </a>
@endsection

@section('content')
<main class="w-full max-w-md px-container-padding flex-1 flex flex-col mt-16 pb-xl">
    <!-- Progress Indicator -->
    <div class="mt-base flex gap-xs justify-center">
        <div class="h-1.5 w-12 rounded-full bg-primary"></div>
        <div class="h-1.5 w-12 rounded-full bg-primary"></div>
        <div class="h-1.5 w-12 rounded-full bg-outline-variant"></div>
    </div>
    
    <!-- Hero Content -->
    <div class="mt-2xl text-center">
        <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-secondary-container mb-lg">
            <span class="material-symbols-outlined text-primary text-4xl" data-icon="app_registration">app_registration</span>
        </div>
        <h2 class="font-headline-xl text-headline-xl text-on-surface mb-sm">Verify your number</h2>
        <p class="font-body-md text-body-md text-on-surface-variant max-w-[280px] mx-auto">
            Enter the 4-digit code sent to <span class="font-semibold text-on-surface">{{ $phone }}</span>
        </p>
    </div>

    @if ($errors->any())
        <div class="text-error text-center mt-md">
            {{ $errors->first() }}
        </div>
    @endif

    <form action="{{ route('verification.verify') }}" method="POST" id="otp-form">
        @csrf
        <input type="hidden" name="phone" value="{{ $phone }}">
        <input type="hidden" name="otp" id="otp-hidden">

        <!-- OTP Inputs -->
        <div class="mt-2xl flex justify-center gap-md" id="otp-container">
            <input autocomplete="one-time-code" class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded-DEFAULT border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
            <input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded-DEFAULT border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
            <input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded-DEFAULT border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
            <input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded-DEFAULT border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
        </div>

        <!-- Actions -->
        <div class="mt-2xl space-y-md">
            <button type="button" id="verify-btn" class="glow-button w-full h-14 bg-primary text-on-primary font-label-md text-label-md rounded-full hover:opacity-90 active:scale-[0.98] transition-all">
                Verify
            </button>
            <div class="text-center">
                <button type="button" class="font-label-md text-label-md text-primary hover:underline transition-all">
                    Resend Code
                </button>
            </div>
        </div>
    </form>

    <!-- Info Card -->
    <div class="mt-auto mb-xl p-md rounded-DEFAULT border border-outline-variant bg-surface-container-low">
        <div class="flex gap-sm">
            <span class="material-symbols-outlined text-on-surface-variant" data-icon="info">info</span>
            <p class="font-body-sm text-body-sm text-on-surface-variant">
                We use this to keep your account secure. Your number will not be shared with others.
            </p>
        </div>
    </div>
</main>
@endsection

@section('scripts')
<script>
    const inputs = document.querySelectorAll('.otp-input');
    const hiddenOtp = document.getElementById('otp-hidden');
    const form = document.getElementById('otp-form');
    const verifyBtn = document.getElementById('verify-btn');

    inputs.forEach((input, index) => {
        input.addEventListener('input', (e) => {
            if (e.target.value.length === 1 && index < inputs.length - 1) {
                inputs[index + 1].focus();
            }
        });

        input.addEventListener('keydown', (e) => {
            if (e.key === 'Backspace' && !e.target.value && index > 0) {
                inputs[index - 1].focus();
            }
        });
    });

    verifyBtn.addEventListener('click', () => {
        let code = '';
        inputs.forEach(input => code += input.value);
        if (code.length === 4) {
            hiddenOtp.value = code;
            
            verifyBtn.innerHTML = '<span class="flex items-center justify-center gap-sm"><svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Verifying...</span>';
            
            setTimeout(() => {
                form.submit();
            }, 500); // small delay to show animation
        } else {
            alert('Please enter a 4-digit code.');
        }
    });
</script>
@endsection