@extends('layouts.app')
@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="{{  env('VITE_CDN_URL_ASSETS').'/icons/arrow_back.svg' }}" alt="">
                <a href="/">
                    <p class="text-neutral-600">Volver</p>
                </a>
            </div>
            <img src="{{ env('APP_THEME') == 'vaope' ? 'https://static.vaope.com/public/repository/2644-logo-vaope.png' : 'https://static.vaope.com/public/repository/5824-tuentrada.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-primary-200 cursor-pointer hover:text-primary-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-error-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>

                <a href="{{ env('WHATSAPP_NUMBER') }}" target="_blank" class="block">
                    <div id="whatsappCard" class="hidden mt-6 mb-6 py-3 px-4 rounded-[24px] border border-neutral-100 bg-success-50 hover:bg-success-100 transition-colors cursor-pointer">
                        <div class="flex items-center">
                            <img src="{{  env('VITE_CDN_URL_ASSETS').'/centro-ayuda/ws-icon.svg' }}" width="48px" alt="WhatsApp" class="mr-3">
                            <div>
                                <h5 class="font-medium">¿Necesitas ayuda?</h5>
                                <p class="text-sm text-neutral-500">Si no has recibido el código después de varios intentos, contáctanos por WhatsApp.</p>
                            </div>
                        </div>
                    </div>
                </a>
                <verify-email id="verifyEmailComponent" />
            </div>
        </div>
        <div class="hidden md:block md:col-span-6">
                <img src="{{env('APP_THEME') == 'vaope' ? env('VITE_CDN_URL_ASSETS').'/vaope/image-login.svg' :  env('VITE_CDN_URL_ASSETS').'/login-bg.png'}}"  loading="lazy" alt="Login Image" class="w-screen h-screen 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');
        const whatsappCard = document.getElementById('whatsappCard');

        // Variables para controlar el estado y temporizador
        let isSending = false;
        let cooldownActive = false;
        let countdown = 30;
        let countdownInterval;
        let attemptCount = 0;
        const maxAttempts = 3;

        // Verificar si hay intentos guardados en localStorage
        if (localStorage.getItem('resendAttempts')) {
            attemptCount = parseInt(localStorage.getItem('resendAttempts'));
            updateButtonState();
            checkMaxAttemptsReached();
        }

        // Función para verificar si se alcanzó el número máximo de intentos
        function checkMaxAttemptsReached() {
            if (attemptCount >= maxAttempts) {
                whatsappCard.classList.remove('hidden');
            } else {
                whatsappCard.classList.add('hidden');
            }
        }

        // Función para iniciar la cuenta regresiva
        function startCooldown() {
            cooldownActive = true;
            countdown = 30;
            updateButtonText();

            countdownInterval = setInterval(() => {
                countdown--;
                updateButtonText();

                if (countdown <= 0) {
                    clearInterval(countdownInterval);
                    cooldownActive = false;
                    updateButtonState();
                }
            }, 1000);
        }

        // Función para actualizar el texto del botón
        function updateButtonText() {
            if (attemptCount >= maxAttempts) {
                resendButton.textContent = `Límite de intentos alcanzado (${maxAttempts}/${maxAttempts})`;
                disableButton();
                return;
            }

            if (cooldownActive) {
                resendButton.textContent = `Reenviar Correo (${countdown}s)`;
                disableButton();
            } else {
                resendButton.textContent = `Reenviar Correo (${attemptCount}/${maxAttempts})`;
                enableButton();
            }
        }

        // Función para deshabilitar el botón
        function disableButton() {
            resendButton.classList.add('text-neutral-400');
            resendButton.classList.remove('text-primary-200', 'hover:text-primary-600');
            resendButton.style.cursor = 'not-allowed';
        }

        // Función para habilitar el botón
        function enableButton() {
            resendButton.classList.remove('text-neutral-400');
            resendButton.classList.add('text-primary-200', 'hover:text-primary-600');
            resendButton.style.cursor = 'pointer';
        }

        // Función para actualizar el estado del botón según los intentos
        function updateButtonState() {
            if (attemptCount >= maxAttempts) {
                disableButton();
                resendButton.textContent = `Límite de intentos alcanzado (${maxAttempts}/${maxAttempts})`;
                checkMaxAttemptsReached();
            } else if (!cooldownActive) {
                enableButton();
                resendButton.textContent = `Reenviar Correo (${attemptCount}/${maxAttempts})`;
            }
        }

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

            // Cambiar estilo para indicar que está enviando
            disableButton();
            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) {
                    // Incrementar contador de intentos
                    attemptCount++;
                    localStorage.setItem('resendAttempts', attemptCount);

                    // Mostrar mensaje de éxito
                    resendMessage.classList.remove('hidden');
                    resendError.classList.add('hidden');

                    // Iniciar periodo de enfriamiento si no se alcanzó el límite
                    if (attemptCount < maxAttempts) {
                        startCooldown();
                    } else {
                        updateButtonState();
                    }

                    // Verificar si hemos alcanzado el límite de intentos
                    checkMaxAttemptsReached();
                } else if (data.error) {
                    // Mostrar mensaje de error
                    resendError.classList.remove('hidden');
                    resendMessage.classList.add('hidden');
                    updateButtonState();
                }
            })
            .catch(error => {
                console.error('Error:', error);
                resendError.classList.remove('hidden');
                resendMessage.classList.add('hidden');
                updateButtonState();
            })
            .finally(() => {
                isSending = false;
            });
        });

        // Escuchar eventos para detectar cuando se ha verificado el código correctamente
        window.addEventListener('email-verified', function() {
            // Limpiar los intentos cuando el código se verifica correctamente
            localStorage.removeItem('resendAttempts');
            attemptCount = 0;
            updateButtonState();
            checkMaxAttemptsReached();
        });

        // Intersección con Vue - escuchar la redirección como indicador de verificación exitosa
        // Observer para detectar cambios en la URL que indiquen una verificación exitosa
        let lastUrl = location.href;
        new MutationObserver(() => {
            if (location.href !== lastUrl) {
                lastUrl = location.href;
                if (location.href.includes('/cuenta')) {
                    // Si redirige a /cuenta, asumimos verificación exitosa
                    localStorage.removeItem('resendAttempts');
                    checkMaxAttemptsReached();
                }
            }
        }).observe(document, {subtree: true, childList: true});

        // Inicializar el estado del botón
        updateButtonState();
        checkMaxAttemptsReached();
    });
</script>
@endsection