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

{% block content %}
{# Quick Actions #}
<div class="flex flex-wrap gap-3 mb-6">
    <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>
    <a href="{{ path('admin_inventory_receipts') }}" class="inline-flex items-center gap-1.5 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 font-medium py-2 px-4 rounded-lg transition-colors text-sm">
        <i class="bi bi-receipt"></i> Stock Receipts
    </a>
    <a href="{{ path('admin_inventory_movements') }}" class="inline-flex items-center gap-1.5 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 font-medium py-2 px-4 rounded-lg transition-colors text-sm">
        <i class="bi bi-arrow-left-right"></i> All Movements
    </a>
    <a href="{{ path('admin_supplier_index') }}" class="inline-flex items-center gap-1.5 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 font-medium py-2 px-4 rounded-lg transition-colors text-sm">
        <i class="bi bi-building"></i> Suppliers
    </a>
</div>

{# Stats Cards #}
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500">Total Inventory Value</p>
                <p class="text-2xl font-bold text-gray-800 mt-1">{{ totalInventoryValue|money }} <span class="text-sm font-normal text-gray-400">TZS</span></p>
            </div>
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                <i class="bi bi-currency-dollar text-blue-600 text-xl"></i>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500">Products In Stock</p>
                <p class="text-2xl font-bold text-gray-800 mt-1">{{ productsInStock }}</p>
            </div>
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                <i class="bi bi-box-seam text-green-600 text-xl"></i>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500">Out of Stock</p>
                <p class="text-2xl font-bold {{ outOfStockProducts|length > 0 ? 'text-red-600' : 'text-gray-800' }} mt-1">{{ outOfStockProducts|length }}</p>
            </div>
            <div class="w-12 h-12 {{ outOfStockProducts|length > 0 ? 'bg-red-100' : 'bg-gray-100' }} rounded-lg flex items-center justify-center">
                <i class="bi bi-exclamation-triangle {{ outOfStockProducts|length > 0 ? 'text-red-600' : 'text-gray-400' }} text-xl"></i>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    {# Low Stock Alerts #}
    <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 flex justify-between items-center">
            <h3 class="font-semibold text-gray-800 text-sm"><i class="bi bi-exclamation-circle mr-2 text-yellow-500"></i>Low Stock Alerts</h3>
            <span class="text-xs text-gray-400">Threshold: 10 units</span>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <tbody class="divide-y divide-gray-100">
                    {% for product in lowStockProducts[:10] %}
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-4 py-3">
                            <p class="font-medium text-gray-800">{{ product.name }}</p>
                        </td>
                        <td class="px-4 py-3 text-right">
                            <span class="inline-block px-2 py-0.5 rounded-full text-xs font-medium {{ product.stockQuantity <= 0 ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700' }}">
                                {{ product.stockQuantity }} units
                            </span>
                        </td>
                        <td class="px-4 py-3 text-right">
                            <a href="{{ path('admin_inventory_history', {id: product.id}) }}" class="text-kitsco-accent hover:underline text-xs">View</a>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="3" class="px-4 py-8 text-center text-gray-400">
                            <i class="bi bi-check-circle text-green-500 text-2xl"></i>
                            <p class="mt-2 text-sm">All products are well stocked</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {# Recent Activity #}
    <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 flex justify-between items-center">
            <h3 class="font-semibold text-gray-800 text-sm"><i class="bi bi-clock-history mr-2"></i>Recent Activity</h3>
            <a href="{{ path('admin_inventory_movements') }}" class="text-xs text-kitsco-accent hover:underline">View All</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <tbody class="divide-y divide-gray-100">
                    {% for movement in recentMovements %}
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-4 py-3">
                            <p class="font-medium text-gray-800">{{ movement.product.name }}</p>
                            <p class="text-xs text-gray-400">{{ movement.createdAt|date('d/m/Y H:i') }}</p>
                        </td>
                        <td class="px-4 py-3 text-center">
                            <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-right font-medium {{ movement.quantityDelta > 0 ? 'text-green-600' : 'text-red-600' }}">
                            {{ movement.formattedDelta }}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="3" class="px-4 py-8 text-center text-gray-400">
                            <p class="text-sm">No recent movements</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{# Recent Receipts #}
{% if recentReceipts|length > 0 %}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mt-6">
    <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
        <h3 class="font-semibold text-gray-800 text-sm"><i class="bi bi-receipt mr-2"></i>Recent Stock Receipts</h3>
        <a href="{{ path('admin_inventory_receipts') }}" class="text-xs text-kitsco-accent hover:underline">View All</a>
    </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-right font-medium">Qty</th>
                    <th class="px-4 py-3 text-right font-medium">Landed Cost/Unit</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for receipt in recentReceipts %}
                <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>
                        <p class="text-xs text-gray-400">{{ receipt.purchaseDate|date('d/m/Y') }}</p>
                    </td>
                    <td class="px-4 py-3 text-gray-800">{{ receipt.product.name }}</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 text-right font-medium text-green-600">+{{ receipt.quantity }}</td>
                    <td class="px-4 py-3 text-right">{{ receipt.landedCostPerUnit|money }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}
{% endblock %}