{% extends 'base.html' %}
{% block title %}{{ so.nomor }}{% endblock %}
{% block content %}
<div class="mb-4"><a href="{% url 'opname_list' %}" class="text-xs text-neutral-500 hover:text-red-600"><i class="fas fa-arrow-left mr-1"></i>Stock Opname</a>
<h1 class="page-title mt-1 font-mono">{{ so.nomor }}</h1><p class="page-sub">{{ so.tanggal|date:"d F Y" }} · oleh {{ so.dibuat_oleh.username|default:"-" }} · {{ so.catatan|default:"tanpa catatan" }}</p></div>
<div class="grid grid-cols-3 gap-3 mb-4">
  <div class="stat"><p class="lbl">Varian Dihitung</p><p class="val">{{ so.jml_item }}</p></div>
  <div class="stat"><p class="lbl">Varian Selisih</p><p class="val {% if so.jml_selisih %}text-red-600{% endif %}">{{ so.jml_selisih }}</p></div>
  <div class="stat"><p class="lbl">Total Selisih</p><p class="val {% if so.total_selisih < 0 %}text-red-600{% elif so.total_selisih > 0 %}text-green-700{% endif %}">{{ so.total_selisih|stringformat:"+d" }} psg</p></div>
</div>
<div class="card overflow-hidden"><table class="tbl">
<thead><tr><th>Varian</th><th class="num">Sistem</th><th class="num">Fisik</th><th class="num">Selisih</th></tr></thead>
<tbody>{% for it in so.items.all %}
<tr class="{% if it.selisih != 0 %}bg-red-50/50{% endif %}"><td class="font-medium">{{ it.nama }}</td><td class="num text-neutral-500">{{ it.stok_sistem }}</td><td class="num font-semibold">{{ it.stok_fisik }}</td>
<td class="num font-bold {% if it.selisih < 0 %}text-red-600{% elif it.selisih > 0 %}text-green-700{% else %}text-neutral-300{% endif %}">{% if it.selisih %}{{ it.selisih|stringformat:"+d" }}{% else %}0{% endif %}</td></tr>
{% endfor %}</tbody></table></div>
{% endblock %}