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

{% block body %}
    <h1 class="h1">Détail de {{ user.getFullName() }} <a class="btn-primary" href="{{ path('admin_user_roles_index') }}">Retour</a></h1>

    <div class="card mt-3">
        <div class="card-header">
            <h2 class="h4">Informations utilisateur</h2>
        </div>
        <div class="card-body">
            <p><strong>Email :</strong> {{ user.email }}</p>
            <p><strong>Rôle attribué :</strong> {{ user.roleGroup.label ?? 'Aucun' }}</p>
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-header">
            <h2 class="h4">🔐 Permissions héritées</h2>
        </div>
        <div class="card-body">
            {% set grouped = {} %}
            {% for perm in (user.roleGroup and user.roleGroup.permissions) ? user.roleGroup.permissions : [] %}
                {% set groupCode = perm.code|split('_')|slice(1, 1)|first|lower %}
                {% set group = {
                    'access': 'Accès',
                    'view': 'Consultation',
                    'edit': 'Modification',
                    'manage': 'Gestion',
                    'export': 'Export',
                    'import': 'Import',
                    'validate': 'Validation',
                    'send': 'Envoi',
                    'menu': 'Menu',
                    'faq': 'FAQ',
                    'pages': 'Pages',
                    'charte': 'Chartes',
                    'docs': 'Documents',
                    'others': 'Autres'
                }[groupCode] ?? 'Autres' %}
                {% set grouped = grouped|merge({ (group): (grouped[group]|default([]))|merge([perm]) }) %}
            {% endfor %}

            {% if grouped is empty %}
                <p><em>Aucune permission héritée.</em></p>
            {% else %}
                {% for group, perms in grouped %}
                    <div class="mb-4 border border-gray-200 p-3 rounded bg-white">
                        <h3 class="text-sm font-bold mb-2 text-gray-600 uppercase tracking-wide">
                            {{ group }}
                        </h3>
                        <ul class="grid grid-cols-3 gap-1 text-sm text-gray-800">
                            {% for perm in perms %}
                                <li class="flex items-center">{{ perm.label }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endfor %}
            {% endif %}
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-header">
            <h2 class="h4">🛠️ Permissions personnalisées</h2>
        </div>
        <div class="card-body">
            <form method="post" action="{{ path('admin_user_roles_toggle_permission', { id: user.id }) }}">
                {% set grouped = {} %}
                {% for perm in allPermissions %}
                    {% set group = perm.code|split('_')|slice(1, 1)|first|capitalize|default('Autres') %}
                    {% set grouped = grouped|merge({ (group): (grouped[group]|default([]))|merge([perm]) }) %}
                {% endfor %}

                {% for group, perms in grouped %}
                    <div class="mb-4 border border-gray-100 p-3 rounded">
                        <h4 class="font-semibold text-gray-600 mb-2">
                            {{ icon('tools') }} {{ group }}
                        </h4>
                        <div class="grid grid-cols-3 gap-2">
                            {% for perm in perms %}
                                <label class="flex items-center gap-2 text-sm text-gray-800">
                                    <input type="checkbox"
                                           name="permissions[]"
                                           value="{{ perm.id }}"
                                           {% if user.permissions.contains(perm) %}checked{% endif %}
                                            {% if user.roleGroup and user.roleGroup.permissions.contains(perm) %}disabled checked{% endif %} />
                                    {{ perm.label }}
                                </label>
                            {% endfor %}
                        </div>
                    </div>
                {% endfor %}

                <div class="mt-4">
                    <button type="submit" class="btn btn-primary">💾 Enregistrer</button>
                    <a href="{{ path('admin_user_roles_index') }}" class="btn btn-secondary">⬅ Retour</a>
                </div>
            </form>
        </div>
    </div>
{% endblock %}



{% block javascripts_end %}
    <script>
        function toggleGroup(group) {
            const toggle = document.querySelector('.toggle-group.group-' + group);
            const checkboxes = document.querySelectorAll('.perm-checkbox.group-' + group);
            checkboxes.forEach(cb => cb.checked = toggle.checked);
        }
    </script>
{% endblock %}