{% 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-tag') }}" style="color: #FFFF;"></i>
            Créer un rôle - Étape 2
        </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="w-full p-6">
        {% include "./layouts/message_flash.html.twig" %}
        
        <!-- Indicateur de progression -->
        <div class="max-w-2xl mx-auto mb-6">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="bg-green-500 text-white rounded-full h-8 w-8 flex items-center justify-center text-sm font-bold">1</div>
                    <span class="ml-2 text-sm font-medium text-gray-700">Informations du rôle</span>
                </div>
                <div class="flex-1 mx-4 h-1 bg-gray-200">
                    <div class="h-1 bg-green-500 w-full"></div>
                </div>
                <div class="flex items-center">
                    <div class="bg-bungalow-blue text-white rounded-full h-8 w-8 flex items-center justify-center text-sm font-bold">2</div>
                    <span class="ml-2 text-sm font-medium text-gray-700">Sections & Sous-sections</span>
                </div>
            </div>
        </div>

        <!-- Résumé de l'étape 1 -->
        <div class="max-w-4xl mx-auto mb-6">
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <h3 class="text-sm font-medium text-blue-800 mb-2">Résumé de l'étape 1</h3>
                <div class="text-sm text-blue-700">
                    <p><strong>Nom:</strong> {{ nom }}</p>
                    <p><strong>Slug:</strong> <code class="bg-blue-100 px-2 py-1 rounded">{{ slug }}</code></p>
                </div>
            </div>
        </div>
        
        <form method="POST" action="{{ path('admin_roles_store_final') }}" class="w-full mx-auto">
            <div class="bg-white shadow-lg rounded-lg p-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">Sélectionner les sections et sous-sections</h2>
                
                <!-- Sections -->
                <div class="mb-6">
                    <h3 class="text-lg font-medium mb-3 text-gray-700">Sections</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                        {% for section in sections %}
                        <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                            <input type="checkbox" name="sections[]" value="{{ section.id }}" class="section-checkbox h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                            <div class="ml-3">
                                <span class="text-sm font-medium text-gray-700">{{ section.nom }}</span>
                                <p class="text-xs text-gray-500">Ordre: {{ section.ordre ?? 'N/A' }}</p>
                            </div>
                        </label>
                        {% endfor %}
                    </div>
                </div>

                <!-- Sous-sections -->
                <div class="mb-6">
                    <h3 class="text-lg font-medium mb-3 text-gray-700">Sous-sections</h3>
                    <div id="sous-sections-container" class="space-y-4">
                        {% for section in sections %}
                        <div class="sous-sections-group hidden" data-section-id="{{ section.id }}">
                            <h4 class="text-md font-medium mb-2 text-gray-600 bg-gray-50 p-2 rounded">{{ section.nom }}</h4>
                            <div class="space-y-2 ml-4">
                                {% for sous_section in section.sousSections %}
                                <div class="border border-gray-200 rounded-lg p-3" data-sous-section-id="{{ sous_section.id }}">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <label class="flex items-center cursor-pointer">
                                                <input type="checkbox" name="sous_sections[]" value="{{ sous_section.id }}" class="sous-section-checkbox h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                                                <span class="ml-2 text-sm font-medium text-gray-700">{{ sous_section.nom }}</span>
                                            </label>
                                            <i class="{{ icon.get(sous_section.icon) }} text-gray-400"></i>
                                        </div>
                                        <div class="flex items-center space-x-2">
                                            <span class="text-xs text-gray-500">Ordre: {{ sous_section.ordre ?? 'N/A' }}</span>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endfor %}
                        
                        <!-- Sous-sections sans section assignée -->
                        {% set orphaned_sous_sections = [] %}
                        {% for sous_section in sous_sections %}
                            {% if sous_section.sections|length == 0 %}
                                {% set orphaned_sous_sections = orphaned_sous_sections|merge([sous_section]) %}
                            {% endif %}
                        {% endfor %}
                        
                        {% if orphaned_sous_sections|length > 0 %}
                        <div class="sous-sections-group" data-section-id="orphaned">
                            <h4 class="text-md font-medium mb-2 text-gray-600 bg-yellow-50 p-2 rounded">Sous-sections non assignées</h4>
                            <div class="space-y-2 ml-4">
                                {% for sous_section in orphaned_sous_sections %}
                                <div class="border border-yellow-200 rounded-lg p-3" data-sous-section-id="{{ sous_section.id }}">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-3">
                                            <label class="flex items-center cursor-pointer">
                                                <input type="checkbox" name="sous_sections[]" value="{{ sous_section.id }}" class="sous-section-checkbox h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                                                <span class="ml-2 text-sm font-medium text-gray-700">{{ sous_section.nom }}</span>
                                            </label>
                                            <i class="{{ icon.get(sous_section.icon) }} text-gray-400"></i>
                                        </div>
                                        <div class="flex items-center space-x-2">
                                            <span class="text-xs text-gray-500">Ordre: {{ sous_section.ordre ?? 'N/A' }}</span>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Boutons d'action -->
                <div class="flex justify-between pt-6 border-t border-gray-200">
                    <a href="{{ path('admin_roles_create') }}" 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">
                        <i class="{{ icon.get('arrow-left') }}"></i> Retour à l'étape 1
                    </a>
                    <div class="flex space-x-4">
                        <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>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Fonction pour gérer l'affichage des sous-sections
    function toggleSousSections() {
        // Récupérer toutes les checkboxes de sections
        const sectionCheckboxes = document.querySelectorAll('.section-checkbox');
        
        sectionCheckboxes.forEach(function(checkbox) {
            const sectionId = checkbox.value;
            const sectionGroup = document.querySelector(`.sous-sections-group[data-section-id="${sectionId}"]`);
            
            if (sectionGroup) {
                if (checkbox.checked) {
                    // Afficher le groupe de sous-sections
                    sectionGroup.classList.remove('hidden');
                } else {
                    // Masquer le groupe de sous-sections et décocher ses sous-sections
                    sectionGroup.classList.add('hidden');
                    const sousSectionCheckboxes = sectionGroup.querySelectorAll('.sous-section-checkbox');
                    sousSectionCheckboxes.forEach(function(ssCheckbox) {
                        ssCheckbox.checked = false;
                    });
                }
            }
        });
    }
    
    // Ajouter l'événement change à toutes les checkboxes de sections
    const sectionCheckboxes = document.querySelectorAll('.section-checkbox');
    sectionCheckboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', toggleSousSections);
    });
    
    // Initialiser l'état au chargement de la page
    toggleSousSections();
});
</script>
{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Gestion des checkboxes de sections
    document.querySelectorAll('.section-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const isChecked = this.checked;
            const container = this.closest('label');
            
            if (isChecked) {
                container.classList.add('bg-blue-50', 'border-blue-200');
            } else {
                container.classList.remove('bg-blue-50', 'border-blue-200');
            }
        });
    });

    // Gestion des checkboxes de sous-sections
    document.querySelectorAll('.sous-section-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const isChecked = this.checked;
            const container = this.closest('[data-sous-section-id]');
            
            if (isChecked) {
                container.classList.add('bg-blue-50', 'border-blue-200');
            } else {
                container.classList.remove('bg-blue-50', 'border-blue-200');
            }
        });
    });
});
</script>
{% endblock %}