{% extends 'base.html.twig' %}

{% block body %}

    <div class="main-content">
        <div class="clearfix">

            {% set totalOperations = operations|length * roles|length +1 %}


            <table class="table table-bordered">
                <tbody><tr>
                        <td></td>
                        {% for role in roles%}
                            <td colspan="{{operations|length}}"><strong>{{role.roleName}}</strong></td>
                                {%endfor%}
                        
                    </tr>
                    <tr>
                        <td></td>
                        {% for role in roles%}
                            {% for operation in operations %}
                                <td class="center">{{operation}}</td>
                            {%endfor%}
                        {%endfor%}
                        
                    </tr>
                    {% for module in modules%}
                        <tr>
                            <td colspan="18"><strong>{{module.moduleName}}</strong></td>
                        </tr>
                        {% for subModule in subModules %}
                            <tr>
                                <td>{{subModule}}</td>
                                {% for role in roles%}
                                    {% for operation in operations %}
                                        <td><div class="onoffswitch">
                                                {% set checked = '' %}
                                                {% if dataList[module.id][subModule][role.id][operation] is defined %}
                                                    {# {{dump(dataList[module.id][subModule][group.id][operation])}} #}

                                                    {% if dataList[module.id][subModule][role.id][operation]==1 %}
                                                        {% set checked = 'checked' %}
                                                    {%endif%}
                                                {%endif%}
                                                <input {{checked}} onclick="savePermissions('{{module.id}}', '{{subModule}}', '{{role.id}}', this);" type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="operation{{module.id}}_{{subModule}}_{{role.id}}_{{operation}}" value="{{operation}}">
                                                <label class="onoffswitch-label" for="operation{{module.id}}_{{subModule}}_{{role.id}}_{{operation}}">
                                                    <span class="onoffswitch-inner"></span>
                                                    <span class="onoffswitch-switch"></span>
                                                </label>
                                            </div>
                                        </td>
                                    {%endfor%}
                                {%endfor%}
                                
                            </tr>
                        {%endfor%}
                    {%endfor%}
                </tbody></table>
        </div>
    </div>
    <script>

        $(document).ready(function () {
            $("#menu-toggle").click(function (e) {
                e.preventDefault();
                $("#wrapper").toggleClass("toggled");
            });

            $('.dropdown.keep-open').on({
                "shown.bs.dropdown": function () {
                    this.closable = false;
                },
                "click": function () {
                    this.closable = true;
                },
                "hide.bs.dropdown": function () {
                    return this.closable;
                }
            });

            $('.dropdown-submenu a.test').on("click", function (e) {
                $(this).parent('.dropdown-submenu').siblings().find('a.test').removeClass('active');
                $(this).parent('.dropdown-submenu').siblings().find('ul').hide();
                $(this).next('ul').toggle();
                $(this).toggleClass('active');
                e.stopPropagation();
                e.preventDefault();
            });

        });
    </script>
    <style type="text/css">
        .center { text-align: center;}

        .onoffswitch {
            position: relative; width: 26px;
            -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
        }
        .onoffswitch-checkbox {
            display: none;
        }
        .onoffswitch-label {
            display: block; overflow: hidden; cursor: pointer; border-radius: 20px;
        }
        .onoffswitch-inner {
            display: block; width: 200%; margin-left: -100%;
            transition: margin 0.3s ease-in 0s;
        }
        .onoffswitch-inner:before, .onoffswitch-inner:after {
            display: block; float: left; width: 50%; height: 26px; padding: 0; line-height: 26px;
            font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: 500;
            box-sizing: border-box;
        }
        .onoffswitch-inner:before {
            content: "Y";
            padding-left: 9px;
            background-color: #65a856; color: #FFFFFF;
        }
        .onoffswitch-inner:after {
            content: "N";
            padding-right: 9px;
            background-color: #EEEEEE; color: #999999;
            text-align: right;
        }
        .onoffswitch-switch {
            display: block; width: 14px; height: 14px; margin: 8px 6px 0 0;
            background: #FFFFFF;
            position: absolute; top: 0; bottom: 0;
            right: 32px; border-radius: 20px;
            transition: all 0.3s ease-in 0s; display: none;
        }
        .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
            margin-left: 0;
        }
        .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
            right: 0px; 
        }
    </style>



{% endblock %}