{% extends 'admin/layout.html.twig' %}
{% block title %}Stock History: {{ product.name }} - KitscoApp{% endblock %}
{% block page_title %}Stock History{% endblock %}

{% block content %}
<div class="mb-6 flex justify-between items-center">
    <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>
    <a href="{{ path('admin_inventory_adjust', {id: product.id}) }}" class="inline-flex items-center gap-1.5 bg-kitsco-accent hover:bg-kitsco-dark text-white font-medium py-2 px-4 rounded-lg transition-colors text-sm">
        <i class="bi bi-plus-slash-minus"></i> Adjust Stock
    </a>
</div>

{# Product Info Card #}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
    <div class="flex flex-wrap items-center justify-between gap-4">
        <div>
            <h2 class="text-xl font-bold text-gray-800">{{ product.name }}</h2>
            {% if product.sku %}<p class="text-sm text-gray-400 mt-1">SKU: {{ product.sku }}</p>{% endif %}
        </div>
        <div class="flex items-center gap-6">
            <div class="text-center">
                <p class="text-xs text-gray-400 uppercase">Current Stock</p>
                <p class="text-2xl font-bold {{ product.stockQuantity <= 0 ? 'text-red-600' : (product.stockQuantity <= 10 ? 'text-yellow-600' : 'text-green-600') }}">{{ product.stockQuantity }}</p>
            </div>
            <div class="text-center">
                <p class="text-xs text-gray-400 uppercase">Cost/Unit</p>
                <p class="text-lg font-semibold text-gray-800">{{ product.cogs|money }}</p>
            </div>
            <div class="text-center">
                <p class="text-xs text-gray-400 uppercase">Sell Price</p>
                <p class="text-lg font-semibold text-gray-800">{{ product.unitPrice|money }}</p>
            </div>
            <div class="text-center">
                <p class="text-xs text-gray-400 uppercase">Margin</p>
                <p class="text-lg font-semibold text-green-600">{{ product.profitMarginPercentage|number_format(0) }}%</p>
            </div>
        </div>
    </div>
</div>

{# Movement History #}
<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-clock-history mr-2"></i>Movement History</h3>
    </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">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">Before</th>
                    <th class="px-4 py-3 text-center font-medium hidden md:table-cell">After</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">
                        <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 text-gray-500">{{ movement.quantityBefore }}</td>
                    <td class="px-4 py-3 text-center hidden md:table-cell text-gray-800 font-medium">{{ movement.quantityAfter }}</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>
                        {% if movement.reference %}<p class="text-xs text-gray-400">Ref: {{ movement.reference }}</p>{% endif %}
                    </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-clock-history text-4xl"></i>
                            <p class="mt-3 font-medium text-gray-500">No movement history</p>
                            <p class="text-sm text-gray-400 mt-1">Stock movements will appear here once recorded.</p>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}