{% extends "erp_base.html" %}

{% block head_extra %}
<style>
  .rv-board { display:flex; flex-direction:column; gap:18px; }
  .rv-side { width:100%; }
  .rv-side h3 { text-align:center; margin:0 0 8px; }
  .rv-row { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; margin-bottom:6px; }
  .rv-cell {
    border:1px solid #cbd5e1; border-radius:6px; padding:7px;
    background:#f8fafc; min-height:104px; display:flex; flex-direction:column; min-width:0;
    cursor:grab; transition:box-shadow .12s, border-color .12s, background .12s;
  }
  .rv-cell.is-empty { background:#fff; }
  .rv-cell.is-selected { border-color:#2563eb; box-shadow:0 0 0 2px #93c5fd inset; background:#eff6ff; }
  .rv-cell.is-dragover { border-color:#2563eb; background:#dbeafe; }
  .rv-cell.dragging { opacity:.45; }
  .rv-cell-head {
    display:flex; align-items:center; justify-content:space-between;
    font-size:14px; font-weight:700; color:#475569; margin-bottom:5px;
    border-bottom:1px solid #e2e8f0; padding-bottom:4px;
  }
  .rv-cell-head .rv-pick {
    flex:0 0 auto; width:16px; height:16px; margin:0; cursor:pointer;
  }
  .rv-items { display:flex; flex-direction:column; gap:4px; }
  .rv-item { font-size:14px; line-height:1.3; }
  .rv-item .rv-name { font-weight:700; color:#0f172a; }
  .rv-item .rv-calc { color:#475569; }
  .rv-item .rv-qty { color:#2563eb; font-weight:700; }
  .rv-empty-note { font-size:13px; color:#cbd5e1; }

  /* 수정됨 표시: 저장 버튼을 빨강으로 강조 */
  #rv-save-btn.is-dirty {
    background:#dc2626 !important; border-color:#dc2626 !important; color:#fff !important;
  }
  #rv-save-btn.is-dirty:hover { background:#b91c1c !important; border-color:#b91c1c !important; }

  /* ── 인쇄 미리보기 모달 ── */
  .rvp-overlay {
    display:none; position:fixed; inset:0; z-index:2000;
    background:rgba(15,23,42,.55); overflow:auto; padding:24px;
  }
  .rvp-overlay.is-open { display:block; }
  .rvp-toolbar {
    position:sticky; top:0; display:flex; gap:8px; justify-content:flex-end;
    align-items:center; margin-bottom:16px;
  }
  .rvp-toolbar .rvp-title { margin-right:auto; color:#fff; font-weight:700; font-size:16px; }
  .rvp-pages { display:flex; flex-direction:column; gap:18px; align-items:center; }
  /* 화면 미리보기: A4 가로 비율(297:210) 시트 — 여백 최소, 글자 최대 */
  .rvp-sheet {
    background:#fff; width:min(100%, 1000px); aspect-ratio:297/210;
    box-shadow:0 8px 24px rgba(0,0,0,.3); border-radius:4px;
    display:flex; flex-direction:column; padding:1.5%; box-sizing:border-box;
  }
  .rvp-list { flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:4%; }
  .rvp-line { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.5%; }
  .rvp-line .rvp-name { font-weight:900; font-size:7vmin; color:#0f172a; line-height:1.05; }
  .rvp-line .rvp-size { font-weight:900; font-size:14vmin; color:#0f172a; line-height:1; }
  .rvp-line .rvp-calc { font-weight:800; font-size:6vmin; color:#1e293b; margin-top:1.5%; }
  .rvp-line .rvp-calc .rvp-box { font-size:9.5vmin; font-weight:900; }
  .rvp-empty { text-align:center; font-weight:900; font-size:9vmin; color:#94a3b8; margin:auto 0; }

  /* ── 실제 인쇄 ── */
  @media print {
    /* 가로 인쇄: 상하 여백(=프린터 좌우)을 0으로, 좌우만 4mm 유지해 세로 공간 최대 확보 */
    @page { size: A4 landscape; margin: 0 4mm; }
    /* 비인쇄 요소는 display:none 으로 공간까지 제거 — visibility:hidden 은
       공간이 남아 overlay(static)가 아래로 밀려 1페이지가 비던 문제 방지. */
    .erp-sidebar, .erp-topbar { display:none !important; }
    /* 앱 셸이 height:100vh + overflow:hidden 으로 한 화면만 보이게 잘라서,
       인쇄 시 둘째 칸부터 잘려 1장만 나오던 문제. 인쇄에선 조상들의
       높이·오버플로 제한을 풀어 모든 칸(sheet)이 흐르게 한다. */
    html, body.erp-app-body, .erp-app, .erp-content, .erp-page, .mys {
      height:auto !important; min-height:0 !important; max-height:none !important;
      overflow:visible !important;
    }
    .erp-content { margin:0 !important; }
    .erp-page { padding:0 !important; }
    body.printing-cells .mys > *:not(.rvp-overlay) { display:none !important; }
    body.printing-cells .rvp-overlay {
      display:block !important; position:static !important; padding:0 !important;
      background:#fff !important; overflow:visible !important;
    }
    .rvp-toolbar { display:none !important; }
    /* flex 컨테이너면 Chrome이 자식의 page-break를 무시해 여러 칸이 한 장에
       뭉쳐 잘림. block 으로 바꿔 칸(파렛트)마다 한 장씩 끊어 인쇄. */
    .rvp-pages { display:block !important; gap:0 !important; }
    .rvp-sheet {
      width:100% !important; height:100vh !important; aspect-ratio:auto !important;
      box-shadow:none !important; border-radius:0 !important;
      padding:2mm !important;
      /* break-before 가 Chrome에서 더 안정적: 첫 칸 제외 매 칸을 새 장으로. */
      break-before:page; page-break-before:always;
    }
    .rvp-sheet:first-child { break-before:auto; page-break-before:auto; }
    /* 인쇄 시 글씨 더 크게(멀리서도 보이게) — cm 기준.
       칸에 상품이 1개일 때 기준. 2개·3개 이상이면 한 장에 다 들어가도록 단계 축소. */
    .rvp-line .rvp-name { font-size:2.6cm; }
    .rvp-line .rvp-size { font-size:5.5cm; }
    .rvp-line .rvp-calc { font-size:1.8cm; }
    .rvp-line .rvp-calc .rvp-box { font-size:3cm; }
    .rvp-empty { font-size:3cm; }
    /* 상품 2개: 절반 가량으로 축소(2개 합쳐도 A4 가로 1장에 맞게) */
    .rvp-sheet.rvp-multi .rvp-line .rvp-name { font-size:1.5cm; }
    .rvp-sheet.rvp-multi .rvp-line .rvp-size { font-size:3.1cm; }
    .rvp-sheet.rvp-multi .rvp-line .rvp-calc { font-size:1.05cm; }
    .rvp-sheet.rvp-multi .rvp-line .rvp-calc .rvp-box { font-size:1.7cm; }
    /* 상품 3개 이상: 더 작게 */
    .rvp-sheet.rvp-many .rvp-line .rvp-name { font-size:1cm; }
    .rvp-sheet.rvp-many .rvp-line .rvp-size { font-size:2cm; }
    .rvp-sheet.rvp-many .rvp-line .rvp-calc { font-size:0.75cm; }
    .rvp-sheet.rvp-many .rvp-line .rvp-calc .rvp-box { font-size:1.2cm; }
  }

  /* ── 창고 POG (전체 도면 A4 가로 1장) ── */
  .pog-overlay {
    display:none; position:fixed; inset:0; z-index:2000;
    background:rgba(15,23,42,.55); overflow:auto; padding:24px;
  }
  .pog-overlay.is-open { display:block; }
  .pog-toolbar {
    position:sticky; top:0; display:flex; gap:8px; justify-content:flex-end;
    align-items:center; margin-bottom:16px;
  }
  .pog-toolbar .pog-title { margin-right:auto; color:#fff; font-weight:700; font-size:16px; }
  .pog-pages { display:flex; flex-direction:column; gap:18px; align-items:center; }
  /* A4 가로(297:210) 시트 — 면(Side A/B/Ground)마다 1장.
     container-type:size → 자식이 cqh/cqw 로 시트 크기에 맞춰 확대/축소 */
  .pog-sheet {
    background:#fff; width:min(100%, 1180px); aspect-ratio:297/210;
    box-shadow:0 8px 24px rgba(0,0,0,.3); border-radius:4px;
    padding:1.8cqh 1.4cqw; box-sizing:border-box;
    display:flex; flex-direction:column; overflow:hidden;
    container-type:size;
  }
  .pog-sheet .pog-sheet-head {
    display:flex; justify-content:space-between; align-items:baseline;
    font-weight:800; color:#0f172a; margin-bottom:1.2cqh; flex:0 0 auto;
  }
  .pog-sheet .pog-sheet-head .pog-t { font-size:2.8cqh; }
  .pog-sheet .pog-sheet-head .pog-meta { font-size:1.7cqh; color:#475569; font-weight:600; }
  /* 면 1개가 시트 높이를 꽉 채운다(행 flex 균등 분배 → 칸 커짐) */
  .pog-sheet .rv-side { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
  .pog-sheet .rv-side h3 { display:none; }
  .pog-sheet .rv-row { flex:1 1 0; gap:1cqw; margin:0 0 1cqh; min-height:0; }
  .pog-sheet .rv-row:last-child { margin-bottom:0; }
  .pog-sheet .rv-cell {
    height:auto; min-height:0; padding:0.7cqh 0.8cqw; border-radius:4px;
    cursor:default; overflow:hidden; background:#f8fafc; justify-content:flex-start;
  }
  .pog-sheet .rv-cell.is-empty { background:#fff; }
  .pog-sheet .rv-cell-head {
    font-size:1.55cqh; font-weight:800; margin-bottom:0.5cqh; padding-bottom:0.35cqh;
  }
  .pog-sheet .rv-pick { display:none !important; }
  .pog-sheet .rv-items { gap:0.4cqh; }
  .pog-sheet .rv-item { font-size:1.55cqh; line-height:1.25; }
  .pog-sheet .rv-empty-note { font-size:1.55cqh; }

  @media print {
    body.printing-pog .erp-sidebar, body.printing-pog .erp-topbar { display:none !important; }
    body.printing-pog .mys > *:not(.pog-overlay) { display:none !important; }
    body.printing-pog .pog-overlay {
      display:block !important; position:static !important; padding:0 !important;
      background:#fff !important; overflow:visible !important;
    }
    body.printing-pog .pog-toolbar { display:none !important; }
    body.printing-pog .pog-pages { display:block !important; }
    /* 면(시트)마다 한 장. height:100vh → 컨테이너=페이지라 cqh 가 그대로 맞음 */
    body.printing-pog .pog-sheet {
      width:100% !important; height:100vh !important; aspect-ratio:auto !important;
      box-shadow:none !important; border-radius:0 !important;
      page-break-inside:avoid; break-before:page; page-break-before:always;
    }
    body.printing-pog .pog-sheet:first-child { break-before:auto; page-break-before:auto; }
  }
</style>
{% endblock %}

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

  <div class="erp-card">
    <div class="cpg-card-head" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;">
      <h2>창고 랙 보기</h2>
      <span class="erp-muted">
        {% if stocktake %}
          <span class="i18n">기준 재고조사</span>: #{{ stocktake.id }} · {{ stocktake.stocktake_date }}
          {% 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 %}
        {% else %}
          <span class="i18n">표시할 재고조사가 없습니다.</span>
        {% endif %}
      </span>
    </div>

    {% if stocktake %}
    <div class="erp-page-actions" style="margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
      <span class="erp-muted i18n" style="flex:1 1 auto;min-width:0;">칸을 드래그해 다른 칸으로 옮기면 구성이 이동(채워진 칸끼리는 맞교환)됩니다. 칸 번호는 그대로입니다. 인쇄할 칸은 체크 후 인쇄하세요.</span>
      <a href="/malaysia/rack/export?wh={{ selected_wh }}" class="erp-btn erp-btn-outline">다운로드</a>
      <button type="button" id="rv-print-btn" class="erp-btn erp-btn-outline">인쇄 미리보기</button>
      <button type="button" id="rv-pog-btn" class="erp-btn erp-btn-outline">창고POG 출력</button>
      <button type="button" id="rv-save-btn" class="erp-btn erp-btn-primary">저장</button>
    </div>
    {% endif %}

    <form id="rv-save-form" method="post" action="/malaysia/rack/save" style="display:none;">
      <input type="hidden" name="warehouse_code" value="{{ selected_wh }}" />
      <div id="rv-save-fields"></div>
    </form>

    <div class="rv-board" id="rv-board" style="margin-top:10px;"
         data-wh="{{ selected_wh }}"
         data-stocktake="{% if stocktake %}#{{ stocktake.id }} · {{ stocktake.stocktake_date }}{% endif %}">
      {% for side in rack_layout %}
      <div class="rv-side">
        <h3>{{ side.label }}</h3>
        {% for row in side.rows %}
        <div class="rv-row">
          {% for col in row.cols %}
            {% for cell in col %}
            {% set entries = rack_by_cell.get(cell, []) %}
            <div class="rv-cell {% if not entries %}is-empty{% endif %}"
                 data-cell="{{ cell }}" draggable="true"
                 data-entries='[{% for e in entries %}{"sku":"{{ e.sku_code }}","ko":{{ (ko_names.get(e.sku_code, e.item_name)) | tojson }},"en":{{ e.item_name | tojson }},"upb":{{ e.units_per_box }},"box":{{ e.box_count }}}{% if not loop.last %},{% endif %}{% endfor %}]'>
              <div class="rv-cell-head">
                <span class="rv-code">{{ cell }}</span>
                <input type="checkbox" class="rv-pick" title="인쇄 선택" draggable="false" />
              </div>
              <div class="rv-items"><!-- JS 렌더 --></div>
            </div>
            {% endfor %}
          {% endfor %}
        </div>
        {% endfor %}
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- 인쇄 미리보기 모달 -->
  <div class="rvp-overlay" id="rvp-overlay">
    <div class="rvp-toolbar">
      <span class="rvp-title i18n">인쇄 미리보기</span>
      <button type="button" id="rvp-print" class="erp-btn erp-btn-primary">인쇄</button>
      <button type="button" id="rvp-close" class="erp-btn erp-btn-outline">닫기</button>
    </div>
    <div class="rvp-pages" id="rvp-pages"></div>
  </div>

  <!-- 창고 POG 미리보기 모달 (전체 도면 1장) -->
  <div class="pog-overlay" id="pog-overlay">
    <div class="pog-toolbar">
      <span class="pog-title i18n">창고 POG 미리보기</span>
      <button type="button" id="pog-print" class="erp-btn erp-btn-primary">인쇄</button>
      <button type="button" id="pog-close" class="erp-btn erp-btn-outline">닫기</button>
    </div>
    <div class="pog-pages" id="pog-pages"></div>
  </div>
</section>
<script src="/static/malaysia_rack_view.js?v=20260619c"></script>
{% endblock %}