<?php require_once __DIR__ . '/_sidebar.php'; ?>
<main class="flex-1 py-16 md:py-0 md:pl-64">
    <div class="max-w-7xl mx-auto px-4 py-8 md:py-16">
        <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">Invoices</h1>
                <p class="mt-2 text-slate-600">Manage invoice status, download PDFs, and keep billing records up to date.</p>
            </div>
            <div class="flex flex-col sm:flex-row gap-3">
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/invoices/create" class="inline-flex items-center justify-center rounded-full btn-primary px-5 py-3 text-sm font-semibold text-white hover:bg-rich-crimson transition">Create Invoice</a>
                <a href="<?= htmlspecialchars($baseUrl) ?>/admin" class="inline-flex items-center justify-center rounded-full border border-slate-300 bg-white px-5 py-3 text-sm text-slate-950 hover:bg-slate-100 transition">Back to Dashboard</a>
            </div>
        </div>

        <div class="mt-10 overflow-x-auto rounded-3xl border border-slate-200 bg-white shadow-lg">
            <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">Invoice</th>
                        <th class="px-6 py-4 text-left">Client</th>
                        <th class="px-6 py-4 text-left">Total</th>
                        <th class="px-6 py-4 text-left">Paid</th>
                        <th class="px-6 py-4 text-left">Outstanding</th>
                        <th class="px-6 py-4 text-left">Status</th>
                        <th class="px-6 py-4 text-left">Due Date</th>
                        <th class="px-6 py-4 text-left">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 bg-white">
                    <?php if (empty($invoices)): ?>
                        <tr>
                            <td colspan="8" class="px-6 py-10 text-center text-slate-500">No invoices found yet. Create a new invoice to get started.</td>
                        </tr>
                    <?php endif; ?>
                    <?php foreach ($invoices as $invoice): ?>
                    <tr>
                        <td class="px-6 py-4 text-slate-700"><?= htmlspecialchars($invoice['invoice_number']) ?></td>
                        <td class="px-6 py-4 text-slate-700"><?= htmlspecialchars($invoice['customer_name'] ?? 'Customer') ?></td>
                        <td class="px-6 py-4 text-slate-700">GHS <?= number_format($invoice['total_amount'], 2) ?></td>
                        <td class="px-6 py-4 text-slate-700">GHS <?= number_format($invoice['paid_amount'], 2) ?></td>
                        <td class="px-6 py-4 text-slate-700">GHS <?= number_format($invoice['outstanding_amount'], 2) ?></td>
                        <td class="px-6 py-4 text-slate-700"><span class="rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-800"><?= htmlspecialchars($invoice['status']) ?></span></td>
                        <td class="px-6 py-4 text-slate-700"><?= htmlspecialchars($invoice['due_date']) ?></td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/invoices/edit?id=<?= htmlspecialchars($invoice['id']) ?>" title="Edit invoice" class="inline-flex items-center justify-center h-9 w-9 rounded-full border border-slate-300 bg-white text-slate-700 hover:bg-slate-100" aria-label="Edit">
                                    <span class="material-symbols-outlined">edit</span>
                                </a>

                                <a href="<?= htmlspecialchars($baseUrl) ?>/admin/invoices/download?id=<?= htmlspecialchars($invoice['id']) ?>" title="Download PDF" class="inline-flex items-center justify-center h-9 w-9 rounded-full bg-charcoal text-white hover:bg-slate-900" aria-label="Download PDF">
                                    <span class="material-symbols-outlined">download</span>
                                </a>

                                <form method="post" action="<?= htmlspecialchars($baseUrl) ?>/admin/invoices/delete" onsubmit="return confirm('Delete this invoice?');" class="inline-flex" style="margin:0;padding:0;">
                                    <?= CSRF::input() ?>
                                    <input type="hidden" name="invoice_id" value="<?= htmlspecialchars($invoice['id']) ?>">
                                    <button type="submit" title="Delete invoice" class="inline-flex items-center justify-center h-9 w-9 rounded-full bg-red-600 text-white hover:bg-red-700" aria-label="Delete">
                                        <span class="material-symbols-outlined">delete</span>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</main>
</div>
