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

{% block title %}Transactions — {{ organization.name }} — VIIZIA{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar@6.1.18/dist/css/bulma-calendar.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ asset('css/viz-calendar-compact.css') }}">
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/bulma-calendar@6.1.18/dist/js/bulma-calendar.min.js" defer></script>
    <script src="{{ asset('js/transaction-list-filters.js') }}" defer></script>
    <script src="{{ asset('js/transaction-filters-datepicker.js') }}" defer></script>
    {% if transactions is not empty %}
        <script src="{{ asset('js/viz-toast.js') }}" defer></script>
        <script src="{{ asset('js/transaction-list-classify.js') }}" defer></script>
        <script type="application/json" id="viz-txn-classify-json">
            {{
                {
                    quickCategoryUrlForZero: path('admin_transactions_quick_category', { id: 0 }),
                    listUpdateUrlForZero: path('admin_transactions_list_update', { id: 0 }),
                    tagSuggestUrl: path('admin_tags_suggest'),
                    tagCreateUrl: path('admin_tags_quick_create'),
                    tagCsrf: csrf_token('quick-create-tag'),
                }|json_encode|raw
            }}
        </script>
        <script>
            (function () {
                try {
                    const el = document.getElementById('viz-txn-classify-json');
                    if (!el) return;
                    window.VizTxnListClassify = JSON.parse(el.textContent || '{}');
                } catch (_e) {
                    window.VizTxnListClassify = null;
                }
            })();
        </script>
    {% endif %}
    {% if transactions is not empty and app.user.isSuperadmin %}
        <script src="{{ asset('js/transaction-bulk-select.js') }}" defer></script>
    {% endif %}
{% endblock %}

{% block body %}
<div class="viz-txn-toolbar mb-4">
    <div class="viz-txn-toolbar-head">
        <div class="viz-txn-toolbar-text">
            <h1 class="viz-txn-title"><i class="ti ti-list-details"></i> Transactions</h1>
            <p class="viz-txn-meta">
                {{ organization.name }}
                {% if filters.bookingDateFrom and filters.bookingDateTo %}
                    · {{ filters.bookingDateFrom|date('d/m/Y') }} au {{ filters.bookingDateTo|date('d/m/Y') }}
                {% endif %}
            </p>
        </div>
        {% include '_partials/period_tabs.html.twig' with { route_name: 'admin_transactions_index', filters: filters, show_period_calendar: true, filters_form_id: 'transaction-list-filters-form' } only %}
    </div>
</div>

{% include '_partials/transaction_filters.html.twig' with {
    form_action: path('admin_transactions_index'),
    clear_href: path('admin_transactions_index'),
    period_calendar_inline: true,
} %}

