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

{% block page_title %}Rapport Financier{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="bg-gradient-to-r from-yellow-600 to-amber-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-coins mr-3"></i>Rapport Financier</h1>
                <p class="mt-2 text-yellow-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_financial_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_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_financial') }}" 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-amber-500 focus:border-amber-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-amber-500 focus:border-amber-500">
            </div>
            <button type="submit" class="inline-flex items-center px-4 py-2 bg-amber-600 text-white rounded-lg text-sm font-medium hover:bg-amber-700">
                <i class="fas fa-filter mr-2"></i>Appliquer
            </button>
        </form>
    </div>

    {# Financial KPIs #}
    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
        <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.totalRevenue|default('0')|number_format(0, ',', ' ') }}</div>
            <div class="text-xs text-gray-500">{{ settings.currencySymbol }} — {{ report.periodTotals.count }} ventes</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.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</div>
            <div class="text-3xl font-bold text-orange-600 mt-1">{{ report.totalDiscount|default('0')|number_format(0, ',', ' ') }}</div>
            <div class="text-xs text-gray-500">{{ settings.currencySymbol }}</div>
        </div>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <div class="text-xs text-gray-500 uppercase">Total encaissé</div>
            <div class="text-2xl font-bold text-green-600 mt-1">{{ report.periodTotals.totalPaid|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">Crédit en cours</div>
            <div class="text-2xl font-bold text-red-600 mt-1">{{ report.periodTotals.totalCredit|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">Total dette clients</div>
            <div class="text-2xl font-bold text-red-600 mt-1">{{ report.customerStats.totalDebt|default('0')|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</div>
            <div class="text-xs text-gray-500">{{ report.customerStats.withDebt|default(0) }} débiteur{{ report.customerStats.withDebt|default(0) > 1 ? 's' : '' }}</div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {# Payment Methods #}
        <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>Répartition des paiements</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-4 flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fas {{ method == 'cash' ? 'fa-money-bill text-green-500' : (method == 'mobile_money' ? 'fa-mobile-alt text-blue-500' : (method == 'card' ? 'fa-credit-card text-purple-500' : 'fa-exchange-alt text-gray-500')) }} mr-3 text-lg"></i>
                                <span class="text-sm font-medium text-gray-900 dark:text-white capitalize">{{ method|replace({'_': ' '}) }}</span>
                            </div>
                            <div class="text-right">
                                <div class="text-lg font-bold text-gray-900 dark:text-white">{{ 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 sur cette période</div>
            {% endif %}
        </div>

        {# Top revenue products #}
        <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 10 produits (CA)</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 p in report.topProducts %}
                                <tr>
                                    <td class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-white">{{ p.productName }}</td>
                                    <td class="px-4 py-2 text-center text-sm">{{ p.totalQty }}</td>
                                    <td class="px-4 py-2 text-right text-sm font-bold text-green-600">{{ p.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>
</div>
{% endblock %}