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

{% block title %}Permissions - {{ user.fullName }}{% endblock %}

{% block page_title %}Gestion des permissions{% endblock %}

{% block body %}
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
        <div class="flex items-center space-x-4">
            <a href="{{ path('app_user_index') }}" 
               class="inline-flex items-center px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors duration-200">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour
            </a>
            <div>
                <h2 class="text-2xl font-bold text-gray-900">Permissions utilisateur</h2>
                <p class="text-gray-600 mt-1">Configurez les droits d'accès pour {{ user.fullName }}</p>
            </div>
        </div>
    </div>

    <!-- Carte utilisateur -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <!-- En-tête utilisateur -->
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center space-x-4">
                <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
                    {% if user.avatar %}
                        <img src="{{ asset('uploads/avatars/' ~ user.avatar) }}" alt="Avatar" class="w-12 h-12 rounded-full object-cover">
                    {% else %}
                        <span class="text-white font-semibold text-lg">{{ user.firstName|first }}{{ user.lastName|first }}</span>
                    {% endif %}
                </div>
                <div>
                    <h3 class="text-xl font-semibold text-gray-900">{{ user.fullName }}</h3>
                    <p class="text-gray-600">{{ user.email }}</p>
                    {% if user.team %}
                        <div class="mt-1">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                <i class="fas fa-users mr-1"></i>
                                {{ user.team.name }}
                            </span>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Contenu -->
        <div class="p-6">
            <form method="post" class="space-y-6">
                <!-- Instructions -->
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle text-blue-600 mt-0.5"></i>
                        </div>
                        <div>
                            <h4 class="text-sm font-medium text-blue-900 mb-1">Instructions</h4>
                            <p class="text-sm text-blue-800">
                                Cochez les cases pour accorder les permissions correspondantes. 
                                Les permissions de <strong>visibilité</strong> déterminent si l'utilisateur peut voir l'onglet, 
                                tandis que les autres permissions contrôlent les actions spécifiques.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Table des permissions -->
                <div class="overflow-hidden rounded-lg border border-gray-200">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/3">
                                    Module
                                </th>
                                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    <div class="flex flex-col items-center space-y-1">
                                        <i class="fas fa-eye text-gray-600"></i>
                                        <span>Voir</span>
                                    </div>
                                </th>
                                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    <div class="flex flex-col items-center space-y-1">
                                        <i class="fas fa-plus text-gray-600"></i>
                                        <span>Créer</span>
                                    </div>
                                </th>
                                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    <div class="flex flex-col items-center space-y-1">
                                        <i class="fas fa-edit text-gray-600"></i>
                                        <span>Modifier</span>
                                    </div>
                                </th>
                                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    <div class="flex flex-col items-center space-y-1">
                                        <i class="fas fa-trash text-gray-600"></i>
                                        <span>Supprimer</span>
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for module, moduleLabel in modules %}
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div>
                                            <div class="text-sm font-medium text-gray-900">{{ moduleLabel }}</div>
                                            <div class="text-sm text-gray-500">
                                                {% if module == 'tasks' %}
                                                    Gestion des tâches et assignations
                                                {% elseif module == 'projects' %}
                                                    Gestion des projets et équipes
                                                {% elseif module == 'reports' %}
                                                    Accès aux rapports et statistiques
                                                {% elseif module == 'history' %}
                                                    Consultation de l'historique
                                                {% elseif module == 'settings' %}
                                                    Configuration du système
                                                {% elseif module == 'users' %}
                                                    Gestion des utilisateurs et équipes
                                                {% endif %}
                                            </div>
                                        </div>
                                    </td>
                                    {% for action, actionLabel in actions %}
                                        {% set permissionKey = module ~ '_' ~ action %}
                                        <td class="px-6 py-4 whitespace-nowrap text-center">
                                            <div class="flex justify-center">
                                                <input 
                                                    class="permission-checkbox h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" 
                                                    type="checkbox" 
                                                    name="permissions[{{ permissionKey }}]" 
                                                    value="1"
                                                    id="{{ permissionKey }}"
                                                    data-module="{{ module }}"
                                                    data-action="{{ action }}"
                                                    {% if permissions[permissionKey] is defined and permissions[permissionKey] %}checked{% endif %}
                                                    {% if action != 'view' %}data-requires-view="true"{% endif %}
                                                >
                                                <label class="sr-only" for="{{ permissionKey }}">
                                                    {{ actionLabel }} {{ moduleLabel }}
                                                </label>
                                            </div>
                                        </td>
                                    {% endfor %}
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Note importante -->
                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-triangle text-yellow-600 mt-0.5"></i>
                        </div>
                        <div>
                            <h4 class="text-sm font-medium text-yellow-900 mb-2">Note importante</h4>
                            <ul class="text-sm text-yellow-800 space-y-1 list-disc list-inside">
                                <li>L'autorisation de <strong>voir</strong> un module est requise pour toutes les autres actions</li>
                                <li>Sans l'autorisation de voir, l'onglet ne sera pas visible dans le menu</li>
                                <li>Les permissions sont cumulatives : pour modifier, il faut pouvoir voir</li>
                                <li>Seuls les administrateurs et chefs d'équipe peuvent modifier ces permissions</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Actions -->
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-3 sm:space-y-0">
                    <div class="flex flex-wrap gap-3">
                        <button type="button" 
                                onclick="selectAllForModule()" 
                                class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors duration-200">
                            <i class="fas fa-check-double mr-2"></i>
                            Tout sélectionner
                        </button>
                        <button type="button" 
                                onclick="clearAllPermissions()" 
                                class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors duration-200">
                            <i class="fas fa-times mr-2"></i>
                            Tout décocher
                        </button>
                    </div>
                    <div class="flex space-x-3">
                        <a href="{{ path('app_user_index') }}" 
                           class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors duration-200">
                            <i class="fas fa-arrow-left mr-2"></i>
                            Annuler
                        </a>
                        <button type="submit" 
                                class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-lg transition-colors duration-200">
                            <i class="fas fa-save mr-2"></i>
                            Sauvegarder
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Gestion des dépendances entre permissions
    const checkboxes = document.querySelectorAll('.permission-checkbox');
    
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const module = this.dataset.module;
            const action = this.dataset.action;
            
            if (action === 'view') {
                // Si on décoche "voir", décocher toutes les autres permissions du module
                if (!this.checked) {
                    const moduleCheckboxes = document.querySelectorAll(`[data-module="${module}"]`);
                    moduleCheckboxes.forEach(cb => {
                        if (cb.dataset.action !== 'view') {
                            cb.checked = false;
                        }
                    });
                }
            } else {
                // Si on coche une action autre que "voir", s'assurer que "voir" est coché
                if (this.checked) {
                    const viewCheckbox = document.querySelector(`[data-module="${module}"][data-action="view"]`);
                    if (viewCheckbox) {
                        viewCheckbox.checked = true;
                    }
                }
            }
        });
    });
});

