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

{% block content %}
<div class="bg-white rounded-xl border border-gray-100 shadow-sm">
    {% if invoices|length > 0 %}
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Invoice #</th>
                    <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                    <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                    <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Due Date</th>
                    <th class="px-5 py-3 text-right text-xs font-medium text-gray-500 uppercase">Amount</th>
                    <th class="px-5 py-3 text-right text-xs font-medium text-gray-500 uppercase">Balance Due</th>
                    <th class="px-5 py-3 text-center text-xs font-medium text-gray-500 uppercase">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                {% for invoice in invoices %}
                <tr class="hover:bg-gray-50 cursor-pointer" onclick="window.location='{{ path('portal_invoice_show', {id: invoice.id}) }}'">
                    <td class="px-5 py-3 font-medium text-kitsco-accent">{{ invoice.displayInvoiceNumber }}</td>
                    <td class="px-5 py-3 text-gray-600">{{ invoice.type.label }}</td>
                    <td class="px-5 py-3 text-gray-600">{{ invoice.invoiceDate|date('d/m/Y') }}</td>
                    <td class="px-5 py-3 text-gray-600">{{ invoice.dueDate|date('d/m/Y') }}</td>
                    <td class="px-5 py-3 text-right font-semibold">{{ invoice.formattedTotal }}</td>
                    <td class="px-5 py-3 text-right {{ invoice.balanceDue > 0 ? 'text-red-600 font-semibold' : 'text-green-600' }}">
                        {{ invoice.currency.symbol }}{{ invoice.balanceDue|money }}
                    </td>
                    <td class="px-5 py-3 text-center">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ invoice.status.badgeClass }}">{{ invoice.status.label }}</span>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="px-5 py-16 text-center text-gray-400">
        <i class="bi bi-receipt text-4xl mb-3"></i>
        <p class="text-sm">No invoices found</p>
    </div>
    {% endif %}
</div>
{% endblock %}