{{ define "content" }}
<div class="page-head">
  <h1>{{ T "journal.detail.title" }} #{{ .Sale.ReceiptNo }}</h1>
  <div style="display:flex; gap:.4rem; align-items:center">
    {{ if eq .Sale.SaleType "sale" }}
    <a class="btn" href="/refund/{{ .Sale.ReceiptNo }}">↩ {{ T "refund.title" }}</a>
    {{ end }}
    <button class="btn" hx-post="/api/print/receipt/{{ .Sale.ReceiptNo }}"
            hx-target="#reprint-msg" hx-swap="innerHTML">🖨 {{ T "journal.reprint" }}</button>
    <span id="reprint-msg" aria-live="polite"></span>
    <a class="btn secondary" href="/journal">← {{ T "journal.title" }}</a>
  </div>
</div>

<div style="text-align:center; margin:.4rem 0">{{ barcodesvg .Sale.ReceiptNo }}</div>

{{ if or .Original .Returns }}
<p class="muted" style="margin-bottom:.6rem">
  {{ if .Original }}{{ T "refund.original_ref" }}: <a href="/journal/{{ .Original }}">#{{ .Original }}</a>{{ end }}
  {{ if .Returns }}{{ T "refund.returns_ref" }}:
    {{ range .Returns }}<a href="/journal/{{ . }}">#{{ . }}</a> {{ end }}
  {{ end }}
</p>
{{ end }}

{{ if .InvoicingOn }}
<div class="card" style="margin-bottom:.8rem">
  {{ if .HasInvoice }}
  <p>🧾 {{ if eq .Invoice.Kind "credit_note" }}{{ T "invoice.credit_note" }}{{ else }}{{ T "invoice.title" }}{{ end }}:
    <a href="/invoice/{{ .Invoice.DisplayNo }}"><strong>{{ .Invoice.DisplayNo }}</strong></a>
    — {{ .Invoice.CustomerName }}</p>
  {{ else if and (eq .Sale.SaleType "sale") (eq .Sale.Status "completed") }}
  <h3>🧾 {{ T "invoice.issue_title" }}</h3>
  <form hx-post="/api/invoices/issue" hx-target="#invoice-msg" hx-swap="innerHTML"
        style="display:flex; gap:.4rem; flex-wrap:wrap; align-items:end">
    <input type="hidden" name="receipt_no" value="{{ .Sale.ReceiptNo }}">
    <label>{{ T "invoice.customer_name" }} <input type="text" name="customer_name" required></label>
    <label>{{ T "invoice.customer_address" }} <input type="text" name="customer_address"></label>
    <label>{{ T "invoice.customer_vat_no" }} <input type="text" name="customer_vat_no"></label>
    <button class="btn" type="submit">{{ T "invoice.issue_btn" }}</button>
  </form>
  <div id="invoice-msg" class="muted" aria-live="polite" style="min-height:1.2rem"></div>
  {{ end }}
</div>
{{ end }}

<div class="catalog-layout">
  <div class="card">
    <div style="display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.7rem">
      <span class="tag">{{ .Sale.Status }}</span>
      <span class="tag">{{ .Sale.SaleType }}</span>
      <span class="tag">{{ .Sale.TenderType }}</span>
      <span class="tag">{{ if .Sale.Offline }}{{ T "journal.detail.offline" }}{{ else }}{{ T "journal.detail.online" }}{{ end }}</span>
      <span class="tag">{{ T "journal.detail.sync" }}: {{ .Sale.SyncStatus }}</span>
      <span class="tag">{{ .Sale.CreatedAt }}</span>
    </div>
    <table class="table">
      <thead><tr><th>{{ T "journal.detail.item" }}</th><th>{{ T "journal.detail.sku" }}</th><th>{{ T "journal.detail.qty" }}</th><th>{{ T "journal.detail.price" }}</th><th>{{ T "journal.detail.discount" }}</th><th>{{ T "journal.detail.total" }}</th></tr></thead>
      <tbody>
        {{ range .Sale.Lines }}
          <tr>
            <td class="catalog-name">{{ .Name }}</td>
            <td class="muted">{{ .SKU }}</td>
            <td>{{ .Qty }}</td>
            <td>{{ money .UnitPrice }}</td>
            <td>{{ if .LineDiscount }}-{{ money .LineDiscount }}{{ else }}—{{ end }}</td>
            <td>{{ money .LineTotal }}</td>
          </tr>
        {{ end }}
      </tbody>
    </table>
  </div>

  <div>
    <div class="card">
      <h3>{{ T "journal.detail.totals" }}</h3>
      <table class="table">
        <tbody>
          <tr><td>{{ T "journal.detail.subtotal" }}</td><td style="text-align:end">{{ money .Sale.Subtotal }}</td></tr>
          {{ if .Sale.DiscountTotal }}<tr><td>{{ T "journal.detail.discount" }}</td><td style="text-align:end">-{{ money .Sale.DiscountTotal }}</td></tr>{{ end }}
          <tr><td>{{ T "journal.detail.tax" }}</td><td style="text-align:end">{{ money .Sale.TaxTotal }}</td></tr>
          <tr><td><strong>{{ T "journal.detail.total" }}</strong></td><td style="text-align:end"><strong>{{ money .Sale.Total }}</strong></td></tr>
        </tbody>
      </table>
    </div>
    <div class="card" style="margin-top:1rem">
      <h3>{{ T "journal.detail.payments" }}</h3>
      {{ if .Sale.Payments }}
      <table class="table">
        <tbody>
          {{ range .Sale.Payments }}
            <tr>
              <td><strong>{{ .Method }}</strong>{{ if .Reference }}<br><small class="muted">{{ .Reference }}</small>{{ end }}</td>
              <td style="text-align:end">{{ money .Amount }}{{ if .ChangeGiven }}<br><small class="muted">{{ T "journal.detail.change" }} {{ money .ChangeGiven }}</small>{{ end }}</td>
            </tr>
          {{ end }}
        </tbody>
      </table>
      {{ else }}<p class="empty">—</p>{{ end }}
    </div>
  </div>
</div>
{{ end }}