{% import '_form_macros.html.twig' as f %}

{{ form_start(form, {attr: {
    'data-controller': 'expense-form collection',
    'novalidate': 'novalidate',
    'class': 'rounded-2xl bg-surface border border-line p-5'
}}) }}
{{ f.errors_summary(form) }}

{{ f.section("L'essentiel") }}
<div class="grid gap-4 sm:grid-cols-2 mt-3">
    {{ f.field(form.description, 2) }}
    {{ f.field(form.totalAmount) }}
    {{ f.field(form.date) }}
    {{ f.field(form.paidBy) }}
</div>

{{ f.section('Rattachement', 'Devis concerné, intervenant et source de financement.') }}
<div class="grid gap-4 sm:grid-cols-2 mt-3">
    {{ f.field(form.quote, 2) }}
    {{ f.field(form.company) }}
    {{ f.field(form.financing) }}
</div>

<div class="mt-5">
    {{ f.toggle(form.advancedMode) }}
</div>

{# Advanced section #}
<div data-expense-form-target="advanced" class="mt-4 {{ form.advancedMode.vars.data ? '' : 'hidden' }}">
    <div class="rounded-xl border border-line bg-surface-2/40 p-4 space-y-3">
        <div class="grid gap-4 sm:grid-cols-2">
            {{ f.field(form.paidAmount) }}
        </div>

        <div>
            <label class="block text-sm font-medium mb-1">{{ form.allocations.vars.label }}</label>
            <p class="form-help mb-2">Répartir le montant total entre un ou plusieurs devis.</p>
            <div data-collection-target="rows"
                 data-collection-prototype-value="{{ form_widget(form.allocations.vars.prototype)|e('html_attr') }}">
                {% for v in form.allocations %}
                    <div class="flex gap-2 items-start mb-2" data-ventilation-row>
                        <div class="flex-1 grid gap-2 sm:grid-cols-2">
                            {{ form_widget(v) }}
                        </div>
                        <button type="button" data-action="collection#remove" class="text-danger px-2 pt-2 shrink-0" aria-label="Supprimer">✕</button>
                    </div>
                {% endfor %}
            </div>
            <button type="button" data-action="collection#add" class="text-sm text-accent mt-1">+ Ajouter une ligne</button>
            {{ form_errors(form.allocations, {attr: {class: 'form-error'}}) }}
        </div>
        {% do form.allocations.setRendered() %}
    </div>
</div>

<details class="text-sm group mt-5">
    <summary class="text-muted cursor-pointer select-none flex items-center gap-1.5">
        <i class="ti ti-chevron-right text-xs transition-transform group-open:rotate-90"></i>
        Plus d'options
    </summary>
    <div class="grid gap-4 sm:grid-cols-2 mt-3">
        {{ f.field(form.dueDate) }}
        {{ f.field(form.attachmentFile) }}
        <div class="sm:col-span-2">{{ f.toggle(form.terrain) }}</div>
        {{ f.field(form.category) }}
        {{ f.field(form.notes, 2) }}
    </div>
</details>

{{ f.actions(path('app_expense_index')) }}
{{ form_end(form) }}