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

{% block page_title %}Tableau de bord POS{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="bg-gradient-to-r from-emerald-600 to-teal-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-pie mr-3"></i>Tableau de bord</h1>
                <p class="mt-2 text-emerald-100">Vue d'ensemble de l'activité POS — {{ "now"|date('d/m/Y') }}</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ path('manager_pos_reports_sales') }}" 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-chart-bar mr-2"></i>Rapport ventes
                </a>
                <a href="{{ path('manager_pos_reports_financial') }}" 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-coins mr-2"></i>Rapport financier
                </a>
            </div>
        </div>
    </div>

    {# Today's Sales 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="flex items-center justify-between">
                <div>
                    <div class="text-xs text-gray-500 uppercase font-medium">Ventes aujourd'hui</div>
                    <div class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ stats.todaySales.count }}</div>
                </div>
                <div class="w-10 h-10 bg-teal-100 dark:bg-teal-900 rounded-full flex items-center justify-center">
                    <i class="fas fa-shopping-cart text-teal-600"></i>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <div class="flex items-center justify-between">
                <div>
                    <div class="text-xs text-gray-500 uppercase font-medium">CA aujourd'hui</div>
                    <div class="text-2xl font-bold text-green-600 mt-1">{{ stats.todaySales.totalAmount|default('0')|number_format(0, ',', ' ') }}</div>
                    <div class="text-xs text-gray-500">{{ settings.currencySymbol }}</div>
                </div>
                <div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center">
                    <i class="fas fa-money-bill-wave text-green-600"></i>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <div class="flex items-center justify-between">
                <div>
                    <div class="text-xs text-gray-500 uppercase font-medium">CA ce mois</div>
                    <div class="text-2xl font-bold text-blue-600 mt-1">{{ stats.monthSales.totalAmount|default('0')|number_format(0, ',', ' ') }}</div>
                    <div class="text-xs text-gray-500">{{ settings.currencySymbol }} — {{ stats.monthSales.count }} ventes</div>
                </div>
                <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
                    <i class="fas fa-calendar-alt text-blue-600"></i>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <div class="flex items-center justify-between">
                <div>
                    <div class="text-xs text-gray-500 uppercase font-medium">Valeur stock</div>
                    <div class="text-2xl font-bold text-purple-600 mt-1">{{ stats.stockValuation.totalValue|default('0')|number_format(0, ',', ' ') }}</div>
                    <div class="text-xs text-gray-500">{{ settings.currencySymbol }} — {{ stats.stockValuation.totalUnits|default(0) }} unités</div>
                </div>
                <div class="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center">
                    <i class="fas fa-warehouse text-purple-600"></i>
                </div>
            </div>
        </div>
    </div>

    {# Secondary 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-4 text-center">
            <div class="text-xl font-bold text-gray-900 dark:text-white">{{ stats.productStats.total|default(0) }}</div>
            <div class="text-xs text-gray-500">Produits actifs</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 text-center">
            <div class="text-xl font-bold {{ stats.productStats.outOfStock|default(0) > 0 ? 'text-red-600' : 'text-green-600' }}">{{ stats.productStats.outOfStock|default(0) }}</div>
            <div class="text-xs text-gray-500">Ruptures de stock</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 text-center">
            <div class="text-xl font-bold text-pink-600">{{ stats.customerStats.total|default(0) }}</div>
            <div class="text-xs text-gray-500">Clients</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 text-center">
            <div class="text-xl font-bold {{ stats.customerStats.totalDebt|default(0) > 0 ? 'text-red-600' : 'text-green-600' }}">{{ stats.customerStats.totalDebt|default('0')|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</div>
            <div class="text-xs text-gray-500">Dettes clients</div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {# Top Products Today #}
        <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 aujourd'hui</h2>
            </div>
            {% if stats.topProductsToday|length > 0 %}
                <div class="divide-y divide-gray-200 dark:divide-gray-700">
                    {% for product in stats.topProductsToday %}
                        <div class="px-4 py-3 flex items-center justify-between">
                            <div>
                                <div class="font-medium text-gray-900 dark:text-white text-sm">{{ product.productName }}</div>
                                <div class="text-xs text-gray-500">{{ product.productSku }}</div>
                            </div>
                            <div class="text-right">
                                <div class="text-sm font-bold text-gray-900 dark:text-white">{{ product.totalQty }} vendus</div>
                                <div class="text-xs text-green-600">{{ product.totalRevenue|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="p-8 text-center text-gray-500 text-sm">Aucune vente aujourd'hui</div>
            {% endif %}
        </div>

        {# Payment Methods Today #}
        <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>Paiements aujourd'hui</h2>
            </div>
            {% if stats.paymentMethods|length > 0 %}
                <div class="divide-y divide-gray-200 dark:divide-gray-700">
                    {% for method, data in stats.paymentMethods %}
                        <div class="px-4 py-3 flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fas {{ method == 'cash' ? 'fa-money-bill' : (method == 'mobile_money' ? 'fa-mobile-alt' : (method == 'card' ? 'fa-credit-card' : 'fa-exchange-alt')) }} text-gray-400 mr-3"></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-sm 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 }} transaction{{ data.count > 1 ? 's' : '' }}</div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="p-8 text-center text-gray-500 text-sm">Aucun paiement aujourd'hui</div>
            {% endif %}
        </div>
    </div>

    {# Recent Activity #}
    <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 flex items-center justify-between">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white"><i class="fas fa-clock mr-2 text-gray-500"></i>Activite recente</h2>
            <a href="{{ path('manager_pos_audit_logs_index') }}" class="text-sm text-blue-600 hover:underline">Voir tout</a>
        </div>
        {% if recentLogs|default([])|length > 0 %}
            <div class="divide-y divide-gray-200 dark:divide-gray-700">
                {% for log in recentLogs %}
                    <div class="px-4 py-2.5 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700/50">
                        <div class="flex items-center min-w-0">
                            <span class="inline-flex items-center justify-center w-7 h-7 rounded-full mr-3 flex-shrink-0
                                {% if 'created' in log.action or 'enabled' in log.action or 'approved' in log.action or 'opened' in log.action %}
                                    bg-green-100 text-green-600
                                {% elseif 'deleted' in log.action or 'voided' in log.action or 'cancelled' in log.action or 'rejected' in log.action or 'loss' in log.action %}
                                    bg-red-100 text-red-600
                                {% elseif 'updated' in log.action or 'changed' in log.action or 'adjusted' in log.action %}
                                    bg-blue-100 text-blue-600
                                {% else %}
                                    bg-gray-100 text-gray-600
                                {% endif %}
                            ">
                                <i class="fas fa-circle text-[6px]"></i>
                            </span>
                            <div class="min-w-0">
                                <div class="text-sm text-gray-900 dark:text-white truncate">{{ log.description }}</div>
                                <div class="text-xs text-gray-500">{{ log.user.fullName|default('') }} — {{ log.createdAt|date('d/m H:i') }}</div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="p-8 text-center text-gray-500 text-sm">Aucune activite recente</div>
        {% endif %}
    </div>

    {# Quick Links #}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <a href="{{ path('manager_pos_reports_sales') }}" class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 text-center hover:shadow-md transition-shadow">
            <i class="fas fa-chart-bar text-2xl text-teal-500 mb-2"></i>
            <div class="text-sm font-medium text-gray-900 dark:text-white">Rapport ventes</div>
        </a>
        <a href="{{ path('manager_pos_reports_stock') }}" class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 text-center hover:shadow-md transition-shadow">
            <i class="fas fa-boxes text-2xl text-blue-500 mb-2"></i>
            <div class="text-sm font-medium text-gray-900 dark:text-white">Rapport stock</div>
        </a>
        <a href="{{ path('manager_pos_reports_financial') }}" class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 text-center hover:shadow-md transition-shadow">
            <i class="fas fa-coins text-2xl text-yellow-500 mb-2"></i>
            <div class="text-sm font-medium text-gray-900 dark:text-white">Rapport financier</div>
        </a>
        <a href="{{ path('manager_pos_reports_products') }}" class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 text-center hover:shadow-md transition-shadow">
            <i class="fas fa-star text-2xl text-purple-500 mb-2"></i>
            <div class="text-sm font-medium text-gray-900 dark:text-white">Rapport produits</div>
        </a>
    </div>
</div>
{% endblock %}