{% extends "erp_base.html" %}

{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css" />{% endblock %}

{% block content %}
<section class="cpg">

  <div class="erp-page-actions">
    <a class="erp-btn erp-btn-outline" href="/cupang/">← 달력</a>
  </div>

  <!-- itemcode_db 검색 → 등록 -->
  <div class="erp-card cpg-form-card">
    <div class="cpg-card-head">
      <h2>itemcode_db 에서 제품 검색·등록</h2>
      <span class="erp-muted">
        {% if search_enabled %}제품코드/제품명으로 검색 후 "등록".{% else %}
        상품 검색 비활성: {{ search_reason }} — 아래에서 수동 등록하세요.{% endif %}
      </span>
    </div>

    {% if search_enabled %}
    <div class="cpg-inline-form">
      <input class="erp-input" type="text" id="cpg-prod-q" placeholder="제품코드 또는 제품명" style="min-width:240px" />
      <button type="button" class="erp-btn erp-btn-outline" id="cpg-prod-search">검색</button>
    </div>
    <div id="cpg-prod-results" class="cpg-prod-results"></div>
    {% endif %}
  </div>

  <!-- 수동 등록 -->
  <div class="erp-card cpg-form-card">
    <div class="cpg-card-head"><h2>제품명 수동 등록 / 수정</h2>
      <span class="erp-muted">같은 제품코드는 덮어씁니다.</span></div>
    <form method="post" action="/cupang/products" class="cpg-rule-grid">
      <label class="erp-field"><span>제품코드 *</span>
        <input class="erp-input" type="text" name="product_code" required placeholder="예: MS-1001" /></label>
      <label class="erp-field"><span>제품명 *</span>
        <input class="erp-input" type="text" name="product_name" required placeholder="예: 미라네 1호세트" /></label>
      <label class="erp-field"><span>정렬</span>
        <input class="erp-input" type="number" name="sort_order" value="0" /></label>
      <div><button type="submit" class="erp-btn erp-btn-primary">등록</button></div>
    </form>
  </div>

  <!-- 등록된 제품명 목록 -->
  <div class="erp-card cpg-form-card">
    <div class="cpg-card-head"><h2>등록된 제품명 ({{ products|length }})</h2>
      <span class="erp-muted">폼의 제품명 드롭다운에 노출됩니다.</span></div>
    <div class="erp-table-wrap">
      <table class="erp-table">
        <thead><tr><th>제품명</th><th>제품코드</th><th>정렬</th><th>상태</th><th></th></tr></thead>
        <tbody>
          {% for p in products %}
          <tr {% if not p.active %}style="opacity:.55"{% endif %}>
            <td>{{ p.product_name }}</td>
            <td>{{ p.product_code }}</td>
            <td>{{ p.sort_order }}</td>
            <td>{% if p.active %}<span class="erp-badge erp-badge-success">활성</span>{% else %}<span class="erp-badge erp-badge-neutral">비활성</span>{% endif %}</td>
            <td>
              {% if p.active %}
              <form method="post" action="/cupang/products/{{ p.id }}/delete" class="cpg-inline-form"
                    onsubmit="return confirm('비활성화합니다. 계속할까요?');">
                <button type="submit" class="erp-btn erp-btn-danger">비활성화</button>
              </form>
              {% else %}—{% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</section>

{% if search_enabled %}
<script>
(function () {
  var q = document.getElementById("cpg-prod-q");
  var btn = document.getElementById("cpg-prod-search");
  var box = document.getElementById("cpg-prod-results");
  function esc(s){ var d=document.createElement("div"); d.textContent=s||""; return d.innerHTML; }
  function run() {
    var term = (q.value || "").trim();
    if (!term) { box.innerHTML = ""; return; }
    box.innerHTML = '<p class="erp-muted">검색중…</p>';
    fetch("/cupang/api/products/search?q=" + encodeURIComponent(term))
      .then(function (r) { return r.json(); })
      .then(function (data) {
        var rows = (data && data.results) || [];
        if (!rows.length) { box.innerHTML = '<p class="erp-muted">결과 없음</p>'; return; }
        var html = '<table class="erp-table"><thead><tr><th>제품코드</th><th>제품명</th><th>구분</th><th></th></tr></thead><tbody>';
        rows.forEach(function (it) {
          html += '<tr><td>' + esc(it.code) + '</td><td>' + esc(it.name) + '</td><td>' + esc(it.type) + '</td>' +
            '<td><form method="post" action="/cupang/products" class="cpg-inline-form">' +
            '<input type="hidden" name="product_code" value="' + esc(it.code) + '">' +
            '<input type="hidden" name="product_name" value="' + esc(it.name) + '">' +
            '<button type="submit" class="erp-btn erp-btn-outline">등록</button></form></td></tr>';
        });
        html += "</tbody></table>";
        box.innerHTML = html;
      })
      .catch(function () { box.innerHTML = '<p class="erp-muted">검색 실패</p>'; });
  }
  btn.addEventListener("click", run);
  q.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); run(); } });
})();
</script>
{% endif %}
{% endblock %}