{# Filtres liste transactions / TDB : comptes + catégories / biens / plateformes + tags.

   Variables : form_action, clear_href, filters, page, all_bank_accounts,
   categories, tags_list, filter_properties, filter_rental_platforms,
   show_property_filter, show_platform_filter

   period_calendar_inline (défaut false) :
   Si true — preset + date_from/date_to + bulma-calendar sont dans _partials/period_tabs (+ period_calendar_fields)
   reliés au formulaire via attribut HTML « form ». Sinon uniquement inputs hidden preset/dates dans ce formulaire.
#}
{% set selAccountId = filters.bankAccountIds|length == 1 ? filters.bankAccountIds|first : null %}
{% set has_multi_selection = filters.categoryIds is not empty
    or filters.propertyIds is not empty
    or filters.rentalPlatformIds is not empty %}

<form method="get"
      action="{{ form_action }}"
      class="viz-filters-zone mb-5"
      data-controller="transaction-list-filters"
      id="transaction-list-filters-form">
    <input type="hidden" name="page" value="{{ page }}" data-transaction-list-page-input>
    <input type="hidden" name="per_page" value="{{ filters.perPage }}">
    <input type="hidden" name="sort" value="{{ filters.sort }}">
    <input type="hidden" name="order" value="{{ filters.order }}">

    {% set period_calendar_inline = period_calendar_inline|default(false) %}

    {% if not period_calendar_inline %}
        {% if filters.periodSelect == 'all' %}
            <input type="hidden" name="preset" value="all">
        {% elseif filters.periodSelect in ['this_month', 'last_month', '3months', 'year', 'last_year', '7d'] %}
            <input type="hidden" name="preset" value="{{ filters.periodSelect }}">
        {% else %}
            <input type="hidden" name="preset" value="custom">
            {% if filters.bookingDateFrom %}
                <input type="hidden" name="date_from" value="{{ filters.bookingDateFrom|date('Y-m-d') }}">
            {% endif %}
            {% if filters.bookingDateTo %}
                <input type="hidden" name="date_to" value="{{ filters.bookingDateTo|date('Y-m-d') }}">
            {% endif %}
        {% endif %}
    {% endif %}

    <div class="viz-filters-row viz-filters-row--multi-pickers">
        <div class="viz-filter-group">
            <span class="viz-filter-label" id="lbl-acc">Compte</span>
            <select class="viz-filter-select viz-filter-select-account" name="accounts[]" id="tlf-account" aria-labelledby="lbl-acc">
                <option value="">Tous les comptes</option>
                {% for ba in all_bank_accounts %}
                    <option value="{{ ba.id }}"
                        {{ selAccountId is not null and (ba.id ~ '') == selAccountId ? 'selected' : '' }}>
                        {{ ba.label }}
                    </option>
                {% endfor %}
            </select>
        </div>

        <div class="viz-filter-group">
            <span class="viz-filter-label" id="lbl-multi-cat">Catégories</span>
            {% if categories is empty %}
                <span class="is-size-7 has-text-grey">—</span>
            {% else %}
                <select class="viz-filter-select viz-multi-add" id="tlf-add-category" data-viz-multi-add="categories" aria-labelledby="lbl-multi-cat">
                    <option value="">Ajouter une catégorie…</option>
                    {% for c in categories %}
                        <option value="{{ c.id }}" {{ (c.id ~ '') in filters.categoryIds ? 'disabled' : '' }}>{{ c.name|viz_label }}</option>
                    {% endfor %}
                </select>
            {% endif %}
        </div>

        {% if show_property_filter %}
            <div class="viz-filter-group">
                <span class="viz-filter-label" id="lbl-multi-prop">Biens immobiliers</span>
                <select class="viz-filter-select viz-multi-add" id="tlf-add-property" data-viz-multi-add="properties" aria-labelledby="lbl-multi-prop">
                    <option value="">Ajouter un bien…</option>
                    {% for prop in filter_properties %}
                        <option value="{{ prop.id }}" {{ (prop.id ~ '') in filters.propertyIds ? 'disabled' : '' }}>{{ prop.displayName }}</option>
                    {% endfor %}
                </select>
            </div>
        {% endif %}

        {% if show_platform_filter %}
            <div class="viz-filter-group">
                <span class="viz-filter-label" id="lbl-multi-plat">Plateformes</span>
                <select class="viz-filter-select viz-multi-add" id="tlf-add-platform" data-viz-multi-add="rental_platforms" aria-labelledby="lbl-multi-plat">
                    <option value="">Ajouter une plateforme…</option>
                    {% for plat in filter_rental_platforms %}
                        <option value="{{ plat.id }}" {{ (plat.id ~ '') in filters.rentalPlatformIds ? 'disabled' : '' }}>{{ plat.name|viz_label }}</option>
                    {% endfor %}
                </select>
            </div>
        {% endif %}
    </div>

    <div class="viz-filter-hidden-inputs" data-viz-hiddens="categories" hidden>
        {% for cid in filters.categoryIds %}
            <input type="hidden" name="categories[]" value="{{ cid }}" data-id="{{ cid }}">
        {% endfor %}
    </div>
    {% if show_property_filter %}
        <div class="viz-filter-hidden-inputs" data-viz-hiddens="properties" hidden>
            {% for pid in filters.propertyIds %}
                <input type="hidden" name="properties[]" value="{{ pid }}" data-id="{{ pid }}">
            {% endfor %}
        </div>
    {% endif %}
    {% if show_platform_filter %}
        <div class="viz-filter-hidden-inputs" data-viz-hiddens="rental_platforms" hidden>
            {% for plid in filters.rentalPlatformIds %}
                <input type="hidden" name="rental_platforms[]" value="{{ plid }}" data-id="{{ plid }}">
            {% endfor %}
        </div>
    {% endif %}

    <div id="viz-multi-selection-notification"
         class="viz-multi-selection-notification"
         {% if not has_multi_selection %}hidden{% endif %}>
        <div class="viz-multi-selection-chips is-flex is-flex-wrap">
            <div class="viz-filter-chips" data-viz-chips="categories" aria-label="Catégories filtrées">
                {% for cid in filters.categoryIds %}
                    {% for c in categories %}
                        {% if (c.id ~ '') == cid %}
                            <span class="tag is-link mr-1 mb-1 viz-chip" data-viz-chip data-group="categories" data-id="{{ cid }}" data-label="{{ c.name|viz_label|e('html_attr') }}">
                                {{ c.name|viz_label }}
                                <button type="button" class="delete is-small" aria-label="Retirer {{ c.name|viz_label }}"></button>
                            </span>
                        {% endif %}
                    {% endfor %}
                {% endfor %}
            </div>
            {% if show_property_filter %}
                <div class="viz-filter-chips" data-viz-chips="properties" aria-label="Biens filtrés">
                    {% for pid in filters.propertyIds %}
                        {% for prop in filter_properties %}
                            {% if (prop.id ~ '') == pid %}
                                <span class="tag is-success mr-1 mb-1 viz-chip" data-viz-chip data-group="properties" data-id="{{ pid }}" data-label="{{ prop.displayName|e('html_attr') }}">
                                    {{ prop.displayName }}
                                    <button type="button" class="delete is-small" aria-label="Retirer {{ prop.displayName }}"></button>
                                </span>
                            {% endif %}
                        {% endfor %}
                    {% endfor %}
                </div>
            {% endif %}
            {% if show_platform_filter %}
                <div class="viz-filter-chips" data-viz-chips="rental_platforms" aria-label="Plateformes filtrées">
                    {% for plid in filters.rentalPlatformIds %}
                        {% for plat in filter_rental_platforms %}
                            {% if (plat.id ~ '') == plid %}
                                <span class="tag is-info mr-1 mb-1 viz-chip" data-viz-chip data-group="rental_platforms" data-id="{{ plid }}" data-label="{{ plat.name|viz_label|e('html_attr') }}">
                                    {{ plat.name|viz_label }}
                                    <button type="button" class="delete is-small" aria-label="Retirer {{ plat.name|viz_label }}"></button>
                                </span>
                            {% endif %}
                        {% endfor %}
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>

    <div class="viz-filters-row viz-filters-row--tags">
        <div class="viz-tag-filters">
            {% if tags_list is not empty %}
                <span class="viz-filter-label">Tags</span>
                {% for tag in tags_list %}
                    {% set tagColor = tag.color ?? '#6B7280' %}
                    <label class="viz-tag-pill"
                           style="--viz-tag: {{ tagColor }}; --viz-tag-bg: {{ tagColor }}26;">
                        <input type="checkbox"
                               name="tags[]"
                               value="{{ tag.id }}"
                               class="viz-tag-pill-input"
                               {{ (tag.id ~ '') in filters.tagIds ? 'checked' : '' }}>
                        <span>{{ tag.name|viz_label }}</span>
                    </label>
                {% endfor %}
                <label class="viz-sr-only" for="txn-tags-match">Tags : mode ET / OU</label>
                <select name="tags_match"
                        id="txn-tags-match"
                        class="viz-filter-select viz-filter-select-tags-mode"
                        title="Plusieurs tags cochés : correspondance">
                    <option value="or" {{ filters.tagsMatchMode != 'and' ? 'selected' : '' }}>OU</option>
                    <option value="and" {{ filters.tagsMatchMode == 'and' ? 'selected' : '' }}>ET</option>
                </select>
            {% endif %}
        </div>
        <div class="viz-active-filters-tail">
            <a href="{{ clear_href }}" class="viz-clear-all">Tout effacer</a>
        </div>
    </div>
</form>