{% extends "base.html" %}

{% block content %}
<div class="content-card">
    <div class="page-header">
        <h1>Fragen</h1>
        <a class="btn" href="{{ url_for('admin_question_new') }}">Neue Frage</a>
    </div>

    <div class="filter-bar">
        <div class="form-group filter-item">
            <label for="filter-thema">Thema</label>
            <select id="filter-thema">
                <option value="">Alle Themen</option>
                {% for t in themen %}
                    <option value="{{ t.id }}">{{ t.kurztitel }} - {{ t.titel }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form-group filter-item">
            <label for="filter-branche">Branche</label>
            <select id="filter-branche">
                <option value="">Alle Branchen</option>
                {% for b in branchen %}
                    <option value="{{ b.branchenname }}">{{ b.branchenname }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form-group filter-item">
            <label for="filter-text">Suche</label>
            <input type="text" id="filter-text" placeholder="Frage durchsuchen">
        </div>
    </div>

    <div id="question-groups">
        {% for thema in themen %}
            {% set group_questions = fragen | selectattr("thema_id", "equalto", thema.id) | list %}
            {% if group_questions %}
            <div class="question-group"
                 data-thema-id="{{ thema.id }}"
                 data-thema-name="{{ thema.kurztitel }} {{ thema.titel }}">

                <div class="question-group-header">
                    <div>
                        <h2>{{ thema.kurztitel }} - {{ thema.titel }}</h2>
                        <p class="muted">Fragen: {{ group_questions|length }}</p>
                    </div>
                    <a class="btn btn-small btn-secondary"
                       href="{{ url_for('admin_question_new_for_thema', thema_id=thema.id) }}">
                        Frage zu diesem Thema
                    </a>
                </div>

                <div class="question-list">
                    {% for f in group_questions %}
                    <div class="question-item"
                         data-thema-id="{{ f.thema_id }}"
                         data-branchen="{{ f.branchen|lower }}"
                         data-text="{{ f.text|lower }}">
                        <div class="question-item-main">
                            <div class="question-meta">
                                <span class="question-id">#{{ f.id }}</span>
                                {% if f.branchen %}
                                    <span class="question-branch">{{ f.branchen }}</span>
                                {% else %}
                                    <span class="question-branch muted">Keine Branche zugeordnet</span>
                                {% endif %}
                            </div>

                            <div class="question-text">
                                {{ f.text }}
                            </div>
                        </div>

                        <div class="question-actions">
                            <a class="btn btn-small"
                               href="{{ url_for('admin_question_edit', frage_id=f.id) }}">
                                Bearbeiten
                            </a>

                            <form method="post"
                                  action="{{ url_for('admin_question_delete', frage_id=f.id) }}"
                                  style="display:inline;"
                                  onsubmit="return confirm('Frage löschen?');">
                                <button type="submit" class="btn btn-small btn-danger">Löschen</button>
                            </form>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        {% endfor %}
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const themaFilter = document.getElementById("filter-thema");
    const brancheFilter = document.getElementById("filter-branche");
    const textFilter = document.getElementById("filter-text");

    const groups = document.querySelectorAll(".question-group");

    function applyFilters() {
        const selectedThema = themaFilter.value.trim();
        const selectedBranche = brancheFilter.value.trim().toLowerCase();
        const searchText = textFilter.value.trim().toLowerCase();

        groups.forEach(group => {
            const questionItems = group.querySelectorAll(".question-item");
            let visibleCount = 0;

            questionItems.forEach(item => {
                const itemThemaId = item.dataset.themaId;
                const itemBranchen = item.dataset.branchen || "";
                const itemText = item.dataset.text || "";

                const themaMatch = !selectedThema || itemThemaId === selectedThema;
                const brancheMatch = !selectedBranche || itemBranchen.includes(selectedBranche);
                const textMatch = !searchText || itemText.includes(searchText);

                const visible = themaMatch && brancheMatch && textMatch;
                item.style.display = visible ? "" : "none";

                if (visible) {
                    visibleCount++;
                }
            });

            group.style.display = visibleCount > 0 ? "" : "none";
        });
    }

    themaFilter.addEventListener("change", applyFilters);
    brancheFilter.addEventListener("change", applyFilters);
    textFilter.addEventListener("input", applyFilters);

    applyFilters();
});
</script>
{% endblock %}