@extends('layouts.auth')

@section('title', 'Verify Email')

@section('content')
    <div class="auth-card">
        <div style="text-align:center; margin-bottom:1.5rem;">
            <div style="width:64px; height:64px; border-radius:50%; background:rgba(16, 191, 255, 0.12); display:inline-flex; align-items:center; justify-content:center; margin-bottom:1rem;">
                <i class="fas fa-shield-alt" style="font-size:1.5rem; color:var(--accent);"></i>
            </div>
            <h1 style="font-size:1.5rem;">Verify your email</h1>
        </div>

        <p class="auth-subtitle" style="text-align:center;">
            We've sent a 6-digit verification code to <strong>{{ session('registration.email', '') }}</strong>
        </p>

        @if(session('otp_error'))
            <div class="auth-alert auth-alert-danger" style="margin: 1rem 0;">
                {{ session('otp_error') }}
            </div>
        @endif

        @if(session('otp_success'))
            <div class="auth-alert auth-alert-success" style="margin: 1rem 0;">
                {{ session('otp_success') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="auth-alert auth-alert-danger" style="margin: 1rem 0;">
                {{ $errors->first() }}
            </div>
        @endif

        <form method="POST" action="{{ route('register.verify-otp') }}" id="otpForm">
            @csrf

            <div style="display:flex; justify-content:center; gap:8px; margin:1.5rem 0;">
                @for($i = 1; $i <= 6; $i++)
                    <input
                        type="text"
                        maxlength="1"
                        class="otp-input"
                        data-index="{{ $i }}"
                        inputmode="numeric"
                        pattern="[0-9]"
                        autocomplete="one-time-code"
                        required
                    >
                @endfor
            </div>

            <input type="hidden" name="otp" id="otpHidden">

            <button type="submit" class="btn-auth" id="verifyBtn">
                <span class="btn-spinner"></span>
                <span class="btn-text"><i class="fas fa-check-circle" style="margin-right:0.375rem;"></i> Verify & Create Account</span>
                <span class="btn-loading-text">Verifying...</span>
            </button>
        </form>

        <div style="text-align:center; margin-top:1.5rem;">
            <p style="font-size:0.85rem; color:var(--text-secondary); margin-bottom:0.75rem;">Didn't receive the code?</p>
            <form method="POST" action="{{ route('register.resend-otp') }}" style="display:inline;">
                @csrf
                <button type="submit" style="background:none; border:none; color:var(--accent); cursor:pointer; font-family:inherit; font-size:0.875rem; font-weight:600;">
                    <i class="fas fa-redo" style="margin-right:0.25rem;"></i> Resend Code
                </button>
            </form>
        </div>

        <div style="background:var(--bg-hover); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.875rem; margin-top:1.25rem; font-size:0.8rem; color:var(--text-secondary);">
            <i class="fas fa-info-circle" style="color:var(--accent); margin-right:0.375rem;"></i>
            Check your inbox and spam folder. The code expires in 15 minutes.
        </div>
    </div>

    <div class="auth-footer">
        <a href="{{ route('register') }}" style="color:var(--accent);">Go back to registration</a>
    </div>

    <style>
        .otp-input {
            width: 48px;
            height: 56px;
            text-align: center;
            font-size: 1.5rem;
            font-weight: 700;
            border: 2px solid var(--border);
            border-radius: var(--radius-md);
            background: var(--bg-primary);
            color: var(--text-primary);
            outline: none;
            transition: border-color 0.2s;
            font-family: 'Courier New', monospace;
        }

        .otp-input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(16, 191, 255, 0.15);
        }

        .otp-input.filled {
            border-color: var(--accent);
            background: rgba(16, 191, 255, 0.05);
        }

        @media (max-width: 480px) {
            .otp-input {
                width: 40px;
                height: 48px;
                font-size: 1.25rem;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const inputs = document.querySelectorAll('.otp-input');
            const hidden = document.getElementById('otpHidden');
            const form = document.getElementById('otpForm');
            let autoSubmitted = false;

            function updateHidden() {
                let code = '';
                inputs.forEach(inp => { code += inp.value; });
                hidden.value = code;
                return code;
            }

            function autoSubmitIfComplete() {
                const code = updateHidden();
                if (code.length === inputs.length && !autoSubmitted) {
                    autoSubmitted = true;
                    inputs.forEach(i => i.blur());
                    form.requestSubmit ? form.requestSubmit() : form.submit();
                }
            }

            inputs.forEach((input, idx) => {
                input.addEventListener('input', (e) => {
                    const val = e.target.value.replace(/\D/g, '');
                    e.target.value = val.charAt(0) || '';

                    if (val && idx < inputs.length - 1) {
                        inputs[idx + 1].focus();
                    }

                    e.target.classList.toggle('filled', !!val);
                    autoSubmitIfComplete();
                });

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

                input.addEventListener('paste', (e) => {
                    e.preventDefault();
                    const data = (e.clipboardData || window.clipboardData).getData('text').replace(/\D/g, '').slice(0, inputs.length);
                    data.split('').forEach((char, i) => {
                        if (inputs[i]) {
                            inputs[i].value = char;
                            inputs[i].classList.add('filled');
                        }
                    });
                    if (data.length > 0) inputs[Math.min(data.length, inputs.length - 1)].focus();
                    autoSubmitIfComplete();
                });
            });

            inputs[0].focus();

            form.addEventListener('submit', () => {
                updateHidden();
            });
        });
    </script>
@endsection