{% extends 'base.html' %}{% load rp_format %}
{% block title %}Retur {{ trx.nomor }}{% endblock %}
{% block content %}
<div class="mb-4"><a href="{% url 'detail_transaksi' trx.pk %}" class="text-xs text-neutral-500 hover:text-red-600"><i class="fas fa-arrow-left mr-1"></i>{{ trx.nomor }}</a><h1 class="page-title mt-1">Retur Barang</h1><p class="page-sub">{{ trx.nama_customer }} · {{ trx.tanggal|date:"d/m/Y" }} · total {{ trx.total|rp }}</p></div>
<form method="post" class="grid lg:grid-cols-3 gap-4">
  {% csrf_token %}
  <div class="card overflow-hidden lg:col-span-2">
    <table class="tbl"><thead><tr><th>Barang</th><th class="num">Harga</th><th class="num">Dibeli</th><th class="num">Sudah Retur</th><th class="num" style="width:110px">Qty Retur</th></tr></thead>
    <tbody>{% for r in items %}
    <tr class="{% if r.sisa <= 0 %}opacity-40{% endif %}"><td class="font-medium">{{ r.it.nama }}</td><td class="num">{{ r.it.harga|rp }}</td><td class="num">{{ r.it.qty }}</td><td class="num text-neutral-500">{{ r.it.qty|kurang:r.sisa }}</td>
    <td><input name="qty_{{ r.it.id }}" value="0" inputmode="numeric" min="0" max="{{ r.sisa }}" class="form-input text-right" data-harga="{{ r.it.harga|floatformat:0 }}" oninput="hitung()" {% if r.sisa <= 0 %}disabled{% endif %}></td></tr>
    {% endfor %}</tbody></table>
  </div>
  <div class="card p-5 space-y-3">
    <div><label class="form-label">Tanggal retur</label><input type="date" name="tanggal" value="{{ today }}" class="form-input" required></div>
    <div><label class="form-label">Alasan</label><input name="alasan" class="form-input" placeholder="Salah ukuran / cacat / berubah pikiran" required></div>
    <div><label class="form-label">Total refund</label><input name="total_refund" id="refund" class="form-input" inputmode="numeric" placeholder="otomatis dari harga barang"><p class="form-help">Kosongkan = harga barang x qty. Isi manual kalau ada potongan (mis. transaksi pakai diskon).</p></div>
    <div class="bg-neutral-50 rounded-lg p-3 text-sm flex justify-between"><span>Nilai barang diretur</span><b id="nilai">Rp 0</b></div>
    <button class="btn btn-accent w-full justify-center" onclick="return confirm('Proses retur? Barang masuk kembali ke stok.')"><i class="fas fa-rotate-left"></i> Proses Retur</button>
  </div>
</form>
{% endblock %}
{% block extra_js %}
<script>
function hitung(){let t=0;document.querySelectorAll('input[name^=qty_]').forEach(i=>{let q=Number(i.value)||0;const mx=Number(i.max);if(q>mx){q=mx;i.value=mx;}t+=q*Number(i.dataset.harga);});document.getElementById('nilai').textContent=rp(t);document.getElementById('refund').placeholder=t?rp(t):'otomatis dari harga barang';}
</script>
{% endblock %}