{% extends 'generic/base.html' %}

{% load render_table from django_tables2 %}
{% block css %}
{% endblock %}

{% block content %}

    <div id="view-filter-options">
        <h3>Filter CID Users </h3>
        <form action="" method="get">
            {{ filter.form }}
            <input class="btn btn-primary btn-sm mt-1 mb-1" type="submit" />
        </form>
    </div>

    <div>
        <span id="manage-span">
            {% render_table table %}
        </span>
    </div>

    <details>
        <summary>
            <h3>Add/Edit CID users</h3>
        </summary>
        <button id="add-exams-selected-cids">Add selected exams</button>
        <button id="change-exams-selected-cids">Change selected exams</button>
        <button id="clear-exams-selected-cids">Clear selected exams</button>
        <button id="activate-selected-cids">Activate selected</button>
        <button id="deactivate-selected-cids">Deactivate selected</button>
        <button id="delete-selected-cids">Delete selected</button>
        <button id="toggle-internal">Toggle internal</button>
        <p>Select exams below to add user(s) to (or edit existing user(s)).</p>
        <div class="exam-selectors">
            <span>
                Physics Exams<br />
                <select id="physics-exams" multiple="multiple">
                    {% for name, id in physics_exams %}
                        <option value="{{id}}">{{name}}</option>
                    {% endfor %}

                </select>
            </span>
            <span>
                Rapid Exams<br />
                <select id="rapid-exams" multiple="multiple">
                    {% for name, id in rapid_exams %}
                        <option value="{{id}}">{{name}}</option>
                    {% endfor %}

                </select>
            </span>
            <span>
                Sba Exams<br />
                <select id="sbas-exams" multiple="multiple">
                    {% for name, id in sba_exams %}
                        <option value="{{id}}">{{name}}</option>
                    {% endfor %}

                </select>
            </span>
            <span>
                Long Exams<br />
                <select id="longs-exams" multiple="multiple">
                    {% for name, id in longs_exams %}
                        <option value="{{id}}">{{name}}</option>
                    {% endfor %}

                </select>
            </span>
            <span>
                Anatomy Exams<br />
                <select id="anatomy-exams" multiple="multiple">
                    {% for name, id in anatomy_exams %}
                        <option value="{{id}}">{{name}}</option>
                    {% endfor %}

                </select>
            </span>
            <span>
                CaseCollection Exams<br />
                <select id="casecollection-exams" multiple="multiple">
                    {% for name, id in casecollection_exams %}
                        <option value="{{id}}">{{name}}</option>
                    {% endfor %}

                </select>
            </span>


        </div>
        <div>
            Groups<br />
            <select id="cid-groups">
                <option value="">----</option>
                {% for name, id in cid_user_groups %}
                    <option value="{{id}}">{{name}}</option>
                {% endfor %}

            </select>
            <button id="add-group">Add Group to users</button>
        </div>
        <button id="add-new-cids">Add New (Blank) Users</button>
        <input type="number" id="add-number" value="number to add"><br />
        <button id="add-new-emails">Add New Users From Email</button>
        <textarea id="emails-input" name="emails" rows="4" cols="50">Enter emails here</textarea>
    </details>

{% endblock %}

