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

{% block page_title %}Rapport Produits{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg shadow-lg p-6 text-white">
        <div class="flex items-center justify-between flex-wrap gap-4">
            <div>
                <h1 class="text-3xl font-bold"><i class="fas fa-star mr-3"></i>Rapport Produits</h1>
                <p class="mt-2 text-purple-100">Performance des produits — {{ from|date('d/m/Y') }} au {{ to|date('d/m/Y') }}</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ path('manager_pos_export_products_csv') }}"
                   class="inline-flex items-center px-4 py-2 bg-white/20 text-white rounded-lg text-sm hover:bg-white/30 transition-colors">
                    <i class="fas fa-file-csv mr-2"></i>CSV
                </a>
                <a href="{{ path('manager_pos_reports_dashboard') }}" class="inline-flex items-center px-4 py-2 bg-white/20 text-white rounded-lg text-sm hover:bg-white/30 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Tableau de bord
                </a>
            </div>
        </div>
    </div>

    {# Date filter #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
        <form method="get" action="{{ path('manager_pos_reports_products') }}" class="flex items-end gap-4 flex-wrap">
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Du</label>
                <input type="date" name="from" value="{{ from }}" class="rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:ring-purple-500 focus:border-purple-500">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Au</label>
                <input type="date" name="to" value="{{ to }}" class="rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:ring-purple-500 focus:border-purple-500">
            </div>
            <button type="submit" class="inline-flex items-center px-4 py-2 bg-purple-600 text-white rounded-lg text-sm font-medium hover:bg-purple-700">
                <i class="fas fa-filter mr-2"></i>Appliquer
            </button>
        </form>
    </div>

    {# KPIs #}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <div class="text-xs text-gray-500 uppercase">Produits actifs</div>
            <div class="text-3xl font-bold text-gray-900 dark:text-white mt-1">{{ report.productStats.total|default(0) }}</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <div class="text-xs text-gray-500 uppercase">Services</div>
            <div class="text-3xl font-bold text-blue-600 mt-1">{{ report.productStats.services|default(0) }}</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <div class="text-xs text-gray-500 uppercase">Valeur stock</div>
            <div class="text-2xl font-bold text-purple-600 mt-1">{{ report.stockValuation.totalValue|default('0')|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <div class="text-xs text-gray-500 uppercase">Produits vendus</div>
            <div class="text-3xl font-bold text-green-600 mt-1">{{ report.topProducts|length }}</div>
        </div>
    </div>

    {# Top Products Table #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
        <div class="p-4 border-b border-gray-200 dark:border-gray-700">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white"><i class="fas fa-ranking-star mr-2 text-yellow-500"></i>Classement des produits par ventes</h2>
        </div>
        {% if report.topProducts|length > 0 %}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-12">#</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Produit</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">SKU</th>
                            <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Quantité vendue</th>
                            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Chiffre d'affaires</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                        {% for product in report.topProducts %}
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                <td class="px-4 py-3 text-center">
                                    {% if loop.index <= 3 %}
                                        <span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold {{ loop.index == 1 ? 'bg-yellow-100 text-yellow-800' : (loop.index == 2 ? 'bg-gray-100 text-gray-600' : 'bg-orange-100 text-orange-800') }}">
                                            {{ loop.index }}
                                        </span>
                                    {% else %}
                                        <span class="text-sm text-gray-400">{{ loop.index }}</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ product.productName }}</td>
                                <td class="px-4 py-3 text-sm text-gray-500">{{ product.productSku }}</td>
                                <td class="px-4 py-3 text-center text-sm font-bold">{{ product.totalQty }}</td>
                                <td class="px-4 py-3 text-right text-sm font-bold text-green-600">{{ product.totalRevenue|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="p-12 text-center text-gray-500">
                <i class="fas fa-chart-bar text-4xl text-gray-300 mb-3"></i>
                <p>Aucune vente sur cette période.</p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}