@extends('externo.layout')
@section('contenido')
<style>
    .verificar-hero {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        padding: 120px 0 60px;
    }
    .verificar-hero h1 {
        font-size: 2.5rem;
        font-weight: 800;
        color: #fff;
    }
    .verificar-hero h1 span {
        background: linear-gradient(90deg, #f39c12, #e74c3c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .verificar-container {
        background: #fff;
        border-radius: 30px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.15);
        padding: 50px;
        margin-top: -30px;
        margin-bottom: 60px;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .verificar-icon {
        width: 100px;
        height: 100px;
        background: linear-gradient(135deg, #f39c12, #e74c3c);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 30px;
        font-size: 50px;
        color: #fff;
    }
    .verificar-container h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 10px;
    }
    .verificar-container p {
        color: #666;
        margin-bottom: 30px;
    }
    .code-inputs {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-bottom: 30px;
    }
    .code-inputs input {
        width: 50px;
        height: 60px;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        border: 2px solid #e0e0e0;
        border-radius: 12px;
        transition: all 0.3s ease;
    }
    .code-inputs input:focus {
        border-color: #f39c12;
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.15);
    }
    .btn-verificar {
        width: 100%;
        padding: 15px;
        background: linear-gradient(135deg, #f39c12, #e74c3c);
        color: #fff;
        border: none;
        border-radius: 12px;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .btn-verificar:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(243, 156, 18, 0.4);
    }
    .resend-link {
        margin-top: 20px;
        color: #666;
    }
    .resend-link a {
        color: #f39c12;
        font-weight: 600;
    }
</style>

<!-- Hero Section -->
<section class="verificar-hero">
    <div class="container">
        <div class="text-center">
            <h1>Verifica tu <span>cuenta</span></h1>
        </div>
    </div>
</section>

<!-- Verificación Form -->
<div class="container">
    <div class="verificar-container">
        <div class="verificar-icon">
            <i class='bx bx-envelope'></i>
        </div>
        <h3>¡Revisa tu correo!</h3>
        <p>
            Hemos enviado un código de verificación de 6 dígitos a:<br>
            <strong>{{ $usuario->email }}</strong>
        </p>

        <form action="{{ route('ia.verificar.store', $usuario->codigo) }}" method="POST" id="verificar-form">
            @csrf
            <input type="hidden" name="codigo_verificacion" id="codigo_completo">

            <div class="code-inputs">
                <input type="text" maxlength="1" class="code-input" data-index="0" autofocus>
                <input type="text" maxlength="1" class="code-input" data-index="1">
                <input type="text" maxlength="1" class="code-input" data-index="2">
                <input type="text" maxlength="1" class="code-input" data-index="3">
                <input type="text" maxlength="1" class="code-input" data-index="4">
                <input type="text" maxlength="1" class="code-input" data-index="5">
            </div>

            <button type="submit" class="btn-verificar">
                <i class='bx bx-check-circle'></i> Verificar cuenta
            </button>
        </form>

        <div class="resend-link">
            ¿No recibiste el código? <a href="#">Reenviar código</a>
        </div>

        <div class="mt-4 p-3 bg-light rounded">
            <small class="text-muted">
                <i class='bx bx-info-circle'></i>
                Para pruebas, tu código es: <strong>{{ $usuario->codigo_verificacion }}</strong>
            </small>
        </div>
    </div>
</div>

<script>
    const codeInputs = document.querySelectorAll('.code-input');
    const codigoCompleto = document.getElementById('codigo_completo');
    const form = document.getElementById('verificar-form');

    codeInputs.forEach((input, index) => {
        input.addEventListener('input', (e) => {
            const value = e.target.value;

            // Solo permitir números
            if (!/^\d*$/.test(value)) {
                e.target.value = '';
                return;
            }

            // Mover al siguiente input
            if (value && index < codeInputs.length - 1) {
                codeInputs[index + 1].focus();
            }

            // Actualizar código completo
            updateCodigoCompleto();
        });

        input.addEventListener('keydown', (e) => {
            // Mover al anterior con backspace
            if (e.key === 'Backspace' && !e.target.value && index > 0) {
                codeInputs[index - 1].focus();
            }
        });

        // Manejar pegado
        input.addEventListener('paste', (e) => {
            e.preventDefault();
            const pastedData = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, 6);

            pastedData.split('').forEach((char, i) => {
                if (codeInputs[i]) {
                    codeInputs[i].value = char;
                }
            });

            updateCodigoCompleto();

            // Focus en el último input con valor o el siguiente vacío
            const lastFilledIndex = Math.min(pastedData.length, codeInputs.length) - 1;
            if (lastFilledIndex >= 0) {
                codeInputs[Math.min(lastFilledIndex + 1, codeInputs.length - 1)].focus();
            }
        });
    });

    function updateCodigoCompleto() {
        let codigo = '';
        codeInputs.forEach(input => {
            codigo += input.value;
        });
        codigoCompleto.value = codigo;
    }

    form.addEventListener('submit', (e) => {
        updateCodigoCompleto();
        if (codigoCompleto.value.length !== 6) {
            e.preventDefault();
            alert('Por favor ingresa el código completo de 6 dígitos');
        }
    });
</script>
@endsection