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

{% block content %}
<div class="flex flex-wrap justify-between items-center mb-6 gap-3">
    <div class="flex flex-wrap gap-1.5">
        <a href="{{ path('admin_invoice_index') }}" class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors {{ current_status is null ? 'bg-gray-800 text-white' : 'bg-white text-gray-600 border border-gray-300 hover:bg-gray-50' }}">All</a>
        <a href="{{ path('admin_invoice_index', {status: 'draft'}) }}" class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors {{ current_status == 'draft' ? 'bg-gray-500 text-white' : 'bg-white text-gray-600 border border-gray-300 hover:bg-gray-50' }}">Draft</a>
        <a href="{{ path('admin_invoice_index', {status: 'sent'}) }}" class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors {{ current_status == 'sent' ? 'bg-cyan-500 text-white' : 'bg-white text-gray-600 border border-gray-300 hover:bg-gray-50' }}">Sent</a>
        <a href="{{ path('admin_invoice_index', {status: 'paid'}) }}" class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors {{ current_status == 'paid' ? 'bg-green-500 text-white' : 'bg-white text-gray-600 border border-gray-300 hover:bg-gray-50' }}">Paid</a>
        <a href="{{ path('admin_invoice_index', {status: 'overdue'}) }}" class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors {{ current_status == 'overdue' ? 'bg-red-500 text-white' : 'bg-white text-gray-600 border border-gray-300 hover:bg-gray-50' }}">Overdue</a>
    </div>
    <a href="{{ path('admin_invoice_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> New Invoice
    </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">Invoice</th>
                    <th class="px-4 py-3 text-left font-medium">Customer</th>
                    <th class="px-4 py-3 text-left font-medium hidden md:table-cell">Type</th>
                    <th class="px-4 py-3 text-left font-medium">Date</th>
                    <th class="px-4 py-3 text-left font-medium hidden md:table-cell">Due</th>
                    <th class="px-4 py-3 text-left font-medium">Total</th>
                    <th class="px-4 py-3 text-left font-medium">Status</th>
                    <th class="px-4 py-3 text-right font-medium">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for invoice in invoices %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-4 py-3 font-semibold">{{ invoice.displayInvoiceNumber }}</td>
                    <td class="px-4 py-3">{{ invoice.customer.name }}</td>
                    <td class="px-4 py-3 hidden md:table-cell text-gray-500 text-xs">{{ invoice.type.label }}</td>
                    <td class="px-4 py-3">{{ invoice.invoiceDate|date('d/m/Y') }}</td>
                    <td class="px-4 py-3 hidden md:table-cell">{{ invoice.dueDate|date('d/m/Y') }}</td>
                    <td class="px-4 py-3 font-semibold">{{ invoice.formattedTotal }}</td>
                    <td class="px-4 py-3">
                        <span class="inline-block px-2.5 py-0.5 rounded-full text-xs font-medium {{ invoice.status.badgeClass }}">{{ invoice.status.label }}</span>
                    </td>
                    <td class="px-4 py-3 text-right">
                        <div class="flex items-center justify-end gap-1">
                            <a href="{{ path('admin_invoice_show', {id: invoice.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 transition-colors" title="View">
                                <i class="bi bi-eye text-sm"></i>
                            </a>
                            {% if is_granted('INVOICE_EDIT', invoice) %}
                            <a href="{{ path('admin_invoice_edit', {id: invoice.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 transition-colors" title="Edit">
                                <i class="bi bi-pencil text-sm"></i>
                            </a>
                            {% endif %}
                        </div>
                    </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 invoices found</p>
                            <p class="text-sm text-gray-400 mt-1">
                                {% if current_status %}No {{ current_status }} invoices at the moment.{% else %}Get started by creating your first invoice.{% endif %}
                            </p>
                            <a href="{{ path('admin_invoice_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> Create Invoice
                            </a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}