<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        @page {
            size: a4 portrait;
            margin: 2cm;
            @frame footer_frame {
                -pdf-frame-content: footerContent;
                bottom: 1cm;
                margin-left: 1cm;
                margin-right: 1cm;
                height: 1cm;
            }
        }
        body { font-family: Helvetica, sans-serif; font-size: 12pt; line-height: 1.5; color: #333; }
        .header { text-align: center; border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 20px; }
        .vendor-name { font-size: 24pt; font-weight: bold; text-transform: uppercase; color: #000; }
        .sub-header { font-size: 12pt; color: #666; }
        .meta { margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; background-color: #f9f9f9; }
        .items-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
        .items-table th { border-bottom: 1px solid #000; padding: 8px; text-align: left; background-color: #eee; font-weight: bold; }
        .items-table td { border-bottom: 1px solid #eee; padding: 8px; text-align: left; }
        .totals { text-align: right; margin-top: 20px; }
        .total-row { font-size: 16pt; font-weight: bold; border-top: 1px solid #000; padding-top: 5px; margin-top: 5px; }
        .footer { text-align: center; font-size: 10pt; color: #777; }
        .text-right { text-align: right; }
    </style>
</head>
<body>
    <div class="header">
        <div class="sub-header">RECEIPT FROM</div>
        <div class="vendor-name">{{ receipt.vendor }}</div>
    </div>

    <div class="meta">
        <strong>Date:</strong> {{ receipt.date }}<br>
        <strong>Payment Method:</strong> {{ receipt.get_payment_method_display }}<br>
        <strong>Description:</strong> {{ receipt.description|default:"-" }}
    </div>

    <table class="items-table">
        <thead>
            <tr>
                <th>Item</th>
                <th class="text-right">Amount</th>
            </tr>
        </thead>
        <tbody>
            {% for item in items %}
            <tr>
                <td>{{ item.product }}</td>
                <td class="text-right">R {{ item.amount|floatformat:2 }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <div class="totals">
        <p>Subtotal: R {{ receipt.subtotal|floatformat:2 }}</p>
        <p>VAT ({{ receipt.get_vat_type_display }}): R {{ receipt.vat_amount|floatformat:2 }}</p>
        <p class="total-row">Total: R {{ receipt.total_amount|floatformat:2 }}</p>
    </div>

    <div id="footerContent" class="footer">
        Generated by {{ receipt.user.get_full_name|default:receipt.user.username }} via Fox Fitt App
    </div>
</body>
</html>
