<section class="bg-slate-50 py-16">
    <div class="max-w-6xl mx-auto px-4">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h1 class="text-3xl font-bold text-slate-950">Invoice Details</h1>
                <p class="mt-2 text-slate-600">Review invoice items, due date, and download your copy.</p>
            </div>
            <a href="<?= htmlspecialchars($baseUrl) ?>/portal/dashboard" class="rounded-full border border-slate-300 px-5 py-3 text-sm text-slate-950 hover:bg-slate-100">Back to Dashboard</a>
        </div>

        <div class="mt-10 rounded-3xl bg-white p-8 shadow-lg border border-slate-200">
            <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                <div>
                    <p class="text-sm uppercase tracking-[0.2em] text-primary">Invoice</p>
                    <h2 class="mt-2 text-3xl font-bold text-slate-950"><?= htmlspecialchars($invoice['invoice_number']) ?></h2>
                    <p class="mt-2 text-slate-600">Status: <?= htmlspecialchars($invoice['status']) ?> | Due: <?= htmlspecialchars($invoice['due_date']) ?></p>
                </div>
                <?php if (!empty($invoiceDocument)): ?>
                    <a href="<?= htmlspecialchars($baseUrl) ?>/portal/document/download?id=<?= htmlspecialchars($invoiceDocument['id']) ?>" class="inline-flex items-center rounded-full btn-primary px-6 py-3 text-sm font-semibold">Download PDF</a>
                <?php endif; ?>
            </div>

            <div class="mt-10 overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-200 text-sm">
                    <thead class="bg-charcoal text-white">
                        <tr>
                            <th class="px-6 py-4 text-left">Item</th>
                            <th class="px-6 py-4 text-left">Quantity</th>
                            <th class="px-6 py-4 text-left">Unit Price</th>
                            <th class="px-6 py-4 text-left">Total</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-200 bg-white">
                        <?php if (empty($items)): ?>
                            <tr><td colspan="4" class="px-6 py-6 text-center text-slate-500">No invoice items found.</td></tr>
                        <?php endif; ?>
                        <?php foreach ($items as $item): ?>
                            <tr>
                                <td class="px-6 py-4 text-slate-700"><?= htmlspecialchars($item['description']) ?></td>
                                <td class="px-6 py-4 text-slate-700"><?= htmlspecialchars($item['quantity']) ?></td>
                                <td class="px-6 py-4 text-slate-700">GHS <?= number_format($item['unit_price'], 2) ?></td>
                                <td class="px-6 py-4 text-slate-700">GHS <?= number_format($item['total_price'], 2) ?></td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

            <div class="mt-8 flex flex-col gap-4 sm:flex-row sm:justify-end sm:items-center">
                <div class="rounded-3xl bg-slate-50 p-6 text-slate-700">
                    <p class="text-sm">Subtotal</p>
                    <p class="mt-2 text-2xl font-semibold">GHS <?= number_format($invoice['total_amount'], 2) ?></p>
                </div>
                <div class="rounded-3xl bg-slate-50 p-6 text-slate-700">
                    <p class="text-sm">Paid</p>
                    <p class="mt-2 text-2xl font-semibold">GHS <?= number_format($invoice['paid_amount'], 2) ?></p>
                </div>
            </div>
        </div>
    </div>
</section>
