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

{% block page_title %}Rapports POS{% 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">
            <svg class="w-7 h-7 inline mr-2 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
            Rapports
        </h1>
        <a href="{{ path('employer_pos_reports_my_sales') }}" class="text-sm text-teal-600 hover:text-teal-700 font-medium">Mes ventes &rarr;</a>
    </div>

    {# KPIs du jour #}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <p class="text-sm text-gray-500">Ventes du jour</p>
            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ stats.todaySales.count|default(0) }}</p>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <p class="text-sm text-gray-500">CA du jour</p>
            <p class="text-2xl font-bold text-emerald-600">{{ stats.todaySales.totalAmount|default(0)|number_format(0, ',', ' ') }} FCFA</p>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <p class="text-sm text-gray-500">Ventes du mois</p>
            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ stats.monthlySales.count|default(0) }}</p>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <p class="text-sm text-gray-500">CA du mois</p>
            <p class="text-2xl font-bold text-emerald-600">{{ stats.monthlySales.totalAmount|default(0)|number_format(0, ',', ' ') }} FCFA</p>
        </div>
    </div>

    {# Top produits du jour #}
    {% if stats.topProducts|default([])|length > 0 %}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Top produits du jour</h2>
        <table class="w-full text-sm">
            <thead class="text-xs text-gray-500 uppercase">
                <tr>
                    <th class="text-left py-2">#</th>
                    <th class="text-left py-2">Produit</th>
                    <th class="text-center py-2">Quantité</th>
                    <th class="text-right py-2">CA</th>
                </tr>
            </thead>
            <tbody>
                {% for item in stats.topProducts|slice(0, 5) %}
                    <tr class="border-t border-gray-100 dark:border-gray-700">
                        <td class="py-2 font-bold text-gray-400">{{ loop.index }}</td>
                        <td class="py-2 font-medium text-gray-900 dark:text-white">{{ item.productName|default('—') }}</td>
                        <td class="py-2 text-center">{{ item.totalQuantity|default(0) }}</td>
                        <td class="py-2 text-right font-semibold text-emerald-600">{{ item.totalAmount|default(0)|number_format(0, ',', ' ') }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}

    {# Répartition paiements #}
    {% if stats.paymentMethods|default([])|length > 0 %}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Paiements du jour</h2>
        <div class="space-y-2">
            {% set methodLabels = { 'cash': 'Espèces', 'mobile_money': 'Mobile Money', 'card': 'Carte', 'transfer': 'Virement', 'credit': 'Crédit' } %}
            {% set methodColors = { 'cash': 'emerald', 'mobile_money': 'orange', 'card': 'blue', 'transfer': 'purple', 'credit': 'red' } %}
            {% for method in stats.paymentMethods %}
                <div class="flex items-center justify-between py-1">
                    <span class="text-sm text-gray-600 dark:text-gray-400">
                        <span class="w-3 h-3 inline-block rounded-full bg-{{ methodColors[method.method]|default('gray') }}-500 mr-2"></span>
                        {{ methodLabels[method.method]|default(method.method) }}
                    </span>
                    <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ method.totalAmount|default(0)|number_format(0, ',', ' ') }} FCFA</span>
                </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}