{% extends 'ewoooc_base.html' %}
{% block title %}當日業績看板 - EwoooC{% endblock %}

{#
  v3 改寫重點：
  - 移除 622 行 inline <style>，全部抽到 page-daily-sales.css
  - KPI 卡片從 Bootstrap bg-primary/warning/success/info/secondary/purple 漸層
    → 改用語意化 .kpi-card.kpi--{revenue|cost|profit|sku|aov|qty}
  - 行事曆 selected/dod-up/dod-down 配色改用 token，不再寫死紫紅綠
  - 漲跌色：上漲 → tag-rust（暖紅），下跌 → tag-olive（暖綠橄欖），與 dashboard 一致
  - 圖表配色完全由 page-daily-sales.js 從 CSS var 讀取
  - extends ewoooc_base.html（自動載入 sidebar、tokens、dotmatrix）
  - 用 Jinja macro 收斂 6 張 KPI 卡片重複結構
#}

{% block extra_css %}
  <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/page-daily-sales.css') }}">
{% endblock %}

{# ---- KPI 卡片 macro ---- #}
{% macro kpi_card(variant, label, icon, current_val, dod_val, wow_val, month_val, month_extra, is_month_view, value_format='${:,.0f}') %}
  <div class="daily-kpi-slot">
    <article class="kpi-card kpi--{{ variant }}">
      <div class="kpi-card__body">
        <div class="kpi-card__label">{{ label }}</div>
        {% if is_month_view %}
          <div class="kpi-card__value">{{ value_format.format(month_val) }}</div>
          <div class="kpi-card__meta">
            <span class="kpi-tag">月度累計</span>
            {% if month_extra %}<span class="kpi-tag kpi-tag--ghost">{{ month_extra }}</span>{% endif %}
          </div>
        {% else %}
          <div class="kpi-card__value">{{ value_format.format(current_val) }}</div>
          <div class="kpi-card__meta">
            <span class="kpi-delta {{ 'is-up' if dod_val >= 0 else 'is-down' }}">
              <span class="kpi-delta__label">DoD</span>
              <i class="fas fa-{{ 'arrow-up' if dod_val >= 0 else 'arrow-down' }}"></i>
              {{ "{:+.1f}%".format(dod_val) }}
            </span>
            <span class="kpi-delta {{ 'is-up' if wow_val >= 0 else 'is-down' }}">
              <span class="kpi-delta__label">WoW</span>
              <i class="fas fa-{{ 'arrow-up' if wow_val >= 0 else 'arrow-down' }}"></i>
              {{ "{:+.1f}%".format(wow_val) }}
            </span>
          </div>
        {% endif %}
        <i class="fas fa-{{ icon }} kpi-card__icon-bg" aria-hidden="true"></i>
      </div>
    </article>
  </div>
{% endmacro %}

{% macro chart_snapshot(labels, values, mode='currency', limit=12) %}
  {% set total = labels|length %}
  <div class="chart-fallback-list">
    {% for label in labels %}
      {% if loop.index > total - limit %}
        {% set val = values[loop.index0]|default(0) %}
        <span class="chart-fallback-item">
          <b>{{ label }}</b>
          <strong>
            {% if mode == 'pct' %}{{ "{:+.1f}%".format(val) }}
            {% elif mode == 'number' %}{{ "{:,.0f}".format(val) }}
            {% else %}${{ "{:,.0f}".format(val) }}{% endif %}
          </strong>
        </span>
      {% endif %}
    {% endfor %}
  </div>
{% endmacro %}

{% block ewooo_content %}
<div
  class="daily-sales-page"
  data-screen-label="daily_sales"
  data-selected-date="{{ selected_date }}"
  data-is-month-view="{{ 'true' if is_month_view else 'false' }}">
  {% include 'components/_analysis_report_tabs.html' ignore missing %}

  {% if error %}
    <div class="empty-state">
      <i class="fas fa-exclamation-triangle empty-state__icon" aria-hidden="true"></i>
      <h4 class="empty-state__title">{{ error }}</h4>
      <p class="empty-state__hint">先到 <a href="/system_settings">系統設定</a> 匯入當日業績，才能判斷下滑與價差壓力。</p>
    </div>
  {% else %}

	  <!-- ============ Hero / Date Selector ============ -->
	  <section class="daily-hero">
	    <div class="daily-hero__lead">
	      <h1 class="daily-hero__title">
	        <i class="fas fa-calendar-day" aria-hidden="true"></i>
	        當日業績看板
	      </h1>
	      <p class="daily-hero__subtitle">
	        {% if is_month_view %}{{ calendar_data.month_name }}：找出下滑與價差壓力{% else %}{{ selected_date }}：找出下滑與價差壓力{% endif %}
	      </p>
	    </div>
	    <div class="daily-hero__controls">
	      <label for="dateSelector" class="daily-hero__label">日期</label>
	      <select id="dateSelector" class="form-select form-select-sm" data-daily-date-selector>
        {% for date in available_dates %}
          <option value="{{ date }}" {% if date == selected_date %}selected{% endif %}>{{ date }}</option>
        {% endfor %}
      </select>
	    </div>
	  </section>

	  <!-- ============ Mode / KPI Summary ============ -->
	  <section class="daily-mode-banner">
	    {% if is_month_view %}
	      <span class="badge-mode badge-mode--month"><i class="fas fa-calendar-alt"></i> 月度總計</span>
	      <span class="daily-mode-banner__hint">{{ calendar_data.month_name }}</span>
	      {% if month_kpi %}<span class="badge-mode badge-mode--ghost">累計 {{ month_kpi.days_with_data }} 天</span>{% endif %}
	    {% else %}
	      <span class="badge-mode badge-mode--single"><i class="fas fa-calendar-day"></i> 單日</span>
	      <span class="daily-mode-banner__hint">{{ selected_date }}</span>
	      <a href="/daily_sales" class="daily-mode-banner__link" data-daily-action="month-view">
	        <i class="fas fa-chart-line"></i> 月度總計
	      </a>
	    {% endif %}
	  </section>

	  <section class="daily-kpi-grid" aria-label="業績摘要">
	    {{ kpi_card(
	      'revenue', '總業績', 'chart-line',
	      current.total_revenue, dod.total_revenue, wow.total_revenue,
	      month_kpi.total_revenue if month_kpi else 0,
	      None, is_month_view
	    ) }}
	    {{ kpi_card(
	      'cost', '總成本', 'dollar-sign',
	      current.total_cost, dod.total_cost, wow.total_cost,
	      month_kpi.total_cost if month_kpi else 0,
	      None, is_month_view
	    ) }}
	    {{ kpi_card(
	      'profit', '毛利', 'hand-holding-usd',
	      current.gross_margin, dod.gross_margin, wow.gross_margin,
	      month_kpi.gross_margin if month_kpi else 0,
	      ('毛利率 ' ~ "{:.1f}%".format(month_kpi.margin_rate)) if month_kpi else None,
	      is_month_view
	    ) }}
	    {{ kpi_card(
	      'sku', 'SKU 數', 'cubes',
	      current.sku_count, dod.sku_count, wow.sku_count,
	      month_kpi.sku_count if month_kpi else 0,
	      '不重複商品' if is_month_view else None,
	      is_month_view, value_format='{:,.0f}'
	    ) }}
	    {{ kpi_card(
	      'aov', '客單價', 'shopping-cart',
	      current.avg_price, dod.avg_price, wow.avg_price,
	      month_kpi.avg_price if month_kpi else 0,
	      None, is_month_view
	    ) }}
	    {{ kpi_card(
	      'qty', '總銷量', 'boxes',
	      current.total_qty, dod.total_qty, wow.total_qty,
	      month_kpi.total_qty if month_kpi else 0,
	      None, is_month_view, value_format='{:,.0f}'
	    ) }}
	  </section>

	  <!-- ============ Calendar ============ -->
  {% if calendar_data %}
  <section class="daily-calendar">
    <header class="daily-calendar__header">
      <h2 class="daily-calendar__title" role="button" tabindex="0" data-daily-action="month-view">
        <i class="fas fa-calendar-alt" aria-hidden="true"></i>
        {{ calendar_data.month_name }} 業績行事曆
      </h2>
      <nav class="daily-calendar__nav" aria-label="月份切換">
        <button type="button" class="btn-month" data-daily-month="{{ calendar_data.prev_month }}">
          <i class="fas fa-chevron-left" aria-hidden="true"></i>上個月
        </button>
        <button type="button" class="btn-month" data-daily-month="{{ calendar_data.next_month }}">
          下個月<i class="fas fa-chevron-right" aria-hidden="true"></i>
        </button>
      </nav>
    </header>

    <div class="daily-calendar__grid">
      {% for w in ['週一','週二','週三','週四','週五','週六','週日'] %}
        <div class="daily-calendar__weekday">{{ w }}</div>
      {% endfor %}

      {% for week in calendar_data.weeks %}
        {% for day in week %}
          <div
            class="cal-day
              {% if day.has_data %}has-data dod-{{ day.dod_direction }}{% endif %}
              {% if not day.is_current_month %}is-other-month{% endif %}
              {% if day.is_weekend %}is-weekend{% endif %}
              {% if day.is_holiday %}is-holiday{% endif %}
              {% if day.date == selected_date and not is_month_view %}is-selected{% endif %}"
            data-date="{{ day.date }}"
            data-has-data="{{ 'true' if day.has_data and day.is_current_month else 'false' }}"
            title="{% if day.is_holiday %}🎊 {{ day.holiday_name | e }} | {% endif %}{{ day.weekday | e }}{% if day.has_data %} | 業績 ${{ '{:,.0f}'.format(day.revenue) }} | 毛利 ${{ '{:,.0f}'.format(day.profit) }} | DoD {{ day.dod_percent | e }}%{% endif %}">

	            <div class="cal-day__head">
	              <span class="cal-day__num">{{ day.day }}</span>
	              {% if day.is_holiday %}<span class="cal-day__holiday">{{ day.holiday_name }}</span>{% endif %}
	            </div>

	            {% if day.has_data %}
	              <span class="cal-day__badge">
                {% if day.dod_direction == 'up' %}<i class="fas fa-arrow-up" aria-hidden="true"></i>
                {% elif day.dod_direction == 'down' %}<i class="fas fa-arrow-down" aria-hidden="true"></i>
                {% endif %}
                {{ day.dod_percent }}%
              </span>
	              <div class="cal-day__metric">
	                <span class="cal-day__metric-label">業績</span>
	                <strong>${{ '{:,.0f}'.format(day.revenue) }}</strong>
	              </div>
	              <div class="cal-day__metric cal-day__metric--sub">
	                <span class="cal-day__metric-label">毛利</span>
	                <strong>${{ '{:,.0f}'.format(day.profit) }}</strong>
	                <span>{{ '{:.1f}%'.format(day.margin_rate) }}</span>
	              </div>
	              <div class="cal-day__chips">
	                <span>SKU {{ '{:,.0f}'.format(day.sku_count) }}</span>
	                <span>客單 ${{ '{:,.0f}'.format(day.avg_price) }}</span>
	                <span>銷量 {{ '{:,.0f}'.format(day.qty) }}</span>
	              </div>
	            {% endif %}
	          </div>
        {% endfor %}
      {% endfor %}
    </div>

    <div class="daily-calendar-mobile-list" aria-label="手機版業績日期清單">
      {% set mobile_days = namespace(count=0) %}
      {% for week in calendar_data.weeks %}
        {% for day in week %}
          {% if day.has_data and day.is_current_month %}
            {% set mobile_days.count = mobile_days.count + 1 %}
            <a
              class="daily-mobile-day {% if day.date == selected_date and not is_month_view %}is-selected{% endif %}"
              href="/daily_sales?date={{ day.date }}"
              aria-label="{{ day.date }} 業績 {{ '{:,.0f}'.format(day.revenue) }}">
              <span class="daily-mobile-day__date">
                <strong>{{ day.day }}</strong>
                <span>{{ day.weekday }}{% if day.is_holiday %} · {{ day.holiday_name }}{% endif %}</span>
              </span>
              <span class="daily-mobile-day__trend dod-{{ day.dod_direction }}">
                {% if day.dod_direction == 'up' %}<i class="fas fa-arrow-up" aria-hidden="true"></i>
                {% elif day.dod_direction == 'down' %}<i class="fas fa-arrow-down" aria-hidden="true"></i>
                {% endif %}
                {{ day.dod_percent }}%
              </span>
              <span class="daily-mobile-day__metric">
                <span>業績</span>
                <strong>${{ '{:,.0f}'.format(day.revenue) }}</strong>
              </span>
              <span class="daily-mobile-day__metric">
                <span>毛利</span>
                <strong>${{ '{:,.0f}'.format(day.profit) }}</strong>
                <em>{{ '{:.1f}%'.format(day.margin_rate) }}</em>
              </span>
              <span class="daily-mobile-day__chips">
                <span>SKU {{ '{:,.0f}'.format(day.sku_count) }}</span>
                <span>客單 ${{ '{:,.0f}'.format(day.avg_price) }}</span>
                <span>銷量 {{ '{:,.0f}'.format(day.qty) }}</span>
              </span>
            </a>
          {% endif %}
        {% endfor %}
      {% endfor %}
      {% if mobile_days.count == 0 %}
        <div class="daily-mobile-empty">本月尚無可檢視的業績日期。</div>
      {% endif %}
    </div>
  </section>
  {% endif %}

	  <!-- ============ Charts Row 1 ============ -->
  <div class="row mb-4">
    <div class="col-lg-8">
      <div class="card chart-card">
        <div class="card-header"><i class="fas fa-chart-area"></i> 每日業績趨勢（近 30 天）</div>
        <div class="card-body"><div class="chart-container has-html-chart"><canvas id="trendChart"></canvas>{{ chart_snapshot(chart_data.labels, chart_data.revenue, 'currency') }}</div></div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card chart-card">
        <div class="card-header"><i class="fas fa-percentage"></i> 日成長率 (DoD %)</div>
        <div class="card-body"><div class="chart-container has-html-chart"><canvas id="dodChart"></canvas>{{ chart_snapshot(chart_data.labels, chart_data.dod_revenue, 'pct') }}</div></div>
      </div>
    </div>
  </div>

  <!-- ============ Charts Row 2 ============ -->
  <div class="row mb-4">
    <div class="col-lg-8">
      <div class="card chart-card">
        <div class="card-header"><i class="fas fa-chart-bar"></i> 週成長對比 (WoW)</div>
        <div class="card-body"><div class="chart-container has-html-chart"><canvas id="wowChart"></canvas>{{ chart_snapshot(chart_data.labels, chart_data.wow_revenue, 'pct') }}</div></div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card chart-card">
        <div class="card-header"><i class="fas fa-trophy"></i> 商品 Top 10</div>
        <div class="card-body">
          <div class="chart-mobile-hint d-md-none">
            <i class="fas fa-hand-pointer"></i> 左右滑動看業績趨勢
          </div>
          <div class="chart-responsive">
            <div class="chart-container has-html-chart" id="top10ChartContainer">
              <canvas id="top10Chart"></canvas>
              {{ chart_snapshot(chart_data.top10_labels, chart_data.top10_values, 'currency', 10) }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ============ Restored / Decision Charts ============ -->
  <div class="row mb-4">
    <div class="col-xl-4 col-lg-6 mb-4 mb-xl-0">
      <div class="card chart-card">
        <div class="card-header"><i class="fas fa-percent"></i> 毛利率趨勢</div>
        <div class="card-body"><div class="chart-container has-html-chart"><canvas id="marginChart"></canvas>{{ chart_snapshot(chart_data.labels, chart_data.margin_rate, 'pct') }}</div></div>
      </div>
    </div>
    <div class="col-xl-4 col-lg-6 mb-4 mb-xl-0">
      <div class="card chart-card">
        <div class="card-header"><i class="fas fa-receipt"></i> 客單價 × 銷量</div>
        <div class="card-body"><div class="chart-container has-html-chart"><canvas id="avgQtyChart"></canvas>{{ chart_snapshot(chart_data.labels, chart_data.avg_price, 'currency') }}</div></div>
      </div>
    </div>
    <div class="col-xl-4 col-lg-12">
      <div class="card chart-card">
        <div class="card-header"><i class="fas fa-layer-group"></i> 分類業績 Top 12</div>
        <div class="card-body"><div class="chart-container has-html-chart"><canvas id="categoryRevenueChart"></canvas>{{ chart_snapshot(category_chart.labels if category_chart else [], category_chart.revenue if category_chart else [], 'currency', 12) }}</div></div>
      </div>
    </div>
  </div>

  <!-- ============ Marketing ============ -->
  {% if competitor_intel %}
  {% set comp_trend = competitor_intel.trend %}
  {% set comp_coverage = competitor_intel.coverage %}
  <div class="row mb-4">
    <div class="col-lg-8">
      <div class="card chart-card">
        <div class="card-header">
          <i class="fas fa-scale-balanced"></i> PChome 價差壓力（近 30 天）
        </div>
        <div class="card-body">
          <div class="chart-container has-html-chart">
            <canvas id="competitorGapChart"></canvas>
            {{ chart_snapshot(comp_trend.labels, comp_trend.avg_gap_pct, 'pct') }}
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card chart-card">
        <header class="card-header card-header--split">
          <span><i class="fas fa-triangle-exclamation"></i> 比價決策覆蓋</span>
          <a class="btn btn-sm btn-table-toggle" href="{{ url_for('dashboard.index', filter='pchome_review', review_status='all', sort_by='pchome_review', order='desc') }}">
            <i class="fas fa-arrow-up-right-from-square"></i> 比價工作台
          </a>
        </header>
        <div class="card-body">
          <div class="chart-container chart-container--sm has-html-chart">
            <canvas id="competitorCoverageChart"></canvas>
          </div>
          <div class="daily-competitor-summary">
            <div>
              <span>決策支援覆蓋率</span>
              <strong class="momo-mono">{{ comp_coverage.decision_support_rate | default(comp_coverage.decision_ready_rate | default(0)) }}%</strong>
            </div>
            <div>
              <span>有效身份配對</span>
              <strong class="momo-mono">{{ comp_coverage.valid_matches | default(0) | number_format }}</strong>
            </div>
            <div>
              <span>精準可告警覆蓋</span>
              <strong class="momo-mono">{{ comp_coverage.decision_ready_rate | default(0) }}%</strong>
            </div>
            <div>
              <span>待刷新</span>
              <strong class="momo-mono">{{ comp_coverage.stale_matches | default(0) | number_format }}</strong>
            </div>
            <div>
              <span>未知新鮮度</span>
              <strong class="momo-mono">{{ comp_coverage.unknown_freshness_matches | default(0) | number_format }}</strong>
            </div>
            <div>
              <span>需單位價覆核</span>
              <strong class="momo-mono">{{ comp_coverage.unit_comparable_count | default(0) | number_format }}</strong>
            </div>
            <div>
              <span>重算待人工覆核</span>
              <strong class="momo-mono">{{ comp_coverage.rescore_accepted_count | default(0) | number_format }}</strong>
            </div>
            <div>
              <span>型錄/任選可比</span>
              <strong class="momo-mono">{{ comp_coverage.catalog_comparable_count | default(0) | number_format }}</strong>
            </div>
          </div>
          <div class="daily-competitor-closure momo-mono" aria-label="人工比價閉環">
            <span>人工採用 {{ comp_coverage.manual_accept_count | default(0) | number_format }}</span>
            <span>人工否決 {{ comp_coverage.manual_reject_count | default(0) | number_format }}</span>
            <span>人工單位價 {{ comp_coverage.manual_unit_price_count | default(0) | number_format }}</span>
          </div>
          {% if competitor_intel.review_queue %}
            <ol class="daily-competitor-risk-list daily-competitor-risk-list--review">
              {% for item in competitor_intel.review_queue[:3] %}
                <li>
                  <span>{{ item.name[:22] }} · {{ item.status_label }}</span>
                  <strong class="momo-mono">{{ item.action_label }}</strong>
                  {% if item.unit_comparison and item.unit_comparison.summary %}
                    <em>{{ item.unit_comparison.summary }}</em>
                  {% endif %}
                </li>
              {% endfor %}
            </ol>
          {% elif competitor_intel.top_risks %}
            <ol class="daily-competitor-risk-list">
              {% for item in competitor_intel.top_risks[:5] %}
                <li>
                  <span>{{ item.name[:24] }}</span>
                  <strong class="momo-mono">+{{ item.gap_pct | round(1) }}%</strong>
                </li>
              {% endfor %}
            </ol>
          {% else %}
            <div class="chart-empty"><i class="fas fa-check-circle"></i><p>目前沒有高信心 MOMO 低價壓力商品。</p></div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  {% endif %}

  <!-- ============ Marketing ============ -->
  {% if marketing_data %}
  <div class="row mb-4">
    <div class="col-12">
      <div class="card chart-card">
        <header class="card-header card-header--split">
          <span><i class="fas fa-bullhorn"></i> 行銷活動業績貢獻</span>
          <button type="button" class="btn btn-sm btn-export" data-daily-export="marketing">
            <i class="fas fa-file-excel"></i> 匯出 Excel
          </button>
        </header>
        <div class="card-body">
          <div class="row">
            <div class="col-lg-6 mb-4">
              <h6 class="marketing-subhead"><i class="fas fa-tags"></i> 折扣活動 Top 10</h6>
              {% if marketing_data.discount %}
                <div class="chart-container chart-container--md has-html-chart"><canvas id="discountChart"></canvas>{{ chart_snapshot(marketing_data.discount['labels'], marketing_data.discount['values'], 'currency', 10) }}</div>
              {% else %}
                <div class="chart-empty"><i class="fas fa-info-circle"></i><p>暫無折扣活動數據</p></div>
              {% endif %}
            </div>
            <div class="col-lg-6 mb-4">
              <h6 class="marketing-subhead"><i class="fas fa-ticket-alt"></i> 折價券活動 Top 10</h6>
              {% if marketing_data.coupon %}
                <div class="chart-container chart-container--md has-html-chart"><canvas id="couponChart"></canvas>{{ chart_snapshot(marketing_data.coupon['labels'], marketing_data.coupon['values'], 'currency', 10) }}</div>
              {% else %}
                <div class="chart-empty"><i class="fas fa-info-circle"></i><p>暫無折價券活動數據</p></div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% endif %}

  <!-- ============ Category Table ============ -->
  {% set category_total = category_total_count|default(categories|length if categories else 0) %}
  {% set category_visible = category_visible_count|default(categories|length if categories else 0) %}
  <div class="row">
    <div class="col-12">
      <div class="card chart-card">
        <header class="card-header card-header--split">
          <span>
            <i class="fas fa-table"></i> 分類業績明細
            <small class="daily-table-count momo-mono">顯示 {{ category_visible }} / {{ category_total }} 筆</small>
          </span>
          <span class="daily-table-actions">
            {% if category_show_all|default(false) and category_total > category_table_limit|default(120) %}
              <a class="btn btn-sm btn-table-toggle" href="{{ category_limited_url }}">收合前 {{ category_table_limit|default(120) }} 筆</a>
            {% elif category_total > category_visible %}
              <a class="btn btn-sm btn-table-toggle" href="{{ category_show_all_url }}">顯示全部</a>
            {% endif %}
            <button type="button" class="btn btn-sm btn-export" data-daily-export="category">
              <i class="fas fa-file-excel"></i> 匯出 Excel
            </button>
          </span>
        </header>
        <div class="card-body">
          <div class="chart-mobile-hint d-md-none">
            <i class="fas fa-hand-pointer"></i> 左右滑動看分類明細
          </div>
          <div class="table-responsive">
            <table id="categoryTable" class="table table-hover">
              <thead>
                <tr>
                  {% for col in ['分類','廠商','總業績','總成本','毛利','毛利率','總銷量','SKU 數','平均單價'] %}
                    <th>{{ col }}</th>
                  {% endfor %}
                </tr>
              </thead>
              <tbody>
                {% for cat in categories %}
                <tr>
                  <td data-label="分類">{{ cat.category }}</td>
                  <td data-label="廠商">{{ cat.vendor or '-' }}</td>
                  <td class="num" data-label="總業績">${{ "{:,.0f}".format(cat.revenue) }}</td>
                  <td class="num" data-label="總成本">${{ "{:,.0f}".format(cat.cost or 0) }}</td>
                  <td class="num" data-label="毛利">${{ "{:,.0f}".format(cat.profit or 0) }}</td>
                  <td class="num" data-label="毛利率">{{ "{:.1f}%".format(cat.margin_rate) }}</td>
                  <td class="num" data-label="總銷量">{{ "{:,.0f}".format(cat.qty or 0) }}</td>
                  <td class="num" data-label="SKU 數">{{ cat.sku_count or 0 }}</td>
                  <td class="num" data-label="平均單價">${{ "{:,.0f}".format(cat.avg_price) }}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  {% endif %}
</div>
{% endblock %}

{% block extra_js %}
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
  <script src="{{ url_for('static', filename='js/analysis-chart-theme.js') }}"></script>
  {% if not error %}
    {% set daily_sales_payload = {
      'chartData': chart_data,
      'competitor': competitor_intel,
      'categoryChart': category_chart,
      'marketing': {
        'discount': {
          'labels': marketing_data.discount | map(attribute='name') | list,
          'values': marketing_data.discount | map(attribute='revenue') | list
        } if marketing_data and marketing_data.discount else none,
        'coupon': {
          'labels': marketing_data.coupon | map(attribute='name') | list,
          'values': marketing_data.coupon | map(attribute='revenue') | list
        } if marketing_data and marketing_data.coupon else none
      },
      'isMonthView': is_month_view
    } %}
    <template id="daily-sales-data">{{ daily_sales_payload | tojson }}</template>
    <script src="{{ url_for('static', filename='js/page-daily-sales.js') }}"></script>
  {% endif %}
{% endblock %}
