{% extends '@App/app.html.twig' %}

{% block title %}Paiements{% endblock %}
{% block page_header %}{% endblock %}

{% block content %}
    {% set visible_total = payments|length %}
    {% set stats = payment_stats|default({total: visible_total, pending: 0, received: 0, reconciled: 0, rejected: 0}) %}
    {% set page_size = 20 %}

    <section class="clientsphere-page billing-index"
             data-controller="commercial-client-table"
             data-commercial-client-table-page-size-value="{{ page_size }}"
             data-commercial-client-table-total-label-value="paiement{{ visible_total > 1 ? 's' : '' }}">
        <div class="clientsphere-heading">
            <div class="clientsphere-title">
                <div>
                    <h1 class="capsule-title">Paiements</h1>
                    <p>Suivez les règlements clients, leur rapprochement et les factures associées.</p>
                </div>
            </div>

            <div class="clientsphere-heading-actions">
                <a class="capsule-button capsule-button--secondary" href="{{ path('billing_invoice_index') }}">
                    <i class="ti ti-file-invoice"></i><span>Voir les factures</span>
                </a>
                <a class="capsule-button capsule-button--primary" href="{{ path('billing_payment_new') }}">
                    <i class="ti ti-plus"></i><span>Nouveau paiement</span>
                </a>
            </div>
        </div>

        <section class="data-kpis" aria-label="Indicateurs des paiements">
            {% set kpis = [
                {label: 'Paiements affichés', value: stats.total, icon: 'ti ti-cash', tone: 'indigo', trend: 'Total'},
                {label: 'Paiements reçus', value: stats.received, icon: 'ti ti-circle-arrow-down', tone: 'green', trend: 'À rapprocher'},
                {label: 'Paiements rapprochés', value: stats.reconciled, icon: 'ti ti-circle-check-filled', tone: 'violet', trend: 'Validés'},
                {label: 'En attente', value: stats.pending, icon: 'ti ti-clock', tone: 'red', trend: stats.rejected > 0 ? stats.rejected ~ ' rejeté(s)' : 'À traiter'}
            ] %}
            {% for kpi in kpis %}
                <article class="data-kpi data-kpi--{{ kpi.tone }}">
                    <span class="data-kpi__icon"><i class="{{ kpi.icon }}"></i></span>
                    <div>
                        <span>{{ kpi.label }}</span>
                        <strong>{{ kpi.value }}</strong>
                        <small>{{ kpi.trend }}</small>
                    </div>
                </article>
            {% endfor %}
        </section>

        <div class="clientsphere-grid">
            <div class="clientsphere-main">
                <nav class="billing-index-period-navigation" aria-label="Navigation par mois">
                    <a href="{{ path('billing_payment_index', navigation_query|merge({month: filters.previousMonth})) }}" aria-label="Mois précédent">
                        <i class="ti ti-chevron-left"></i>
                        <span>Mois précédent</span>
                    </a>
                    <strong><i class="ti ti-calendar-month"></i>{{ filters.periodLabel }}</strong>
                    <a href="{{ path('billing_payment_index', navigation_query|merge({month: filters.nextMonth})) }}" aria-label="Mois suivant">
                        <span>Mois suivant</span>
                        <i class="ti ti-chevron-right"></i>
                    </a>
                </nav>

                <form class="clientsphere-filter" method="get" action="{{ path('billing_payment_index') }}">
                    <label class="clientsphere-search">
                        <i class="ti ti-search"></i>
                        <input type="search"
                               name="q"
                               value="{{ filters.q }}"
                               placeholder="Rechercher une référence, un client, une facture..."
                               data-commercial-client-table-target="search"
                               data-action="input->commercial-client-table#applyFilters">
                    </label>

                    <label class="clientsphere-select">
                        <select name="method"
                                data-commercial-client-table-target="type"
                                data-action="change->commercial-client-table#applyFilters">
                            <option value="">Tous les moyens</option>
                            {% for value, label in method_labels %}
                                <option value="{{ value }}" {{ filters.method == value ? 'selected' : '' }}>{{ label }}</option>
                            {% endfor %}
                        </select>
                        <i class="ti ti-chevron-down"></i>
                    </label>

                    <label class="clientsphere-select">
                        <select name="status"
                                data-commercial-client-table-target="status"
                                data-action="change->commercial-client-table#applyFilters">
                            <option value="">Tous les statuts</option>
                            {% for value, label in status_labels %}
                                <option value="{{ value }}" {{ filters.status == value ? 'selected' : '' }}>{{ label }}</option>
                            {% endfor %}
                        </select>
                        <i class="ti ti-chevron-down"></i>
                    </label>

                    <label class="clientsphere-select billing-index-client-select">
                        <select name="client"
                                data-commercial-client-table-target="city"
                                data-action="change->commercial-client-table#applyFilters">
                            <option value="">Tous les clients</option>
                            {% for client in clients %}
                                <option value="{{ client.id }}" {{ filters.client == client.id ~ '' ? 'selected' : '' }}>{{ client.nom }}</option>
                            {% endfor %}
                        </select>
                        <i class="ti ti-chevron-down"></i>
                    </label>

                    <label class="billing-index-date"><span>Du</span><input type="date" name="dateFrom" value="{{ filters.dateFrom }}"></label>
                    <label class="billing-index-date"><span>Au</span><input type="date" name="dateTo" value="{{ filters.dateTo }}"></label>
                    <input type="hidden" name="perPage" value="{{ page_size }}" data-commercial-client-table-target="perPageInput">

                    <button class="clientsphere-btn clientsphere-btn-primary" type="submit">
                        <i class="ti ti-filter-filled"></i><span>Filtrer</span>
                    </button>
                    <a class="clientsphere-reset" href="{{ path('billing_payment_index') }}">Réinitialiser</a>
                    <p class="clientsphere-filter-note">
                        <i class="ti ti-info-circle-filled"></i>
                        Paiements de la société active : <strong>{{ company.nom|default('Société active') }}</strong>
                    </p>
                </form>

                <div class="fu-data-table clientsphere-table-card">
                    <div class="fu-data-table-toolbar clientsphere-table-toolbar">
                        <label class="clientsphere-check-label">
                            <input type="checkbox" data-commercial-client-table-target="selectAll" data-action="change->commercial-client-table#toggleAll">
                            <span><strong data-commercial-client-table-target="visibleCount">{{ visible_total }}</strong> paiement{{ visible_total > 1 ? 's' : '' }}</span>
                        </label>
                        <div class="clientsphere-table-tools">
                            <button type="button" data-action="commercial-client-table#sortByDate">
                                <i class="ti ti-arrows-sort"></i>Trier par date
                            </button>
                        </div>
                    </div>

                    <div class="fu-data-table-scroll">
                        <table class="fu-data-table-table clientsphere-table billing-index-table">
                            <thead>
                                <tr>
                                    <th class="clientsphere-col-check text-center"><input type="checkbox" data-commercial-client-table-target="selectAllMirror" data-action="change->commercial-client-table#toggleAll"></th>
                                    <th>Paiement</th>
                                    <th>Client</th>
                                    <th>Date</th>
                                    <th>Moyen</th>
                                    <th>Statut</th>
                                    <th class="billing-index-align-right">Montant</th>
                                    <th>Facture</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for payment in payments %}
                                    {% set allocation = payment.allocations|first %}
                                    {% set linked_document = allocation ? allocation.document : null %}
                                    {% set customer_name = payment.customer ? payment.customer.nom : 'Client non renseigné' %}
                                    {% set payment_reference = payment.reference ?: 'Paiement #' ~ payment.id %}
                                    {% set payment_method = payment.paymentMethod|default('') %}
                                    {% set method_label = payment_method ? method_labels[payment_method]|default(payment_method|replace({'_': ' '})|title) : 'Non renseigné' %}
                                    {% set status_tone = payment.status == 'reconciled' ? 'success' : (payment.status == 'received' ? 'info' : (payment.status == 'pending' ? 'warning' : 'danger')) %}
                                    {% set method_tone = payment_method == 'card' ? 'violet' : (payment_method == 'cash' ? 'amber' : (payment_method in ['direct_debit', 'bank_transfer'] ? 'teal' : 'slate')) %}
                                    {% set method_icon = payment_method == 'card' ? 'ti ti-credit-card' : (payment_method == 'cash' ? 'ti ti-cash' : (payment_method == 'check' ? 'ti ti-writing-sign' : 'ti ti-building-bank')) %}
                                    {% set currency = linked_document ? linked_document.currency : 'EUR' %}
                                    {% set currency_label = currency == 'EUR' ? '€' : currency %}
                                    <tr data-commercial-client-table-target="row"
                                        data-name="{{ payment_reference|lower }}"
                                        data-date="{{ payment.paymentDate ? payment.paymentDate|date('U') : 0 }}"
                                        data-type="{{ payment_method }}"
                                        data-status="{{ payment.status }}"
                                        data-city="{{ payment.customer ? payment.customer.id : '' }}"
                                        data-search="{{ (payment_reference ~ ' ' ~ customer_name ~ ' ' ~ method_label ~ ' ' ~ status_labels[payment.status]|default(payment.status) ~ ' ' ~ (linked_document ? linked_document.number : ''))|lower }}">
                                        <td class="clientsphere-col-check text-center"><input type="checkbox" data-commercial-client-table-target="rowCheckbox" data-action="change->commercial-client-table#updateSelection"></td>
                                        <td>
                                            <span class="clientsphere-client">
                                                <span class="clientsphere-type-icon is-{{ method_tone }}"><i class="{{ method_icon }}"></i></span>
                                                <span class="billing-index-document-name">
                                                    <strong>{{ payment_reference }}</strong>
                                                    <small>{{ payment.bankAccountLabel ?: 'Sans compte bancaire' }}</small>
                                                </span>
                                            </span>
                                        </td>
                                        <td>{{ customer_name }}</td>
                                        <td><span class="clientsphere-mono">{{ payment.paymentDate ? payment.paymentDate|date('d/m/Y') : '—' }}</span></td>
                                        <td><span class="clientsphere-pill is-{{ method_tone }}">{{ method_label }}</span></td>
                                        <td><span class="clientsphere-status billing-index-status is-{{ status_tone }}"><i></i>{{ status_labels[payment.status]|default(payment.status) }}</span></td>
                                        <td class="billing-index-amount">{{ payment.amount|number_format(2, ',', ' ') }} {{ currency_label }}</td>
                                        <td>
                                            {% if linked_document %}
                                                <a class="link" href="{{ path('billing_document_show', {idtoken: linked_document.idtoken}) }}">{{ linked_document.number ?: 'Brouillon' }}</a>
                                            {% else %}
                                                <span>—</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if linked_document %}
                                                <a href="{{ path('billing_document_show', {idtoken: linked_document.idtoken}) }}" class="link" aria-label="Voir la facture"><i class="ti ti-eye fs-5"></i></a>
                                            {% else %}
                                                <span>—</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                                <tr class="clientsphere-empty-row" data-commercial-client-table-target="empty" hidden>
                                    <td colspan="9">Aucun paiement ne correspond aux filtres.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="billing-index-period-summary">
                        <span>Période : <strong>{{ filters.periodLabel }}</strong></span>
                        <dl>
                            <div><dt>Reçus</dt><dd>{{ stats.received }}</dd></div>
                            <div><dt>Rapprochés</dt><dd>{{ stats.reconciled }}</dd></div>
                            <div class="is-net"><dt>Total paiements</dt><dd>{{ stats.total }}</dd></div>
                        </dl>
                    </div>

                    <div class="clientsphere-table-footer">
                        <span>Affichage de <strong data-commercial-client-table-target="range">0-0</strong> sur <strong data-commercial-client-table-target="footerCount">{{ visible_total }}</strong> paiements</span>
                        <nav class="clientsphere-pagination" aria-label="Pagination des paiements" data-commercial-client-table-target="pagination"></nav>
                        <label class="clientsphere-page-size">Par page :
                            <select data-commercial-client-table-target="pageSize" data-action="change->commercial-client-table#changePageSize">
                                {% for size in [10, 20, 50, 100] %}<option value="{{ size }}" {{ page_size == size ? 'selected' : '' }}>{{ size }}</option>{% endfor %}
                            </select>
                        </label>
                    </div>
                </div>
            </div>

            <aside class="clientsphere-aside">
                <section class="clientsphere-side-card">
                    <h2><i class="ti ti-bolt"></i>Actions rapides</h2>
                    <a href="{{ path('billing_payment_new') }}"><span class="clientsphere-type-icon is-teal"><i class="ti ti-cash"></i></span><strong>Enregistrer un paiement</strong></a>
                    <a href="{{ path('billing_invoice_index') }}"><span class="clientsphere-type-icon is-blue"><i class="ti ti-file-invoice"></i></span><strong>Consulter les factures</strong></a>
                    <a href="{{ path('billing_quote_index') }}"><span class="clientsphere-type-icon is-violet"><i class="ti ti-file-description"></i></span><strong>Consulter les devis</strong></a>
                </section>

                <section class="clientsphere-side-card clientsphere-distribution billing-index-overview">
                    <h2><i class="ti ti-chart-pie-2"></i>Vue d’ensemble</h2>
                    <div class="billing-index-side-stat"><span>En attente</span><strong>{{ stats.pending }}</strong></div>
                    <div class="billing-index-side-stat"><span>Reçus</span><strong>{{ stats.received }}</strong></div>
                    <div class="billing-index-side-stat"><span>Rapprochés</span><strong>{{ stats.reconciled }}</strong></div>
                    <div class="billing-index-side-stat"><span>Rejetés</span><strong>{{ stats.rejected }}</strong></div>
                </section>

                <section class="clientsphere-tip">
                    <h2><i class="ti ti-settings"></i>Facturation</h2>
                    <p>Configurez vos comptes bancaires et vos paramètres de facturation.</p>
                    <a href="{{ path('billing_settings') }}">Ouvrir les paramètres <i class="ti ti-arrow-right"></i></a>
                </section>
            </aside>
        </div>
    </section>
{% endblock %}