{% extends "security-users-container.html" %}

{% block head %}
    {{ block.super }}
    <script type="text/javascript">
        $(function() {
            $("#tab-user-manage-permissions").attr("class", "active");
            $(document).ready ( function(){
                // let timer;
                for (th of document.getElementsByTagName("th")) { th.style.textAlign = "center"};
                $('tr.inactive input[type="checkbox"]').prop('disabled', true);
                $('.inactive > td > label[for^="checkbox"]').addClass('inactive-label');

                $('.checkbox').change(function(){
                    if ($(this).hasClass('diff')){
                        $(this).removeClass('diff');
                    } else{
                        $(this).addClass('diff');
                    }
                });

                // 2 is removed since "TAG" field and "treat as RPH" will always be last fields
                const variable_td_length = $('#dosis-report-header').children().length - 2;
                const role_description_length = Math.ceil(variable_td_length / 2);
                const displayed_name_length = variable_td_length - role_description_length;

                $('th[id^="role_description"]').each(function() {
                    $(this).attr('colspan', role_description_length);
                });

                $('th[id^="role_display_name"]').each(function() {
                    $(this).attr('colspan', displayed_name_length);
                });

                $('tr[id^="sub_header_"]:not(#sub_header_title)').each(function() {
                    $(this).hide();
                });

                $('#sub_header_title').children().not('#th_sub_header_enforced, .sub_header_toggle_permissions').hide();

                // for some reason <th> elements get forced to text-align: center, so this is needed to overwrite that
                $('th[id^="th_sub_header_"]:not(#th_sub_header_enforced)').each(function() {
                    $(this).css({'text-align': 'right', 'padding-right': '20px'});
                });

                $(window).on('beforeunload', function() {
                    if ($('.diff').length > 0) {
                        return 'You have unsaved changes. Are you sure you want to leave?';
                    }
                });
                let timer;

                // saves input box after half a second of inactivity automatically
                $('input[id^="id_form"][type="text"]').on('input', function() {
                    const input = $(this)
                    if (timer) {
                        clearTimeout(timer);
                    }

                    timer = setTimeout(function() {
                        $.ajax({
                            url: "{% url 'site:manage-update-user-role' %}",
                            type: 'POST',
                            data: {
                                role_tag: input.parent().attr("id").split("__").pop(),
                                field: input.data('field-type'),
                                value: input.val(),
                                csrfmiddlewaretoken: '{{ csrf_token }}'
                            },
                            success: function (data) {
                                const $childElements = $('#' + input.parent().attr("id").split("__").pop()).contents().filter(function() {
                                    return this.nodeType === 3; // Filter out non-text nodes
                                });
                                $childElements.eq(0).replaceWith(data.display_name + '&nbsp;&nbsp;&nbsp;');
                            }
                        });
                    }, 500);
                });

                // handles when an input box is clicked off of, automatically save
                $('input[id^="id_form"][type="text"]').on('blur', function() {
                    const input = $(this)
                    $.ajax({
                        url: "{% url 'site:manage-update-user-role' %}",
                        type: 'POST',
                        data: {
                            role_tag: $(this).parent().attr("id").split("__").pop(),
                            field: $(this).data('field-type'),
                            value: $(this).val(),
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                        },
                        success: function (data) {
                            const $childElements = $('#' + input.parent().attr("id").split("__").pop()).contents().filter(function() {
                                return this.nodeType === 3; // Filter out non-text nodes
                            });
                            $childElements.eq(0).replaceWith(data.display_name + '&nbsp;&nbsp;&nbsp;');
                        }
                    });
                });

                // save "treat as RPH" button automatically
                $("[id^='id_form'][type='checkbox']").click( function() {
                    const input = $(this)
                    $.ajax({
                        url: "{% url 'site:manage-update-user-role' %}",
                        type: 'POST',
                        data: {
                            role_tag: $(this).parent().attr("id").split("__").pop(),
                            field: 'treat_as_rph',
                            value: $(this).prop('checked'),
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                        },
                        success: function (data) {
                            const $childElements = $('#' + input.parent().attr("id").split("__").pop()).contents().filter(function() {
                                return this.nodeType === 3; // Filter out non-text nodes
                            });
                            $childElements.eq(0).replaceWith(data.display_name + '&nbsp;&nbsp;&nbsp;');
                        }
                    });
                });


            });
        });

        function enable_all(id) {
            let checkboxes = $('[id^="checkbox_' + id + '"]:not(:has(+ .inactive-label)):not(:checked)');
            checkboxes.prop('checked', true).trigger('change');
            // disable enabled items upon second click
            if (checkboxes.length === 0) {
                $('[id^="checkbox_' + id + '"].diff').prop('checked', false).trigger('change');
            }
        }

        function disable_all(id) {
            let checkboxes = $('[id^="checkbox_' + id + '"]:not(:has(+ .inactive-label)):checked');
            checkboxes.prop('checked', false).trigger('change');
            if (checkboxes.length === 0) {
                $('[id^="checkbox_' + id + '"].diff').prop('checked', true).trigger('change');
            }
        }

        function toggle_active(td) {
            if ($(td).parent().hasClass('inactive')){
                $(td).parent().removeClass('inactive');
                if ($(td).parent().data('active') === 'inactive'){
                    $(td).addClass('diff');
                } else {
                    $(td).removeClass('diff');
                }
                $(td).siblings().find('label').removeClass('inactive-label');
            } else {
                $(td).parent().addClass('inactive');
                if ($(td).parent().data('active') === 'inactive'){
                    $(td).removeClass('diff');
                } else {
                    $(td).addClass('diff');
                }
                $(td).siblings().find('label').addClass('inactive-label');
                $(td).siblings().find(':checkbox.diff').each(function(){
                    this.checked = !this.checked;
                });
                $(td).siblings().find('input').removeClass('diff');
            }
            $('tr input[type="checkbox"]').prop('disabled', false);
            $('tr.inactive input[type="checkbox"]').prop('disabled', true);
        }

        function show_sub_header(th){
            const th_id = $(th).attr('id');
            const tr_id = 'sub_header_' + th_id;
            //handles clicking the already selected class
            if ($('#' + tr_id).is(':visible')){
                $('#' + tr_id).hide();
                $(th).css({'background-color': '#0096c3'})
                $(th).addClass('main_header')
                $(th).children().show();
                $('#sub_header_title').children().not('#th_sub_header_enforced').hide();
                $('.sub_header_toggle_permissions').show()
            } else {
                // hides all elements so that multiple won't be shown at once
                $('tr[id^="sub_header_"]:not(#sub_header_title)').each(function() {
                    $(this).hide();
                });
                $('#sub_header_title').children().not('#th_sub_header_enforced').show();
                $('.sub_header_toggle_permissions').hide()
                $(th).css({'background-color': '#0096c3'})
                $(th).siblings().css({'background-color': '#0096c3'})
                $(th).siblings().not('#permissions').addClass('main_header')
                $(th).siblings().children().show();
                //reveals clicked elements
                $('#' + tr_id).show();
                $(th).css({'background-color': 'darkblue'});
                $(th).removeClass('main_header');
                $(th).children().hide();
            }
        }

        function save_permissions(){
            let selectedElements = [];

            $(".diff").each(function() {
                if ($(this).attr("id")) {
                    selectedElements.push($(this).attr("id"));
                } else if ($(this).parent().attr("id")) {
                    selectedElements.push($(this).parent().attr("id"));
                }
            });
            if (selectedElements.length > 0){
                $.ajax({
                    url: "{% url 'site:manage-update-user-permissions' %}",
                    type: 'POST',
                    data: {
                        permission_changes: selectedElements,
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function (data) {
                        $('.diff').removeClass('diff');
                        location.reload();
                    }
                });
            }
        }
    </script>
    <style>
        .checkbox {
            display: none; /* Hide the actual radio button */
        }

        .inactive-label[for^="checkbox"] {
            /*background-color: #834345;*/
            background-color: #666666;
        }


        .checkbox:checked + label[for^="checkbox"] {
            background-color: #44ba85;
            color: black;
        }

        .checkbox:checked + .inactive-label[for^="checkbox"] {
            background-color: #52816c;
        }

        label[for^="checkbox"] {
            padding: 10px 20px;
            /*background-color: #c02025;*/
            background-color: grey;
            color: white;
            cursor: pointer;
            text-align: center;
            border: 4px solid transparent;
        }

        .inactive {
            color: #5B5B5B;
            background-color: #b1b3b5;
        }

        td {
            align-items: center;
            padding-right: 0.25%;
            padding-left: 0.25%;
        }

        table {
            width: 100%;
        }

        .diff + label[for^="checkbox"] {
            border: 4px solid black;
        }

        .dosis-report-header th{
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .sub_header_row {
            background-color: darkblue;
            color: white;
        }

        .main_header:hover {
            background-color: #66c0db !important;
            cursor: pointer;
        }

        .save_btn {
            position: fixed;
            z-index: 1050;
            border-radius: 128px;
            height: 64px;
            width: 64px;
            bottom: 0.5%;
            right: 0.5%;
            border: 2px solid #32648E;
        }

        label {
            margin-bottom: 0px;
        }

        .normal_row {
            box-sizing: border-box;
            border: 4px solid transparent;
        }

        .permission:hover {
            background-color: #b1b3b5;
            cursor: pointer;
        }

        td.diff {
            border: 4px solid black;
        }

        .enable {
            display: inline-block;
            background-color: #44ba85;
            color: #333;
        }

        .enable:hover {
            cursor: pointer;
        }

        .disable {
            display: inline-block;
            background-color: grey;
        }

        .disable:hover {
            cursor: pointer;
        }
    </style>
{% endblock %}

{% block sub-content %}
<table id="manage-user-permissions">
    <thead style="position: sticky; top: 0;">
        <tr  id="dosis-report-header" class="dosis-report-header">
            <th id="permissions">Permissions:</th>
            {% for head in report_header %}
                <th class="main_header" id="{{head.db_column}}" onclick="show_sub_header(this)">{{head.display}}&nbsp;&nbsp;&nbsp;<i class="icon-fixed-width icon-pencil"></i></th>
            {% endfor %}
        </tr>
        <tr id="sub_header_title" class="sub_header_row">
            <th class="sub_header dosis-report-header" id="th_sub_header_enforced"><span style="white-space: nowrap"><p style="display: inline-block; background-color: white; color: #333;"> Enforced </p>&nbsp;&nbsp;&nbsp;<p class="inactive" style="display: inline-block;"> Unenforced </p></span></th>
            <th id="role_description_header" class="sub_header">Role Description</th>
            <th id="role_display_name_header" class="sub_header">Displayed Name</th>
            <th class="sub_header">Treat as RPH</th>
            {% for head in report_header %}
                <th class="sub_header_toggle_permissions" style="background-color: #0096c3;"> <p class="enable" onclick="enable_all('{{head.db_column}}')">&nbsp;Enable&nbsp;</p><p onclick="disable_all('{{head.db_column}}')" class="disable">&nbsp;Disable&nbsp;</p></th>
            {% endfor %}
        </tr>
        {% for role in roles %}
            <tr id="sub_header_{{ role.instance.tag }}" class="sub_header_row">
                <th class="sub_header2 dosis-report-header" id="th_sub_header_{{ role.instance.tag }}">{{ role.id }}{{ role.instance.tag }}:</th>
                <th id="role_description__{{ role.instance.tag }}">{{ role.description }}</th>
                <th id="role_display_name__{{ role.instance.tag }}" class="sub_header2">{{ role.display_name }}</th>
                <th id="role_treat_as_rph__{{ role.instance.tag }}" class="sub_header2">{{ role.treat_as_rph }}</th>
            </tr>
        {% endfor %}
    </thead>
    <tbody>
        {% for permission in permissions %}
            {% if not permission.0 %}
                <tr class="inactive normal_row" data-active="inactive" id="{{permission.1}}">
            {% else %}
                <tr class="normal_row" data-active="active" id="{{permission.1}}">
            {% endif %}
                {% for td in permission.2 %}
                    {% if '<input' not in td %}
                        <td onclick="toggle_active(this)" class="permission">{{td}}</td>
                    {% else %}
                        <td>{{td|safe}}</td>
                    {% endif %}
                {% endfor %}
            </tr>
        {% endfor %}
    </tbody>
</table>
<button class="btn btn-primary save_btn" onclick="save_permissions()">Save</button>

{% include 'bottomnav.html' %}
{% endblock %}