{% extends "erp_base.html" %}

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

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

  <!-- 페이지 액션 (달력 컬럼 폭에 맞춤: 신규 좌측 / 설정 달력 오른쪽 끝) -->
  <div class="cpg-actions-grid">
    <div class="cpg-actions-main">
      <a class="erp-btn erp-btn-primary" href="/cupang/box-calc">+ 신규 등록</a>
      <span class="cpg-settings-btns">
        <a class="erp-btn erp-btn-outline" href="/cupang/products">제품명 설정</a>
        <a class="erp-btn erp-btn-outline" href="/cupang/centers">입고센터 관리</a>
        <a class="erp-btn erp-btn-outline" href="/cupang/box-rules">박스 입수량 설정</a>
      </span>
    </div>
    <div class="cpg-actions-spacer"></div>
  </div>

  <div class="cpg-layout">
    <!-- ── 왼쪽: 큰 월간 달력 ── -->
    <div class="erp-card cpg-cal-card">
      <div class="cpg-cal-head">
        <a class="erp-btn erp-btn-outline cpg-nav-btn"
           href="/cupang/?year={{ prev_y }}&month={{ prev_m }}">‹</a>
        <h2 class="cpg-cal-title">{{ year }}년 {{ month }}월</h2>
        <a class="erp-btn erp-btn-outline cpg-nav-btn"
           href="/cupang/?year={{ next_y }}&month={{ next_m }}">›</a>
      </div>

      <div class="cpg-cal-grid">
        {% for wd in weekdays %}
        <div class="cpg-cal-wd {% if loop.index0 == 0 %}cpg-sun{% elif loop.index0 == 6 %}cpg-sat{% endif %}">{{ wd }}</div>
        {% endfor %}

        {% for week in cal_weeks %}
          {% for cell in week %}
          <a class="cpg-cal-cell
                    {% if not cell.in_month %}cpg-out{% endif %}
                    {% if cell.is_today %}cpg-today{% endif %}
                    {% if cell.is_selected %}cpg-selected{% endif %}
                    {% if cell.is_sunday or cell.is_holiday %}cpg-red{% elif cell.is_saturday %}cpg-blue{% endif %}"
             href="/cupang/?year={{ year }}&month={{ month }}&date={{ cell.date }}">
            <span class="cpg-cal-day">{{ cell.day }}</span>
            <span class="cpg-cal-badges">
              {% if cell.counts.ship %}
              <span class="erp-badge erp-badge-inverse cpg-mini">출고 {{ cell.counts.ship }}건</span>
              <span class="erp-badge erp-badge-neutral cpg-mini">센터 {{ cell.counts.centers }}곳</span>
              {% endif %}
            </span>
          </a>
          {% endfor %}
        {% endfor %}
      </div>
    </div>

    <!-- ── 오른쪽: 선택일 출고 묶음 리스트 ── -->
    <div class="erp-card cpg-list-card">
      <div class="cpg-list-head">
        <h2>{{ selected_date }} 출고</h2>
        <span class="erp-muted">{{ sel_shipments|length }}건</span>
        {% if sel_shipments %}
        <button type="button" class="erp-btn erp-btn-danger cpg-btn-sm cpg-day-del"
                data-day-del="{{ selected_date }}" data-count="{{ sel_shipments|length }}">이 날짜 전체 삭제</button>
        {% endif %}
      </div>

      {% if sel_shipments %}
      <ul class="cpg-list">
        {% for s in sel_shipments %}
        <li class="cpg-list-item">
          <div class="cpg-ship-card">
            <div class="cpg-ship-head">
              <a class="cpg-ship-name" href="/cupang/{{ s.id }}">{{ s.center_name_snapshot or '센터 미지정' }}</a>
              <span class="erp-badge erp-badge-neutral cpg-mini">{{ s.ship_method }}</span>
              <button type="button" class="cpg-icon-btn is-danger" title="이 출고 삭제"
                      data-del="{{ s.id }}" data-name="{{ s.center_name_snapshot }}">삭제</button>
            </div>
            <div class="cpg-ship-meta erp-muted">
              출고 {{ s.ship_date }} · {{ s.total_boxes }}박스 · {{ s.total_qty }}개
            </div>
            <ul class="cpg-ship-items">
              {% for it in s['items'] %}
              <li>
                <span class="cpg-ship-iname">{{ it.name }}</span>
                <span class="cpg-ship-iqty">{{ it.qty }}개</span>
                <span class="cpg-ship-ibox">{{ it.boxes }}박스</span>
              </li>
              {% endfor %}
            </ul>
          </div>
        </li>
        {% endfor %}
      </ul>
      {% else %}
      <p class="erp-muted cpg-empty">선택한 날짜의 출고 묶음이 없습니다.
        <a href="/cupang/box-calc">박스 계산에서 등록</a></p>
      {% endif %}
    </div>
  </div>

  <!-- 삭제 확인 팝업 -->
  <div class="cpg-modal" id="cpg-del-dlg" hidden>
    <div class="cpg-modal-back" data-del-close></div>
    <div class="cpg-modal-box cpg-del-box" role="dialog" aria-modal="true" aria-labelledby="cpg-del-title">
      <h3 id="cpg-del-title">출고 삭제</h3>
      <p class="cpg-del-msg" id="cpg-del-msg"></p>
      <div class="cpg-del-act">
        <button type="button" class="erp-btn erp-btn-outline" data-del-close>취소</button>
        <button type="button" class="erp-btn erp-btn-danger" id="cpg-del-ok">삭제</button>
      </div>
    </div>
  </div>

  <form method="post" id="cpg-del-form" hidden>
    <input type="hidden" name="date" id="cpg-del-date" />
    <input type="hidden" name="next" id="cpg-del-next" />
  </form>

</section>
{% endblock %}

{% block scripts %}
<script>
(function () {
  var dlg = document.getElementById("cpg-del-dlg");
  if (!dlg) return;
  var msgEl = document.getElementById("cpg-del-msg");
  var okBtn = document.getElementById("cpg-del-ok");
  var form = document.getElementById("cpg-del-form");
  var dateEl = document.getElementById("cpg-del-date");
  var nextEl = document.getElementById("cpg-del-next");
  var pending = null;   // {action, date}

  function close() { dlg.hidden = true; pending = null; }

  function open(message, action, day) {
    msgEl.textContent = message;
    pending = { action: action, date: day || "" };
    dlg.hidden = false;
    okBtn.focus();
  }

  Array.prototype.forEach.call(dlg.querySelectorAll("[data-del-close]"), function (el) {
    el.addEventListener("click", close);
  });
  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape" && !dlg.hidden) close();
  });

  okBtn.addEventListener("click", function () {
    if (!pending) return;
    form.action = pending.action;
    dateEl.value = pending.date;
    nextEl.value = window.location.pathname + window.location.search;
    form.submit();
  });

  document.addEventListener("click", function (e) {
    var one = e.target.closest("[data-del]");
    if (one) {
      open('"' + (one.dataset.name || "이 센터") + '" 출고를 삭제할까요?',
           "/cupang/" + one.dataset.del + "/delete", "");
      return;
    }
    var day = e.target.closest("[data-day-del]");
    if (day) {
      open(day.dataset.dayDel + " 출고 " + day.dataset.count + "건을 모두 삭제할까요?",
           "/cupang/day-delete", day.dataset.dayDel);
    }
  });
})();
</script>
{% endblock %}