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

{% block content %}
<div class="flex justify-between items-center mb-6">
    <div class="flex items-center gap-3">
        <p class="text-sm text-gray-500">{{ products|length }} product(s)</p>
        <a href="{{ path('admin_category_index') }}" class="text-sm text-kitsco-accent hover:text-kitsco-dark transition-colors">
            <i class="bi bi-tags mr-1"></i>Manage Categories
        </a>
    </div>
    <a href="{{ path('admin_product_new') }}" 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-circle"></i> Add Product
    </a>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <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">Product</th>
                    <th class="px-4 py-3 text-left font-medium hidden md:table-cell">Category</th>
                    <th class="px-4 py-3 text-center font-medium">Stock</th>
                    <th class="px-4 py-3 text-right font-medium hidden lg:table-cell">Cost</th>
                    <th class="px-4 py-3 text-right font-medium">Price</th>
                    <th class="px-4 py-3 text-center font-medium hidden lg:table-cell">Margin</th>
                    <th class="px-4 py-3 text-left font-medium hidden md:table-cell">Status</th>
                    <th class="px-4 py-3 text-right font-medium">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for product in products %}
                <tr class="hover:bg-gray-50 transition-colors {{ not product.isActive ? 'opacity-50' : '' }}">
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-3">
                            {% if product.imagePath %}
                                <img src="{{ asset(product.imagePath) }}" alt="" class="w-9 h-9 rounded-lg object-cover border border-gray-200 shrink-0">
                            {% else %}
                                <div class="w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center shrink-0"><i class="bi bi-box text-gray-300"></i></div>
                            {% endif %}
                            <div>
                                <a href="{{ path('admin_product_show', {id: product.id}) }}" class="font-semibold text-gray-800 hover:text-kitsco-accent transition-colors {{ not product.isActive ? 'line-through' : '' }}">{{ product.name }}</a>
                                {% if product.description %}<p class="text-xs text-gray-400 mt-0.5">{{ product.description|length > 50 ? product.description|slice(0, 50) ~ '...' : product.description }}</p>{% endif %}
                            </div>
                        </div>
                    </td>
                    <td class="px-4 py-3 hidden md:table-cell text-gray-600">{{ product.category.label }}</td>
                    <td class="px-4 py-3 text-center">
                        <a href="{{ path('admin_inventory_history', {id: product.id}) }}" class="inline-block px-2 py-0.5 rounded-full text-xs font-medium {{ product.stockQuantity <= 0 ? 'bg-red-100 text-red-700' : (product.stockQuantity <= 10 ? 'bg-yellow-100 text-yellow-700' : 'bg-green-100 text-green-700') }}" title="View history">
                            {{ product.stockQuantity }}
                        </a>
                    </td>
                    <td class="px-4 py-3 text-right hidden lg:table-cell text-gray-600">{{ product.cogs|money }}</td>
                    <td class="px-4 py-3 text-right font-semibold">{{ product.unitPrice|money }}</td>
                    <td class="px-4 py-3 text-center hidden lg:table-cell">
                        <span class="text-sm {{ product.profitMarginPercentage|number_format(0) > 0 ? 'text-green-600' : 'text-gray-400' }}">{{ product.profitMarginPercentage }}%</span>
                    </td>
                    <td class="px-4 py-3 hidden md:table-cell">
                        <div class="flex flex-col gap-1">
                            <span class="inline-block px-2 py-0.5 rounded-full text-xs font-medium {{ product.isActive ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                                {{ product.isActive ? 'Active' : 'Inactive' }}
                            </span>
                            {% if product.isActive and not product.showOnWebsite %}
                            <span class="inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700" title="Hidden from online shop">
                                <i class="bi bi-eye-slash text-[10px]"></i> Hidden
                            </span>
                            {% endif %}
                        </div>
                    </td>
                    <td class="px-4 py-3 text-right">
                        {# Desktop: inline buttons #}
                        <div class="hidden md:inline-flex items-center gap-1">
                            <a href="{{ path('admin_inventory_history', {id: product.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="Stock History"><i class="bi bi-clock-history text-sm"></i></a>
                            <a href="{{ path('admin_product_edit', {id: product.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="Edit"><i class="bi bi-pencil text-sm"></i></a>
                            <form action="{{ path('admin_product_delete', {id: product.id}) }}" method="POST" class="inline">
                                <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ product.id) }}">
                                <button type="button" class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 text-red-500 hover:bg-red-50 hover:border-red-300" title="Delete"
                                        onclick="window.confirmDialog?.confirmForm(this.closest('form'), 'Delete Product', 'Are you sure you want to delete this product?', 'Delete', 'danger')"><i class="bi bi-trash text-sm"></i></button>
                            </form>
                        </div>
                        {# Mobile: dropdown menu #}
                        <div class="md:hidden relative inline-block" data-controller="action-menu">
                            <button type="button" data-action="action-menu#toggle" class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50">
                                <i class="bi bi-three-dots-vertical text-sm"></i>
                            </button>
                            <div data-action-menu-target="menu" class="hidden absolute right-0 top-full mt-1 w-40 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50">
                                <a href="{{ path('admin_inventory_history', {id: product.id}) }}" class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50">
                                    <i class="bi bi-clock-history"></i> Stock History
                                </a>
                                <a href="{{ path('admin_product_edit', {id: product.id}) }}" class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50">
                                    <i class="bi bi-pencil"></i> Edit
                                </a>
                                <form action="{{ path('admin_product_delete', {id: product.id}) }}" method="POST">
                                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ product.id) }}">
                                    <button type="button" class="flex items-center gap-2 w-full px-3 py-2 text-sm text-red-600 hover:bg-red-50"
                                            onclick="window.confirmDialog?.confirmForm(this.closest('form'), 'Delete Product', 'Are you sure you want to delete this product?', 'Delete', 'danger')">
                                        <i class="bi bi-trash"></i> Delete
                                    </button>
                                </form>
                            </div>
                        </div>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="8" class="px-4 py-16 text-center">
                        <div class="text-gray-400">
                            <i class="bi bi-box-seam text-4xl"></i>
                            <p class="mt-3 font-medium text-gray-500">No products yet</p>
                            <p class="text-sm text-gray-400 mt-1">Add your first product to include in invoices.</p>
                            <a href="{{ path('admin_product_new') }}" 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-plus-circle"></i> Add Product</a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}