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

{% block page_title %}Stock{% endblock %}

{% block content %}
<div class="px-4 py-6 max-w-7xl mx-auto">
    {# Header #}
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
            <svg class="w-7 h-7 inline mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
            Stock
        </h1>
    </div>

    {# Stats cards #}
    <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">Total produits</p>
            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ stats.totalProducts }}</p>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <p class="text-sm text-gray-500">Stock bas</p>
            <p class="text-2xl font-bold text-orange-500">{{ stats.lowStock }}</p>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <p class="text-sm text-gray-500">Stock critique</p>
            <p class="text-2xl font-bold text-red-500">{{ stats.criticalStock }}</p>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <p class="text-sm text-gray-500">Rupture</p>
            <p class="text-2xl font-bold text-gray-500">{{ stats.outOfStock }}</p>
        </div>
    </div>

    {# Filtres #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-6">
        <form method="GET" class="flex flex-wrap gap-3 items-end">
            <div class="flex-1 min-w-[200px]">
                <input type="text" name="search" value="{{ filters.search }}" placeholder="Rechercher..." class="w-full border border-gray-300 dark:border-gray-600 rounded-lg py-2 px-3 text-sm dark:bg-gray-700 dark:text-white">
            </div>
            <div>
                <select name="stockStatus" class="border border-gray-300 dark:border-gray-600 rounded-lg py-2 px-3 text-sm dark:bg-gray-700 dark:text-white">
                    <option value="">Tous les niveaux</option>
                    <option value="ok" {{ filters.stockStatus == 'ok' ? 'selected' : '' }}>En stock</option>
                    <option value="low" {{ filters.stockStatus == 'low' ? 'selected' : '' }}>Stock bas</option>
                    <option value="critical" {{ filters.stockStatus == 'critical' ? 'selected' : '' }}>Critique</option>
                    <option value="out" {{ filters.stockStatus == 'out' ? 'selected' : '' }}>Rupture</option>
                </select>
            </div>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700">Filtrer</button>
        </form>
    </div>

    {# Table produits #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm text-left">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th class="px-4 py-3">Produit</th>
                        <th class="px-4 py-3">SKU</th>
                        <th class="px-4 py-3 text-center">Stock actuel</th>
                        <th class="px-4 py-3 text-center">Stock min</th>
                        <th class="px-4 py-3 text-center">Statut</th>
                    </tr>
                </thead>
                <tbody>
                    {% for product in products %}
                        {% set stockStatus = product.getStockStatus() %}
                        {% set statusColors = { 'ok': 'green', 'low': 'orange', 'critical': 'red', 'out': 'gray', 'service': 'purple' } %}
                        <tr class="border-b dark:border-gray-700">
                            <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ product.name }}</td>
                            <td class="px-4 py-3 text-gray-500">{{ product.sku }}</td>
                            <td class="px-4 py-3 text-center font-semibold">
                                {% if product.isService %}
                                    <span class="text-purple-500">Service</span>
                                {% else %}
                                    {{ product.currentStock }}
                                {% endif %}
                            </td>
                            <td class="px-4 py-3 text-center text-gray-500">{{ product.minStock|default('-') }}</td>
                            <td class="px-4 py-3 text-center">
                                <span class="px-2 py-1 text-xs rounded-full bg-{{ statusColors[stockStatus] }}-100 text-{{ statusColors[stockStatus] }}-800">
                                    {% if stockStatus == 'ok' %}OK{% elseif stockStatus == 'low' %}Bas{% elseif stockStatus == 'critical' %}Critique{% elseif stockStatus == 'out' %}Rupture{% else %}Service{% endif %}
                                </span>
                            </td>
                        </tr>
                    {% else %}
                        <tr><td colspan="5" class="px-4 py-8 text-center text-gray-500">Aucun produit trouvé</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% if products.getTotalItemCount > products.getItemNumberPerPage %}
            <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700">
                {{ knp_pagination_render(products) }}
            </div>
        {% endif %}
    </div>

    {# Liens rapides #}
    <div class="mt-4 flex gap-3">
        <a href="{{ path('employer_pos_stock_movements') }}" class="text-sm text-blue-600 hover:text-blue-700 font-medium">Voir les mouvements &rarr;</a>
        <a href="{{ path('employer_pos_stock_alerts') }}" class="text-sm text-red-600 hover:text-red-700 font-medium">Voir les alertes &rarr;</a>
    </div>
</div>
{% endblock %}