{% extends "erp_base.html" %}

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

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

  <div class="erp-page-actions">
    <a class="erp-btn erp-btn-primary" href="/cupang/">◀◀ 달력</a>
    <a class="erp-btn erp-btn-outline" href="/cupang/box-rules">박스 입수량 설정</a>
  </div>

  {% if not box_rules %}
  <div class="erp-card cpg-form-card">
    <p class="erp-muted">
      등록된 박스 입수량 규칙이 없습니다.
      <a href="/cupang/box-rules">박스 입수량 설정</a>에서 먼저 제품별 입수량을 등록하세요.
    </p>
  </div>
  {% else %}

  <div class="erp-card cpg-form-card cpg-calc-card">
    <div class="cpg-card-head">
      <h2>박스 계산</h2>
      <span class="erp-muted">수량을 고치고 다시 계산하면 결과가 갱신됩니다.</span>
    </div>

    <div class="erp-table-wrap">
      <table class="erp-table cpg-calc-table">
        <thead>
          <tr>
            <th>제품명</th>
            <th class="cpg-calc-num">수량</th>
            <th>박스명</th>
            <th class="cpg-calc-num">입수량</th>
            <th class="cpg-calc-num">박스 수</th>
            <th class="cpg-calc-num">남은 낱개</th>
            <th class="cpg-calc-num">총 필요 박스</th>
            <th>동작</th>
          </tr>
        </thead>
        <tbody id="cpg-calc-rows"></tbody>
      </table>
    </div>

    <div class="erp-page-actions cpg-calc-actions">
      <button type="button" class="erp-btn erp-btn-primary" id="cpg-calc-run">계산 / 재계산</button>
      <button type="button" class="erp-btn erp-btn-outline" id="cpg-calc-add">+ 제품 추가</button>
      <button type="button" class="erp-btn erp-btn-outline" id="cpg-calc-reset">초기화</button>
      <span class="erp-muted" id="cpg-calc-msg"></span>
    </div>
  </div>

  <div class="erp-card cpg-form-card cpg-calc-sum" id="cpg-calc-sum-card" hidden>
    <div class="cpg-card-head">
      <h2>박스 요약</h2>
      <span class="erp-muted">제품별 박스 + 자투리를 모아 담은 혼합 박스</span>
    </div>

    <div class="cpg-sum-kpis" id="cpg-sum-kpis"></div>

    <h3 class="cpg-sum-h3">제품별 박스</h3>
    <div class="cpg-sum-prods" id="cpg-sum-prods"></div>

    <h3 class="cpg-sum-h3">자투리 혼합 박스 <span class="erp-muted" id="cpg-sum-mix-note"></span></h3>
    <div class="cpg-sum-boxes" id="cpg-sum-boxes"></div>
  </div>

  <script type="application/json" id="cpg-calc-rules">{{ box_rules | tojson }}</script>
  <script>
  // 박스 계산기 — 행 추가/삭제, 수량 수정 후 재계산.
  // 계산 자체는 서버(POST /cupang/api/box-calc, store.compute_boxes)에서 수행한다.
  (function () {
    var tbody = document.getElementById("cpg-calc-rows");
    if (!tbody) return;
    var runBtn = document.getElementById("cpg-calc-run");
    var addBtn = document.getElementById("cpg-calc-add");
    var resetBtn = document.getElementById("cpg-calc-reset");
    var msg = document.getElementById("cpg-calc-msg");
    var sumCard = document.getElementById("cpg-calc-sum-card");
    var sumKpis = document.getElementById("cpg-sum-kpis");
    var sumProds = document.getElementById("cpg-sum-prods");
    var sumBoxes = document.getElementById("cpg-sum-boxes");
    var sumMixNote = document.getElementById("cpg-sum-mix-note");

    var rules = [];
    try { rules = JSON.parse(document.getElementById("cpg-calc-rules").textContent || "[]"); } catch (e) {}

    var optionsHtml = '<option value="">— 제품명 선택 —</option>';
    rules.forEach(function (r) {
      var label = (r.product_name_snapshot || r.product_code) +
                  " (" + (r.box_name || "-") + " / " + r.units_per_box + "개)";
      optionsHtml += '<option value="' + esc(r.product_code) + '">' + esc(label) + "</option>";
    });

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

    function addRow(code, qty) {
      var tr = document.createElement("tr");
      tr.className = "cpg-calc-row";
      tr.innerHTML =
        '<td><select class="erp-select cpg-calc-name">' + optionsHtml + "</select></td>" +
        '<td class="cpg-calc-num"><input class="erp-input cpg-calc-qty" type="number" min="0" step="1" value="' + (qty || 0) + '" /></td>' +
        '<td class="cpg-calc-box">—</td>' +
        '<td class="cpg-calc-num cpg-calc-upb">—</td>' +
        '<td class="cpg-calc-num cpg-calc-boxes">—</td>' +
        '<td class="cpg-calc-num cpg-calc-rem">—</td>' +
        '<td class="cpg-calc-num cpg-calc-req">—</td>' +
        '<td><button type="button" class="erp-btn erp-btn-danger cpg-calc-del">삭제</button></td>';
      tbody.appendChild(tr);
      if (code) tr.querySelector(".cpg-calc-name").value = code;
      return tr;
    }

    function clearResults() {
      Array.prototype.forEach.call(tbody.querySelectorAll(".cpg-calc-row"), function (tr) {
        tr.querySelector(".cpg-calc-box").textContent = "—";
        tr.querySelector(".cpg-calc-upb").textContent = "—";
        tr.querySelector(".cpg-calc-boxes").textContent = "—";
        tr.querySelector(".cpg-calc-rem").textContent = "—";
        tr.querySelector(".cpg-calc-req").textContent = "—";
        tr.classList.remove("cpg-calc-warn");
      });
      sumCard.hidden = true;
      sumKpis.innerHTML = "";
      sumProds.innerHTML = "";
      sumBoxes.innerHTML = "";
      sumMixNote.textContent = "";
    }

    function collect() {
      var items = [];
      Array.prototype.forEach.call(tbody.querySelectorAll(".cpg-calc-row"), function (tr) {
        var code = tr.querySelector(".cpg-calc-name").value;
        if (!code) return;
        items.push({ product_code: code, quantity: parseInt(tr.querySelector(".cpg-calc-qty").value, 10) || 0, _tr: tr });
      });
      return items;
    }

    function run() {
      var items = collect();
      if (!items.length) { clearResults(); msg.textContent = "제품명을 하나 이상 선택하세요."; return; }
      msg.textContent = "계산 중…";
      runBtn.disabled = true;
      fetch("/cupang/api/box-calc", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ items: items.map(function (it) { return { product_code: it.product_code, quantity: it.quantity }; }) })
      })
        .then(function (r) { if (!r.ok) throw new Error("http " + r.status); return r.json(); })
        .then(function (data) {
          var results = (data && data.results) || [];
          results.forEach(function (res, i) {
            var tr = items[i] && items[i]._tr;
            if (!tr) return;
            tr.querySelector(".cpg-calc-box").textContent = res.box_name || "—";
            tr.querySelector(".cpg-calc-upb").textContent = res.units_per_box ? res.units_per_box + "개" : "미설정";
            if (res.configured) {
              tr.querySelector(".cpg-calc-boxes").textContent = res.full_boxes + "박스";
              tr.querySelector(".cpg-calc-rem").textContent = res.remainder_units + "개";
              tr.querySelector(".cpg-calc-req").textContent = res.required_boxes + "박스";
              tr.classList.remove("cpg-calc-warn");
            } else {
              tr.querySelector(".cpg-calc-boxes").textContent = "—";
              tr.querySelector(".cpg-calc-rem").textContent = "—";
              tr.querySelector(".cpg-calc-req").textContent = "—";
              tr.classList.add("cpg-calc-warn");
            }
          });
          renderSummary(results, (data && data.mixes) || [], (data && data.grand_total_boxes) || 0);
          msg.textContent = "계산 완료 (" + results.length + "건)";
        })
        .catch(function () { msg.textContent = "계산 실패 — 새로고침 후 다시 시도하세요."; })
        .then(function () { runBtn.disabled = false; });
    }

    // ── 요약 렌더 ─────────────────────────────────────────
    // 상자 그림: fill(0~100) 만큼 안쪽이 차오르고, 뚜껑이 살짝 열린 채 표시.
    function boxSvg(fill) {
      var f = Math.max(0, Math.min(100, fill || 0));
      var h = 40 * f / 100;
      return '' +
        '<svg class="cpg-box-svg" viewBox="0 0 72 64" aria-hidden="true">' +
          '<rect class="cpg-box-fill" x="10" y="' + (54 - h) + '" width="52" height="' + h + '" rx="2" />' +
          '<path class="cpg-box-body" d="M10 20 H62 V54 H10 Z" />' +
          '<path class="cpg-box-flapL" d="M10 20 L2 8 H30 L36 20 Z" />' +
          '<path class="cpg-box-flapR" d="M62 20 L70 8 H42 L36 20 Z" />' +
          '<line class="cpg-box-seam" x1="36" y1="20" x2="36" y2="54" />' +
        '</svg>';
    }

    function renderSummary(results, mixes, grandTotal) {
      var ok = results.filter(function (r) { return r.configured; });
      if (!ok.length) { sumCard.hidden = true; return; }

      var fullSum = 0, mixSum = 0, leftoverSum = 0;
      ok.forEach(function (r) { fullSum += r.full_boxes; leftoverSum += r.remainder_units; });
      mixes.forEach(function (m) { mixSum += m.box_count; });

      sumKpis.innerHTML =
        kpi("총 박스", (grandTotal || (fullSum + mixSum)) + "박스", "제품별 박스 + 혼합 박스") +
        kpi("제품별 박스", fullSum + "박스", "한 제품만 가득 채운 박스") +
        kpi("혼합 박스", mixSum + "박스", "자투리 " + leftoverSum + "개를 모아 담음");

      // 제품별
      var ph = "";
      ok.forEach(function (r) {
        ph += '<div class="cpg-sum-prod">' +
                '<div class="cpg-sum-prod-head">' +
                  '<span class="cpg-sum-prod-name">' + esc(r.product_name) + "</span>" +
                  '<span class="erp-badge erp-badge-neutral">' + esc(r.box_name) + "</span>" +
                "</div>" +
                '<div class="cpg-sum-prod-nums">' +
                  '<strong>' + r.full_boxes + "박스</strong>" +
                  '<span class="erp-muted">' + r.quantity + "개 ÷ " + r.units_per_box + "개</span>" +
                  (r.remainder_units
                    ? '<span class="cpg-sum-left">자투리 ' + r.remainder_units + "개</span>"
                    : '<span class="cpg-sum-exact">딱 맞음</span>') +
                "</div>" +
              "</div>";
      });
      sumProds.innerHTML = ph;

      // 자투리 혼합 박스
      if (!mixes.length) {
        sumMixNote.textContent = "— 자투리 없음";
        sumBoxes.innerHTML = '<p class="erp-muted">남는 낱개가 없습니다. 모든 박스가 딱 맞습니다.</p>';
      } else {
        sumMixNote.textContent = "— 같은 박스명끼리만 섞습니다";
        var bh = "", n = 0;
        mixes.forEach(function (m) {
          m.boxes.forEach(function (b, i) {
            var items = b.items.map(function (it) {
              return '<li><span>' + esc(it.product_name) + "</span><b>" + it.quantity + "개</b></li>";
            }).join("");
            bh += '<div class="cpg-box-card" style="animation-delay:' + (n * 70) + 'ms">' +
                    '<div class="cpg-box-art">' + boxSvg(b.fill_percent) + "</div>" +
                    '<div class="cpg-box-info">' +
                      '<div class="cpg-box-title">' + esc(m.box_name) + " 혼합 #" + (i + 1) + "</div>" +
                      '<ul class="cpg-box-items">' + items + "</ul>" +
                      '<div class="cpg-box-bar"><span style="width:' + b.fill_percent + '%"></span></div>' +
                      '<div class="cpg-box-fillnum">' + b.fill_percent + "% 채움</div>" +
                    "</div>" +
                  "</div>";
            n += 1;
          });
        });
        sumBoxes.innerHTML = bh;
      }
      sumCard.hidden = false;
    }

    function kpi(label, value, hint) {
      return '<div class="cpg-kpi"><span class="cpg-kpi-label">' + esc(label) + "</span>" +
             '<strong class="cpg-kpi-value">' + esc(value) + "</strong>" +
             '<span class="cpg-kpi-hint">' + esc(hint) + "</span></div>";
    }

    tbody.addEventListener("click", function (e) {
      var del = e.target.closest(".cpg-calc-del");
      if (!del) return;
      var rows = tbody.querySelectorAll(".cpg-calc-row");
      if (rows.length <= 1) { addRow("", 0); }
      del.closest("tr").remove();
      msg.textContent = "";
    });

    // 수량/제품을 바꾸면 이전 결과는 지운다 — 낡은 숫자 오독 방지.
    tbody.addEventListener("input", function (e) {
      if (e.target.classList.contains("cpg-calc-qty")) { msg.textContent = "수량 변경됨 — 재계산하세요."; }
    });
    tbody.addEventListener("change", function (e) {
      if (e.target.classList.contains("cpg-calc-name")) { msg.textContent = "제품 변경됨 — 재계산하세요."; }
    });
    tbody.addEventListener("keydown", function (e) {
      if (e.key === "Enter" && e.target.classList.contains("cpg-calc-qty")) { e.preventDefault(); run(); }
    });

    runBtn.addEventListener("click", run);
    addBtn.addEventListener("click", function () { addRow("", 0); });
    resetBtn.addEventListener("click", function () {
      tbody.innerHTML = "";
      addRow("", 0);
      clearResults();
      msg.textContent = "";
    });

    addRow("", 0);
  })();
  </script>
  {% endif %}

</section>
{% endblock %}