@extends('layouts.app')

@push('head')
<style>
/* ── 通用 ───────────────────────────────────── */
.gantt-page { display:flex; flex-direction:column; gap:1.25rem; }

/* ── 甘特圖外框 ─────────────────────────────── */
.gantt-wrap { border:1px solid var(--bs-border-color); border-radius:.5rem; overflow:hidden; background:var(--bs-body-bg); }
.gantt-scroll { overflow-x:auto; }
.gantt-table  { min-width:800px; border-collapse:collapse; width:100%; table-layout:fixed; }

/* label 欄 */
.gantt-label-col { width:260px; }
.gantt-label-cell {
  width:260px; border-right:2px solid var(--bs-border-color);
  padding:.35rem .6rem; vertical-align:middle;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gantt-indent-0 { padding-left:.6rem; }
.gantt-indent-1 { padding-left:1.6rem; }
.gantt-indent-2 { padding-left:2.8rem; }

/* 時間軸欄位 */
.gantt-col-week { border-right:1px solid var(--bs-border-color-translucent); }
.gantt-col-day  { border-right:1px solid var(--bs-border-color-translucent); }

/* header row */
.gantt-header th {
  font-size:.68rem; font-weight:600; color:var(--bs-secondary);
  text-align:center; padding:.3rem 0; white-space:nowrap; overflow:hidden;
  background:var(--bs-tertiary-bg);
  border-bottom:1px solid var(--bs-border-color);
}
.gantt-header th.today-col { background:rgba(13,110,253,.08); }
.gantt-header .gantt-month-th {
  border-left:1px solid var(--bs-border-color);
  border-bottom:1px solid var(--bs-border-color-translucent);
  font-size:.72rem; letter-spacing:.02em;
}
/* 月份交替色帶（月列 + 週列同步） */
.gantt-header th.month-band-even {
  background: rgba(99,102,241,.10);
  color: rgba(99,102,241,.95);
}
.gantt-header th.month-band-odd {
  background: rgba(16,185,129,.08);
  color: rgba(16,185,129,.9);
}
.gantt-header th.month-band-even.today-col,
.gantt-header th.month-band-odd.today-col {
  background: rgba(13,110,253,.12);
  color: rgba(13,110,253,.9);
}
.gantt-header th.gantt-header-label {
  text-align:left; padding-left:.75rem;
  border-right:2px solid var(--bs-border-color);
  vertical-align:middle;
}

/* 任務行 */
.gantt-row { border-bottom:1px solid var(--bs-border-color-translucent); }
.gantt-row:hover { background:var(--bs-tertiary-bg); }
.gantt-track { position:relative; height:36px; }
.today-bg   { background:rgba(13,110,253,.04); }

/* section 分隔行 */
.gantt-section-header td {
  background:var(--bs-secondary-bg); font-size:.72rem; font-weight:600;
  color:var(--bs-secondary); padding:.25rem .75rem;
  border-bottom:1px solid var(--bs-border-color);
}

/* 今天線 */
.today-line {
  position:absolute; top:0; bottom:0; left:0;
  border-left:2px dashed rgba(13,110,253,.5); pointer-events:none; z-index:3;
}

/* 任務 bar */
.task-bar {
  position:absolute; top:50%; transform:translateY(-50%);
  height:16px; border-radius:8px; min-width:4px;
  display:flex; align-items:center; padding:0 6px;
  white-space:nowrap; overflow:hidden; cursor:default;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.task-bar-label { font-size:.62rem; color:#fff; overflow:hidden; text-overflow:ellipsis; }

/* group bar（top-level，稍高） */
.group-bar { height:20px; border-radius:4px; opacity:.85; }

/* 任務無日期 */
.no-date-hint {
  position:absolute; top:50%; transform:translateY(-50%);
  left:4px; font-size:.65rem; color:var(--bs-secondary); opacity:.6;
}

/* 查核點菱形 */
.milestone-diamond {
  position:absolute; top:50%; transform:translate(-50%,-50%) rotate(45deg);
  width:13px; height:13px; border-radius:2px; z-index:2;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}

/* assignee badge */
.assignee-tag {
  font-size:.6rem; padding:0 4px; border-radius:3px;
  background:rgba(0,0,0,.06); color:var(--bs-secondary);
  white-space:nowrap;
}

/* ── 查核點卡片 ──────────────────────────────── */
.milestone-card { border-left:4px solid; border-radius:.375rem; }
.milestone-card.ms-done  { border-color:#198754; }
.milestone-card.ms-late  { border-color:#dc3545; }
.milestone-card.ms-pend  { border-color:#fd7e14; }

/* ── 初始化精靈 ──────────────────────────────── */
.init-wizard { max-width:560px; margin:2rem auto; }
.phase-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }

/* ── 查核點詳情表格 ──────────────────────────── */
.ms-detail-table {
  table-layout: fixed;
  width: 100%;
}
.ms-detail-table thead th {
  background: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
}
.ms-detail-table td { overflow: hidden; }
.ms-detail-table .ms-item:hover td { background: var(--bs-tertiary-bg); }
.ms-detail-table .ms-item.has-dlv:hover .dlv-chevron { color: var(--bs-primary) !important; }
.ms-detail-table .ms-dlv-row td { border-top: none; overflow: visible; }
.ms-detail-section .ms-detail-block + .ms-detail-block { margin-top: 0; }
.min-w-0 { min-width: 0; }
</style>
@endpush

@section('content')
@include('projects._nav')
@php
  // 預設值，主甘特圖區塊會覆蓋
  $ganttRangeStart  = null;
  $ganttTotalDays   = 0;
  $ganttTodayPct    = 0;
  $ganttTasksJson   = '[]';
  $ganttMsJson      = '[]';
  $ganttPredefined  = '{}';
  $ganttPalette     = '[]';
  $ganttTodayColW   = 0;
  $ganttGridJson    = '[]';
  $ganttColLabels   = '[]';
@endphp
<div class="container-fluid gantt-page">

  {{-- Header --}}
  <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
    <div>
      <h5 class="mb-0 fw-semibold">專案時程 / 甘特圖</h5>
      <small class="text-muted">{{ $project->name }}</small>
    </div>
    @if($activeContract && (count($flatTasks) || $milestones->isNotEmpty()))
      <div class="d-flex gap-2 align-items-center flex-wrap">
        {{-- 匯出 --}}
        <div class="dropdown">
          <button class="btn btn-sm btn-outline-secondary dropdown-toggle" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="bi bi-download me-1"></i>匯出
          </button>
          <ul class="dropdown-menu shadow-sm" aria-labelledby="exportDropdown">
            <li><button class="dropdown-item" type="button" onclick="window._ganttExport('png')"><i class="bi bi-image me-2"></i>圖片（PNG）</button></li>
            <li><button class="dropdown-item" type="button" onclick="window._ganttExport('pdf')"><i class="bi bi-file-earmark-pdf me-2"></i>PDF</button></li>
          </ul>
        </div>
        {{-- 週/日切換 --}}
        <div class="btn-group btn-group-sm">
          <a href="{{ request()->fullUrlWithQuery(['view'=>'month']) }}"
             class="btn {{ $viewMode==='month' ? 'btn-primary' : 'btn-outline-secondary' }}">月</a>
          <a href="{{ request()->fullUrlWithQuery(['view'=>'week']) }}"
             class="btn {{ $viewMode==='week' ? 'btn-primary' : 'btn-outline-secondary' }}">週</a>
          <a href="{{ request()->fullUrlWithQuery(['view'=>'day']) }}"
             class="btn {{ $viewMode==='day'  ? 'btn-primary' : 'btn-outline-secondary' }}">日</a>
        </div>
        @if($canManage)
          <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#taskModal">
            <i class="bi bi-plus me-1"></i>工作項目
          </button>
          <button class="btn btn-sm btn-outline-warning" data-bs-toggle="modal" data-bs-target="#msModal">
            <i class="bi bi-diamond me-1"></i>查核點
          </button>
          @if($canImport)
          <button class="btn btn-sm btn-outline-info" data-bs-toggle="modal" data-bs-target="#importModal">
            <i class="bi bi-box-arrow-in-down me-1"></i>匯入評估
          </button>
          @endif
          <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#settingsModal"
                  title="設定合約起迄與區塊">
            <i class="bi bi-gear"></i>
          </button>
          @if($activeContract)
          <button class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#destroyGanttModal"
                  title="刪除整個甘特圖">
            <i class="bi bi-trash3"></i>
          </button>
          @endif
        @endif
      </div>
    @endif
  </div>

  @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show py-2">
      {{ session('success') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  @endif

  {{-- ── 未選合約 ─────────────────────────────────────────── --}}
  @if(!$activeContract)
    <div class="card shadow-sm text-center py-5">
      <div class="text-muted">
        <i class="bi bi-diagram-3 fs-2 d-block mb-2 opacity-50"></i>
        請先從上方導覽列選擇合約，再查看該合約的甘特圖
      </div>
    </div>

  {{-- ── 初始化精靈 ───────────────────────────────────────── --}}
  @elseif(empty($flatTasks) && $milestones->isEmpty())
    <div class="init-wizard">
      <div class="card shadow-sm">
        <div class="card-header fw-semibold">
          <i class="bi bi-magic me-2"></i>初始化專案時程
          <small class="text-muted ms-2">{{ $activeContract->name }}</small>
        </div>
        <form method="POST" action="{{ route('projects.gantt.initialize', $project) }}">
          @csrf
          <div class="card-body">
            {{-- 起迄 --}}
            <div class="mb-4">
              <label class="form-label fw-semibold small">合約起迄時間</label>
              <div class="row g-2">
                <div class="col">
                  <input type="date" name="start_date" class="form-control form-control-sm"
                         value="{{ $activeContract->start_date?->format('Y-m-d') }}"
                         placeholder="開始日期">
                  <div class="form-text">開始日期</div>
                </div>
                <div class="col">
                  <input type="date" name="end_date" class="form-control form-control-sm"
                         value="{{ $activeContract->end_date?->format('Y-m-d') }}"
                         placeholder="結束日期">
                  <div class="form-text">結束日期</div>
                </div>
              </div>
            </div>

            {{-- 階段選擇 --}}
            <div class="mb-3">
              <label class="form-label fw-semibold small">選擇工作階段</label>
              <div class="phase-grid">
                @foreach($phases as $key => $info)
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox"
                           name="phases[]" value="{{ $key }}" id="phase_{{ $key }}"
                           @checked(in_array($key, ['planning','design','development','testing','deployment']))>
                    <label class="form-check-label d-flex align-items-center gap-1" for="phase_{{ $key }}">
                      <span style="width:10px;height:10px;border-radius:2px;background:{{ $info['color'] }};flex-shrink:0;display:inline-block;"></span>
                      {{ $info['label'] }}
                    </label>
                  </div>
                @endforeach
              </div>
            </div>

            {{-- 自訂階段 --}}
            <div class="mb-2">
              <label class="form-label fw-semibold small">自訂階段（逗號分隔）</label>
              <input type="text" name="custom_phases" class="form-control form-control-sm"
                     placeholder="例：需求訪談,系統分析">
            </div>
          </div>
          <div class="card-footer text-end">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-arrow-right me-1"></i>開始建立
            </button>
          </div>
        </form>
      </div>
    </div>

  {{-- ── 主甘特圖 ─────────────────────────────────────────── --}}
  @else
    @php
      $today = \Carbon\CarbonImmutable::today();

      // 計算時間軸範圍：只用任務/查核點日期 + 今天，不用合約日期
      // 避免合約跨度（如全年）讓時間軸出現大量空欄
      $dates = collect();
      foreach ($flatTasks as $row) {
          $t = $row['task'];
          if ($t->start_date) $dates->push($t->start_date);
          if ($t->end_date)   $dates->push($t->end_date);
      }
      foreach ($milestones as $ms) { $dates->push($ms->due_date); }
      $dates->push($today);

      // 強制用可變 Carbon，避免 CarbonImmutable 的 addDay/addWeek/addMonth 不修改自身造成無窮迴圈
      $rangeStart = \Carbon\Carbon::parse($dates->min())->startOfWeek(\Carbon\Carbon::MONDAY);
      $rangeEnd   = \Carbon\Carbon::parse($dates->max())->endOfWeek(\Carbon\Carbon::SUNDAY);
      $totalDays  = $rangeStart->diffInDays($rangeEnd) + 1;

      // 建立欄位
      $columns     = [];
      $monthGroups = []; // 週/日視圖雙層表頭用

      if ($viewMode === 'month') {
          // 月視圖：以完整月份為範圍，避免邊界月份過窄導致標籤溢出
          $rangeStart = \Carbon\Carbon::parse($dates->min())->startOfMonth();
          $rangeEnd   = \Carbon\Carbon::parse($dates->max())->endOfMonth();
          $totalDays  = $rangeStart->diffInDays($rangeEnd) + 1;

          $cur = $rangeStart->copy();
          while ($cur->lte($rangeEnd)) {
              $mStart = $cur->copy()->startOfMonth();
              $mEndi  = $cur->copy()->endOfMonth();
              $wDays  = $mEndi->diffInDays($mStart) + 1;
              $columns[] = [
                  'label'    => $cur->format('Y/n月'),
                  'leftDays' => $rangeStart->diffInDays($mStart),
                  'widDays'  => $wDays,
                  'isToday'  => $today->between($mStart, $mEndi),
                  'month'    => $cur->format('Y-m'),
              ];
              $cur->addMonth();
          }
      } elseif ($viewMode === 'week') {
          $cur = $rangeStart->copy();
          while ($cur->lte($rangeEnd)) {
              $wStart = $cur->copy()->startOfWeek(\Carbon\Carbon::MONDAY);
              $wEnd   = $cur->copy()->endOfWeek(\Carbon\Carbon::SUNDAY);
              $left   = $rangeStart->diffInDays($wStart);
              $width  = min($wEnd, $rangeEnd)->diffInDays(max($wStart, $rangeStart)) + 1;
              $columns[] = [
                  'label'    => 'W'.$cur->isoWeek(),
                  'leftDays' => $left,
                  'widDays'  => $width,
                  'isToday'  => $today->between($wStart, $wEnd),
                  'month'    => $wStart->format('Y-m'),
              ];
              $cur->addWeek();
          }
      } else {
          // 日視圖
          $cur = $rangeStart->copy();
          while ($cur->lte($rangeEnd)) {
              $columns[] = [
                  'label'    => $cur->format('j'),
                  'leftDays' => $rangeStart->diffInDays($cur),
                  'widDays'  => 1,
                  'isToday'  => $cur->isSameDay($today),
                  'month'    => $cur->format('Y-m'),
              ];
              $cur->addDay();
          }
      }
      $numCols = count($columns);

      // 月份分組（週/日視圖雙層表頭用）
      if ($viewMode !== 'month') {
          $prevMKey  = null;
          $mIdx      = -1;
          $mIdxByCi  = []; // column index → monthGroups index
          foreach ($columns as $ci => $col) {
              $mKey  = $col['month'];
              $mDate = \Carbon\Carbon::createFromFormat('Y-m-d', $mKey.'-01');
              $label = $mDate->format('Y/m');
              $isTm  = $today->format('Y-m') === $mKey;
              if ($mKey !== $prevMKey) {
                  $mIdx++;
                  $monthGroups[] = ['label' => $label, 'span' => 1, 'isToday' => $isTm, 'idx' => $mIdx];
                  $prevMKey = $mKey;
              } else {
                  $monthGroups[count($monthGroups) - 1]['span']++;
              }
              $mIdxByCi[$ci] = $mIdx;
          }
          // 把 monthIdx 寫回 columns
          foreach ($columns as $ci => &$col) {
              $col['monthIdx'] = $mIdxByCi[$ci] ?? 0;
          }
          unset($col);
      }
      $todayLeft = max(0, min(100, $rangeStart->diffInDays($today) / $totalDays * 100));

      // 計算 bar 位置
      $barPos = function($start, $end) use ($rangeStart, $totalDays) {
          $s = $start ?? $end;
          $e = $end   ?? $start;
          if (!$s) return null;
          $left  = max(0, $rangeStart->diffInDays($s) / $totalDays * 100);
          $right = min(100, ($rangeStart->diffInDays($e) + 1) / $totalDays * 100);
          return ['left' => $left, 'width' => max(0.3, $right - $left)];
      };
      $diaPos = fn($date) => max(0, min(100, $rangeStart->diffInDays($date) / $totalDays * 100));

      // 預計算 JS 用的 JSON（避免 @json 解析複雜運算式失敗）
      $ganttRangeStart = $rangeStart;
      $ganttTotalDays  = $totalDays;
      $ganttTodayPct   = round($todayLeft, 4);

      // Canvas 用：today 欄寬度 + 各欄左邊界（百分比）
      $ganttTodayColW = 0;
      $ganttGridPcts  = [];
      foreach ($columns as $col) {
          $ganttGridPcts[] = round($col['leftDays'] / $totalDays * 100, 4);
          if ($col['isToday']) {
              $ganttTodayColW = round($col['widDays'] / $totalDays * 100, 4);
          }
      }
      $ganttGridJson    = json_encode($ganttGridPcts);
      $ganttColLabels   = $viewMode === 'day'
          ? json_encode(array_column($columns, 'label'))
          : '[]';
      $ganttTasksJson  = json_encode(
          collect($flatTasks)->map(fn($r) => [
              'id'        => $r['task']->id,
              'parent_id' => $r['task']->parent_id,
              'start'     => $r['task']->start_date?->format('Y-m-d'),
              'end'       => $r['task']->end_date?->format('Y-m-d'),
              'rootIndex' => $r['rootIndex'],
              'depth'     => $r['depth'],
              'phase'     => $r['task']->phase,
          ])->values()
      );
      $ganttMsJson = json_encode(
          $milestones->map(fn($ms) => [
              'id'   => $ms->id,
              'due'  => $ms->due_date->format('Y-m-d'),
              'done' => $ms->isCompleted(),
              'late' => $ms->isOverdue(),
          ])->values()
      );
      $ganttPredefined = json_encode(
          collect(\App\Models\ProjectGanttTask::$predefinedPhases)->map(fn($v) => $v['color'])
      );
      $ganttPalette = json_encode(\App\Models\ProjectGanttTask::$paletteColors);
    @endphp

    {{-- 合約資訊列 --}}
    <div class="d-flex align-items-center gap-3 text-muted small">
      <span><i class="bi bi-file-earmark-text me-1"></i>{{ $activeContract->name }}</span>
      @if($activeContract->start_date || $activeContract->end_date)
        <span>
          {{ $activeContract->start_date?->format('Y/m/d') ?? '?' }}
          →
          {{ $activeContract->end_date?->format('Y/m/d') ?? '?' }}
        </span>
      @endif
      <span class="text-primary">
        <i class="bi bi-circle-fill me-1" style="font-size:.5rem;vertical-align:middle;"></i>今天 {{ $today->format('Y/m/d') }}
      </span>
    </div>

    {{-- ── Gantt 圖 ──────────────────────────────────────── --}}
    <div class="gantt-wrap">
      <div class="gantt-scroll">
        <table class="gantt-table"@if($viewMode==='day') style="width:{{ 260 + $numCols * 28 }}px;"@endif>
          <colgroup>
            <col class="gantt-label-col">
            @if($viewMode === 'day')
              <col span="{{ $numCols }}" style="width:28px;min-width:28px;">
            @else
              @foreach($columns as $col)
                <col style="width:{{ number_format($col['widDays'] / $totalDays * 100, 4) }}%">
              @endforeach
            @endif
          </colgroup>

          {{-- Header --}}
          <thead class="gantt-header">
            @if($viewMode !== 'month')
            {{-- 月份列（第一列） --}}
            <tr>
              <th class="gantt-label-cell gantt-header-label" rowspan="2">工作項目 / 查核點</th>
              @foreach($monthGroups as $mg)
                <th colspan="{{ $mg['span'] }}"
                    class="gantt-month-th month-band-{{ $mg['idx'] % 2 === 0 ? 'even' : 'odd' }}{{ $mg['isToday'] ? ' today-col' : '' }}">{{ $mg['label'] }}</th>
              @endforeach
            </tr>
            {{-- 週/日列（第二列） --}}
            @if($viewMode === 'day')
            {{-- 日視圖：單一佔位格，標籤由 canvas 繪製，避免 365 個 <th> 拖慢渲染 --}}
            <tr id="gantt-day-label-row">
              <th colspan="{{ $numCols }}" style="padding:0;height:22px;"></th>
            </tr>
            @else
            <tr>
              @foreach($columns as $col)
                <th class="month-band-{{ ($col['monthIdx'] ?? 0) % 2 === 0 ? 'even' : 'odd' }}{{ $col['isToday'] ? ' today-col' : '' }}">{{ $col['label'] }}</th>
              @endforeach
            </tr>
            @endif
            @else
            {{-- 月視圖：單列 --}}
            <tr>
              <th class="gantt-label-cell text-start ps-3">工作項目 / 查核點</th>
              @foreach($columns as $col)
                <th class="{{ $col['isToday'] ? 'today-col' : '' }}">{{ $col['label'] }}</th>
              @endforeach
            </tr>
            @endif
          </thead>
          <tbody>

            {{-- ── 預計算：查核點依所屬區塊分組 --}}
            @php
              $msByBlock   = $milestones->groupBy('gantt_task_id');
              $noBlockMs   = $msByBlock->get(null, collect());
              // rootIndex → top-level task id
              $rootIdByIdx = [];
              foreach ($flatTasks as $r) {
                  if ($r['depth'] === 0) $rootIdByIdx[$r['rootIndex']] = $r['task']->id;
              }
            @endphp

            {{-- ── WBS 任務（每個頂層區塊結尾附查核點）────── --}}
            @if(!empty($flatTasks))
            @php
              // 預先計算 phase / color，避免迴圈內 O(n²) 查找
              $_predef   = \App\Models\ProjectGanttTask::$predefinedPhases;
              $_palette  = \App\Models\ProjectGanttTask::$paletteColors;
              $_phaseByRoot = [];
              $_colorByRoot = [];
              foreach ($flatTasks as $_r) {
                  if ($_r['depth'] === 0) {
                      $ph = $_r['task']->phase;
                      $_phaseByRoot[$_r['rootIndex']] = $ph;
                      $_colorByRoot[$_r['rootIndex']] = isset($_predef[$ph])
                          ? $_predef[$ph]['color']
                          : ($_palette[$_r['rootIndex'] % count($_palette)] ?? '#0d6efd');
                  }
              }
            @endphp
            @foreach($flatTasks as $fIdx => $row)
              @php
                $t     = $row['task'];
                $depth = $row['depth'];
                $ri    = $row['rootIndex'];
                $color = $_colorByRoot[$ri] ?? '#0d6efd';
                $isGroup = ($depth === 0);
                $isFirstInBlock = ($depth === 0);
                $nextRow = $flatTasks[$fIdx + 1] ?? null;
                $isLastInBlock = !$nextRow || $nextRow['depth'] === 0;
              @endphp
              {{-- 每個頂層區塊加一個 section header --}}
              @if($isFirstInBlock)
              <tr class="gantt-section-header" data-block-root-id="{{ $t->id }}">
                <td colspan="{{ $numCols + 1 }}" style="background:{{ $color }}18;">
                  <span style="color:{{ $color }};font-size:.7rem;">■</span>
                  {{ $t->name }}
                </td>
              </tr>
              @endif
              <tr class="gantt-row" data-task-id="{{ $t->id }}">
                <td class="gantt-label-cell gantt-indent-{{ $depth }}">
                  <div class="d-flex align-items-center gap-1 overflow-hidden">
                    @if($canManage)
                      <span class="drag-handle text-muted flex-shrink-0"
                            data-task-id="{{ $t->id }}"
                            data-parent-id="{{ $t->parent_id ?? '' }}"
                            style="cursor:grab;line-height:1;touch-action:none;">
                        <i class="bi bi-grip-vertical" style="font-size:.75rem;"></i>
                      </span>
                    @endif
                    @if($isGroup)
                      <span class="d-inline-block flex-shrink-0"
                            style="width:8px;height:8px;border-radius:1px;background:{{ $color }};"></span>
                    @else
                      <span class="text-muted flex-shrink-0" style="font-size:.7rem;">└</span>
                    @endif
                    @if($t->wbs_code)
                      <code class="text-muted" style="font-size:.68rem;">{{ $t->wbs_code }}</code>
                    @endif
                    <span class="text-truncate" style="font-size:{{ $isGroup ? '.82rem' : '.78rem' }};{{ $isGroup ? 'font-weight:600' : '' }}">
                      {{ $t->name }}
                    </span>
                    @if($t->assignee)
                      <span class="assignee-tag flex-shrink-0">{{ $t->assignee->name }}</span>
                    @endif
                    @if($canManage)
                      <div class="d-flex gap-0 flex-shrink-0 ms-auto">
                        <button class="btn btn-link btn-sm p-0 text-muted"
                          onclick="openTaskEdit({{ $t->id }},'{{ addslashes($t->name) }}','{{ $t->wbs_code ?? '' }}','{{ $t->phase ?? '' }}',{{ $t->assigned_to_id ?? 'null' }},{{ $t->parent_id ?? 'null' }},'{{ $t->start_date?->format('Y-m-d') ?? '' }}','{{ $t->end_date?->format('Y-m-d') ?? '' }}')"
                          title="編輯"><i class="bi bi-pencil" style="font-size:.65rem;"></i></button>
                        <form method="POST" action="{{ route('projects.gantt.tasks.destroy',[$project,$t]) }}"
                              onsubmit="return confirm('刪除「{{ addslashes($t->name) }}」？')">
                          @csrf @method('DELETE')
                          <button type="submit" class="btn btn-link btn-sm p-0 text-danger" title="刪除">
                            <i class="bi bi-trash" style="font-size:.65rem;"></i>
                          </button>
                        </form>
                      </div>
                    @endif
                  </div>
                </td>
                <td colspan="{{ $numCols }}" style="padding:0;"></td>
              </tr>

              {{-- 此區塊結束 → 插入屬於此區塊的查核點 --}}
              @if($isLastInBlock)
                @php
                  $rootId   = $rootIdByIdx[$ri] ?? null;
                  $blockMs  = $msByBlock->get($rootId, collect());
                @endphp
                @foreach($blockMs as $ms)
                  @php
                    $msDone  = $ms->isCompleted();
                    $msLate  = $ms->isOverdue();
                    $msColor = $msDone ? '#198754' : ($msLate ? '#dc3545' : '#fd7e14');
                  @endphp
                  <tr class="gantt-row" data-ms-id="{{ $ms->id }}">
                    <td class="gantt-label-cell gantt-indent-1">
                      <div class="d-flex align-items-center gap-1 overflow-hidden">
                        @if($canManage)
                          <span class="drag-handle-ms text-muted flex-shrink-0"
                                data-ms-id="{{ $ms->id }}"
                                data-block-id="{{ $ms->gantt_task_id ?? '' }}"
                                style="cursor:grab;line-height:1;touch-action:none;">
                            <i class="bi bi-grip-vertical" style="font-size:.75rem;"></i>
                          </span>
                        @endif
                        <span style="color:{{ $msColor }};font-size:.8rem;">◆</span>
                        <span class="text-truncate" style="font-size:.82rem;font-weight:600;">{{ $ms->name }}</span>
                        <span class="text-muted" style="font-size:.68rem;flex-shrink:0;">{{ $ms->due_date->format('m/d') }}</span>
                        @if($canManage)
                        <div class="d-flex gap-0 flex-shrink-0 ms-auto">
                          <form method="POST" action="{{ route('projects.gantt.milestones.toggle',[$project,$ms]) }}">
                            @csrf
                            <button type="submit" class="btn btn-link btn-sm p-0 {{ $msDone ? 'text-warning' : 'text-success' }}" title="{{ $msDone ? '取消完成' : '標記完成' }}">
                              <i class="bi {{ $msDone ? 'bi-arrow-counterclockwise' : 'bi-check-lg' }}" style="font-size:.7rem;"></i>
                            </button>
                          </form>
                          <button class="btn btn-link btn-sm p-0 text-muted"
                            onclick="openMsEdit({{ $ms->id }},'{{ addslashes($ms->name) }}','{{ $ms->due_date->format('Y-m-d') }}','{{ addslashes($ms->notes ?? '') }}',{{ $ms->gantt_task_id ?? 'null' }})"
                            title="編輯"><i class="bi bi-pencil" style="font-size:.65rem;"></i></button>
                          <form method="POST" action="{{ route('projects.gantt.milestones.destroy',[$project,$ms]) }}"
                                onsubmit="return confirm('刪除查核點「{{ addslashes($ms->name) }}」？')">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-link btn-sm p-0 text-danger" title="刪除">
                              <i class="bi bi-trash" style="font-size:.65rem;"></i>
                            </button>
                          </form>
                        </div>
                        @endif
                      </div>
                    </td>
                    <td colspan="{{ $numCols }}" style="padding:0;height:36px;"></td>
                  </tr>
                @endforeach
              @endif
            @endforeach
            @endif

            {{-- ── 查核點（未指定區塊）──────────────────── --}}
            @if($noBlockMs->isNotEmpty())
            <tr class="gantt-section-header" data-block-root-id="">
              <td colspan="{{ $numCols + 1 }}"><i class="bi bi-diamond me-1"></i>查核點（未指定區塊）</td>
            </tr>
            @foreach($noBlockMs as $ms)
              @php
                $msDone  = $ms->isCompleted();
                $msLate  = $ms->isOverdue();
                $msColor = $msDone ? '#198754' : ($msLate ? '#dc3545' : '#fd7e14');
              @endphp
              <tr class="gantt-row" data-ms-id="{{ $ms->id }}">
                <td class="gantt-label-cell gantt-indent-0">
                  <div class="d-flex align-items-center gap-1 overflow-hidden">
                    @if($canManage)
                      <span class="drag-handle-ms text-muted flex-shrink-0"
                            data-ms-id="{{ $ms->id }}"
                            data-block-id=""
                            style="cursor:grab;line-height:1;touch-action:none;">
                        <i class="bi bi-grip-vertical" style="font-size:.75rem;"></i>
                      </span>
                    @endif
                    <span style="color:{{ $msColor }};font-size:.8rem;">◆</span>
                    <span class="text-truncate" style="font-size:.82rem;font-weight:600;">{{ $ms->name }}</span>
                    <span class="text-muted" style="font-size:.68rem;flex-shrink:0;">{{ $ms->due_date->format('m/d') }}</span>
                    @if($canManage)
                    <div class="d-flex gap-0 flex-shrink-0 ms-auto">
                      <form method="POST" action="{{ route('projects.gantt.milestones.toggle',[$project,$ms]) }}">
                        @csrf
                        <button type="submit" class="btn btn-link btn-sm p-0 {{ $msDone ? 'text-warning' : 'text-success' }}" title="{{ $msDone ? '取消完成' : '標記完成' }}">
                          <i class="bi {{ $msDone ? 'bi-arrow-counterclockwise' : 'bi-check-lg' }}" style="font-size:.7rem;"></i>
                        </button>
                      </form>
                      <button class="btn btn-link btn-sm p-0 text-muted"
                        onclick="openMsEdit({{ $ms->id }},'{{ addslashes($ms->name) }}','{{ $ms->due_date->format('Y-m-d') }}','{{ addslashes($ms->notes ?? '') }}',{{ $ms->gantt_task_id ?? 'null' }})"
                        title="編輯"><i class="bi bi-pencil" style="font-size:.65rem;"></i></button>
                      <form method="POST" action="{{ route('projects.gantt.milestones.destroy',[$project,$ms]) }}"
                            onsubmit="return confirm('刪除查核點「{{ addslashes($ms->name) }}」？')">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-link btn-sm p-0 text-danger" title="刪除">
                          <i class="bi bi-trash" style="font-size:.65rem;"></i>
                        </button>
                      </form>
                    </div>
                    @endif
                  </div>
                </td>
                <td colspan="{{ $numCols }}" style="padding:0;height:36px;"></td>
              </tr>
            @endforeach
            @endif

          </tbody>
        </table>
      </div>

      {{-- SVG overlay for bars & diamonds ──────────────────── --}}
      {{-- 改用 absolute overlay div on scroll container --}}
    </div>{{-- /gantt-wrap --}}

    {{-- ── Gantt 視覺層（Canvas-like overlay）─────────────── --}}
    {{-- 使用獨立 div + JS 繪製 bar/diamond 覆蓋在 table 上 --}}
    <div id="gantt-overlay-wrap" style="position:relative; margin-top:-1px;">
      <canvas id="gantt-canvas" style="position:absolute;top:0;left:0;pointer-events:none;display:none;"></canvas>
    </div>

    {{-- ── 查核點詳情（依區塊分組，表格式）──────────────────── --}}
    @if($milestones->isNotEmpty())
    @php
      $msDetailByBlock = $milestones->groupBy('gantt_task_id');
      $msNoBlock       = $msDetailByBlock->get(null, collect());
      $topTasksDetail  = collect($flatTasks)->where('depth', 0)->pluck('task');
      $predefD  = \App\Models\ProjectGanttTask::$predefinedPhases;
      $paletteD = \App\Models\ProjectGanttTask::$paletteColors;
    @endphp
    <div class="mt-4 ms-detail-section">

      {{-- 標題列 --}}
      <div class="d-flex align-items-center justify-content-between mb-2">
        <button type="button" class="btn btn-link p-0 fw-semibold text-body text-decoration-none d-flex align-items-center gap-2"
                id="msDetailToggle" aria-expanded="false" aria-controls="msDetailBody">
          <i class="bi bi-chevron-right" id="msDetailChevron" style="font-size:.75rem;transition:transform .2s;"></i>
          <i class="bi bi-diamond-half text-warning"></i>查核點詳情
          <span class="badge text-bg-secondary fw-normal" style="font-size:.7rem;">{{ $milestones->count() }} 個</span>
        </button>
        <div class="d-flex align-items-center gap-2" id="msSortRow" style="display:none!important;">
          <span class="text-muted" style="font-size:.8rem;">排序：</span>
          <div class="btn-group btn-group-sm" id="msSortBtns">
            <button type="button" class="btn btn-outline-secondary active" data-sort="asc" title="舊→新">
              <i class="bi bi-sort-up-alt"></i> 日期升冪
            </button>
            <button type="button" class="btn btn-outline-secondary" data-sort="desc" title="新→舊">
              <i class="bi bi-sort-down-alt"></i> 降冪
            </button>
          </div>
        </div>
      </div>
      <div id="msDetailBody" style="display:none;">

      {{-- ── 依區塊分組輸出 ──────────────────────────────── --}}
      @foreach($topTasksDetail as $loopIdx => $tt)
        @php $bMs = $msDetailByBlock->get($tt->id, collect()); @endphp
        @if($bMs->isNotEmpty())
        @php
          $bColor = isset($predefD[$tt->phase])
              ? $predefD[$tt->phase]['color']
              : ($paletteD[$loopIdx % count($paletteD)] ?? '#adb5bd');
        @endphp
        <div class="ms-detail-block border rounded-3 overflow-hidden mb-3 shadow-sm">

          {{-- 區塊 header --}}
          <div class="d-flex align-items-center gap-2 px-3 py-2"
               style="background:{{ $bColor }}18; border-bottom:1px solid {{ $bColor }}30;">
            <span style="width:10px;height:10px;border-radius:2px;background:{{ $bColor }};display:inline-block;flex-shrink:0;"></span>
            <span class="fw-semibold" style="font-size:.85rem;">{{ $tt->name }}</span>
            <span class="badge ms-1" style="font-size:.65rem;background:{{ $bColor }}30;color:{{ $bColor }};">
              {{ $bMs->count() }} 個查核點
            </span>
          </div>

          {{-- 表格 --}}
          <table class="table table-sm mb-0 align-middle ms-detail-table">
            <colgroup>
              <col style="width:40%;">
              <col style="width:15%;">
              <col style="width:15%;">
              <col style="width:15%;">
              @if($canManage)<col style="width:15%;">@endif
            </colgroup>
            <thead>
              <tr class="table-light border-bottom" style="font-size:.72rem;color:var(--bs-secondary);white-space:nowrap;">
                <th class="fw-semibold ps-3 py-2">查核點名稱</th>
                <th class="fw-semibold py-2">查核日</th>
                <th class="fw-semibold py-2">狀態</th>
                <th class="fw-semibold py-2">交付進度</th>
                @if($canManage)<th class="fw-semibold py-2">操作</th>@endif
              </tr>
            </thead>
            <tbody class="ms-list">
              @foreach($bMs as $ms)
              @php
                $msDone   = $ms->isCompleted();
                $msLate   = $ms->isOverdue();
                $msColor  = $msDone ? '#198754' : ($msLate ? '#dc3545' : '#fd7e14');
                $dlvTotal = $ms->deliverables->count();
                $dlvDone  = $ms->deliverables->filter(fn($d) => $d->isCompleted())->count();
                $dlvPct   = $dlvTotal > 0 ? round($dlvDone / $dlvTotal * 100) : 0;
                $barColor = $dlvDone === $dlvTotal && $dlvTotal > 0 ? '#198754' : '#0d6efd';
              @endphp

              {{-- 查核點主列 --}}
              <tr class="ms-item{{ $dlvTotal ? ' has-dlv' : '' }}" data-due="{{ $ms->due_date->format('Y-m-d') }}"
                  data-dlv-target="dlv-{{ $ms->id }}"
                  style="cursor:{{ $dlvTotal ? 'pointer' : 'default' }};">
                <td class="ps-3 py-2">
                  <div class="d-flex align-items-center gap-2">
                    @if($canManage)
                    <span class="drag-handle-ms-list text-muted flex-shrink-0"
                          data-ms-id="{{ $ms->id }}"
                          style="cursor:grab;touch-action:none;">
                      <i class="bi bi-grip-vertical" style="font-size:.75rem;"></i>
                    </span>
                    @endif
                    <span style="color:{{ $msColor }};font-size:.9rem;flex-shrink:0;">◆</span>
                    <div class="min-w-0">
                      <div class="fw-semibold lh-sm" style="font-size:.85rem;">{{ $ms->name }}</div>
                      @if($ms->notes)
                        <div class="text-muted" style="font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;">{{ $ms->notes }}</div>
                      @endif
                    </div>
                    @if($dlvTotal)
                      <i class="bi bi-chevron-right ms-1 text-muted dlv-chevron flex-shrink-0" style="font-size:.65rem;transition:transform .2s;transform:rotate(90deg);"></i>
                    @endif
                  </div>
                </td>
                <td class="py-2">
                  <span style="font-size:.78rem;white-space:nowrap;">{{ $ms->due_date->format('Y/m/d') }}</span>
                </td>
                <td class="py-2">
                  @if($msDone)
                    <span class="badge rounded-pill bg-success" style="font-size:.65rem;">已完成</span>
                  @elseif($msLate)
                    <span class="badge rounded-pill bg-danger" style="font-size:.65rem;">逾期</span>
                  @else
                    <span class="badge rounded-pill bg-warning text-dark" style="font-size:.65rem;">進行中</span>
                  @endif
                </td>
                <td class="py-2 pe-2">
                  @if($dlvTotal > 0)
                    <div class="d-flex align-items-center gap-2">
                      <div class="progress flex-grow-1" style="height:5px;border-radius:3px;">
                        <div class="progress-bar" role="progressbar"
                             style="width:{{ $dlvPct }}%;background:{{ $barColor }};" aria-valuenow="{{ $dlvPct }}" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                      <span class="text-muted fw-semibold flex-shrink-0" style="font-size:.7rem;min-width:28px;text-align:right;">{{ $dlvDone }}/{{ $dlvTotal }}</span>
                    </div>
                  @else
                    <span class="text-muted" style="font-size:.75rem;">—</span>
                  @endif
                </td>
                @if($canManage)
                <td class="py-2 pe-2" onclick="event.stopPropagation()">
                  <div class="d-flex justify-content-center align-items-center gap-1">
                    {{-- 無交付項目：手動 OK；有交付項目：全勾才自動完成 --}}
                    @if($dlvTotal === 0)
                      <form method="POST" action="{{ route('projects.gantt.milestones.toggle',[$project,$ms]) }}" class="mb-0">
                        @csrf
                        <button type="submit"
                                class="btn btn-sm py-0 px-2 {{ $msDone ? 'btn-outline-secondary' : 'btn-outline-success' }}"
                                style="font-size:.7rem;" title="{{ $msDone ? '取消完成' : '確認完成' }}">
                          <i class="bi {{ $msDone ? 'bi-arrow-counterclockwise' : 'bi-check-lg' }}"></i>
                          {{ $msDone ? '取消' : 'OK' }}
                        </button>
                      </form>
                    @else
                      <span class="text-muted" style="font-size:.75rem;"
                            title="打勾所有交付項目後自動完成">
                        <i class="bi bi-info-circle"></i>
                      </span>
                    @endif
                    <button class="btn btn-sm btn-outline-secondary py-0 px-1"
                      onclick="openMsEdit({{ $ms->id }},'{{ addslashes($ms->name) }}','{{ $ms->due_date->format('Y-m-d') }}','{{ addslashes($ms->notes ?? '') }}',{{ $ms->gantt_task_id ?? 'null' }})"
                      title="編輯" style="font-size:.7rem;"><i class="bi bi-pencil"></i></button>
                    <form method="POST" action="{{ route('projects.gantt.milestones.destroy',[$project,$ms]) }}"
                          onsubmit="return confirm('刪除查核點「{{ addslashes($ms->name) }}」？')" class="mb-0">
                      @csrf @method('DELETE')
                      <button type="submit" class="btn btn-sm btn-outline-danger py-0 px-1" title="刪除" style="font-size:.7rem;">
                        <i class="bi bi-trash"></i>
                      </button>
                    </form>
                  </div>
                </td>
                @endif
              </tr>

              {{-- 交付項目展開列 --}}
              @if($dlvTotal || $canManage)
              <tr id="dlv-{{ $ms->id }}" class="ms-dlv-row">
                <td colspan="{{ $canManage ? 5 : 4 }}" class="py-2 px-4" style="background:var(--bs-tertiary-bg);">
                  @if($ms->deliverables->isNotEmpty())
                  <ul class="list-unstyled mb-2">
                    @foreach($ms->deliverables as $dlv)
                      <li class="d-flex align-items-center gap-2 py-1 border-bottom" style="border-color:var(--bs-border-color-translucent)!important;font-size:.8rem;">
                        @if($canManage)
                        <form method="POST" action="{{ route('projects.gantt.deliverables.toggle',[$project,$ms,$dlv]) }}" class="mb-0 dlv-toggle-form">
                          @csrf
                          <button type="submit" class="btn btn-sm p-0 border-0 bg-transparent lh-1" title="{{ $dlv->isCompleted() ? '取消完成' : '標記完成' }}">
                            <i class="bi {{ $dlv->isCompleted() ? 'bi-check-square-fill text-success' : 'bi-square text-muted' }}" style="font-size:.95rem;"></i>
                          </button>
                        </form>
                        @else
                          <i class="bi {{ $dlv->isCompleted() ? 'bi-check-square-fill text-success' : 'bi-square text-muted' }} flex-shrink-0"></i>
                        @endif
                        <span class="{{ $dlv->isCompleted() ? 'text-decoration-line-through text-muted' : '' }}" style="flex:1;">{{ $dlv->name }}</span>
                        @if($canManage)
                        <form method="POST" action="{{ route('projects.gantt.deliverables.destroy',[$project,$ms,$dlv]) }}"
                              onsubmit="return confirm('刪除？')" class="mb-0">
                          @csrf @method('DELETE')
                          <button type="submit" class="btn btn-link btn-sm p-0 text-danger lh-1" title="刪除">
                            <i class="bi bi-x-lg" style="font-size:.7rem;"></i>
                          </button>
                        </form>
                        @endif
                      </li>
                    @endforeach
                  </ul>
                  @endif
                  @if($canManage)
                  <form method="POST" action="{{ route('projects.gantt.deliverables.store',[$project,$ms]) }}"
                        class="d-flex gap-2 align-items-center">
                    @csrf
                    <i class="bi bi-plus-circle text-muted" style="font-size:.85rem;flex-shrink:0;"></i>
                    <input type="text" name="name" class="form-control form-control-sm"
                           placeholder="新增交付項目…" required maxlength="200" style="max-width:280px;">
                    <button type="submit" class="btn btn-sm btn-outline-primary flex-shrink-0">新增</button>
                  </form>
                  @endif
                </td>
              </tr>
              @endif

              @endforeach
            </tbody>
          </table>
        </div>
        @endif
      @endforeach

      {{-- ── 未指定區塊 ───────────────────────────────────── --}}
      @if($msNoBlock->isNotEmpty())
      <div class="ms-detail-block border rounded-3 overflow-hidden mb-3 shadow-sm">

        <div class="d-flex align-items-center gap-2 px-3 py-2"
             style="background:var(--bs-secondary-bg); border-bottom:1px solid var(--bs-border-color);">
          <i class="bi bi-diamond text-secondary" style="font-size:.8rem;flex-shrink:0;"></i>
          <span class="fw-semibold text-secondary" style="font-size:.85rem;">未指定區塊</span>
          <span class="badge text-bg-secondary fw-normal ms-1" style="font-size:.65rem;">{{ $msNoBlock->count() }} 個查核點</span>
        </div>

        <table class="table table-sm mb-0 align-middle ms-detail-table">
          <colgroup>
            <col>
            <col style="width:105px;">
            <col style="width:78px;">
            <col style="width:145px;">
            @if($canManage)<col style="width:110px;">@endif
          </colgroup>
          <thead>
            <tr class="table-light border-bottom" style="font-size:.72rem;color:var(--bs-secondary);">
              <th class="fw-semibold ps-3 py-2">查核點名稱</th>
              <th class="fw-semibold py-2">查核日</th>
              <th class="fw-semibold py-2">狀態</th>
              <th class="fw-semibold py-2">交付進度</th>
              @if($canManage)<th class="py-2"></th>@endif
            </tr>
          </thead>
          <tbody class="ms-list">
            @foreach($msNoBlock as $ms)
            @php
              $msDone   = $ms->isCompleted();
              $msLate   = $ms->isOverdue();
              $msColor  = $msDone ? '#198754' : ($msLate ? '#dc3545' : '#fd7e14');
              $dlvTotal = $ms->deliverables->count();
              $dlvDone  = $ms->deliverables->filter(fn($d) => $d->isCompleted())->count();
              $dlvPct   = $dlvTotal > 0 ? round($dlvDone / $dlvTotal * 100) : 0;
              $barColor = $dlvDone === $dlvTotal && $dlvTotal > 0 ? '#198754' : '#0d6efd';
            @endphp

            <tr class="ms-item{{ $dlvTotal ? ' has-dlv' : '' }}" data-due="{{ $ms->due_date->format('Y-m-d') }}"
                data-dlv-target="dlv-nb-{{ $ms->id }}"
                style="cursor:{{ $dlvTotal ? 'pointer' : 'default' }};">
              <td class="ps-3 py-2">
                <div class="d-flex align-items-center gap-2">
                  @if($canManage)
                  <span class="drag-handle-ms-list text-muted flex-shrink-0"
                        data-ms-id="{{ $ms->id }}"
                        style="cursor:grab;touch-action:none;">
                    <i class="bi bi-grip-vertical" style="font-size:.75rem;"></i>
                  </span>
                  @endif
                  <span style="color:{{ $msColor }};font-size:.9rem;flex-shrink:0;">◆</span>
                  <div class="min-w-0">
                    <div class="fw-semibold lh-sm" style="font-size:.85rem;">{{ $ms->name }}</div>
                    @if($ms->notes)
                      <div class="text-muted" style="font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;">{{ $ms->notes }}</div>
                    @endif
                  </div>
                  @if($dlvTotal)
                    <i class="bi bi-chevron-right ms-1 text-muted dlv-chevron flex-shrink-0" style="font-size:.65rem;transition:transform .2s;transform:rotate(90deg);"></i>
                  @endif
                </div>
              </td>
              <td class="py-2">
                <span style="font-size:.78rem;white-space:nowrap;">{{ $ms->due_date->format('Y/m/d') }}</span>
              </td>
              <td class="py-2">
                @if($msDone)
                  <span class="badge rounded-pill bg-success" style="font-size:.65rem;">已完成</span>
                @elseif($msLate)
                  <span class="badge rounded-pill bg-danger" style="font-size:.65rem;">逾期</span>
                @else
                  <span class="badge rounded-pill bg-warning text-dark" style="font-size:.65rem;">進行中</span>
                @endif
              </td>
              <td class="py-2 pe-2">
                @if($dlvTotal > 0)
                  <div class="d-flex align-items-center gap-2">
                    <div class="progress flex-grow-1" style="height:5px;border-radius:3px;">
                      <div class="progress-bar" style="width:{{ $dlvPct }}%;background:{{ $barColor }};"></div>
                    </div>
                    <span class="text-muted fw-semibold flex-shrink-0" style="font-size:.7rem;min-width:28px;text-align:right;">{{ $dlvDone }}/{{ $dlvTotal }}</span>
                  </div>
                @else
                  <span class="text-muted" style="font-size:.75rem;">—</span>
                @endif
              </td>
              @if($canManage)
              <td class="py-2 pe-2" onclick="event.stopPropagation()">
                <div class="d-flex justify-content-end align-items-center gap-1">
                  <form method="POST" action="{{ route('projects.gantt.milestones.toggle',[$project,$ms]) }}" class="mb-0">
                    @csrf
                    <button type="submit"
                            class="btn btn-sm py-0 px-2 {{ $msDone ? 'btn-outline-secondary' : 'btn-outline-success' }}"
                            style="font-size:.7rem;" title="{{ $msDone ? '取消完成' : '標記完成' }}">
                      <i class="bi {{ $msDone ? 'bi-arrow-counterclockwise' : 'bi-check-lg' }}"></i>
                    </button>
                  </form>
                  <button class="btn btn-sm btn-outline-secondary py-0 px-1"
                    onclick="openMsEdit({{ $ms->id }},'{{ addslashes($ms->name) }}','{{ $ms->due_date->format('Y-m-d') }}','{{ addslashes($ms->notes ?? '') }}',{{ $ms->gantt_task_id ?? 'null' }})"
                    title="編輯" style="font-size:.7rem;"><i class="bi bi-pencil"></i></button>
                  <form method="POST" action="{{ route('projects.gantt.milestones.destroy',[$project,$ms]) }}"
                        onsubmit="return confirm('刪除查核點「{{ addslashes($ms->name) }}」？')" class="mb-0">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn btn-sm btn-outline-danger py-0 px-1" title="刪除" style="font-size:.7rem;">
                      <i class="bi bi-trash"></i>
                    </button>
                  </form>
                </div>
              </td>
              @endif
            </tr>

            @if($dlvTotal || $canManage)
            <tr id="dlv-nb-{{ $ms->id }}" class="ms-dlv-row">
              <td colspan="{{ $canManage ? 5 : 4 }}" class="py-2 px-4" style="background:var(--bs-tertiary-bg);">
                @if($ms->deliverables->isNotEmpty())
                <ul class="list-unstyled mb-2">
                  @foreach($ms->deliverables as $dlv)
                    <li class="d-flex align-items-center gap-2 py-1 border-bottom" style="border-color:var(--bs-border-color-translucent)!important;font-size:.8rem;">
                      @if($canManage)
                      <form method="POST" action="{{ route('projects.gantt.deliverables.toggle',[$project,$ms,$dlv]) }}" class="mb-0 dlv-toggle-form">
                        @csrf
                        <button type="submit" class="btn btn-sm p-0 border-0 bg-transparent lh-1">
                          <i class="bi {{ $dlv->isCompleted() ? 'bi-check-square-fill text-success' : 'bi-square text-muted' }}" style="font-size:.95rem;"></i>
                        </button>
                      </form>
                      @else
                        <i class="bi {{ $dlv->isCompleted() ? 'bi-check-square-fill text-success' : 'bi-square text-muted' }} flex-shrink-0"></i>
                      @endif
                      <span class="{{ $dlv->isCompleted() ? 'text-decoration-line-through text-muted' : '' }}" style="flex:1;">{{ $dlv->name }}</span>
                      @if($canManage)
                      <form method="POST" action="{{ route('projects.gantt.deliverables.destroy',[$project,$ms,$dlv]) }}"
                            onsubmit="return confirm('刪除？')" class="mb-0">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-link btn-sm p-0 text-danger lh-1">
                          <i class="bi bi-x-lg" style="font-size:.7rem;"></i>
                        </button>
                      </form>
                      @endif
                    </li>
                  @endforeach
                </ul>
                @endif
                @if($canManage)
                <form method="POST" action="{{ route('projects.gantt.deliverables.store',[$project,$ms]) }}"
                      class="d-flex gap-2 align-items-center">
                  @csrf
                  <i class="bi bi-plus-circle text-muted" style="font-size:.85rem;flex-shrink:0;"></i>
                  <input type="text" name="name" class="form-control form-control-sm"
                         placeholder="新增交付項目…" required maxlength="200" style="max-width:280px;">
                  <button type="submit" class="btn btn-sm btn-outline-primary flex-shrink-0">新增</button>
                </form>
                @endif
              </td>
            </tr>
            @endif

            @endforeach
          </tbody>
        </table>
      </div>
      @endif
    </div>{{-- /msDetailBody --}}

    </div>
    @endif

  @endif{{-- end main gantt --}}

</div>{{-- /gantt-page --}}

{{-- ── Modals ──────────────────────────────────────────────── --}}
@if($canManage && $activeContract)

{{-- ⚙ 時程設定 --}}
<div class="modal fade" id="settingsModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title fw-semibold"><i class="bi bi-gear me-1"></i>時程設定</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">

        <h6 class="small fw-semibold text-muted mb-2">合約起迄時間</h6>
        <form method="POST" action="{{ route('projects.gantt.update-dates',$project) }}" class="mb-4">
          @csrf
          <div class="row g-2 align-items-end">
            <div class="col">
              <label class="form-label small">開始日期</label>
              <input type="date" name="start_date" class="form-control form-control-sm"
                     value="{{ $activeContract->start_date?->format('Y-m-d') }}">
            </div>
            <div class="col">
              <label class="form-label small">結束日期</label>
              <input type="date" name="end_date" class="form-control form-control-sm"
                     value="{{ $activeContract->end_date?->format('Y-m-d') }}">
            </div>
            <div class="col-auto">
              <button type="submit" class="btn btn-sm btn-primary">儲存</button>
            </div>
          </div>
        </form>

        <h6 class="small fw-semibold text-muted mb-2">工作區塊（階段）</h6>
        @php $topTasks = collect($flatTasks)->where('depth', 0)->pluck('task'); @endphp
        @if($topTasks->isEmpty())
          <p class="text-muted small">尚無區塊，請新增。</p>
        @else
          <ul class="list-group list-group-flush mb-3">
            @foreach($topTasks as $tt)
              @php
                $predefS  = \App\Models\ProjectGanttTask::$predefinedPhases;
                $paletteS = \App\Models\ProjectGanttTask::$paletteColors;
                $pColor   = isset($predefS[$tt->phase])
                    ? $predefS[$tt->phase]['color']
                    : ($paletteS[$loop->index % count($paletteS)] ?? '#adb5bd');
              @endphp
              <li class="list-group-item d-flex align-items-center justify-content-between py-2 px-0">
                <div class="d-flex align-items-center gap-2">
                  <span style="width:10px;height:10px;border-radius:2px;background:{{ $pColor }};flex-shrink:0;display:inline-block;"></span>
                  <span class="small fw-semibold">{{ $tt->name }}</span>
                  @if($tt->phase && isset($predefS[$tt->phase]))
                    <span class="badge text-bg-secondary" style="font-size:.6rem;">{{ $predefS[$tt->phase]['label'] }}</span>
                  @endif
                </div>
                <form method="POST" action="{{ route('projects.gantt.tasks.destroy',[$project,$tt]) }}"
                      onsubmit="return confirm('刪除區塊「{{ addslashes($tt->name) }}」及其所有子項目？')">
                  @csrf @method('DELETE')
                  <button type="submit" class="btn btn-sm btn-outline-danger py-0 px-1">
                    <i class="bi bi-trash" style="font-size:.7rem;"></i>
                  </button>
                </form>
              </li>
            @endforeach
          </ul>
        @endif

        <form method="POST" action="{{ route('projects.gantt.tasks.store',$project) }}" class="d-flex gap-2">
          @csrf
          <select name="phase" class="form-select form-select-sm" style="max-width:110px;">
            <option value="">— 階段 —</option>
            @foreach($phases as $key => $info)
              <option value="{{ $key }}">{{ $info['label'] }}</option>
            @endforeach
          </select>
          <input type="text" name="name" class="form-control form-control-sm"
                 placeholder="新區塊名稱" required maxlength="200">
          <button type="submit" class="btn btn-sm btn-outline-primary flex-shrink-0">
            <i class="bi bi-plus"></i> 新增
          </button>
        </form>

      </div>
    </div>
  </div>
</div>

{{-- 新增/編輯工作項目 --}}
<div class="modal fade" id="taskModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title fw-semibold" id="taskModalLabel">新增工作項目</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="taskForm" method="POST" action="{{ route('projects.gantt.tasks.store',$project) }}">
        @csrf
        <span id="taskMethod"></span>
        <div class="modal-body">
          <div class="row g-3">

            {{-- 所屬區塊（parent） --}}
            <div class="col-12">
              <label class="form-label small fw-semibold">加入區塊</label>
              <select name="parent_id" id="taskParent" class="form-select form-select-sm"
                      onchange="onParentChange(this)">
                <option value="">— 新增頂層區塊 —</option>
                @foreach($flatTasks as $row)
                  @if($row['depth'] === 0)
                    <option value="{{ $row['task']->id }}"
                            data-phase="{{ $row['task']->phase ?? '' }}">
                      {{ $row['task']->name }}
                    </option>
                  @endif
                @endforeach
              </select>
              <div class="form-text text-muted">選擇現有區塊，新項目將成為其子項目</div>
            </div>

            {{-- 階段（只有頂層才需選） --}}
            <div class="col-sm-4" id="phaseRow">
              <label class="form-label small fw-semibold">階段顏色</label>
              <select name="phase" id="taskPhase" class="form-select form-select-sm">
                <option value="">— 不指定 —</option>
                @foreach($phases as $key => $info)
                  <option value="{{ $key }}">{{ $info['label'] }}</option>
                @endforeach
              </select>
            </div>

            <div class="col-sm-2">
              <label class="form-label small fw-semibold">WBS 編號</label>
              <input type="text" name="wbs_code" id="taskWbs" class="form-control form-control-sm"
                     placeholder="A1、A1-1" maxlength="20">
            </div>
            <div class="col-sm-6" id="nameCol">
              <label class="form-label small fw-semibold">名稱 <span class="text-danger">*</span></label>
              <input type="text" name="name" id="taskName" class="form-control form-control-sm" required maxlength="200">
            </div>

            <div class="col-sm-6">
              <label class="form-label small fw-semibold">負責人</label>
              <select name="assigned_to_id" id="taskAssignee" class="form-select form-select-sm">
                <option value="">— 未指派 —</option>
                @foreach($members as $m)
                  <option value="{{ $m->id }}">{{ $m->name }}</option>
                @endforeach
              </select>
            </div>
            <div class="col-sm-3">
              <label class="form-label small fw-semibold">開始日期</label>
              <input type="date" name="start_date" id="taskStart" class="form-control form-control-sm">
            </div>
            <div class="col-sm-3">
              <label class="form-label small fw-semibold">結束日期</label>
              <input type="date" name="end_date" id="taskEnd" class="form-control form-control-sm">
            </div>
          </div>
        </div>
        <div class="modal-footer py-2">
          <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" id="taskSubmit" class="btn btn-sm btn-primary">新增</button>
        </div>
      </form>
    </div>
  </div>
</div>

{{-- 新增/編輯查核點 --}}
<div class="modal fade" id="msModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title fw-semibold" id="msModalLabel">新增查核點</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="msForm" method="POST" action="{{ route('projects.gantt.milestones.store',$project) }}">
        @csrf
        <span id="msMethod"></span>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label small fw-semibold">加入區塊</label>
            <select name="gantt_task_id" id="msGanttTask" class="form-select form-select-sm">
              <option value="">— 不指定 —</option>
              @foreach($flatTasks as $row)
                @if($row['depth'] === 0)
                  <option value="{{ $row['task']->id }}">{{ $row['task']->name }}</option>
                @endif
              @endforeach
            </select>
            <div class="form-text text-muted">查核點所屬的工作階段</div>
          </div>
          <div class="mb-3">
            <label class="form-label small fw-semibold">查核點名稱 <span class="text-danger">*</span></label>
            <input type="text" name="name" id="msName" class="form-control form-control-sm" required maxlength="200">
          </div>
          <div class="mb-3">
            <label class="form-label small fw-semibold">查核日期 <span class="text-danger">*</span></label>
            <input type="date" name="due_date" id="msDue" class="form-control form-control-sm" required>
          </div>
          <div class="mb-1">
            <label class="form-label small fw-semibold">備註</label>
            <textarea name="notes" id="msNotes" class="form-control form-control-sm" rows="2" maxlength="1000"></textarea>
          </div>
        </div>
        <div class="modal-footer py-2">
          <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" id="msSubmit" class="btn btn-sm btn-warning">新增</button>
        </div>
      </form>
    </div>
  </div>
</div>

@if($canImport)
{{-- 匯入工時評估 --}}
<div class="modal fade" id="importModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title fw-semibold">匯入工時評估項目</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST" action="{{ route('projects.gantt.import',$project) }}">
        @csrf
        <div class="modal-body">
          @php
            $importedIds2 = \App\Models\ProjectGanttTask::where('project_id',$project->id)
                ->where('contract_id',$activeContractId)
                ->whereNotNull('estimation_category_id')
                ->pluck('estimation_category_id');
            $importCats = \App\Models\ProjectEstimationCategory::where('project_id',$project->id)
                ->where('contract_id',$activeContractId)
                ->whereNotIn('id',$importedIds2)
                ->orderBy('sort_order')->get();
          @endphp
          <div class="mb-3">
            <label class="form-label small fw-semibold">加入為子任務（選填）</label>
            <select name="parent_id" class="form-select form-select-sm">
              <option value="">— 頂層工作項目 —</option>
              @foreach($flatTasks as $row)
                @if($row['depth'] === 0)
                  <option value="{{ $row['task']->id }}">{{ $row['task']->name }}</option>
                @endif
              @endforeach
            </select>
          </div>
          <div class="mb-2 fw-semibold small">選擇要匯入的評估項目：</div>
          @foreach($importCats as $cat)
            <div class="form-check mb-1">
              <input class="form-check-input" type="checkbox" name="category_ids[]"
                     value="{{ $cat->id }}" id="cat_{{ $cat->id }}" checked>
              <label class="form-check-label small" for="cat_{{ $cat->id }}">
                {{ $cat->name }}
                @if($cat->estimated_man_days)
                  <span class="text-muted">({{ $cat->estimated_man_days }} MD)</span>
                @endif
              </label>
            </div>
          @endforeach
        </div>
        <div class="modal-footer py-2">
          <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-sm btn-info">匯入</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endif

{{-- ── 刪除甘特圖確認 modal ──────────────────────────────────── --}}
@if($activeContract)
<div class="modal fade" id="destroyGanttModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header py-2 bg-danger text-white">
        <h6 class="modal-title fw-semibold"><i class="bi bi-exclamation-triangle-fill me-2"></i>確認刪除甘特圖</h6>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p class="mb-1">此操作將刪除合約「<strong>{{ $activeContract->name }}</strong>」的：</p>
        <ul class="mb-2">
          <li>所有工作項目（WBS 樹）</li>
          <li>所有查核點與交付項目</li>
        </ul>
        <p class="text-danger fw-semibold mb-0"><i class="bi bi-exclamation-circle me-1"></i>刪除後無法復原，請確認。</p>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">取消</button>
        <form method="POST" action="{{ route('projects.gantt.destroy', $project) }}">
          @csrf
          @method('DELETE')
          <button type="submit" class="btn btn-sm btn-danger">
            <i class="bi bi-trash3 me-1"></i>確認刪除
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
@endif

@endif{{-- /canManage --}}
@endsection

@push('scripts')
<script>
// ── Gantt 時間軸 bars / diamonds + 拖拉互動 ─────────────────
(function() {
  const RANGE_START = '{{ $ganttRangeStart?->format('Y-m-d') ?? '' }}';
  const TOTAL_DAYS  = {{ $ganttTotalDays }};
  const TODAY_PCT   = {{ $ganttTodayPct }};
  const CAN_MANAGE  = {{ $canManage ? 'true' : 'false' }};
  const PATCH_BASE  = '{{ url("/projects/".$project->id."/gantt/tasks") }}';
  const CSRF        = document.querySelector('meta[name="csrf-token"]')?.content ?? '';

  const TASKS      = {!! $ganttTasksJson !!};
  const MILESTONES = {!! $ganttMsJson !!};
  const PREDEFINED = {!! $ganttPredefined !!};
  const PALETTE    = {!! $ganttPalette !!};
  const TODAY_COL_W_PCT = {{ $ganttTodayColW }};
  const GRID_LEFT_PCTS  = {!! $ganttGridJson !!};
  const GRID_COL_LABELS = {!! $ganttColLabels !!};
  const VIEW_MODE       = '{{ $viewMode }}';

  const RANGE_DT  = new Date(RANGE_START + 'T00:00:00');
  const RANGE_END = addDays(RANGE_START, TOTAL_DAYS - 1);
  function outsideRange(start, end) {
    return (start && start < RANGE_START) || (end && end > RANGE_END);
  }

  function pct(dateStr) {
    if (!dateStr) return null;
    const d = new Date(dateStr + 'T00:00:00');
    const diff = (d - RANGE_DT) / 86400000;
    return Math.max(0, Math.min(100, diff / TOTAL_DAYS * 100));
  }

  function addDays(dateStr, n) {
    const d = new Date((dateStr || RANGE_START) + 'T00:00:00');
    d.setDate(d.getDate() + n);
    return d.toISOString().slice(0, 10);
  }

  function taskColor(task) {
    if (task.phase && PREDEFINED[task.phase]) return PREDEFINED[task.phase];
    return PALETTE[task.rootIndex % PALETTE.length] ?? '#0d6efd';
  }

  function milestoneColor(ms) {
    return ms.done ? '#198754' : ms.late ? '#dc3545' : '#fd7e14';
  }

  const tasksById = {};
  TASKS.forEach(t => { tasksById[t.id] = t; });
  const msById = {};
  MILESTONES.forEach(m => { msById[m.id] = m; });

  window.addEventListener('load', function() {
    const tableEl = document.querySelector('.gantt-table');
    if (!tableEl) return;
    const tbody   = tableEl.querySelector('tbody');
    const wrapper = tableEl.parentElement; // .gantt-scroll

    const labelW    = tableEl.querySelector('.gantt-label-col')?.offsetWidth ?? 260;
    const timelineW = tableEl.offsetWidth - labelW;

    // Canvas 只覆蓋可見寬度，避免日視圖建立 84MB+ 的全寬 canvas
    const canvas = document.createElement('canvas');
    canvas.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none;';
    canvas.width  = wrapper.clientWidth;   // 可見寬度（非全表寬）
    canvas.height = tableEl.offsetHeight;
    wrapper.style.position = 'relative';
    wrapper.appendChild(canvas);
    const ctx = canvas.getContext('2d');

    // 水平捲動時移動 canvas 並重繪
    let _scrollRaf = false;
    wrapper.addEventListener('scroll', () => {
      canvas.style.left = wrapper.scrollLeft + 'px';
      if (!_scrollRaf) {
        _scrollRaf = true;
        requestAnimationFrame(() => { _scrollRaf = false; drawAll(); });
      }
    });

    // 快取 row 垂直位置，避免每次 drawAll 都觸發 offsetTop reflow
    let rowYCache = null; // Map<rowEl, {top, height}>
    let ganttRows = [];   // 已過濾的 gantt-row 元素列表

    function buildRowCache() {
      ganttRows = Array.from(tbody.querySelectorAll('tr.gantt-row'));
      rowYCache  = new Map();
      ganttRows.forEach(row => {
        let y = 0, el = row;
        while (el && el !== tableEl) { y += el.offsetTop; el = el.offsetParent; }
        rowYCache.set(row, { top: y, height: row.offsetHeight || 36 });
      });
    }
    // 摺疊/展開後需重建快取
    window.ganttInvalidateRowCache = () => { rowYCache = null; };

    function rowY(rowEl)  { return rowYCache?.get(rowEl)?.top ?? 0; }
    function rowH(rowEl)  { return rowYCache?.get(rowEl)?.height ?? 36; }

    // 日視圖第二列 header 位置（canvas 繪製日期標籤用）
    const dayLabelRow = document.getElementById('gantt-day-label-row');
    const dayLabelTop = dayLabelRow
        ? (() => { let y = 0, el = dayLabelRow; while (el && el !== tableEl) { y += el.offsetTop; el = el.offsetParent; } return y; })()
        : -1;
    const dayLabelH   = dayLabelRow?.offsetHeight ?? 22;
    const dayColW     = TOTAL_DAYS > 0 ? timelineW / TOTAL_DAYS : 28;

    // Hit-test geometry (rebuilt on each drawAll)
    let barRects = [];

    // Drag state
    let dragState = null; // { type:'move'|'resize', task, startMX, origStart, origEnd }

    function drawAll() {
      const scrollX = wrapper.scrollLeft;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      barRects = [];

      // Today column highlight（取代原本 .today-bg CSS class）
      if (TODAY_COL_W_PCT > 0) {
        const tcx = labelW + (TODAY_PCT / 100) * timelineW - scrollX;
        const tcw = Math.max(1, (TODAY_COL_W_PCT / 100) * timelineW);
        ctx.fillStyle = 'rgba(13,110,253,0.04)';
        ctx.fillRect(tcx, 0, tcw, canvas.height);
      }

      // Column grid lines（取代原本 .gantt-col-day/.gantt-col-week border-right）
      if (VIEW_MODE !== 'month' && GRID_LEFT_PCTS.length > 0) {
        ctx.save();
        ctx.strokeStyle = 'rgba(108,117,125,0.15)';
        ctx.lineWidth = 1;
        ctx.beginPath();
        GRID_LEFT_PCTS.forEach(p => {
          const x = Math.round(labelW + (p / 100) * timelineW - scrollX) + 0.5;
          if (x < 0 || x > canvas.width) return;
          ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height);
        });
        ctx.stroke();
        ctx.restore();
      }

      // Today line
      const todayX = labelW + (TODAY_PCT / 100) * timelineW - scrollX;
      ctx.save();
      ctx.setLineDash([4, 3]);
      ctx.strokeStyle = 'rgba(13,110,253,0.5)';
      ctx.lineWidth = 2;
      ctx.beginPath(); ctx.moveTo(todayX, 0); ctx.lineTo(todayX, canvas.height);
      ctx.stroke();
      ctx.restore();

      // 日視圖：在 header 第二列繪製日期數字（取代 365 個 <th>）
      if (VIEW_MODE === 'day' && dayLabelTop >= 0 && GRID_COL_LABELS.length > 0) {
        const midY = dayLabelTop + dayLabelH / 2;
        ctx.save();
        ctx.font = '600 10px system-ui,sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        GRID_COL_LABELS.forEach((label, i) => {
          const x = labelW + (GRID_LEFT_PCTS[i] / 100) * timelineW + dayColW / 2 - scrollX;
          if (x + dayColW / 2 < labelW || x - dayColW / 2 > canvas.width) return;
          const isToday = TODAY_COL_W_PCT > 0 && Math.abs(x - todayX - dayColW / 2) < 2;
          ctx.fillStyle = isToday ? 'rgba(13,110,253,0.9)' : 'rgba(108,117,125,0.85)';
          ctx.fillText(label, x, midY);
        });
        ctx.restore();
      }

      // 確保 row 快取已建立
      if (!rowYCache) buildRowCache();

      ganttRows.forEach(row => {
        const top  = rowY(row);
        const rh   = rowH(row);
        const midY = top + rh / 2;

        if (row.dataset.taskId) {
          const task = tasksById[+row.dataset.taskId];
          if (!task || (!task.start && !task.end)) return;

          const s = task.start || task.end;
          const e = task.end   || task.start;
          const lp = pct(s);
          const rp = Math.max(pct(s) + 0.5, pct(e) + (1 / TOTAL_DAYS * 100));
          const bx = labelW + (lp / 100) * timelineW - scrollX;
          const bw = Math.max(8, ((rp - lp) / 100) * timelineW);
          const bh = task.depth === 0 ? 18 : 14;
          if (bx + bw < 0 || bx > canvas.width) return;
          const isDrag = dragState?.task.id === task.id;

          barRects.push({ taskId: task.id, task, x: bx, y: midY - bh/2, w: bw, h: bh });

          const color = taskColor(task);
          ctx.save();
          ctx.globalAlpha = isDrag ? 1.0 : (task.depth === 0 ? 0.85 : 0.9);
          ctx.fillStyle   = color;
          ctx.beginPath(); ctx.roundRect(bx, midY - bh/2, bw, bh, bh/2); ctx.fill();
          // resize handle (right edge)
          if (CAN_MANAGE) {
            ctx.globalAlpha = isDrag ? 0.6 : 0.3;
            ctx.fillStyle   = '#fff';
            ctx.beginPath();
            ctx.roundRect(bx + bw - 7, midY - bh/2 + 2, 5, bh - 4, 2);
            ctx.fill();
          }
          ctx.restore();

        } else if (row.dataset.msId) {
          const ms = msById[+row.dataset.msId];
          if (!ms) return;
          const color = milestoneColor(ms);
          const dx = labelW + (pct(ms.due) / 100) * timelineW - scrollX;
          if (dx < -20 || dx > canvas.width + 20) return;
          const sz = 13;
          ctx.save();
          ctx.fillStyle = color;
          ctx.translate(dx, midY);
          ctx.rotate(Math.PI / 4);
          ctx.beginPath(); ctx.roundRect(-sz/2, -sz/2, sz, sz, 2); ctx.fill();
          ctx.restore();
        }
      });
    }

    // ── Hit test ────────────────────────────────────────────
    function hitBar(mx, my) {
      for (const bar of barRects) {
        if (mx >= bar.x && mx <= bar.x + bar.w &&
            my >= bar.y && my <= bar.y + bar.h) {
          return { bar, resize: mx >= bar.x + bar.w - 8 };
        }
      }
      return null;
    }

    function canvasXY(e) {
      const cr = canvas.getBoundingClientRect();
      return { x: e.clientX - cr.left, y: e.clientY - cr.top };
    }

    // ── Drag: mousedown on scroll wrapper ───────────────────
    let pendingDrag = null; // detect direction before committing to date-drag vs row-sort
    if (CAN_MANAGE) {
      wrapper.addEventListener('mousedown', e => {
        const { x, y } = canvasXY(e);
        const hit = hitBar(x, y);
        if (!hit) return;
        e.preventDefault();
        pendingDrag = { x, y, clientY: e.clientY, hit };
      });
    }

    // ── Drag: mousemove (on document for outside-canvas dragging) ──
    document.addEventListener('mousemove', e => {
      if (pendingDrag) {
        const { x } = canvasXY(e);
        const dx = Math.abs(x - pendingDrag.x);
        const dy = Math.abs(e.clientY - pendingDrag.clientY);
        if (dy > 5 && dy >= dx) {
          // primarily vertical → switch to row sort
          const row = tbody.querySelector(`tr.gantt-row[data-task-id="${pendingDrag.hit.bar.taskId}"]`);
          if (row && window._startBarRowSort) window._startBarRowSort(row);
          pendingDrag = null;
        } else if (dx > 3) {
          // primarily horizontal → commit to date drag
          dragState = {
            type: pendingDrag.hit.resize ? 'resize' : 'move',
            task: pendingDrag.hit.bar.task,
            startMX: pendingDrag.x,
            origStart: pendingDrag.hit.bar.task.start,
            origEnd:   pendingDrag.hit.bar.task.end,
          };
          wrapper.style.cursor = pendingDrag.hit.resize ? 'ew-resize' : 'grabbing';
          drawAll();
          pendingDrag = null;
        }
      }
      if (dragState) {
        e.preventDefault();
        const { x } = canvasXY(e);
        const dDays = Math.round((x - dragState.startMX) / timelineW * TOTAL_DAYS);
        if (dragState.type === 'move') {
          dragState.task.start = dragState.origStart ? addDays(dragState.origStart, dDays) : null;
          dragState.task.end   = dragState.origEnd   ? addDays(dragState.origEnd,   dDays) : null;
        } else {
          // resize: only end date
          if (dragState.origEnd) {
            const ne = addDays(dragState.origEnd, dDays);
            dragState.task.end = ne >= (dragState.origStart ?? ne) ? ne : (dragState.origStart ?? ne);
          }
        }
        drawAll();
      } else if (CAN_MANAGE && !window._rowSorting) {
        const { x, y } = canvasXY(e);
        const hit = x > labelW ? hitBar(x, y) : null;
        wrapper.style.cursor = hit ? (hit.resize ? 'ew-resize' : 'grab') : '';
      }
    });

    // ── Drag: mouseup → save ────────────────────────────────
    document.addEventListener('mouseup', () => {
      pendingDrag = null;
      if (!dragState) return;
      const { task, origStart, origEnd } = dragState;
      dragState = null;
      wrapper.style.cursor = '';
      drawAll();
      if (task.start === origStart && task.end === origEnd) return;

      fetch(`${PATCH_BASE}/${task.id}/dates`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify({ start_date: task.start, end_date: task.end }),
      })
      .then(r => r.json())
      .then(d => {
        if (d.ok) {
          task.start = d.start; task.end = d.end;
          if (outsideRange(d.start, d.end)) { location.reload(); return; }
        } else {
          task.start = origStart; task.end = origEnd;
        }
        drawAll();
      })
      .catch(() => { task.start = origStart; task.end = origEnd; drawAll(); });
    });

    window.ganttRedraw = drawAll;

    // 載入時自動捲動到今天（避免空白畫面）
    if (TODAY_PCT > 0 && timelineW > 0) {
      const todayAbsX = labelW + (TODAY_PCT / 100) * timelineW;
      const target = Math.max(0, todayAbsX - wrapper.clientWidth / 2);
      wrapper.scrollLeft = target;
      canvas.style.left = wrapper.scrollLeft + 'px';
    }
    drawAll();
  });
})();

// ── Row drag-sort (pointer events, tasks + milestones, 跨區自由拖拉) ──
@if($canManage && $activeContract)
(function() {
  // 阻止 HTML5 native drag（避免拖拉時出現白色 ghost image）
  document.addEventListener('dragstart', e => { e.preventDefault(); });
  const TASK_REORDER_URL = '{{ route("projects.gantt.tasks.reorder", $project) }}';
  const MS_REORDER_URL   = '{{ route("projects.gantt.milestones.reorder", $project) }}';
  const CSRF = document.querySelector('meta[name="csrf-token"]')?.content ?? '';

  let sd = null; // { row, tbody, type:'task'|'ms'|'ms-list' }

  const ind = document.createElement('tr');
  ind.style.cssText = 'height:0;pointer-events:none;';
  ind.innerHTML = '<td colspan="100" style="padding:0;border-top:3px solid #0d6efd;"></td>';

  let rafPending = false;

  function startDrag(row, tbody, type) {
    sd = { row, tbody, type };
    const lc = row.querySelector('td.gantt-label-cell, td.ps-3');
    if (lc) lc.style.opacity = '0.35';
    document.body.style.userSelect = 'none';
    document.body.style.cursor     = 'grabbing';
    window._rowSorting = true;
  }

  // Called from canvas IIFE when bar is dragged primarily vertically
  window._startBarRowSort = function(row) {
    const tbody = row.closest('tbody');
    if (!tbody) return;
    const type = row.querySelector('.drag-handle-ms') ? 'ms' : 'task';
    startDrag(row, tbody, type);
  };

  document.addEventListener('mousedown', e => {
    const taskH   = e.target.closest('.drag-handle');
    const msH     = e.target.closest('.drag-handle-ms');
    const msListH = e.target.closest('.drag-handle-ms-list');
    const handle  = taskH || msH || msListH;
    if (!handle) return;
    e.preventDefault();
    const row = msListH
      ? handle.closest('tr.ms-item')
      : handle.closest('tr.gantt-row');
    const tbody = row?.closest('tbody');
    if (!row || !tbody) return;
    startDrag(row, tbody, taskH ? 'task' : (msListH ? 'ms-list' : 'ms'));
  });

  document.addEventListener('mousemove', e => {
    if (!sd) return;
    // 選取合法的兄弟 rows（gantt-row 或 ms-list 的 ms-item）
    const rowSel = sd.type === 'ms-list' ? 'tr.ms-item' : 'tr.gantt-row';
    const siblings = [...sd.tbody.querySelectorAll(rowSel)].filter(r => r !== sd.row);
    if (!siblings.length) return;
    let before = null;
    for (const sib of siblings) {
      const rect = sib.getBoundingClientRect();
      if (e.clientY < rect.top + rect.height / 2) { before = sib; break; }
    }
    if (before) sd.tbody.insertBefore(ind, before);
    else sd.tbody.insertBefore(ind, siblings[siblings.length - 1].nextSibling);
    // 同步重繪 canvas，避免 bars 殘影（右邊白色問題）
    if (!rafPending) {
      rafPending = true;
      requestAnimationFrame(() => { rafPending = false; window.ganttRedraw?.(); });
    }
  });

  // 取得某 row 所在的區塊 root id（往上找最近的 section-header）
  function getBlockRootId(row) {
    let el = row.previousElementSibling;
    while (el) {
      if (el.classList.contains('gantt-section-header')) {
        return el.dataset.blockRootId ?? '';
      }
      el = el.previousElementSibling;
    }
    return '';
  }

  document.addEventListener('mouseup', () => {
    if (!sd) return;
    const { row, tbody, type } = sd;
    sd = null;
    const lc = row.querySelector('td.gantt-label-cell, td.ps-3');
    if (lc) lc.style.opacity = '';
    document.body.style.userSelect = '';
    document.body.style.cursor     = '';
    window._rowSorting = false;
    if (ind.parentNode) { tbody.insertBefore(row, ind); ind.remove(); }
    window.ganttInvalidateRowCache?.();
    requestAnimationFrame(() => window.ganttRedraw?.());

    if (type === 'task') {
      // 收集所有 task IDs（全域順序）
      const ids = [];
      tbody.querySelectorAll('tr.gantt-row .drag-handle').forEach(h => {
        ids.push(+h.dataset.taskId);
      });
      fetch(TASK_REORDER_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify({ ids }),
      })
      .then(r => r.json())
      .then(d => { if (!d.ok) location.reload(); })
      .catch(() => location.reload());

    } else if (type === 'ms-list') {
      // ms-detail 表格內排序（同一 tbody.ms-list）
      const ids = [];
      tbody.querySelectorAll('tr.ms-item .drag-handle-ms-list').forEach(h => {
        ids.push(+h.dataset.msId);
      });
      fetch(MS_REORDER_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify({ ids, blocks: {} }),
      })
      .then(r => r.json())
      .then(d => { if (!d.ok) location.reload(); })
      .catch(() => location.reload());

    } else {
      // Gantt chart 中的查核點排序 + 跨區更新
      const ids = [];
      const blocks = {};
      tbody.querySelectorAll('tr.gantt-row').forEach(r => {
        const h = r.querySelector('.drag-handle-ms');
        if (!h) return;
        const msId   = +h.dataset.msId;
        const oldBlk = h.dataset.blockId ?? '';
        const newBlk = getBlockRootId(r);
        ids.push(msId);
        if (newBlk !== oldBlk) blocks[msId] = newBlk;
        h.dataset.blockId = newBlk;
      });
      fetch(MS_REORDER_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify({ ids, blocks }),
      })
      .then(r => r.json())
      .then(d => { if (!d.ok) location.reload(); })
      .catch(() => location.reload());
    }
  });
})();
@endif

