{% extends "porto-corporate-layout.html.twig" %}

{% block stylesheets %}
    {{ parent() }}
    {# <link rel="stylesheet" href="https://unpkg.com/survey-jquery@1.9.97/defaultV2.min.css" /> #}
    {{ encore_entry_link_tags('surveyjs-style') }}
{% endblock %}

{% block container_class %} container {% endblock %}

{% block signin_form %}{% endblock %}

{% block pagecontent %}

    <div class="row">
        <div class="col-md-12">
            {% for flashMessage in app.session.flashbag.get('error') %}
                <div class="alert alert-danger alert-dismissible" >
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    {{ flashMessage|raw }}
                </div>
            {% endfor %}
            {% for flashMessage in app.session.flashbag.get('notice') %}
                <div class="alert alert-success alert-dismissible" >
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    {{ flashMessage|raw }}
                </div>
            {% endfor %}
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div id="surveyElement"></div>
        </div>
    </div>

{% endblock %}

{% block javascript %}

    {{ parent() }}

    {{ encore_entry_script_tags('surveyjs-init-script') }}

    <script>

        const questionnaireId = "{{questionnaireId|raw}}";
        const json = {{paramQuestionsJson|raw}};



        $(document).ready(function() {

            const survey = surveyjsInit();
            survey.onComplete.add((sender, options) => {
                console.log(JSON.stringify(sender.data, null, 3));
                sauveReponses(questionnaireId, JSON.stringify(sender.data, null, 3), url_exemple_surveyjs_sauve_reponses);
            });

            survey.onAfterRenderQuestionInput.add(function (sender, options) {
            });

            $("#surveyElement").Survey({ model: survey });

        });

    </script>

{% endblock %}