{% form_theme form '@ibexadesign/form_field.html.twig' %}
{% set frmname = "frm-"~locationId %}
{% set surveyId = content.id %}
{# TODO: make dynamic #}
<div class="survey-head d-md-none">
    <hr>
    <h2>&nbsp;Umfrage</h2>
</div>
<div class="attribute-image d-none d-md-block">
    {% 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-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") }}">
                        <div class="block float-break">
                            <div class="row">


                        {% if content.fields['answer1'] is defined and not ibexa_field_is_empty( content, 'answer1' ) %}
                            <div class="col text-center">
                                <img class="img-fluid d-block" src="{{ asset('../build/images/magazin032023.png' ) }}" alt="Don Bosco Magazin 03 2023">
                                <label><input id="answer1" name="answer" type="radio" value="1">A</label>
                            </div>
                        {% endif %}
                        {% if content.fields['answer2'] is defined and not ibexa_field_is_empty( content, 'answer2' ) %}
                            <div class="col text-center">
                                <img class="img-fluid d-block" src="{{ asset('../build/images/magazin042023.png' ) }}" alt="Don Bosco Magazin 04 2023">
                                <label><input id="answer2" name="answer" type="radio" value="2">B</label>
                            </div>
                        {% endif %}
                        {% if content.fields['answer3'] is defined and not ibexa_field_is_empty( content, 'answer3' ) %}
                            <div class="col text-center">
                                <img class="img-fluid d-block" src="{{ asset('../build/images/magazin012024.png' ) }}" alt="Don Bosco Magazin 01 2024">
                                <label><input id="answer3" name="answer" type="radio" value="3">C</label>
                            </div>
                        {% endif %}
                        {% if content.fields['answer4'] is defined and not ibexa_field_is_empty( content, 'answer4' ) %}
                            <div class="col text-center">
                                <img class="img-fluid d-block" src="{{ asset('../build/images/magazin022024.png' ) }}" alt="Don Bosco Magazin 02 2024">
                                <label><input id="answer4" name="answer" type="radio" value="4">D</label>
                            </div>
                        {% endif %}
                        {% if content.fields['answer5'] is defined and not ibexa_field_is_empty( content, 'answer5' ) %}
                            <div class="col text-center">
                                <img class="img-fluid d-block" src="{{ asset('../build/images/magazin032024.png' ) }}" alt="Don Bosco Magazin 03 2024">
                                <label><input id="answer5" name="answer" type="radio" value="5">E</label>
                            </div>
                        {% endif %}
                        {% if content.fields['answer6'] is defined and not ibexa_field_is_empty( content, 'answer6' ) %}
                            <div class="col text-center"><label><input
                                            id="answer6"
                                            name="answer" type="radio"
                                            value="6"
                                    >
                                    F
                                </label></div>
                        {% endif %}
                    </div>
                        </div>
                    </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>
                <p>{{ ibexa_field_value(content,"correctanswertext") }}</p>
                {% for key, result in pollResult %}
                    <p>{{ key }}: {{ result|number_format(2, ",") }}%</p>
                {% endfor %}
            </div>
        </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>