{% extends 'wfbo/_layout.html.twig' %}

{% block title %}{{ expense ? 'Edit' : 'New' }} Expense — WFBO{% endblock %}

{% block wfbo_title %}{{ expense ? 'Edit' : 'New' }} Expense{% endblock %}

{% block wfbo_content %}

    {% set errorFlashes = app.flashes('error') %}
    {% if errorFlashes %}
        <div class="alert alert-danger mb-4" role="alert" data-testid="flash-error">
            {% for flash in errorFlashes %}
                <div>{{ flash }}</div>
            {% endfor %}
        </div>
    {% endif %}

    <div class="mb-4">
        <a href="{{ path('app_wfbo_expenses') }}" class="back-link">
            ← Back to Expenses
        </a>
    </div>

    <div class="card" style="max-width: 560px;">
        <div class="card-body">

            <h2 class="wfbo-card-title mb-3">
                {{ expense ? 'Edit' : 'New' }} Expense
            </h2>

            <form method="POST"
                  action="{{ expense ? path('app_wfbo_expense_edit', {id: expense.id}) : path('app_wfbo_expense_new') }}"
                  data-testid="expense-form"
                  data-turbo="false"
                  enctype="multipart/form-data"
                  novalidate>
                <input type="hidden" name="_token"
                       value="{{ csrf_token(expense ? 'wfbo_expense_edit_' ~ expense.id : 'wfbo_expense_new') }}">

                <div class="mb-3">
                    <label class="form-label--sm">
                        Date <span class="text-danger">*</span>
                    </label>
                    <input type="date"
                           name="expense_date"
                           class="form-control"
                           style="max-width: 240px;"
                           value="{{ submitted.expenseDate }}"
                           data-testid="input-expense-date">
                </div>

                <div class="mb-3">
                    <label class="form-label--sm">
                        Description <span class="text-danger">*</span>
                    </label>
                    <textarea name="description"
                              class="form-control"
                              style="max-width: 400px;"
                              rows="2"
                              placeholder="e.g. Office supplies — printer ink"
                              data-testid="input-description">{{ submitted.description }}</textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label--sm">
                        Amount <span class="text-danger">*</span>
                    </label>
                    <input type="number"
                           name="amount"
                           step="0.01"
                           min="0"
                           class="form-control"
                           style="max-width: 200px;"
                           value="{{ submitted.amount }}"
                           data-testid="input-amount">
                </div>

                <div class="mb-4">
                    <label class="form-label--sm">
                        Receipt
                    </label>
                    {% if expense and expense.attachmentUrl %}
                        <div class="mb-2">
                            <a href="{{ expense.attachmentUrl }}" target="_blank" rel="noopener" class="back-link"
                               data-testid="current-receipt-link">View current receipt</a>
                        </div>
                    {% endif %}
                    <input type="file"
                           name="attachment"
                           accept="image/*,application/pdf"
                           class="form-control"
                           style="max-width: 400px;"
                           data-testid="input-attachment">
                    <p class="form-hint">
                        Optional — an image or PDF, max 10&nbsp;MB.
                        {% if expense and expense.attachmentUrl %}Upload a new file to replace the current one.{% endif %}
                    </p>
                </div>

                <div class="d-flex align-items-center gap-3">
                    <button type="submit"
                            class="btn btn-admin-save"
                            data-testid="btn-submit-expense">
                        {{ expense ? 'Update' : 'Save' }} Expense
                    </button>
                    <a href="{{ path('app_wfbo_expenses') }}" class="back-link">
                        Cancel
                    </a>
                </div>

            </form>

        </div>
    </div>

{% endblock %}