{% extends "admin/base_site.html" %}

{% block extrahead %}{{ block.super }}
{{ form.media }}
<style>
    .role-cell {
        cursor: pointer;
        transition: background-color 0.2s;
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
        border-collapse: collapse;
        text-align: center;
    }
    .role-cell:hover {
        background-color: #f5f5f5;
    }
</style>
{% endblock %}

{% load custom_tags %}

{% block content %}
<div id="content-main">

    {% if form.errors %}
        <p class="errornote">
        Please correct the error(s) below.
        </p>
        {{ form.non_field_errors }}
    {% endif %}

    <form method="post" id="{{ opts.model_name }}_form" novalidate>
        {% csrf_token %}

        <div style="overflow-x: auto;">
            <table style="margin-bottom: 30px">
                <tr style="background-color: #eee">
                    <th rowspan="2">Users</th>
                    <th colspan="{{ role_to_user_id.keys|length }}" style="text-align: center">Roles</th>
                    <th rowspan="2">Resulting permissions on this {{ opts.model_name }}</th>
                </tr>
                <tr style="background-color: #eee">
                    {% for role in role_to_user_id.keys %}
                    <th>{{ role }}</th>
                    {% endfor %}
                </tr>

                {% for user in users_to_perms.keys %}
                    <tr>
                        <td>
                            {% admin_change_url user as change_url %}
                            <a href="{% url change_url user.pk %}">
                                {{ user }}
                                <br/>
                                ({{ user.email }})
                            </a>
                        </td>
                        {% for role, role_users in role_to_user_id.items %}
                            <td class="role-cell"
                                data-user-id="{{ user.pk }}" data-role="{{ role }}">
                            {% with user_id=user.pk|stringformat:"s" %}
                                <span class="checkmark">
                                {% if user_id in role_users %}
                                    ✔️
                                {% endif %}
                                </span>
                            {% endwith %}
                            </td>
                        {% endfor %}
                        <td>
                            {{ users_to_perms|get_item:user|join:", " }}  <!-- Display user permissions -->
                        </td>
                    </tr>
                {% endfor %}
            </table>
        </div>

        <fieldset class="module aligned">
            {% for field in form %}
                <div class="form-row" style="padding: 10px 0;">
                    {{ field.label_tag }}
                    {{ field }}
                    {{ field.errors }}
                </div>
            {% endfor %}
        </fieldset>

        <input type="submit" value="Save Changes" name="_submit">
    </form>

</div>

<script>
const roleChanges = {
    added: {},
    removed: {}
};

// Add debugging
function updateRoleChanges() {
    const jsonStr = JSON.stringify(roleChanges);
    // console.log('Updating role changes:', jsonStr);
    document.getElementById('id_role_changes').value = jsonStr;
}

document.querySelectorAll('.role-cell').forEach(cell => {
    cell.addEventListener('click', function() {
        const userId = this.dataset.userId;
        const role = this.dataset.role;
        const checkmark = this.querySelector('.checkmark');
        const hasCheck = checkmark.textContent.includes('✔️');
        const wasAdded = checkmark.textContent.includes('🔵');
        const wasRemoved = checkmark.textContent.includes('❌');
        
        if (!roleChanges.added[userId]) roleChanges.added[userId] = {};
        if (!roleChanges.removed[userId]) roleChanges.removed[userId] = {};
        
        if (hasCheck) {
            // Mark existing checkmark for removal
            checkmark.textContent = '❌';
            roleChanges.removed[userId][role] = true;
        } else if (wasRemoved) {
            // Restore original checkmark
            checkmark.textContent = '✔️';
            delete roleChanges.removed[userId][role];
        } else if (wasAdded) {
            // Clear addition
            checkmark.textContent = '';
            delete roleChanges.added[userId][role];
        } else {
            // Add new checkmark
            checkmark.textContent = '🔵';
            roleChanges.added[userId][role] = true;
        }
        
        // Clean up empty user entries
        if (Object.keys(roleChanges.added[userId] || {}).length === 0) {
            delete roleChanges.added[userId];
        }
        if (Object.keys(roleChanges.removed[userId] || {}).length === 0) {
            delete roleChanges.removed[userId];
        }
        
        // Replace direct update with debugging function
        updateRoleChanges();
    });
});
</script>
{% endblock %}