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

{% block content %}
<main class="content">
    <div class="container-fluid p-0">
        <div class="mb-3">
            <h1 class="h3 d-inline align-middle">Role Permissions Management</h1>
            <p class="text-muted">Manage feature access permissions for different system roles</p>
        </div>

        {% include 'partials/_messages.html' %}

        <!-- Initialize Data Button -->
        {% if not roles_data %}
        <div class="row mb-4">
            <div class="col-12">
                <div class="alert alert-warning">
                    <h5><i class="align-middle me-2" data-feather="alert-triangle"></i>No Data Found</h5>
                    <p>System roles and features need to be initialized.</p>
                    <a href="{% url 'initialize-data' %}" class="btn btn-primary">
                        <i class="align-middle me-1" data-feather="database"></i> Initialize System Data
                    </a>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Search and Add Role Section -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <h5 class="card-title mb-0">
                                    <i class="align-middle me-2" data-feather="shield"></i>
                                    System Roles & Permissions
                                </h5>
                            </div>
                            <div class="col-md-6 text-end">
                                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addRoleModal">
                                    <i class="align-middle me-1" data-feather="plus"></i> Add New Role
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Search Section -->
                        <div class="row mb-4">
                            <div class="col-md-8">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search roles..." id="searchRoles">
                                    <button class="btn btn-outline-secondary" type="button" id="searchButton">
                                        <i class="align-middle" data-feather="search"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-4 text-end">
                                <div class="btn-group">
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="#" data-filter="all">All Roles</a></li>
                                        <li><a class="dropdown-item" href="#" data-filter="with-permissions">With Permissions</a></li>
                                        <li><a class="dropdown-item" href="#" data-filter="no-permissions">No Permissions</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Roles Table -->
                        <div class="table-responsive">
                            <table class="table table-striped table-hover" id="rolesTable">
                                <thead class="table-light">
                                    <tr>
                                        <th width="80">ID</th>
                                        <th>Role Name</th>
                                        <th>Description</th>
                                        <th>Features Assigned</th>
                                        <th width="200" class="text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for role in roles_data %}
                                    <tr>
                                        <td><strong>{{ role.id }}</strong></td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                {% if role.role_name == "Director" %}
                                                <div class="bg-primary rounded-circle p-2 me-3">
                                                    <i class="text-white" data-feather="user-check" width="18" height="18"></i>
                                                </div>
                                                {% elif role.role_name == "Manager" %}
                                                <div class="bg-info rounded-circle p-2 me-3">
                                                    <i class="text-white" data-feather="users" width="18" height="18"></i>
                                                </div>
                                                {% elif role.role_name == "Student Counsellor" %}
                                                <div class="bg-warning rounded-circle p-2 me-3">
                                                    <i class="text-white" data-feather="user" width="18" height="18"></i>
                                                </div>
                                                {% elif role.role_name == "Accountant" %}
                                                <div class="bg-success rounded-circle p-2 me-3">
                                                    <i class="text-white" data-feather="dollar-sign" width="18" height="18"></i>
                                                </div>
                                                {% elif role.role_name == "Student" %}
                                                <div class="bg-secondary rounded-circle p-2 me-3">
                                                    <i class="text-white" data-feather="user-x" width="18" height="18"></i>
                                                </div>
                                                {% elif role.role_name == "System Administrator" %}
                                                <div class="bg-danger rounded-circle p-2 me-3">
                                                    <i class="text-white" data-feather="settings" width="18" height="18"></i>
                                                </div>
                                                {% elif role.role_name == "Payment Collector" %}
                                                <div class="bg-primary rounded-circle p-2 me-3">
                                                    <i class="text-white" data-feather="credit-card" width="18" height="18"></i>
                                                </div>
                                                {% elif role.role_name == "Admin Officer" %}
                                                <div class="bg-info rounded-circle p-2 me-3">
                                                    <i class="text-white" data-feather="briefcase" width="18" height="18"></i>
                                                </div>
                                                {% elif role.role_name == "Cashier" %}
                                                <div class="bg-success rounded-circle p-2 me-3">
                                                    <i class="text-white" data-feather="dollar-sign" width="18" height="18"></i>
                                                </div>
                                                {% elif role.role_name == "Assistant Manager" %}
                                                <div class="bg-warning rounded-circle p-2 me-3">
                                                    <i class="text-white" data-feather="users" width="18" height="18"></i>
                                                </div>
                                                {% elif role.role_name == "Academic Head" %}
                                                <div class="bg-dark rounded-circle p-2 me-3">
                                                    <i class="text-white" data-feather="book" width="18" height="18"></i>
                                                </div>
                                                {% else %}
                                                <div class="bg-primary rounded-circle p-2 me-3">
                                                    <i class="text-white" data-feather="user" width="18" height="18"></i>
                                                </div>
                                                {% endif %}
                                                <strong>{{ role.role_name }}</strong>
                                            </div>
                                        </td>
                                        <td>
                                            {% if role.role_name == "Director" %}
                                                Full system access and administrative privileges
                                            {% elif role.role_name == "Manager" %}
                                                Department management and reporting access
                                            {% elif role.role_name == "Student Counsellor" %}
                                                Student management and counseling access
                                            {% elif role.role_name == "Accountant" %}
                                                Financial and payment management access
                                            {% elif role.role_name == "Student" %}
                                                Basic student access and profile management
                                            {% elif role.role_name == "System Administrator" %}
                                                System configuration and user management
                                            {% elif role.role_name == "Payment Collector" %}
                                                Payment collection and invoice management
                                            {% elif role.role_name == "Admin Officer" %}
                                                Administrative and office management tasks
                                            {% elif role.role_name == "Cashier" %}
                                                Cash handling and payment processing
                                            {% elif role.role_name == "Assistant Manager" %}
                                                Assistant management and operational support
                                            {% elif role.role_name == "Academic Head" %}
                                                Academic program management and oversight
                                            {% else %}
                                                System role with specific permissions
                                            {% endif %}
                                        </td>
                                        <td>
                                            <span class="badge {{ role.badge_class }}">{{ role.badge_text }}</span>
                                        </td>
                                        <td class="text-center">
                                            <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#assignFeaturesModal" data-role-id="{{ role.id }}" data-role-name="{{ role.role_name }}">
                                                <i class="align-middle me-1" data-feather="edit-2"></i> Assign Features
                                            </button>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination -->
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <p class="text-muted">Showing all {{ roles_data|length }} system roles</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- Add New Role Modal -->
<div class="modal fade" id="addRoleModal" tabindex="-1" aria-labelledby="addRoleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addRoleModalLabel">
                    <i class="align-middle me-2" data-feather="plus-circle"></i> Add New Role
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addRoleForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="roleName" class="form-label">Role Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="roleName" placeholder="Enter role name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="roleDescription" class="form-label">Description</label>
                                <input type="text" class="form-control" id="roleDescription" placeholder="Enter role description">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">System Role Permission</label>
                        <div class="form-text">
                            This role determines what modules and permissions the user can access in the system.
                            Use the Role Name and Description above to define the access level (Admin, Manager, Staff, Viewer, etc.).
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveRoleBtn">Create Role</button>
            </div>
        </div>
    </div>
