{% extends "base.html" %}
{% block title %}Riwayat Stok - FinansialApp{% endblock %}
{% block page_title %}Riwayat Stok: {{ produk.nama }}{% endblock %}
{% block content %}

<div class="mb-3">
  <a href="/stok" class="btn btn-outline-secondary btn-sm">
    <i class="fas fa-arrow-left me-1"></i>Kembali ke Stok
  </a>
</div>

<div class="row g-3 mb-3">
  <div class="col-md-2"><div class="card kpi p-3">
    <div class="kpi-lbl">Kode</div><div class="kpi-val">{{ produk.kode }}</div>
  </div></div>
  <div class="col-md-3"><div class="card kpi p-3">
    <div class="kpi-lbl">Stok Saat Ini</div>
    <div class="kpi-val {% if produk.stok <= 0 %}text-danger{% elif produk.stok <= produk.min_stok %}text-warning{% else %}text-success{% endif %}">
      {{ produk.stok|qty }} {{ produk.satuan }}
    </div>
  </div></div>
  {% if can.inventory_hpp %}
    <div class="col-md-3"><div class="card kpi grn p-3">
      <div class="kpi-lbl">Harga Beli</div><div class="kpi-val text-rp">{{ produk.harga_beli|rp }}</div>
    </div></div>
    <div class="col-md-4"><div class="card kpi yel p-3">
      <div class="kpi-lbl">Nilai Stok</div>
      <div class="kpi-val text-rp">{{ (produk.stok * produk.harga_beli)|rp }}</div>
    </div></div>
  {% else %}
    <div class="col-md-7">
      <div class="alert alert-warning h-100 d-flex align-items-center mb-0" style="font-size:.86rem">
        <i class="fas fa-lock me-2"></i>Harga beli, nilai stok, dan nilai pergerakan disembunyikan oleh hak akses.
      </div>
    </div>
  {% endif %}
</div>

<div class="card">
  <div class="card-header bg-white py-2 px-3">
    <span class="fw-semibold"><i class="fas fa-history me-2 text-primary"></i>Riwayat Pergerakan</span>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover table-sm mb-0">
        <thead class="table-light">
          <tr>
            <th class="ps-3">Tanggal</th>
            <th>Jenis</th>
            <th class="text-end">Qty</th>
            {% if can.inventory_hpp %}
              <th class="text-end">Harga</th>
              <th class="text-end">Nilai</th>
            {% endif %}
            <th>Keterangan</th>
            <th>Jurnal</th>
          </tr>
        </thead>
        <tbody>
          {% for r in riwayat %}
          <tr>
            <td class="ps-3 text-muted">{{ r.tanggal|tgl }}</td>
            <td>
              {% if r.jenis == 'MASUK' %}<span class="badge badge-masuk">Masuk</span>
              {% elif r.jenis == 'KELUAR' %}<span class="badge badge-keluar">Keluar</span>
              {% else %}<span class="badge bg-secondary">Penyesuaian</span>{% endif %}
            </td>
            <td class="text-end fw-semibold {% if r.jenis == 'KELUAR' %}text-danger{% else %}text-success{% endif %}">
              {% if r.jenis == 'KELUAR' %}-{% elif r.jenis == 'MASUK' %}+{% endif %}{{ r.qty|qty }}
            </td>
            {% if can.inventory_hpp %}
              <td class="text-end text-rp">{{ r.harga|rp }}</td>
              <td class="text-end text-rp">{{ (r.qty * r.harga)|rp }}</td>
            {% endif %}
            <td class="text-muted">{{ r.keterangan or '-' }}</td>
            <td>
              {% if r.jurnal_id %}
              <a href="/transaksi/{{ r.jurnal_id }}" class="btn btn-xs btn-outline-secondary">{{ r.nomor_tx or ('#' ~ r.jurnal_id) }}</a>
              {% else %}<span class="text-muted">-</span>{% endif %}
            </td>
          </tr>
          {% else %}
          <tr><td colspan="{% if can.inventory_hpp %}7{% else %}5{% endif %}" class="text-center text-muted py-4">Belum ada pergerakan stok</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}