{% extends 'base.html' %}
{% block title %}{{ thema.titel }}{% endblock %}
{% block content %}
<section class="card">
    <h1>{{ thema.titel }}</h1>
    {% if thema.pic != "" %}
    <center><img src="/images/{{ thema.pic }}"></center>
    {% endif %}
    <p>{{ thema.infotext }}</p>
    <p class="muted">{{ thema.zusatztext }}</p>
</section>

<section class="card">
    <form method="post" id="topic-form">
    <input type="hidden" name="assessment_id" value="{{ assessment_id }}">
    <input type="hidden" name="branche_id" value="{{ branche_id }}">

    {% for frage in fragen %}
    <div class="question-box">
        <p><strong>{{ frage.text }}</strong></p>
        <div class="radio-row">
            <label>
                <input type="radio" name="frage_{{ frage.id }}" value="ja">
                Ja
            </label>
            <label>
                <input type="radio" name="frage_{{ frage.id }}" value="nein">
                Nein
            </label>
        </div>
    </div>
    {% endfor %}

    <div class="form-actions">
        <button type="submit" class="btn" id="next-button" disabled>Weiter</button>
    </div>
</form>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("topic-form");
    const nextButton = document.getElementById("next-button");
    const questionNames = [
        {% for frage in fragen %}
            "frage_{{ frage.id }}"{% if not loop.last %},{% endif %}
        {% endfor %}
    ];

    function updateButtonState() {
        const allAnswered = questionNames.every((name) => {
            return form.querySelector(`input[name="${name}"]:checked`) !== null;
        });

        nextButton.disabled = !allAnswered;
    }

    form.addEventListener("change", updateButtonState);
    updateButtonState();
});
</script>
</section>

<section class="card" style="display:none">
    <h2>Ansprechpartner</h2>
    {% for person in ansprechpartner %}
        <div class="contact-box">
            <strong>{{ person.name }}</strong>
            <div>{{ person.email }}</div>
            <p>{{ person.infotext }}</p>
        </div>
    {% else %}
        <p>Aktuell keine Ansprechpartner hinterlegt.</p>
    {% endfor %}
</section>
{% endblock %}