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

<div class="card">
  <h2 id="form-title">{{ L.add_supplier }}</h2>
  <form method="post" action="{{ url_for('supplier_save') }}" class="grid" id="form">
    <input type="hidden" id="fid" name="id" value="">
    <div class="field">
      <label for="nama_pt">{{ L.col_nama_pt }}</label>
      <input type="text" id="nama_pt" name="nama_pt" placeholder="PT Sumber Laut" required>
    </div>
    <div class="field">
      <label for="kontak">{{ L.col_kontak }}</label>
      <input type="text" id="kontak" name="kontak" placeholder="Budi Santoso / 张三">
    </div>
    <div class="field">
      <label for="telp">{{ L.col_telp }}</label>
      <input type="text" id="telp" name="telp" placeholder="0812-3456-7890">
    </div>
    <div class="field">
      <label for="alamat">{{ L.col_alamat }}</label>
      <input type="text" id="alamat" name="alamat" placeholder="Jakarta Utara">
    </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_supplier }}</h2>
  {% if rows %}
  <table>
    <thead><tr>
      <th>{{ L.col_id }}</th><th>{{ L.col_nama_pt }}</th><th>{{ L.col_kontak }}</th><th>{{ L.col_telp }}</th><th>{{ L.col_alamat }}</th><th>{{ L.col_aksi }}</th>
    </tr></thead>
    <tbody>
      {% for r in rows %}
      <tr>
        <td>{{ r['id'] }}</td>
        <td>{{ r['nama_pt'] }}</td>
        <td>{{ r['kontak'] or '-' }}</td>
        <td>{{ r['telp'] or '-' }}</td>
        <td>{{ r['alamat'] or '-' }}</td>
        <td>
          <button class="btn ghost small" onclick="editSupplier({{ r['id'] }}, '{{ r['nama_pt'] }}', '{{ r['kontak'] or '' }}', '{{ r['telp'] or '' }}', '{{ r['alamat'] or '' }}')">{{ L.btn_edit }}</button>
          <form method="post" action="{{ url_for('supplier_delete', sid=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_supplier }}</div>
  {% endif %}
</div>

<script>
function editSupplier(id, nama_pt, kontak, telp, alamat) {
  document.getElementById('fid').value = id;
  document.getElementById('nama_pt').value = nama_pt;
  document.getElementById('kontak').value = kontak;
  document.getElementById('telp').value = telp;
  document.getElementById('alamat').value = alamat;
  document.getElementById('form-title').textContent = '{{ L.edit_supplier }}';
  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_supplier }}';
  document.getElementById('btn-submit').textContent = '{{ L.btn_save }}';
  document.getElementById('btn-cancel').style.display = 'none';
}
</script>
{% endblock %}