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

{% block content %}
<div class="flex justify-between items-center 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>
    <a href="{{ path('admin_inventory_receive') }}" 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-box-arrow-in-down"></i> Receive Stock
    </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-receipt mr-2"></i>Stock Receipts</h3>
        <p class="text-xs text-gray-400 mt-1">{{ receipts|length }} receipt(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">Receipt #</th>
                    <th class="px-4 py-3 text-left font-medium">Product</th>
                    <th class="px-4 py-3 text-left font-medium hidden md:table-cell">Supplier</th>
                    <th class="px-4 py-3 text-left font-medium hidden md:table-cell">Purchase Date</th>
                    <th class="px-4 py-3 text-right font-medium">Qty</th>
                    <th class="px-4 py-3 text-right font-medium hidden md:table-cell">Total Cost</th>
                    <th class="px-4 py-3 text-right font-medium">Landed/Unit</th>
                    <th class="px-4 py-3 text-right font-medium">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for receipt in receipts %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-4 py-3">
                        <a href="{{ path('admin_inventory_receipt_show', {id: receipt.id}) }}" class="font-medium text-kitsco-accent hover:underline">{{ receipt.receiptNumber }}</a>
                    </td>
                    <td class="px-4 py-3">
                        <a href="{{ path('admin_inventory_history', {id: receipt.product.id}) }}" class="font-medium text-gray-800 hover:text-kitsco-accent">{{ receipt.product.name }}</a>
                    </td>
                    <td class="px-4 py-3 hidden md:table-cell text-gray-600">{{ receipt.supplier ? receipt.supplier.name : '-' }}</td>
                    <td class="px-4 py-3 hidden md:table-cell text-gray-600">{{ receipt.purchaseDate|date('d/m/Y') }}</td>
                    <td class="px-4 py-3 text-right font-medium text-green-600">+{{ receipt.quantity }}</td>
                    <td class="px-4 py-3 text-right hidden md:table-cell">{{ receipt.totalCost|money }}</td>
                    <td class="px-4 py-3 text-right font-medium">{{ receipt.landedCostPerUnit|money }}</td>
                    <td class="px-4 py-3 text-right">
                        <a href="{{ path('admin_inventory_receipt_show', {id: receipt.id}) }}" class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50" title="View Details"><i class="bi bi-eye text-sm"></i></a>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="8" class="px-4 py-16 text-center">
                        <div class="text-gray-400">
                            <i class="bi bi-receipt text-4xl"></i>
                            <p class="mt-3 font-medium text-gray-500">No stock receipts yet</p>
                            <p class="text-sm text-gray-400 mt-1">Receive stock to create your first receipt.</p>
                            <a href="{{ path('admin_inventory_receive') }}" class="inline-flex items-center gap-1.5 mt-4 bg-kitsco-accent text-white font-medium py-2 px-4 rounded-lg text-sm"><i class="bi bi-box-arrow-in-down"></i> Receive Stock</a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}