{% extends "layout.html.twig" %}
{% import "macros.twig" as lbl %}

{% block title %}Calendario · {{ app_name }}{% endblock %}

{% block content %}
    <h1>Calendario</h1>
    <p class="mt-1 text-sm text-stone-500">
        Periodi stagionali su 52 settimane.
        <span class="inline-flex items-center gap-1"><span class="inline-block h-3 w-3 rounded-sm border border-orto-600 bg-orto-500"></span> verde = periodo migliore</span>,
        <span class="inline-flex items-center gap-1"><span class="inline-block h-3 w-3 rounded-sm border border-amber-500 bg-amber-400"></span> giallo = periodo medio</span>.
        Settimana corrente (#{{ current_week }}) evidenziata.
    </p>

    {% include 'partials/alert_scorte.html.twig' %}

    {% if calendario is empty %}
        <p class="mt-4 text-stone-500">
            Nessuna attività con calendario. Aggiungi attività dagli <a href="{{ url('/elementi') }}">elementi</a>.
        </p>
    {% else %}
        <div x-data="calPrefs({{ show_json }}, '{{ prefs_url }}', '{{ csrf_token() }}')">
            {# Toggle per sezione (persistiti in preferenze_utente) #}
            <div class="card mt-4">
                <div class="flex flex-wrap items-center gap-x-5 gap-y-2">
                    <span class="text-sm font-medium">Mostra sezioni:</span>
                    {% for sez in calendario %}
                        <label class="check-row text-sm">
                            <input type="checkbox" x-model="show[{{ sez.id }}]" @change="save()"> {{ sez.nome }}
                        </label>
                    {% endfor %}
                    <span class="ml-auto text-xs text-orto-600" x-show="saved" x-cloak>✓ preferenze salvate</span>
                </div>
            </div>

            {# ── Vista agenda (mobile): prossime settimane verdi/gialle ── #}
            <div class="mt-4 space-y-5 sm:hidden">
                {% for sez in calendario %}
                    <div x-show="show[{{ sez.id }}]">
                        <h2 class="flex items-center gap-2">
                            {{ sez.nome }} <span class="badge">{{ lbl.elementi_label(sez.modello) }}</span>
                        </h2>
                        {% for el in sez.elementi %}
                            <p class="mt-3 text-sm font-medium text-stone-700">{{ el.nome }}</p>
                            {% for a in el.attivita %}
                                <div class="card mt-2">
                                    <div class="font-medium">{{ a.nome }}</div>
                                    {% if a.stati is empty %}
                                        <p class="mt-1 text-xs text-stone-400">Nessun periodo impostato.</p>
                                    {% else %}
                                        <div class="mt-2 flex flex-wrap gap-1.5">
                                            {% for w in agenda_weeks %}
                                                {% set st = a.stati[w.numero] ?? '' %}
                                                {% if st %}
                                                    <span class="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs
                                                          {{ st == 'verde' ? 'border-orto-600 bg-orto-50 text-orto-700 dark:bg-orto-700/30 dark:text-orto-300' : 'border-amber-500 bg-amber-50 text-amber-700 dark:bg-amber-700/30 dark:text-amber-200' }}">
                                                        <span class="inline-block h-2.5 w-2.5 rounded-full {{ st == 'verde' ? 'bg-orto-500' : 'bg-amber-400' }}"></span>
                                                        {{ w.etichetta }}{{ w.numero == current_week ? ' · ora' : '' }}
                                                    </span>
                                                {% endif %}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>

            {# ── Griglia 52 colonne (desktop) ── #}
            <div class="card mt-2 hidden overflow-x-auto p-0 sm:block">
                <table class="border-collapse text-sm">
                    <thead>
                        <tr>
                            <th class="sticky left-0 top-0 z-20 w-36 border-b border-stone-200 bg-stone-100 px-3 py-2 text-left sm:w-44 dark:border-stone-700 dark:bg-stone-700/50">Attività</th>
                            {% for m in months %}
                                <th colspan="{{ m.weeks|length }}"
                                    class="border-b border-l-2 border-l-stone-300 border-stone-200 bg-stone-100 px-1 dark:border-stone-700 dark:bg-stone-700/50 py-2 text-center text-xs font-semibold">
                                    {{ m.nome|slice(0, 3) }}
                                </th>
                            {% endfor %}
                        </tr>
                        <tr>
                            <th class="sticky left-0 z-10 border-b border-stone-200 bg-stone-50 dark:border-stone-700 dark:bg-stone-800"></th>
                            {% for m in months %}
                                {% for w in m.weeks %}
                                    <th class="w-6 border-b border-stone-200 p-0 text-center text-[10px] font-normal
                                               {{ loop.first ? 'border-l-2 border-l-stone-300' : '' }}
                                               {% if w.numero == current_week %}bg-orto-100 font-bold text-orto-700 dark:bg-orto-700/40 dark:text-orto-300{% else %}bg-stone-50 text-stone-400 dark:bg-stone-800 dark:text-stone-500{% endif %}"
                                        title="{{ w.etichetta }}{{ w.numero == current_week ? ' · settimana corrente' : '' }}">{{ w.numero }}</th>
                                {% endfor %}
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for sez in calendario %}
                            {# Intestazione sezione #}
                            <tr x-show="show[{{ sez.id }}]">
                                <td colspan="53" class="border-b border-stone-200 bg-stone-100 px-3 py-1.5 font-semibold dark:border-stone-700 dark:bg-stone-700/50">
                                    <span class="inline-flex items-center gap-2">
                                        {% if sez.colore %}
                                            <span class="inline-block h-3 w-3 rounded-full border border-stone-300" style="background: {{ sez.colore }}"></span>
                                        {% endif %}
                                        {{ sez.nome }}
                                        <span class="badge">{{ lbl.elementi_label(sez.modello) }}</span>
                                    </span>
                                </td>
                            </tr>

                            {% for el in sez.elementi %}
                                {# Intestazione elemento #}
                                <tr x-show="show[{{ sez.id }}]">
                                    <td colspan="53" class="border-b border-stone-100 bg-stone-50 px-3 py-1 text-sm font-medium text-stone-700 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-200">
                                        {{ el.nome }}
                                    </td>
                                </tr>

                                {% for a in el.attivita %}
                                    <tr x-show="show[{{ sez.id }}]" class="hover:bg-stone-50 dark:hover:bg-stone-700/40">
                                        <td class="sticky left-0 z-10 w-36 truncate border-b border-stone-100 bg-white px-3 py-1 pl-6 dark:border-stone-700 dark:bg-stone-800 sm:w-44"
                                            title="{{ a.nome }}">{{ a.nome }}</td>
                                        {% for m in months %}
                                            {% for w in m.weeks %}
                                                {% set st = a.stati[w.numero] ?? '' %}
                                                {% set today = w.numero == current_week %}
                                                <td class="h-6 w-6 border-b border-stone-100 p-0 dark:border-stone-700
                                                           {{ loop.first ? 'border-l-2 border-l-stone-300' : 'border-l border-l-stone-100' }}
                                                           {%- if st == 'verde' %} bg-orto-500
                                                           {%- elseif st == 'giallo' %} bg-amber-400
                                                           {%- elseif today %} bg-orto-50 dark:bg-orto-700/30
                                                           {%- else %} bg-white dark:bg-stone-800{% endif %}
                                                           {{ today ? 'ring-1 ring-inset ring-orto-500' : '' }}"
                                                    {% if st %}title="{{ a.nome }} — {{ st == 'verde' ? 'periodo migliore' : 'periodo medio' }}"{% endif %}></td>
                                            {% endfor %}
                                        {% endfor %}
                                    </tr>
                                {% endfor %}
                            {% endfor %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block scripts %}
<script>
    function calPrefs(show, url, token) {
        return {
            show: show,
            saved: false,
            _t: null,
            save() {
                fetch(url, {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    body: new URLSearchParams({ sezioni_visibili: JSON.stringify(this.show), _csrf: token })
                }).then(r => {
                    if (r.ok) {
                        this.saved = true;
                        clearTimeout(this._t);
                        this._t = setTimeout(() => { this.saved = false; }, 1500);
                    }
                });
            }
        };
    }
</script>
{% endblock %}