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

{% block page_title %}Mes ventes{% endblock %}

{% block content %}
<div class="px-4 py-6 max-w-7xl mx-auto">
    <div class="mb-6 flex items-center justify-between">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Mes ventes</h1>
        <a href="{{ path('employer_pos_reports_dashboard') }}" class="text-sm text-teal-600 hover:text-teal-700">&larr; Retour aux rapports</a>
    </div>

    {# Filtres #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-6">
        <form method="GET" class="flex flex-wrap gap-3 items-end">
            <div>
                <label class="block text-xs text-gray-500 mb-1">Du</label>
                <input type="date" name="dateFrom" value="{{ filters.dateFrom }}" class="border border-gray-300 dark:border-gray-600 rounded-lg py-2 px-3 text-sm dark:bg-gray-700 dark:text-white">
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Au</label>
                <input type="date" name="dateTo" value="{{ filters.dateTo }}" class="border border-gray-300 dark:border-gray-600 rounded-lg py-2 px-3 text-sm dark:bg-gray-700 dark:text-white">
            </div>
            <button type="submit" class="px-4 py-2 bg-teal-600 text-white text-sm rounded-lg hover:bg-teal-700">Filtrer</button>
        </form>
    </div>

    {# Table ventes #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm text-left">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th class="px-4 py-3">N° Vente</th>
                        <th class="px-4 py-3">Date</th>
                        <th class="px-4 py-3 text-center">Articles</th>
                        <th class="px-4 py-3 text-right">Total</th>
                        <th class="px-4 py-3 text-center">Statut</th>
                        <th class="px-4 py-3">Client</th>
                    </tr>
                </thead>
                <tbody>
                    {% for sale in sales %}
                        {% set statusColors = { 'completed': 'green', 'voided': 'red', 'refunded': 'gray', 'partial_refund': 'yellow' } %}
                        {% set statusLabels = { 'completed': 'Complétée', 'voided': 'Annulée', 'refunded': 'Remboursée', 'partial_refund': 'Remb. partiel' } %}
                        <tr class="border-b dark:border-gray-700">
                            <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ sale.saleNumber }}</td>
                            <td class="px-4 py-3 text-gray-500">{{ sale.createdAt|date('d/m/Y H:i') }}</td>
                            <td class="px-4 py-3 text-center">{{ sale.itemsCount }}</td>
                            <td class="px-4 py-3 text-right font-semibold text-emerald-600">{{ sale.total|number_format(0, ',', ' ') }} FCFA</td>
                            <td class="px-4 py-3 text-center">
                                <span class="px-2 py-1 text-xs rounded-full bg-{{ statusColors[sale.status]|default('gray') }}-100 text-{{ statusColors[sale.status]|default('gray') }}-800">
                                    {{ statusLabels[sale.status]|default(sale.status) }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-gray-500">{{ sale.customer ? sale.customer.fullName : '—' }}</td>
                        </tr>
                    {% else %}
                        <tr><td colspan="6" class="px-4 py-8 text-center text-gray-500">Aucune vente trouvée</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% if sales.getTotalItemCount > sales.getItemNumberPerPage %}
            <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700">
                {{ knp_pagination_render(sales) }}
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}