{% extends "base.html" %}
{% block content %}
<h1>{{ L.master_ikan }}</h1>
<p class="sub">{{ L.hpp_hint }}</p>

<div class="card">
  <h2 id="form-title">{{ L.add_ikan }}</h2>
  <form method="post" action="{{ url_for('ikan_save') }}" class="grid" id="form">
    <input type="hidden" id="fid" name="id" value="">
    <div class="field">
      <label>{{ L.kode_auto }}</label>
      <input type="text" value="{{ next_kode }}" disabled>
      <div class="hint">{{ L.next_code }}: {{ next_kode }}</div>
    </div>
    <div class="field">
      <label for="nama">{{ L.col_nama }}</label>
      <input type="text" id="nama" name="nama" placeholder="Ikan Kakap / 石斑鱼" required>
    </div>
    <div class="field">
      <label for="satuan">{{ L.satuan_label }}</label>
      <input type="text" id="satuan" name="satuan" value="Kg">
    </div>
    <div class="field">
      <label for="hpp">{{ L.hpp_label }}</label>
      <input type="number" id="hpp" name="hpp" min="0" step="0.01" value="0" placeholder="0">
    </div>
    <div class="field">
      <button type="submit" class="btn" id="btn-submit">{{ L.btn_save }}</button>
      <button type="button" class="btn ghost" id="btn-cancel" style="display:none" onclick="cancelEdit()">{{ L.btn_cancel }}</button>
    </div>
  </form>
</div>

<div class="card">
  <h2>{{ L.table_ikan }}</h2>
  {% if rows %}
  <table>
    <thead><tr>
      <th>{{ L.col_kode }}</th><th>{{ L.col_nama }}</th><th>{{ L.col_satuan }}</th><th>{{ L.col_stok }}</th><th>{{ L.col_hpp }}</th><th>{{ L.col_aksi }}</th>
    </tr></thead>
    <tbody>
      {% for r in rows %}
      <tr>
        <td>{{ r['kode'] }}</td>
        <td>{{ r['nama'] }}</td>
        <td>{{ r['satuan'] }}</td>
        <td>{{ "{:,.1f}".format(r['stok'] or 0) }}</td>
        <td>Rp {{ "{:,.0f}".format(r['hpp']) }}</td>
        <td>
          <button class="btn ghost small" onclick="editIkan({{ r['id'] }}, '{{ r['nama'] }}', '{{ r['satuan'] }}', {{ r['hpp'] }})">{{ L.btn_edit }}</button>
          <form method="post" action="{{ url_for('ikan_delete', iid=r['id']) }}" style="display:inline" onsubmit="return confirm('{{ L.delete_confirm }}')">
            <button type="submit" class="btn danger small">{{ L.btn_delete }}</button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="empty">{{ L.empty_ikan }}</div>
  {% endif %}
</div>

<script>
function editIkan(id, nama, satuan, hpp) {
  document.getElementById('fid').value = id;
  document.getElementById('nama').value = nama;
  document.getElementById('satuan').value = satuan;
  document.getElementById('hpp').value = hpp;
  document.getElementById('form-title').textContent = '{{ L.edit_ikan }}';
  document.getElementById('btn-submit').textContent = '{{ L.btn_update }}';
  document.getElementById('btn-cancel').style.display = 'inline-block';
  window.scrollTo({ top: 0, behavior: 'smooth' });
}
function cancelEdit() {
  document.getElementById('form').reset();
  document.getElementById('fid').value = '';
  document.getElementById('form-title').textContent = '{{ L.add_ikan }}';
  document.getElementById('btn-submit').textContent = '{{ L.btn_save }}';
  document.getElementById('btn-cancel').style.display = 'none';
}
</script>
{% endblock %}