{% extends 'ewoooc_base.html' %}
{% block title %}月份總表數據分析 - EwoooC{% endblock %}

{#
  Turn B — extends ewoooc_base + BEM 結構化
  - 原 inline <style> 已搬至 page-monthly-summary.css (Turn A)
  - 新 BEM class 由 page-monthly-summary-bem.css 提供 (Turn B)
  - JS 邏輯保留在 Turn C 處理；本檔暫保留原 inline <script> 以維持頁面可運作
#}

{% 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-monthly-summary.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/page-monthly-summary-bem.css') }}">
{% endblock %}

{% block ewooo_content %}
{# Runtime data source lives in page-monthly-summary.js: /api/monthly_summary_data #}

  <!-- ============ Loading Overlay (warm reskin) ============ -->
  <div id="loadingOverlay" class="ms-loading" role="status" aria-live="polite">
    <div class="ms-loading__spinner" aria-hidden="true"></div>
    <span class="ms-loading__text">資料載入中…</span>
  </div>

  <div class="monthly-analysis-page ms-page"
       data-page-group="analytics"
       data-screen-label="monthly-summary-analysis">

    {% include 'components/_analysis_report_tabs.html' %}

    <!-- ═══════ Page head ═══════ -->
    <header class="monthly-analysis-hero ms-page-head">
      <div class="ms-page-head__main">
        <h1 class="ms-page-head__title">
          <i class="fas fa-chart-pie ms-page-head__icon" aria-hidden="true"></i>
          月份總表數據分析
        </h1>
        <p class="ms-page-head__sub">
          以資料庫 <code class="ms-tag ms-tag--mono">monthly_summary_analysis</code> 的月結資料，檢視業績、毛利、YoY 與品牌／區域／價格帶結構。
        </p>
      </div>
      <div class="ms-page-head__meta">
        <span class="ms-tag ms-tag--pill">
          <i class="fas fa-database" aria-hidden="true"></i>
          <span>{{ system_version }}</span>
        </span>
      </div>
    </header>

    <!-- ═══════ 進階篩選器 ═══════ -->
    <section class="ms-filter-card filter-section" aria-label="資料篩選器">
      <div class="row g-3">
        <div class="col-md-2 ms-filter-group ms-filter-group--year">
          <label class="ms-filter-group__label form-label" for="btnYear">
            <i class="fas fa-calendar-alt" aria-hidden="true"></i> 年份
          </label>
          <div class="dropdown">
            <button class="btn btn-light custom-dropdown-btn dropdown-toggle ms-filter-group__btn"
                    type="button" id="btnYear" data-bs-toggle="dropdown" aria-expanded="false">
              選擇年份
            </button>
            <ul class="dropdown-menu w-100 ms-filter-group__menu" id="listYear">
              <li><a class="dropdown-item" href="#" onclick="selectFilter('year', '')">全部年份</a></li>
            </ul>
          </div>
        </div>

        <div class="col-md-2 ms-filter-group ms-filter-group--month">
          <label class="ms-filter-group__label form-label" for="btnMonth">
            <i class="fas fa-calendar-day" aria-hidden="true"></i> 月份
          </label>
          <div class="dropdown">
            <button class="btn btn-light custom-dropdown-btn dropdown-toggle ms-filter-group__btn"
                    type="button" id="btnMonth" data-bs-toggle="dropdown" aria-expanded="false">
              選擇月份
            </button>
            <ul class="dropdown-menu w-100 ms-filter-group__menu" id="listMonth">
              <li><a class="dropdown-item" href="#" onclick="selectFilter('month', '')">全部月份</a></li>
            </ul>
          </div>
        </div>

        <div class="col-md-2 ms-filter-group ms-filter-group--area">
          <label class="ms-filter-group__label form-label" for="btnArea">
            <i class="fas fa-map-marker-alt" aria-hidden="true"></i> 區名稱
          </label>
          <div class="dropdown">
            <button class="btn btn-light custom-dropdown-btn dropdown-toggle ms-filter-group__btn"
                    type="button" id="btnArea" data-bs-toggle="dropdown" aria-expanded="false">
              所有區域
            </button>
            <ul class="dropdown-menu w-100 ms-filter-group__menu" id="listArea">
              <li><a class="dropdown-item" href="#" onclick="selectFilter('area', '')">所有區域</a></li>
            </ul>
          </div>
        </div>

        <div class="col-md-3 ms-filter-group ms-filter-group--vendor">
          <label class="ms-filter-group__label form-label" for="btnVendor">
            <i class="fas fa-truck" aria-hidden="true"></i> 廠商名稱
          </label>
          <div class="dropdown">
            <button class="btn btn-light custom-dropdown-btn dropdown-toggle ms-filter-group__btn"
                    type="button" id="btnVendor" data-bs-toggle="dropdown" aria-expanded="false">
              所有及廠商
            </button>
            <ul class="dropdown-menu w-100 ms-filter-group__menu" id="listVendor">
              <li class="px-2 py-1">
                <input type="text" class="form-control form-control-sm" placeholder="搜尋..." onkeyup="filterList(this)">
              </li>
              <li><a class="dropdown-item" href="#" onclick="selectFilter('vendor', '')">所有廠商</a></li>
            </ul>
          </div>
        </div>

        <div class="col-md-2 ms-filter-group ms-filter-group--trade">
          <label class="ms-filter-group__label form-label" for="btnTrade">
            <i class="fas fa-exchange-alt" aria-hidden="true"></i> 借採轉
          </label>
          <div class="dropdown">
            <button class="btn btn-light custom-dropdown-btn dropdown-toggle ms-filter-group__btn"
                    type="button" id="btnTrade" data-bs-toggle="dropdown" aria-expanded="false">
              所有類別
            </button>
            <ul class="dropdown-menu w-100 ms-filter-group__menu" id="listTrade">
              <li><a class="dropdown-item" href="#" onclick="selectFilter('trade', '')">所有類別</a></li>
            </ul>
          </div>
        </div>

        <div class="col-md-1 d-flex align-items-end">
          <button class="btn ms-filter-card__refresh w-100" type="button" onclick="fetchData()">
            <i class="fas fa-sync-alt" aria-hidden="true"></i> 刷新
          </button>
        </div>
      </div>
    </section>

    <!-- ═══════ 商業洞察 (Top 3 Highlights) ═══════ -->
    <section class="row g-3 mb-4 ms-highlight-grid" id="highlightsRow" style="display: none;" aria-label="Top 3 品牌洞察">
      <div class="col-md-4">
        <article class="card h-100 border-0 shadow-sm overflow-hidden ms-highlight ms-highlight--accent">
          <header class="card-header ms-highlight__head">
            <h6 class="ms-highlight__title"><i class="fas fa-trophy" aria-hidden="true"></i> 業績貢獻王 (Top 3 Brands)</h6>
          </header>
          <div class="card-body p-0">
            <table class="table table-sm table-hover mb-0 ms-highlight__table">
              <tbody id="revHighlightsBody"></tbody>
            </table>
          </div>
        </article>
      </div>
      <div class="col-md-4">
        <article class="card h-100 border-0 shadow-sm overflow-hidden ms-highlight ms-highlight--olive">
          <header class="card-header ms-highlight__head">
            <h6 class="ms-highlight__title"><i class="fas fa-coins" aria-hidden="true"></i> 獲利金雞母 (Top 3 Brands)</h6>
          </header>
          <div class="card-body p-0">
            <table class="table table-sm table-hover mb-0 ms-highlight__table">
              <tbody id="profitHighlightsBody"></tbody>
            </table>
          </div>
        </article>
      </div>
      <div class="col-md-4">
        <article class="card h-100 border-0 shadow-sm overflow-hidden ms-highlight ms-highlight--honey">
          <header class="card-header ms-highlight__head">
            <h6 class="ms-highlight__title"><i class="fas fa-fire" aria-hidden="true"></i> 人氣引流款 (Top 3 Brands)</h6>
          </header>
          <div class="card-body p-0">
            <table class="table table-sm table-hover mb-0 ms-highlight__table">
              <tbody id="volHighlightsBody"></tbody>
            </table>
          </div>
        </article>
      </div>
    </section>

    <!-- ═══════ 年度 YoY ═══════ -->
    <section class="row mb-4">
      <div class="col-12">
        <article class="card border-0 shadow-sm ms-chart-card">
          <header class="card-header ms-chart-card__head">
            <h6 class="ms-chart-card__title"><i class="fas fa-history ms-chart-card__icon" aria-hidden="true"></i>年度 YoY 業績對比分析（本期 vs 去年同期）</h6>
          </header>
          <div class="card-body">
            <div id="yoyTrendChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
            <div class="table-responsive mt-3">
              <table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
                <tbody id="yoyTrendChartTableBody"></tbody>
              </table>
            </div>
          </div>
        </article>
      </div>
    </section>

    <!-- ═══════ 廠商排行 ═══════ -->
    <section class="row mb-4">
      <div class="col-lg-12">
        <article class="card border-0 shadow-sm ms-chart-card">
          <header class="card-header ms-chart-card__head">
            <h6 class="ms-chart-card__title"><i class="fas fa-building ms-chart-card__icon" aria-hidden="true"></i>Top 50 廠商獲利能力排行</h6>
          </header>
          <div class="card-body">
            <div id="vendorRankingChart" class="ms-chart-card__canvas" style="height: 900px;"></div>
            <div class="table-responsive mt-3">
              <table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
                <tbody id="vendorRankingChartTableBody"></tbody>
              </table>
            </div>
          </div>
        </article>
      </div>
    </section>

    <!-- ═══════ 類別分佈 + 價格帶 ═══════ -->
    <section class="row mb-4">
      <div class="col-lg-6">
        <article class="card border-0 shadow-sm h-100 ms-chart-card">
          <header class="card-header ms-chart-card__head">
            <h6 class="ms-chart-card__title"><i class="fas fa-chart-pie ms-chart-card__icon" aria-hidden="true"></i>全站類別業績分佈（Top 12）</h6>
          </header>
          <div class="card-body text-center">
            <div id="divisionDistChart" class="ms-chart-card__canvas" style="height: 350px;"></div>
            <div id="divisionDistChartTable" class="mt-2 ms-chart-card__scroll" style="max-height: 200px; overflow-y: auto;">
              <table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
                <tbody id="divisionDistChartTableBody"></tbody>
              </table>
            </div>
          </div>
        </article>
      </div>
      <div class="col-lg-6">
        <article class="card border-0 shadow-sm h-100 ms-chart-card">
          <header class="card-header ms-chart-card__head">
            <h6 class="ms-chart-card__title"><i class="fas fa-tags ms-chart-card__icon" aria-hidden="true"></i>價格帶業績貢獻比例</h6>
          </header>
          <div class="card-body">
            <div id="priceRangeChart" class="ms-chart-card__canvas" style="height: 350px;"></div>
            <div class="table-responsive mt-2">
              <table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
                <tbody id="priceRangeChartTableBody"></tbody>
              </table>
            </div>
          </div>
        </article>
      </div>
    </section>

    <!-- ═══════ 主對比圖 ═══════ -->
    <section class="row">
      <div class="col-lg-12">
        <article class="card mb-4 ms-chart-card">
          <header class="card-header ms-chart-card__head">
            <h6 class="ms-chart-card__title"><i class="fas fa-chart-line ms-chart-card__icon" aria-hidden="true"></i>年度月份業績對比趨勢</h6>
          </header>
          <div class="card-body">
            <div id="compareChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
            <div id="compareChartDataTable" class="mt-2">
              <div class="table-responsive">
                <table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
                  <tbody id="compareChartTableBody"></tbody>
                </table>
              </div>
            </div>
          </div>
        </article>
      </div>
    </section>

    <!-- ═══════ BCG + 散佈 ═══════ -->
    <section class="row mb-4">
      <div class="col-lg-6">
        <article class="card border-0 shadow-sm ms-chart-card">
          <header class="card-header ms-chart-card__head">
            <h6 class="ms-chart-card__title"><i class="fas fa-th ms-chart-card__icon" aria-hidden="true"></i>品牌策略 BCG 矩陣（銷量 vs 毛利率）</h6>
          </header>
          <div class="card-body">
            <div id="bcgMatrixChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
          </div>
        </article>
      </div>
      <div class="col-lg-6">
        <article class="card border-0 shadow-sm ms-chart-card">
          <header class="card-header ms-chart-card__head">
            <h6 class="ms-chart-card__title"><i class="fas fa-braille ms-chart-card__icon" aria-hidden="true"></i>價格 vs 銷售量分佈散佈圖</h6>
          </header>
          <div class="card-body">
            <div id="priceVolumeScatterChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
          </div>
        </article>
      </div>
    </section>

    <!-- ═══════ 季節熱力圖 ═══════ -->
    <section class="row mb-4">
      <div class="col-lg-12">
        <article class="card border-0 shadow-sm ms-chart-card">
          <header class="card-header ms-chart-card__head">
            <h6 class="ms-chart-card__title"><i class="fas fa-th-large ms-chart-card__icon" aria-hidden="true"></i>分類與月份淡旺季業績熱力圖</h6>
          </header>
          <div class="card-body">
            <div id="seasonalityHeatmapChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
          </div>
        </article>
      </div>
    </section>

    <!-- ═══════ 區域排行 ═══════ -->
    <section class="row mb-4">
      <div class="col-lg-12">
        <article class="card border-0 shadow-sm ms-chart-card">
          <header class="card-header ms-chart-card__head">
            <h6 class="ms-chart-card__title"><i class="fas fa-map ms-chart-card__icon" aria-hidden="true"></i>區名稱全站銷售排行（Area Ranking）</h6>
          </header>
          <div class="card-body">
            <div id="areaRankingChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
            <div class="table-responsive mt-3">
              <table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
                <tbody id="areaRankingChartTableBody"></tbody>
              </table>
            </div>
          </div>
        </article>
      </div>
    </section>

    <!-- ═══════ 4 個專屬區域對比圖（情報族群色） ═══════ -->
    <section class="row">
      <div class="col-lg-12">
        <article class="card mb-4 shadow-sm ms-special ms-special--info">
          <header class="card-header ms-special__head">
            <h6 class="ms-special__title"><i class="fas fa-layer-group" aria-hidden="true"></i>開架保養 &amp; 臉部清潔（合併業績）</h6>
          </header>
          <div class="card-body">
            <div id="specialChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
            <div id="specialChartDataTable" class="mt-2">
              <div class="table-responsive">
                <table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
                  <tbody id="specialChartTableBody"></tbody>
                </table>
              </div>
            </div>
          </div>
        </article>
      </div>
    </section>

    <section class="row">
      <div class="col-lg-12">
        <article class="card mb-4 shadow-sm ms-special ms-special--olive">
          <header class="card-header ms-special__head">
            <h6 class="ms-special__title"><i class="fas fa-magic" aria-hidden="true"></i>身體保養（年度業績分析）</h6>
          </header>
          <div class="card-body">
            <div id="bodyCareChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
            <div id="bodyCareChartDataTable" class="mt-2">
              <div class="table-responsive">
                <table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
                  <tbody id="bodyCareChartTableBody"></tbody>
                </table>
              </div>
            </div>
          </div>
        </article>
      </div>
    </section>

    <section class="row">
      <div class="col-lg-12">
        <article class="card mb-4 shadow-sm ms-special ms-special--honey">
          <header class="card-header ms-special__head">
            <h6 class="ms-special__title"><i class="fas fa-palette" aria-hidden="true"></i>彩妝／指彩 &amp; 精油擴香（合併業績）</h6>
          </header>
          <div class="card-body">
            <div id="makeupFragranceChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
            <div id="makeupFragranceChartDataTable" class="mt-2">
              <div class="table-responsive">
                <table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
                  <tbody id="makeupFragranceChartTableBody"></tbody>
                </table>
              </div>
            </div>
          </div>
        </article>
      </div>
    </section>

    <section class="row">
      <div class="col-lg-12">
        <article class="card mb-4 shadow-sm ms-special ms-special--mahogany">
          <header class="card-header ms-special__head">
            <h6 class="ms-special__title"><i class="fas fa-heartbeat" aria-hidden="true"></i>私密保養 &amp; 嬰幼洗沐（合併業績）</h6>
          </header>
          <div class="card-body">
            <div id="privacyInfantChart" class="ms-chart-card__canvas" style="height: 400px;"></div>
            <div id="privacyInfantChartDataTable" class="mt-2">
              <div class="table-responsive">
                <table class="table table-bordered table-sm text-center mb-0 small ms-chart-card__table">
                  <tbody id="privacyInfantChartTableBody"></tbody>
                </table>
              </div>
            </div>
          </div>
        </article>
      </div>
    </section>

    <!-- ═══════ 資料明細 ═══════ -->
    <section class="card shadow-sm mb-5 ms-data-table">
      <header class="card-header ms-data-table__head">
        <h5 class="ms-data-table__title"><i class="fas fa-list" aria-hidden="true"></i> 資料明細</h5>
        <a href="/system_settings" class="btn btn-sm btn-outline-primary ms-data-table__import">
          <i class="fas fa-plus" aria-hidden="true"></i> 匯入數據
        </a>
      </header>
      <div class="card-body">
        <div class="table-responsive">
          <table id="summaryTable" class="table table-hover align-middle ms-data-table__table" style="width:100%">
            <thead>
              <tr>
                <th>年/月</th>
                <th>處別</th>
                <th>區名稱</th>
                <th>PM</th>
                <th>品牌</th>
                <th>廠商</th>
                <th>交易</th>
                <th>銷售額(本月)</th>
                <th>YoY</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </section>

  </div>

{% endblock %}

{% block extra_js %}
  <script src="https://code.jquery.com/jquery-3.7.1.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="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script src="{{ url_for('static', filename='js/analysis-chart-theme.js') }}"></script>
  <script src="{{ url_for('static', filename='js/page-monthly-summary.js') }}"></script>
{% endblock %}