{% extends "base.html" %}

{% block content %}
<div class="content-card">
    <div class="page-header">
        <h1>Empfehlungen</h1>
    </div>

    <div class="filter-bar">
        <div class="form-group filter-item">
            <label for="filter-ansprechpartner">Ansprechpartner</label>
            <select id="filter-ansprechpartner">
                <option value="">Alle Ansprechpartner</option>
                {% for ap in ansprechpartner %}
                    <option value="{{ ap.name|lower }}">{{ ap.name }}</option>
                {% endfor %}
            </select>
        </div>

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

    <div id="empfehlung-groups">
        {% for ap in ansprechpartner %}
            {% set group_items = empfehlungen | selectattr("ansprechpartner_id", "equalto", ap.id) | list %}
            {% if group_items %}
            <div class="question-group empfehlung-group" data-ansprechpartner="{{ ap.name|lower }}">
                <div class="question-group-header">
                    <div>
                        <h2>{{ ap.name }}</h2>
                        <p class="muted">Empfehlungen: {{ group_items|length }}</p>
                    </div>
                </div>

                <div class="question-list">
                    {% for item in group_items %}
                    <div class="question-item empfehlung-item"
                         data-ansprechpartner="{{ item.ansprechpartner_name|lower }}"
                         data-thema="{{ item.thema_titel|lower }}">
                        <div class="question-item-main">
                            <div class="question-text">
                                <strong>Ansprechpartner:</strong> {{ item.ansprechpartner_name }}<br>
                                <strong>Thema:</strong> {{ item.thema_titel }}<br>
                                <strong>User:</strong> {{ item.user_name }}<br>
                                <strong>Datum:</strong> {{ item.datetime.strftime('%d.%m.%Y %H:%M') if item.datetime else '-' }}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        {% endfor %}
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const apFilter = document.getElementById("filter-ansprechpartner");
    const themaFilter = document.getElementById("filter-thema");
    const groups = document.querySelectorAll(".empfehlung-group");

    function applyFilters() {
        const selectedAp = apFilter.value.trim().toLowerCase();
        const selectedThema = themaFilter.value.trim().toLowerCase();

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

            items.forEach(item => {
                const itemAp = item.dataset.ansprechpartner || "";
                const itemThema = item.dataset.thema || "";

                const apMatch = !selectedAp || itemAp === selectedAp;
                const themaMatch = !selectedThema || itemThema.includes(selectedThema);

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

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

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

    apFilter.addEventListener("change", applyFilters);
    themaFilter.addEventListener("change", applyFilters);

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