</div>

<!-- Assign Features Modal -->
<div class="modal fade" id="assignFeaturesModal" tabindex="-1" aria-labelledby="assignFeaturesModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="assignFeaturesModalLabel">
                    <i class="align-middle me-2" data-feather="edit-2"></i> Assign Features to Role
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="align-middle me-2" data-feather="info"></i>
                    Selecting features for: <strong id="currentRoleName">Role Name</strong>
                </div>

                <!-- Quick Actions -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-outline-primary" id="selectAllFeatures">
                                <i class="align-middle me-1" data-feather="check-square"></i> Select All
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="deselectAllFeatures">
                                <i class="align-middle me-1" data-feather="square"></i> Deselect All
                            </button>
                        </div>
                        <span class="ms-3 text-muted">
                            <i class="align-middle me-1" data-feather="check-circle"></i>
                            <span id="selectedCount">0</span> features selected
                        </span>
                    </div>
                </div>

                <!-- Features Grid -->
                <div class="row" style="max-height: 500px; overflow-y: auto;" id="featuresContainer">
                    <div class="col-12 text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading features...</span>
                        </div>
                        <p class="mt-2">Loading features...</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="saveFeaturesBtn">
                    <i class="align-middle me-1" data-feather="save"></i> Save Permissions
                </button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Feather Icons
    if (typeof feather !== 'undefined') {
        feather.replace();
    }

    let currentRoleId = null;

    // Search functionality
    const searchInput = document.getElementById('searchRoles');
    const searchButton = document.getElementById('searchButton');
    const rolesTable = document.getElementById('rolesTable');
    const rows = rolesTable.getElementsByTagName('tbody')[0].getElementsByTagName('tr');

    function searchRoles() {
        const searchTerm = searchInput.value.toLowerCase();
        
        for (let i = 0; i < rows.length; i++) {
            const row = rows[i];
            const roleName = row.cells[1].textContent.toLowerCase();
            const description = row.cells[2].textContent.toLowerCase();
            
            if (roleName.includes(searchTerm) || description.includes(searchTerm)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        }
    }

    searchInput.addEventListener('input', searchRoles);
    searchButton.addEventListener('click', searchRoles);

    // Filter functionality
    const filterButtons = document.querySelectorAll('[data-filter]');
    
    filterButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const filter = this.getAttribute('data-filter');
            
            for (let i = 0; i < rows.length; i++) {
                const row = rows[i];
                const featuresBadge = row.cells[3].textContent.toLowerCase();
                
                switch(filter) {
                    case 'all':
                        row.style.display = '';
                        break;
                    case 'with-permissions':
                        row.style.display = featuresBadge.includes('no features') ? 'none' : '';
                        break;
                    case 'no-permissions':
                        row.style.display = featuresBadge.includes('no features') ? '' : 'none';
                        break;
                }
            }
        });
    });

    // Add Role Modal functionality
    const saveRoleBtn = document.getElementById('saveRoleBtn');
    
    saveRoleBtn.addEventListener('click', function() {
        const roleName = document.getElementById('roleName').value;
        const roleDescription = document.getElementById('roleDescription').value;
        
        if (!roleName) {
            alert('Please enter a role name');
            return;
        }
        
        createNewRole(roleName, roleDescription);
    });

    // Assign Features Modal functionality
    const assignFeaturesModal = document.getElementById('assignFeaturesModal');
    const currentRoleName = document.getElementById('currentRoleName');
    const selectedCount = document.getElementById('selectedCount');
    const selectAllFeatures = document.getElementById('selectAllFeatures');
    const deselectAllFeatures = document.getElementById('deselectAllFeatures');
    const saveFeaturesBtn = document.getElementById('saveFeaturesBtn');

    // Update selected count
    function updateSelectedCount() {
        const selected = document.querySelectorAll('.feature-checkbox:checked').length;
        const total = document.querySelectorAll('.feature-checkbox').length;
        selectedCount.textContent = selected + ' of ' + total + ' features selected';
        console.log('Selected: ' + selected + ' out of ' + total + ' total checkboxes');
    }

    // Select All Features
    selectAllFeatures.addEventListener('click', function() {
        const allCheckboxes = document.querySelectorAll('.feature-checkbox');
        console.log('Select All: Found ' + allCheckboxes.length + ' checkboxes');
        
        allCheckboxes.forEach(checkbox => {
            checkbox.checked = true;
        });
        
        document.querySelectorAll('.category-checkbox').forEach(checkbox => {
            checkbox.checked = true;
            checkbox.indeterminate = false;
        });
        
        updateSelectedCount();
    });

    // Deselect All Features
    deselectAllFeatures.addEventListener('click', function() {
        const allCheckboxes = document.querySelectorAll('.feature-checkbox');
        console.log('Deselect All: Found ' + allCheckboxes.length + ' checkboxes');
        
        allCheckboxes.forEach(checkbox => {
            checkbox.checked = false;
        });
        
        document.querySelectorAll('.category-checkbox').forEach(checkbox => {
            checkbox.checked = false;
            checkbox.indeterminate = false;
        });
        
        updateSelectedCount();
    });

    // Save Features - ENHANCED VERSION
    saveFeaturesBtn.addEventListener('click', function() {
        const selectedFeatures = document.querySelectorAll('.feature-checkbox:checked');
        const featureCodes = Array.from(selectedFeatures).map(checkbox => checkbox.value);
        
        console.log('Saving ' + featureCodes.length + ' features to backend for role ' + currentRoleId);
        console.log('Feature codes:', featureCodes);
        
        if (selectedFeatures.length === 0) {
            if (!confirm('No features selected. This will remove all permissions from this role. Continue?')) {
                return;
            }
        }
        
        // Show loading state
        saveFeaturesBtn.disabled = true;
        saveFeaturesBtn.innerHTML = '<i class="align-middle me-1" data-feather="loader"></i> Saving...';
        if (typeof feather !== 'undefined') {
            feather.replace();
        }
        
        saveRoleFeatures(currentRoleId, featureCodes);
    });

    // Set role name when opening assign features modal
    assignFeaturesModal.addEventListener('show.bs.modal', function(event) {
        const button = event.relatedTarget;
        const roleId = button.getAttribute('data-role-id');
        const roleName = button.getAttribute('data-role-name');
        
        currentRoleId = roleId;
        currentRoleName.textContent = roleName;
        
        document.getElementById('assignFeaturesModalLabel').innerHTML = '<i class="align-middle me-2" data-feather="edit-2"></i> Assign Features to ' + roleName;
        
        // Reset save button state
        saveFeaturesBtn.disabled = false;
        saveFeaturesBtn.innerHTML = '<i class="align-middle me-1" data-feather="save"></i> Save Permissions';
        
        // Load current features for this role
        loadRoleFeatures(roleId);
        
        // Re-initialize feather icons
        if (typeof feather !== 'undefined') {
            feather.replace();
        }
    });

    // API Functions
    async function createNewRole(roleName, description) {
        try {
            const response = await fetch('/usermanagement/api/roles/create/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCSRFToken()
                },
                body: JSON.stringify({
                    role_name: roleName,
                    description: description
                })
            });
            
            const data = await response.json();
            
            if (data.success) {
                const addRoleModal = bootstrap.Modal.getInstance(document.getElementById('addRoleModal'));
                addRoleModal.hide();
                alert('Role created successfully!');
                document.getElementById('addRoleForm').reset();
                window.location.reload();
            } else {
                alert('Error: ' + data.error);
            }
        } catch (error) {
            console.error('Error creating role:', error);
            alert('Error creating role. Please try again.');
        }
    }

    async function loadRoleFeatures(roleId) {
        try {
            console.log('Loading current features for role: ' + roleId);
            const response = await fetch('/usermanagement/api/roles/' + roleId + '/features/');
            const data = await response.json();
            
            console.log('Current role features response:', data);
            
            if (data.success) {
                // Clear all checkboxes first
                document.querySelectorAll('.feature-checkbox').forEach(checkbox => {
                    checkbox.checked = false;
                });
                document.querySelectorAll('.category-checkbox').forEach(checkbox => {
                    checkbox.checked = false;
                    checkbox.indeterminate = false;
                });
                
                // Check the assigned features
                if (data.assigned_feature_codes && data.assigned_feature_codes.length > 0) {
                    console.log('Role has ' + data.assigned_feature_codes.length + ' assigned features');
                    
                    data.assigned_feature_codes.forEach(featureCode => {
                        const checkbox = document.querySelector('.feature-checkbox[value="' + featureCode + '"]');
                        if (checkbox) {
                            checkbox.checked = true;
                            const category = checkbox.getAttribute('data-category');
                            updateCategoryCheckbox(category);
                        } else {
                            console.log('Checkbox not found for feature: ' + featureCode);
                        }
                    });
                } else {
                    console.log('Role has no assigned features');
                }
                
                updateSelectedCount();
            } else {
                console.error('Error loading role features:', data.error);
            }
        } catch (error) {
            console.error('Error loading role features:', error);
        }
    }

    function updateCategoryCheckbox(category) {
        const categoryCheckbox = document.getElementById('category_' + category);
        if (!categoryCheckbox) return;
        
        const categoryFeatures = document.querySelectorAll('.feature-checkbox[data-category="' + category + '"]');
        const checkedCategoryFeatures = document.querySelectorAll('.feature-checkbox[data-category="' + category + '"]:checked');
        
        if (checkedCategoryFeatures.length === 0) {
            categoryCheckbox.checked = false;
            categoryCheckbox.indeterminate = false;
        } else if (checkedCategoryFeatures.length === categoryFeatures.length) {
            categoryCheckbox.checked = true;
            categoryCheckbox.indeterminate = false;
        } else {
            categoryCheckbox.checked = false;
            categoryCheckbox.indeterminate = true;
        }
    }

    async function saveRoleFeatures(roleId, featureCodes) {
        try {
            console.log('Sending ' + featureCodes.length + ' features to backend for role ' + roleId);
            
            const response = await fetch('/usermanagement/api/roles/assign-features/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCSRFToken()
                },
                body: JSON.stringify({
                    role_id: parseInt(roleId),
                    feature_codes: featureCodes
                })
            });
            
            const data = await response.json();
            console.log('Backend response:', data);
            
            // Reset save button state
            saveFeaturesBtn.disabled = false;
            saveFeaturesBtn.innerHTML = '<i class="align-middle me-1" data-feather="save"></i> Save Permissions';
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
            
            if (data.success) {
                const modal = bootstrap.Modal.getInstance(assignFeaturesModal);
                modal.hide();
                alert('Permissions saved successfully! ' + data.privileges_created + ' features assigned to ' + currentRoleName.textContent + '.');
                window.location.reload();
            } else {
                alert('Error: ' + data.error);
                console.error('Backend error details:', data.error);
            }
        } catch (error) {
            console.error('Error saving features:', error);
            
            // Reset save button state
            saveFeaturesBtn.disabled = false;
            saveFeaturesBtn.innerHTML = '<i class="align-middle me-1" data-feather="save"></i> Save Permissions';
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
            
            alert('Error saving features. Please try again.');
        }
    }

    // Utility functions
    function getCSRFToken() {
        const cookieValue = document.cookie
            .split('; ')
            .find(row => row.startsWith('csrftoken='))
            ?.split('=')[1];
        return cookieValue;
    }

    // Load features and populate the modal - FIXED VERSION
    loadAllFeatures();
    
    async function loadAllFeatures() {
        try {
            console.log('Loading features from API...');
            const response = await fetch('/usermanagement/api/features/all/');
            const data = await response.json();
            
            console.log('API Response received');
            
            if (data.success) {
                console.log('API returned ' + data.features.length + ' main features');
                
                let totalSubFeatures = 0;
                data.features.forEach(feature => {
                    totalSubFeatures += feature.sub_features.length;
                    console.log(feature.main_feature + ': ' + feature.sub_features.length + ' sub-features');
                });
                
                console.log('TOTAL SUB-FEATURES FROM API: ' + totalSubFeatures);
                
                if (totalSubFeatures !== 105) {
                    console.log('API returned ' + totalSubFeatures + ' instead of 105');
                } else {
                    console.log('API successfully returned all 105 features');
                }
                
                populateFeaturesModal(data.features);
            } else {
                console.error('API Error:', data.error);
                document.getElementById('featuresContainer').innerHTML = 
                    '<div class="col-12 text-center text-danger"><p>Error loading features. Please try again.</p></div>';
            }
        } catch (error) {
            console.error('Error loading features:', error);
            document.getElementById('featuresContainer').innerHTML = 
                '<div class="col-12 text-center text-danger"><p>Error loading features. Please check your connection.</p></div>';
        }
    }

    function populateFeaturesModal(features) {
        const featuresContainer = document.getElementById('featuresContainer');
        featuresContainer.innerHTML = '';
        
        console.log('Populating features in modal...');
        let totalCheckboxesCreated = 0;
        
        features.forEach(mainFeature => {
            const col = document.createElement('div');
            col.className = 'col-md-6 mb-4';
            
            const featureDisplayMap = {
                'DASHBOARD': { name: 'Dashboards', icon: 'bar-chart-2' },
                'STUDENT_MANAGEMENT': { name: 'Student Management', icon: 'users' },
                'BATCH_MANAGEMENT': { name: 'Batch Management', icon: 'layers' },
                'PAYMENT_MANAGEMENT': { name: 'Payment Management', icon: 'dollar-sign' },
                'PROGRAM_MANAGEMENT': { name: 'Program Management', icon: 'book' },
                'USER_MANAGEMENT': { name: 'User Management', icon: 'user' },
                'REPORTS': { name: 'Reports', icon: 'file-text' },
                'PERFORMANCE_MANAGEMENT': { name: 'Performance Management', icon: 'trending-up' },
                'ITEM_MANAGEMENT': { name: 'Item Management', icon: 'package' },
                'STUDENT_ATTENDENCE': { name: 'Student Attendance', icon: 'calendar' },
                'ORGANIZATION_MANAGEMENT': { name: 'Organization Management', icon: 'globe' },
                'EMPLOYEE_MANAGEMENT': { name: 'Employee Management', icon: 'briefcase' },
                'NOTIFICATION_MANAGEMENT': { name: 'Notification Management', icon: 'bell' }
            };
            
            const displayInfo = featureDisplayMap[mainFeature.main_feature] || { 
                name: mainFeature.main_feature.replace(/_/g, ' '),
                icon: 'folder'
            };
            
            col.innerHTML = `
                <div class="card h-100">
                    <div class="card-header bg-light">
                        <h6 class="card-title mb-0">
                            <input type="checkbox" class="form-check-input category-checkbox" id="category_${mainFeature.main_feature_id}">
                            <label class="form-check-label fw-bold ms-2" for="category_${mainFeature.main_feature_id}">
                                <i class="align-middle me-1" data-feather="${displayInfo.icon}"></i> ${displayInfo.name}
                                <span class="badge bg-secondary ms-2">${mainFeature.sub_features.length}</span>
                            </label>
                        </h6>
                    </div>
                    <div class="card-body">
                        ${mainFeature.sub_features.map(subFeature => {
                            totalCheckboxesCreated++;
                            return `
                                <div class="form-check mb-2">
                                    <input class="form-check-input feature-checkbox" type="checkbox" 
                                           value="${subFeature.code}" 
                                           data-category="${mainFeature.main_feature_id}"
                                           id="feature_${subFeature.id}">
                                    <label class="form-check-label" for="feature_${subFeature.id}">
                                        ${subFeature.name}
                                    </label>
                                </div>
                            `;
                        }).join('')}
                    </div>
                </div>
            `;
            
            featuresContainer.appendChild(col);
        });
        
        console.log('FINAL CHECKBOX COUNT: ' + totalCheckboxesCreated);
        
        if (totalCheckboxesCreated !== 105) {
            console.error('PROBLEM: Frontend created ' + totalCheckboxesCreated + ' checkboxes instead of 105');
            console.error('Some features are missing from the frontend display!');
        } else {
            console.log('SUCCESS: Frontend successfully created all 105 checkboxes');
            console.log('All features are now available for assignment to any role');
        }
        
        initializeCheckboxEvents();
        
        // Re-initialize feather icons
        if (typeof feather !== 'undefined') {
            feather.replace();
        }
    }

    function initializeCheckboxEvents() {
        // Category checkbox functionality
        document.querySelectorAll('.category-checkbox').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const category = this.id.replace('category_', '');
                const features = document.querySelectorAll('.feature-checkbox[data-category="' + category + '"]');
                
                features.forEach(feature => {
                    feature.checked = this.checked;
                });
                updateSelectedCount();
            });
        });

        // Feature checkbox functionality
        document.querySelectorAll('.feature-checkbox').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const category = this.getAttribute('data-category');
                updateCategoryCheckbox(category);
                updateSelectedCount();
            });
        });
    }
});
</script>
{% endblock %}