{% extends 'base.html' %}
{% load static %}

{% block title %}Manage {{ department.name }} Permissions - OptiNet Solutions{% endblock %}

{% block extra_css %}
<style>
    .permission-category {
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        margin-bottom: 1rem;
    }
    .permission-category-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        padding: 1rem;
        font-weight: 600;
    }
    .permission-list {
        padding: 1rem;
    }
    .form-check {
        margin-bottom: 0.5rem;
    }
    .permission-description {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }
    .category-toggle {
        cursor: pointer;
        user-select: none;
    }
    .category-toggle:hover {
        background-color: #e9ecef;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h2 class="mb-0">
                        <i class="fas fa-shield-alt text-primary me-2"></i>
                        Manage Permissions: {{ department.name }}
                    </h2>
                    <p class="text-muted mt-1">{{ department.description|default:"No description available" }}</p>
                </div>
                <div>
                    <a href="{% url 'accounts:permission_management_dashboard' %}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-1"></i>Back to Dashboard
                    </a>
                </div>
            </div>

            <form method="post">
                {% csrf_token %}
                
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Permission Assignment</h5>
                        <div>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="select-all">
                                Select All
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="clear-all">
                                Clear All
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        {% for field in form %}
                            {% if field.name != 'department' and field.name|slice:":12" == "permissions_" %}
                                <div class="permission-category">
                                    <div class="permission-category-header category-toggle" data-bs-toggle="collapse" 
                                         data-bs-target="#category-{{ field.name }}" aria-expanded="true">
                                        <i class="fas fa-chevron-down me-2"></i>
                                        {{ field.label }}
                                        <span class="badge bg-secondary ms-2">{{ field.field.queryset.count }} permissions</span>
                                    </div>
                                    <div class="collapse show" id="category-{{ field.name }}">
                                        <div class="permission-list">
                                            {% if field.field.queryset.count > 0 %}
                                                <div class="row">
                                                    {% for choice in field %}
                                                    <div class="col-md-6 col-lg-4">
                                                        <div class="form-check">
                                                            {{ choice.tag }}
                                                            <label class="form-check-label" for="{{ choice.id_for_label }}">
                                                                {{ choice.choice_label }}
                                                            </label>
                                                            {% if choice.data.value.description %}
                                                            <div class="permission-description">
                                                                {{ choice.data.value.description }}
                                                            </div>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                    {% endfor %}
                                                </div>
                                            {% else %}
                                                <p class="text-muted mb-0">No permissions available in this category.</p>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                    <div class="card-footer">
                        <div class="d-flex justify-content-between">
                            <div class="text-muted">
                                <i class="fas fa-info-circle me-1"></i>
                                Changes will be applied immediately to all users in this department.
                            </div>
                            <div>
                                <a href="{% url 'accounts:permission_management_dashboard' %}" class="btn btn-secondary me-2">
                                    Cancel
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-1"></i>Save Permissions
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // Select All functionality
    $('#select-all').click(function() {
        $('.permission-checkbox').prop('checked', true);
    });
    
    // Clear All functionality
    $('#clear-all').click(function() {
        $('.permission-checkbox').prop('checked', false);
    });
    
    // Toggle category collapse icon
    $('.category-toggle').on('click', function() {
        var icon = $(this).find('i');
        if (icon.hasClass('fa-chevron-down')) {
            icon.removeClass('fa-chevron-down').addClass('fa-chevron-right');
        } else {
            icon.removeClass('fa-chevron-right').addClass('fa-chevron-down');
        }
    });
    
    // Category-specific select all
    $('.permission-category-header').each(function() {
        var categoryId = $(this).data('bs-target');
        var selectAllBtn = $('<button type="button" class="btn btn-xs btn-outline-primary ms-2 category-select-all">Select All</button>');
        selectAllBtn.on('click', function(e) {
            e.stopPropagation();
            $(categoryId).find('.permission-checkbox').prop('checked', true);
        });
        $(this).append(selectAllBtn);
    });
});
</script>
{% endblock %}