{% extends 'base.html' %}
{% load i18n cashbook_extras %}

{% block title %}{% trans "Receipt" %} - {{ ref }}{% endblock %}

{% block content %}
<section class="card">
  <div class="flex-between">
    <h3>{% trans "Receipt" %} • {{ ref }}</h3>
    <div>
      <a class="btn btn--secondary" href="{{ wa_link }}" target="_blank" rel="noopener">
        <i class="bi bi-whatsapp"></i> {% trans "Share via WhatsApp" %}
      </a>
      <a class="btn btn--secondary" href="{% url 'transaction_receipt_pdf' tx.id %}">
        <i class="bi bi-file-pdf"></i> {% trans "Download PDF" %}
      </a>
      <button class="btn btn--secondary" onclick="window.print()">
        <i class="bi bi-printer"></i> {% trans "Print" %}
      </button>
    </div>
  </div>

  <div class="grid grid-2">
    <div>
      {% if biz.logo %}
        <img src="{{ biz.logo.url }}" alt="Logo" style="height:48px; display:block; margin-bottom:6px">
      {% endif %}
      <div class="badge">{{ biz.name }}</div>
      {% if biz.city %}<div>{{ biz.city }}</div>{% endif %}
      {% if biz.country %}<div>{{ biz.country.name }}</div>{% endif %}
    </div>
    <div class="text-right">
      <div><strong>{% trans "Date" %}:</strong> {{ tx.date }}</div>
      <div><strong>{% trans "Reference" %}:</strong> {{ ref }}</div>
    </div>
  </div>

  <hr>

  <div class="grid grid-2">
    <div>
      <h4 style="margin:0">{% trans "Customer" %}</h4>
      {% if tx.contact %}
        <div>{{ tx.contact.name }}</div>
        {% if tx.contact.phone %}<div>{{ tx.contact.phone }}</div>{% endif %}
      {% else %}
        <div>-</div>
      {% endif %}
    </div>
    <div>
      <h4 style="margin:0">{% trans "Payment" %}</h4>
      <div><strong>{% trans "Account" %}:</strong> {{ tx.account.name }}</div>
      <div><strong>{% trans "Amount" %}:</strong> {{ tx.amount }} {{ tx.currency|currency_label }}</div>
    </div>
  </div>

  {% if tx.sale_items.all %}
    <h4 style="margin:16px 0 8px">{% trans "Items" %}</h4>
    <table class="table">
      <thead>
        <tr>
          <th>{% trans "Item" %}</th>
          <th style="width:120px">{% trans "Qty" %}</th>
          <th style="width:160px">{% trans "Price" %}</th>
          <th style="width:160px">{% trans "Amount" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for it in tx.sale_items.all %}
        <tr>
          <td>{{ it.name }}</td>
          <td>{{ it.quantity }}</td>
          <td>{{ it.price }} {{ tx.currency|currency_label }}</td>
          <td>{{ it.amount }} {{ tx.currency|currency_label }}</td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" style="text-align:right"><strong>{% trans "Total" %}</strong></td>
          <td><strong>{{ tx.amount }} {{ tx.currency|currency_label }}</strong></td>
        </tr>
      </tfoot>
    </table>
  {% else %}
    <div class="mt-2">
      <strong>{% trans "Description" %}:</strong>
      <div>{{ tx.description|default:_("Payment received") }}</div>
    </div>
  {% endif %}

  <div class="grid grid-2 mt-3">
    <div class="text-right">
      <h4 style="margin:0">{% trans "QR Code" %}</h4>
      {% if qr_img_data %}
        <img src="{{ qr_img_data }}" alt="QR" width="192" height="192" style="border:1px solid #eee" />
      {% else %}
        <p class="text-muted" style="margin:12px 0 0">{% trans "QR code unavailable" %}</p>
      {% endif %}
    </div>
  </div>
</section>
 
{% endblock %}