{% extends "erp_base.html" %}

{% block head_extra %}
<style>
  .mys-compact .erp-table th,
  .mys-compact .erp-table td { padding-top:4px; padding-bottom:4px; }
  .mys-compact .erp-input { padding-top:4px; padding-bottom:4px; }
  .mys-compact td.nm { white-space:nowrap; }
  .mys-compact th.ccol, .mys-compact td.ccol { white-space:nowrap; width:88px; }
  .mys-compact .qcol { width:110px; }
  .mys-compact .qcol .erp-input { width:100px; }
</style>
{% endblock %}

{% block content %}
<section class="mys mys-compact">
  {% set active_tab = 'move' %}
  {% include "malaysia/_nav.html" %}

  <!-- 3분할: 좌(옵션) · 중(낱개) · 우(세트), 버튼 하나 -->
  <form method="post" action="/malaysia/movements/apply">
    <input type="hidden" name="warehouse_code" value="{{ selected_wh }}" />

    <div style="display:grid;grid-template-columns:280px 1fr 1fr;gap:16px;align-items:start;">

      <!-- 좌: 종류 / 날짜 / 메모 -->
      <div class="erp-card">
        <div class="cpg-card-head"><h2>등록 옵션</h2></div>
        <div style="display:flex;flex-direction:column;gap:10px;margin-top:8px;">
          <label class="erp-field"><span>이동 종류 (낱개)</span>
            <select class="erp-select" name="movement_type" required>
              <option value="IN">IN (입고)</option>
              <option value="OUT">OUT (출고)</option>
              <option value="ADJUST">ADJUST (조정 ±)</option>
            </select></label>
          <label class="erp-field"><span>날짜</span>
            <input class="erp-input" type="date" name="movement_date" value="{{ today }}" required /></label>
          <label class="erp-field"><span>메모</span>
            <input class="erp-input" type="text" name="memo" /></label>
        </div>
        <div class="erp-page-actions" style="margin-top:12px;">
          <button type="submit" class="erp-btn erp-btn-primary">일괄 적용</button>
        </div>
      </div>

      <!-- 중: 낱개 -->
      <div class="erp-card">
        <div class="cpg-card-head"><h2>낱개 상품</h2></div>
        <div class="erp-table-wrap" style="margin-top:8px;">
          <table class="erp-table">
            <thead><tr><th class="ccol">Code</th><th>Name</th><th class="qcol">Qty</th></tr></thead>
            <tbody>
              {% for it in individual_items %}
              <tr>
                <td class="ccol">{{ it.item_code }}</td>
                <td class="nm">{{ it.item_name }}</td>
                <td class="qcol"><input class="erp-input" type="number" name="qty_{{ it.item_code }}" placeholder="—" /></td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>

      <!-- 우: 세트 -->
      <div class="erp-card">
        <div class="cpg-card-head"><h2>콤보 상품</h2></div>
        <div class="erp-table-wrap" style="margin-top:8px;">
          <table class="erp-table">
            <thead><tr><th class="ccol">Set Code</th><th>Set Name</th><th class="qcol">Qty</th></tr></thead>
            <tbody>
              {% for it in set_items %}
              <tr>
                <td class="ccol">{{ it.item_code }}</td>
                <td class="nm">{{ it.item_name }}</td>
                <td class="qcol"><input class="erp-input" type="number" min="0" name="qty_{{ it.item_code }}" placeholder="—" /></td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </form>

  <!-- 이동 이력 -->
  <div class="erp-card" style="margin-top:16px;">
    <div class="cpg-card-head" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;">
      <h2>이동 이력{% if filter_date %} · {{ filter_date }}{% endif %}</h2>
      <span style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;">
        <form method="get" style="display:flex;gap:6px;align-items:center;">
          <input type="hidden" name="wh" value="{{ selected_wh }}" />
          {% if filter_type %}<input type="hidden" name="type" value="{{ filter_type }}" />{% endif %}
          <input class="erp-input" type="date" name="date" value="{{ filter_date }}" onchange="this.form.submit()" />
          {% if filter_date %}<a class="erp-btn erp-btn-outline" href="/malaysia/movements?wh={{ selected_wh }}{% if filter_type %}&type={{ filter_type }}{% endif %}">날짜해제</a>{% endif %}
        </form>
        <a class="erp-btn erp-btn-outline" href="/malaysia/movements?wh={{ selected_wh }}{% if filter_date %}&date={{ filter_date }}{% endif %}">전체</a>
        {% for t in ['IN','OUT','ADJUST','STOCKTAKE'] %}
        <a class="erp-btn {% if filter_type==t %}erp-btn-primary{% else %}erp-btn-outline{% endif %}" href="/malaysia/movements?wh={{ selected_wh }}&type={{ t }}{% if filter_date %}&date={{ filter_date }}{% endif %}">{{ t }}</a>
        {% endfor %}
      </span>
    </div>
    <div class="erp-table-wrap">
      <table class="erp-table">
        <thead><tr><th>Date</th><th>Type</th><th>Item</th><th style="text-align:right">Qty</th><th>Memo</th><th>By</th></tr></thead>
        <tbody>
          {% for m in movements %}
          <tr>
            <td>{{ m.date_label }}</td>
            <td>{{ m.movement_type }}</td>
            <td>{{ m.item_code }}</td>
            <td style="text-align:right">{{ m.qty }}</td>
            <td>{{ m.memo or '—' }}</td>
            <td>{{ m.created_by or '—' }}</td>
          </tr>
          {% endfor %}
          {% if not movements %}
          <tr><td colspan="6" class="erp-muted">이동 이력이 없습니다.</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</section>
{% endblock %}