{#
    Page "Toutes les opérations SSA" d'un adhérent pour une caisse SSA donnée.

    Variables attendues :
      - pagination  : SlidingPagination (KnpPaginator) sur un tableau d'entrées normalisées
      - ssa         : SolidoumeParameter — la caisse SSA concernée
      - searchForm  : FormView — filtre par moyen et par dates

    Chaque entrée du tableau paginé est un tableau associatif avec les clés :
      - date         (\DateTime)  : date de l'opération
      - montant      (float)      : montant signé (négatif = débit, positif = crédit)
      - currency     (string)     : 'emlc' ou 'euro'
      - typeKey      (string)     : clé de traduction (domaine 'flux'), ex. 'exp_cotisation_ssa'
      - moyen        (string|null): moyen de paiement
      - contrepartie (string)     : nom de la caisse SSA (toujours le même sur cette page)
      - reference    (string|null): référence du flux
      - fluxObject   (Flux)       : objet Flux sous-jacent (pour getPaymentReceiptUrlFromFlux)

    Deux types d'entrées sont mélangés dans le même tableau trié par date :
      1. Opérations eMLc du compte SSA (prélèvements, redistributions, cotisations eMLc)
      2. Cotisations SSA réglées en euros (CB, HelloAsso, SEPA…)

    Affichage des détails :
      Chaque ligne de données est suivie d'une ligne de détail (colspan=4) qui contient le
      collapse Bootstrap. Cela évite tout décalage de colonnes lors de l'ouverture du détail.
#}
{% extends '@kohinos/common/layout.html.twig' %}

{% block content %}
<style>
    {# Rotation du caret quand le détail est ouvert #}
    [data-bs-toggle="collapse"][aria-expanded="true"] .fa-caret-down {
        transform: rotate(180deg);
        transition: transform 0.2s ease;
    }
    [data-bs-toggle="collapse"] .fa-caret-down {
        transition: transform 0.2s ease;
    }
</style>
<div class='container operations mt-5 mb-5'>
    {% include '@kohinos/block/breadcrumb.html.twig' with {'label': ssa.name ~ ' : Toutes les opérations'} %}
    <div class='card'>
        <div class="card-header">
            <h3>
                <i class="fa fa-list-alt me-2"></i>
                {{ ssa.name }} — {{ 'Toutes les opérations SSA'|trans }}
            </h3>
        </div>
        <div class="card-body">
            <div class="card-text">
                {{ form_start(searchForm, {'attr': {'id': 'formListOperations'}}) }}
                {{ form_row(searchForm._token) }}
                <div class='container row'>
                    <div class='col-4'>{{ form_row(searchForm.moyen) }}</div>
                    <div class='col-4'>{{ form_row(searchForm.datemin) }}</div>
                    <div class='col-4'>{{ form_row(searchForm.datemax) }}</div>
                    <div class='col-12 text-right'>{{ form_row(searchForm.submit) }}</div>
                </div>

                {% if pagination|length > 0 %}
                    <div class="table-responsive">
                        <table class="table align-middle">
                            <thead>
                                <tr>
                                    <th scope="col">{{ 'Date'|trans }}</th>
                                    <th scope="col">{{ 'Type'|trans }}</th>
                                    <th scope="col">{{ 'Opération'|trans }}</th>
                                    <th scope="col" class="text-right">{{ 'Montant'|trans }}</th>
                                </tr>
                            </thead>
                            <tbody>
                            {% for entry in pagination %}
                                {# ── Ligne de données ──────────────────────────────────────────── #}
                                <tr>
                                    {# Date avec tooltip heure complète au survol #}
                                    <td>
                                        <span data-toggle="tooltip" data-placement="bottom"
                                              title="{{ entry.date|date('d/m/Y H:i') }}">
                                            {{ entry.date|date('d/m/Y') }}
                                        </span>
                                    </td>

                                    {# Type d'opération — traduit, sans collapse #}
                                    <td>{{ entry.typeKey|trans({}, 'flux') }}</td>

                                    {# Contrepartie avec déclencheur du collapse de détail #}
                                    <td>
                                        <span style="cursor:pointer;"
                                              data-bs-toggle="collapse"
                                              data-bs-target="#ssaDetail-{{ loop.index }}"
                                              aria-expanded="false"
                                              aria-controls="ssaDetail-{{ loop.index }}">
                                            {{ entry.contrepartie }}
                                            <i class="fa fa-caret-down ms-1" aria-hidden="true"></i>
                                        </span>
                                    </td>

                                    {# Montant : débit en noir, crédit en bleu #}
                                    <td class="text-right">
                                        <span class="font-weight-bold {{ entry.montant >= 0 ? 'text-primary' : '' }}">
                                            {{ entry.montant < 0 ? '- ' : '+ ' }}{{ entry.montant|abs|number_format(2) }} {{ getCurrencyName(entry.currency) }}
                                        </span>
                                    </td>
                                </tr>

                                {# ── Ligne de détail (colspan=4) ───────────────────────────────── #}
                                {# Le collapse est sur un <div> à l'intérieur du <td>, pas sur le <tr>
                                   ni à l'intérieur d'un <td> de la ligne principale. Ainsi aucune
                                   colonne n'est redimensionnée lors de l'ouverture. #}
                                <tr>
                                    <td colspan="4" class="p-0 border-0">
                                        <div class="collapse" id="ssaDetail-{{ loop.index }}">
                                            <div class="px-3 py-2 bg-light border-top small text-muted">
                                                <strong>{{ 'Référence'|trans }} :</strong>
                                                {{ entry.reference }}
                                                &nbsp;&nbsp;·&nbsp;&nbsp;
                                                <strong>{{ 'Moyen'|trans }} :</strong>
                                                {{ entry.moyen|trans }}
                                                {% if entry.moyen == constant('App\\Enum\\MoyenEnum::MOYEN_HELLOASSO') %}
                                                    {% set urlTicket = getPaymentReceiptUrlFromFlux(entry.fluxObject) %}
                                                    {% if urlTicket is not empty %}
                                                        &nbsp;&nbsp;·&nbsp;&nbsp;
                                                        <a href="{{ urlTicket }}" target="_blank">
                                                            <i class="fa fa-external-link me-1" aria-hidden="true"></i>{{ 'Ticket CB'|trans }}
                                                        </a>
                                                    {% endif %}
                                                {% endif %}
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <div class="kohpagination">
                        {{ knp_pagination_render(pagination) }}
                    </div>
                {% else %}
                    <div class='my-2 mx-2'>
                        {{ 'Aucune opération SSA pour le moment !'|trans }}
                    </div>
                {% endif %}

                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}