@props(['sourceId', 'targetId', 'sourceName' => 'source'])

<script>
function generateSlug(sourceId, targetId) {
    const sourceInput = document.getElementById(sourceId);
    const targetInput = document.getElementById(targetId);
    
    if (!sourceInput.value) {
        alert('Veuillez d\'abord saisir ' + (sourceId.includes('name') ? 'un nom' : 'un numéro'));
        sourceInput.focus();
        return;
    }
    
    // Afficher un indicateur de chargement
    const button = event.target;
    const originalHTML = button.innerHTML;
    button.disabled = true;
    button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Génération...';
    
    // Appel Ajax
    fetch('{{ route('generate.slug') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            text: sourceInput.value
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            targetInput.value = data.slug;
            
            // Animation de feedback
            targetInput.classList.add('border-success', 'border-2');
            setTimeout(() => {
                targetInput.classList.remove('border-success', 'border-2');
            }, 1000);
        } else {
            alert('Erreur lors de la génération du slug');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Erreur lors de la génération du slug');
    })
    .finally(() => {
        // Restaurer le bouton
        button.disabled = false;
        button.innerHTML = originalHTML;
    });
}
</script>