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

{% block title %}{{ is_edit ? 'Modifica' : 'Nuova' }} spesa · {{ app_name }}{% endblock %}

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

        <form method="post" action="{{ action }}" class="card mt-4" enctype="multipart/form-data">
            {{ csrf_field() }}

            <div class="grid gap-4 sm:grid-cols-2">
                <div class="field">
                    <label class="label" for="categoria_id">Categoria</label>
                    <select class="select" id="categoria_id" name="categoria_id">
                        <option value="0">— seleziona —</option>
                        {% for c in categorie %}
                            <option value="{{ c.id }}" {{ s.categoria_id == c.id ? 'selected' : '' }}>{{ c.nome }}</option>
                        {% endfor %}
                    </select>
                    {% if errors.categoria_id %}<p class="mt-1 text-sm text-red-600">{{ errors.categoria_id }}</p>{% endif %}
                </div>
                <div class="field">
                    <label class="label" for="sezione_id">Sezione <span class="text-stone-400">(opzionale)</span></label>
                    <select class="select" id="sezione_id" name="sezione_id">
                        <option value="0">— generale —</option>
                        {% for se in sezioni %}
                            <option value="{{ se.id }}" {{ s.sezione_id == se.id ? 'selected' : '' }}>{{ se.nome }}</option>
                        {% endfor %}
                    </select>
                    {% if errors.sezione_id %}<p class="mt-1 text-sm text-red-600">{{ errors.sezione_id }}</p>{% endif %}
                </div>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <div class="field">
                    <label class="label" for="data">Data</label>
                    <input class="input" type="date" id="data" name="data" value="{{ s.data }}" required>
                    {% if errors.data %}<p class="mt-1 text-sm text-red-600">{{ errors.data }}</p>{% endif %}
                </div>
                <div class="field">
                    <label class="label" for="importo">Importo €</label>
                    <input class="input" type="text" inputmode="decimal" id="importo" name="importo" value="{{ s.importo }}" required placeholder="Es. 25.50">
                    {% if errors.importo %}<p class="mt-1 text-sm text-red-600">{{ errors.importo }}</p>{% endif %}
                </div>
            </div>

            <div class="field">
                <label class="label" for="descrizione">Descrizione</label>
                <input class="input" id="descrizione" name="descrizione" value="{{ s.descrizione }}" required maxlength="255" autofocus>
                {% if errors.descrizione %}<p class="mt-1 text-sm text-red-600">{{ errors.descrizione }}</p>{% endif %}
            </div>

            <div class="field">
                <label class="label" for="fornitore">Fornitore <span class="text-stone-400">(opzionale)</span></label>
                <input class="input" id="fornitore" name="fornitore" value="{{ s.fornitore }}" maxlength="255">
            </div>

            <div class="field">
                <label class="label" for="link">Link <span class="text-stone-400">(opzionale)</span></label>
                <input class="input" type="url" id="link" name="link" value="{{ s.link }}" placeholder="https://…">
                {% if errors.link %}<p class="mt-1 text-sm text-red-600">{{ errors.link }}</p>{% endif %}
            </div>

            <div class="field">
                <label class="label" for="allegato">Allegato <span class="text-stone-400">(PDF o immagine, max 8 MB)</span></label>
                {% if is_edit and s.allegato %}
                    <p class="mb-1 text-sm">
                        Attuale: <a href="{{ url('/spese/' ~ s.id ~ '/allegato') }}" target="_blank" rel="noopener noreferrer">apri ↗</a>
                        <label class="check-row ml-3"><input type="checkbox" name="rimuovi_allegato" value="1"> <span class="text-sm">rimuovi</span></label>
                    </p>
                {% endif %}
                <input class="input" type="file" id="allegato" name="allegato" accept=".pdf,image/*">
                {% if errors.allegato %}<p class="mt-1 text-sm text-red-600">{{ errors.allegato }}</p>{% endif %}
            </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="2">{{ s.note }}</textarea>
            </div>

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