{% extends "erp_base.html" %}

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

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

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

  <div class="cpg-prod-layout">

    <!-- ── 왼쪽: 미라네 주방 상품 목록 (다중선택 → 등록) ── -->
    <div class="erp-card cpg-form-card cpg-prod-left">
      <div class="cpg-card-head">
        <h2>미라네 주방 상품</h2>
        <span class="erp-muted">
          {% if search_enabled %}선택(다중) 후 등록. 이미 등록된 항목은 진한 회색.{% else %}
          검색 비활성: {{ search_reason }}{% endif %}
        </span>
      </div>

      {% if search_enabled %}
      <div class="cpg-inline-form" style="margin-bottom:10px;">
        <input class="erp-input" type="text" id="cpg-prod-q" placeholder="이름/코드 필터" style="min-width:200px" />
        <button type="button" class="erp-btn erp-btn-primary" id="cpg-prod-register">선택 등록</button>
      </div>
      <div id="cpg-src-list" class="cpg-src-list"><p class="erp-muted">불러오는 중…</p></div>
      {% else %}
      <p class="erp-muted">ITEMCODE_DB_URL / ITEMCODE_SEARCH_SQL 설정 후 사용 가능합니다.</p>
      {% endif %}
    </div>

    <!-- ── 오른쪽: 등록된 제품명 ── -->
    <div class="erp-card cpg-form-card cpg-prod-right">
      <div class="cpg-card-head"><h2>등록된 제품명 ({{ products|length }})</h2>
        <span class="erp-muted">폼의 제품명 드롭다운에 노출</span></div>
      <div class="erp-table-wrap cpg-reg-scroll">
        <table class="erp-table">
          <thead><tr><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>{% if p.active %}<span class="erp-badge erp-badge-success">활성</span>{% else %}<span class="erp-badge erp-badge-neutral">비활성</span>{% endif %}</td>
              <td>
                <div class="cpg-row-actions">
                  {% if p.active %}
                  <form method="post" action="/cupang/products/{{ p.id }}/active" class="cpg-inline-form">
                    <input type="hidden" name="active" value="0" />
                    <button type="submit" class="erp-btn erp-btn-outline">비활성</button>
                  </form>
                  {% else %}
                  <form method="post" action="/cupang/products/{{ p.id }}/active" class="cpg-inline-form">
                    <input type="hidden" name="active" value="1" />
                    <button type="submit" class="erp-btn erp-btn-outline">활성</button>
                  </form>
                  {% endif %}
                  <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>
                </div>
              </td>
            </tr>
            {% endfor %}
            {% if not products %}
            <tr><td colspan="4" class="erp-muted">등록된 제품명이 없습니다. 왼쪽에서 선택해 등록하세요.</td></tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>

  </div>
</section>

{% if search_enabled %}
<script type="application/json" id="cpg-registered">{{ registered_codes | tojson }}</script>
<script>
(function () {
  var listBox = document.getElementById("cpg-src-list");
  var filter = document.getElementById("cpg-prod-q");
  var regBtn = document.getElementById("cpg-prod-register");
  var registered = {};
  try { (JSON.parse(document.getElementById("cpg-registered").textContent || "[]")).forEach(function(c){ registered[c]=true; }); } catch(e){}
  var all = [];
  var selected = {};

  function esc(s){ var d=document.createElement("div"); d.textContent=s||""; return d.innerHTML; }

  function render() {
    var term = (filter.value || "").trim().toLowerCase();
    var rows = all.filter(function (it) {
      if (!term) return true;
      return (it.code + " " + it.name).toLowerCase().indexOf(term) >= 0;
    });
    if (!rows.length) { listBox.innerHTML = '<p class="erp-muted">결과 없음</p>'; return; }
    var html = "";
    rows.forEach(function (it) {
      var cls = "cpg-src-item";
      if (registered[it.code]) cls += " cpg-registered";
      if (selected[it.code]) cls += " is-selected";
      html += '<div class="' + cls + '" data-code="' + esc(it.code) + '">' +
              '<span class="cpg-src-name">' + esc(it.name) + '</span>' +
              '<span class="cpg-src-code">' + esc(it.code) + '</span>' +
              '</div>';
    });
    listBox.innerHTML = html;
  }

  listBox.addEventListener("click", function (e) {
    var item = e.target.closest(".cpg-src-item");
    if (!item) return;
    var code = item.getAttribute("data-code");
    if (selected[code]) { delete selected[code]; item.classList.remove("is-selected"); }
    else { selected[code] = true; item.classList.add("is-selected"); }
  });

  filter.addEventListener("input", render);

  regBtn.addEventListener("click", function () {
    var items = all.filter(function (it) { return selected[it.code]; })
                   .map(function (it) { return { code: it.code, name: it.name }; });
    if (!items.length) { alert("등록할 상품을 선택하세요."); return; }
    regBtn.disabled = true;
    fetch("/cupang/products/bulk", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ items: items })
    }).then(function (r) { return r.json(); })
      .then(function () { location.reload(); })
      .catch(function () { regBtn.disabled = false; alert("등록 실패"); });
  });

  fetch("/cupang/api/products/all")
    .then(function (r) { return r.json(); })
    .then(function (data) {
      all = (data && data.results) || [];
      if (!all.length) { listBox.innerHTML = '<p class="erp-muted">itemcode_db 결과 없음</p>'; return; }
      render();
    })
    .catch(function () { listBox.innerHTML = '<p class="erp-muted">목록 로드 실패</p>'; });
})();
</script>
{% endif %}
{% endblock %}