// ── Task modal helpers ──────────────────────────────────────
const TASK_STORE_URL = '{{ route('projects.gantt.tasks.store',$project) }}';

function onParentChange(sel) {
  const phaseRow = document.getElementById('phaseRow');
  if (!phaseRow) return;
  if (sel.value) {
    // child task: inherit parent phase, hide phase selector
    phaseRow.style.display = 'none';
    const opt = sel.options[sel.selectedIndex];
    const ph = opt.dataset.phase || '';
    document.getElementById('taskPhase').value = ph;
  } else {
    phaseRow.style.display = '';
    document.getElementById('taskPhase').value = '';
  }
}

function openTaskEdit(id, name, wbs, phase, assigneeId, parentId, startDate, endDate) {
  document.getElementById('taskForm').action = TASK_STORE_URL.replace('/tasks', '/tasks/' + id);
  document.getElementById('taskMethod').innerHTML = '<input type="hidden" name="_method" value="PUT">';
  document.getElementById('taskModalLabel').textContent = '編輯工作項目';
  document.getElementById('taskSubmit').textContent = '儲存';
  document.getElementById('taskName').value    = name;
  document.getElementById('taskWbs').value     = wbs || '';
  document.getElementById('taskStart').value   = startDate || '';
  document.getElementById('taskEnd').value     = endDate   || '';
  if (document.getElementById('taskAssignee'))
    document.getElementById('taskAssignee').value = assigneeId || '';
  const parentSel = document.getElementById('taskParent');
  if (parentSel) {
    parentSel.value = parentId || '';
    onParentChange(parentSel);
  }
  // for top-level task being edited, restore its own phase
  if (!parentId) {
    document.getElementById('taskPhase').value = phase || '';
  }
  new bootstrap.Modal(document.getElementById('taskModal')).show();
}
document.getElementById('taskModal')?.addEventListener('hidden.bs.modal', function() {
  document.getElementById('taskForm').action = TASK_STORE_URL;
  document.getElementById('taskMethod').innerHTML = '';
  document.getElementById('taskModalLabel').textContent = '新增工作項目';
  document.getElementById('taskSubmit').textContent = '新增';
  document.getElementById('taskModal').querySelector('form').reset();
  // restore phase row for "新增頂層" default
  const phaseRow = document.getElementById('phaseRow');
  if (phaseRow) phaseRow.style.display = '';
});

