{% extends 'base.html.twig' %}

{% block title %}Nouvelle transaction — {{ bank_account.label }} — VIIZIA{% endblock %}

{% block body %}
{% from 'admin/organization/_form.html.twig' import field, select_field %}
{% set organization = bank_account.organization %}

<nav class="breadcrumb is-small" aria-label="breadcrumbs">
    <ul>
        <li><a href="{{ path('admin_organizations_index') }}">Organisations</a></li>
        <li><a href="{{ path('admin_organizations_edit', {'id': organization.id, '_fragment': 'comptes'}) }}">{{ organization.name }}</a></li>
        <li><a href="{{ path('admin_bank_accounts_edit', {'id': bank_account.id}) }}">{{ bank_account.label }}</a></li>
        <li class="is-active"><a href="#" aria-current="page">Nouvelle transaction</a></li>
    </ul>
</nav>

<div class="level">
    <div class="level-left">
        <div>
            <p class="title is-4">
                <span class="icon-text">
                    <span class="icon"><i class="ti ti-receipt-2"></i></span>
                    <span>Nouvelle transaction</span>
                </span>
            </p>
            <p class="subtitle is-6 has-text-grey">
                Compte : <strong>{{ bank_account.label }}</strong> · {{ bank_account.bankName }}
            </p>
        </div>
    </div>
</div>

{{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}

    {% if form.vars.errors|length > 0 %}
        <div class="notification is-danger is-light">
            <span class="icon"><i class="ti ti-alert-circle"></i></span>
            <strong>Le formulaire contient des erreurs :</strong>
            <ul class="mt-2">
                {% for error in form.vars.errors %}<li>{{ error.message }}</li>{% endfor %}
            </ul>
        </div>
    {% endif %}

    <div class="box">
        <h3 class="title is-5">
            <span class="icon-text">
                <span class="icon"><i class="ti ti-info-circle"></i></span>
                <span>Opération</span>
            </span>
        </h3>

        <div class="columns">
            <div class="column is-half">{{ field(form.bookingDate, {'icon': 'calendar', 'type': 'date'}) }}</div>
            <div class="column is-half">{{ field(form.valueDate, {'icon': 'calendar', 'type': 'date'}) }}</div>
        </div>

        {{ field(form.label) }}

        <div class="field">
            <label class="label">{{ form.direction.vars.label }}</label>
            <div class="control">
                {% for child in form.direction %}
                    <label class="radio mr-4">
                        {{ form_widget(child) }}
                        {{ child.vars.label }}
                    </label>
                {% endfor %}
            </div>
        </div>

        <div class="columns">
            <div class="column is-half">{{ field(form.amount, {'icon': 'coin'}) }}</div>
            <div class="column is-half">{{ select_field(form.transactionType) }}</div>
        </div>
    </div>

    <div class="box">
        <h3 class="title is-5">
            <span class="icon-text">
                <span class="icon"><i class="ti ti-tag"></i></span>
                <span>Classement</span>
            </span>
        </h3>

        {{ select_field(form.category) }}

        <div class="columns">
            <div class="column is-half">{{ select_field(form.property) }}</div>
            <div class="column is-half">{{ select_field(form.rentalPlatform) }}</div>
        </div>

        <div class="field">
            <label class="label">{{ form.tags.vars.label }}</label>
            <div class="control">
                {% for child in form.tags %}
                    {% set tagColor = child.vars.data.color ?? '#6B7280' %}
                    <label class="checkbox mr-2 mb-2 is-inline-block"
                           style="border: 1px solid {{ tagColor }}40; padding: 4px 10px; border-radius: 6px; background-color: {{ tagColor }}10;">
                        {{ form_widget(child) }}
                        <span style="color: {{ tagColor }}; font-weight: 600;">{{ child.vars.label }}</span>
                    </label>
                {% endfor %}
            </div>
            {% if form.tags.vars.help %}<p class="help">{{ form.tags.vars.help }}</p>{% endif %}
        </div>

        {{ field(form.reference) }}
        {{ field(form.notes) }}
    </div>

    <div class="field is-grouped">
        <div class="control">
            <button type="submit" class="button is-primary">
                <span class="icon"><i class="ti ti-device-floppy"></i></span>
                <span>Ajouter la transaction</span>
            </button>
        </div>
        <div class="control">
            <a href="{{ path('admin_transactions_index', {'preset': 'all', 'sort': 'date', 'order': 'desc', 'accounts': [bank_account.id]}) }}"
               class="button is-light">Annuler</a>
        </div>
    </div>

{{ form_end(form) }}
{% endblock %}