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

{% block page_title %}POS — Dashboard Admin{% 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-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
            Point de Vente — Vue globale
        </h1>
        <div class="flex gap-2">
            <a href="{{ path('admin_pos_companies') }}" class="px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 text-gray-700 dark:text-gray-300">Companies</a>
            <a href="{{ path('admin_pos_sales') }}" class="px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 text-gray-700 dark:text-gray-300">Ventes</a>
            <a href="{{ path('admin_pos_audit') }}" class="px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 text-gray-700 dark:text-gray-300">Audit</a>
        </div>
    </div>

    {# KPIs globaux #}
    <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <p class="text-sm text-gray-500">Companies POS</p>
            <p class="text-3xl font-bold text-gray-900 dark:text-white">{{ globalStats.totalCompanies }}</p>
        </div>
        <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-3xl font-bold text-blue-600">{{ globalStats.totalSalesToday }}</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">{{ globalStats.totalRevenueToday|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-3xl font-bold text-blue-600">{{ globalStats.totalSalesMonth }}</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">{{ globalStats.totalRevenueMonth|number_format(0, ',', ' ') }} FCFA</p>
        </div>
    </div>

    {# Classement companies #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Classement par CA du jour</h2>
        </div>
        <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">#</th>
                        <th class="px-4 py-3">Entreprise</th>
                        <th class="px-4 py-3 text-center">Ventes jour</th>
                        <th class="px-4 py-3 text-right">CA jour</th>
                        <th class="px-4 py-3 text-right">CA mois</th>
                        <th class="px-4 py-3 text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for data in companiesData %}
                        <tr class="border-b dark:border-gray-700">
                            <td class="px-4 py-3 font-bold text-gray-400">
                                {% if loop.index <= 3 %}
                                    <span class="text-{{ loop.index == 1 ? 'yellow' : (loop.index == 2 ? 'gray' : 'orange') }}-500">{{ loop.index == 1 ? '🥇' : (loop.index == 2 ? '🥈' : '🥉') }}</span>
                                {% else %}
                                    {{ loop.index }}
                                {% endif %}
                            </td>
                            <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ data.company.name }}</td>
                            <td class="px-4 py-3 text-center">{{ data.todaySales }}</td>
                            <td class="px-4 py-3 text-right font-semibold text-emerald-600">{{ data.todayRevenue|number_format(0, ',', ' ') }} FCFA</td>
                            <td class="px-4 py-3 text-right text-gray-600">{{ data.monthRevenue|number_format(0, ',', ' ') }} FCFA</td>
                            <td class="px-4 py-3 text-center">
                                <a href="{{ path('admin_pos_company_detail', {id: data.company.id}) }}" class="text-blue-600 hover:text-blue-700 text-xs font-medium">Détails</a>
                            </td>
                        </tr>
                    {% else %}
                        <tr><td colspan="6" class="px-4 py-8 text-center text-gray-500">Aucune entreprise avec POS activé</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}