{% extends "pos_base.html" %}
{% block title %}Struk {{ sale.nomor_struk }}{% endblock %}
{% block head %}
<style>
.receipt-wrap{display:flex;justify-content:center;padding:1.5rem}
.receipt{width:360px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:1rem;color:#111827}
.r-title{text-align:center;font-weight:900;font-size:1.05rem}
.r-sub{text-align:center;color:#64748b;font-size:.76rem}
.r-line{border-top:1px dashed #cbd5e1;margin:.75rem 0}
.r-row{display:flex;justify-content:space-between;gap:1rem;font-size:.82rem;margin:.2rem 0}
.r-item{font-size:.82rem;margin-bottom:.55rem}
.r-item .name{font-weight:700}
.r-item .meta{display:flex;justify-content:space-between;color:#475569}
.r-total{font-size:1rem;font-weight:900}
@media print{.receipt-wrap{padding:0}.receipt{border:0;border-radius:0;width:76mm}.no-print{display:none!important}}
</style>
{% endblock %}
{% block content %}
<div class="receipt-wrap">
  <div>
    <div class="d-flex gap-2 mb-3 no-print">
      <a href="/pos/kasir" class="btn btn-outline-secondary btn-sm btn-pos"><i class="fas fa-arrow-left me-1"></i>Kembali</a>
      <button onclick="window.print()" class="btn btn-success btn-sm btn-pos"><i class="fas fa-print me-1"></i>Cetak</button>
    </div>
    <div class="receipt">
      <div class="r-title">{{ pos_s.pos_struk_nama }}</div>
      {% if pos_s.pos_struk_subtitle %}<div class="r-sub">{{ pos_s.pos_struk_subtitle }}</div>{% endif %}
      {% if pos_s.pos_struk_alamat %}<div class="r-sub" style="margin-top:.15rem;white-space:pre-line">{{ pos_s.pos_struk_alamat }}</div>{% endif %}
      {% if pos_s.pos_struk_telepon %}<div class="r-sub">{{ pos_s.pos_struk_telepon }}</div>{% endif %}
      <div class="r-line"></div>
      {% if pos_s.pos_struk_header %}
      <div class="text-center" style="font-size:.76rem;color:#475569;white-space:pre-line">{{ pos_s.pos_struk_header }}</div>
      <div class="r-line"></div>
      {% endif %}
      <div class="r-row"><span>No</span><strong>{{ sale.nomor_struk }}</strong></div>
      <div class="r-row"><span>Tanggal</span><strong>{{ sale.tanggal|tgl }}</strong></div>
      <div class="r-row"><span>{{ pos_s.pos_struk_label_kasir or 'Kasir' }}</span><strong>{{ sale.kasir_nama or '-' }}</strong></div>
      {% if pos_s.pos_struk_show_customer and sale.customer %}<div class="r-row"><span>Customer</span><strong>{{ sale.customer }}</strong></div>{% endif %}
      {% if pos_s.pos_struk_show_payment %}<div class="r-row"><span>Bayar</span><strong>{{ sale.metode_bayar }}</strong></div>{% endif %}
      <div class="r-line"></div>
      {% for it in items %}
      <div class="r-item">
        <div class="name">{{ it.deskripsi }}</div>
        <div class="meta">
          <span>{{ it.qty|qty }} {{ it.satuan }} x {{ it.harga|rp }}</span>
          <strong>{{ it.subtotal|rp }}</strong>
        </div>
      </div>
      {% endfor %}
      <div class="r-line"></div>
      {% set item_total = namespace(v=0) %}
      {% for it in items %}{% set item_total.v = item_total.v + it.subtotal %}{% endfor %}
      {% if item_total.v > sale.total %}
      <div class="r-row"><span>Subtotal</span><strong>{{ item_total.v|rp }}</strong></div>
      <div class="r-row"><span>Diskon</span><strong>- {{ (item_total.v - sale.total)|rp }}</strong></div>
      {% endif %}
      <div class="r-row r-total"><span>Total</span><span>{{ sale.total|rp }}</span></div>
      {% if sale.metode_bayar == 'TUNAI' %}
      <div class="r-row"><span>Tunai</span><strong>{{ sale.bayar|rp }}</strong></div>
      <div class="r-row"><span>Kembalian</span><strong>{{ sale.kembalian|rp }}</strong></div>
      {% endif %}
      <div class="r-line"></div>
      {% if pos_s.pos_struk_footer %}
      <div class="text-center" style="font-size:.76rem;color:#64748b;white-space:pre-line">{{ pos_s.pos_struk_footer }}</div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}