{% extends "module_base.html" %}
{% load static %}

{% block title %}Assign Permissions to {{ role.name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">
                        <i class="fas fa-key me-2"></i>Assign Permissions to Role: {{ role.name }}
                    </h4>
                    <div class="card-tools">
                        <a href="{% url 'accounts:role_detail' role.id %}" class="btn btn-info btn-sm">
                            <i class="fas fa-eye"></i> View Role
                        </a>
                        <a href="{% url 'accounts:role_list' %}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-arrow-left"></i> Back to Roles
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}

                        <div class="row">
                            <div class="col-12">
                                <div class="alert alert-info">
                                    <h6><i class="fas fa-info-circle me-2"></i>Permission Assignment</h6>
                                    <p class="mb-0">Select the permissions that users with the role <strong>{{ role.name }}</strong> should have access to.</p>
                                </div>

                                <div class="permissions-section" style="max-height: 500px; overflow-y: auto; border: 1px solid #dee2e6; padding: 15px; border-radius: 5px;">
                                    {% if permissions %}
                                        {% regroup permissions by module as module_list %}
                                        {% for module in module_list %}
                                            <div class="module-section mb-4">
                                                <h5 class="module-header">
                                                    <i class="fas fa-folder-open me-2"></i>{{ module.grouper|title }} Module
                                                </h5>
                                                <div class="row">
                                                    {% for permission in module.list %}
                                                        <div class="col-md-6 mb-2">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" id="perm_{{ permission.id }}" name="permissions"
                                                                       value="{{ permission.id }}"
                                                                       {% if permission.id in role_permissions %}checked{% endif %}>
                                                                <label class="form-check-label" for="perm_{{ permission.id }}">
                                                                    <strong>{{ permission.name }}</strong>
                                                                    <br>
                                                                    <small class="text-muted">{{ permission.description|default:"No description available" }}</small>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                                <hr>
                                            </div>
                                        {% endfor %}
                                    {% else %}
                                        <div class="text-center text-muted">
                                            <i class="fas fa-exclamation-triangle fa-2x mb-3"></i>
                                            <p>No permissions available to assign.</p>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>Update Permissions
                                </button>
                                <button type="button" class="btn btn-outline-secondary" onclick="selectAll()">
                                    <i class="fas fa-check-square me-2"></i>Select All
                                </button>
                                <button type="button" class="btn btn-outline-secondary" onclick="clearAll()">
                                    <i class="fas fa-square me-2"></i>Clear All
                                </button>
                                <a href="{% url 'accounts:role_detail' role.id %}" class="btn btn-secondary">
                                    <i class="fas fa-times me-2"></i>Cancel
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Role Information</h5>
                </div>
                <div class="card-body">
                    <p><strong>Role Name:</strong><br>{{ role.name }}</p>
                    <p><strong>Description:</strong><br>{{ role.description|default:"-" }}</p>
                    <p><strong>Current Permissions:</strong><br>{{ role.rolepermission_set.count }}</p>
                    <p><strong>Assigned Users:</strong><br>{{ role.userrole_set.count }}</p>
                    <hr>
                    <p class="small text-muted">Changes will take effect immediately for all users assigned to this role.</p>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="mb-0">Quick Actions</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{% url 'accounts:edit_role' role.id %}" class="btn btn-outline-warning btn-sm">
                            <i class="fas fa-edit me-2"></i>Edit Role
                        </a>
                        <a href="{% url 'accounts:delete_role' role.id %}" class="btn btn-outline-danger btn-sm">
                            <i class="fas fa-trash me-2"></i>Delete Role
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add some interactivity to permission checkboxes
    const checkboxes = document.querySelectorAll('input[name="permissions"]');
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            updatePermissionCount();
        });
    });

    updatePermissionCount();
});

function updatePermissionCount() {
    const selectedCount = document.querySelectorAll('input[name="permissions"]:checked').length;
    // Could update a counter display if needed
}

function selectAll() {
    document.querySelectorAll('input[name="permissions"]').forEach(checkbox => {
        checkbox.checked = true;
    });
    updatePermissionCount();
}

function clearAll() {
    document.querySelectorAll('input[name="permissions"]').forEach(checkbox => {
        checkbox.checked = false;
    });
    updatePermissionCount();
}

// Form validation
document.querySelector('form').addEventListener('submit', function(e) {
    const selectedPermissions = document.querySelectorAll('input[name="permissions"]:checked').length;
    if (selectedPermissions === 0) {
        if (!confirm('No permissions selected. Are you sure you want to remove all permissions from this role?')) {
            e.preventDefault();
            return false;
        }
    }
});
</script>
{% endblock %}