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

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

{% set can_write = current_user.ruolo in ['admin', 'editor'] %}

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

        <form method="post" action="{{ action }}" class="card mt-4" enctype="multipart/form-data"
              x-data="{
                  luogo: '{{ i.luogo_id ?: 0 }}',
                  tipo: '{{ i.tipo_intervento_id ?: 0 }}',
                  tipoSalvato: '{{ i.tipo_intervento_id ?: 0 }}',
                  unita: '{{ i.unita|default('')|e('js') }}',
                  ambiti: {{ ambiti_json }},
                  tipi: {{ tipi_json }},
                  rilevante(t) {
                      // Il tipo già salvato resta sempre tra le opzioni, anche se il suo ambito
                      // non combacia con quello del luogo (es. dopo un cambio di luogo in modifica).
                      if (this.tipoSalvato !== '0' && String(t.id) === this.tipoSalvato) return true;
                      const a = this.ambiti[this.luogo] || 'generico';
                      return t.ambito === 'generico' || a === 'generico' || t.ambito === a;
                  },
                  syncTipo() { if (this.tipo !== '0' && !this.tipi.some(t => String(t.id) === this.tipo && this.rilevante(t))) this.tipo = '0'; },
                  suggerisciUnita() {
                      if (this.unita) return; // non sovrascrivere un'unità già scelta
                      const t = this.tipi.find(t => String(t.id) === this.tipo);
                      if (!t) return;
                      const n = t.nome.toLowerCase();
                      if (n.includes('trapianto') || n.includes('semina')) this.unita = 'piante';
                      else if (n.includes('raccolta')) this.unita = 'kg';
                  }
              }">
            {{ csrf_field() }}

            <div class="field">
                <label class="label" for="luogo_id">Luogo</label>
                <select class="select" id="luogo_id" name="luogo_id" x-model="luogo" @change="syncTipo()">
                    <option value="0">— seleziona —</option>
                    {% for l in luoghi %}
                        <option value="{{ l.id }}" {{ i.luogo_id == l.id ? 'selected' : '' }}>{{ l.nome }} ({{ l.ambito }})</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="tipo_intervento_id">Tipo <span class="text-stone-400">(proposti per l'ambito del luogo)</span></label>
                <select class="select" id="tipo_intervento_id" name="tipo_intervento_id" x-model="tipo"
                        x-init="$nextTick(() => $el.value = tipo)" @change="suggerisciUnita()">
                    <option value="0">— seleziona —</option>
                    <template x-for="t in tipi.filter(t => rilevante(t))" :key="t.id">
                        <option :value="t.id" x-text="t.nome"></option>
                    </template>
                </select>
                {% if errors.tipo_intervento_id %}<p class="mt-1 text-sm text-red-600">{{ errors.tipo_intervento_id }}</p>{% endif %}
            </div>

            <div class="field">
                <label class="label" for="data">Data</label>
                <input class="input" type="date" id="data" name="data" value="{{ i.data }}" required>
                {% if errors.data %}<p class="mt-1 text-sm text-red-600">{{ errors.data }}</p>{% endif %}
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <div class="field">
                    <label class="label" for="quantita">Quantità <span class="text-stone-400">(opzionale)</span></label>
                    <input class="input" type="text" inputmode="decimal" id="quantita" name="quantita" value="{{ i.quantita }}" placeholder="Es. 24">
                    {% if errors.quantita %}<p class="mt-1 text-sm text-red-600">{{ errors.quantita }}</p>{% endif %}
                </div>
                <div class="field">
                    <label class="label" for="unita">Unità <span class="text-stone-400">(opzionale)</span></label>
                    <select class="select" id="unita" name="unita" x-model="unita">
                        <option value="">—</option>
                        <option value="piante">piante</option>
                        <option value="kg">kg</option>
                        <option value="numero">numero</option>
                        <option value="litri">litri</option>
                    </select>
                    {% if errors.unita %}<p class="mt-1 text-sm text-red-600">{{ errors.unita }}</p>{% endif %}
                </div>
            </div>

            <div class="field">
                <label class="label" for="descrizione">Note / descrizione <span class="text-stone-400">(opzionale)</span></label>
                <input class="input" id="descrizione" name="descrizione" value="{{ i.descrizione }}" maxlength="255"
                       placeholder="Es. Concime NPK al filare nord">
                {% if errors.descrizione %}<p class="mt-1 text-sm text-red-600">{{ errors.descrizione }}</p>{% endif %}
            </div>

            <div class="field">
                <label class="label" for="elemento_id">Collegato a <span class="text-stone-400">(opzionale)</span></label>
                <select class="select" id="elemento_id" name="elemento_id">
                    <option value="0">— nessuno —</option>
                    {% for e in elementi %}
                        <option value="{{ e.id }}" {{ i.elemento_id == e.id ? 'selected' : '' }}>{{ e.nome }} ({{ e.sezione_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="eseguito_da">Eseguito da</label>
                {% set eseguito_sel = i.eseguito_da ?: current_user.id %}
                <select class="select" id="eseguito_da" name="eseguito_da">
                    {% for u in utenti %}
                        <option value="{{ u.id }}" {{ eseguito_sel == u.id ? 'selected' : '' }}>{{ u.nome }} ({{ u.ruolo }})</option>
                    {% endfor %}
                </select>
                {% if errors.eseguito_da %}<p class="mt-1 text-sm text-red-600">{{ errors.eseguito_da }}</p>{% endif %}
            </div>

            <div class="field">
                <label class="label" for="foto">Foto <span class="text-stone-400">(immagini, max 8 MB ciascuna)</span></label>
                {% if is_edit and allegati is not empty %}
                    <div class="mb-2">{{ lbl.foto_thumbs(allegati, can_write ? 'mark' : false) }}</div>
                    <p class="mb-2 text-xs text-stone-400">Tocca la ✕ su una foto per segnarla; verrà rimossa al salvataggio.</p>
                {% endif %}
                {# accept=image/* + multiple senza 'capture': su mobile il browser propone sia fotocamera sia galleria. #}
                <input class="input" type="file" id="foto" name="foto[]" accept="image/*" multiple>
            </div>

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