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

{% block page_title %}Rapport Ventes{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="bg-gradient-to-r from-teal-600 to-cyan-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-chart-bar mr-3"></i>Rapport Ventes</h1>
                <p class="mt-2 text-teal-100">Du {{ from|date('d/m/Y') }} au {{ to|date('d/m/Y') }}</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ path('manager_pos_export_sales_report_pdf', {from: from, to: to}) }}" target="_blank"
                   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-pdf mr-2"></i>PDF
                </a>
                <a href="{{ path('manager_pos_export_sales_csv', {from: from, to: to}) }}"
                   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_sales') }}" 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-teal-500 focus:border-teal-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-teal-500 focus:border-teal-500">
            </div>
            <button type="submit" class="inline-flex items-center px-4 py-2 bg-teal-600 text-white rounded-lg text-sm font-medium hover:bg-teal-700">
                <i class="fas fa-filter mr-2"></i>Appliquer
            </button>
        </form>
    </div>

    {# Period totals #}
    <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">Nombre de ventes</div>
            <div class="text-3xl font-bold text-gray-900 dark:text-white mt-1">{{ report.periodTotals.count }}</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <div class="text-xs text-gray-500 uppercase">Chiffre d'affaires</div>
            <div class="text-3xl font-bold text-green-600 mt-1">{{ report.periodTotals.totalAmount|default('0')|number_format(0, ',', ' ') }}</div>
            <div class="text-xs text-gray-500">{{ 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">TVA collectée</div>
            <div class="text-3xl font-bold text-blue-600 mt-1">{{ report.periodTotals.totalTax|default('0')|number_format(0, ',', ' ') }}</div>
            <div class="text-xs text-gray-500">{{ 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">Remises accordées</div>
            <div class="text-3xl font-bold text-orange-600 mt-1">{{ report.periodTotals.totalDiscount|default('0')|number_format(0, ',', ' ') }}</div>
            <div class="text-xs text-gray-500">{{ settings.currencySymbol }}</div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {# Daily breakdown #}
        <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-calendar-day mr-2 text-teal-600"></i>Ventes par jour</h2>
            </div>
            <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-left text-xs font-medium text-gray-500 uppercase">Date</th>
                            <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Ventes</th>
                            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">CA</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                        {% for day in report.dailyStats %}
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                <td class="px-4 py-2 text-sm">{{ day.dateLabel }}</td>
                                <td class="px-4 py-2 text-center text-sm font-medium">{{ day.count }}</td>
                                <td class="px-4 py-2 text-right text-sm font-bold {{ day.totalAmount|default(0) > 0 ? 'text-green-600' : 'text-gray-400' }}">{{ day.totalAmount|default('0')|number_format(0, ',', ' ') }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        {# Top Products + Payment Methods #}
        <div class="space-y-6">
            <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-trophy mr-2 text-yellow-500"></i>Top produits</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-left text-xs font-medium text-gray-500 uppercase">Produit</th>
                                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Qté</th>
                                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">CA</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                                {% for product in report.topProducts|slice(0, 10) %}
                                    <tr>
                                        <td class="px-4 py-2 text-sm">
                                            <div class="font-medium text-gray-900 dark:text-white">{{ product.productName }}</div>
                                            <div class="text-xs text-gray-500">{{ product.productSku }}</div>
                                        </td>
                                        <td class="px-4 py-2 text-center text-sm font-bold">{{ product.totalQty }}</td>
                                        <td class="px-4 py-2 text-right text-sm font-medium text-green-600">{{ product.totalRevenue|number_format(0, ',', ' ') }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="p-8 text-center text-gray-500 text-sm">Aucune donnée</div>
                {% endif %}
            </div>

            <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-credit-card mr-2 text-indigo-500"></i>Modes de paiement</h2>
                </div>
                {% if report.paymentMethods|length > 0 %}
                    <div class="divide-y divide-gray-200 dark:divide-gray-700">
                        {% for method, data in report.paymentMethods %}
                            <div class="px-4 py-3 flex items-center justify-between">
                                <span class="text-sm font-medium text-gray-900 dark:text-white capitalize">{{ method|replace({'_': ' '}) }}</span>
                                <div class="text-right">
                                    <div class="text-sm font-bold">{{ data.totalAmount|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</div>
                                    <div class="text-xs text-gray-500">{{ data.count }} paiement{{ data.count > 1 ? 's' : '' }}</div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="p-8 text-center text-gray-500 text-sm">Aucun paiement</div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}