function selectAllForModule() {
    const checkboxes = document.querySelectorAll('.permission-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = true;
    });
}

function clearAllPermissions() {
    if (confirm('Êtes-vous sûr de vouloir retirer toutes les permissions à cet utilisateur ?')) {
        const checkboxes = document.querySelectorAll('.permission-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = false;
        });
    }
}

// Fonction pour sélectionner toutes les permissions d'un module spécifique
function toggleModulePermissions(module) {
    const moduleCheckboxes = document.querySelectorAll(`[data-module="${module}"]`);
    const viewCheckbox = document.querySelector(`[data-module="${module}"][data-action="view"]`);
    
    if (viewCheckbox.checked) {
        // Si "voir" est coché, décocher tout le module
        moduleCheckboxes.forEach(cb => cb.checked = false);
    } else {
        // Sinon, cocher tout le module
        moduleCheckboxes.forEach(cb => cb.checked = true);
    }
}
</script>

<style>
.permission-checkbox {
    transition: all 0.2s ease;
}

.permission-checkbox:focus {
    ring-offset-width: 2px;
    ring-color: rgb(59 130 246 / 0.5);
}

.permission-checkbox:checked {
    background-color: #2563eb;
    border-color: #2563eb;
}

.permission-checkbox:hover {
    border-color: #3b82f6;
}

/* Animation pour les lignes du tableau */
tbody tr {
    transition: background-color 0.2s ease;
}

tbody tr:hover {
    background-color: #f9fafb;
}

/* Style pour les boutons */
button, a {
    transition: all 0.2s ease;
}

button:hover, a:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
{% endblock %}