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

{% block title %}Report spese · {{ app_name }}{% endblock %}

{% block content %}
    <p class="text-sm text-stone-500"><a href="{{ url('/spese') }}">Spese</a> / Report</p>
    <h1 class="mt-1">Report spese</h1>

    {# Periodo #}
    <form method="get" action="{{ url('/spese/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>

    {# Totali #}
    <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">Totale generale</div>
                <div class="text-3xl font-bold text-orto-600">€ {{ report.totale_generale }}</div>
            </div>
            <div>
                <div class="text-sm text-stone-500">Spese</div>
                <div class="mt-1 text-lg">€ {{ report.totale_spese }}</div>
            </div>
            <div>
                <div class="text-sm text-stone-500">di cui Mangimi</div>
                <div class="mt-1 text-lg">€ {{ report.totale_mangimi }}</div>
            </div>
        </div>
        <p class="help mt-3">Totale generale = spese (€{{ report.totale_spese }}) + acquisti mangimi (€{{ report.totale_mangimi }}).</p>
    </div>

    {% if report.totale_generale <= 0 %}
        <div class="flash flash-info mt-4">Nessuna spesa nel periodo selezionato.</div>
    {% else %}
        {# Per categoria #}
        <h2 class="mt-6">Per categoria</h2>
        <div class="card mt-2">
            {% set max_cat = max(report.per_categoria|map(r => r.tot)) %}
            {% for r in report.per_categoria %}
                <div class="{{ not loop.first ? 'mt-3' : '' }}">
                    <div class="flex items-baseline justify-between text-sm">
                        <span class="font-medium">{{ r.nome }}{% if r.mangimi %} <span class="badge">modulo mangimi</span>{% endif %}</span>
                        <span>€ {{ r.tot }}</span>
                    </div>
                    <div class="mt-1 h-3 w-full overflow-hidden rounded bg-stone-100">
                        <div class="h-3 rounded {{ r.mangimi ? 'bg-amber-400' : 'bg-orto-500' }}" style="width: {{ max_cat > 0 ? (r.tot / max_cat * 100)|round(1) : 0 }}%"></div>
                    </div>
                </div>
            {% endfor %}
        </div>

        {# Per sezione #}
        <h2 class="mt-6">Per sezione</h2>
        <div class="card mt-2 overflow-x-auto">
            <table class="table table-cards">
                <thead><tr><th>Sezione</th><th>Totale</th><th>di cui mangimi</th></tr></thead>
                <tbody>
                    {% for r in report.per_sezione %}
                        <tr>
                            <td class="font-medium" data-label="Sezione">{{ r.nome }}</td>
                            <td data-label="Totale">€ {{ r.tot }}</td>
                            <td data-label="di cui mangimi">{{ r.mangimi > 0 ? '€ ' ~ r.mangimi : '—' }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
{% endblock %}