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

<form method="post" action="{{ url_for('pembelian_baru') }}" id="form-trans">

<div class="card">
  <h2>{{ L.header_transaksi }}</h2>
  <div class="grid3">
    <div class="field">
      <label>{{ L.invoice_preview }}</label>
      <input type="text" value="{{ next_inv }}" disabled>
    </div>
    <div class="field">
      <label for="supplier_id">{{ L.col_supplier }}</label>
      <select id="supplier_id" name="supplier_id" required>
        <option value="">{{ L.pilih_supplier }}</option>
        {% for s in suppliers %}
        <option value="{{ s['id'] }}">{{ s['id'] }} — {{ s['nama_pt'] }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="field">
      <label for="tgl">{{ L.col_tgl }}</label>
      <input type="date" id="tgl" name="tgl" value="{{ today }}" required>
    </div>
  </div>
</div>

<div class="card">
  <h2>{{ L.detail_item }}</h2>
  <div class="tbl-wrap">
  <table id="tbl-items">
    <thead><tr>
      <th style="width:34px">{{ L.col_no }}</th>
      <th class="col-ikan">{{ L.col_ikan }}</th>
      <th style="width:120px">{{ L.col_berat }}</th>
      <th style="width:130px">{{ L.col_harga }}</th>
      <th style="width:150px">{{ L.col_jumlah }}</th>
      <th style="width:150px">{{ L.col_jpen }}</th>
      <th style="width:130px">{{ L.col_hpp_final }}</th>
      <th style="width:44px"></th>
    </tr></thead>
    <tbody id="tbody-items"></tbody>
  </table>
  </div>
  <div style="margin-top:10px">
    <button type="button" class="btn ghost" onclick="addRow()">{{ L.add_row }}</button>
  </div>
</div>

<div class="card calc-box">
  <div class="calc-row">
    <span class="calc-lbl">{{ L.total_kg }}</span>
    <span class="calc-val" id="total-kg">0</span>
  </div>
  <div class="calc-row">
    <span class="calc-lbl">{{ L.col_gross }} (Gross Amount)</span>
    <span class="calc-val" id="gross">Rp 0</span>
  </div>
  <div class="calc-row">
    <span class="calc-lbl">{{ L.harga_nota }}</span>
    <span class="calc-inp"><input type="number" id="harga-nota" name="harga_nota" min="0" step="0.01" placeholder="0"></span>
  </div>
  <div class="calc-row">
    <button type="button" class="btn" id="btn-hitung" onclick="doHitung()">{{ L.btn_hitung }}</button>
  </div>
  <div class="calc-row" id="row-selisih" style="display:none">
    <span class="calc-lbl">{{ L.col_selisih }}</span>
    <span class="calc-val" id="selisih">Rp 0</span>
  </div>
  <div class="calc-row" id="row-ppkg" style="display:none">
    <span class="calc-lbl">{{ L.penyesuaian_per_kg }}</span>
    <span class="calc-val" id="ppkg">Rp 0</span>
  </div>
  <div class="calc-row" style="margin-top:8px">
    <button type="submit" class="btn" id="btn-simpan">{{ L.btn_simpan_trans }}</button>
  </div>
  <div class="hint">{{ L.nota_hint }}</div>
</div>

</form>

<!-- Modal pencarian ikan -->
<div class="modal-overlay" id="modal-ikan" onclick="closeModal(event)">
  <div class="modal-box" onclick="event.stopPropagation()">
    <h2 style="margin-bottom:10px">🔍 {{ L.btn_pilih }} {{ L.col_ikan }}</h2>
    <input type="text" id="cari-ikan" placeholder="{{ L.search_ikan }}" oninput="filterIkan()">
    <div class="modal-table">
      <table>
        <thead><tr>
          <th style="width:90px">{{ L.col_kode }}</th>
          <th>{{ L.col_nama }}</th>
          <th style="width:80px">{{ L.col_satuan }}</th>
        </tr></thead>
        <tbody id="tb-ikan"></tbody>
      </table>
    </div>
  </div>
</div>

<script>
const IKAN = {{ ikan_json|safe }};
const fmtRp = new Intl.NumberFormat('id-ID', { maximumFractionDigits: 0 });
const fmtNum = new Intl.NumberFormat('id-ID', { maximumFractionDigits: 2 });
let hitungDone = false;
let targetTr = null;

function addRow(ikanId, qty, harga) {
  const tb = document.getElementById('tbody-items');
  const tr = document.createElement('tr');
  tr.className = 'it-row';
  const no = tb.children.length + 1;
  let nm = '{{ L.pilih_ikan }}';
  if (ikanId) { const ik = IKAN.find(x => String(x.id) === String(ikanId)); if (ik) nm = ik.nama; }
  tr.innerHTML = `
    <td class="no">${no}</td>
    <td class="col-ikan">
      <button type="button" class="btn ghost small btn-pilih" onclick="openModal(this.closest('tr'))">🔍 {{ L.btn_pilih }}</button>
      <span class="nama-pilih">${nm}</span>
      <input type="hidden" name="ikan_id[]" class="ikan-id" value="${ikanId||''}">
    </td>
    <td><input type="number" name="qty[]" class="qty" min="0" step="0.01" value="${qty||''}" placeholder="0" oninput="recompute()"></td>
    <td><input type="number" name="harga[]" class="harga" min="0" step="0.01" value="${harga||''}" placeholder="0" oninput="recompute()"></td>
    <td class="jumlah num">0</td>
    <td class="jpen num">-</td>
    <td class="hpp num">-</td>
    <td><button type="button" class="btn danger small" onclick="delRow(this)">✕</button></td>`;
  tb.appendChild(tr);
  renumber();
  recompute();
}

function delRow(btn) {
  const tb = document.getElementById('tbody-items');
  if (tb.children.length <= 1) {
    tb.innerHTML = '';
    addRow();
    return;
  }
  btn.closest('tr').remove();
  renumber();
  recompute();
}

function renumber() {
  const tb = document.getElementById('tbody-items');
  [...tb.children].forEach((tr, i) => { tr.querySelector('.no').textContent = i + 1; });
}

/* --- Modal pencarian ikan --- */
function openModal(tr) {
  targetTr = tr;
  document.getElementById('cari-ikan').value = '';
  renderModalList();
  document.getElementById('modal-ikan').classList.add('open');
  document.getElementById('cari-ikan').focus();
}
function closeModal(ev) {
  if (ev && ev.target.id !== 'modal-ikan') return;
  document.getElementById('modal-ikan').classList.remove('open');
}
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });
function filterIkan() { renderModalList(); }
function renderModalList() {
  const q = (document.getElementById('cari-ikan').value || '').toLowerCase().trim();
  const tb = document.getElementById('tb-ikan');
  tb.innerHTML = '';
  for (const ik of IKAN) {
    const hay = (ik.kode + ' ' + ik.nama + ' ' + ik.id).toLowerCase();
    if (q && !hay.includes(q)) continue;
    const tr = document.createElement('tr');
    tr.innerHTML = `<td>${ik.kode}</td><td>${ik.nama}</td><td>${ik.satuan}</td>`;
    tr.onclick = () => pilihIkan(ik.id, ik.nama);
    tb.appendChild(tr);
  }
  if (!tb.children.length) {
    tb.innerHTML = '<tr><td colspan="3" class="empty">Tidak ditemukan / 未找到</td></tr>';
  }
}
function pilihIkan(id, nama) {
  if (!targetTr) return;
  targetTr.querySelector('.ikan-id').value = id;
  targetTr.querySelector('.nama-pilih').textContent = nama;
  targetTr.querySelector('.btn-pilih').textContent = '🔍';
  closeModal();
  recompute();
}

