{% extends 'base.html.twig' %}

{% block body %}
<div class="w-full flex flex-col h-full overflow-y-auto">
    <div class="flex flex-row items-center w-full p-3 border-b text-white bg-bungalow-yellow">
        <span class="text-white text-lg w-full">
            <i class="{{ icon.get('user-shield') }}" style="color: #FFFF;"></i>
            Créer un rôle
        </span>
        <a href="{{ path('admin_roles') }}" class="ml-4 px-4 py-2 bg-gray-600 text-white font-medium rounded-full text-sm cursor-pointer">
            <i class="{{ icon.get('arrow-left') }}"></i> Retour
        </a>
    </div>

    <div class="p-6">
        {% include "./layouts/message_flash.html.twig" %}
        
        <form method="POST" action="{{ path('admin_roles_store') }}" class="max-w-2xl mx-auto">
            <div class="bg-white shadow-lg rounded-lg p-6">
                <!-- Informations du rôle -->
                <div class="mb-6">
                    <h2 class="text-xl font-semibold mb-4 text-gray-800">Informations du rôle</h2>
                    <div class="space-y-4">
                        <div>
                            <label for="nom" class="block text-sm font-medium text-gray-700 required">Nom du rôle</label>
                            <input type="text" name="nom" id="nom" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" required placeholder="Ex: Pôle formation">
                            <small class="text-gray-500">Le nom sera automatiquement converti en slug</small>
                        </div>
                        <div>
                            <label for="slug" class="block text-sm font-medium text-gray-700">Slug</label>
                            <input type="text" name="slug" id="slug" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Ex: ROLE_POLE_FORMATION" readonly>
                            <small class="text-gray-500">Généré automatiquement à partir du nom (modifiable)</small>
                        </div>
                    </div>
                </div>

                <!-- Prévisualisation -->
                <div class="mb-6 p-4 bg-gray-50 rounded-lg">
                    <h3 class="text-sm font-medium text-gray-700 mb-2">Prévisualisation</h3>
                    <div class="text-sm text-gray-600">
                        <p><strong>Nom:</strong> <span id="preview-nom">-</span></p>
                        <p><strong>Slug:</strong> <span id="preview-slug">-</span></p>
                    </div>
                </div>

                <!-- Boutons d'action -->
                <div class="flex justify-end space-x-4 pt-6 border-t border-gray-200">
                    <a href="{{ path('admin_roles') }}" class="px-6 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Annuler
                    </a>
                    <button type="submit" class="px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-bungalow-blue hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        Créer le rôle
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const nomInput = document.getElementById('nom');
    const slugInput = document.getElementById('slug');
    const previewNom = document.getElementById('preview-nom');
    const previewSlug = document.getElementById('preview-slug');

    // Fonction pour générer le slug
    function generateSlug(nom) {
        if (!nom) return '';
        
        // Convertir en majuscules et remplacer les espaces par des underscores
        let slug = nom.toUpperCase();
        
        // Remplacer les caractères spéciaux français
        const accents = {
            'À': 'A', 'Á': 'A', 'Â': 'A', 'Ã': 'A', 'Ä': 'A', 'Å': 'A', 'Æ': 'AE', 'Ç': 'C',
            'È': 'E', 'É': 'E', 'Ê': 'E', 'Ë': 'E', 'Ì': 'I', 'Í': 'I', 'Î': 'I', 'Ï': 'I',
            'Ð': 'D', 'Ñ': 'N', 'Ò': 'O', 'Ó': 'O', 'Ô': 'O', 'Õ': 'O', 'Ö': 'O', 'Ø': 'O',
            'Ù': 'U', 'Ú': 'U', 'Û': 'U', 'Ü': 'U', 'Ý': 'Y', 'Þ': 'TH', 'ß': 'SS',
            'à': 'A', 'á': 'A', 'â': 'A', 'ã': 'A', 'ä': 'A', 'å': 'A', 'æ': 'AE', 'ç': 'C',
            'è': 'E', 'é': 'E', 'ê': 'E', 'ë': 'E', 'ì': 'I', 'í': 'I', 'î': 'I', 'ï': 'I',
            'ð': 'D', 'ñ': 'N', 'ò': 'O', 'ó': 'O', 'ô': 'O', 'õ': 'O', 'ö': 'O', 'ø': 'O',
            'ù': 'U', 'ú': 'U', 'û': 'U', 'ü': 'U', 'ý': 'Y', 'þ': 'TH', 'ÿ': 'Y'
        };
        
        for (let [accent, replacement] of Object.entries(accents)) {
            slug = slug.replace(new RegExp(accent, 'g'), replacement);
        }
        
        // Remplacer les espaces et caractères spéciaux par des underscores
        slug = slug.replace(/[^A-Z0-9]+/g, '_');
        
        // Supprimer les underscores en début et fin
        slug = slug.replace(/^_+|_+$/g, '');
        
        // Ajouter le préfixe ROLE_ si il n'est pas déjà présent
        if (!slug.startsWith('ROLE_')) {
            slug = 'ROLE_' + slug;
        }
        
        return slug;
    }

    // Fonction pour mettre à jour la prévisualisation
    function updatePreview() {
        const nom = nomInput.value;
        const slug = slugInput.value;
        
        previewNom.textContent = nom || '-';
        previewSlug.textContent = slug || '-';
    }

    // Écouter les changements sur le champ nom
    nomInput.addEventListener('input', function() {
        const nom = this.value;
        const generatedSlug = generateSlug(nom);
        
        // Mettre à jour le slug seulement si il est vide ou s'il correspond au slug généré automatiquement
        if (!slugInput.value || slugInput.value === generateSlug(nomInput.dataset.lastValue || '')) {
            slugInput.value = generatedSlug;
        }
        
        // Sauvegarder la dernière valeur pour la comparaison
        this.dataset.lastValue = nom;
        
        updatePreview();
    });

    // Permettre la modification manuelle du slug
    slugInput.addEventListener('input', function() {
        updatePreview();
    });

    // Initialiser la prévisualisation
    updatePreview();
});
</script>
{% endblock %}