{% include '@Survey/frontend/_survey_assets.html.twig' %}
{% include '@Survey/frontend/_survey_branding.html.twig' %}

{% set moduleHeadline = (headline is iterable ? headline.text|default('') : headline|default(''))|striptags|trim %}

<section class="survey-shell survey-grid">
    {% if moduleHeadline %}
        <header>
            <h2>{{ moduleHeadline }}</h2>
        </header>
    {% endif %}

    {% if loginRequired %}
        <div class="survey-alert warning">Dieses Frontendmodul ist fuer eingeloggte Mitglieder gedacht. Nutzen Sie den normalen Contao-Mitgliederlogin auf einer geschuetzten Seite.</div>
    {% elseif createMode %}
        <div class="survey-card">
            <h3>Neue Umfrage erstellen</h3>
            <p>Die Umfrage wird nach dem Anlegen automatisch dem eingeloggten Mitglied zugewiesen.</p>
            {{ form_start(surveyForm, {attr: {class: 'survey-form-grid'}}) }}
                <label class="survey-label">Titel{{ form_widget(surveyForm.title) }}{{ form_errors(surveyForm.title) }}</label>
                <label class="survey-label">Beschreibung{{ form_widget(surveyForm.description) }}</label>
                <label class="survey-inline-check">{{ form_widget(surveyForm.published) }}<span>Direkt veroeffentlichen</span></label>
                <div class="survey-button-row">
                    <button class="survey-button primary">Umfrage erstellen</button>
                    {% if backUrl %}<a class="survey-button secondary" href="{{ backUrl }}">Zur Liste</a>{% endif %}
                </div>
            {{ form_end(surveyForm) }}
        </div>
    {% else %}
        {% set locked = survey.isLocked == '1' %}
        <div class="survey-button-row">
            {% if backUrl %}<a class="survey-button secondary" href="{{ backUrl }}">Zur Liste</a>{% endif %}
            {% if publicUrl %}<a class="survey-button primary" href="{{ publicUrl }}" target="_blank" rel="noreferrer">Oeffentliche Ansicht oeffnen</a>{% endif %}
        </div>

        <div class="survey-kpis">
            <article class="survey-card"><strong>Oeffentlicher Link</strong><div>{% if publicUrl %}<a href="{{ publicUrl }}" target="_blank" rel="noreferrer">{{ publicUrl }}</a>{% else %}Noch keine oeffentliche Seite hinterlegt.{% endif %}</div></article>
            <article class="survey-card"><strong>Status</strong><div class="survey-meta"><span class="survey-badge {{ survey.published ? 'success' : 'neutral' }}">{{ survey.published ? 'veroeffentlicht' : 'entwurf' }}</span>{% if locked %}<span class="survey-badge warning">gesperrt</span>{% endif %}</div></article>
            <article class="survey-card"><strong>Bearbeitende</strong><div>{{ editors|length }} Mitglied(er)</div></article>
        </div>

        {% if locked %}
            <div class="survey-alert warning">Die Umfrage ist strukturell gesperrt, weil bereits Antworten vorliegen. Stammdaten koennen weiter gepflegt werden, der Ablauf und die Fragen jedoch nicht.</div>
        {% endif %}

        <div class="survey-grid-columns">
            <div class="survey-grid">
                <div class="survey-card">
                    <h3>Umfrage-Metadaten</h3>
                    {{ form_start(surveyForm, {attr: {class: 'survey-form-grid'}}) }}
                        <label class="survey-label">Titel{{ form_widget(surveyForm.title) }}{{ form_errors(surveyForm.title) }}</label>
                        <label class="survey-label">Beschreibung{{ form_widget(surveyForm.description) }}</label>
                        <label class="survey-inline-check">{{ form_widget(surveyForm.published) }}<span>Umfrage veroeffentlichen</span></label>
                        <div class="survey-button-row"><button class="survey-button primary">Speichern</button></div>
                    {{ form_end(surveyForm) }}
                </div>

                <div class="survey-card">
                    <h3>Bearbeitende Mitglieder</h3>
                    <div class="survey-grid">
                        {% for editor in editors %}
                            <div>
                                <strong>{{ ([editor.firstname, editor.lastname]|join(' ')|trim|striptags) ?: (editor.email|striptags|trim) }}</strong><br>
                                <span>{{ editor.email|striptags|trim }}</span>
                            </div>
                        {% else %}
                            <div>Keine Editoren hinterlegt.</div>
                        {% endfor %}
                    </div>
                </div>

                <div class="survey-card">
                    <h3>Antworten und Ergebnisse</h3>
                    <div class="survey-grid">
                        {% for submission in submissions %}
                            <article>
                                <div class="survey-meta">
                                    <span class="survey-badge neutral">{{ submission.answerCount }} Antworten</span>
                                    <span class="survey-badge {{ submission.isFinished ? 'success' : 'warning' }}">{{ submission.isFinished ? 'abgeschlossen' : 'offen' }}</span>
                                </div>
                                <div>Begonnen: {{ submission.startedAt ? submission.startedAt|date('d.m.Y H:i') : 'unbekannt' }}</div>
                                <div>Beendet: {{ submission.completedAt ? submission.completedAt|date('d.m.Y H:i') : 'unbekannt' }}</div>
                                <div>Teilnahme-Code: {{ submission.token }}</div>
                            </article>
                        {% else %}
                            <div>Es liegen noch keine Teilnahmen vor.</div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="survey-grid">
                <div class="survey-card" data-survey-question-editor>
                    <div class="survey-meta"><h3>Fragen bearbeiten</h3>{% if activeQuestionId %}<span class="survey-badge neutral">Bearbeitungsmodus</span>{% endif %}</div>
                    {% if not locked %}
                        {% set questionType = questionForm.type.vars.value ?: 'yes_no_maybe' %}
                        {{ form_start(questionForm, {attr: {class: 'survey-form-grid'}}) }}
                            <label class="survey-label">Fragetyp{{ form_widget(questionForm.type, {attr: {'data-survey-question-type': '1'}}) }}</label>
                            <label class="survey-label">Frage{{ form_widget(questionForm.question) }}{{ form_errors(questionForm.question) }}</label>
                            <label class="survey-label">Beschreibung{{ form_widget(questionForm.description) }}</label>
                            <label class="survey-inline-check">{{ form_widget(questionForm.mandatory) }}<span>Pflichtfrage</span></label>
                            <label class="survey-inline-check">{{ form_widget(questionForm.published) }}<span>Aktiv</span></label>
                            <label class="survey-inline-check yes-no-config-field"{% if questionType != 'yes_no_maybe' %} style="display:none"{% endif %}>{{ form_widget(questionForm.allowMaybe) }}<span>Vielleicht anbieten</span></label>
                            <div class="yes-no-config-field survey-grid-columns"{% if questionType != 'yes_no_maybe' %} style="display:none;grid-template-columns: repeat(2, minmax(0, 1fr));"{% else %} style="grid-template-columns: repeat(2, minmax(0, 1fr));"{% endif %}>
                                <label class="survey-label">Zur Frage springen bei Auswahl ja{{ form_widget(questionForm.jumpOnYes) }}</label>
                                <label class="survey-label">Zur Frage springen bei Auswahl nein{{ form_widget(questionForm.jumpOnNo) }}</label>
                            </div>
                            <label class="survey-inline-check choice-config-field"{% if questionType != 'choice' %} style="display:none"{% endif %}>{{ form_widget(questionForm.allowMultiple) }}<span>Multiple-Choice aktivieren</span></label>
                            <div class="choice-config-field survey-grid-columns"{% if questionType != 'choice' %} style="display:none;grid-template-columns: repeat(2, minmax(0, 1fr));"{% else %} style="grid-template-columns: repeat(2, minmax(0, 1fr));"{% endif %}>
                                <label class="survey-label">Antwort 1{{ form_widget(questionForm.answerOption1) }}</label>
                                <label class="survey-label">Antwort 2{{ form_widget(questionForm.answerOption2) }}</label>
                                <label class="survey-label">Antwort 3{{ form_widget(questionForm.answerOption3) }}</label>
                                <label class="survey-label">Antwort 4{{ form_widget(questionForm.answerOption4) }}</label>
                                <label class="survey-label">Antwort 5{{ form_widget(questionForm.answerOption5) }}</label>
                                <label class="survey-label">Antwort 6{{ form_widget(questionForm.answerOption6) }}</label>
                                <label class="survey-label">Antwort 7{{ form_widget(questionForm.answerOption7) }}</label>
                                <label class="survey-label">Antwort 8{{ form_widget(questionForm.answerOption8) }}</label>
                                <label class="survey-label">Antwort 9{{ form_widget(questionForm.answerOption9) }}</label>
                                <label class="survey-label">Antwort 10{{ form_widget(questionForm.answerOption10) }}</label>
                            </div>
                            <div class="range-config-field survey-grid-columns"{% if questionType != 'range' %} style="display:none;grid-template-columns: repeat(3, minmax(0, 1fr));"{% else %} style="grid-template-columns: repeat(3, minmax(0, 1fr));"{% endif %}>
                                <label class="survey-label">Kleinster Wert{{ form_widget(questionForm.rangeMin) }}</label>
                                <label class="survey-label">Groesster Wert{{ form_widget(questionForm.rangeMax) }}</label>
                                <label class="survey-label">Schrittweite{{ form_widget(questionForm.rangeStep) }}</label>
                            </div>
                            <div class="survey-button-row"><button class="survey-button primary">{{ activeQuestionId ? 'Frage aktualisieren' : 'Frage speichern' }}</button></div>
                        {{ form_end(questionForm) }}
                    {% endif %}

                    <div class="survey-grid">
                        {% for question in questions %}
                            <article class="survey-card">
                                <div class="survey-meta">
                                    <span class="survey-badge neutral">{{ question.type }}</span>
                                    {% if question.mandatory %}<span class="survey-badge warning">Pflicht</span>{% endif %}
                                    {% if loop.first %}<span class="survey-badge success">Start</span>{% endif %}
                                </div>
                                <h4>{{ question.question|striptags|trim }}</h4>
                                <p>{{ (question.description|striptags|trim) ?: 'Keine Zusatzbeschreibung.' }}</p>
                                {% if not locked %}
                                    <div class="survey-button-row">
                                        <a class="survey-button secondary" href="?survey={{ survey.id }}&question={{ question.id }}">Bearbeiten</a>
                                        <form method="post">
                                            <input type="hidden" name="_survey_action" value="delete-question">
                                            <input type="hidden" name="item_id" value="{{ question.id }}">
                                            <input type="hidden" name="_token" value="{{ csrf_token('delete-question-' ~ question.id) }}">
                                            <button class="survey-button danger" onclick="return confirm('Frage wirklich loeschen?');">Loeschen</button>
                                        </form>
                                    </div>
                                {% endif %}
                            </article>
                        {% else %}
                            <div>Noch keine Fragen angelegt.</div>
                        {% endfor %}
                    </div>
                </div>

                <div class="survey-card">
                    <div class="survey-meta"><h3>Sprungregeln</h3>{% if activeConditionId %}<span class="survey-badge neutral">Bearbeitungsmodus</span>{% endif %}</div>
                    {% if not locked %}
                        {{ form_start(conditionForm, {attr: {class: 'survey-form-grid'}}) }}
                            <label class="survey-label">Ausgangsfrage{{ form_widget(conditionForm.sourceQuestion) }}</label>
                            <label class="survey-label">Antwort{{ form_widget(conditionForm.answerValue) }}</label>
                            <label class="survey-label">Naechste Frage{{ form_widget(conditionForm.targetQuestion) }}</label>
                            <div class="survey-button-row"><button class="survey-button primary">{{ activeConditionId ? 'Bedingung aktualisieren' : 'Bedingung speichern' }}</button></div>
                        {{ form_end(conditionForm) }}
                    {% endif %}

                    <div class="survey-grid">
                        {% for condition in conditions %}
                            <article class="survey-card">
                                <div><strong>Wenn Antwort = {{ condition.answerValue|striptags|trim }}</strong></div>
                                <div>{{ (condition.sourceQuestionLabel|striptags|trim) ?: ('Frage #' ~ condition.sourceQuestion) }}</div>
                                <div>weiter zu {{ (condition.targetQuestionLabel|striptags|trim) ?: ('Frage #' ~ condition.targetQuestion) }}</div>
                                {% if not locked %}
                                    <div class="survey-button-row">
                                        <a class="survey-button secondary" href="?survey={{ survey.id }}&condition={{ condition.id }}">Bearbeiten</a>
                                        <form method="post">
                                            <input type="hidden" name="_survey_action" value="delete-condition">
                                            <input type="hidden" name="item_id" value="{{ condition.id }}">
                                            <input type="hidden" name="_token" value="{{ csrf_token('delete-condition-' ~ condition.id) }}">
                                            <button class="survey-button danger" onclick="return confirm('Bedingung wirklich loeschen?');">Loeschen</button>
                                        </form>
                                    </div>
                                {% endif %}
                            </article>
                        {% else %}
                            <div>Noch keine Bedingungen definiert.</div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
</section>