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

{% block page_title %}Mouvements de stock{% 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-history mr-3"></i>Mouvements de stock</h1>
                <p class="mt-1 text-blue-100 text-sm">
                    Tracabilite complete des entrees et sorties
                    {% if selectedProduct is defined and selectedProduct %}
                        — <strong>{{ selectedProduct.name }}</strong>
                    {% endif %}
                </p>
            </div>
            <a href="{{ path('manager_pos_stock_index') }}" 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-arrow-left mr-2"></i>Retour Stock
            </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_movements') }}" class="space-y-3">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                <div>
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Recherche</label>
                    <input type="text" name="search" value="{{ filters.search|default('') }}" placeholder="Rechercher..."
                           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>
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Produit</label>
                    <select name="productId" 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="">Tous les produits</option>
                        {% for product in products %}
                            <option value="{{ product.id }}" {{ filters.productId|default('') == product.id ? 'selected' : '' }}>
                                {{ product.name }} ({{ product.sku }})
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Type</label>
                    <select name="type" 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="">Tous les types</option>
                        <option value="in" {{ filters.type|default('') == 'in' ? 'selected' : '' }}>Entree</option>
                        <option value="out" {{ filters.type|default('') == 'out' ? 'selected' : '' }}>Sortie</option>
                        <option value="adjustment" {{ filters.type|default('') == 'adjustment' ? 'selected' : '' }}>Ajustement</option>
                        <option value="return" {{ filters.type|default('') == 'return' ? 'selected' : '' }}>Retour</option>
                        <option value="loss" {{ filters.type|default('') == 'loss' ? 'selected' : '' }}>Perte</option>
                        <option value="initial" {{ filters.type|default('') == 'initial' ? 'selected' : '' }}>Stock initial</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Date debut</label>
                    <input type="date" name="dateFrom" value="{{ filters.dateFrom|default('') }}"
                           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>
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Date fin</label>
                    <input type="date" name="dateTo" value="{{ filters.dateTo|default('') }}"
                           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 class="flex items-end 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_movements') }}" 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>
            </div>
        </form>
    </div>

    {# Liste des mouvements - vue cards #}
    {% if movements|length > 0 %}
        <div class="space-y-3">
            {% for movement in movements %}
                {% set isPositive = movement.positive %}
                {% set badgeColor = movement.typeBadgeColor %}
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
                    <div class="p-4">
                        <div class="flex items-start justify-between gap-3">
                            {# Left: type badge + product info #}
                            <div class="flex items-start gap-3 min-w-0 flex-1">
                                <div class="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center
                                    {% if badgeColor == 'green' %}bg-green-100 dark:bg-green-900/30
                                    {% elseif badgeColor == 'blue' %}bg-blue-100 dark:bg-blue-900/30
                                    {% elseif badgeColor == 'yellow' %}bg-yellow-100 dark:bg-yellow-900/30
                                    {% elseif badgeColor == 'red' %}bg-red-100 dark:bg-red-900/30
                                    {% else %}bg-gray-100 dark:bg-gray-700{% endif %}">
                                    {% if movement.type == 'in' %}
                                        <i class="fas fa-arrow-down text-green-600"></i>
                                    {% elseif movement.type == 'out' %}
                                        <i class="fas fa-arrow-up text-blue-600"></i>
                                    {% elseif movement.type == 'adjustment' %}
                                        <i class="fas fa-sliders-h text-yellow-600"></i>
                                    {% elseif movement.type == 'return' %}
                                        <i class="fas fa-undo text-blue-600"></i>
                                    {% elseif movement.type == 'loss' %}
                                        <i class="fas fa-exclamation-triangle text-red-600"></i>
                                    {% else %}
                                        <i class="fas fa-database text-gray-500"></i>
                                    {% endif %}
                                </div>
                                <div class="min-w-0 flex-1">
                                    <div class="flex items-center gap-2 flex-wrap">
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                                            {% if badgeColor == 'green' %}bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300
                                            {% elseif badgeColor == 'blue' %}bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300
                                            {% elseif badgeColor == 'yellow' %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300
                                            {% elseif badgeColor == 'red' %}bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300
                                            {% else %}bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300{% endif %}">
                                            {{ movement.typeLabel }}
                                        </span>
                                        <span class="text-xs text-gray-400">{{ movement.createdAt|date('d/m/Y H:i') }}</span>
                                    </div>
                                    <a href="{{ path('manager_pos_products_show', {id: movement.product.id}) }}" class="mt-1 font-medium text-gray-900 dark:text-white hover:text-blue-600 transition-colors text-sm block truncate">
                                        {{ movement.product.name }}
                                    </a>
                                    <span class="text-xs text-gray-500 font-mono">{{ movement.product.sku }}</span>
                                </div>
                            </div>

                            {# Right: quantity + stock change #}
                            <div class="text-right flex-shrink-0">
                                <div class="text-xl font-bold {{ isPositive ? 'text-green-600' : 'text-red-600' }}">
                                    {{ isPositive ? '+' : '-' }}{{ movement.quantity }}
                                </div>
                                <div class="text-xs text-gray-400 mt-0.5">
                                    {{ movement.stockBefore }} <i class="fas fa-arrow-right text-[8px] mx-0.5"></i> {{ movement.stockAfter }}
                                </div>
                            </div>
                        </div>

                        {# Details row #}
                        <div class="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
                            <span><i class="fas fa-user mr-1"></i>{{ movement.performedBy.fullName|default(movement.performedBy.email) }}</span>
                            {% if movement.reference %}
                                <span><i class="fas fa-tag mr-1"></i>{{ movement.reference }}</span>
                            {% endif %}
                            {% if movement.reason %}
                                <span class="truncate max-w-xs"><i class="fas fa-comment mr-1"></i>{{ movement.reason }}</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>

        <div class="flex justify-center">
            {{ knp_pagination_render(movements) }}
        </div>
    {% else %}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow text-center py-16">
            <i class="fas fa-history 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 mouvement</h3>
            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Aucun mouvement de stock enregistre pour les filtres selectionnes.</p>
        </div>
    {% endif %}
</div>
{% endblock %}