{% extends 'djf_surveys/admins/master.html' %}
{% load djf_survey_tags static i18n %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'djf_surveys/css/rating.css' %}"/>
{% endblock %}

{% block content %}
    <div class="flex py-1 fixed bottom-10 right-10">
        <button
            class="z-20 block p-4 text-blue-100 transition-all bg-blue-700 border-2 border-white rounded-full active:bg-purple-50 hover:scale-110 focus:outline-none focus:ring"
            data-te-toggle="modal"
            data-te-target="#addQuestion"
            data-te-ripple-init
            data-te-ripple-color="light"
            type="button">
            {% include "djf_surveys/buttons/add_button.html" with size=6 %}
            <span class="items-center float-right"> {% trans 'Question' %} </span>
        </button>
    </div>

    <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
        <div class="max-w-lg mx-auto">
            <div class="flex -space-x-4 hover:space-x-1 py-1 float-right">
                <a href="{% url 'djf_surveys:admin_edit_survey' object.slug %}"
                   class="z-20 block p-4 text-blue-700 transition-all bg-blue-100 border-2 border-white rounded-full active:bg-blue-50 hover:scale-110 focus:outline-none focus:ring"
                   type="button">
                    {% include "djf_surveys/buttons/edit_button.html" %}
                </a>
                <a href="#" class="button-share z-20 block p-4 text-amber-700 transition-all bg-amber-100 border-2 border-white rounded-full active:bg-amber-50 hover:scale-110 focus:outline-none focus:ring"
                    type="button" data-share-link="{% url 'djf_surveys:share_link' object.slug %}">
                    {% include "djf_surveys/buttons/share_button.html" %}
                </a>
                <a class="button-delete z-30 block p-4 text-red-700 transition-all bg-red-100 border-2 border-white rounded-full hover:scale-110 focus:outline-none focus:ring active:bg-red-50"
                   data-te-toggle="modal"
                   data-te-target="#modalDelete"
                   data-mdb-object_name="{{ object.name }}"
                   data-mdb-object_delete_url="{% url 'djf_surveys:admin_delete_survey' object.slug %}">
                    {% include "djf_surveys/buttons/delete_button.html" %}
                </a>
            </div>
            <h1 class="text-2xl font-bold text-center text-blue-500 sm:text-3xl">{{ title_page }}</h1>

            <p class="max-w-md mx-auto mt-4 text-center text-gray-500">
                {{ sub_title_page }}
            </p>

            <form method="post" class="mx-auto mt-12" id="sortable">
                {% csrf_token %}
                {% for field in form %}
                    <div class="ui-state-default" id="{{ field|get_id_field }}">
                        <div class="flex -space-x-4 hover:space-x-1 py-1">
                            <a href="{% url 'djf_surveys:admin_edit_question' field|get_id_field  %}"
                               class="z-20 block p-4 text-blue-700 transition-all bg-blue-100 border-2 border-white rounded-full active:bg-blue-50 hover:scale-110 focus:outline-none focus:ring"
                               type="button">
                                {% include "djf_surveys/buttons/edit_button.html" %}
                            </a>

                            <a class="button-delete z-30 block p-4 text-red-700 transition-all bg-red-100 border-2 border-white rounded-full hover:scale-110 focus:outline-none focus:ring active:bg-red-50"
                               data-te-toggle="modal"
                               data-te-target="#modalDelete"
                               data-mdb-object_name="{{ field.label }}"
                               data-mdb-object_delete_url="{% url 'djf_surveys:admin_delete_question' field|get_id_field %}">
                                {% include "djf_surveys/buttons/delete_button.html" %}
                            </a>

                        </div>

                        <a href="#"
                           class="float-right z-30 block p-2 m-2 text-gray-500 transition-all bg-gray-100 border-2 border-white rounded-full hover:scale-110 focus:outline-none focus:ring active:bg-red-50">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11"/>
                            </svg>
                        </a>
                        <div class="p-8 mb-6 rounded-lg shadow-md border border-gray-200 bg-white">
                            <label for="email" class="text-base font-medium">{{ field.label }}</label>

                            <div class="mt-1">
                                {% if field.field.widget.input_type == 'radio' or field.field.widget.input_type == 'checkbox' %}
                                    {{ field }}
                                {% else %}
                                    {{ field|addclass:'w-full p-4 pr-12 text-sm border-gray-500 rounded-lg shadow-sm' }}
                                {% endif %}
                            </div>
                            <p class="text-xs text-gray-400 mt-2">{{ field.help_text }}</p>
                        </div>
                    </div>

                {% endfor %}
            </form>
        </div>

        {% include 'djf_surveys/components/modal_delete.html' %}
        {% include 'djf_surveys/components/modal_choice_field_type.html' %}
    </div>

{% endblock %}

{% block extra_js %}
    <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#sortable").sortable({
                opacity: 0.7,
                update: function (event, ui) {
                    const order = $(this).sortable('toArray');
                    console.log(order);
                    $.ajax({
                        url: "{% url 'djf_surveys:admin_change_order_question' %}",
                        type: 'POST',
                        headers: {"X-CSRFToken": '{{csrf_token}}'},
                        data: {
                            'order_question': order.toString(),
                        },
                        dataType: 'json',
                        success: function (data) {
                            console.log(data.message);
                        },
                        error: function (data) {
                            alert("{% trans 'An error occured!' %}");
                        }
                    });
                }
            });
        });
    </script>

    {% include 'djf_surveys/components/modal_delete_js.html' %}
    {% include 'djf_surveys/components/share_link_button_js.html' %}
{% endblock %}