// ── Milestone modal helpers ─────────────────────────────────
const MS_STORE_URL = '{{ route('projects.gantt.milestones.store',$project) }}';
function openMsEdit(id, name, due, notes, ganttTaskId) {
  document.getElementById('msForm').action = MS_STORE_URL.replace('/milestones', '/milestones/' + id);
  document.getElementById('msMethod').innerHTML = '<input type="hidden" name="_method" value="PUT">';
  document.getElementById('msModalLabel').textContent = '編輯查核點';
  document.getElementById('msSubmit').textContent = '儲存';
  document.getElementById('msName').value  = name;
  document.getElementById('msDue').value   = due;
  document.getElementById('msNotes').value = notes || '';
  const msgt = document.getElementById('msGanttTask');
  if (msgt) msgt.value = ganttTaskId || '';
  new bootstrap.Modal(document.getElementById('msModal')).show();
}
document.getElementById('msModal')?.addEventListener('hidden.bs.modal', function() {
  document.getElementById('msForm').action = MS_STORE_URL;
  document.getElementById('msMethod').innerHTML = '';
  document.getElementById('msModalLabel').textContent = '新增查核點';
  document.getElementById('msSubmit').textContent = '新增';
  document.getElementById('msModal').querySelector('form').reset();
});

// ── 交付項目打勾 AJAX（不重整畫面）──────────────────────────
document.addEventListener('submit', function(e) {
  const form = e.target;
  if (!form.classList.contains('dlv-toggle-form')) return;
  e.preventDefault();

  const icon     = form.querySelector('i');
  const li       = form.closest('li');
  const nameSpan = li?.querySelector('span[style*="flex"]');
  const dlvRow   = form.closest('tr.ms-dlv-row');
  const msItem   = dlvRow
    ? document.querySelector(`.ms-item[data-dlv-target="${dlvRow.id}"]`)
    : null;

  // Optimistic UI：先立刻切換，再等伺服器確認
  const wasChecked = icon?.classList.contains('bi-check-square-fill');
  if (icon) {
    icon.className = wasChecked
      ? 'bi bi-square text-muted'
      : 'bi bi-check-square-fill text-success';
  }
  if (nameSpan) {
    nameSpan.classList.toggle('text-decoration-line-through', !wasChecked);
    nameSpan.classList.toggle('text-muted', !wasChecked);
  }

  fetch(form.action, {
    method: 'POST',
    headers: {
      'X-Requested-With': 'XMLHttpRequest',
      'Accept': 'application/json',
    },
    body: new FormData(form),
  })
  .then(r => r.json())
  .then(data => {
    if (!data.ok) { location.reload(); return; }

    // 以伺服器回應為準修正 checkbox 狀態
    if (icon) {
      icon.className = data.dlvDone
        ? 'bi bi-check-square-fill text-success'
        : 'bi bi-square text-muted';
    }
    if (nameSpan) {
      nameSpan.classList.toggle('text-decoration-line-through', data.dlvDone);
      nameSpan.classList.toggle('text-muted', data.dlvDone);
    }

    if (!msItem) return;

    const msColor  = data.msDone ? '#198754' : (data.msLate ? '#dc3545' : '#fd7e14');
    const pct      = data.dlvTotal > 0
      ? Math.round(data.dlvCompleted / data.dlvTotal * 100) : 0;
    const barColor = (data.dlvCompleted === data.dlvTotal && data.dlvTotal > 0)
      ? '#198754' : '#0d6efd';

    // 進度條
    const bar  = msItem.querySelector('.progress-bar');
    const frac = msItem.cells[3]?.querySelector('.fw-semibold');
    if (bar)  { bar.style.width = pct + '%'; bar.style.background = barColor; }
    if (frac) frac.textContent = data.dlvCompleted + '/' + data.dlvTotal;

    // 狀態 badge（第 3 欄，0-indexed = 2）
    const statusTd = msItem.cells[2];
    if (statusTd) {
      const cls  = data.msDone
        ? 'bg-success'
        : (data.msLate ? 'bg-danger' : 'bg-warning text-dark');
      const txt  = data.msDone ? '已完成' : (data.msLate ? '逾期' : '進行中');
      statusTd.innerHTML =
        `<span class="badge rounded-pill ${cls}" style="font-size:.65rem;">${txt}</span>`;
    }

    // 菱形顏色
    const diamond = msItem.querySelector('span[style*="font-size:.9rem"]');
    if (diamond) diamond.style.color = msColor;
  })
  .catch(() => location.reload());
});

