{% extends 'super_admin_templates/base.html' %}
{% block content %}
<!-- Content Wrapper. Contains page content -->

<!-- Start::app-content -->
<div class="main-content app-content">
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
            <h1 class="page-title fw-semibold fs-18 mb-0">Utility Master</h1>
            <div class="ms-md-1 ms-0">
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><a href="{{ url_for('user_managements.manage_users_list') }}">User Permissions</a></li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- Page Header Close -->

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    
                        <center>
                            {% if error %}
                            <h2><b><center style="color:RED">{{ error }}</center></b></h2>
                            {% endif %}
                        </center>

                        <form method="POST" action="{{ url_for('user_configurations.update_user_permission', permissionId=userpermissionDict.id) }}" enctype="multipart/form-data">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <div class="form-group">
                                <label for="permissionName">Permission Name</label>
                                <input type="text" class="form-control" id="permissionName" name="permissionName" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Permission Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/" value="{{ userpermissionDict.name }}" required>
                            </div>

                            <div class="form-group">
                                <label for="servicePermissions">Service Permissions</label>
                            </div>

                            <div class="form-group service-permissions">
                                <ul class="level-1">
                                    {% for grouping in serviceGroupingsList %}
                                    <li>
                                        <div class="toggle-container-wrapper">
                                            <input type="checkbox" name="groupingPermissions[]" value="{{ grouping.id }}" {% if grouping.id in userpermissionDict.groupingsIdsList %} checked {% endif %}>
                                            <div class="toggle-container" onclick="toggleFunction('{{ userpermissionDict.id }}-group-{{ grouping.id }}')">
                                                <label class="toggleLabel">{{ grouping.name }}</label>
                                                <div class="arrow-icon" id="arrow-{{ userpermissionDict.id }}-group-{{ grouping.id }}"><i class="fas fa-chevron-right"></i></div>
                                            </div>
                                        </div>

                                        <ul class="content-dropdown content-{{ userpermissionDict.id }}-group-{{ grouping.id }}">
                                            {% for category in grouping.categoriesList %}
                                            <li>
                                                <div class="toggle-container-wrapper">
                                                    <input type="checkbox" name="categoryPermissions[]" value="{{ category.id }}" {% if category.id in userpermissionDict.categoryIdsList %} checked {% endif %}>
                                                    <div class="toggle-container" onclick="toggleFunction('{{ userpermissionDict.id }}-category-{{ category.id }}')">
                                                        <label class="toggleLabel-1">{{ category.categoryName }}</label>
                                                        <div class="arrow-icon" id="arrow-{{ userpermissionDict.id }}-category-{{ category.id }}"><i class="fas fa-chevron-right"></i></div>
                                                    </div>
                                                </div>

                                                <ul class="content-dropdown content-{{ userpermissionDict.id }}-category-{{ category.id }}">
                                                    {% for service in category.servicesList %}
                                                    <li>
                                                        <div class="toggle-container-wrapper">
                                                            <!-- Add an ID to the service checkbox -->
                                                            <input type="checkbox" name="servicePermissions[]" id="service-checkbox-{{ service.id }}" value="{{ service.id }}" onclick="toggleOperatorsUpdate('{{ service.id }}')" {% if service.id in userpermissionDict.serviceIdsList %} checked {% endif %}>
                                                            <div class="toggle-container" onclick="toggleFunction('{{ userpermissionDict.id }}-service-{{ service.id }}')">
                                                                <label class="toggleLabel-2">{{ service.serviceName }}</label>
                                                                <div class="arrow-icon" id="arrow-{{ userpermissionDict.id }}-service-{{ service.id }}"><i class="fas fa-chevron-right"></i></div>
                                                            </div>
                                                        </div>

                                                        <ul class="content-dropdown content-{{ userpermissionDict.id }}-service-{{ service.id }}">
                                                            {% for operator in service.operatorsList %}
                                                            <li>
                                                                <!-- Add a class to the operator checkboxes -->
                                                                <input type="checkbox" name="operatorPermissions[]" class="operator-checkbox-{{ service.id }}" value="{{ operator.id }}" {% if operator.id in userpermissionDict.operatorIdsList %} checked {% endif %}>
                                                                <label>{{ operator.operatorName }}</label>
                                                            </li>
                                                            {% endfor %}
                                                        </ul>
                                                    </li>
                                                    {% endfor %}
                                                </ul>
                                            </li>
                                            {% endfor %}
                                        </ul>
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>

                            <div class="form-group">
                                <label for="otherPermissions">Other Permissions</label>
                            </div>

                            <div class="form-group">
                                <input type="checkbox" name="Agents" value="True" {% if userpermissionDict.otherServices.get("Agents") %} checked {% endif %}>
                                <label>Agents</label>

                                <input type="checkbox" name="Commissions" value="True" {% if userpermissionDict.otherServices.get("Commissions") %} checked {% endif %}>
                                <label>Commissions</label>

                                <input type="checkbox" name="payin" value="True" {% if userpermissionDict.otherServices.get("payin") %} checked {% endif %}>
                                <label>Payin</label>
                            </div>

                          <div class="modal-footer justify-content-between">
                              <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                              <button type="submit" class="btn btn-primary">Update</button>
                          </div>
                      </form>
                                
                            {% with messages = get_flashed_messages() %}
                                {% if messages %}
                                <ul class="flashes">
                                    {% for message in messages %}
                                    <h2>
                                        <b>
                                            <center style="color:green">{{ message }}</center>
                                        </b>
                                    </h2>
                                    {% endfor %}
                                </ul>
                                {% endif %}
                                {% endwith %}
                </div>
            </div>
        </div>
        <!--End::row-1 -->

    </div>
</div>
<!-- End::app-content -->

<script>
    function toggleOperatorsUpdate(serviceId) {
        // Get the service checkbox by its ID
        var serviceCheckbox = document.getElementById("service-checkbox-" + serviceId);
        
        // Get all associated operator checkboxes by their class
        var operatorCheckboxes = document.querySelectorAll(".operator-checkbox-" + serviceId);
        
        // Set the checked status of all operator checkboxes to match the service checkbox
        operatorCheckboxes.forEach(function(operatorCheckbox) {
            operatorCheckbox.checked = serviceCheckbox.checked;
        });
    }

    function toggleFunction(indexval) {
        var arrow = document.getElementById("update_arrow-" + indexval);
        var content = document.querySelector(".content-" + indexval);

        arrow.classList.toggle("rotate");
        content.classList.toggle("active");
    }
</script>

    <script>
      $(function () {
   var activeTab = $('[href=' + location.hash + ']');
   activeTab && activeTab.tab('show');alert(activeTab);
});
    </script>

    <script>
    function toggleFunction(indexval) {
        var arrow = document.getElementById("arrow-" + indexval);
        var content = document.querySelector(".content-" + indexval);

        arrow.classList.toggle("rotate");
        content.classList.toggle("active");
    }
</script>

    
  <!-- internal code editor -->
  <script>
    // Function to update the output div with the entered HTML and CSS code
    function updateOutput() {
        const codeEditor = document.getElementById('code-editor');
        const outputDiv = document.getElementById('output');

        // Get the code from the textarea
        const code = codeEditor.value;

        // Set the content of the output div to the entered code
        outputDiv.innerHTML = code;
    }

    // Add an event listener to the textarea for input changes
    document.getElementById('code-editor').addEventListener('input', updateOutput);
</script>

{% endblock %}