{% extends "client_portal/base.html" %}
{% from "components/ui.html" import page_header %}

{% block title %}{{ invoice.invoice_number }} - {{ _('Client Portal') }}{% endblock %}

{% block content %}
{% set breadcrumbs = [
    {'text': _('Client Portal'), 'url': url_for('client_portal.dashboard')},
    {'text': _('Invoices'), 'url': url_for('client_portal.invoices')},
    {'text': invoice.invoice_number}
] %}

{{ page_header(
    icon_class='fas fa-file-invoice',
    title_text=invoice.invoice_number,
    subtitle_text=_('Invoice Details'),
    breadcrumbs=breadcrumbs
) }}

<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div>
            <h3 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark mb-2">{{ _('Client') }}</h3>
            <p class="font-medium">{{ invoice.client_name }}</p>
            {% if invoice.client_email %}
            <p class="text-sm text-text-muted-light dark:text-text-muted-dark">{{ invoice.client_email }}</p>
            {% endif %}
            {% if invoice.client_address %}
            <p class="text-sm text-text-muted-light dark:text-text-muted-dark whitespace-pre-line">{{ invoice.client_address }}</p>
            {% endif %}
        </div>
        <div>
            <h3 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark mb-2">{{ _('Invoice Details') }}</h3>
            <p class="text-sm mb-1"><span class="font-medium">{{ _('Issue Date') }}:</span> {{ invoice.issue_date.strftime('%Y-%m-%d') }}</p>
            <p class="text-sm mb-1"><span class="font-medium">{{ _('Due Date') }}:</span> {{ invoice.due_date.strftime('%Y-%m-%d') }}</p>
            <p class="text-sm mb-1"><span class="font-medium">{{ _('Status') }}:</span> 
                <span class="px-2 py-1 text-xs rounded-full 
                    {% if invoice.payment_status == 'fully_paid' %}bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
                    {% elif invoice.is_overdue %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200
                    {% else %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200{% endif %}">
                    {{ invoice.payment_status|replace('_', ' ')|title }}
                </span>
            </p>
            {% if invoice.is_overdue %}
            <p class="text-sm text-red-600 mt-2">{{ _('This invoice is %(days)d days overdue.', days=invoice.days_overdue) }}</p>
            {% endif %}
        </div>
    </div>
    
    {% if invoice.items %}
    <div class="mb-6">
        <h3 class="text-lg font-semibold mb-4">{{ _('Invoice Items') }}</h3>
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead class="border-b border-border-light dark:border-border-dark">
                    <tr>
                        <th class="p-3">{{ _('Description') }}</th>
                        <th class="p-3">{{ _('Quantity') }}</th>
                        <th class="p-3">{{ _('Unit Price') }}</th>
                        <th class="p-3">{{ _('Total') }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in invoice.items %}
                    <tr class="border-b border-border-light dark:border-border-dark">
                        <td class="p-3">{{ item.description }}</td>
                        <td class="p-3">{{ "%.2f"|format(item.quantity) }}</td>
                        <td class="p-3">{{ "%.2f"|format(item.unit_price) }} {{ invoice.currency_code }}</td>
                        <td class="p-3 font-medium">{{ "%.2f"|format(item.total_amount) }} {{ invoice.currency_code }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
    
    <div class="flex justify-end">
        <div class="w-full md:w-1/3">
            <div class="space-y-2">
                <div class="flex justify-between">
                    <span class="text-text-muted-light dark:text-text-muted-dark">{{ _('Subtotal') }}:</span>
                    <span>{{ "%.2f"|format(invoice.subtotal) }} {{ invoice.currency_code }}</span>
                </div>
                {% if invoice.tax_rate > 0 %}
                <div class="flex justify-between">
                    <span class="text-text-muted-light dark:text-text-muted-dark">{{ _('Tax') }} ({{ "%.2f"|format(invoice.tax_rate) }}%):</span>
                    <span>{{ "%.2f"|format(invoice.tax_amount) }} {{ invoice.currency_code }}</span>
                </div>
                {% endif %}
                <div class="flex justify-between text-lg font-bold pt-2 border-t border-border-light dark:border-border-dark">
                    <span>{{ _('Total') }}:</span>
                    <span>{{ "%.2f"|format(invoice.total_amount) }} {{ invoice.currency_code }}</span>
                </div>
                {% if invoice.payment_status != 'fully_paid' %}
                <div class="flex justify-between text-sm text-red-600 pt-2">
                    <span>{{ _('Outstanding') }}:</span>
                    <span>{{ "%.2f"|format(invoice.outstanding_amount) }} {{ invoice.currency_code }}</span>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    {% if invoice.notes %}
    <div class="mt-6 pt-6 border-t border-border-light dark:border-border-dark">
        <h3 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark mb-2">{{ _('Notes') }}</h3>
        <p class="whitespace-pre-line">{{ invoice.notes }}</p>
    </div>
    {% endif %}
    
    {% if invoice.terms %}
    <div class="mt-6 pt-6 border-t border-border-light dark:border-border-dark">
        <h3 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark mb-2">{{ _('Terms') }}</h3>
        <p class="whitespace-pre-line">{{ invoice.terms }}</p>
    </div>
    {% endif %}
</div>
{% endblock %}