{% extends "erp_base.html" %}

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

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

  <!-- 페이지 액션 -->
  <div class="erp-page-actions cpg-actions">
    <a class="erp-btn erp-btn-primary" href="/cupang/new">+ 신규 등록</a>
    <a class="erp-btn erp-btn-outline" href="/cupang/centers">입고센터 관리</a>
    <a class="erp-btn erp-btn-outline" href="/cupang/box-rules">박스 입수량</a>
    <a class="erp-btn erp-btn-outline" href="/cupang/export?year={{ year }}&month={{ month }}">엑셀({{ month }}월)</a>
  </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 %}"
             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.document %}<span class="erp-badge erp-badge-neutral cpg-mini">작성 {{ cell.counts.document }}</span>{% endif %}
              {% if cell.counts.ship %}<span class="erp-badge erp-badge-inverse cpg-mini">출고 {{ cell.counts.ship }}</span>{% endif %}
              {% if cell.counts.arrival %}<span class="erp-badge erp-badge-success cpg-mini">입고 {{ cell.counts.arrival }}</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>
      </div>

      {% if sel_shipments %}
      <ul class="cpg-list">
        {% for s in sel_shipments %}
        <li class="cpg-list-item">
          <a href="/cupang/{{ s.id }}" class="cpg-list-link">
            <div class="cpg-list-top">
              <strong>{{ s.center_name_snapshot or '센터 미지정' }}</strong>
              {% set badge = 'erp-badge-neutral' %}
              {% if s.status == '출고완료' %}{% set badge = 'erp-badge-inverse' %}
              {% elif s.status == '센터입고완료' %}{% set badge = 'erp-badge-success' %}
              {% elif s.status == '취소' %}{% set badge = 'erp-badge-danger' %}{% endif %}
              <span class="erp-badge {{ badge }}">{{ s.status }}</span>
            </div>
            <div class="cpg-list-meta erp-muted">
              출고 {{ s.ship_date }} · 입고 {{ s.center_arrival_date }} · {{ s.ship_method }}
              {% if s.outbound_summary %}<br>{{ s.outbound_summary }}{% endif %}
            </div>
          </a>
        </li>
        {% endfor %}
      </ul>
      {% else %}
      <p class="erp-muted cpg-empty">선택한 날짜의 출고 묶음이 없습니다.
        <a href="/cupang/new">신규 등록</a></p>
      {% endif %}
    </div>
  </div>

</section>
{% endblock %}