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

{% block page_title %}Mouvements de 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">Mouvements de 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>

    {# 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>
                <select name="type" 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 types</option>
                    <option value="in" {{ filters.type == 'in' ? 'selected' : '' }}>Entrée</option>
                    <option value="out" {{ filters.type == 'out' ? 'selected' : '' }}>Sortie</option>
                    <option value="adjustment" {{ filters.type == 'adjustment' ? 'selected' : '' }}>Ajustement</option>
                    <option value="return" {{ filters.type == 'return' ? 'selected' : '' }}>Retour</option>
                    <option value="loss" {{ filters.type == 'loss' ? 'selected' : '' }}>Perte</option>
                </select>
            </div>
            <div>
                <input type="date" name="dateFrom" value="{{ filters.dateFrom }}" class="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>
                <input type="date" name="dateTo" value="{{ filters.dateTo }}" class="border border-gray-300 dark:border-gray-600 rounded-lg py-2 px-3 text-sm dark:bg-gray-700 dark:text-white">
            </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 mouvements #}
    <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">Date</th>
                        <th class="px-4 py-3">Produit</th>
                        <th class="px-4 py-3">Type</th>
                        <th class="px-4 py-3 text-center">Quantité</th>
                        <th class="px-4 py-3">Référence</th>
                        <th class="px-4 py-3">Raison</th>
                    </tr>
                </thead>
                <tbody>
                    {% for movement in movements %}
                        {% set typeColors = { 'in': 'green', 'out': 'red', 'adjustment': 'blue', 'return': 'yellow', 'loss': 'gray', 'initial': 'purple' } %}
                        {% set typeLabels = { 'in': 'Entrée', 'out': 'Sortie', 'adjustment': 'Ajustement', 'return': 'Retour', 'loss': 'Perte', 'initial': 'Initial' } %}
                        <tr class="border-b dark:border-gray-700">
                            <td class="px-4 py-3 text-gray-500">{{ movement.createdAt|date('d/m/Y H:i') }}</td>
                            <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ movement.product.name|default('—') }}</td>
                            <td class="px-4 py-3">
                                <span class="px-2 py-1 text-xs rounded-full bg-{{ typeColors[movement.type]|default('gray') }}-100 text-{{ typeColors[movement.type]|default('gray') }}-800">
                                    {{ typeLabels[movement.type]|default(movement.type) }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-center font-semibold {{ movement.quantity > 0 ? 'text-green-600' : 'text-red-600' }}">
                                {{ movement.quantity > 0 ? '+' : '' }}{{ movement.quantity }}
                            </td>
                            <td class="px-4 py-3 text-gray-500">{{ movement.referenceType|default('') }}</td>
                            <td class="px-4 py-3 text-gray-500 truncate max-w-[200px]">{{ movement.reason|default('') }}</td>
                        </tr>
                    {% else %}
                        <tr><td colspan="6" class="px-4 py-8 text-center text-gray-500">Aucun mouvement trouvé</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

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