{% extends "organization/organization_dashboard_base.html" %}
{% load static %}
{% block title %}
    Manage Roles
{% endblock title %}
{% block description %}
    Oversee and manage roles within your domains. Add new managers, view existing ones, and ensure efficient role management for smooth operations.
{% endblock description %}
{% block keywords %}
    Manage Roles, Role Management, Add Managers, View Managers, Domain Management, User Roles
{% endblock keywords %}
{% block og_title %}
    Manage Roles - Efficient Role Management
{% endblock og_title %}
{% block og_description %}
    Oversee roles within your domains efficiently. Add new managers, view and manage existing ones to ensure smooth operations.
{% endblock og_description %}
{% block body %}
    <div class="fixed bottom-2.5 right-3.75">
        <a href="https://github.com/OWASP-BLT/BLT/blob/main/website/templates/organization/organization_manage_roles.html">
            <i class="fab fa-github"></i>
        </a>
        <a href="https://www.figma.com/file/s0xuxeU6O2guoWEfA9OElZ/Design?node-id=3%3A76&t=pqxWpF3hcYxjEDrs-1">
            <i class="fab fa-figma"></i>
        </a>
    </div>
    <div class="bg-[#F3F5F7] h-full flex flex-col items-center">
        <div class="flex items-center md:justify-between w-full md:h-max mt-5 flex-col md:flex-row">
            <p class="text-red-700 font-satoshi font-bold text-[35px] px-8">Manage Roles</p>
        </div>
        {% for domain in domains %}
            <div class="w-[96%] bg-white rounded-lg shadow-xl p-8 mt-10">
                <div class="flex items-center justify-between">
                    <h4 class="text-xl text-gray-900 font-bold">{{ domain.name }}</h4>
                    <div class="w-full md:w-[15%] flex justify-center md:justify-end mr-10">
                        <button type="button"
                                onclick="ToggleDisplayForm({{ domain.id }})"
                                class="flex items-center justify-center md:justify-center px-8 py-4 bg-[#DC4654] rounded-xl hover:bg-red-600 transition-all">
                            <i class="fa-sharp fa-solid fa-plus fa-xl text-white"></i>
                        </button>
                    </div>
                </div>
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 gap-8 mt-8">
                    {% for manager in domain.managers %}
                        <div class="relative flex flex-col items-center justify-center text-gray-800 hover:text-red-600 group">
                            <a href="{% url 'profile' manager.username %}"
                               class="flex flex-col cursor-pointer items-center justify-center"
                               title="View Profile">
                                <img src="{% if manager.userprofile__user_avatar %}{{ MEDIA_URL }}{{ manager.userprofile__user_avatar }}{% else %}https://via.placeholder.com/80?text=No+Avatar{% endif %}"
                                     class="w-20 h-20 object-cover rounded-full"
                                     width="80px"
                                     height="80px"
                                     alt="profile">
                                <p class="text-center font-bold text-md mt-1 group-hover:opacity-100">{{ manager.username }}</p>
                                <p class="text-sm text-gray-500 text-center group-hover:opacity-100">Domain Manager</p>
                            </a>
                            {% if domain.organization_admin == request.user %}
                                <button class="absolute top-0.5 right-0.5 w-8 h-8 rounded-full bg-red-500 text-white opacity-0 group-hover:opacity-100 hover:bg-red-700 transition-all flex items-center justify-center"
                                        data-manager-id="{{ manager.id }}"
                                        data-domain-id="{{ domain.id }}"
                                        onclick="deleteManager(event)">
                                    <span class="text-lg">-</span>
                                </button>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
                <script id="assigned_users{{ domain.id }}" type="application/json">{{ domain.managers|json_script:"" }}</script>
            </div>
        {% endfor %}
    </div>
    <!-- add domain popup overlay -->
    <div id="addManagersFormCont"
         class="fixed inset-0 hidden items-center justify-center bg-black bg-opacity-20">
        <form class="flex flex-col w-[30%] h-[60%] bg-white rounded-lg p-8 z-10"
              action="#"
              method="post">
            {% csrf_token %}
            <div class="w-full">
                <div class="flex w-full justify-between items-center cursor-pointer"
                     onclick="ToggleDisplayForm(0)">
                    <p class="text-[#464255] font-satoshi font-bold text-[25px]">Add Managers</p>
                    <i class="fa-sharp fa-solid fa-xmark fa-xl text-black"></i>
                </div>
                <div class="border-b mt-5">
                    <input type="hidden" name="domain_id" value="">
                    <h2 class="text-base font-semibold leading-7 text-gray-900">Add Domain Managers</h2>
                    <button onclick="add_user_selection()"
                            type="button"
                            class="w-[120px] h-[40px] bg-red-500 text-white font-bold rounded-md mt-2 hover:bg-red-600 transition-all">
                        Add User
                    </button>
                    <div class="mt-5 max-h-[150px] overflow-y-auto"
                         id="user-selection-container">
                        <label for="user" class="block text-sm font-medium leading-6 text-gray-900">Select Domain Manager</label>
                    </div>
                </div>
                <button type="submit"
                        class="w-[120px] h-[40px] bg-red-500 text-white font-bold rounded-md mt-2 hover:bg-red-600 transition-all">
                    Submit
                </button>
            </div>
        </form>
    </div>
{% endblock body %}
{% block js %}
    <script>
    let assignedUsers = [];
    function remove_user_selection(event) {
        let user_container = document.getElementById("user-selection-container");
        let parentDiv = event.target.closest('.user-selection');
        if (parentDiv) {
            user_container.removeChild(parentDiv);
            updateUserSelections();
        }
    }

    function add_user_selection() {
        const user_selection_child_html = document.createElement('div');
        user_selection_child_html.classList.add('mt-2', 'flex', 'flex-row', 'items-center', 'w-full', 'user-selection');
        user_selection_child_html.innerHTML = `
            <select name="user[]" class="w-full block rounded-md border-0 py-1.5 pl-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-red-600 sm:text-sm sm:leading-6" onchange="updateUserSelections()">
                ${getUserOptions([])}
            </select>
            <button type="button" onclick="remove_user_selection(event)">
                <i class="fa-sharp fa-solid fa-trash fa-lg text-[#596780] ml-4 hover:text-black"></i>
            </button>
        `;

        let user_container = document.getElementById("user-selection-container");
        user_container.appendChild(user_selection_child_html);
        updateUserSelections();
    }

    function getUserOptions(excludeList) {
        let optionsHtml = '<option value="" disabled selected>Select a user</option>';
        {% for user in organization_users %}
            if (!assignedUsers.includes('{{ user.username }}') {
                optionsHtml += `<option value="{{ user.username }}">{{ user.username }} ({{ user.email }})</option>`;
            }
        {% endfor %}
        return optionsHtml;
    }

    function updateUserSelections() {
        const selects = document.querySelectorAll('#user-selection-container select');
        const selectedUsers = Array.from(selects).map(select => select.value);

        selects.forEach(select => {
            const currentValue = select.value;
            select.innerHTML = getUserOptions(selectedUsers.filter(user => user !== currentValue));
            select.value = currentValue;  // Preserve the current value after options are updated
        });
    }

    function ToggleDisplayForm(index) {
        const modal = document.getElementById('addManagersFormCont');
        if (index > 0) {
            const domainIdInput = modal.querySelector('input[name="domain_id"]');
            domainIdInput.value = index;
            const scriptElement = document.getElementById('assigned_users' + index);
            if (scriptElement) {
                scriptElement.innerHTML = scriptElement.innerHTML.replace('<script type="application/json">', '');
                const jsonData = scriptElement.textContent || scriptElement.innerText;
                assignedUsers = JSON.parse(jsonData).map(user => user.username);
            } else {
                console.error('Script element with ID "assigned_users" not found.');
            }
        }

        if (index == 0) {
            modal.classList.add('hidden');
            const user_container = document.getElementById("user-selection-container");
            user_container.innerHTML = '';
            assignedUsers = [];
        } else {
            if (modal.classList.contains('hidden')) {
                modal.classList.remove('hidden');
                modal.classList.add('flex', 'items-center', 'justify-center');
            } else {
                modal.classList.add('hidden');
                const user_container = document.getElementById("user-selection-container");
                user_container.innerHTML = '';
                assignedUsers = [];
            }
        }
    }

    function deleteManager(event) {
        event.preventDefault();
        var button = event.currentTarget;
        var managerId = button.getAttribute('data-manager-id');
        var domainId = button.getAttribute('data-domain-id'); // Make sure to pass domain_id in the button

        if (confirm("Are you sure you want to remove this manager?")) {
            fetch(`/organization/delete_manager/${managerId}/${domainId}/`, {
                method: 'DELETE',
                headers: {
                    'X-CSRFToken': getCookie('csrftoken'),
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while trying to delete the manager.');
            });
        }
    }
    
     // Utility function to get CSRF token from cookies
     function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
</script>
{% endblock js %}