{% extends "erp_base.html" %}

{% macro rack_row(cell, items, entry=None, disabled=False) %}
<div class="rk-row">
  <input type="hidden" name="rk_cell" value="{{ cell }}">
  <select name="rk_sku" class="erp-input rk-sku" {% if disabled %}disabled{% endif %}>
    <option value="">— 선택 —</option>
    {% for it in items %}
    <option value="{{ it.item_code }}" {% if entry and entry.sku_code == it.item_code %}selected{% endif %}>{{ it.item_code }} · {{ it.item_name }}</option>
    {% endfor %}
  </select>
  <input class="erp-input rk-upb" type="number" min="1" name="rk_upb" placeholder="입수량"
         value="{{ entry.units_per_box if entry else '' }}" {% if disabled %}disabled{% endif %} />
  <span class="rk-x">×</span>
  <input class="erp-input rk-box" type="number" min="1" name="rk_box" placeholder="박스"
         value="{{ entry.box_count if entry else '' }}" {% if disabled %}disabled{% endif %} />
  <span class="rk-sub">{{ (entry.units_per_box * entry.box_count) if entry else 0 }}</span>
  {% if not disabled %}<button type="button" class="rk-del" title="행 삭제">×</button>{% endif %}
</div>
{% endmacro %}

{% block head_extra %}
<style>
  .mys-compact .erp-table th,
  .mys-compact .erp-table td { padding-top:4px; padding-bottom:4px; }
  /* 랙 보드 */
  .rack-board { display:flex; gap:24px; flex-wrap:wrap; }
  .rack-side { flex:1 1 480px; }
  .rack-side h3 { text-align:center; margin:0 0 8px; }
  .rack-row { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; margin-bottom:6px; }
  .rack-cell {
    border:1px solid #cbd5e1; border-radius:6px; padding:4px;
    background:#f8fafc; min-height:84px; display:flex; flex-direction:column;
  }
  .rack-cell-head {
    display:flex; align-items:center; justify-content:space-between;
    font-size:11px; font-weight:600; color:#475569; margin-bottom:3px;
  }
  .rack-cell-head .rk-cell-total { color:#0f172a; }
  .rack-cell-head .rk-add {
    border:1px solid #94a3b8; background:#fff; border-radius:4px;
    width:18px; height:18px; line-height:1; padding:0; cursor:pointer; font-weight:700;
  }
  .rk-rows { display:flex; flex-direction:column; gap:3px; }
  .rk-row { display:grid; grid-template-columns: 1fr 38px 8px 32px 30px 16px; gap:2px; align-items:center; }
  .rk-row .rk-sku { font-size:10px; padding:1px 2px; }
  .rk-row .rk-upb, .rk-row .rk-box { font-size:10px; padding:1px 2px; text-align:right; }
  .rk-row .rk-x { font-size:10px; color:#94a3b8; text-align:center; }
  .rk-row .rk-sub { font-size:10px; text-align:right; color:#2563eb; font-weight:600; }
  .rk-row .rk-del {
    border:none; background:transparent; color:#dc2626; cursor:pointer;
    font-size:13px; line-height:1; padding:0;
  }
</style>
{% endblock %}

{% block content %}
<section class="mys mys-compact">
  {% include "malaysia/_i18n.html" %}
  <div class="erp-page-actions">
    <a class="erp-btn erp-btn-primary" href="/malaysia/stocktakes?wh={{ stocktake.warehouse_code }}">◀◀ 조사 목록</a>
  </div>

  <form method="post" action="/malaysia/stocktakes/{{ stocktake.id }}/rack/bulk">
    <div style="display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start;">

      <!-- 좌: 정보 + 동작 -->
      <div class="erp-card">
        <div class="cpg-card-head"><h2><span class="i18n">재고조사</span> #{{ stocktake.id }}</h2></div>
        <div style="margin-top:8px;display:flex;flex-direction:column;gap:6px;">
          <div><span class="erp-muted">날짜</span><br>{{ stocktake.stocktake_date }}</div>
          <div><span class="erp-muted">창고</span><br>{{ stocktake.warehouse_code }}</div>
          <div><span class="erp-muted">상태</span><br>
            {% if stocktake.status=='finalized' %}<span class="erp-badge erp-badge-success">확정</span>
            {% elif stocktake.status=='cancelled' %}<span class="erp-badge erp-badge-neutral">취소</span>
            {% else %}<span class="erp-badge erp-badge-inverse">작성중</span>{% endif %}
          </div>
          {% if stocktake.finalized_at %}<div><span class="erp-muted">확정시각</span><br>{{ stocktake.finalized_at }}</div>{% endif %}
        </div>

        {% if missing_bom %}
        <p style="color:#b91c1c;font-weight:600;margin-top:10px;">⚠ BOM 없는 콤보: {{ missing_bom|join(', ') }}</p>
        {% endif %}

        <p class="erp-muted" style="margin-top:10px;font-size:12px;">
          <span class="i18n">랙 칸에 아이템·입수량(박스당 개수)·박스 수를 입력하면 낱개/콤보 수량이 자동 집계됩니다. 한 칸에 여러 아이템은 + 로 추가하세요.</span>
        </p>

        {% if is_draft %}
        <div class="erp-page-actions" style="margin-top:12px;">
          <button type="submit" class="erp-btn erp-btn-primary">입력 저장</button>
        </div>
        {% endif %}
      </div>

      <!-- 우: 랙 보드 -->
      <div class="erp-card">
        <div class="cpg-card-head"><h2>랙 입력 (박스 단위)</h2></div>
        <div class="rack-board" style="margin-top:10px;">
          {% for side in rack_layout %}
          <div class="rack-side">
            <h3>Side {{ side.side }}</h3>
            {% for row in side.rows %}
            <div class="rack-row">
              {% for col in row.cols %}
                {% for cell in col %}
                <div class="rack-cell" data-cell="{{ cell }}">
                  <div class="rack-cell-head">
                    <span>{{ cell }}</span>
                    <span class="rk-cell-total">∑ <b class="rk-cell-total-v">0</b></span>
                    {% if is_draft %}<button type="button" class="rk-add" title="아이템 추가">+</button>{% endif %}
                  </div>
                  <div class="rk-rows">
                    {% set entries = rack_by_cell.get(cell, []) %}
                    {% for e in entries %}
                      {{ rack_row(cell, rack_items, entry=e, disabled=(not is_draft)) }}
                    {% endfor %}
                    {% if is_draft and not entries %}
                      {{ rack_row(cell, rack_items) }}
                    {% endif %}
                  </div>
                </div>
                {% endfor %}
              {% endfor %}
            </div>
            {% endfor %}
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </form>

  <!-- JS 클론용 빈 행 템플릿(옵션 1벌만 보유) -->
  <template id="rk-row-tpl">
    {{ rack_row('', rack_items) }}
  </template>

  <!-- 확정/취소/삭제 -->
  <div class="erp-page-actions" style="margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;">
    {% if is_draft %}
      {% if is_admin %}
      <form method="post" action="/malaysia/stocktakes/{{ stocktake.id }}/finalize"
            onsubmit="return confirm('확정하면 전산 재고와의 차이가 STOCKTAKE 이동으로 기록되고, 이후 수정 불가합니다. 계속?');">
        <button type="submit" class="erp-btn erp-btn-primary" {% if missing_bom %}disabled title="BOM 누락 콤보 해결 필요"{% endif %}>확정 (전산 반영)</button>
      </form>
      {% endif %}
      <form method="post" action="/malaysia/stocktakes/{{ stocktake.id }}/cancel" onsubmit="return confirm('이 조사를 취소합니다. 계속?');">
        <button type="submit" class="erp-btn erp-btn-danger">취소</button>
      </form>
    {% endif %}
    {% if is_super %}
    <form method="post" action="/malaysia/stocktakes/{{ stocktake.id }}/delete"
          onsubmit="return confirm('이 재고조사를 완전 삭제합니다(되돌릴 수 없음). 계속?');">
      <button type="submit" class="erp-btn erp-btn-danger">삭제 (슈퍼관리자)</button>
    </form>
    {% endif %}
  </div>

  <!-- 최종 계산 결과 (낱개 기준) -->
  <div class="erp-card" style="margin-top:16px;">
    <div class="cpg-card-head"><h2>최종 계산 (낱개 기준)</h2></div>
    <span class="erp-muted">total_qty = direct_qty(낱개 직접) + from_set_qty(콤보 분해)</span>
    <div class="erp-table-wrap">
      <table class="erp-table">
        <thead><tr><th>Item Code</th><th>Product Name</th><th style="text-align:right">Direct</th><th style="text-align:right">From Set</th><th style="text-align:right">Total</th></tr></thead>
        <tbody>
          {% for r in result_rows %}
          <tr>
            <td>{{ r.item_code }}</td>
            <td>{{ r.item_name }}</td>
            <td style="text-align:right">{{ r.direct_qty }}</td>
            <td style="text-align:right">{{ r.from_set_qty }}</td>
            <td style="text-align:right;font-weight:600;">{{ r.total_qty }}</td>
          </tr>
          {% endfor %}
          {% if not result_rows %}
          <tr><td colspan="5" class="erp-muted">입력된 수량이 없습니다.</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</section>
<script src="/static/malaysia_rack.js?v=20260614a"></script>
{% endblock %}