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

{% block content %}

<main class="content">
    <div class="container-fluid p-0">

        <!-- HEADER -->
        <div class="mb-3">
            <h1 class="h3">Role Permissions Management</h1>
            <p class="text-muted">Manage feature access permissions for different system roles</p>
        </div>

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

        <!-- ================= TABLE ================= -->
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i data-feather="shield"></i>
                    System Roles & Permissions
                </h5>

                <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addRoleModal">
                    <i data-feather="plus"></i> Add New Role
                </button>
            </div>

            <div class="card-body">

                <!-- SEARCH -->
                <div class="row mb-3">
                    <div class="col-md-8">
                        <div class="input-group">
                            <input type="text" id="searchRoles" class="form-control" placeholder="Search roles...">
                            <button class="btn btn-outline-secondary">
                                <i data-feather="search"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- TABLE -->
                <div class="table-responsive">
                    <table class="table table-striped table-hover align-middle" id="rolesTable">
                        <thead class="table-light">
                            <tr>
                                <th>ID</th>
                                <th>Role Name</th>
                                <th>Description</th>
                                <th>Features Assigned</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>

                        <tbody>
                            {% for role in roles_data %}
                            <tr>
                                <td>{{ role.id }}</td>

                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="role-icon {{ role.icon_class }}">
                                            <i data-feather="user-check"></i>
                                        </div>
                                        <strong class="ms-2">{{ role.role_name }}</strong>
                                    </div>
                                </td>

                                <td>{{ role.role_description }}</td>

                                <td>
                                    <span class="badge bg-success">
                                        {{ role.assigned_features_count }} features
                                    </span>
                                </td>

                                <td class="text-center">
                                    <button
                                        class="btn btn-primary btn-sm assign-btn"
                                        data-role-id="{{ role.id }}"
                                        data-role-name="{{ role.role_name }}"
                                        data-bs-toggle="modal"
                                        data-bs-target="#assignModal">
                                        <i data-feather="edit-2"></i> Assign Features
                                    </button>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center text-danger">No roles found</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

            </div>
        </div>

    </div>
</main>


<!-- ================= ADD ROLE MODAL ================= -->
<div class="modal fade" id="addRoleModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <form method="post">
                {% csrf_token %}
                <input type="hidden" name="action" value="create_role">

                <div class="modal-header">
                    <h5>Add New Role</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <label>Role Name *</label>
                    <input type="text" name="role_name" class="form-control" required>

                    <label class="mt-2">Description</label>
                    <input type="text" name="description" class="form-control">
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Create Role</button>
                </div>

            </form>

        </div>
    </div>
</div>


<!-- ================= ASSIGN FEATURES MODAL ================= -->
<div class="modal fade" id="assignModal">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">

            <form method="post">
                {% csrf_token %}
                <input type="hidden" name="action" value="assign_features">
                <input type="hidden" name="role_id" id="roleId">

                <div class="modal-header">
                    <h5>Assign Features to <span id="roleName"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <!-- BUTTONS -->
                    <button type="button" class="btn btn-sm btn-primary" onclick="selectAll()">Select All</button>
                    <button type="button" class="btn btn-sm btn-secondary" onclick="deselectAll()">Deselect All</button>

                    <div style="max-height:500px; overflow:auto" class="mt-3">

                        {% for group in feature_groups %}
                        <div class="card mb-2">
                            <div class="card-header">
                                <strong>{{ group.feature_name }}</strong>
                            </div>

                            <div class="card-body">
                                {% for sub in group.sub_features %}
                                <div>
                                    <input
                                        type="checkbox"
                                        class="feature"
                                        name="sub_features"
                                        value="{{ sub.id }}"
                                        data-role-list="{% for p in sub.privilege_set.all %}{{ p.system_role_id }},{% endfor %}">
                                    {{ sub.feature_name }}
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endfor %}

                    </div>

                </div>

                <div class="modal-footer">
                    <button class="btn btn-success">Save Permissions</button>
                </div>

            </form>

        </div>
    </div>
</div>


<!-- ================= STYLE ================= -->
<style>
.role-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
</style>


<!-- ================= SCRIPT ================= -->
<script>
let currentRoleId = null;

document.querySelectorAll(".assign-btn").forEach(btn => {
    btn.addEventListener("click", function () {

        currentRoleId = this.dataset.roleId;
        document.getElementById("roleId").value = currentRoleId;
        document.getElementById("roleName").innerText = this.dataset.roleName;

        document.querySelectorAll(".feature").forEach(cb => cb.checked = false);

        document.querySelectorAll(".feature").forEach(cb => {
            let roles = cb.dataset.roleList.split(",");
            if (roles.includes(currentRoleId)) {
                cb.checked = true;
            }
        });
    });
});

function selectAll() {
    document.querySelectorAll(".feature").forEach(cb => cb.checked = true);
}

function deselectAll() {
    document.querySelectorAll(".feature").forEach(cb => cb.checked = false);
}

document.getElementById("searchRoles").addEventListener("keyup", function () {
    let value = this.value.toLowerCase();

    document.querySelectorAll("#rolesTable tbody tr").forEach(row => {
        let text = row.innerText.toLowerCase();
        row.style.display = text.includes(value) ? "" : "none";
    });
});

if (typeof feather !== "undefined") {
    feather.replace();
}
</script>

{% endblock %}