{% block js %}


    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.11.3/r-2.2.9/datatables.min.css"/>

    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.11.3/r-2.2.9/datatables.min.js"></script>

    <script>
        jQuery.fn.dataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml ) {
            var esc = function ( t ) {
                return t
                    .replace( /&/g, '&amp;' )
                    .replace( /</g, '&lt;' )
                    .replace( />/g, '&gt;' )
                    .replace( /"/g, '&quot;' );
            };

            return function ( d, type, row ) {
                // Order, search and type get the original data
                if ( type !== 'display' ) {
                    return d;
                }

                if ( typeof d !== 'number' && typeof d !== 'string' ) {
                    return d;
                }

                d = d.toString(); // cast numbers

                if ( d.length <= cutoff ) {
                    return d;
                }

                var shortened = d.substr(0, cutoff-1);

                // Find the last white space character in the string
                if ( wordbreak ) {
                    shortened = shortened.replace(/\s([^\s]*)$/, '');
                }

                // Protect against uncontrolled HTML input
                if ( escapeHtml ) {
                    shortened = esc( shortened );
                }

                return '<span class="ellipsis" title="'+esc(d)+'">'+shortened+'&#8230;</span>';
            };
        };

        function postAjax(data) {

            $.ajax({
                url: "{% url 'generic:manage_cid_users' %}",
                data: data,
                type: "POST",
                dataType: "json",
            })
            // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                .done(function (data) {
                console.log(data);

                if (data.status == "success") {
                    toastr.info('Added/Updated');
                    location.reload();
                }
                // show some message according to the response.
                // For eg. A message box showing that the status has been changed
            })
                .always(function () {
                console.log('[Done]');
            })

        }

        function getGenericData() {
            selected_cids = []
            $("#manage-span tbody input:checked").each((n, el) => {
                selected_cids.push(parseInt(el.value));
            })
            return {
                csrfmiddlewaretoken: "{{ csrf_token }}",
                physics_exams: JSON.stringify($("#physics-exams").val()),
                rapid_exams: JSON.stringify($("#rapid-exams").val()),
                sba_exams: JSON.stringify($("#sbas-exams").val()),
                longs_exams: JSON.stringify($("#longs-exams").val()),
                anatomy_exams: JSON.stringify($("#anatomy-exams").val()),
                casecollection_exams: JSON.stringify($("#casecollection-exams").val()),
                cid_groups: JSON.stringify($("#cid-groups").val()),
                delete: false,
                emails: JSON.stringify(false),
                number_to_create: 0,
                activate: false,
                deactivate: false,
                add_exams: false,
                clear_exams: false,
                toggle_internal: false,
                selected_cids: JSON.stringify(selected_cids),
            }
        }

        $(document).ready(function () {

            {% if exams %}
                $("table").DataTable({
                    columnDefs: [ {
                        targets: [6,7,8,9,10],
                        render: $.fn.dataTable.render.ellipsis( 17, true )
                    } ],
                    "paging": false,
                });
            {% else %}
                $("table").DataTable({
                    "paging": false,
                });
            {% endif %}

            $("#toggle-internal").click((evt) => {
                data = getGenericData();
                data["toggle_internal"] = true;
                postAjax(data);
            });
            $("#add-new-emails").click((evt) => {
                data = getGenericData();
                data["emails"] = JSON.stringify($("#emails-input").val());
                postAjax(data);
            });
            $("#add-group").click((evt) => {
                data = getGenericData();
                data["add_group"] = true;
                postAjax(data);
            });
            $("#add-exams-selected-cids").click((evt) => {
                data = getGenericData();
                data["add_exams"] = true;
                postAjax(data);
            });
            $("#change-exams-selected-cids").click((evt) => {
                data = getGenericData();
                data["change_exams"] = true;
                postAjax(data);
            });
            $("#clear-exams-selected-cids").click((evt) => {
                data = getGenericData();
                data["clear_exams"] = true;
                postAjax(data);
            });
            $("#activate-selected-cids").click((evt) => {
                data = getGenericData();
                data["activate"] = true;
                postAjax(data);
            });
            $("#deactivate-selected-cids").click((evt) => {
                data = getGenericData();
                data["deactivate"] = true;
                postAjax(data);
            });
            $("#delete-selected-cids").click((evt) => {
                data = getGenericData();
                data["delete"] = true;
                postAjax(data);
            });

            $("#add-new-cids").click((evt) => {

                n = $("#add-number").get(0).value;

                if (n < 1) {
                    toastr.info("You need to enter how many users to add.");
                    return
                }

                data = getGenericData();
                data["number_to_create"] = n;

                postAjax(data);


            });
        });
    </script>
    <style>
        .exam-selectors {
            display: flex;
        }

        .exam-selectors select {
            height: 200px;
        }
    </style>


{% endblock %}