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

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

{% block content %}
<div class="space-y-6">
    {# Header #}
    <div class="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg shadow-lg p-4 sm:p-6 text-white">
        <div class="flex items-center justify-between flex-wrap gap-4">
            <div>
                <h1 class="text-2xl sm:text-3xl font-bold"><i class="fas fa-warehouse mr-3"></i>Gestion du Stock</h1>
                <p class="mt-1 sm:mt-2 text-blue-100 text-sm">Vue d'ensemble du stock de {{ company.name }}</p>
            </div>
            <div class="flex flex-wrap gap-2">
                <a href="{{ path('manager_pos_stock_add') }}"
                   class="inline-flex items-center px-4 py-2 bg-white text-blue-700 rounded-lg font-medium text-sm hover:bg-blue-50 transition-colors shadow-sm">
                    <i class="fas fa-plus mr-2"></i><span>Entree de stock</span>
                </a>
                <a href="{{ path('manager_pos_stock_adjust') }}"
                   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-sliders-h mr-2"></i><span>Ajustement</span>
                </a>
                <a href="{{ path('manager_pos_stock_movements') }}"
                   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-history mr-2"></i><span>Mouvements</span>
                </a>
                <a href="{{ path('manager_pos_stock_alerts') }}"
                   class="inline-flex items-center px-4 py-2 bg-red-500/80 text-white rounded-lg text-sm hover:bg-red-500 transition-colors">
                    <i class="fas fa-exclamation-triangle mr-2"></i><span>Alertes</span>
                    {% set alertCount = statistics.outOfStock|default(0) + statistics.lowStock|default(0) %}
                    {% if alertCount > 0 %}
                        <span class="ml-1.5 inline-flex items-center justify-center w-5 h-5 text-[10px] font-bold bg-white text-red-600 rounded-full">{{ alertCount }}</span>
                    {% endif %}
                </a>
            </div>
        </div>
    </div>

    {# Stats cards #}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-5">
            <div class="flex items-center gap-3">
                <div class="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
                    <i class="fas fa-boxes-stacked text-gray-500 text-lg"></i>
                </div>
                <div>
                    <div class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">{{ valuation.totalProducts|default(0) }}</div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">Produits en stock</div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-5">
            <div class="flex items-center gap-3">
                <div class="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
                    <i class="fas fa-cubes text-blue-600 text-lg"></i>
                </div>
                <div>
                    <div class="text-xl sm:text-2xl font-bold text-blue-600">{{ valuation.totalUnits|default(0)|number_format(0, ',', ' ') }}</div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">Unites totales</div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-5">
            <div class="flex items-center gap-3">
                <div class="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
                    <i class="fas fa-coins text-green-600 text-lg"></i>
                </div>
                <div>
                    <div class="text-xl sm:text-2xl font-bold text-green-600">{{ valuation.totalValue|default(0)|number_format(0, ',', ' ') }}</div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">Valeur ({{ settings.currencySymbol }})</div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-5">
            <a href="{{ path('manager_pos_stock_alerts') }}" class="flex items-center gap-3">
                <div class="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-lg bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
                    <i class="fas fa-exclamation-triangle text-red-600 text-lg"></i>
                </div>
                <div>
                    <div class="text-xl sm:text-2xl font-bold text-red-600">{{ statistics.outOfStock|default(0) + statistics.lowStock|default(0) }}</div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">Alertes stock</div>
                </div>
            </a>
        </div>
    </div>

    {# Filtres #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
        <form method="get" action="{{ path('manager_pos_stock_index') }}" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
            <div>
                <input type="text" name="search" value="{{ filters.search|default('') }}" placeholder="Rechercher un produit..."
                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:ring-blue-500 focus:border-blue-500">
            </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-blue-500 focus:border-blue-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="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
                    <i class="fas fa-search mr-2"></i>Filtrer
                </button>
                <a href="{{ path('manager_pos_stock_index') }}" class="inline-flex items-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>

    {# Liste des produits #}
    {% if products|length > 0 %}
        {# Vue desktop: table #}
        <div class="hidden md: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-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">Min</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">Cout unit.</th>
                            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Valeur</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 %}
                            {% set stockStatus = product.getStockStatus(settings.lowStockThreshold, settings.criticalStockThreshold) %}
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 {{ stockStatus == 'out' ? 'bg-red-50/50 dark:bg-red-900/5' : (stockStatus == 'critical' ? 'bg-orange-50/50 dark:bg-orange-900/5' : '') }}">
                                <td class="px-4 py-3">
                                    <a href="{{ path('manager_pos_products_show', {id: product.id}) }}" class="hover:text-blue-600 transition-colors">
                                        <div class="font-medium text-gray-900 dark:text-white">{{ product.name }}</div>
                                        {% if product.category %}
                                            <span class="text-xs text-gray-500">{{ product.category.name }}</span>
                                        {% endif %}
                                    </a>
                                </td>
                                <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 font-mono">{{ product.sku }}</td>
                                <td class="px-4 py-3 text-center">
                                    <span class="text-lg font-bold {% if stockStatus == 'out' %}text-red-600{% elseif stockStatus == 'critical' %}text-red-500{% elseif stockStatus == 'low' %}text-orange-500{% else %}text-green-600{% endif %}">
                                        {{ product.currentStock }}
                                    </span>
                                </td>
                                <td class="px-4 py-3 text-center text-sm text-gray-500">{{ product.minStock ?? '-' }}</td>
                                <td class="px-4 py-3 text-center">
                                    {% if stockStatus == 'out' %}
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300"><i class="fas fa-times-circle mr-1"></i>Rupture</span>
                                    {% elseif stockStatus == 'critical' %}
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300"><i class="fas fa-exclamation-circle mr-1"></i>Critique</span>
                                    {% elseif stockStatus == 'low' %}
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300"><i class="fas fa-arrow-down mr-1"></i>Bas</span>
                                    {% else %}
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300"><i class="fas fa-check-circle mr-1"></i>OK</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3 text-right text-sm text-gray-500">
                                    {{ product.costPrice ? product.costPrice|number_format(0, ',', ' ') ~ ' ' ~ settings.currencySymbol : '-' }}
                                </td>
                                <td class="px-4 py-3 text-right text-sm font-medium text-gray-900 dark:text-white">
                                    {% if product.costPrice %}
                                        {{ (product.currentStock * product.costPrice)|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3 text-right">
                                    <div class="flex justify-end gap-1">
                                        <a href="{{ path('manager_pos_products_show', {id: product.id}) }}" class="inline-flex items-center gap-1 px-2 py-1 text-xs text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors" title="Voir le produit">
                                            <i class="fas fa-eye"></i><span>Voir</span>
                                        </a>
                                        <a href="{{ path('manager_pos_stock_add', {product: product.id}) }}" class="inline-flex items-center gap-1 px-2 py-1 text-xs text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 rounded transition-colors" title="Ajouter stock">
                                            <i class="fas fa-plus-circle"></i><span>Entree</span>
                                        </a>
                                        <a href="{{ path('manager_pos_stock_adjust', {product: product.id}) }}" class="inline-flex items-center gap-1 px-2 py-1 text-xs text-yellow-600 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 rounded transition-colors" title="Ajuster">
                                            <i class="fas fa-balance-scale"></i><span>Ajuster</span>
                                        </a>
                                        <a href="{{ path('manager_pos_stock_movements', {productId: product.id}) }}" class="inline-flex items-center gap-1 px-2 py-1 text-xs text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded transition-colors" title="Mouvements">
                                            <i class="fas fa-history"></i><span>Mouvements</span>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        {# Vue mobile: cards #}
        <div class="md:hidden space-y-3">
            {% for product in products %}
                {% set stockStatus = product.getStockStatus(settings.lowStockThreshold, settings.criticalStockThreshold) %}
                {% set statusColors = {'out': 'red', 'critical': 'orange', 'low': 'yellow', 'ok': 'green', 'service': 'gray'} %}
                {% set statusColor = statusColors[stockStatus]|default('gray') %}

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden {{ stockStatus == 'out' ? 'border-l-4 border-red-500' : (stockStatus == 'critical' ? 'border-l-4 border-orange-500' : '') }}">
                    <div class="p-4">
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0 flex-1">
                                <a href="{{ path('manager_pos_products_show', {id: product.id}) }}" class="font-medium text-gray-900 dark:text-white hover:text-blue-600 transition-colors">
                                    {{ product.name }}
                                </a>
                                <div class="flex items-center gap-2 mt-1">
                                    <span class="text-xs text-gray-500 font-mono">{{ product.sku }}</span>
                                    {% if product.category %}
                                        <span class="text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-500">{{ product.category.name }}</span>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="text-right flex-shrink-0">
                                <div class="text-2xl font-bold text-{{ statusColor }}-600">{{ product.currentStock }}</div>
                                {% if stockStatus == 'out' %}
                                    <span class="text-[10px] font-medium text-red-600">Rupture</span>
                                {% elseif stockStatus == 'critical' %}
                                    <span class="text-[10px] font-medium text-orange-600">Critique</span>
                                {% elseif stockStatus == 'low' %}
                                    <span class="text-[10px] font-medium text-yellow-600">Bas</span>
                                {% else %}
                                    <span class="text-[10px] font-medium text-green-600">OK</span>
                                {% endif %}
                            </div>
                        </div>

                        <div class="mt-3 flex items-center gap-4 text-xs text-gray-500">
                            {% if product.minStock is not null %}
                                <span><i class="fas fa-arrow-down mr-1"></i>Min: {{ product.minStock }}</span>
                            {% endif %}
                            {% if product.costPrice %}
                                <span><i class="fas fa-tag mr-1"></i>{{ product.costPrice|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</span>
                                <span><i class="fas fa-coins mr-1"></i>{{ (product.currentStock * product.costPrice)|number_format(0, ',', ' ') }} {{ settings.currencySymbol }}</span>
                            {% endif %}
                        </div>
                    </div>

                    {# Actions bar #}
                    <div class="flex border-t border-gray-100 dark:border-gray-700 divide-x divide-gray-100 dark:divide-gray-700">
                        <a href="{{ path('manager_pos_products_show', {id: product.id}) }}" class="flex-1 py-2.5 text-center text-xs text-gray-500 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors">
                            <i class="fas fa-eye mr-1"></i>Voir
                        </a>
                        <a href="{{ path('manager_pos_stock_add', {product: product.id}) }}" class="flex-1 py-2.5 text-center text-xs text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 transition-colors font-medium">
                            <i class="fas fa-plus mr-1"></i>Entree
                        </a>
                        <a href="{{ path('manager_pos_stock_adjust', {product: product.id}) }}" class="flex-1 py-2.5 text-center text-xs text-yellow-600 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 transition-colors">
                            <i class="fas fa-sliders-h mr-1"></i>Ajuster
                        </a>
                        <a href="{{ path('manager_pos_stock_movements', {productId: product.id}) }}" class="flex-1 py-2.5 text-center text-xs text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors">
                            <i class="fas fa-history mr-1"></i>Mouvements
                        </a>
                    </div>
                </div>
            {% endfor %}
        </div>

        <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-16">
            <i class="fas fa-warehouse 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 en stock</h3>
            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Commencez par ajouter des produits au catalogue.</p>
            <a href="{{ path('manager_pos_products_create') }}" class="mt-4 inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700">
                <i class="fas fa-plus mr-2"></i>Creer un produit
            </a>
        </div>
    {% endif %}
</div>
{% endblock %}