{% extends 'admin/layout.html.twig' %}
{% block title %}All Stock Movements - KitscoApp{% endblock %}
{% block page_title %}Stock Movements{% endblock %}

{% block content %}
<div class="mb-6">
    <a href="{{ path('admin_inventory_index') }}" class="text-gray-400 hover:text-gray-600 transition-colors text-sm">
        <i class="bi bi-arrow-left"></i> Back to Inventory
    </a>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-100">
        <h3 class="font-semibold text-gray-800 text-sm"><i class="bi bi-arrow-left-right mr-2"></i>All Stock Movements</h3>
        <p class="text-xs text-gray-400 mt-1">{{ movements|length }} movement(s)</p>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
                <tr>
                    <th class="px-4 py-3 text-left font-medium">Date</th>
                    <th class="px-4 py-3 text-left font-medium">Product</th>
                    <th class="px-4 py-3 text-left font-medium">Type</th>
                    <th class="px-4 py-3 text-center font-medium">Change</th>
                    <th class="px-4 py-3 text-center font-medium hidden md:table-cell">Result</th>
                    <th class="px-4 py-3 text-left font-medium hidden lg:table-cell">Reason</th>
                    <th class="px-4 py-3 text-left font-medium hidden md:table-cell">By</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for movement in movements %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-4 py-3">
                        <p class="text-gray-800">{{ movement.createdAt|date('d/m/Y') }}</p>
                        <p class="text-xs text-gray-400">{{ movement.createdAt|date('H:i') }}</p>
                    </td>
                    <td class="px-4 py-3">
                        <a href="{{ path('admin_inventory_history', {id: movement.product.id}) }}" class="font-medium text-kitsco-accent hover:underline">{{ movement.product.name }}</a>
                    </td>
                    <td class="px-4 py-3">
                        <span class="inline-block px-2 py-0.5 rounded-full text-xs font-medium {{ movement.type.badgeClass }}">
                            {{ movement.type.label }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-center">
                        <span class="font-bold {{ movement.quantityDelta > 0 ? 'text-green-600' : 'text-red-600' }}">
                            {{ movement.formattedDelta }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-center hidden md:table-cell">
                        <span class="text-gray-400">{{ movement.quantityBefore }}</span>
                        <i class="bi bi-arrow-right text-xs text-gray-300 mx-1"></i>
                        <span class="font-medium text-gray-800">{{ movement.quantityAfter }}</span>
                    </td>
                    <td class="px-4 py-3 hidden lg:table-cell">
                        <p class="text-gray-600 truncate max-w-xs" title="{{ movement.reason }}">{{ movement.reason ?? '-' }}</p>
                    </td>
                    <td class="px-4 py-3 hidden md:table-cell text-gray-500">{{ movement.createdBy.fullName ?? movement.createdBy.email }}</td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="7" class="px-4 py-16 text-center">
                        <div class="text-gray-400">
                            <i class="bi bi-arrow-left-right text-4xl"></i>
                            <p class="mt-3 font-medium text-gray-500">No movements yet</p>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}