{% extends "layout.html.twig" %}

{% block title %}Report · {{ gruppo.nome }} · {{ app_name }}{% endblock %}

{% block content %}
    <p class="text-sm text-stone-500">
        <a href="{{ url('/gruppi') }}">Gruppi</a> /
        <a href="{{ url('/gruppi/' ~ gruppo.id) }}">{{ gruppo.nome }}</a> / Report
    </p>
    <h1 class="mt-1">Report consumo / costo per capo</h1>

    {# Selettore periodo #}
    <form method="get" action="{{ url('/gruppi/' ~ gruppo.id ~ '/report') }}" class="card mt-4">
        <div class="grid gap-4 sm:grid-cols-3">
            <div class="field !mb-0">
                <label class="label" for="start">Dal</label>
                <input class="input" type="date" id="start" name="start" value="{{ start }}">
            </div>
            <div class="field !mb-0">
                <label class="label" for="end">Al</label>
                <input class="input" type="date" id="end" name="end" value="{{ end }}">
            </div>
            <div class="flex items-end">
                <button type="submit" class="btn-primary w-full sm:w-auto">Aggiorna</button>
            </div>
        </div>
    </form>

    {% if report.media <= 0 %}
        <div class="flash flash-info mt-4">
            Consistenza media nulla nel periodo: impossibile calcolare i valori per capo.
            Registra movimenti del gruppo nel periodo selezionato.
        </div>
    {% endif %}

    {# Riepilogo #}
    <div class="card mt-4">
        <div class="grid grid-cols-2 gap-4 sm:grid-cols-3">
            <div>
                <div class="text-sm text-stone-500">Consistenza media</div>
                <div class="text-2xl font-bold">{{ report.media }} <span class="text-base font-normal text-stone-500">capi</span></div>
                <div class="text-xs text-stone-400">su {{ report.giorni_attivi }} giorni con animali</div>
            </div>
            <div>
                <div class="text-sm text-stone-500">Mangime somministrato</div>
                <div class="text-2xl font-bold">{{ report.totale_kg }} <span class="text-base font-normal text-stone-500">kg</span></div>
            </div>
            <div>
                <div class="text-sm text-stone-500">Consumo medio/capo</div>
                <div class="text-2xl font-bold text-orto-600">{{ report.consumo_capo is not null ? report.consumo_capo ~ ' kg' : '—' }}</div>
            </div>
            <div>
                <div class="text-sm text-stone-500">Costo mangime/capo</div>
                <div class="text-lg">{{ report.costo_mangime_capo is not null ? '€ ' ~ report.costo_mangime_capo : '—' }}</div>
            </div>
            <div>
                <div class="text-sm text-stone-500">Costo acquisto animali</div>
                <div class="text-lg">€ {{ report.costo_animali }}</div>
            </div>
            <div>
                <div class="text-sm text-stone-500">Costo totale/capo</div>
                <div class="text-lg font-semibold text-orto-700">{{ report.costo_totale_capo is not null ? '€ ' ~ report.costo_totale_capo : '—' }}</div>
            </div>
        </div>
        <p class="help mt-3">
            Costo totale/capo = (costo mangime €{{ report.costo_mangime }} + costo animali €{{ report.costo_animali }}) ÷ {{ report.media }} capi.
        </p>
    </div>

    {# Dettaglio per mangime + grafico a barre #}
    <h2 class="mt-6">Mangime per tipo</h2>
    {% if report.per_mangime is empty %}
        <p class="mt-2 text-sm text-stone-500">Nessuna somministrazione nel periodo.</p>
    {% else %}
        {% set max_kg = max(report.per_mangime|map(r => r.kg)) %}
        <div class="card mt-2">
            {% for r in report.per_mangime %}
                <div class="{{ not loop.first ? 'mt-3' : '' }}">
                    <div class="flex items-baseline justify-between text-sm">
                        <span class="font-medium">{{ r.nome }}</span>
                        <span class="text-stone-500">{{ r.kg }} kg · € {{ r.prezzo_medio }}/kg · € {{ r.costo }}</span>
                    </div>
                    <div class="mt-1 h-3 w-full overflow-hidden rounded bg-stone-100">
                        <div class="h-3 rounded bg-orto-500" style="width: {{ max_kg > 0 ? (r.kg / max_kg * 100)|round(1) : 0 }}%"></div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endblock %}