@props(['action' => 'general', 'theme' => 'light', 'size' => 'normal'])

<div class="cf-turnstile" 
     data-sitekey="{{ config('app.turnstile.site_key') }}"
     data-action="{{ $action }}"
     data-theme="{{ $theme }}"
     data-size="{{ $size }}"
     data-callback="onTurnstileSuccess"
     data-expired-callback="onTurnstileExpired"
     data-error-callback="onTurnstileError">
</div>

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

<script>
window.onTurnstileSuccess = function(token) {
    // Obtener el div de turnstile
    const turnstileDiv = document.querySelector('.cf-turnstile');
    if (turnstileDiv) {
        // Crear un input hidden para el token
        let tokenInput = document.getElementById('cf-turnstile-response');
        if (!tokenInput) {
            tokenInput = document.createElement('input');
            tokenInput.type = 'hidden';
            tokenInput.id = 'cf-turnstile-response';
            tokenInput.name = 'cf-turnstile-response';
        }
        tokenInput.value = token;
        
        // Insertar el input en el formulario más cercano
        const form = turnstileDiv.closest('form');
        if (form && !form.contains(tokenInput)) {
            form.appendChild(tokenInput);
        }
        
        // Habilitar el botón de envío si existe
        const submitBtn = form ? form.querySelector('button[type="submit"]') : null;
        if (submitBtn) {
            submitBtn.disabled = false;
            submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
        }
        
        // Remover indicador anterior si existe
        const existingIndicator = turnstileDiv.parentNode.querySelector('.text-green-600');
        if (existingIndicator) {
            existingIndicator.remove();
        }
    }
};

window.onTurnstileExpired = function() {
    // Recargar el widget cuando expire
    if (typeof turnstile !== 'undefined') {
        turnstile.reset();
    }
    

    
    // Deshabilitar el botón de envío
    const form = document.querySelector('.cf-turnstile').closest('form');
    const submitBtn = form ? form.querySelector('button[type="submit"]') : null;
    if (submitBtn) {
        submitBtn.disabled = true;
        submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
    }
};

window.onTurnstileError = function() {
    // Mostrar mensaje de error
    const turnstileDiv = document.querySelector('.cf-turnstile');
    if (turnstileDiv) {
        const errorIndicator = document.createElement('div');
        errorIndicator.className = 'text-red-600 text-sm mt-2 flex items-center';
        errorIndicator.innerHTML = '<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>Error en la verificación. Intenta nuevamente.';
        
        // Remover indicadores anteriores
        const existingIndicators = turnstileDiv.parentNode.querySelectorAll('.text-green-600, .text-red-600');
        existingIndicators.forEach(indicator => indicator.remove());
        
        turnstileDiv.parentNode.appendChild(errorIndicator);
    }
};

// Deshabilitar botones de envío inicialmente
document.addEventListener('DOMContentLoaded', function() {
    const forms = document.querySelectorAll('form');
    forms.forEach(form => {
        const turnstileDiv = form.querySelector('.cf-turnstile');
        if (turnstileDiv) {
            const submitBtn = form.querySelector('button[type="submit"]');
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
            }
        }
    });
});
</script>