@php
  $idBase = Str::slug($title);

  /* ===== 指定部門固定顏色 =====
       想再新增部門，只要照格式多加一行
       '部門名稱' => '#RRGGBB', */
  $deptColors = [
      '系統資安組' => '#28a745', // 綠
      '專案業務組' => '#ff6384', // 粉
      '軟體開發組' => '#36a2eb',
      '委外廠商' => '#ff9f40',
  ];

  /* ===== 後備調色盤（超出對照表時依序遞補）===== */
  $fallback = ['#8e5ea2', '#3cba9f', '#e8c3b9', '#c45850', '#17becf', '#bcbd22', '#ffcd56', '#4bc0c0', '#9966ff'];
@endphp

<h2 class="mb-4">{{ $title }}</h2>

{{-- ─────  分頁籤  ───── --}}
<ul class="nav nav-tabs">
  @foreach (['m' => '每月', 'h' => '半年', 'y' => '每年'] as $k => $lbl)
    <li class="nav-item">
      <button class="nav-link {{ $loop->first ? 'active' : '' }}" data-bs-toggle="tab"
        data-bs-target="#{{ $idBase }}-{{ $k }}">{{ $lbl }}</button>
    </li>
  @endforeach
</ul>

<div class="tab-content mt-3">
  @foreach (['m' => 'monthly', 'h' => 'halfYear', 'y' => 'yearly'] as $k => $slug)
    <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="{{ $idBase }}-{{ $k }}">
      {{-- ↓ 只有「每月」需要月份篩選下拉 --}}
      @if ($k === 'm')
        <div class="mb-2">
          <label class="form-label me-2">月份：</label>
          <select class="form-select d-inline-block w-auto" id="sel-{{ $idBase }}">
            <option value="__all">全部</option>
          </select>
        </div>
      @endif

      <canvas id="c-{{ $idBase }}-{{ $k }}" height="120"></canvas>

      {{-- 摘要表 --}}
      <div class="table-responsive"><table class="table table-sm table-bordered mt-3" id="tbl-{{ $idBase }}-{{ $k }}"
        style="font-size:.875rem">
        <thead class="table-light"></thead>
        <tbody></tbody>
      </table></div>
    </div>
  @endforeach
</div>

{{-- 如已用 Vite 匯入 Chart.js，可刪除此行 --}}
@pushOnce('scripts')
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
@endPushOnce

@push('scripts')
  <script>
    (async () => {
      /* 後端 JSON：{ monthly:{labels,datasets}, halfYear:{…}, yearly:{…} } */
      const res = await fetch("{{ $route }}");
      const data = await res.json();

      const deptColors = @json($deptColors);
      const fallback = @json($fallback);

      /* ========== 每月 (m) ========== */
      const mData = data.monthly ?? {
        labels: [],
        datasets: []
      };
      const sel = document.getElementById('sel-{{ $idBase }}');
      const canvas = document.getElementById('c-{{ $idBase }}-m');
      const table = document.getElementById('tbl-{{ $idBase }}-m');

      // ① 下拉選單填入月份
      mData.labels.forEach(m => sel?.append(new Option(m, m)));

      let chartM; // Chart.js 實體

      // ② 渲染函式（全部 or 指定月份）
      function renderMonthly(filter = '__all') {
        const viewLabels = filter === '__all' ?
          mData.labels :
          mData.labels.filter(l => l === filter);

        const viewDatasets = mData.datasets.map((ds, i) => {
          const hex = deptColors[ds.label] ?? fallback[i % fallback.length];
          const vals = filter === '__all' ?
            ds.data :
            ds.data.filter((_, idx) => mData.labels[idx] === filter);
          return {
            ...ds,
            data: vals,
            backgroundColor: hexToRgba(hex, .6),
            borderColor: hex,
            borderWidth: 1
          };
        });

        /* --- Chart --- */
        chartM?.destroy(); // 先銷毀舊圖
        if (window.Chart && viewLabels.length) {
          chartM = new Chart(canvas, {
            type: 'bar',
            data: {
              labels: viewLabels,
              datasets: viewDatasets
            },
            options: {
              responsive: true,
              scales: {
                y: {
                  beginAtZero: true,
                  precision: 0
                }
              },
              plugins: {
                legend: {
                  position: 'top'
                }
              }
            }
          });
        }

        /* --- 表格 --- */
        const thead = table.querySelector('thead');
        const tbody = table.querySelector('tbody');

        if (!viewLabels.length) {
          thead.innerHTML = '<tr><th>期間</th><th>數量</th></tr>';
          tbody.innerHTML = '<tr><td colspan="2" class="text-center text-muted">暫無資料</td></tr>';
          return;
        }

        thead.innerHTML = '<tr><th>期間</th>' +
          viewDatasets.map(x => {
            const c = deptColors[x.label] ?? '#6c757d';
            return `<th style="background:${c};color:#fff">${x.label}</th>`;
          }).join('') +
          '</tr>';

        tbody.innerHTML = viewLabels.map((p, i) =>
          `<tr><td>${p}</td>` +
          viewDatasets.map(x => `<td>${x.data[i]??0}</td>`).join('') +
          '</tr>'
        ).join('');
      }

      // ③ 初始化（全部）
      renderMonthly();

      // ④ 監聽下拉變化
      sel?.addEventListener('change', e => renderMonthly(e.target.value));

      /* ========== 半年 / 年 (h, y) ========== */
      buildStatic('h', data.halfYear ?? {
        labels: [],
        datasets: []
      });
      buildStatic('y', data.yearly ?? {
        labels: [],
        datasets: []
      });

      function buildStatic(key, d) {
        const canvasId = 'c-{{ $idBase }}-' + key;
        const tblId = 'tbl-{{ $idBase }}-' + key;
        const canvas = document.getElementById(canvasId);
        const table = document.getElementById(tblId);

        if (window.Chart && d.labels.length) {
          const dsColored = d.datasets.map((ds, i) => {
            const hex = deptColors[ds.label] ?? fallback[i % fallback.length];
            return {
              ...ds,
              backgroundColor: hexToRgba(hex, .6),
              borderColor: hex,
              borderWidth: 1
            };
          });
          new Chart(canvas, {
            type: 'bar',
            data: {
              labels: d.labels,
              datasets: dsColored
            },
            options: {
              responsive: true,
              scales: {
                y: {
                  beginAtZero: true,
                  precision: 0
                }
              },
              plugins: {
                legend: {
                  position: 'top'
                }
              }
            }
          });
        }

        const thead = table.querySelector('thead');
        const tbody = table.querySelector('tbody');
        if (!d.labels.length) {
          thead.innerHTML = '<tr><th>期間</th><th>數量</th></tr>';
          tbody.innerHTML = '<tr><td colspan="2" class="text-center text-muted">暫無資料</td></tr>';
          return;
        }
        thead.innerHTML = '<tr><th>期間</th>' +
          d.datasets.map(x => {
            const hex = deptColors[x.label] ?? '#6c757d';
            return `<th style="background:${hex};color:#fff">${x.label}</th>`;
          }).join('') +
          '</tr>';

        tbody.innerHTML = d.labels.map((p, i) =>
          `<tr><td>${p}</td>` +
          d.datasets.map(x => `<td>${x.data[i]??0}</td>`).join('') +
          '</tr>'
        ).join('');
      }

      /* #rrggbb → rgba */
      function hexToRgba(hex, a = 1) {
        const n = parseInt(hex.replace('#', ''), 16);
        return `rgba(${(n>>16)&255},${(n>>8)&255},${n&255},${a})`;
      }
    })();
  </script>
@endpush