<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Courier New', monospace;
      font-size: 12px;
      width: 80mm;
      padding: 8mm;
      color: #000;
      margin: 0 auto;
    }

    .no-print {
      text-align: center;
      margin-bottom: 16px;
    }

    .no-print button {
      padding: 8px 24px;
      background: #4f46e5;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      margin-right: 8px;
    }

    .no-print a {
      padding: 8px 16px;
      background: #e5e7eb;
      color: #333;
      border-radius: 6px;
      text-decoration: none;
      font-size: 14px;
    }

    .center { text-align: center; }
    .bold { font-weight: bold; }
    .divider { border-top: 1px dashed #000; margin: 6px 0; }
    .spacer { margin: 4px 0; }

    .business-name {
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 2px;
    }

    table { width: 100%; border-collapse: collapse; }
    th {
      text-align: left;
      font-weight: bold;
      border-bottom: 1px solid #000;
      padding: 3px 0;
    }
    td { padding: 3px 0; vertical-align: top; }
    .amount { text-align: right; }

    .total-row td {
      font-weight: bold;
      font-size: 13px;
      border-top: 1px dashed #000;
      padding-top: 4px;
    }

    .footer {
      text-align: center;
      margin-top: 10px;
      font-size: 11px;
      color: #555;
    }

    @media print {
      .no-print { display: none; }
      body { margin: 0; }
    }
  </style>
</head>
<body>

  <!-- Print Controls (hidden when printing) -->
  <div class="no-print">
    <button onclick="window.print()">🖨 Print</button>
    <a href="javascript:history.back()">← Back</a>
  </div>

  <!-- Business Header -->
  <div class="business-name">{{ business.name }}</div>
  {% if business.address %}
    <div class="center">{{ business.address }}</div>
  {% endif %}
  {% if business.phone %}
    <div class="center">Tel: {{ business.phone }}</div>
  {% endif %}
  {% if business.email %}
    <div class="center">{{ business.email }}</div>
  {% endif %}

  <div class="divider"></div>

  <!-- Receipt Info -->
  <div class="spacer">
    <div><span class="bold">Receipt:</span> {{ sale.reference }}</div>
    <div><span class="bold">Date:</span> {{ sale.date|date:"d M Y" }}</div>
    {% if sale.customer_display %}
      <div><span class="bold">Customer:</span> {{ sale.customer_display }}</div>
    {% endif %}
    <div><span class="bold">Cashier:</span> {{ sale.created_by.get_full_name|default:sale.created_by.username }}</div>
    <div><span class="bold">Payment:</span> {{ sale.get_payment_method_display }}</div>
  </div>

  <div class="divider"></div>

  <!-- Items -->
  <table>
    <thead>
      <tr>
        <th>Item</th>
        <th class="amount">Qty</th>
        <th class="amount">Price</th>
        <th class="amount">Total</th>
      </tr>
    </thead>
    <tbody>
      {% for item in sale.items.all %}
      <tr>
        <td>{{ item.product.name }}</td>
        <td class="amount">{{ item.quantity }}</td>
        <td class="amount">{{ item.unit_price|floatformat:0 }}</td>
        <td class="amount">{{ item.line_total|floatformat:0 }}</td>
      </tr>
      {% endfor %}

      {% if sale.discount %}
      <tr>
        <td colspan="3">Subtotal</td>
        <td class="amount">{{ sale.subtotal|floatformat:0 }}</td>
      </tr>
      <tr>
        <td colspan="3">Discount</td>
        <td class="amount">- {{ sale.discount|floatformat:0 }}</td>
      </tr>
      {% endif %}

      <tr class="total-row">
        <td colspan="3">TOTAL ({{ business.currency }})</td>
        <td class="amount">{{ sale.total|floatformat:0 }}</td>
      </tr>
    </tbody>
  </table>

  <div class="divider"></div>

  <div class="footer">
    <div>Thank you for your business!</div>
    {% if business.tax_pin %}
      <div>TIN: {{ business.tax_pin }}</div>
    {% endif %}
    <div style="margin-top:6px; font-size:10px;">
      {% now "d M Y H:i" %}
    </div>
  </div>

</body>
</html>
