{% extends 'staff_questionnaire_base.html' %}

{% load static %}

{% block content %}
    {{ block.super }}
    <div class="row mb-3 align-items-center">
        <div class="col">
            <a href="{% url 'staff:questionnaire_create' %}" class="btn btn-sm btn-dark">{% translate 'Create new questionnaire' %}</a>
        </div>
        <div class="col-auto">
            <div class="btn-switch btn-switch-light">
                <div class="btn-switch-label">{% translate 'Show questionnaires' %}</div>
                <div class="btn-switch btn-group">
                    <a href="{% url 'staff:questionnaire_index' %}?filter_questionnaires=all" role="button" class="btn btn-sm btn-light{% if filter_questionnaires == 'all' %} active{% endif %}">
                        {% translate 'All' %}
                    </a>
                    <a href="{% url 'staff:questionnaire_index' %}?filter_questionnaires=visible" role="button" class="btn btn-sm btn-light{% if filter_questionnaires == 'visible' %} active{% endif %}">
                        {% translate 'Visible' %}
                    </a>
                    <a href="{% url 'staff:questionnaire_index' %}?filter_questionnaires=archived" role="button" class="btn btn-sm btn-light{% if filter_questionnaires == 'archived' %} active{% endif %}">
                        {% translate 'Archived' %}
                    </a>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="input-group">
                <input type="search" name="search" class="form-control" placeholder="{% translate 'Search...' %}" />
                <button class="btn btn-light text-secondary" type="button" data-reset="search" data-bs-toggle="tooltip" data-bs-placement="top" title="{% translate 'Clear filter' %}">
                    <span class="fas fa-delete-left"></span>
                </button>
            </div>
        </div>
    </div>

    <form id="questionnaire-deletion-form" method="POST" action="{% url 'staff:questionnaire_delete' %}">
        {% csrf_token %}
    </form>

    <script type="module">
        import { assert, fadeOutThenRemove } from "{% static 'js/utils.js' %}";

        const form = document.getElementById("questionnaire-deletion-form");
        form.addEventListener("submit", event => {
            event.preventDefault();
            const body = new FormData(form);
            const request = fetch(
                form.action,
                { method: form.method, body },
            );
            request.then(response => {
                assert(response.ok);
                fadeOutThenRemove(document.querySelector(`#questionnaire-row-${body.get("questionnaire_id")}`));
            }).catch(error => {
                window.alert("{% translate 'The server is not responding.' %}");
            });
        });
    </script>

    <div class="card">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" >
                <li class="nav-item">
                    <a class="nav-link" id="topTab" href="#" data-bs-target="#topTabContent" data-bs-toggle="tab" role="tab">
                        {% translate 'Top general questionnaires' %}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="contributorTab" href="#" data-bs-target="#contributorTabContent" data-bs-toggle="tab" role="tab">
                        {% translate 'Contributor questionnaires' %}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="bottomTab" href="#" data-bs-target="#bottomTabContent" data-bs-toggle="tab" role="tab">
                        {% translate 'Bottom general questionnaires' %}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="dropoutTab" href="#" data-bs-target="#dropoutTabContent" data-bs-toggle="tab" role="tab">
                        {% translate 'Dropout questionnaires' %}
                    </a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="tab-pane show" id="topTabContent" role="tabpanel">
                {% include 'staff_questionnaire_index_list.html' with questionnaires=general_questionnaires_top type='top' %}
            </div>
            <div class="tab-pane" id="contributorTabContent" role="tabpanel">
                {% include 'staff_questionnaire_index_list.html' with questionnaires=contributor_questionnaires type='contributor' %}
            </div>
            <div class="tab-pane" id="bottomTabContent" role="tabpanel">
                {% include 'staff_questionnaire_index_list.html' with questionnaires=general_questionnaires_bottom type='bottom' %}
            </div>
            <div class="tab-pane" id="dropoutTabContent" role="tabpanel">
                {% include 'staff_questionnaire_index_list.html' with questionnaires=dropout_questionnaires type='dropout' %}
            </div>
        </div>
    </div>
{% endblock %}

{% block additional_javascript %}
    <script type="module">
        import {QuestionnaireGrid} from "{% static 'js/datagrid.js' %}";
        document.querySelectorAll(".questionnaire-table").forEach(table => {
            new QuestionnaireGrid({
                storageKey: "questionnaires-data-grid",
                updateUrl: "{% url 'staff:questionnaire_update_indices' %}",
                table,
                searchInput: document.querySelector("input[name=search]"),
                resetSearch: document.querySelector("[data-reset=search]"),
            }).init();
        });
    </script>

    <script type="module">
        import { CSRF_HEADERS } from "{% static 'js/csrf-utils.js' %}";
        import { assert } from "{% static 'js/utils.js' %}";

        function changeVisibility(element) {
            const questionnaire = element.closest(".questionnaire");
            const visibility = element.dataset.visibility;

            fetch("{% url 'staff:questionnaire_visibility' %}", {
                body: new URLSearchParams({questionnaire_id: questionnaire.dataset.id, visibility}),
                headers: CSRF_HEADERS,
                method: "POST",
            }).then(response => {
                assert(response.ok);
                questionnaire.querySelectorAll(`button[data-visibility]`).forEach(button => {button.classList.remove("active");});
                questionnaire.querySelectorAll(`button[data-visibility="${visibility}"]`).forEach(button => {button.classList.add("active");});
            }).catch(error => {window.alert("{% translate 'The server is not responding.' %}");});
        }
        for (const button of document.querySelectorAll(".change-visibility-button")) {
            button.addEventListener("click", () => changeVisibility(button));
        }

        function changeLocked(element) {
            const questionnaire = element.closest(".questionnaire");
            const is_locked = element.dataset.isLocked;

            fetch("{% url 'staff:questionnaire_set_locked' %}", {
                body: new URLSearchParams({questionnaire_id: questionnaire.dataset.id, is_locked}),
                headers: CSRF_HEADERS,
                method: "POST",
            }).then(response => {
                assert(response.ok);
                questionnaire.querySelectorAll(`button[data-is-locked]`).forEach(button => {button.classList.remove("active");});
                questionnaire.querySelectorAll(`button[data-is-locked="${is_locked}"]`).forEach(button => {button.classList.add("active");});
            }).catch(error => {window.alert("{% translate 'The server is not responding.' %}");});
        }
        for (const button of document.querySelectorAll(".change-is-locked-button")) {
            button.addEventListener("click", () => changeLocked(button));
        }
    </script>

    <script type="module">
        const tabIds = ["topTab", "contributorTab", "bottomTab", "dropoutTab"];
        const tabName = localStorage.getItem('staff_questionnaure_index_tab') || tabIds[0];

        if (tabIds.includes(tabName)) {
            const tab = document.getElementById(tabName);
            const tabTrigger = new bootstrap.Tab(tab);
            tabTrigger.show();
        }

        function saveSelectedTab(tab) {
            localStorage['staff_questionnaure_index_tab'] = tab;
        }

        for (const id of tabIds) {
            document.getElementById(id).addEventListener("click", () => saveSelectedTab(id))
        }
    </script>
{% endblock %}