<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Receipt - {{ order.order_number }}</title>
    <style>
        body { font-family: 'Courier New', Courier, monospace; color: #000; background: #fff; padding: 20px; width: 300px; margin: 0 auto; }
        .text-center { text-align: center; }
        .header { border-bottom: 1px dashed #000; padding-bottom: 10px; margin-bottom: 10px; }
        .item { display: flex; justify-content: space-between; margin-bottom: 5px; }
        .footer { border-top: 1px dashed #000; margin-top: 10px; padding-top: 10px; }
        .total { font-weight: bold; font-size: 1.2em; }
        @media print {
            .no-print { display: none; }
        }
    </style>
</head>
<body onload="window.print()">
    <div class="no-print" style="margin-bottom: 20px; text-align: center;">
        <button onclick="window.print()">Print Receipt</button>
        <button onclick="location.href='{% url 'pos' %}'">Back to POS</button>
    </div>

    <div class="text-center header">
        <h2 style="margin-bottom: 0;">SEARING SANDWICHES</h2>
        <p style="margin-top: 5px;">Quality Fresh Food</p>
        <p>Order #: {{ order.order_number }}</p>
        <p>{{ order.created_at|date:"Y-m-d H:i" }}</p>
    </div>

    <div class="items">
        {% for item in order.items.all %}
        <div class="item">
            <span>{{ item.quantity }} x {{ item.menu_item.name }}</span>
            <span>{{ item.price_at_order|floatformat:2 }}</span>
        </div>
        {% endfor %}
    </div>

    <div class="footer">
        <div class="item total">
            <span>TOTAL</span>
            <span>{{ order.total_price|floatformat:2 }} EGP</span>
        </div>
        {% if order.customer_notes %}
        <div style="margin-top: 10px; font-size: 0.9em;">
            <strong>Notes:</strong><br>
            {{ order.customer_notes }}
        </div>
        {% endif %}
    </div>

    <div class="text-center" style="margin-top: 20px;">
        <p>THANK YOU FOR YOUR ORDER!</p>
        <p style="font-size: 0.8em;">Visit us again soon</p>
    </div>
</body>
</html>