{% include "generic/exam_candidate_headers.html" %}
<h3>CID Users</h3>
{% if groups %}
    Users from the following groups are available: {% for group in groups %}<a href='{{group.get_absolute_url}}'>{{group}}</a>, {% endfor %} .
{% else %}
    This exam is not associated with any user groups. <a href="{% url exam.app_name|add:':exam_groups_edit' exam.pk %}">Edit and add a group</a> to enable user management.
{% endif %}
<ol>
    {% for cid in current_cid_users %}

        <li class="current"><a href="{% url 'generic:update_cid' cid.pk %}">{{cid.cid}}</a> [{{cid.passcode}}] {{cid.name}} /
            Email: {{cid.email}} <button class="toggle-btn" data-pk="{{cid.pk}}" data-cid="{{cid.cid}}">Toggle</button>
        </li>

    {% endfor %}
    {% for cid in available_cid_users %}

        <li><a href="{% url 'generic:update_cid' cid.pk %}">{{cid.cid}}</a> [{{cid.passcode}}] {{cid.name}} /
            Email: {{cid.email}} <button class="toggle-btn" data-pk="{{cid.pk}}" data-cid="{{cid.cid}}">Toggle</button>
        </li>

    {% endfor %}
</ol>

{% comment %} Hide the toggle button if there are no users (to add or remove) {% endcomment %}
<p>{% if current_cid_users or available_cid_users %}
    <button class="toggle-all-btn">Toggle all</button>
{% endif %}
    <button class="add-all-btn">Add all</button>
    <button class="remove-all-btn">Remove all</button>

</p>

<script>
    $(document).ready(() => {
        $(".remove-all-btn").click((el) => {
            $(".current .toggle-btn").click();
        });
        $(".add-all-btn").click((el) => {
            $(":not(.current) .toggle-btn").click();
        });
        $(".toggle-all-btn").click((el) => {
            $(".toggle-btn").click();
        });
        $(".toggle-btn").click((el) => {
            let parent = $(el.target).parent()
            $.ajax({
                url: "{% url exam.app_name|add:':exam_json_edit' exam.pk %}",
                data: {
                    csrfmiddlewaretoken: "{{csrf_token}}",
                    edit_cid_user: el.target.dataset.pk,
                    add: !parent.hasClass("current"),
                },
                type: "POST",
                dataType: "json",
            })
                        // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                .done(function (data) {
                    console.log("done", data);

                    if (data.status == "success") {
                        if (data.added) {
                            parent.addClass("current");
                            toastr.info(`User ${el.target.dataset.cid} added to exam`)
                        } else {
                            parent.removeClass("current");
                            toastr.info(`User ${el.target.dataset.cid} removed from exam`)

                        }
                    } else {
                        toastr.error(data.status)
                    }
                })
                .fail(function (data) {
                    console.log("fail", data);
                    toastr.error(data.responseJSON.status)

                })
                .always(function () {
                })

        });

    })
</script>
<style>
    .current {
        color: lightgray;
    }
    .current::before {
        content: "[ADDED TO EXAM] - "
    }

    button {
        padding: 0;
    }
</style>