@extends('layouts.layout')
@section('title', 'Registro')
@section('body')
<div class="min-h-screen flex items-center justify-center">
    <div class="grid grid-cols-1 md:grid-cols-10 gap-4 w-full min-h-screen max-w-[2000px] mx-auto">
        <div class="flex flex-col p-[20px] lg:px-[50px] xl:px-[110px] md:col-span-4 max-w-2xl">
            <div class="flex items-center ms-2 mb-12 hover:cursor-pointer">
                <img src="{{ asset('storage/icons/arrow_back.svg') }}" alt="">
                <p class="text-grey-600">Volver</p>
            </div>
            <img src="{{ asset('storage/logo-morado.png') }}" width="144" alt="" class="mb-6">
            <div class="ps-2">
                <h1 class="text-3xl font-bold mb-2">Verificar dirección de correo electrónico</h1>
                <p class="mb-2">Para verificar tu correo electrónico , hemos enviado un código a {{ auth()->user()->email }}
                <!-- Botón para reenviar correo -->
                <span id="resendVerificationButton" class="text-purple-200 cursor-pointer hover:text-purple-600">
                    Reenviar Correo
                </span>
            </p>
                <p id="resendMessage" class="mb-2 text-sm text-green-500 hidden">Correo reenviado correctamente.</p>
                <p id="resendError" class="mb-2 text-sm text-red-500 hidden">Error al reenviar el correo. Inténtalo nuevamente.</p>

                <!-- Formulario oculto -->
                <form id="resendForm" action="{{ route('resend.verification.email') }}" method="POST" style="display: none;">
                    @csrf
                </form>

                <verify-email />
            </div>
        </div>
        <div class="hidden md:block md:col-span-6">
            <img src="{{ asset('storage/login-bg.png') }}" alt="Login Image" class="w-full h-full object-cover">
        </div>
    </div>
</div>
<!-- Script para manejar el envío del formulario -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const resendButton = document.getElementById('resendVerificationButton');
        const resendForm = document.getElementById('resendForm');
        const resendMessage = document.getElementById('resendMessage');
        const resendError = document.getElementById('resendError');

        // Variable para evitar múltiples clics
        let isSending = false;

        // Agregar evento al span
        resendButton.addEventListener('click', function () {
            if (isSending) return; // Evitar múltiples clics

            // Cambiar estilo para indicar que está enviando
            resendButton.classList.add('text-gray-400'); // Desactivar visualmente
            resendButton.textContent = 'Reenviando...';
            isSending = true;

            // Enviar el formulario oculto
            fetch(resendForm.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}",
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.message) {
                    // Mostrar mensaje de éxito
                    console.log(data.message);
                    resendMessage.classList.remove('hidden');
                    resendError.classList.add('hidden');
                } else if (data.error) {
                    // Mostrar mensaje de error
                    resendError.classList.remove('hidden');
                    resendMessage.classList.add('hidden');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                resendError.classList.remove('hidden');
                resendMessage.classList.add('hidden');
            })
            .finally(() => {
                // Restaurar el span
                resendButton.classList.remove('text-gray-400'); // Restaurar estilo
                resendButton.textContent = 'Reenviar Correo';
                isSending = false;
            });
        });
    });
</script>
@endsection