{% 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>

<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 %}