// ── 查核點詳情：展開交付項目 + 日期排序 ────────────────────
(function() {

  // ── 點擊 ms-item 展開/收合交付子列（預設展開）──────────
  document.querySelectorAll('.ms-item.has-dlv').forEach(row => {
    row.addEventListener('click', function() {
      const targetId = this.dataset.dlvTarget;
      if (!targetId) return;
      const dlvRow  = document.getElementById(targetId);
      if (!dlvRow)  return;
      const chevron = this.querySelector('.dlv-chevron');
      const isOpen  = dlvRow.style.display === '' || dlvRow.style.display === 'table-row';
      dlvRow.style.display = isOpen ? 'none' : '';
      if (chevron) chevron.style.transform = isOpen ? '' : 'rotate(90deg)';
    });
  });

  // ── 日期排序（ms-item + 配對 dlv-row 一起移動）─────────
  const btns = document.querySelectorAll('#msSortBtns [data-sort]');
  if (!btns.length) return;

  function sortBlock(tbody, dir) {
    // collect pairs: [ms-item, dlv-row|null]
    const pairs = [];
    let cur = null;
    Array.from(tbody.children).forEach(tr => {
      if (tr.classList.contains('ms-item')) {
        cur = { item: tr, dlv: null };
        pairs.push(cur);
      } else if (tr.classList.contains('ms-dlv-row') && cur) {
        cur.dlv = tr;
        cur = null;
      }
    });
    pairs.sort((a, b) => {
      const da = a.item.dataset.due, db = b.item.dataset.due;
      return dir === 'asc' ? da.localeCompare(db) : db.localeCompare(da);
    });
    pairs.forEach(({ item, dlv }) => {
      tbody.appendChild(item);
      if (dlv) tbody.appendChild(dlv);
    });
  }

  function applySort(dir) {
    document.querySelectorAll('.ms-detail-table tbody.ms-list').forEach(tb => sortBlock(tb, dir));
  }

  btns.forEach(btn => {
    btn.addEventListener('click', () => {
      btns.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      applySort(btn.dataset.sort);
    });
  });

  applySort('asc');
})();

