{% extends "layouts/dashboard.twig" %}

{% block title %}{{ __('users.headers.user_permissions') }} - {{ target_user.users_name }} - {{ platformName }}{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Select all permissions in a module
    const selectAllSwitches = document.querySelectorAll('.select-all-module');
    
    selectAllSwitches.forEach(sw => {
        sw.addEventListener('change', function() {
            const cardBody = this.closest('.card').querySelector('.card-body');
            const checkboxes = cardBody.querySelectorAll('.form-check-input');
            
            checkboxes.forEach(cb => {
                cb.checked = this.checked;
            });
        });
    });
    
    // Update "Select All" switch based on individual checkboxes
    const moduleCards = document.querySelectorAll('.card.h-100');
    moduleCards.forEach(card => {
        const selectAllSwitch = card.querySelector('.select-all-module');
        if (!selectAllSwitch) return;
        
        const checkboxes = card.querySelectorAll('.card-body .form-check-input');
        
        const updateSelectAll = () => {
            const allChecked = Array.from(checkboxes).every(cb => cb.checked);
            const someChecked = Array.from(checkboxes).some(cb => cb.checked);
            
            selectAllSwitch.checked = allChecked;
            selectAllSwitch.indeterminate = someChecked && !allChecked;
        };
        
        checkboxes.forEach(cb => {
            cb.addEventListener('change', updateSelectAll);
        });
        
        // Initial check
        updateSelectAll();
    });
});
</script>
{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <h1 class="mt-4">{{ __('users.headers.user_permissions') }}</h1>
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item"><a href="{{ url('admin/dashboard') }}">{{ __('users.breadcrumb.dashboard') }}</a></li>
        <li class="breadcrumb-item"><a href="{{ url('admin/users') }}">{{ __('users.breadcrumb.users') }}</a></li>
        <li class="breadcrumb-item active">{{ __('users.breadcrumb.permissions') }}: {{ target_user.users_name }}</li>
    </ol>

    {% include '@users/admin/nav.twig' ignore missing %}
    
    <div class="card mb-4">
        <div class="card-header">
            <i class="bi bi-shield-lock me-1"></i>
            {{ __('users.headers.manage_permissions', {
                'name': target_user.users_name,
                'role': attribute(__(['users.roles.', target_user.users_role]|join), '') ?: target_user.users_role|upper
            }) }}
        </div>
        <div class="card-body">
            <form action="{{ url('admin/users/' ~ target_user.users_id ~ '/permissions') }}" method="POST">
                {{ csrf_field()|raw }}
                
                <div class="row">
                    {% for module in modules %}
                    <div class="col-md-6 mb-4">
                        <div class="card h-100">
                            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">
                                    <i class="{{ module.modules_icon ?: 'bi bi-box' }} me-2"></i>
                                    {{ module.modules_display_name }}
                                </h6>
                                {% if module.modules_permissions %}
                                <div class="form-check form-switch mb-0">
                                    <input class="form-check-input select-all-module" type="checkbox" id="select_all_{{ module.modules_id }}">
                                    <label class="form-check-label small" for="select_all_{{ module.modules_id }}">Marcar todos</label>
                                </div>
                                {% endif %}
                            </div>
                            <div class="card-body">
                                {% if module.modules_permissions %}
                                    {% for permission in module.modules_permissions %}
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="permissions[]" 
                                               value="{{ permission }}" id="perm_{{ loop.parent.loop.index }}_{{ loop.index }}"
                                               {% if permission in user_permissions %}checked{% endif %}>
                                        <label class="form-check-label" for="perm_{{ loop.parent.loop.index }}_{{ loop.index }}">
                                            {{ attribute(__(['users.permissions.', permission]|join), '') ?: permission }}
                                        </label>
                                    </div>
                                    {% endfor %}
                                {% else %}
                                    <p class="text-muted small mb-0">{{ __('users.fields.no_permissions_config') }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>

                <div class="mt-4 d-flex justify-content-between">
                    <a href="{{ url('admin/users') }}" class="btn btn-secondary">{{ __('users.actions.back') }}</a>
                    <button type="submit" class="btn btn-primary">{{ __('users.actions.save_permissions') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}