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

{% block page_title %}Produits POS{% endblock %}

{% block content %}
<div class="space-y-4 sm:space-y-6">
    {# Header #}
    <div class="bg-gradient-to-r from-emerald-600 to-teal-600 rounded-lg shadow-lg p-4 sm:p-6 text-white">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4">
            <div>
                <h1 class="text-2xl sm:text-3xl font-bold"><i class="fas fa-box mr-2 sm:mr-3"></i>Produits</h1>
                <p class="mt-1 sm:mt-2 text-emerald-100 text-sm sm:text-base">Catalogue de {{ company.name }}</p>
            </div>
            <div class="flex flex-wrap gap-2">
                <div class="inline-flex rounded-md shadow-sm" role="group">
                    <a href="{{ path('manager_pos_products_index', filters|merge({view: 'table'})) }}"
                       class="px-3 py-2 text-sm font-medium {{ viewMode == 'table' ? 'bg-white text-emerald-700' : 'bg-white/20 text-white hover:bg-white/30' }} rounded-l-lg transition-colors">
                        <i class="fas fa-table"></i>
                    </a>
                    <a href="{{ path('manager_pos_products_index', filters|merge({view: 'grid'})) }}"
                       class="px-3 py-2 text-sm font-medium {{ viewMode == 'grid' ? 'bg-white text-emerald-700' : 'bg-white/20 text-white hover:bg-white/30' }} rounded-r-lg transition-colors">
                        <i class="fas fa-th-large"></i>
                    </a>
                </div>
                <a href="{{ path('manager_pos_products_import') }}"
                   class="inline-flex items-center px-3 py-2 bg-white/20 text-white rounded-lg font-medium text-sm hover:bg-white/30 transition-colors">
                    <i class="fas fa-file-import mr-2"></i><span class="hidden sm:inline">Import CSV</span><span class="sm:hidden">Import</span>
                </a>
                <a href="{{ path('manager_pos_products_create') }}"
                   class="inline-flex items-center px-3 py-2 bg-white text-emerald-700 rounded-lg font-medium text-sm hover:bg-emerald-50 transition-colors">
                    <i class="fas fa-plus mr-2"></i><span class="hidden sm:inline">Nouveau produit</span><span class="sm:hidden">Nouveau</span>
                </a>
            </div>
        </div>
    </div>

    {# Stats #}
    <div class="grid grid-cols-3 sm:grid-cols-5 gap-2 sm:gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-3 sm:p-4 text-center">
            <div class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">{{ statistics.total|default(0) }}</div>
            <div class="text-[10px] sm:text-xs text-gray-500 dark:text-gray-400">Total</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-3 sm:p-4 text-center">
            <div class="text-xl sm:text-2xl font-bold text-green-600">{{ statistics.active|default(0) }}</div>
            <div class="text-[10px] sm:text-xs text-gray-500 dark:text-gray-400">Actifs</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-3 sm:p-4 text-center">
            <div class="text-xl sm:text-2xl font-bold text-red-600">{{ statistics.outOfStock|default(0) }}</div>
            <div class="text-[10px] sm:text-xs text-gray-500 dark:text-gray-400">Rupture</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-3 sm:p-4 text-center hidden sm:block">
            <div class="text-xl sm:text-2xl font-bold text-orange-600">{{ statistics.lowStock|default(0) }}</div>
            <div class="text-[10px] sm:text-xs text-gray-500 dark:text-gray-400">Stock bas</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-3 sm:p-4 text-center hidden sm:block">
            <div class="text-xl sm:text-2xl font-bold text-purple-600">{{ statistics.services|default(0) }}</div>
            <div class="text-[10px] sm:text-xs text-gray-500 dark:text-gray-400">Services</div>
        </div>
    </div>

    {# Filtres #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-3 sm:p-4">
        <form method="get" action="{{ path('manager_pos_products_index') }}" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
            <input type="hidden" name="view" value="{{ viewMode }}">
            <div>
                <input type="text" name="search" value="{{ filters.search|default('') }}" placeholder="Rechercher (nom, SKU, code-barres)..."
                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:ring-emerald-500 focus:border-emerald-500">
            </div>
            <div>
                <select name="categoryId" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:ring-emerald-500 focus:border-emerald-500">
                    <option value="">Toutes les categories</option>
                    {% for cat in categories %}
                        <option value="{{ cat.id }}" {{ filters.categoryId|default('') == cat.id ? 'selected' : '' }}>{% for i in range(1, cat.depth) %}— {% endfor %}{{ cat.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <select name="stockStatus" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:ring-emerald-500 focus:border-emerald-500">
                    <option value="">Tout le stock</option>
                    <option value="ok" {{ filters.stockStatus|default('') == 'ok' ? 'selected' : '' }}>En stock</option>
                    <option value="low" {{ filters.stockStatus|default('') == 'low' ? 'selected' : '' }}>Stock bas</option>
                    <option value="critical" {{ filters.stockStatus|default('') == 'critical' ? 'selected' : '' }}>Critique</option>
                    <option value="out" {{ filters.stockStatus|default('') == 'out' ? 'selected' : '' }}>Rupture</option>
                </select>
            </div>
            <div class="flex gap-2">
                <button type="submit" class="flex-1 sm:flex-none inline-flex items-center justify-center px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 transition-colors">
                    <i class="fas fa-search mr-2"></i>Filtrer
                </button>
                <a href="{{ path('manager_pos_products_index') }}" class="inline-flex items-center justify-center px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-lg text-sm hover:bg-gray-300 transition-colors">
                    <i class="fas fa-times mr-1"></i>Reset
                </a>
            </div>
        </form>
    </div>

    {# Contenu #}
    {% if products|length > 0 %}
        {% if viewMode == 'grid' %}
            {# Vue Grille #}
            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4">
                {% for product in products %}
                    {% include 'manager/pos/products/_product_card.html.twig' %}
                {% endfor %}
            </div>
        {% else %}
            {# Vue Table - masquee sur mobile, remplacee par cards #}
            <div class="hidden sm:block bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
                <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 dark:text-gray-300 uppercase">Produit</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">SKU</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Categorie</th>
                                <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Prix</th>
                                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Stock</th>
                                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Statut</th>
                                <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                            {% for product in products %}
                                {% include 'manager/pos/products/_product_row.html.twig' %}
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {# Vue mobile pour le mode table - cards compactes #}
            <div class="sm:hidden space-y-3">
                {% for product in products %}
                    {% include 'manager/pos/products/_product_card.html.twig' %}
                {% endfor %}
            </div>
        {% endif %}

        <div class="flex justify-center">
            {{ knp_pagination_render(products) }}
        </div>
    {% else %}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow text-center py-12 sm:py-16 px-4">
            <i class="fas fa-box-open text-4xl sm:text-5xl text-gray-300 dark:text-gray-600"></i>
            <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">Aucun produit</h3>
            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Commencez par ajouter vos premiers produits au catalogue.</p>
            <a href="{{ path('manager_pos_products_create') }}" class="mt-4 inline-flex items-center px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700">
                <i class="fas fa-plus mr-2"></i>Creer un produit
            </a>
        </div>
    {% endif %}
</div>
{% endblock %}