// ── 查核點詳情 展開/收合 ─────────────────────────────────
(function() {
  const toggle  = document.getElementById('msDetailToggle');
  const body    = document.getElementById('msDetailBody');
  const chevron = document.getElementById('msDetailChevron');
  const sortRow = document.getElementById('msSortRow');
  if (!toggle || !body) return;

  toggle.addEventListener('click', () => {
    const open = body.style.display !== 'none';
    body.style.display   = open ? 'none' : '';
    sortRow.style.display = open ? 'none' : '';
    chevron.style.transform = open ? '' : 'rotate(90deg)';
    toggle.setAttribute('aria-expanded', String(!open));
  });
})();
</script>

<script src="/vendor/html2canvas/html2canvas.min.js"></script>
<script src="/vendor/jspdf/jspdf.umd.min.js"></script>
<script>
window._ganttExport = function(format) {
  if (typeof html2canvas === 'undefined') { alert('html2canvas 未載入，請重新整理頁面再試'); return; }
  var wrap = document.querySelector('.gantt-wrap');
  if (!wrap) { alert('找不到甘特圖區塊'); return; }

  var exportBtn = document.getElementById('exportDropdown');
  var origHtml  = exportBtn ? exportBtn.innerHTML : '';
  if (exportBtn) { exportBtn.disabled = true; exportBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>產生中…'; }

  var scrollEl     = wrap.querySelector('.gantt-scroll');
  var origOverflow = scrollEl ? scrollEl.style.overflowX : '';
  var origMaxW     = wrap.style.maxWidth;
  if (scrollEl) scrollEl.style.overflowX = 'visible';
  wrap.style.maxWidth = 'none';

  var projectName = {!! json_encode($project->name ?? 'gantt') !!};
  var filename    = projectName + '_甘特圖_' + new Date().toISOString().slice(0, 10);

  function restore() {
    if (scrollEl) scrollEl.style.overflowX = origOverflow;
    wrap.style.maxWidth = origMaxW;
    if (exportBtn) { exportBtn.disabled = false; exportBtn.innerHTML = origHtml; }
  }

  html2canvas(wrap, {
    useCORS: true, scale: 1.5, logging: false,
    scrollX: -window.scrollX, scrollY: -window.scrollY,
    width: wrap.scrollWidth, height: wrap.scrollHeight,
    windowWidth: wrap.scrollWidth + 100,
  }).then(function(canvas) {
    restore();
    if (format === 'png') {
      var a = document.createElement('a');
      a.download = filename + '.png';
      a.href = canvas.toDataURL('image/png');
      document.body.appendChild(a); a.click(); document.body.removeChild(a);
    } else {
      var cw = canvas.width, ch = canvas.height;
      var pdf = new window.jspdf.jsPDF({ orientation: cw > ch ? 'l' : 'p', unit: 'px', format: [cw, ch] });
      pdf.addImage(canvas.toDataURL('image/jpeg', 0.9), 'JPEG', 0, 0, cw, ch);
      pdf.save(filename + '.pdf');
    }
  }).catch(function(err) {
    restore();
    alert('匯出失敗：' + (err && err.message ? err.message : err));
  });
};

</script>
@endpush