{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}Paiements{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900">Paiements d'abonnement</h1>
    <p class="mt-2 text-sm text-gray-700">
        Enregistrez les règlements reçus des boutiques. Chaque paiement prolonge la licence de la durée couverte.
        {% if filterCompany %}
            <span class="ml-1 inline-flex items-center rounded-full bg-teal-100 px-2.5 py-0.5 text-xs font-medium text-teal-800">Filtré : {{ filterCompany.name }}</span>
            <a href="{{ path('admin_payments') }}" class="ml-2 text-xs text-teal-600 hover:underline">Tout voir</a>
        {% endif %}
    </p>
</div>

<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
    {# --- Enregistrer un paiement --- #}
    <div class="lg:col-span-1">
        <div class="rounded-lg bg-white p-6 shadow">
            <h2 class="mb-4 text-lg font-medium text-gray-900">Enregistrer un paiement</h2>
            {{ form_start(form, {'attr': {'class': 'space-y-4'}}) }}
                {{ form_row(form.company) }}
                {{ form_row(form.amount) }}
                {{ form_row(form.method) }}
                {{ form_row(form.periodMonths) }}
                {{ form_row(form.paidAt) }}
                {{ form_row(form.reference) }}
                {{ form_row(form.note) }}
                <button type="submit" class="inline-flex w-full items-center justify-center rounded-lg bg-teal-600 px-5 py-2.5 text-sm font-semibold text-white shadow hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500">
                    Enregistrer
                </button>
            {{ form_end(form) }}
        </div>
    </div>

    {# --- Historique --- #}
    <div class="lg:col-span-2">
        <div class="mb-4 flex items-center justify-between rounded-lg bg-white px-5 py-3 shadow">
            <span class="text-sm text-gray-500">Total encaissé{{ filterCompany ? ' (' ~ filterCompany.name ~ ')' : '' }}</span>
            <span class="text-xl font-bold text-teal-700">{{ (total / 100)|number_format(0, ',', ' ') }} FCFA</span>
        </div>

        {% if payments is empty %}
            <div class="rounded-lg border border-dashed border-gray-300 bg-white p-12 text-center text-gray-500">
                Aucun paiement enregistré pour le moment.
            </div>
        {% else %}
            <div class="overflow-hidden rounded-lg bg-white shadow">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 text-sm">
                        <thead class="bg-gray-50 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
                            <tr>
                                <th class="px-4 py-3">Date</th>
                                <th class="px-4 py-3">Boutique</th>
                                <th class="px-4 py-3">Montant</th>
                                <th class="px-4 py-3">Moyen</th>
                                <th class="px-4 py-3">Durée</th>
                                <th class="px-4 py-3">Couvre jusqu'au</th>
                                <th class="px-4 py-3">Référence</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            {% for p in payments %}
                                <tr>
                                    <td class="px-4 py-3 text-gray-600">{{ p.paidAt ? p.paidAt|date('d/m/Y') : '—' }}</td>
                                    <td class="px-4 py-3">
                                        <a href="{{ path('admin_payments', {company: p.company.id}) }}" class="font-medium text-gray-900 hover:text-teal-700">{{ p.company.name }}</a>
                                    </td>
                                    <td class="px-4 py-3 font-semibold text-gray-900">{{ (p.amountCents / 100)|number_format(0, ',', ' ') }} FCFA</td>
                                    <td class="px-4 py-3 text-gray-600">{{ p.methodLabel }}</td>
                                    <td class="px-4 py-3 text-gray-600">{{ p.periodMonths }} mois</td>
                                    <td class="px-4 py-3 text-gray-600">{{ p.coversUntil ? p.coversUntil|date('d/m/Y') : '—' }}</td>
                                    <td class="px-4 py-3 text-gray-500">
                                        {{ p.reference ?: '—' }}
                                        {% if p.note %}<span class="block text-xs text-gray-400">{{ p.note }}</span>{% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}