{% extends 'administrative/layout.html.twig' %}

{% block title %}Feedback-Statistik{% endblock %}

{% block content %}
    <div class="flex items-start justify-between pb-4">
        <h1 class="text-2xl font-bold">
            Feedback-Statistik
        </h1>
    </div>

    <div class="bg-white rounded-lg shadow p-4 mb-8">
        {{ form_start(form, { attr: { class: 'flex flex-wrap items-end gap-4' } }) }}
            <div class="flex-1 min-w-[150px]">
                {{ form_row(form.dateFrom) }}
            </div>
            <div class="flex-1 min-w-[150px]">
                {{ form_row(form.dateTo) }}
            </div>
            <div class="flex gap-2">
                {{ form_widget(form.apply, { attr: { class: 'btn btn--small' } }) }}
                {{ form_widget(form.reset, { attr: { class: 'btn btn--small btn--secondary' } }) }}
            </div>
        {{ form_end(form) }}
    </div>

    <p class="text-sm text-gray-600 mb-4">
        Zeitraum: {{ filterDto.effectiveDateFrom|date('d.m.Y') }} &ndash; {{ filterDto.effectiveDateTo|date('d.m.Y') }}
        <span class="text-gray-400">
            {% if filterDto.usingDefaultRange %}(Standard: letzte 12 Monate){% else %}(Filter aktiv){% endif %}
        </span>
    </p>

    {% if chartsData is empty %}
        <div class="bg-white rounded-lg shadow p-8 text-center text-gray-500">
            Keine Feedback-Daten im ausgewählten Zeitraum vorhanden.
        </div>
    {% else %}
        <div class="grid gap-8">
            {% for chartData in chartsData %}
                <div class="bg-white rounded-lg shadow overflow-hidden">
                    <div class="p-4 border-b bg-gray-50">
                        <h2 class="text-lg font-semibold">{{ chartData.feedbackSet.name }}</h2>
                        <p class="text-sm text-gray-600">{{ chartData.count }} Feedbacks</p>
                    </div>
                    <div class="flex flex-col lg:flex-row">
                        <div class="lg:w-1/3 p-4 border-r">
                            <h3 class="text-sm font-semibold text-gray-500 mb-3">Fragen</h3>
                            <ol class="text-sm space-y-2">
                                {% for question in chartData.questions %}
                                    <li class="flex">
                                        <span class="font-medium text-gray-400 w-6">{{ loop.index }}.</span>
                                        <span>{{ question }}</span>
                                    </li>
                                {% endfor %}
                            </ol>
                        </div>
                        <div class="lg:w-2/3 p-4">
                            <div class="h-64"
                                 data-controller="chart"
                                 data-chart-labels-value="{{ chartData.labels|json_encode }}"
                                 data-chart-data-value="{{ chartData.data|json_encode }}"
                                 data-chart-max-y-value="5">
                                <canvas data-chart-target="canvas"></canvas>
                            </div>
                            <div class="mt-4">
                                <table class="w-full text-sm">
                                    <thead>
                                        <tr class="border-b">
                                            {% for label in chartData.labels %}
                                                <th class="py-1 text-center font-normal text-gray-500">{{ label }}</th>
                                            {% endfor %}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            {% for value in chartData.data %}
                                                <td class="py-1 text-center font-semibold">{{ value|number_format(2, ',', '.') }}</td>
                                            {% endfor %}
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endblock %}