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

{% block page_title %}POS — {{ company.name }}{% endblock %}

{% block content %}
<div class="px-4 py-6 max-w-7xl mx-auto">
    <div class="mb-6 flex items-center justify-between">
        <div>
            <a href="{{ path('admin_pos_companies') }}" class="text-sm text-blue-600 hover:text-blue-700">&larr; Companies POS</a>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ company.name }}</h1>
        </div>
        <span class="px-3 py-1 text-sm rounded-full {{ settings.isPosEnabled ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
            POS {{ settings.isPosEnabled ? 'Actif' : 'Inactif' }}
        </span>
    </div>

    {# KPIs #}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <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-2xl font-bold text-gray-900 dark:text-white">{{ stats.todaySales.count|default(0) }}</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">{{ stats.todaySales.totalAmount|default(0)|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">CA du mois</p>
            <p class="text-2xl font-bold text-emerald-600">{{ stats.monthlySales.totalAmount|default(0)|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">Produits</p>
            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ stats.productStats.total|default(0) }}</p>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        {# Config POS #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Configuration</h2>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between"><span class="text-gray-500">Boutique</span><span class="font-medium">{{ settings.effectiveShopName }}</span></div>
                <div class="flex justify-between"><span class="text-gray-500">Devise</span><span class="font-medium">{{ settings.currencySymbol }}</span></div>
                <div class="flex justify-between"><span class="text-gray-500">TVA</span><span class="font-medium">{{ settings.taxRate }}%</span></div>
                <div class="flex justify-between"><span class="text-gray-500">TVA incluse</span><span class="font-medium">{{ settings.isTaxIncluded ? 'Oui' : 'Non' }}</span></div>
                <div class="flex justify-between"><span class="text-gray-500">Client requis</span><span class="font-medium">{{ settings.requireCustomer ? 'Oui' : 'Non' }}</span></div>
                <div class="flex justify-between"><span class="text-gray-500">Fidélité</span><span class="font-medium">{{ settings.enableLoyalty ? 'Activé' : 'Désactivé' }}</span></div>
            </div>
        </div>

        {# Top produits #}
        {% if stats.topProducts|default([])|length > 0 %}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Top produits du jour</h2>
            <div class="space-y-2">
                {% for item in stats.topProducts|slice(0, 5) %}
                    <div class="flex items-center justify-between text-sm">
                        <div class="flex items-center gap-2">
                            <span class="text-gray-400 font-bold w-5">{{ loop.index }}</span>
                            <span class="text-gray-900 dark:text-white">{{ item.productName|default('—') }}</span>
                        </div>
                        <span class="font-semibold text-emerald-600">{{ item.totalAmount|default(0)|number_format(0, ',', ' ') }}</span>
                    </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        {# Stock #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Stock</h2>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between"><span class="text-gray-500">Valeur totale</span><span class="font-semibold">{{ stats.stockStats.totalValue|default(0)|number_format(0, ',', ' ') }} FCFA</span></div>
                <div class="flex justify-between"><span class="text-gray-500">Ruptures</span><span class="font-semibold text-red-500">{{ stats.stockStats.outOfStock|default(0) }}</span></div>
                <div class="flex justify-between"><span class="text-gray-500">Stock bas</span><span class="font-semibold text-orange-500">{{ stats.stockStats.lowStock|default(0) }}</span></div>
            </div>
        </div>

        {# Clients #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Clients</h2>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between"><span class="text-gray-500">Total clients</span><span class="font-semibold">{{ stats.customerStats.total|default(0) }}</span></div>
                <div class="flex justify-between"><span class="text-gray-500">Débiteurs</span><span class="font-semibold text-red-500">{{ stats.customerStats.debtors|default(0) }}</span></div>
                <div class="flex justify-between"><span class="text-gray-500">Dette totale</span><span class="font-semibold text-red-500">{{ stats.customerStats.totalDebt|default(0)|number_format(0, ',', ' ') }} FCFA</span></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}