{% extends 'beltradar/base.html' %}
{% load i18n %}
{% load humanize %}

{% block page_template_title %}
    {{ title }}
{% endblock page_template_title %}

{% block page_topic %}
    <h1 class="page-header text-center">
        {{ title }}
    </h1>
{% endblock page_topic %}

{% block aabeltradar_header %}
    <div class="card">
        <div class="card-header bg-primary rounded d-flex align-items-center">
            <h3>{% translate "View Session" %}</h3>
            <div class="px-2">
                {{ delete_button|safe }}
                <a href="{% url 'beltradar:add_entry' public_id=session.public_id %}">
                    <span class="btn btn-success">{% translate 'Add Survey' %}</span>
                </a>
            </div>
        </div>
    </div>
{% endblock aabeltradar_header %}

{% block aabeltradar_block %}
    {% include 'beltradar/partials/view-session/session.html' %}
    {% include 'beltradar/partials/view-session/survey-table.html' %}
    {% include 'beltradar/partials/view-session/charts.html' %}
{% endblock aabeltradar_block %}


{% block extra_css %}
    {% include 'bundles/datatables-2-css-bs5.html' %}
    {% include 'bundles/datatables-2-columncontrol-css-bs5.html' %}
    {% include 'beltradar/bundles/aa-beltradar-css.html' %}
{% endblock %}

{% block extra_javascript %}
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        /**
         * Override settings for Belt Radar
         */
        const aaBeltRadarSettingsOverride = {
            url: {
                surveySessionEntry: "{% url 'beltradar:api:get_survey_entry' public_id=session.public_id %}",
            },
        };
    </script>
    {% include 'beltradar/bundles/aa-beltradar-js.html' %}
    {% include 'bundles/datatables-2-js-bs5.html' %}
    {% include 'bundles/datatables-2-columncontrol-js-bs5.html' %}
    {% include "bundles/moment-js.html" with locale=True %}
        <!-- load modals -->
    {% include 'beltradar/partials/modals/request-accept-delete-survey-session.html' %}
    {% include 'beltradar/partials/modals/request-accept-delete-snapshot.html' %}
    <script>
        $(document).ready(function() {
            const modalRequestDeleteSurvey = $('#beltradar-accept-delete-survey-session');

            _bootstrapTooltip();

            /**
            * View :: Survey Sessions :: Delete Button Click Handler
            * Open Delete Survey Session Modal
            * On Confirmation send a request to the API Endpoint, reload the Survey Sessions DataTable, close the modal
            * and reopen the previous Survey Sessions Modal
            */
            modalRequestDeleteSurvey.on('show.bs.modal', (event) => {
                const button = $(event.relatedTarget);
                const url = button.data('action');
                const form = modalRequestDeleteSurvey.find('form');
                const csrfMiddlewareToken = form.find('input[name="csrfmiddlewaretoken"]').val();

                modalRequestDeleteSurvey.find('#modal-button-confirm-accept-request').on('click', () => {
                    fetchPost({
                        url: url,
                        csrfToken: csrfMiddlewareToken,
                        payload: {}
                    })
                    .then((data) => {
                        if (data.success === true) {
                            modalRequestDeleteSurvey.modal('hide');
                            window.location.href = "{% url 'beltradar:index' %}";
                        }
                    })
                    .catch((error) => {
                        console.error(`Error posting delete request: ${error.message}`);
                    });
                });
            })
            .on('hide.bs.modal', () => {
                modalRequestDeleteSurvey.find('#modal-button-confirm-accept-request').unbind('click');
            });
        });
    </script>
{% endblock extra_javascript %}