{% extends "base.html" %}
{% load i18n %}
{% load custom_filters %}
{% block title %}
    {% trans "Permission Management" %}
{% endblock title %}
{% block content %}
    <div class="container-fluid">
        <div class="row mb-4">
            <div class="col">
                <div class="d-sm-flex justify-content-between align-items-center">
                    <h3 class="mb-0">
                        {% if group %}
                            {{ _("Edit Permissions for") }}: <strong>{{ group.name }}</strong>
                        {% else %}
                            {{ _("Add Permissions") }}
                        {% endif %}
                    </h3>
                    <div class="badge bg-primary rounded-pill">{{ group_permission_ids|length }} {% trans "permissions assigned" %}</div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <form method="post" novalidate>
            {% csrf_token %}
            <div class="row mb-4">
                <div class="col-md-6">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                        <input type="text"
                               class="form-control"
                               id="permissionSearch"
                               placeholder="{% trans 'Search permissions...' %}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="alert alert-info py-2 mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        {% trans "Checked items are currently assigned permissions" %}
                    </div>
                </div>
            </div>
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4"
                 id="permissionsGrid">
                {% for app_label, models in grouped_permissions.items %}
                    <div class="col">
                        {# This div opens for each app_label #}
                        <div class="card h-100 border-{% if app_label in group_permission_apps %}primary{% else %}light{% endif %}">
                            <div class="card-header bg-{% if app_label in group_permission_apps %}primary text-white{% else %}light{% endif %}">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-{% if app_label in group_permission_apps %}check-circle{% else %}cube{% endif %} me-2"></i>
                                        {{ app_label|capfirst }}
                                    </h5>
                                    <span class="badge bg-{% if app_label in group_permission_apps %}light text-primary{% else %}secondary{% endif %}">
                                        {{ models|length }} {% trans "categories" %}
                                    </span>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="accordion" id="accordion-{{ app_label|slugify }}">
                                    {% for model, perms in models.items %}
                                        <div class="accordion-item border-0 mb-2">
                                            <h6 class="accordion-header"
                                                id="heading-{{ app_label|slugify }}-{{ model|slugify }}">
                                                <button class="accordion-button collapsed bg-white shadow-none py-2"
                                                        type="button"
                                                        data-bs-toggle="collapse"
                                                        data-bs-target="#collapse-{{ app_label|slugify }}-{{ model|slugify }}"
                                                        aria-expanded="false"
                                                        aria-controls="collapse-{{ app_label|slugify }}-{{ model|slugify }}">
                                                    <i class="fas fa-{% if model == 'Custom' %}star{% else %}table{% endif %} me-2"></i>
                                                    {{ model|capfirst }}
                                                    <span class="badge bg-{% if model in group_permission_models %}primary{% else %}secondary{% endif %} rounded-pill ms-2">
                                                        {# This is where you might need the custom filter 'count_checked' #}
                                                        {{ perms|length }} / {{ perms|count_checked:group_permission_ids }}
                                                    </span>
                                                </button>
                                            </h6>
                                            <div id="collapse-{{ app_label|slugify }}-{{ model|slugify }}"
                                                 class="accordion-collapse collapse"
                                                 aria-labelledby="heading-{{ app_label|slugify }}-{{ model|slugify }}"
                                                 data-bs-parent="#accordion-{{ app_label|slugify }}">
                                                <div class="accordion-body pt-0 px-0">
                                                    <div class="list-group list-group-flush">
                                                        {% for perm in perms %}
                                                            <label class="list-group-item d-flex gap-2 {% if perm.id in group_permission_ids %}bg-light-primary{% endif %}">
                                                                <input class="form-check-input flex-shrink-0 mt-0"
                                                                       type="checkbox"
                                                                       name="permissions"
                                                                       value="{{ perm.id }}"
                                                                       id="perm_{{ perm.id }}"
                                                                       {% if perm.id in group_permission_ids %}checked{% endif %}>
                                                                <span>
                                                                    <span class="d-block fw-bold">{{ perm.name|capfirst }}</span>
                                                                    <small class="d-block text-muted">{{ perm.codename }}</small>
                                                                    {% if model == 'Custom' %}
                                                                        <span class="badge bg-info mt-1">
                                                                            <i class="fas fa-star me-1"></i>{% trans "Custom" %}
                                                                        </span>
                                                                    {% elif perm.id in group_permission_ids %}
                                                                        <span class="badge bg-success mt-1">
                                                                            <i class="fas fa-check me-1"></i>{% trans "Assigned" %}
                                                                        </span>
                                                                    {% endif %}
                                                                </span>
                                                            </label>
                                                        {% endfor %}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <div class="row mt-4 mb-4">
                <div class="col">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="badge bg-primary rounded-pill me-2">{{ group_permission_ids|length }} {% trans "selected" %}</span>
                            <span class="text-muted">{% trans "Permissions will be updated immediately" %}</span>
                        </div>
                        <div>
                            <button type="submit" class="btn btn-lg btn-primary me-2">
                                <i class="fas fa-save me-1"></i>{% trans "Save Changes" %}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <style>
        .bg-light-primary {
            background-color: rgba(13, 110, 253, 0.1);
        }
        .list-group-item:hover {
            background-color: rgba(0, 0, 0, 0.03);
        }
        .accordion-button:not(.collapsed) {
            box-shadow: none;
            background-color: transparent;
        }
        .accordion-button:focus {
            box-shadow: none;
            border-color: rgba(0,0,0,.125);
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
    // Initialize all accordions
            document.querySelectorAll('.accordion-button').forEach(button => {
                button.addEventListener('click', function() {
                    const target = this.getAttribute('data-bs-target');
                    new bootstrap.Collapse(target, {
                        toggle: true
                    });
                });
            });

    // Search functionality
            const permissionSearch = document.getElementById('permissionSearch');
            if (permissionSearch) {
                permissionSearch.addEventListener('input', function(e) {
                    const searchTerm = e.target.value.toLowerCase();
                    let hasVisibleResults = false;

                    document.querySelectorAll('.accordion-body .list-group-item').forEach(item => {
                        const text = item.textContent.toLowerCase();
                        const isVisible = text.includes(searchTerm);
                        item.style.display = isVisible ? '' : 'none';
                        if (isVisible) hasVisibleResults = true;
                    });

            // Open accordions with visible results
                    document.querySelectorAll('.accordion-collapse').forEach(collapse => {
                        const button = document.querySelector(`button[data-bs-target="#${collapse.id}"]`);
                        if (button) {
                            const hasVisible = collapse.querySelector('.list-group-item[style=""]');
                            const bsCollapse = bootstrap.Collapse.getInstance(collapse) ||
                            new bootstrap.Collapse(collapse);

                            if (hasVisible) {
                                bsCollapse.show();
                            } else if (!hasVisibleResults) {
                                bsCollapse.hide();
                            }
                        }
                    });
                });
            }
        });
    </script>
{% endblock %}