{% extends 'portal/layout.html.twig' %}
{% block title %}Client Portal - KitscoApp{% endblock %}
{% block page_title %}Dashboard{% endblock %}

{% block content %}
{% if customer %}
<div class="mb-6">
    <p class="text-gray-500 text-sm">Welcome back, <span class="font-medium text-gray-700">{{ customer.contactPerson ?? customer.name }}</span></p>
</div>

<!-- Stats Cards -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-blue-50 text-blue-500 flex items-center justify-center">
                <i class="bi bi-receipt text-lg"></i>
            </div>
            <div>
                <p class="text-2xl font-bold text-gray-800">{{ total_invoices }}</p>
                <p class="text-xs text-gray-400">Total Invoices</p>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-amber-50 text-amber-500 flex items-center justify-center">
                <i class="bi bi-clock-history text-lg"></i>
            </div>
            <div>
                <p class="text-2xl font-bold text-gray-800">{{ company ? company.defaultCurrency.symbol : 'Shs' }}{{ total_outstanding|money }}</p>
                <p class="text-xs text-gray-400">Outstanding</p>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-green-50 text-green-500 flex items-center justify-center">
                <i class="bi bi-check-circle text-lg"></i>
            </div>
            <div>
                <p class="text-2xl font-bold text-gray-800">{{ company ? company.defaultCurrency.symbol : 'Shs' }}{{ total_paid|money }}</p>
                <p class="text-xs text-gray-400">Total Paid</p>
            </div>
        </div>
    </div>
</div>

<!-- Recent Invoices -->
<div class="bg-white rounded-xl border border-gray-100 shadow-sm">
    <div class="px-5 py-4 border-b border-gray-100 flex justify-between items-center">
        <h2 class="font-semibold text-gray-800 text-sm">Recent Invoices</h2>
        <a href="{{ path('portal_invoice_index') }}" class="text-xs text-kitsco-accent hover:underline">View all</a>
    </div>
    {% 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">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-center text-xs font-medium text-gray-500 uppercase">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                {% for invoice in invoices %}
                {% if invoice.status.value != 'draft' %}
                <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.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-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>
                {% endif %}
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="px-5 py-12 text-center text-gray-400">
        <i class="bi bi-receipt text-3xl mb-2"></i>
        <p class="text-sm">No invoices yet</p>
    </div>
    {% endif %}
</div>
{% else %}
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-12 text-center">
    <i class="bi bi-person-exclamation text-4xl text-gray-300 mb-3"></i>
    <p class="text-gray-500">Your account is not linked to a customer profile yet.</p>
    <p class="text-gray-400 text-sm mt-1">Please contact KitsCo to get set up.</p>
</div>
{% endif %}
{% endblock %}