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

{% block title %}{% if isNew %}{{ 'admin.role.new_role'|trans }}{% else %}{{ 'admin.role.edit_title'|trans }}{% endif %}{% endblock %}

{% block body %}
    <div class="container-fluid">
        <!-- Header Section -->
        <div class="row mb-4">
            <div class="col-12">
            <div class="admin-card p-4">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center">
                        <div class="mb-3 mb-md-0">
                            <h2 class="gradient-text fw-bold mb-2">
                                <i class="bi bi-shield-check me-3"></i>
                                {% if isNew %}{{ 'admin.role.new_role'|trans }}{% else %}{{ 'admin.role.edit_title'|trans }}{% endif %}
                            </h2>
                            <p class="text-muted mb-0">
                                {% if isNew %}
                                    {{ 'admin.role.new_description'|trans }}
                                {% else %}
                                    {{ 'admin.role.edit_description'|trans }}
                                {% endif %}
                            </p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ path('admin_roles') }}" class="btn btn-outline-secondary btn-lg">
                                <i class="bi bi-arrow-left me-2"></i>
                                {{ 'admin.role.back'|trans }}
                            </a>
                            <button type="submit" form="roleForm" class="btn btn-primary btn-lg">
                                <i class="bi bi-check-circle me-2"></i>
                                {{ 'admin.role.save'|trans }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{ form_start(form, {'attr': {'id': 'roleForm'}}) }}
        
        <div class="row g-4">
            <!-- Basic Information -->
            <div class="col-12 col-lg-4">
                <div class="admin-card p-4">
                    <h4 class="gradient-text fw-bold mb-4">
                        <i class="bi bi-info-circle me-2"></i>
                        {{ 'admin.role.basic_info'|trans }}
                    </h4>
                    
                    <div class="mb-4">
                        {{ form_label(form.name, 'admin.role.role_name'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                        {{ form_widget(form.name, {'attr': {'class': 'form-control form-control-lg', 'placeholder': 'admin.role.role_name_placeholder'|trans}}) }}
                        <div class="form-text">
                            <i class="bi bi-info-circle me-1"></i>
                            {{ 'admin.role.role_name_help'|trans }}
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        {{ form_label(form.description, 'admin.role.description'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                        {{ form_widget(form.description, {'attr': {'class': 'form-control', 'rows': 3, 'placeholder': 'admin.role.description_placeholder'|trans}}) }}
                        <div class="form-text">
                            <i class="bi bi-text-paragraph me-1"></i>
                            {{ 'admin.role.description_help'|trans }}
                        </div>
                </div>
                    
                    <div class="mb-4">
                        <div class="form-check">
                    {{ form_widget(form.isSystem, {'attr': {'class': 'form-check-input'}}) }}
                            {{ form_label(form.isSystem, 'admin.role.system_role'|trans, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                        </div>
                        <div class="form-text">
                            <i class="bi bi-shield-lock me-1"></i>
                            {{ 'admin.role.system_role_help'|trans }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Permissions -->
            <div class="col-12 col-lg-8">
                <div class="admin-card p-4">
                    <h4 class="gradient-text fw-bold mb-4">
                        <i class="bi bi-key me-2"></i>
                        {{ 'admin.role.permissions_title'|trans }}
                    </h4>
                    
                    <!-- Quick Actions -->
                    <div class="permission-actions mb-4 p-3 bg-light rounded">
                        <h6 class="fw-bold mb-3 text-primary">
                            <i class="bi bi-lightning me-2"></i>
                            {{ 'admin.role.quick_selection'|trans }}
                        </h6>
                        <div class="d-flex gap-2 flex-wrap">
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="selectAll()">
                                <i class="bi bi-check-all me-1"></i>
                                {{ 'admin.role.select_all'|trans }}
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="deselectAll()">
                                <i class="bi bi-x-circle me-1"></i>
                                {{ 'admin.role.deselect_all'|trans }}
                            </button>
                            <button type="button" class="btn btn-outline-success btn-sm" onclick="selectReadOnly()">
                                <i class="bi bi-eye me-1"></i>
                                {{ 'admin.role.read_only'|trans }}
                            </button>
                            <button type="button" class="btn btn-outline-warning btn-sm" onclick="selectEditor()">
                                <i class="bi bi-pencil me-1"></i>
                                {{ 'admin.role.editor'|trans }}
                            </button>
                            <button type="button" class="btn btn-outline-info btn-sm" onclick="selectAdmin()">
                                <i class="bi bi-shield-check me-1"></i>
                                {{ 'admin.role.administrator'|trans }}
                            </button>
                        </div>
                    </div>
                    
                    <!-- Custom permissions interface -->
                    <div class="permissions-container">
                        {% set permissionGroups = {
                            'Dashboard': {'icon': 'bi-speedometer2', 'title': 'admin.permission_groups.dashboard'|trans, 'color': 'primary'},
                            'Benutzer': {'icon': 'bi-people', 'title': 'admin.permission_groups.user'|trans, 'color': 'success'},
                            'Rollen': {'icon': 'bi-shield-check', 'title': 'admin.permission_groups.role'|trans, 'color': 'warning'},
                            'Seiten': {'icon': 'bi-file-text', 'title': 'admin.permission_groups.page'|trans, 'color': 'info'},
                            'Kategorien': {'icon': 'bi-folder', 'title': 'admin.permission_groups.category'|trans, 'color': 'secondary'},
                            'Medien': {'icon': 'bi-image', 'title': 'admin.permission_groups.media'|trans, 'color': 'purple'},
                            'Einstellungen': {'icon': 'bi-gear', 'title': 'admin.permission_groups.settings'|trans, 'color': 'dark'},
                            'Plugins': {'icon': 'bi-puzzle', 'title': 'admin.permission_groups.extensions'|trans, 'color': 'indigo'},
                            'Werkzeuge': {'icon': 'bi-wrench', 'title': 'admin.permission_groups.tools'|trans, 'color': 'orange'},
                            'Lizenz': {'icon': 'bi-shield-check', 'title': 'admin.permission_groups.license'|trans, 'color': 'danger'},
                            'System': {'icon': 'bi-cpu', 'title': 'admin.permission_groups.system'|trans, 'color': 'teal'},
                            'Users': {'icon': 'bi-people', 'title': 'admin.permission_groups.user'|trans, 'color': 'success'},
                            'Roles': {'icon': 'bi-shield-check', 'title': 'admin.permission_groups.role'|trans, 'color': 'warning'},
                            'Pages': {'icon': 'bi-file-text', 'title': 'admin.permission_groups.page'|trans, 'color': 'info'},
                            'Categories': {'icon': 'bi-folder', 'title': 'admin.permission_groups.category'|trans, 'color': 'secondary'},
                            'Media': {'icon': 'bi-image', 'title': 'admin.permission_groups.media'|trans, 'color': 'purple'},
                            'Settings': {'icon': 'bi-gear', 'title': 'admin.permission_groups.settings'|trans, 'color': 'dark'},
                            'Tools': {'icon': 'bi-wrench', 'title': 'admin.permission_groups.tools'|trans, 'color': 'orange'}
                        } %}
                        
                        {% for groupKey, groupInfo in permissionGroups %}
                            {% set groupPermissions = [] %}
                            {% for child in form.permissions %}
                                {% set permissionName = child.vars.label %}
                                {% if permissionName starts with groupKey %}
                                    {% set groupPermissions = groupPermissions|merge([child]) %}
                                {% endif %}
                            {% endfor %}
                            
                            {% if groupPermissions|length > 0 %}
                                <div class="permission-group mb-4">
                                    <div class="permission-group-header mb-3">
                                        <div class="d-flex align-items-center">
                                            <div class="permission-group-icon me-3">
                                                <i class="{{ groupInfo.icon }} text-{{ groupInfo.color }}"></i>
                                            </div>
                                            <div>
                                                <h5 class="fw-bold mb-1">{{ groupInfo.title }}</h5>
                                                <small class="text-muted">{{ groupPermissions|length }} {{ (groupPermissions|length > 1 ? 'admin.role.permissions_count_plural' : 'admin.role.permissions_count')|trans }}</small>
                                            </div>
                                            <div class="ms-auto">
                                                <button type="button" class="btn btn-sm btn-outline-{{ groupInfo.color }} toggle-group" data-group="{{ groupKey|lower }}">
                                                    <i class="bi bi-chevron-down"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="permission-group-content" id="group-{{ groupKey|lower }}">
                                        <div class="row g-3">
                                            {% for child in groupPermissions %}
                                                <div class="col-12 col-md-6 col-lg-4">
                                                    <div class="form-check permission-item">
                                                        {{ form_widget(child, {'attr': {'class': 'form-check-input permission-checkbox'}}) }}
                                                        {{ form_label(child, null, {'label_attr': {'class': 'form-check-label fw-normal'}}) }}
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                        
                        <!-- Ungrouped permissions -->
                        {% set ungroupedPermissions = [] %}
                        {% for child in form.permissions %}
                            {% set permissionName = child.vars.label %}
                            {% set isGrouped = false %}
                            {% for groupKey in permissionGroups|keys %}
                                {% if permissionName starts with groupKey %}
                                    {% set isGrouped = true %}
                                {% endif %}
                            {% endfor %}
                            {% if not isGrouped %}
                                {% set ungroupedPermissions = ungroupedPermissions|merge([child]) %}
                            {% endif %}
                        {% endfor %}
                        
                        {% if ungroupedPermissions|length > 0 %}
                            <div class="permission-group mb-4">
                                <div class="permission-group-header mb-3">
                                    <div class="d-flex align-items-center">
                                        <div class="permission-group-icon me-3">
                                            <i class="bi bi-gear text-secondary"></i>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-1">{{ 'admin.role.permission_groups.other'|trans }}</h5>
                                            <small class="text-muted">{{ ungroupedPermissions|length }} {{ (ungroupedPermissions|length > 1 ? 'admin.role.permissions_count_plural' : 'admin.role.permissions_count')|trans }}</small>
                                        </div>
                                        <div class="ms-auto">
                                            <button type="button" class="btn btn-sm btn-outline-secondary toggle-group" data-group="other">
                                                <i class="bi bi-chevron-down"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="permission-group-content" id="group-other">
                                    <div class="row g-3">
                                        {% for child in ungroupedPermissions %}
                                            <div class="col-12 col-md-6 col-lg-4">
                                                <div class="form-check permission-item">
                                                    {{ form_widget(child, {'attr': {'class': 'form-check-input permission-checkbox'}}) }}
                                                    {{ form_label(child, null, {'label_attr': {'class': 'form-check-label fw-normal'}}) }}
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        {{ form_end(form) }}
    </div>

    <style>
        .permission-group {
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 1.5rem;
            transition: all 0.3s ease;
            background: #ffffff;
            margin-bottom: 1.5rem;
        }
        
        .permission-group:hover {
            border-color: #3b82f6;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
            transform: translateY(-1px);
        }
        
        .permission-group-header {
            border-bottom: 1px solid #f1f5f9;
            padding-bottom: 1rem;
            margin-bottom: 1rem;
        }
        
        .permission-group-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            border: 1px solid rgba(59, 130, 246, 0.2);
        }
        
        .permission-item {
            padding: 0.75rem;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            transition: all 0.2s ease;
            background: #ffffff;
            margin-bottom: 0.5rem;
        }
        
        .permission-item:hover {
            background-color: #f8fafc;
            border-color: #3b82f6;
            box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
        }
        
        .permission-item .form-check-input {
            margin-top: 0.25rem;
        }
        
        .permission-item .form-check-label {
            font-size: 0.9rem;
            line-height: 1.4;
            color: #374151;
            cursor: pointer;
            padding-left: 0.5rem;
        }
        
        .permission-item .form-check-input:checked + .form-check-label {
            color: #1f2937;
            font-weight: 500;
        }
        
        .permission-group-content {
            transition: all 0.3s ease;
        }
        
        .permission-group-content.collapsed {
            display: none;
        }
        
        .toggle-group .bi-chevron-down {
            transition: transform 0.3s ease;
        }
        
        .toggle-group.collapsed .bi-chevron-down {
            transform: rotate(-90deg);
        }
    </style>

    <script>
        // Translation data from server
        const translations = {
            view: '{{ "admin.permissions.view"|trans }}',
            create: '{{ "admin.permissions.create"|trans }}',
            edit: '{{ "admin.permissions.edit"|trans }}',
            delete: '{{ "admin.permissions.delete"|trans }}',
            access: '{{ "admin.permissions.access"|trans }}',
            upload: '{{ "admin.permissions.upload"|trans }}',
            install: '{{ "admin.permissions.install"|trans }}',
            admin: '{{ "admin.permissions.admin"|trans }}'
        };

        // Toggle permission groups
        document.querySelectorAll('.toggle-group').forEach(button => {
            button.addEventListener('click', function() {
                const groupKey = this.dataset.group;
                const content = document.getElementById('group-' + groupKey);
                const isCollapsed = content.classList.contains('collapsed');
                
                if (isCollapsed) {
                    content.classList.remove('collapsed');
                    this.classList.remove('collapsed');
                } else {
                    content.classList.add('collapsed');
                    this.classList.add('collapsed');
                }
            });
        });

        // Quick selection functions
        function selectAll() {
            document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
                checkbox.checked = true;
            });
        }

        function deselectAll() {
            document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
                checkbox.checked = false;
            });
        }

        function selectReadOnly() {
            deselectAll();
            document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
                const label = checkbox.nextElementSibling.textContent;
                // Check for view permissions using translations
                if (label.includes(' - ' + translations.view) || 
                    label.includes('Dashboard - ' + translations.access)) {
                    checkbox.checked = true;
                }
            });
        }

        function selectEditor() {
            deselectAll();
            document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
                const label = checkbox.nextElementSibling.textContent;
                // Check for view, create, and edit permissions using translations
                if (label.includes(' - ' + translations.view) || 
                    label.includes(' - ' + translations.create) ||
                    label.includes(' - ' + translations.edit) ||
                    label.includes('Dashboard - ' + translations.access)) {
                    checkbox.checked = true;
                }
            });
        }

        function selectAdmin() {
            selectAll(); // Admin hat alle Rechte
        }
    </script>
{% endblock %}