{% extends 'base.html.twig' %}
{% block title %}Invoice #{{ invoice.displayInvoiceNumber }}{% endblock %}

{% block stylesheets %}
<style>
    body { background: #f3f4f6; }
    .invoice-items th, .invoice-items td { padding: 0.5rem 0.75rem; }
    @media (max-width: 640px) {
        .invoice-items th, .invoice-items td { padding: 0.5rem; font-size: 0.75rem; }
        .invoice-items .hide-mobile { display: none; }
        .invoice-items .col-qty { width: 15%; }
        .invoice-items .col-amount { width: 30%; }
    }
    @media print {
        @page { margin: 0.7in; }
        body { background: white !important; }
        .no-print { display: none !important; }
        .bg-white.rounded-xl {
            box-shadow: none !important;
            border: none !important;
            padding: 0 !important;
            max-width: none !important;
        }
        .print-footer {
            display: block !important;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 9px;
            color: #888;
        }
    }
    .print-footer { display: none; }
</style>
{% endblock %}

{% block body %}
<div class="min-h-screen py-8 px-4">
    <div class="max-w-4xl mx-auto">
        <!-- Action buttons -->
        <div class="flex flex-wrap gap-2 mb-6 no-print">
            <div class="flex rounded-lg overflow-hidden border border-gray-300 bg-white">
                <a href="{{ path('public_invoice_pdf', {token: invoice.accessToken}) }}" class="px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 border-r border-gray-300 inline-flex items-center gap-1" target="_blank"><i class="bi bi-file-pdf"></i> PDF</a>
                <a href="{{ path('public_invoice_download', {token: invoice.accessToken}) }}" class="px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 border-r border-gray-300 inline-flex items-center gap-1"><i class="bi bi-download"></i> Download</a>
                <button onclick="window.print()" class="px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 inline-flex items-center gap-1"><i class="bi bi-printer"></i> Print</button>
            </div>
            <span class="ml-auto inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ invoice.status.badgeClass }}">{{ invoice.status.label }}</span>
        </div>

        <!-- Invoice Preview -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sm:p-8">
            <!-- Header -->
            <div class="grid grid-cols-2 gap-4 mb-8">
                <div class="text-sm leading-relaxed">
                    {% if company %}
                    <p class="font-bold text-gray-800">{{ company.name }},</p>
                    <p class="text-gray-600">{{ company.formattedAddress }}.</p>
                    <p><a href="mailto:{{ company.email }}" class="text-kitsco-accent hover:underline">{{ company.email }}</a></p>
                    <p class="text-gray-600">{{ company.phone }}</p>
                    {% endif %}
                </div>
                <div class="text-right">
                    {% if company and company.logoPath %}
                        <img src="{{ asset('uploads/' ~ company.logoPath) }}" alt="Logo" class="h-14 inline-block mb-2">
                    {% else %}
                        <img src="{{ asset('images/logo-color.jpg') }}" alt="Logo" class="h-12 inline-block mb-2">
                    {% endif %}
                    <br>
                    <span class="text-lg font-bold text-kitsco-accent">{{ invoice.type.label|upper }}</span>
                </div>
            </div>

            <!-- Customer & Meta -->
            <div class="grid grid-cols-2 gap-4 mb-8">
                <div class="text-sm">
                    <p class="text-xs text-gray-400 uppercase tracking-wide mb-1">Bill To</p>
                    <p class="font-bold text-gray-800">{{ invoice.customer.name }}</p>
                    <p class="text-gray-600">{{ invoice.customer.formattedAddress }}</p>
                    {% if invoice.customer.contactPerson %}
                        <p class="text-gray-500 text-xs mt-1">Att: {{ invoice.customer.contactPerson }}{% if invoice.customer.contactEmail %}, {{ invoice.customer.contactEmail }}{% endif %}</p>
                    {% endif %}
                </div>
                <div class="text-sm">
                    <table class="ml-auto">
                        <tr><td class="text-right text-gray-400 pr-3 py-0.5">Invoice #</td><td class="font-bold">{{ invoice.displayInvoiceNumber }}</td></tr>
                        <tr><td class="text-right text-gray-400 pr-3 py-0.5">Invoice Date</td><td>{{ invoice.invoiceDate|date('d/m/Y') }}</td></tr>
                        <tr><td class="text-right text-gray-400 pr-3 py-0.5">Due Date</td><td>{{ invoice.dueDate|date('d/m/Y') }}</td></tr>
                    </table>
                </div>
            </div>

            <!-- Line Items Table -->
            <table class="invoice-items w-full text-sm border border-gray-200 rounded-lg overflow-hidden mb-6">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="col-qty text-left font-medium text-gray-600 text-xs uppercase">Qty</th>
                        <th class="text-left font-medium text-gray-600 text-xs uppercase">Description</th>
                        <th class="hide-mobile text-right font-medium text-gray-600 text-xs uppercase whitespace-nowrap">Unit Price</th>
                        <th class="col-amount text-right font-medium text-gray-600 text-xs uppercase">Amount</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    {% for item in invoice.items %}
                    <tr>
                        <td>{{ item.quantity }}</td>
                        <td>
                            {% if item.product %}
                                <span class="font-medium">{{ item.product.name }}</span>
                                {% if item.description %}<br><span class="text-gray-400 text-xs">{{ item.description }}</span>{% endif %}
                            {% else %}
                                {{ item.description }}
                            {% endif %}
                        </td>
                        <td class="hide-mobile text-right">{{ item.unitPrice|money }}</td>
                        <td class="text-right font-semibold whitespace-nowrap">{{ item.amount|money }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot>
                    {% if invoice.taxRate > 0 %}
                    <tr class="border-t border-gray-200">
                        <td colspan="2" class="text-right text-gray-600 sm:hidden">Subtotal</td>
                        <td colspan="3" class="text-right text-gray-600 hidden sm:table-cell">Subtotal</td>
                        <td class="text-right font-semibold whitespace-nowrap">{{ invoice.subtotal|money }}</td>
                    </tr>
                    <tr>
                        <td colspan="2" class="text-right text-gray-600 sm:hidden">Tax ({{ invoice.taxRate }}%)</td>
                        <td colspan="3" class="text-right text-gray-600 hidden sm:table-cell">Tax ({{ invoice.taxRate }}%)</td>
                        <td class="text-right font-semibold whitespace-nowrap">{{ invoice.taxAmount|money }}</td>
                    </tr>
                    {% endif %}
                    <tr class="bg-gray-50 border-t border-gray-200">
                        <td colspan="2" class="text-right font-bold text-gray-800 sm:hidden">TOTAL</td>
                        <td colspan="3" class="text-right font-bold text-gray-800 hidden sm:table-cell">TOTAL</td>
                        <td class="text-right font-bold text-base text-kitsco-accent whitespace-nowrap">{{ invoice.currency.symbol }}{{ invoice.total|money }}</td>
                    </tr>
                    {% if invoice.isForeignCurrency and invoice.exchangeRate %}
                    <tr class="bg-gray-50/50">
                        <td colspan="2" class="text-right text-xs text-gray-400 sm:hidden">TZS Equivalent</td>
                        <td colspan="3" class="text-right text-xs text-gray-400 hidden sm:table-cell">TZS Equivalent</td>
                        <td class="text-right text-xs text-gray-500 whitespace-nowrap">
                            {{ invoice.formattedTotalInTzs }}
                            <span class="text-gray-400">(1 {{ invoice.currency.code }} = {{ invoice.exchangeRate|money }} TZS)</span>
                        </td>
                    </tr>
                    {% endif %}
                </tfoot>
            </table>

            <!-- Payment Info -->
            {% if company %}
            <div class="bg-gray-50 rounded-lg p-4 text-sm">
                <p class="font-semibold text-gray-700 mb-2"><i class="bi bi-bank mr-1"></i>Payment Information</p>
                <div class="flex flex-wrap gap-x-6 gap-y-1 text-gray-600">
                    <span><span class="text-gray-400">Bank:</span> {{ company.bankName }}</span>
                    <span><span class="text-gray-400">Account Name:</span> {{ company.bankAccountName }}</span>
                    <span><span class="text-gray-400">Account #:</span> {{ company.bankAccountNumber }}</span>
                </div>
            </div>
            {% endif %}

            <!-- Terms & Conditions -->
            {% if invoice.invoiceTerms %}
            <div class="mt-6 pt-4 border-t border-gray-200 text-sm">
                <p class="font-semibold text-gray-700 mb-2"><i class="bi bi-file-text mr-1"></i>Terms & Conditions</p>
                <div class="text-gray-600 prose prose-sm max-w-none">{{ invoice.invoiceTerms|raw }}</div>
            </div>
            {% endif %}
        </div>

        <!-- Print Footer -->
        <div class="print-footer">
            Invoice created at: {{ invoice.createdAt|date("d/m/Y H:i:s") }}
        </div>

        <!-- Footer -->
        <div class="text-center text-gray-400 text-xs mt-6 no-print">
            Invoice created at: {{ invoice.createdAt|date("d/m/Y H:i:s") }}
        </div>
    </div>
</div>
{% endblock %}