<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
        .container { max-width: 600px; margin: 0 auto; border: 1px solid #ddd; padding: 20px; }
        .header { text-align: center; border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 20px; }
        .vendor-name { font-size: 24px; font-weight: bold; text-transform: uppercase; color: #000; }
        .meta { margin-bottom: 20px; }
        .items-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
        .items-table th, .items-table td { border-bottom: 1px solid #eee; padding: 8px; text-align: left; }
        .items-table th { background-color: #f8f9fa; }
        .totals { text-align: right; margin-top: 20px; }
        .total-row { font-size: 18px; font-weight: bold; }
        .footer { margin-top: 30px; font-size: 12px; color: #777; text-align: center; border-top: 1px solid #eee; padding-top: 10px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div style="font-size: 14px; color: #666;">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 style="text-align: right;">Amount</th>
                </tr>
            </thead>
            <tbody>
                {% for item in items %}
                <tr>
                    <td>{{ item.product }}</td>
                    <td style="text-align: right;">R {{ item.amount }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

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

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