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

{% block page_title %}Alertes stock{% endblock %}

{% block content %}
<div class="px-4 py-6 max-w-7xl mx-auto">
    <div class="mb-6 flex items-center justify-between">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
            <svg class="w-7 h-7 inline mr-2 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
            Alertes stock
        </h1>
        <a href="{{ path('employer_pos_stock_index') }}" class="text-sm text-blue-600 hover:text-blue-700">&larr; Retour au stock</a>
    </div>

    {# Rupture de stock #}
    {% if outOfStock|length > 0 %}
    <div class="mb-6">
        <h2 class="text-lg font-semibold text-red-600 mb-3">Rupture de stock ({{ outOfStock|length }})</h2>
        <div class="bg-red-50 dark:bg-red-900/20 rounded-lg overflow-hidden">
            <table class="w-full text-sm">
                <thead class="bg-red-100 dark:bg-red-900/30 text-red-700">
                    <tr>
                        <th class="px-4 py-2 text-left">Produit</th>
                        <th class="px-4 py-2 text-left">SKU</th>
                        <th class="px-4 py-2 text-center">Stock</th>
                    </tr>
                </thead>
                <tbody>
                    {% for product in outOfStock %}
                        <tr class="border-b border-red-100 dark:border-red-900/30">
                            <td class="px-4 py-2 font-medium">{{ product.name }}</td>
                            <td class="px-4 py-2 text-gray-500">{{ product.sku }}</td>
                            <td class="px-4 py-2 text-center font-bold text-red-600">{{ product.currentStock }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {# Stock critique #}
    {% if criticalStock|length > 0 %}
    <div class="mb-6">
        <h2 class="text-lg font-semibold text-orange-600 mb-3">Stock critique ({{ criticalStock|length }})</h2>
        <div class="bg-orange-50 dark:bg-orange-900/20 rounded-lg overflow-hidden">
            <table class="w-full text-sm">
                <thead class="bg-orange-100 dark:bg-orange-900/30 text-orange-700">
                    <tr>
                        <th class="px-4 py-2 text-left">Produit</th>
                        <th class="px-4 py-2 text-left">SKU</th>
                        <th class="px-4 py-2 text-center">Stock</th>
                        <th class="px-4 py-2 text-center">Min</th>
                    </tr>
                </thead>
                <tbody>
                    {% for product in criticalStock %}
                        <tr class="border-b border-orange-100 dark:border-orange-900/30">
                            <td class="px-4 py-2 font-medium">{{ product.name }}</td>
                            <td class="px-4 py-2 text-gray-500">{{ product.sku }}</td>
                            <td class="px-4 py-2 text-center font-bold text-orange-600">{{ product.currentStock }}</td>
                            <td class="px-4 py-2 text-center text-gray-500">{{ product.minStock }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {# Stock bas #}
    {% if lowStock|length > 0 %}
    <div class="mb-6">
        <h2 class="text-lg font-semibold text-yellow-600 mb-3">Stock bas ({{ lowStock|length }})</h2>
        <div class="bg-yellow-50 dark:bg-yellow-900/20 rounded-lg overflow-hidden">
            <table class="w-full text-sm">
                <thead class="bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700">
                    <tr>
                        <th class="px-4 py-2 text-left">Produit</th>
                        <th class="px-4 py-2 text-left">SKU</th>
                        <th class="px-4 py-2 text-center">Stock</th>
                        <th class="px-4 py-2 text-center">Min</th>
                    </tr>
                </thead>
                <tbody>
                    {% for product in lowStock %}
                        <tr class="border-b border-yellow-100 dark:border-yellow-900/30">
                            <td class="px-4 py-2 font-medium">{{ product.name }}</td>
                            <td class="px-4 py-2 text-gray-500">{{ product.sku }}</td>
                            <td class="px-4 py-2 text-center font-bold text-yellow-600">{{ product.currentStock }}</td>
                            <td class="px-4 py-2 text-center text-gray-500">{{ product.minStock }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {% if outOfStock|length == 0 and criticalStock|length == 0 and lowStock|length == 0 %}
        <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-8 text-center">
            <svg class="w-12 h-12 mx-auto text-green-500 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            <p class="text-green-700 font-medium">Tous les stocks sont à un niveau satisfaisant</p>
        </div>
    {% endif %}
</div>
{% endblock %}