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

{% block title %}{{ is_edit ? 'Modifica' : 'Nuovo' }} gruppo · {{ app_name }}{% endblock %}

{# Elemento iniziale per Alpine: quello del gruppo o il primo disponibile. #}
{% set initial_el = g.elemento_id ?: (elementi|length ? elementi[0].id : 0) %}

{% block content %}
    <div class="mx-auto max-w-lg">
        <p class="text-sm text-stone-500"><a href="{{ url('/gruppi') }}">Gruppi</a> / {{ is_edit ? 'Modifica' : 'Nuovo' }}</p>
        <h1 class="mt-1">{{ is_edit ? 'Modifica gruppo' : 'Nuovo gruppo' }}</h1>

        {% if elementi is empty %}
            <div class="flash flash-warning mt-4">
                Nessun tipo animale disponibile. Crea prima un elemento in una sezione di modello "animale".
            </div>
        {% else %}
            <form method="post" action="{{ action }}" class="card mt-4"
                  x-data="{ elemento: '{{ initial_el }}', variante: '{{ g.variante_id ?: 0 }}', varianti: {{ varianti_json }} }">
                {{ csrf_field() }}

                <div class="field">
                    <label class="label" for="elemento_id">Tipo animale</label>
                    <select class="select" id="elemento_id" name="elemento_id" x-model="elemento"
                            @change="variante = (varianti[elemento] || []).some(v => String(v.id) === variante) ? variante : '0'">
                        {% for el in elementi %}
                            <option value="{{ el.id }}" {{ el.id == initial_el ? 'selected' : '' }}>{{ el.nome }}</option>
                        {% endfor %}
                    </select>
                    {% if errors.elemento_id %}<p class="mt-1 text-sm text-red-600">{{ errors.elemento_id }}</p>{% endif %}
                </div>

                <div class="field">
                    <label class="label" for="variante_id">Razza <span class="text-stone-400">(opzionale)</span></label>
                    <select class="select" id="variante_id" name="variante_id" x-model="variante">
                        <option value="0">— nessuna / mista —</option>
                        <template x-for="v in (varianti[elemento] || [])" :key="v.id">
                            <option :value="v.id" x-text="v.nome"></option>
                        </template>
                    </select>
                    {% if errors.variante_id %}<p class="mt-1 text-sm text-red-600">{{ errors.variante_id }}</p>{% endif %}
                </div>

                <div class="field">
                    <label class="label" for="nome">Nome del gruppo</label>
                    <input class="input" id="nome" name="nome" value="{{ g.nome }}" required maxlength="150"
                           placeholder="Es. Quaglie femmine A">
                    {% if errors.nome %}<p class="mt-1 text-sm text-red-600">{{ errors.nome }}</p>{% endif %}
                </div>

                <div class="field">
                    <label class="label" for="luogo_id">Luogo corrente</label>
                    <select class="select" id="luogo_id" name="luogo_id">
                        <option value="0">— seleziona —</option>
                        {% for l in luoghi %}
                            <option value="{{ l.id }}" {{ g.luogo_id == l.id ? 'selected' : '' }}>{{ l.nome }}</option>
                        {% endfor %}
                    </select>
                    {% if errors.luogo_id %}<p class="mt-1 text-sm text-red-600">{{ errors.luogo_id }}</p>{% endif %}
                </div>

                <div class="field">
                    <label class="label" for="stato">Stato</label>
                    <select class="select" id="stato" name="stato">
                        <option value="attivo" {{ g.stato == 'attivo' ? 'selected' : '' }}>Attivo</option>
                        <option value="chiuso" {{ g.stato == 'chiuso' ? 'selected' : '' }}>Chiuso</option>
                    </select>
                </div>

                <div class="field">
                    <label class="label" for="note">Note <span class="text-stone-400">(opzionale)</span></label>
                    <textarea class="textarea" id="note" name="note" rows="3">{{ g.note }}</textarea>
                </div>

                <div class="flex gap-2 form-actions-sticky">
                    <button type="submit" class="btn-primary">{{ is_edit ? 'Salva modifiche' : 'Crea gruppo' }}</button>
                    <a class="btn-secondary" href="{{ url('/gruppi') }}">Annulla</a>
                </div>
            </form>
        {% endif %}
    </div>
{% endblock %}