<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body { font-family: DejaVu Sans, sans-serif; font-size: 12px; color: #222; }
        h1 { font-size: 20px; margin-bottom: 0; }
        .meta { margin-bottom: 20px; color: #555; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { padding: 8px; border-bottom: 1px solid #ddd; text-align: left; }
        th { background: #f4f4f4; }
        .totals { margin-top: 20px; width: 40%; margin-left: auto; }
        .totals td { border: none; padding: 4px 8px; }
        .totals .grand { font-weight: bold; font-size: 14px; border-top: 2px solid #333; }
    </style>
</head>
<body>
    <h1>Invoice <?= esc($invoice['invoice_number']) ?></h1>
    <div class="meta">
        Status: <?= esc(ucfirst($invoice['status'])) ?><br>
        Due date: <?= esc($invoice['due_date']) ?><br>
        Issued: <?= esc($invoice['created_at']) ?>
    </div>

    <table>
        <thead>
            <tr><th>Description</th><th>Qty</th><th>Unit Price</th><th>Total</th></tr>
        </thead>
        <tbody>
            <?php foreach ($items as $item): ?>
                <tr>
                    <td><?= esc($item['description']) ?></td>
                    <td><?= esc($item['quantity']) ?></td>
                    <td><?= number_format($item['unit_price'], 2) ?></td>
                    <td><?= number_format($item['line_total'], 2) ?></td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>

    <table class="totals">
        <tr><td>Subtotal</td><td><?= number_format($invoice['subtotal'], 2) ?> <?= esc($invoice['currency']) ?></td></tr>
        <tr><td>Tax (<?= esc($invoice['tax_percentage']) ?>%)</td><td><?= number_format($invoice['tax_amount'], 2) ?> <?= esc($invoice['currency']) ?></td></tr>
        <tr class="grand"><td>Total</td><td><?= number_format($invoice['total'], 2) ?> <?= esc($invoice['currency']) ?></td></tr>
    </table>
</body>
</html>