/* --- Kalkulasi --- */
function recompute() {
  let totalKg = 0, gross = 0;
  document.querySelectorAll('#tbody-items tr.it-row').forEach(tr => {
    const qty = parseFloat(tr.querySelector('.qty').value) || 0;
    const harga = parseFloat(tr.querySelector('.harga').value) || 0;
    const jumlah = qty * harga;
    tr.querySelector('.jumlah').textContent = fmtRp.format(jumlah);
    totalKg += qty; gross += jumlah;
    if (hitungDone) {
      const ppkg = getPpkg();
      const hpp = Math.round(harga + ppkg);
      tr.querySelector('.jpen').textContent = fmtRp.format(Math.round(hpp * qty));
      tr.querySelector('.hpp').textContent = fmtRp.format(hpp);
    }
  });
  document.getElementById('total-kg').textContent = fmtNum.format(totalKg);
  document.getElementById('gross').textContent = 'Rp ' + fmtRp.format(gross);
  if (hitungDone) showSelisih();
}

function getPpkg() {
  const totalKg = parseFloat(document.getElementById('total-kg').textContent.replace(/\./g,'').replace(/,/g,'.')) || 0;
  const gross = parseFloat(document.getElementById('gross').textContent.replace(/[^\d,.-]/g,'').replace(/\./g,'').replace(/,/g,'.')) || 0;
  const hargaNota = parseFloat(document.getElementById('harga-nota').value) || 0;
  const selisih = hargaNota - gross;
  return totalKg ? Math.round(selisih / totalKg) : 0;
}

function showSelisih() {
  const totalKg = parseFloat(document.getElementById('total-kg').textContent.replace(/\./g,'').replace(/,/g,'.')) || 0;
  const gross = parseFloat(document.getElementById('gross').textContent.replace(/[^\d,.-]/g,'').replace(/\./g,'').replace(/,/g,'.')) || 0;
  const hargaNota = parseFloat(document.getElementById('harga-nota').value) || 0;
  const selisih = hargaNota - gross;
  const ppkg = totalKg ? Math.round(selisih / totalKg) : 0;
  document.getElementById('selisih').textContent = 'Rp ' + fmtRp.format(selisih);
  document.getElementById('ppkg').textContent = 'Rp ' + fmtRp.format(ppkg);
  document.getElementById('row-selisih').style.display = '';
  document.getElementById('row-ppkg').style.display = '';
}

function doHitung() {
  const nota = parseFloat(document.getElementById('harga-nota').value);
  if (isNaN(nota)) { alert('Isi harga nota dulu / 请先填写发票金额'); return; }
  hitungDone = true;
  recompute();
}

document.addEventListener('DOMContentLoaded', () => addRow());
</script>
{% endblock %}