@extends('layouts.app')
@section('title', 'Recuperar Contraseña')
@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 justify-center p-[20px] lg:px-[50px] xl:px-[110px] md:col-span-4 max-w-2xl">
            <a href="/login">
                <div class="flex items-center ms-2 mb-12 hover:cursor-pointer">
                        <img src="{{  env('VITE_CDN_URL_ASSETS').'/icons/arrow_back.svg' }}" alt="">
                        <p class="text-neutral-600">Volver</p>
                </div>
            </a>
            <a href="/">
            <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">
            </a>
            <div class="ps-2">
                <h1 class="text-3xl font-bold mb-2">Recuperar Contraseña</h1>
                <p class="mb-10">Ingresa tu correo electrónico para recuperar tu contraseña.</p>

                <!-- Componente de Vue para recuperar contraseña -->
                <reset-password />

                <!-- Tarjeta de WhatsApp para ayuda -->
                <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 correo después de varios intentos, contáctanos por WhatsApp.</p>
                            </div>
                        </div>
                    </div>
                </a>
            </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>
    document.addEventListener('DOMContentLoaded', function() {
        // Variables para controlar intentos y tarjeta de WhatsApp
        const whatsappCard = document.getElementById('whatsappCard');
        let resetAttempts = parseInt(localStorage.getItem('resetPasswordAttempts') || '0');

        // Si ya ha habido varios intentos, mostrar la tarjeta de WhatsApp
        if (resetAttempts >= 2) {
            whatsappCard.classList.remove('hidden');
        }

        // Escuchar el evento emitido desde el componente Vue
        window.addEventListener('password-reset-requested', function() {
            resetAttempts++;
            localStorage.setItem('resetPasswordAttempts', resetAttempts);

            // Mostrar tarjeta de WhatsApp después de 2 intentos
            if (resetAttempts >= 2) {
                whatsappCard.classList.remove('hidden');
            }
        });
    });
</script>
@endsection