{% if transactions is empty %}
    <div class="has-text-centered viz-empty py-6">
        <span class="icon is-large has-text-grey-light"><i class="ti ti-receipt-off" style="font-size: 2.5rem;"></i></span>
        <p class="title is-5 has-text-grey mt-3 mb-2">Aucune transaction trouvée</p>
        <p class="subtitle is-7 has-text-grey">Élargissez la période (ex. « Toutes les périodes ») ou retirez des filtres.</p>
    </div>
{% else %}
    {% set txn_sort_cols = constant('App\\Dto\\Admin\\TransactionListFilters::SORT_KEYS') %}
    {% set txn_col_labels = constant('App\\Dto\\Admin\\TransactionListFilters::COLUMN_LABELS') %}
    {% if app.user.isSuperadmin %}
    <div class="viz-txn-bulk-bar mb-3 is-flex is-flex-wrap-wrap is-align-items-center" style="gap: 0.75rem;">
        <form id="viz-txn-bulk-delete-form"
              class="is-flex is-align-items-center"
              style="gap: 0.75rem;"
              method="post"
              action="{{ path('admin_transactions_bulk_delete') }}">
            <input type="hidden" name="_token" value="{{ csrf_token('transactions-bulk-delete') }}">
            <button type="submit"
                    id="viz-txn-bulk-delete-btn"
                    class="button is-danger is-light"
                    disabled>
                <span class="icon"><i class="ti ti-trash"></i></span>
                <span>Supprimer la sélection</span>
            </button>
        </form>
        <span class="is-size-7 has-text-grey">Cochez une ou plusieurs lignes, puis validez (page courante uniquement).</span>
    </div>
    {% endif %}

    <form method="post"
          action="{{ path('admin_transactions_apply_memo_suggestions') }}"
          class="notification is-light py-3 px-4 mb-3"
          style="margin-top: -0.25rem;"
          onsubmit="return confirm('Recalculer catégorie / bien / plateforme depuis les règles mémo pour les {{ transactions|length }} transaction(s) de cette page ?');">
        <input type="hidden" name="_token" value="{{ csrf_token('transactions-apply-memo') }}">
        {% for t in transactions %}
            <input type="hidden" name="ids[]" value="{{ t.id }}">
        {% endfor %}
        <div class="is-flex is-flex-wrap-wrap is-align-items-center" style="gap: 0.75rem;">
            <div class="mr-auto" style="flex: 1 1 220px;">
                <p class="is-size-6 mb-1"><strong>Appliquer les mots-clés d’import (mémo)</strong></p>
                <p class="is-size-7 has-text-grey mb-0">
                    Traite uniquement les lignes affichées sur cette page, selon les règles actuelles et le libellé de chaque transaction.
                    Utilisez la case ci‑dessous pour aussi remplacer catégorie / bien / plateforme déjà renseignés.
                </p>
            </div>
            <label class="checkbox is-size-7 mb-0">
                <input type="checkbox" name="overwrite_existing" value="1">
                Écraser les champs déjà renseignés
            </label>
            <button type="submit" class="button is-info is-light">
                <span class="icon"><i class="ti ti-search"></i></span>
                <span>Appliquer sur cette page</span>
            </button>
        </div>
    </form>
    <div class="b-table has-mobile-cards viz-txn-table">
        <div class="table-wrapper box p-0">
            <table class="table is-striped is-hoverable is-fullwidth mb-0">
                <thead>
                    <tr>
                        {% if app.user.isSuperadmin %}
                        <th class="has-text-centered viz-th-checkbox" scope="col" style="width: 2.75rem;">
                            <input type="checkbox"
                                   id="viz-txn-select-all"
                                   form="viz-txn-bulk-delete-form"
                                   title="Tout cocher / tout décocher sur cette page"
                                   aria-label="Tout cocher ou tout décocher sur cette page">
                        </th>
                        {% endif %}
                        {% for col in txn_sort_cols %}
                            {% set is_cur = filters.sort == col %}
                            {% set aria_sort = is_cur ? (filters.order == 'asc' ? 'ascending' : 'descending') : 'none' %}
                            <th class="viz-th-sort-wrap {{ is_cur ? 'is-current-sort' : '' }} {{ col == 'amount' ? 'has-text-right' : '' }} {{ col == 'label' ? 'viz-th-label' : '' }}"
                                aria-sort="{{ aria_sort }}"
                                scope="col">
                                <a href="{{ path('admin_transactions_index', filters.toggleSortParams(col)) }}"
                                   class="viz-th-sort {{ col == 'amount' ? 'is-numeric' : '' }}">
                                    <span class="viz-th-sort-label">{{ attribute(txn_col_labels, col) }}</span>
                                    {% if is_cur %}
                                        <i class="ti {{ filters.order == 'asc' ? 'ti-chevron-up' : 'ti-chevron-down' }} viz-th-sort-icon" aria-hidden="true"></i>
                                    {% endif %}
                                    <span class="viz-sr-only">{% if is_cur %} — tri {{ filters.order == 'asc' ? 'croissant' : 'décroissant' }}{% else %}, trier{% endif %}</span>
                                </a>
                            </th>
                            {% if col == 'category' %}
                            <th scope="col" class="has-text-left is-unselectable viz-th-tags">
                                <span class="viz-th-sort-label">Tags</span>
                            </th>
                            {% endif %}
                        {% endfor %}
                        <th class="has-text-right is-label-hidden viz-th-actions" aria-sort="none" scope="col"><span class="viz-sr-only">Actions</span></th>
                    </tr>
                </thead>
                <tbody>
                    {% for t in transactions %}
                        {% set ba = t.bankAccount %}
                        {% set list_meta_form_id = 'viz-list-meta-' ~ t.id %}
                        {% set label_body %}
                            {% set fullTitle = t.label|e('html_attr') %}
                            {% set listLbl = t.label|viz_txn_list_label %}
                            <span class="is-size-7"><strong class="viz-txn-label-primary" title="{{ fullTitle }}">{%- if listLbl != '' -%}{{ listLbl|viz_label }}{%- else -%}<span class="has-text-grey-light">—</span>{%- endif -%}</strong></span>
                            {% if t.reference %}
                                <br><span class="is-size-7 has-text-grey viz-txn-reference" title="{{ t.reference|e('html_attr') }}">{{ t.reference }}</span>
                            {% endif %}
                            {% if t.property or t.rentalPlatform %}
                                <br>
                                {% if t.property %}
                                    <span class="tag is-small mr-1 viz-txn-tag-truncate" title="Bien">
                                        <i class="ti ti-building-skyscraper mr-1"></i>
                                        {{ t.property.code|viz_label }}
                                    </span>
                                {% endif %}
                                {% if t.rentalPlatform %}
                                    {% set pColor = t.rentalPlatform.color ?? '#6B7280' %}
                                    <span class="tag is-small mr-1 viz-txn-tag-truncate"
                                          style="background-color: {{ pColor }}20; color: {{ pColor }};"
                                          title="Plateforme">
                                        {% if t.rentalPlatform.icon %}<i class="ti {{ t.rentalPlatform.icon }} mr-1"></i>{% endif %}
                                        {{ t.rentalPlatform.name|viz_label }}
                                    </span>
                                {% endif %}
                            {% endif %}
                            {% if t.notes %}
                                <br><span class="is-size-7 has-text-grey-light viz-txn-notes-preview" title="{{ t.notes }}">
                                    <i class="ti ti-note"></i> {{ t.notes|slice(0, 60) }}{% if t.notes|length > 60 %}…{% endif %}
                                </span>
                            {% endif %}
                        {% endset %}
                        <tr>
                            {% if app.user.isSuperadmin %}
                            <td class="has-text-centered" data-label="Sélection">
                                <input type="checkbox"
                                       class="viz-txn-row-cb"
                                       form="viz-txn-bulk-delete-form"
                                       name="ids[]"
                                       value="{{ t.id }}"
                                       aria-label="Sélectionner la transaction du {{ t.bookingDate|date('d/m/Y') }}">
                            </td>
                            {% endif %}
                            <td data-label="{{ attribute(txn_col_labels, 'date') }}">
                                <div class="viz-txn-card-value viz-txn-card-value--date">
                                    <span class="is-size-7">{{ t.bookingDate|date('d/m/Y') }}</span>
                                </div>
                            </td>
                            <td class="viz-txn-td-label" data-label="{{ attribute(txn_col_labels, 'label') }}">
                                <div class="viz-txn-card-value viz-txn-label-cell">{{ label_body }}</div>
                            </td>
                            <td data-label="{{ attribute(txn_col_labels, 'account') }}">
                                <div class="viz-txn-card-value viz-txn-card-value--account">
                                    <span class="is-size-7"><strong>{{ ba.label }}</strong></span>
                                </div>
                            </td>
                            <td data-label="{{ attribute(txn_col_labels, 'category') }}" class="viz-txn-td-category">
                                <form id="{{ list_meta_form_id }}"
                                      class="viz-sr-only"
                                      method="post"
                                      action="{{ path('admin_transactions_list_update', { id: t.id }) }}"
                                      aria-hidden="true"
                                      tabindex="-1">
                                    <input type="hidden" name="_token"
                                           value="{{ csrf_token('list-update-transaction-' ~ t.id) }}">
                                </form>
                                <div class="field has-addons mb-0 viz-txn-category-addons">
                                    <div class="control is-expanded">
                                        <label class="viz-sr-only" for="txn-list-cat-{{ t.id }}">Catégorie</label>
                                        <div class="select is-small is-fullwidth{% if t.category %}{% if t.direction.value == 'out' %} viz-select-pdf-category-expense{% else %} viz-select-suggested{% endif %}{% endif %}">
                                            <select id="txn-list-cat-{{ t.id }}"
                                                    name="category_id"
                                                    form="{{ list_meta_form_id }}"
                                                    class="viz-txn-list-cat-select"
                                                    data-txn-direction="{{ t.direction.value }}"
                                                    title="Catégorie">
                                                <option value="">— Aucune —</option>
                                                {% if categories is not empty %}
                                                    <optgroup label="Dépenses" data-kind="expense">
                                                        {% for c in categories %}
                                                            {% if c.kind.value == 'expense' %}
                                                                <option value="{{ c.id }}" {{ t.category and (c.id ~ '') == (t.category.id ~ '') ? 'selected' : '' }}>
                                                                    {{ c.name|viz_label }}
                                                                </option>
                                                            {% endif %}
                                                        {% endfor %}
                                                    </optgroup>
                                                    <optgroup label="Recettes" data-kind="income">
                                                        {% for c in categories %}
                                                            {% if c.kind.value == 'income' %}
                                                                <option value="{{ c.id }}" {{ t.category and (c.id ~ '') == (t.category.id ~ '') ? 'selected' : '' }}>
                                                                    {{ c.name|viz_label }}
                                                                </option>
                                                            {% endif %}
                                                        {% endfor %}
                                                    </optgroup>
                                                    <optgroup label="Virements internes" data-kind="transfer">
                                                        {% for c in categories %}
                                                            {% if c.kind.value == 'transfer' %}
                                                                <option value="{{ c.id }}" {{ t.category and (c.id ~ '') == (t.category.id ~ '') ? 'selected' : '' }}>
                                                                    {{ c.name|viz_label }}
                                                                </option>
                                                            {% endif %}
                                                        {% endfor %}
                                                    </optgroup>
                                                {% endif %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="control">
                                        <button type="button"
                                                class="button is-small viz-txn-quick-cat-trigger"
                                                data-txn-id="{{ t.id }}"
                                                data-select-id="txn-list-cat-{{ t.id }}"
                                                data-csrf="{{ csrf_token('quick-category-transaction-' ~ t.id) }}"
                                                title="Nouvelle catégorie"
                                                aria-label="Nouvelle catégorie">
                                            <span class="icon is-small"><i class="ti ti-plus"></i></span>
                                        </button>
                                    </div>
                                </div>
                            </td>
                            <td data-label="Tags" class="viz-txn-td-tags">
                                <label class="viz-sr-only" for="txn-list-tags-{{ t.id }}">Tags</label>
                                <div class="viz-txn-tags-editor field mb-2" data-form-id="{{ list_meta_form_id }}" data-txn-tags-for="{{ t.id }}">
                                    <div class="viz-txn-tag-chips mb-2">
                                        {% for link in t.tagLinks %}
                                            {% set tid = link.tag.id %}
                                            <span class="tag is-info is-light mr-1 mb-1 viz-txn-tag-chip" data-tag-id="{{ tid }}" data-tag-name="{{ link.tag.name|e('html_attr') }}">
                                                <span>{{ link.tag.name|viz_label }}</span>
                                                <button type="button" class="delete is-small" aria-label="Retirer le tag"></button>
                                            </span>
                                            <input type="hidden" class="viz-txn-tag-hidden" name="tags[]" form="{{ list_meta_form_id }}" value="{{ tid }}">
                                        {% endfor %}
                                    </div>
                                    <div class="field has-addons mb-0">
                                        <div class="control is-expanded" style="position: relative;">
                                            <input id="txn-list-tags-{{ t.id }}"
                                                   type="text"
                                                   class="input is-small viz-txn-tag-typeahead"
                                                   maxlength="50"
                                                   autocomplete="off"
                                                   placeholder="Taper un tag, Entrée pour valider"
                                                   title="Suggestions pendant la saisie ; Entrée crée le tag s’il n’existe pas">
                                            <div class="viz-txn-tag-suggestions is-hidden" role="listbox" aria-label="Suggestions de tags"></div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="has-text-right" data-label="{{ attribute(txn_col_labels, 'amount') }}">
                                <div class="viz-txn-card-value viz-txn-card-value--amount">
                                    <span class="viz-amount {{ t.direction.value == 'out' ? 'viz-amount-debit' : 'viz-amount-credit' }}">
                                        {{ t.direction.value == 'out' ? '−' : '+' }}{{ t.amount|money(t.currency, ba.currencyMinorUnits) }}
                                    </span>
                                </div>
                            </td>
                            <td class="has-text-right is-actions-cell viz-td-actions" data-label="Actions">
                                <div class="viz-txn-card-value viz-txn-card-value--actions">
                                    <div class="buttons are-small is-right">
                                        <a href="{{ path('admin_transactions_edit', {'id': t.id}) }}"
                                           class="button is-light" title="Modifier">
                                            <span class="icon"><i class="ti ti-pencil"></i></span>
                                        </a>
                                        <form method="post"
                                              action="{{ path('admin_transactions_delete', {'id': t.id}) }}"
                                              onsubmit="return confirm('Supprimer cette transaction ?');"
                                              style="display: inline;">
                                            <input type="hidden" name="_token"
                                                   value="{{ csrf_token('delete-transaction-' ~ t.id) }}">
                                            <button type="submit" class="button is-danger is-light" title="Supprimer">
                                                <span class="icon"><i class="ti ti-trash"></i></span>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
                <tfoot>
                    <tr class="viz-txn-page-total-row">
                        <td colspan="{{ app.user.isSuperadmin ? 6 : 5 }}" class="has-text-right has-text-weight-semibold is-size-7 has-text-grey py-3">
                            Total page courante
                        </td>
                        <td class="has-text-right py-3" data-label="Total page">
                            {% if page_amount_mixed_currency %}
                                <span class="is-size-7 has-text-grey" title="Plusieurs devises sur cette page">—</span>
                            {% else %}
                                <span class="viz-amount {{ page_signed_total_cents < 0 ? 'viz-amount-debit' : 'viz-amount-credit' }}">
                                    {{ page_signed_total_cents < 0 ? '−' : '+' }}{{ page_signed_total_cents|abs|money(page_amount_currency, page_amount_minor_units) }}
                                </span>
                            {% endif %}
                        </td>
                        <td class="py-3"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    {% set range_from = total > 0 ? ((page - 1) * per_page) + 1 : 0 %}
    {% set range_to = total > 0 ? min(page * per_page, total) : 0 %}

    <div class="viz-pagination-bar" role="region" aria-label="Pagination">

        <div class="viz-pagination-bar-left">
            <div class="viz-per-page-segmented" role="group" aria-label="Nombre d’éléments par page">
                {% for n in per_page_choices %}
                    {% if filters.perPage == n %}
                        <span class="viz-per-page-seg is-current" aria-current="true">{{ n }}</span>
                    {% else %}
                        <a href="{{ path('admin_transactions_index', filters.toQueryParams(1, null, null, n)) }}"
                           class="viz-per-page-seg">{{ n }}</a>
                    {% endif %}
                {% endfor %}
            </div>
            <span class="viz-per-page-caption">Éléments par page</span>
        </div>

        <div class="viz-pagination-bar-right">
            {% if total > 0 %}
                <span class="viz-pagination-range">{{ range_from }}–{{ range_to }} sur {{ total }}</span>
            {% endif %}
            <div class="viz-pagination-arrow-group" role="navigation" aria-label="Pages">
                {% if page_count > 1 and page > 1 %}
                    <a class="viz-pagination-arrow" rel="prev" title="Page précédente"
                       aria-label="Page précédente"
                       href="{{ path('admin_transactions_index', filters.toQueryParams(page - 1)) }}">&#8249;</a>
                {% else %}
                    <span class="viz-pagination-arrow is-disabled" aria-disabled="true" title="Première page">&#8249;</span>
                {% endif %}
                {% if page_count > 1 and page < page_count %}
                    <a class="viz-pagination-arrow" rel="next" title="Page suivante"
                       aria-label="Page suivante"
                       href="{{ path('admin_transactions_index', filters.toQueryParams(page + 1)) }}">&#8250;</a>
                {% else %}
                    <span class="viz-pagination-arrow is-disabled" aria-disabled="true"
                          title="{{ page_count <= 1 ? 'Une seule page' : 'Dernière page' }}">&#8250;</span>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="modal" id="viz-quick-category-modal" aria-labelledby="viz-quick-category-title">
        <div class="modal-background viz-quick-cat-close" tabindex="-1"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title" id="viz-quick-category-title">
                    Nouvelle catégorie — <span id="viz-quick-category-txn-badge" class="has-text-grey is-size-6"></span>
                </p>
                <button type="button" class="delete viz-quick-cat-close" aria-label="close"></button>
            </header>
            <section class="modal-card-body">
                <p class="help mb-3">Le type (recette / dépense) suit le sens du montant de la ligne sélectionnée.</p>
                <div class="field">
                    <label class="label" for="viz-quick-category-name">Nom</label>
                    <input id="viz-quick-category-name" type="text" class="input" maxlength="100" autocomplete="off" placeholder="Ex. Abonnements">
                </div>
                <div id="viz-quick-category-error" class="notification is-danger is-light is-hidden py-2 px-3 is-size-7"></div>
            </section>
            <footer class="modal-card-foot">
                <button type="button" id="viz-quick-category-confirm" class="button is-primary">Créer et enregistrer</button>
                <button type="button" class="button viz-quick-cat-close">Annuler</button>
            </footer>
        </div>
    </div>
{% endif %}

{% endblock %}