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

    <form method="post" novalidate>
        {% csrf_token %}

        <!-- Permissions Grid -->
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4" id="permissionsGrid">
            {% for app_label, models in form.grouped_permissions.items %}
            <div class="col">
                <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 "models" %}
                            </span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="accordion">
                            {% for model, perms in models.items %}
                            <div class="accordion-item border-0">
                                <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">
                                        <i class="fas fa-table me-2"></i>{{ model|capfirst }}
                                        <span class="badge bg-{% if model in group_permission_models %}primary{% else %}secondary{% endif %} rounded-pill ms-2">
                                            {{ perms|length }} / {{ perms|count_checked }}
                                        </span>
                                    </button>
                                </h6>
                                <div id="collapse-{{ app_label|slugify }}-{{ model|slugify }}"
                                     class="accordion-collapse collapse"
                                     aria-labelledby="heading-{{ app_label|slugify }}-{{ model|slugify }}">
                                    <div class="accordion-body pt-0">
                                        <div class="list-group list-group-flush">
                                            {% for perm in perms %}
                                            <label class="list-group-item d-flex gap-2 {% if perm.is_checked %}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.is_checked %}checked{% endif %}>
                                                <span>
                                                    <span class="d-block fw-bold">{{ perm.name|capfirst }}</span>
                                                    <small class="d-block text-muted">{{ perm.codename }}</small>
                                                    {% if perm.is_checked %}
                                                    <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">
            <div class="col">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="badge bg-primary rounded-pill me-2">
                            {{ group.permissions.count }} {% trans "selected" %}
                        </span>
                        <span class="text-muted">
                            {% trans "Permissions will be updated immediately" %}
                        </span>
                    </div>
                    <div>
                        <a href="{% url 'group_detail' request.dealer.slug group.pk %}"
                           class="btn btn-outline-secondary me-2">
                            <i class="fas fa-ban me-2"></i>{% trans "Cancel" %}
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></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);
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Search functionality
    document.getElementById('permissionSearch').addEventListener('input', function(e) {
        const searchTerm = e.target.value.toLowerCase();
        document.querySelectorAll('.accordion-body .list-group-item').forEach(item => {
            const text = item.textContent.toLowerCase();
            item.style.display = text.includes(searchTerm) ? '' : 'none';
        });

        // Open relevant accordions
        document.querySelectorAll('.accordion-collapse').forEach(collapse => {
            const visibleItems = collapse.querySelectorAll('.list-group-item[style=""]');
            if (visibleItems.length > 0) {
                const button = document.querySelector(
                    `button[data-bs-target="#${collapse.id}"]`
                );
                if (button && !button.classList.contains('collapsed')) {
                    new bootstrap.Collapse(collapse, {toggle: true});
                }
            }
        });
    });
});
</script>
{% endblock %}