{% form_theme form '@ibexadesign/form_field.html.twig' %}
{% set frmname = "frm-"~locationId %}
{% set surveyId = content.id %}
{% if not ibexa_field_is_empty( content, 'is_poll' ) and ibexa_field_value(content, 'is_poll').bool == true %}
    <div class="survey-head">
        <hr />
        <h2>Umfrage</h2>
    </div>
{% else %}
    <div class="survey-head d-md-none">
        <hr />
        <h2>&nbsp;&nbsp;Quiz</h2>
    </div>
{% endif %}
{% if not ez_field_is_empty( content, 'imagexs' ) %}
    <div class="attribute-image d-block d-md-none mt-n3">
        {{ render( controller( "ez_content:viewAction", {'contentId': ez_field_value(content,"imagexs").destinationContentId, 'viewType': 'embed', 'noLayout': true, 'params': {'alias': 'full_width'}} ) ) }}
    </div>
{%  endif %}
<div class="attribute-image d-none d-md-block"{% if content.fields['inlinecssimgdiv'] is defined and not ibexa_field_is_empty( content, 'inlinecssimgdiv' ) %} style="{{ ibexa_field_value(content,"inlinecssimgdiv")}}"{% endif %}>
    {% if not ibexa_field_is_empty( content, 'image' ) %}
    {{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value(content,"image").destinationContentId, 'viewType': 'embed', 'noLayout': true, 'params': {'alias': 'full_width'}} ) ) }}
    {% else %}
        <img src="{{ asset('../build/images/quiz.png' ) }}" alt="Quiz" title="Quiz" class="img-fluid" />
        <div class="attribute-copyright">bb-doll, kirin_photo/iStockphoto.com</div>
    {% endif %}
</div>

<div class="content-view-full">
    <div class="class-survey mt-3 mt-md-n5">
        <div class="attribute-survey">
            <div class="survey-view">
                {{ form_start(form, { 'attr': { 'id': frmname, 'onsubmit': 'return submitSurvey()', 'enctype': '#multipart/form-data', 'action': "#popup-results"} } ) }}
                    <div class="block">
                        <h5{% if not ibexa_field_is_empty( content, 'inlinecssforquestion' ) %} style="{{ ibexa_field_value(content,"inlinecssforquestion")}}"{% endif %}
                                {% if not ibexa_field_is_empty( content, 'cssclassesquestion' ) %} class="{{ ibexa_field_value(content,"cssclassesquestion") }}"{% endif %}>{{ ibexa_field_value(content,"question")|raw }}</h5>
                        <div class="{{ ibexa_field_value(content,"cssclassesanswers") }}">
                            {% if content.fields['answer1'] is defined and not ibexa_field_is_empty( content, 'answer1' ) %}
                            <div class="float-break">
                                <label>
                                    <input id="answer1"
                                           name="answer" type="radio"
                                           value="1"
                                    >
                                    {{ ibexa_field_value(content,"answer1")|raw }}</label>
                            </div>
                            {% endif %}
                            {% if content.fields['answer2'] is defined and not ibexa_field_is_empty( content, 'answer2' ) %}
                            <div class="float-break"><label><input
                                            id="answer2"
                                            name="answer" type="radio"
                                            value="2"
                                    >
                                    {{ ibexa_field_value(content,"answer2")|raw }}
                                    </label></div>
                            {% endif %}
                            {% if content.fields['answer3'] is defined and not ibexa_field_is_empty( content, 'answer3' ) %}
                            <div class="float-break"><label><input
                                            id="answer3"
                                            name="answer" type="radio"
                                            value="3"
                                    >
                                    {{ ibexa_field_value(content,"answer3")|raw }}
                                </label></div>
                            {% endif %}
                            {% if content.fields['answer4'] is defined and not ibexa_field_is_empty( content, 'answer4' ) %}
                            <div class="float-break"><label><input
                                            id="answer4"
                                            name="answer" type="radio"
                                            value="4"
                                    >
                                    {{ ibexa_field_value(content,"answer4")|raw }}
                                </label></div>
                            {% endif %}
                            {% if content.fields['answer5'] is defined and not ibexa_field_is_empty( content, 'answer5' ) %}
                            <div class="float-break"><label><input
                                            id="answer5"
                                            name="answer" type="radio"
                                            value="5"
                                    >
                                    {{ ibexa_field_value(content,"answer5")|raw }}
                                </label></div>
                            {% endif %}
                            {% if content.fields['answer6'] is defined and not ibexa_field_is_empty( content, 'answer6' ) %}
                            <div class="float-break"><label><input
                                            id="answer6"
                                            name="answer" type="radio"
                                            value="6"
                                    >
                                    {{ ibexa_field_value(content,"answer6")|raw }}
                                </label></div>
                            {% endif %}
                        </div>

                        <div class="break"></div>
                    </div>

                    <div class="block">
                        <button class="button mt-1 mt-lg-2 mb-2 ml-2" type="submit" onclick="return submitSurvey()">
                            Absenden
                        </button>
                    </div>

                <div class="d-none">
                    {{ form_row(form.children['myresult'])}}
                    {{ form_rest(form)}}
                </div>

                {{ form_end(form, {'render_rest': false}) }}

            </div>
        </div>

    </div>
</div>

{% if is_valid is defined and is_valid %}
    <div id="popup-results" class="overlay">
        <div class="popup">
            <a class="close" href="">×</a>
            <div class="block pr-4">

                <h2>{{ ibexa_field_value(content,"question")|striptags  }}</h2>
                {% if not ibexa_field_is_empty( content, 'correctanswertext' ) %}
                    {% if collected_fields['myresult'].value == ibexa_field_value(content,"correctresult") %}
                        <p>{{ ibexa_field_value(content,"correctanswertext") }}</p>
                    {% else %}
                        <p>Leider nicht richtig!</p>
                    {% endif %}
                {% else %}
                    {# individuelle ergebnistexte pro antwortoption #}
                    {% set answertext = 'answertext' ~ collected_fields['myresult'].value %}
                    <p>{{ ibexa_field_value(content, answertext) }}</p>
                {% endif %}
                {% if collected_fields['myresult'].value != ibexa_field_value(content,"correctresult") %}
                    <p>Möchten Sie es noch einmal versuchen? </p>
                    <p><a href="#quiz">Zum Quiz!</a></p>
                {% endif %}
            </div>
            <img src="/images/quizresult-012021.jpg" alt="Fragezeichen">
        </div>
    </div>
{% endif %}

<script>
    function submitSurvey(event){
        var ele = document.getElementsByName('answer');
        for (i = 0; i < ele.length; i++) {
            if (ele[i].checked)
                document.getElementById("{{ form.vars.name}}_myresult_value").value
                    = ele[i].value;
        }
    }
</script>