@extends('layouts.app')
@section('title', '工作看板')

@push('styles')
<link rel="stylesheet" href="/vendor/tom-select/tom-select.bootstrap5.min.css">
<style>
.kanban-wrapper {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 16px;
  align-items: flex-start;
}
.kanban-col {
  flex: 0 0 270px;
  background: #f4f6f8;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 240px);
}
.kanban-col-header {
  padding: 10px 14px;
  font-weight: 600;
  font-size: .85rem;
  border-radius: 10px 10px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  cursor: grab;
  user-select: none;
}
.kanban-col-header:active { cursor: grabbing; }
.kanban-col-header .drag-handle {
  opacity: .6;
  margin-right: 6px;
  font-size: .9rem;
  letter-spacing: -1px;
  flex-shrink: 0;
}
.kanban-col.col-ghost {
  opacity: .4;
  border: 2px dashed rgba(255,255,255,.6);
}
.kanban-col.col-dragging {
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
  transform: rotate(1deg);
  cursor: grabbing;
}
.kanban-cards {
  padding: 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 80px;
}
.kanban-card {
  background: #fff;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  cursor: grab;
  transition: box-shadow .15s, transform .15s;
  border-left: 3px solid transparent;
}
.kanban-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); transform: translateY(-1px); }
.card-delete-btn {
  padding: 2px 7px;
  border-radius: 6px;
  background: #fff0f0;
  color: #dc3545;
  border: 1px solid #f5c2c7;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.card-delete-btn:hover { background: #dc3545 !important; color: #fff !important; border-color: #dc3545 !important; }
.kanban-card.sortable-ghost { opacity: .4; }
.kanban-card.sortable-drag  { cursor: grabbing; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.kanban-card.updating       { opacity: .6; pointer-events: none; }
.pri-urgent { border-left-color: #dc3545; }
.pri-high   { border-left-color: #fd7e14; }
.pri-normal { border-left-color: #0d6efd; }
.pri-low    { border-left-color: #6c757d; }
.col-menu-btn {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: rgba(255,255,255,.2);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700;
  cursor: pointer; border: none;
  transition: background .15s;
  flex-shrink: 0;
}
.col-menu-btn:hover { background: rgba(255,255,255,.35); }
.add-col-btn {
  flex: 0 0 60px;
  background: #e9ecef;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #6c757d;
  font-size: 1.5rem;
  min-height: 120px;
  border: 2px dashed #ced4da;
  transition: background .15s;
}
.add-col-btn:hover { background: #dee2e6; color: #0d6efd; }
.col-quick-add {
  padding: 6px 8px 8px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.col-add-card-btn {
  width: 100%;
  padding: 6px 10px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: #6c757d;
  font-size: .8rem;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.col-add-card-btn:hover { background: rgba(0,0,0,.06); color: #0d6efd; }
.sort-indicator {
  font-size: .65rem;
  opacity: .85;
  background: rgba(255,255,255,.22);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  display: none;
}
.sort-item.active-sort {
  font-weight: 600;
  color: #0d6efd;
}
.sort-item.active-sort::before {
  content: '✓ ';
}
</style>
@endpush

@section('content')
@php $allCards = $columns->flatMap(fn($c) => $c->cards)->sortBy('id'); @endphp
<div class="container-fluid py-3 px-4">

  {{-- 工具列 --}}
  <div class="mb-2">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-1">
      <div class="d-flex align-items-center gap-2">
        @if($personalMode ?? false)
          <i class="bi bi-person-workspace fs-4 text-success"></i>
          <h4 class="mb-0 fw-bold">個人看板</h4>
        @else
          <i class="bi bi-kanban-fill fs-4 text-primary"></i>
          <h4 class="mb-0 fw-bold">工作看板</h4>
        @endif
        <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#categoryManageModal">
          <i class="bi bi-tags me-1"></i>管理分類
        </button>
        <button class="btn btn-sm btn-outline-secondary" id="notif-settings-btn"
          data-bs-toggle="modal" data-bs-target="#notifSettingsModal"
          title="通知設定">
          <i class="bi bi-bell me-1"></i>通知設定
        </button>
        @if(($isAdmin ?? false) && !($personalMode ?? false))
          <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#memberManageModal">
            <i class="bi bi-people me-1"></i>成員管理
          </button>
        @endif
      </div>
      <div class="d-flex align-items-center gap-2 flex-wrap">
        <div class="d-flex align-items-center gap-1">
          <label class="small text-muted mb-0 text-nowrap">專案：</label>
          <select id="projectFilter" class="form-select form-select-sm" style="max-width:160px;">
            <option value="">── 全部 ──</option>
            @foreach($projects as $proj)
              <option value="{{ $proj->id }}">{{ $proj->name }}</option>
            @endforeach
          </select>
        </div>
        <div class="d-flex align-items-center gap-1">
          <label class="small text-muted mb-0 text-nowrap">分類：</label>
          <select id="categoryFilter" class="form-select form-select-sm" style="max-width:150px;">
            <option value="">── 全部 ──</option>
            @foreach($categories as $cat)
              <option value="{{ $cat->id }}">{{ $cat->name }}</option>
            @endforeach
          </select>
        </div>
        @if(!($personalMode ?? false))
          <div class="d-flex align-items-center gap-1">
            <label class="small text-muted mb-0 text-nowrap">人員：</label>
            <select id="columnFilter" class="form-select form-select-sm" style="max-width:150px;">
              <option value="">── 全部 ──</option>
              @foreach($columns as $col)
                <option value="{{ $col->id }}">{{ $col->name }}</option>
              @endforeach
            </select>
          </div>
        @endif
      </div>
    </div>

    {{-- 統計 + 新增卡片按鈕 --}}
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mt-1">
      @if(!($personalMode ?? false))
      <div class="d-flex gap-2 flex-wrap">
        <span class="badge rounded-pill bg-secondary fs-6 px-3" id="stat-total">
          <i class="bi bi-card-list me-1"></i>全部 <span id="stat-total-n">{{ $columns->sum(fn($c) => $c->cards->count()) }}</span>
        </span>
        <span class="badge rounded-pill bg-success fs-6 px-3" id="stat-done">
          <i class="bi bi-check-circle me-1"></i>完成度 100% <span id="stat-done-n">{{ $columns->sum(fn($c) => $c->cards->where('done_ratio', 100)->count()) }}</span>
        </span>
        <span class="badge rounded-pill fs-6 px-3" style="background:#0891b2;" id="stat-today">
          <i class="bi bi-calendar-check me-1"></i>今日異動 <span id="stat-today-n">{{ $columns->sum(fn($c) => $c->cards->filter(fn($card) => $card->updated_at?->isToday())->count()) }}</span>
        </span>
      </div>
      @else
      <div></div>
      @endif
      <button class="btn btn-sm btn-outline-warning ms-auto" data-bs-toggle="modal" data-bs-target="#quickFillModal">
        <i class="bi bi-lightning-fill me-1"></i>一鍵填寫
      </button>
      <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#createCardModal">
        <i class="bi bi-plus-lg me-1"></i>新增卡片
      </button>
    </div>

    {{-- 今日工時統計（依分類） --}}
    @php
      $keywords = ['保固', '維護', '進行'];
      $todayCards = $columns->flatMap(fn($c) => $c->cards)->filter(fn($c) => $c->updated_at?->isToday() && $c->work_hours > 0);
      $catHours  = $todayCards->groupBy(fn($c) => $c->category?->name ?? '')->filter(function($cards, $name) use ($keywords) {
          foreach ($keywords as $kw) {
              if (mb_strpos($name, $kw) !== false) return true;
          }
          return false;
      })->map(fn($cards, $name) => [
          'name'  => $name,
          'color' => $cards->first()->category?->color ?? '#6c757d',
          'hours' => $cards->sum('work_hours'),
      ])->values();
    @endphp
    @if($catHours->isNotEmpty())
    <div class="d-flex align-items-center gap-2 flex-wrap mt-1">
      <span class="small text-muted text-nowrap"><i class="bi bi-clock-history me-1"></i>今日工時：</span>
      @foreach($catHours as $r)
        @php $h = $r['hours']; $display = ($h == floor($h)) ? (int)$h : $h; @endphp
        <span class="badge rounded-pill px-3 py-2" style="background:{{ $r['color'] }}; font-size:.78rem;">
          {{ $r['name'] }} <span class="ms-1 fw-bold">{{ $display }}小時</span>
        </span>
      @endforeach
      @php $total = $catHours->sum('hours'); $totalDisplay = ($total == floor($total)) ? (int)$total : $total; @endphp
      <span class="badge rounded-pill px-3 py-2 bg-dark" style="font-size:.78rem;">
        合計 <span class="fw-bold ms-1">{{ $totalDisplay }}小時</span>
      </span>
    </div>
    @endif
  </div>

  {{-- Toast --}}
  <div id="toast-wrap" class="position-fixed bottom-0 end-0 p-3" style="z-index:9999; display:none;">
    <div class="toast show bg-dark text-white border-0 shadow">
      <div class="toast-body" id="toast-msg">處理中…</div>
    </div>
  </div>

  {{-- 看板 --}}
  <div class="kanban-wrapper" id="kanban-board">
    @foreach($columns as $col)
      <div class="kanban-col" data-col-id="{{ $col->id }}">
        <div class="kanban-col-header" style="background: linear-gradient(135deg, {{ $col->color }}, {{ $col->color }}cc);">
          <span class="drag-handle" title="拖拉移動欄位">⠿</span>
          <span class="col-name me-1">{{ $col->name }}</span>
          <span class="sort-indicator"></span>
          <div class="d-flex align-items-center gap-1 ms-auto">
            <span class="badge bg-white text-dark col-count">{{ $col->cards->count() }}</span>
            <div class="dropdown">
              <button class="col-menu-btn" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bi bi-three-dots-vertical"></i>
              </button>
              <ul class="dropdown-menu dropdown-menu-end shadow border-0" style="min-width:150px;">
                <li>
                  <button class="dropdown-item d-flex align-items-center gap-2"
                    onclick="openEditColumn({{ $col->id }}, '{{ addslashes($col->name) }}', '{{ $col->color }}')">
                    <i class="bi bi-pencil text-primary"></i> 編輯泳道
                  </button>
                </li>
                <li><hr class="dropdown-divider my-1"></li>
                <li><h6 class="dropdown-header py-0 mb-1" style="font-size:.7rem;">排序卡片</h6></li>
                <li>
                  <button class="dropdown-item small sort-item active-sort" data-sort-field="manual"
                    onclick="sortCards({{ $col->id }}, 'manual')">
                    <i class="bi bi-grip-vertical me-1"></i>手動排序
                  </button>
                </li>
                <li>
                  <button class="dropdown-item small sort-item" data-sort-field="priority"
                    onclick="sortCards({{ $col->id }}, 'priority')">
                    <i class="bi bi-flag me-1"></i>優先順序
                  </button>
                </li>
                <li>
                  <button class="dropdown-item small sort-item" data-sort-field="due_date"
                    onclick="sortCards({{ $col->id }}, 'due_date')">
                    <i class="bi bi-calendar me-1"></i>截止日期
                  </button>
                </li>
                <li>
                  <button class="dropdown-item small sort-item" data-sort-field="done_ratio"
                    onclick="sortCards({{ $col->id }}, 'done_ratio')">
                    <i class="bi bi-percent me-1"></i>完成度
                  </button>
                </li>
                <li>
                  <button class="dropdown-item small sort-item" data-sort-field="title"
                    onclick="sortCards({{ $col->id }}, 'title')">
                    <i class="bi bi-sort-alpha-down me-1"></i>標題
                  </button>
                </li>
                <li><hr class="dropdown-divider my-1"></li>
                <li>
                  <button class="dropdown-item d-flex align-items-center gap-2 text-danger"
                    onclick="deleteColumn({{ $col->id }}, this.closest('.kanban-col'))">
                    <i class="bi bi-trash-fill"></i> 刪除泳道
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="kanban-cards sortable-list" data-col-id="{{ $col->id }}" id="cards-{{ $col->id }}">
          @foreach($col->cards as $card)
            @php
              $priClass = match($card->priority) {
                'urgent' => 'pri-urgent', 'high' => 'pri-high', 'low' => 'pri-low', default => 'pri-normal'
              };
              $priBadge = match($card->priority) {
                'urgent' => ['cls' => 'bg-danger',              'txt' => '緊急'],
                'high'   => ['cls' => 'bg-warning text-dark',   'txt' => '高'],
                'low'    => ['cls' => 'bg-secondary',           'txt' => '低'],
                default  => ['cls' => 'bg-info bg-opacity-75',  'txt' => '一般'],
              };
              $overdue = $card->due_date && $card->due_date->isPast() && $card->done_ratio < 100;
            @endphp
            @php $assigneeIds = $card->assignees->pluck('id')->join(','); @endphp
            <div class="kanban-card {{ $priClass }}"
              data-card-id="{{ $card->id }}"
              data-col-id="{{ $card->column_id }}"
              data-position="{{ $card->position }}"
              data-assignee-ids="{{ $assigneeIds }}"
              data-updated="{{ $card->updated_at?->toDateString() }}"
              data-title="{{ $card->title }}"
              data-description="{{ $card->description ?? '' }}"
              data-priority="{{ $card->priority }}"
              data-due-date="{{ $card->due_date?->format('Y-m-d') ?? '' }}"
              data-ratio="{{ $card->done_ratio }}"
              data-category-id="{{ $card->category_id ?? '' }}"
              data-project-id="{{ $card->project_id ?? '' }}"
              data-start-date="{{ $card->start_date?->format('Y-m-d') ?? '' }}"
              data-work-hours="{{ $card->work_hours ?? '' }}"
              data-parent-id="{{ $card->parent_id ?? '' }}">

              <div class="d-flex justify-content-between align-items-start mb-1">
                <div class="d-flex align-items-center gap-1 flex-wrap">
                  <span class="text-muted" style="font-size:.75rem;">#{{ $card->id }}</span>
                  @if($card->parent)
                    <span class="badge rounded-pill bg-secondary bg-opacity-75 text-white" style="font-size:.65rem;" title="母議題：{{ $card->parent->title }}">
                      <i class="bi bi-arrow-return-right"></i> #{{ $card->parent_id }}
                    </span>
                  @endif
                  @if($card->category)
                    <span class="badge rounded-pill" style="background:{{ $card->category->color }}; font-size:.65rem;">
                      {{ $card->category->name }}
                    </span>
                  @endif
                  @if($card->project)
                    <span class="badge rounded-pill bg-info bg-opacity-75 text-white" style="font-size:.65rem;">
                      {{ $card->project->name }}
                    </span>
                  @endif
                </div>
                <div class="d-flex gap-1 align-items-center">
                  <span class="badge {{ $priBadge['cls'] }}" style="font-size:.65rem;"><i class="bi bi-flag-fill me-1" style="font-size:.55rem;"></i>{{ $priBadge['txt'] }}</span>
                  <button class="btn card-delete-btn"
                    onclick="event.stopPropagation(); deleteCard({{ $card->id }}, this.closest('.kanban-card'))">
                    <i class="bi bi-trash-fill"></i> 刪除
                  </button>
                </div>
              </div>

              <div class="fw-semibold lh-sm card-title-text"
                style="font-size:.85rem; word-break:break-word; cursor:pointer;"
                onclick="openEditCard(this.closest('.kanban-card'))">
                {{ Str::limit($card->title, 60) }}
              </div>

              @php
                $subtaskTotal = $card->subtasks->count();
                $subtaskDone  = $card->subtasks->where('is_done', true)->count();
                $childTotal   = $card->children->count();
                $childDone    = $card->children->where('done_ratio', 100)->count();
                $soon = $card->due_date && !$overdue && $card->due_date->diffInDays(now()) <= 3 && $card->done_ratio < 100;
              @endphp

              @if($card->done_ratio > 0 || $subtaskTotal > 0 || $childTotal > 0)
                <div class="mt-2" style="display:flex; flex-direction:column; gap:2px;">
                  @if($card->done_ratio > 0)
                    <div class="progress" style="height:3px;">
                      <div class="progress-bar bg-success" style="width:{{ $card->done_ratio }}%"></div>
                    </div>
                  @endif
                  @if($subtaskTotal > 0)
                    <div class="progress" style="height:3px;">
                      <div class="progress-bar" style="width:{{ round($subtaskDone/$subtaskTotal*100) }}%; background:#0891b2;"></div>
                    </div>
                  @endif
                  @if($childTotal > 0)
                    <div class="progress" style="height:3px;">
                      <div class="progress-bar" style="width:{{ round($childDone/$childTotal*100) }}%; background:#7c3aed;"></div>
                    </div>
                  @endif
                </div>
              @endif

              <div class="d-flex justify-content-between align-items-center mt-2" style="font-size:.73rem;">
                <div class="d-flex align-items-center gap-2 text-muted">
                  @php $assigneeNames = $card->assignees->pluck('name')->join('、') @endphp
                  <span><i class="bi bi-person me-1"></i>{{ $assigneeNames ?: '未指派' }}</span>
                  @if($subtaskTotal > 0)
                    <span><i class="bi bi-check2-square me-1"></i>{{ $subtaskDone }}/{{ $subtaskTotal }}</span>
                  @endif
                  @if($childTotal > 0)
                    <span title="子議題完成度需達 100% 才能移動狀態"><i class="bi bi-diagram-2 me-1"></i>{{ $childDone }}/{{ $childTotal }}</span>
                  @endif
                  @if($card->work_hours)
                    <span><i class="bi bi-clock me-1"></i>{{ $card->work_hours }}小時</span>
                  @endif
                </div>
                @if($card->due_date)
                  @php
                    $dueCls   = $overdue ? 'text-danger fw-bold' : ($soon ? 'fw-semibold' : 'text-muted');
                    $dueStyle = $soon && !$overdue ? 'color:#d97706;' : '';
                  @endphp
                  <span class="{{ $dueCls }}" style="{{ $dueStyle }}">
                    <i class="bi bi-calendar2-check me-1"></i>{{ $card->due_date->format('Y-m-d') }}
                  </span>
                @endif
              </div>
            </div>
          @endforeach
        </div>
        {{-- 泳道新增按鈕 --}}
        <div class="col-quick-add">
          <button class="col-add-card-btn" onclick="openCreateCardForColumn({{ $col->id }})">
            <i class="bi bi-plus-lg"></i>新增卡片
          </button>
        </div>
      </div>
    @endforeach

    {{-- 新增欄位按鈕 --}}
    <div class="add-col-btn" onclick="openAddColumn()" title="新增欄位">
      <i class="bi bi-plus-lg"></i>
    </div>
  </div>

</div>

{{-- ── Modals ─────────────────────────────────────────────── --}}

{{-- 新增/編輯欄位 --}}
<div class="modal fade" id="columnModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="columnModalTitle">新增欄位</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="col-edit-id">
        <div class="mb-3">
          <label class="form-label fw-semibold">欄位名稱</label>
          <input type="text" class="form-control" id="col-name" maxlength="50" placeholder="例：待處理">
        </div>
        <div class="mb-1">
          <label class="form-label fw-semibold">顏色</label>
          <div class="d-flex gap-2 flex-wrap mb-2" id="color-presets">
            @foreach(['#0d6efd','#fd7e14','#198754','#6f42c1','#dc3545','#0891b2','#6c757d','#b45309','#9d174d','#065f46'] as $hex)
              <div style="width:28px;height:28px;border-radius:50%;background:{{ $hex }};cursor:pointer;border:2px solid transparent;"
                onclick="document.getElementById('col-color').value='{{ $hex }}'; document.querySelectorAll('#color-presets div').forEach(d=>d.style.borderColor='transparent'); this.style.borderColor='#000';">
              </div>
            @endforeach
          </div>
          <input type="color" class="form-control form-control-color" id="col-color" value="#0d6efd">
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button class="btn btn-primary" id="save-col-btn">儲存</button>
      </div>
    </div>
  </div>
</div>

{{-- 新增卡片 --}}
<div class="modal fade" id="createCardModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-plus-circle me-1"></i>新增卡片</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label class="form-label fw-semibold">標題 <span class="text-danger">*</span></label>
          <input type="text" class="form-control" id="new-title" maxlength="255">
        </div>
        <div class="row g-3 mb-3">
          <div class="col-4">
            <label class="form-label fw-semibold">欄位 <span class="text-danger">*</span></label>
            <select class="form-select" id="new-column">
              @foreach($columns as $col)
                <option value="{{ $col->id }}">{{ $col->name }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-4">
            <label class="form-label fw-semibold">專案</label>
            <select class="form-select" id="new-project">
              <option value="">── 無專案 ──</option>
              @foreach($projects as $proj)
                <option value="{{ $proj->id }}">{{ $proj->name }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-4">
            <label class="form-label fw-semibold">分類</label>
            <select class="form-select" id="new-category">
              <option value="">── 無分類 ──</option>
              @foreach($categories as $cat)
                <option value="{{ $cat->id }}" data-color="{{ $cat->color }}">{{ $cat->name }}</option>
              @endforeach
            </select>
          </div>
        </div>
        <div class="row g-3 mb-3">
          <div class="col-12">
            <label class="form-label fw-semibold">母議題</label>
            <select class="form-select" id="new-parent-card">
              <option value=""></option>
              @foreach($allCards as $c)
                <option value="{{ $c->id }}">#{{ $c->id }} {{ Str::limit($c->title, 40) }}</option>
              @endforeach
            </select>
            <div class="form-text" style="font-size:.72rem;">設定母議題後，此卡片即為其子議題；母議題需等所有子議題完成度達 100% 才能移動狀態。</div>
          </div>
        </div>
        <div class="row g-3 mb-3">
          <div class="col-4">
            <label class="form-label fw-semibold">優先權</label>
            <select class="form-select" id="new-priority">
              <option value="urgent">緊急</option>
              <option value="high">高</option>
              <option value="normal" selected>一般</option>
              <option value="low">低</option>
            </select>
          </div>
          <div class="col-4">
            <label class="form-label fw-semibold">起始日</label>
            <input type="date" class="form-control" id="new-start-date">
          </div>
          <div class="col-4">
            <label class="form-label fw-semibold">到期日</label>
            <input type="date" class="form-control" id="new-due-date">
          </div>
        </div>
        <div class="row g-3 mb-3">
          <div class="col-8">
            <label class="form-label fw-semibold">完成度：<span id="new-ratio-label">0</span>%</label>
            <input type="range" class="form-range mt-2" id="new-ratio" min="0" max="100" step="10"
              oninput="document.getElementById('new-ratio-label').textContent=this.value">
          </div>
          <div class="col-4">
            <label class="form-label fw-semibold">工時（小時）</label>
            <input type="number" class="form-control" id="new-work-hours" min="0" max="9999" step="0.5" placeholder="0">
          </div>
        </div>
        <div class="row g-3 mb-3">
          <div class="col-8">
            <label class="form-label fw-semibold">指派給</label>
            <select id="new-assignees" multiple placeholder="選擇人員…">
              @foreach($users as $u)
                <option value="{{ $u->id }}">{{ $u->name }}</option>
              @endforeach
            </select>
          </div>
        </div>
        <div class="mb-1">
          <label class="form-label fw-semibold">描述</label>
          <textarea class="form-control" id="new-description" rows="2"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button class="btn btn-primary" id="create-card-btn"><i class="bi bi-plus-lg me-1"></i>建立</button>
      </div>
    </div>
  </div>
</div>

{{-- 編輯卡片 --}}
<div class="modal fade" id="editCardModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-pencil-square me-1"></i>編輯卡片 <span class="text-muted fs-6" id="edit-card-num"></span></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="edit-card-id">
        <div class="mb-3">
          <label class="form-label fw-semibold">標題</label>
          <input type="text" class="form-control" id="edit-title" maxlength="255">
        </div>
        <div class="row g-3 mb-3">
          <div class="col-4">
            <label class="form-label fw-semibold">欄位（泳道）<span class="text-danger">*</span></label>
            <select class="form-select" id="edit-column" onchange="onEditColumnChange(this.value)">
              @foreach($columns as $col)
                <option value="{{ $col->id }}">{{ $col->name }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-4">
            <label class="form-label fw-semibold">專案</label>
            <select class="form-select" id="edit-project">
              <option value="">── 無專案 ──</option>
              @foreach($projects as $proj)
                <option value="{{ $proj->id }}">{{ $proj->name }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-4">
            <label class="form-label fw-semibold">分類</label>
            <select class="form-select" id="edit-category">
              <option value="">── 無分類 ──</option>
              @foreach($categories as $cat)
                <option value="{{ $cat->id }}" data-color="{{ $cat->color }}">{{ $cat->name }}</option>
              @endforeach
            </select>
          </div>
        </div>
        <div class="row g-3 mb-3">
          <div class="col-12">
            <label class="form-label fw-semibold">母議題</label>
            <select class="form-select" id="edit-parent-card">
              <option value=""></option>
              @foreach($allCards as $c)
                <option value="{{ $c->id }}" data-card-id="{{ $c->id }}">#{{ $c->id }} {{ Str::limit($c->title, 40) }}</option>
              @endforeach
            </select>
            <div class="form-text" style="font-size:.72rem;">設定母議題後，此卡片即為其子議題；母議題需等所有子議題完成度達 100% 才能移動狀態。</div>
          </div>
        </div>
        <div class="row g-3 mb-3">
          <div class="col-4">
            <label class="form-label fw-semibold">優先權</label>
            <select class="form-select" id="edit-priority">
              <option value="urgent">緊急</option>
              <option value="high">高</option>
              <option value="normal">一般</option>
              <option value="low">低</option>
            </select>
          </div>
          <div class="col-4">
            <label class="form-label fw-semibold">起始日</label>
            <input type="date" class="form-control" id="edit-start-date">
          </div>
          <div class="col-4">
            <label class="form-label fw-semibold">到期日</label>
            <input type="date" class="form-control" id="edit-due-date">
          </div>
        </div>
        <div class="row g-3 mb-3">
          <div class="col-8">
            <label class="form-label fw-semibold">完成度：<span id="edit-ratio-label">0</span>%</label>
            <input type="range" class="form-range mt-2" id="edit-ratio" min="0" max="100" step="10"
              oninput="document.getElementById('edit-ratio-label').textContent=this.value">
          </div>
          <div class="col-4">
            <label class="form-label fw-semibold">工時（小時）</label>
            <input type="number" class="form-control" id="edit-work-hours" min="0" max="9999" step="0.5" placeholder="0">
          </div>
        </div>
        <div class="row g-3 mb-3">
          <div class="col-6">
            <label class="form-label fw-semibold"><i class="bi bi-list-ol me-1"></i>排列順序（在此泳道內）</label>
            <select class="form-select" id="edit-position"></select>
          </div>
          <div class="col-6">
            <label class="form-label fw-semibold">指派給</label>
            <select id="edit-assignees" multiple placeholder="選擇人員…">
              @foreach($users as $u)
                <option value="{{ $u->id }}">{{ $u->name }}</option>
              @endforeach
            </select>
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label fw-semibold">描述</label>
          <textarea class="form-control" id="edit-description" rows="2"></textarea>
        </div>
        <hr class="my-2">
        <div class="mb-1">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <label class="form-label fw-semibold mb-0"><i class="bi bi-check2-square me-1"></i>子任務</label>
            <span class="small text-muted" id="subtask-progress-label"></span>
          </div>
          <ul class="list-unstyled mb-2" id="subtask-list" style="max-height:160px;overflow-y:auto;"></ul>
          <div class="d-flex gap-2">
            <input type="text" class="form-control form-control-sm" id="subtask-new-input" placeholder="新增子任務…" maxlength="255">
            <button class="btn btn-sm btn-outline-primary text-nowrap" id="subtask-add-btn">
              <i class="bi bi-plus-lg"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button class="btn btn-primary" id="save-card-btn"><i class="bi bi-check-lg me-1"></i>儲存</button>
      </div>
    </div>
  </div>
</div>

{{-- 管理分類 --}}
<div class="modal fade" id="categoryManageModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-tags me-1"></i>管理分類</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-2">
        <ul class="list-group list-group-flush mb-2" id="cat-list">
          @foreach($categories as $cat)
            <li class="list-group-item px-2 py-2" data-cat-id="{{ $cat->id }}" data-cat-name="{{ $cat->name }}" data-cat-color="{{ $cat->color }}">
              <div class="cat-view d-flex align-items-center gap-2">
                <span class="cat-dot rounded-circle d-inline-block flex-shrink-0" style="width:14px;height:14px;background:{{ $cat->color }};"></span>
                <span class="cat-name flex-grow-1">{{ $cat->name }}</span>
                <button class="btn btn-sm btn-outline-secondary" onclick="startEditCat(this.closest('li'))">
                  <i class="bi bi-pencil me-1"></i>編輯
                </button>
                <button class="btn btn-sm btn-outline-danger" onclick="deleteCat(this.closest('li'))">
                  <i class="bi bi-trash me-1"></i>刪除
                </button>
              </div>
              <div class="cat-edit d-none d-flex align-items-center gap-2 mt-1">
                <input type="color" class="form-control form-control-color cat-edit-color" value="{{ $cat->color }}" style="width:38px;height:34px;flex-shrink:0;">
                <input type="text" class="form-control form-control-sm cat-edit-name flex-grow-1" value="{{ $cat->name }}" maxlength="50">
                <button class="btn btn-sm btn-primary" onclick="saveInlineCat(this.closest('li'))">儲存</button>
                <button class="btn btn-sm btn-outline-secondary" onclick="cancelInlineCat(this.closest('li'))">取消</button>
              </div>
            </li>
          @endforeach
        </ul>
        <hr class="my-2">
        <div class="small fw-semibold text-muted mb-1">新增分類</div>
        <div class="d-flex gap-2 align-items-center mb-2">
          <input type="color" class="form-control form-control-color p-0 border-0" id="cat-color" value="#0d6efd" style="width:32px;height:32px;">
          <input type="text" class="form-control form-control-sm" id="cat-name-input" maxlength="50" placeholder="分類名稱">
          <button class="btn btn-sm btn-primary text-nowrap" id="cat-save-btn">新增</button>
        </div>
        <div class="d-flex gap-2 flex-wrap" id="cat-color-presets">
          @foreach(['#0d6efd','#fd7e14','#198754','#6f42c1','#dc3545','#0891b2','#6c757d','#b45309','#9d174d','#065f46'] as $hex)
            <div style="width:22px;height:22px;border-radius:50%;background:{{ $hex }};cursor:pointer;border:2px solid transparent;"
              onclick="document.getElementById('cat-color').value='{{ $hex }}';
                document.querySelectorAll('#cat-color-presets div').forEach(d=>d.style.borderColor='transparent');
                this.style.borderColor='#000';">
            </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>
</div>

{{-- 成員管理 --}}
@if($isAdmin ?? false)
<div class="modal fade" id="memberManageModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-people me-1"></i>工作看板成員管理</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-3">
        <p class="small text-muted mb-2">
          <i class="bi bi-info-circle me-1"></i>
          未設定任何成員時，所有登入者皆可存取。設定後，只有名單內的人員（及管理員）才可進入。
        </p>

        <ul class="list-group list-group-flush mb-3" id="member-list">
          @forelse($members as $m)
            <li class="list-group-item d-flex align-items-center justify-content-between px-1 py-2" data-user-id="{{ $m->id }}">
              <span class="small"><i class="bi bi-person me-1 text-muted"></i>{{ $m->name }}</span>
              <button class="btn btn-sm btn-outline-danger px-2 py-0" onclick="removeMember({{ $m->id }}, this)">
                <i class="bi bi-x-lg"></i>
              </button>
            </li>
          @empty
            <li class="list-group-item text-muted small px-1" id="member-empty-hint">尚未設定（全員可存取）</li>
          @endforelse
        </ul>

        <hr class="my-2">
        <div class="small fw-semibold text-muted mb-2">新增成員</div>
        <div class="d-flex gap-2">
          <select class="form-select form-select-sm" id="member-user-select">
            <option value="">選擇人員…</option>
            @foreach($users as $u)
              <option value="{{ $u->id }}">{{ $u->name }}</option>
            @endforeach
          </select>
          <button class="btn btn-sm btn-primary text-nowrap" id="member-add-btn">新增</button>
        </div>
      </div>
    </div>
  </div>
</div>
@endif

{{-- 通知設定 --}}
<div class="modal fade" id="notifSettingsModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-bell me-1"></i>Email 通知設定</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-3">
        <p class="small text-muted mb-3">
          <i class="bi bi-info-circle me-1"></i>
          設定哪些事件要發 Email 通知給你（只影響你自己收到的通知）。
        </p>
        <div class="d-flex flex-column gap-3">
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="notif-assigned">
            <label class="form-check-label" for="notif-assigned">
              <span class="fw-semibold">被指派新卡片</span>
              <div class="text-muted small">有人新增卡片時將你加入指派</div>
            </label>
          </div>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="notif-added">
            <label class="form-check-label" for="notif-added">
              <span class="fw-semibold">被加入既有卡片</span>
              <div class="text-muted small">有人編輯卡片時將你新增為指派人</div>
            </label>
          </div>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="notif-moved">
            <label class="form-check-label" for="notif-moved">
              <span class="fw-semibold">卡片被移動</span>
              <div class="text-muted small">你指派的卡片被拖拉到其他欄位</div>
            </label>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button class="btn btn-primary" id="notif-save-btn">
          <i class="bi bi-check-lg me-1"></i>儲存
        </button>
      </div>
    </div>
  </div>
</div>

{{-- ── 一鍵填寫 Modal ──────────────────────────────────────── --}}
<div class="modal fade" id="quickFillModal" tabindex="-1">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header" style="background:linear-gradient(135deg,#f59e0b,#d97706);">
        <h5 class="modal-title text-white fw-bold">
          <i class="bi bi-lightning-fill me-2"></i>一鍵填寫
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>

      {{-- 篩選列 --}}
      <div class="border-bottom px-3 py-2 d-flex align-items-center gap-3 bg-light" id="qf-filter-bar" style="display:none!important;">
        <label for="qf-col-filter" class="small text-muted mb-0 text-nowrap">篩選狀態：</label>
        <select id="qf-col-filter" class="form-select form-select-sm" style="width:180px;">
          <option value="">全部</option>
        </select>
        <span class="ms-auto small text-muted" id="qf-changed-count"></span>
      </div>

      <div class="modal-body p-0">
        {{-- Loading --}}
        <div id="qf-loading" class="text-center py-5">
          <div class="spinner-border text-warning"></div>
          <div class="mt-2 text-muted small">載入卡片…</div>
        </div>

        {{-- Table --}}
        <div id="qf-content" class="d-none">
          <div class="table-responsive">
            <table class="table table-sm table-hover align-middle mb-0" id="qf-table"
                   style="font-size:.875rem;">
              <thead class="table-light sticky-top" style="z-index:1;">
                <tr>
                  <th style="width:55px;" class="ps-3">#</th>
                  <th>議題名稱</th>
                  <th style="width:130px;">狀態</th>
                  <th style="width:160px;">
                    結束時間
                    <span class="text-muted fw-normal small d-block" style="font-size:.7rem;">due_date</span>
                  </th>
                  <th style="width:160px;">
                    預估結束時間
                    <span class="text-muted fw-normal small d-block" style="font-size:.7rem;">estimated</span>
                  </th>
                </tr>
              </thead>
              <tbody id="qf-tbody"></tbody>
            </table>
          </div>
        </div>

        {{-- Empty --}}
        <div id="qf-empty" class="text-center py-5 text-muted d-none">
          <i class="bi bi-inbox fs-1 d-block mb-2 opacity-25"></i>
          <div>目前沒有個人看板卡片</div>
        </div>
      </div>

      <div class="modal-footer gap-2">
        <span class="me-auto small text-muted" id="qf-changed-count-footer"></span>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-warning text-white fw-semibold" id="qf-save-btn" onclick="qfSave()">
          <i class="bi bi-check-lg me-1"></i>儲存
        </button>
      </div>
    </div>
  </div>
</div>

@endsection

@push('scripts')
<script src="/vendor/tom-select/tom-select.complete.min.js"></script>
<script src="/vendor/sortablejs/Sortable.min.js"></script>
<script>
const csrf = '{{ csrf_token() }}';
const todayStr = new Date().toLocaleDateString('sv-SE', { timeZone: 'Asia/Taipei' });
const personalMode = {{ ($personalMode ?? false) ? 'true' : 'false' }};
const currentUserId = {{ Auth::id() }};
const currentUserName = '{{ addslashes(Auth::user()->name) }}';

// ── 拖拉 ─────────────────────────────────────────────────────
document.querySelectorAll('.sortable-list').forEach(list => {
  Sortable.create(list, {
    group: 'kanban',
    animation: 150,
    ghostClass: 'sortable-ghost',
    dragClass: 'sortable-drag',
    onEnd(evt) {
      const cardId   = evt.item.dataset.cardId;
      const colId    = evt.to.dataset.colId;
      const order    = [...evt.to.querySelectorAll('.kanban-card')].map(c => c.dataset.cardId);
      const revert   = () => {
        const refNode = evt.from.children[evt.oldIndex];
        if (refNode) evt.from.insertBefore(evt.item, refNode);
        else evt.from.appendChild(evt.item);
      };
      fetch(`/work-board/cards/${cardId}/move`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
        body: JSON.stringify({ column_id: colId, order }),
      }).then(r => r.json().then(d => ({ ok: r.ok, body: d }))).then(({ ok, body }) => {
        if (ok && body.success) { updateCounts(); return; }
        revert();
        showToast('❌ ' + (body.error || '移動失敗，請稍後再試。'), 3500);
      }).catch(() => {
        revert();
        showToast('❌ 移動失敗，網路錯誤。', 3000);
      });
    }
  });
});

// ── 篩選 ─────────────────────────────────────────────────────
function applyFilters() {
  const colEl     = document.getElementById('columnFilter');
  const colId     = colEl ? colEl.value : '';
  const catId     = document.getElementById('categoryFilter').value;
  const projectId = document.getElementById('projectFilter').value;
  document.querySelectorAll('.kanban-col').forEach(col => {
    col.style.display = (!colId || col.dataset.colId === colId) ? '' : 'none';
  });
  document.querySelectorAll('.kanban-card').forEach(card => {
    let show = true;
    if (catId)     show = show && card.dataset.categoryId === catId;
    if (projectId) show = show && card.dataset.projectId === projectId;
    card.style.display = show ? '' : 'none';
  });
  updateCounts();
}
const colFilterEl = document.getElementById('columnFilter');
if (colFilterEl) colFilterEl.addEventListener('change', applyFilters);
document.getElementById('categoryFilter').addEventListener('change', applyFilters);
document.getElementById('projectFilter').addEventListener('change', applyFilters);

// ── 統計 ─────────────────────────────────────────────────────
function updateCounts() {
  let total = 0, done = 0, today = 0;
  document.querySelectorAll('.kanban-col').forEach(col => {
    const visible = [...col.querySelectorAll('.kanban-card')].filter(c => c.style.display !== 'none');
    col.querySelector('.col-count').textContent = visible.length;
    total += visible.length;
    visible.forEach(c => {
      const bar = c.querySelector('.progress-bar');
      if (bar && bar.style.width === '100%') done++;
      if (c.dataset.updated === todayStr) today++;
    });
  });
  document.getElementById('stat-total-n').textContent = total;
  document.getElementById('stat-done-n').textContent  = done;
  document.getElementById('stat-today-n').textContent = today;
}

// ── 排列順序選單（跨欄位）────────────────────────────────────
function buildPositionSelect(colId, currentCardId) {
  const colCards = [...document.querySelectorAll(
    `.kanban-cards[data-col-id="${colId}"] .kanban-card`
  )].sort((a, b) => parseInt(a.dataset.position) - parseInt(b.dataset.position));

  const posSelect = document.getElementById('edit-position');
  posSelect.innerHTML = '';

  // 目標欄位的卡片數 + 1（可放最後）
  const total = colCards.length + (colCards.some(c => c.dataset.cardId === currentCardId) ? 0 : 1);
  for (let i = 1; i <= total; i++) {
    const opt = document.createElement('option');
    opt.value = i;
    // 找到該位置目前的卡片
    const card = colCards[i - 1];
    if (card && card.dataset.cardId === currentCardId) {
      opt.textContent = `第 ${i} 位（目前）`;
      opt.selected = true;
    } else if (card) {
      opt.textContent = `第 ${i} 位：${card.dataset.title.slice(0, 18)}`;
    } else {
      opt.textContent = `第 ${i} 位（最後）`;
      if (!colCards.some(c => c.dataset.cardId === currentCardId)) opt.selected = true;
    }
    posSelect.appendChild(opt);
  }
}

function onEditColumnChange(newColId) {
  const cardId = document.getElementById('edit-card-id').value;
  buildPositionSelect(newColId, cardId);
}

// ── 泳道卡片排序 ─────────────────────────────────────────────
const priOrder = { urgent: 0, high: 1, normal: 2, low: 3 };
const sortLabels = {
  manual:     '',
  priority:   '↑ 優先順序',
  due_date:   '↑ 截止日期',
  done_ratio: '↑ 完成度',
  title:      '↑ 標題',
};

function sortCards(colId, field) {
  const container = document.getElementById('cards-' + colId);
  if (!container) return;

  const colEl    = container.closest('.kanban-col');
  const cards    = [...container.querySelectorAll('.kanban-card')];

  if (field !== 'manual') {
    cards.sort((a, b) => {
      switch (field) {
        case 'priority':
          return (priOrder[a.dataset.priority] ?? 2) - (priOrder[b.dataset.priority] ?? 2);
        case 'due_date': {
          const da = a.dataset.dueDate || '9999-99-99';
          const db = b.dataset.dueDate || '9999-99-99';
          return da < db ? -1 : da > db ? 1 : 0;
        }
        case 'done_ratio':
          return parseInt(a.dataset.ratio || 0) - parseInt(b.dataset.ratio || 0);
        case 'title':
          return (a.dataset.title || '').localeCompare(b.dataset.title || '', 'zh-TW');
        default:
          return 0;
      }
    });
    cards.forEach(c => container.appendChild(c));
  }

  // 更新 dropdown 勾選狀態
  colEl.querySelectorAll('.sort-item').forEach(btn => {
    const isActive = btn.dataset.sortField === field;
    btn.classList.toggle('active-sort', isActive);
  });

  // 更新標頭排序指示
  const indicator = colEl.querySelector('.sort-indicator');
  if (indicator) {
    indicator.textContent = sortLabels[field] || '';
    indicator.style.display = field === 'manual' ? 'none' : '';
  }
}

// ── 泳道 + 按鈕：開啟完整新增卡片 Modal 並預選欄位 ──────────
function openCreateCardForColumn(colId) {
  document.getElementById('new-column').value = colId;
  document.getElementById('new-title').value = '';
  document.getElementById('new-title').classList.remove('is-invalid');
  document.getElementById('new-ratio').value = 0;
  document.getElementById('new-ratio-label').textContent = '0';
  createCardModal.show();
}

// ── 欄位管理 ─────────────────────────────────────────────────
let colModalMode = 'add';
const colModal = new bootstrap.Modal(document.getElementById('columnModal'));

function openAddColumn() {
  colModalMode = 'add';
  document.getElementById('columnModalTitle').textContent = '新增欄位';
  document.getElementById('col-edit-id').value = '';
  document.getElementById('col-name').value = '';
  document.getElementById('col-color').value = '#0d6efd';
  colModal.show();
}
function openEditColumn(id, name, color) {
  colModalMode = 'edit';
  document.getElementById('columnModalTitle').textContent = '編輯欄位';
  document.getElementById('col-edit-id').value = id;
  document.getElementById('col-name').value = name;
  document.getElementById('col-color').value = color;
  colModal.show();
}

document.getElementById('save-col-btn').addEventListener('click', function () {
  const name  = document.getElementById('col-name').value.trim();
  const color = document.getElementById('col-color').value;
  if (!name) { document.getElementById('col-name').focus(); return; }

  const id  = document.getElementById('col-edit-id').value;
  const url = colModalMode === 'add' ? '/work-board/columns' : `/work-board/columns/${id}`;
  const method = colModalMode === 'add' ? 'POST' : 'PATCH';

  fetch(url, {
    method,
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
    body: JSON.stringify({ name, color, personal: personalMode }),
  }).then(r => r.json()).then(d => {
    if (d.success) { colModal.hide(); location.reload(); }
  });
});

function deleteColumn(id, colEl) {
  if (!confirm('確定刪除此欄位？欄位內的所有卡片也會一併刪除。')) return;
  fetch(`/work-board/columns/${id}`, {
    method: 'DELETE',
    headers: { 'X-CSRF-TOKEN': csrf },
  }).then(r => r.json()).then(d => {
    if (d.success) {
      colEl.remove();
      updateCounts();
    }
  });
}

// ── 新增卡片 ─────────────────────────────────────────────────
const createCardModal = new bootstrap.Modal(document.getElementById('createCardModal'));
document.getElementById('create-card-btn').addEventListener('click', function () {
  const title = document.getElementById('new-title').value.trim();
  if (!title) { document.getElementById('new-title').classList.add('is-invalid'); return; }
  document.getElementById('new-title').classList.remove('is-invalid');

  const btn = this;
  btn.disabled = true;

  let assigneeIds = tsNewAssignees ? tsNewAssignees.getValue().map(Number) : [];
  if (personalMode && !assigneeIds.length) assigneeIds = [currentUserId];

  fetch('/work-board/cards', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
    body: JSON.stringify({
      column_id:    document.getElementById('new-column').value,
      title,
      parent_id:    document.getElementById('new-parent-card').value || null,
      project_id:   document.getElementById('new-project').value || null,
      priority:     document.getElementById('new-priority').value,
      category_id:  document.getElementById('new-category').value || null,
      assignee_ids: assigneeIds,
      done_ratio:   parseInt(document.getElementById('new-ratio').value) || 0,
      start_date:   document.getElementById('new-start-date').value || null,
      due_date:     document.getElementById('new-due-date').value || null,
      work_hours:   document.getElementById('new-work-hours').value || null,
      description:  document.getElementById('new-description').value || null,
    }),
  }).then(r => r.json()).then(d => {
    btn.disabled = false;
    if (d.success) { createCardModal.hide(); location.reload(); }
    else showToast('❌ 建立失敗', 2500);
  });
});

// ── 編輯卡片 ─────────────────────────────────────────────────
const editCardModal = new bootstrap.Modal(document.getElementById('editCardModal'));
let pendingEditAssigneeIds = [];

function openEditCard(cardEl) {
  const d = cardEl.dataset;
  pendingEditAssigneeIds = (d.assigneeIds || '').split(',').filter(Boolean);
  document.getElementById('edit-card-id').value           = d.cardId;
  document.getElementById('edit-card-num').textContent    = '#' + d.cardId;
  document.getElementById('edit-title').value             = d.title;
  document.getElementById('edit-column').value            = d.colId || '';
  document.getElementById('edit-project').value           = d.projectId || '';
  document.getElementById('edit-priority').value          = d.priority || 'normal';
  document.getElementById('edit-category').value          = d.categoryId || '';
  document.getElementById('edit-ratio').value             = d.ratio || 0;
  document.getElementById('edit-ratio-label').textContent = d.ratio || 0;
  document.getElementById('edit-start-date').value        = d.startDate || '';
  document.getElementById('edit-due-date').value          = d.dueDate || '';
  document.getElementById('edit-work-hours').value        = d.workHours || '';
  document.getElementById('edit-description').value       = d.description || '';

  // 母議題：先更新 raw option disabled 狀態，TomSelect 在 shown 後 destroy+recreate 以反映
  document.getElementById('edit-parent-card').querySelectorAll('option[data-card-id]').forEach(o => {
    o.disabled = (o.dataset.cardId === d.cardId);
  });

  // 建立排列順序選單
  buildPositionSelect(d.colId, d.cardId);

  loadSubtasks(d.cardId);
  editCardModal.show();
  // sync Tom Selects after modal opens
  document.getElementById('editCardModal').addEventListener('shown.bs.modal', () => {
    if (tsEditProject) tsEditProject.setValue(d.projectId || '', true);
    if (tsEditAssignees) tsEditAssignees.setValue(pendingEditAssigneeIds, true);
    if (tsEditParent) tsEditParent.destroy();
    tsEditParent = new TomSelect('#edit-parent-card', {
      plugins: ['clear_button'], maxOptions: null, placeholder: '搜尋母議題…',
    });
    tsEditParent.setValue(d.parentId || '', true);
  }, { once: true });
}

document.getElementById('save-card-btn').addEventListener('click', function () {
  const id  = document.getElementById('edit-card-id').value;
  const btn = this;
  btn.disabled = true;

  let assigneeIds = tsEditAssignees ? tsEditAssignees.getValue().map(Number) : [];
  if (personalMode && !assigneeIds.length) assigneeIds = [currentUserId];

  fetch(`/work-board/cards/${id}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
    body: JSON.stringify({
      column_id:    document.getElementById('edit-column').value,
      title:        document.getElementById('edit-title').value,
      parent_id:    (tsEditParent ? tsEditParent.getValue() : document.getElementById('edit-parent-card').value) || null,
      project_id:   document.getElementById('edit-project').value || null,
      priority:     document.getElementById('edit-priority').value,
      category_id:  document.getElementById('edit-category').value || null,
      assignee_ids: assigneeIds,
      done_ratio:   parseInt(document.getElementById('edit-ratio').value),
      start_date:   document.getElementById('edit-start-date').value || null,
      due_date:     document.getElementById('edit-due-date').value || null,
      work_hours:   document.getElementById('edit-work-hours').value || null,
      description:  document.getElementById('edit-description').value || null,
      position_rank: parseInt(document.getElementById('edit-position').value) || null,
    }),
  }).then(r => r.json()).then(d => {
    btn.disabled = false;
    if (d.success) { editCardModal.hide(); location.reload(); }
    else showToast('❌ 儲存失敗', 2500);
  });
});

// ── 刪除卡片 ─────────────────────────────────────────────────
function deleteCard(cardId, cardEl) {
  if (!confirm('確定刪除此卡片？')) return;
  fetch(`/work-board/cards/${cardId}`, {
    method: 'DELETE',
    headers: { 'X-CSRF-TOKEN': csrf },
  }).then(r => r.json()).then(d => {
    if (d.success) { cardEl.remove(); updateCounts(); showToast('已刪除', 1500); }
  });
}

// ── 子任務 ───────────────────────────────────────────────────
let currentCardId = null;

function createSubtaskEl(s) {
  const li = document.createElement('li');
  li.className = 'd-flex align-items-center gap-2 py-1 border-bottom';
  li.dataset.subtaskId = s.id;

  const cb = document.createElement('input');
  cb.type = 'checkbox';
  cb.className = 'form-check-input flex-shrink-0 mt-0';
  cb.checked = !!s.is_done;
  cb.addEventListener('change', () => doToggleSubtask(s.id, cb, span));

  const span = document.createElement('span');
  span.className = 'flex-grow-1 small';
  span.textContent = s.title;
  if (s.is_done) span.classList.add('text-decoration-line-through', 'text-muted');

  const del = document.createElement('button');
  del.type = 'button';
  del.className = 'btn btn-sm p-0 border-0 text-danger';
  del.style.cssText = 'font-size:.8rem; opacity:.5;';
  del.innerHTML = '<i class="bi bi-x-lg"></i>';
  del.addEventListener('mouseenter', () => del.style.opacity = 1);
  del.addEventListener('mouseleave', () => del.style.opacity = .5);
  del.addEventListener('click', () => doRemoveSubtask(s.id, li));

  li.append(cb, span, del);
  return li;
}

function updateSubtaskProgress() {
  const items = [...document.querySelectorAll('#subtask-list li')];
  const done  = items.filter(li => li.querySelector('input[type=checkbox]').checked).length;
  document.getElementById('subtask-progress-label').textContent =
    items.length ? `${done} / ${items.length} 完成` : '';
}

function loadSubtasks(cardId) {
  currentCardId = cardId;
  const ul = document.getElementById('subtask-list');
  ul.innerHTML = '<li class="text-muted small py-1">載入中…</li>';
  document.getElementById('subtask-new-input').value = '';
  document.getElementById('subtask-progress-label').textContent = '';

  fetch(`/work-board/cards/${cardId}/subtasks`, {
    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
  })
  .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); })
  .then(d => {
    ul.innerHTML = '';
    (d.subtasks || []).forEach(s => ul.appendChild(createSubtaskEl(s)));
    updateSubtaskProgress();
  })
  .catch(() => { ul.innerHTML = '<li class="text-danger small py-1">載入失敗</li>'; });
}

document.getElementById('subtask-add-btn').addEventListener('click', addSubtask);
document.getElementById('subtask-new-input').addEventListener('keydown', e => {
  if (e.key === 'Enter') { e.preventDefault(); addSubtask(); }
});

function addSubtask() {
  const input = document.getElementById('subtask-new-input');
  const title = input.value.trim();
  if (!title || !currentCardId) return;
  const btn = document.getElementById('subtask-add-btn');
  btn.disabled = true;

  fetch(`/work-board/cards/${currentCardId}/subtasks`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
    body: JSON.stringify({ title }),
  })
  .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); })
  .then(d => {
    btn.disabled = false;
    if (!d.success) { showToast('❌ 新增失敗', 2500); return; }
    input.value = '';
    document.getElementById('subtask-list').appendChild(createSubtaskEl(d.subtask));
    updateSubtaskProgress();
    input.focus();
  })
  .catch(err => { btn.disabled = false; showToast('❌ 新增失敗 ' + err.message, 2500); });
}

function doToggleSubtask(id, cb, span) {
  fetch(`/work-board/subtasks/${id}/toggle`, {
    method: 'PATCH',
    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
  })
  .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); })
  .then(d => {
    cb.checked = d.is_done;
    if (d.is_done) span.classList.add('text-decoration-line-through', 'text-muted');
    else span.classList.remove('text-decoration-line-through', 'text-muted');
    updateSubtaskProgress();
  })
  .catch(() => { cb.checked = !cb.checked; }); // revert on error
}

function doRemoveSubtask(id, li) {
  fetch(`/work-board/subtasks/${id}`, {
    method: 'DELETE',
    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
  })
  .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); })
  .then(d => { if (d.success) { li.remove(); updateSubtaskProgress(); } })
  .catch(() => showToast('❌ 刪除失敗', 2500));
}

// ── 管理分類 ─────────────────────────────────────────────────
function catViewHtml(name, color) {
  return `<div class="cat-view d-flex align-items-center gap-2">
    <span class="cat-dot rounded-circle d-inline-block flex-shrink-0" style="width:14px;height:14px;background:${color};"></span>
    <span class="cat-name flex-grow-1">${name}</span>
    <button class="btn btn-sm btn-outline-secondary" onclick="startEditCat(this.closest('li'))"><i class="bi bi-pencil me-1"></i>編輯</button>
    <button class="btn btn-sm btn-outline-danger" onclick="deleteCat(this.closest('li'))"><i class="bi bi-trash me-1"></i>刪除</button>
  </div>
  <div class="cat-edit d-none d-flex align-items-center gap-2 mt-1">
    <input type="color" class="form-control form-control-color cat-edit-color" value="${color}" style="width:38px;height:34px;flex-shrink:0;">
    <input type="text" class="form-control form-control-sm cat-edit-name flex-grow-1" value="${name}" maxlength="50">
    <button class="btn btn-sm btn-primary" onclick="saveInlineCat(this.closest('li'))">儲存</button>
    <button class="btn btn-sm btn-outline-secondary" onclick="cancelInlineCat(this.closest('li'))">取消</button>
  </div>`;
}

function startEditCat(li) {
  li.querySelector('.cat-view').classList.add('d-none');
  li.querySelector('.cat-edit').classList.remove('d-none');
  li.querySelector('.cat-edit-name').focus();
  li.querySelector('.cat-edit-name').select();
}

function cancelInlineCat(li) {
  li.querySelector('.cat-edit').classList.add('d-none');
  li.querySelector('.cat-view').classList.remove('d-none');
}

function saveInlineCat(li) {
  const id    = li.dataset.catId;
  const name  = li.querySelector('.cat-edit-name').value.trim();
  const color = li.querySelector('.cat-edit-color').value;
  if (!name) { li.querySelector('.cat-edit-name').focus(); return; }

  fetch(`/work-board/categories/${id}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
    body: JSON.stringify({ name, color }),
  }).then(r => r.json()).then(d => {
    if (!d.success) { showToast('❌ 儲存失敗', 2500); return; }
    li.dataset.catName  = name;
    li.dataset.catColor = color;
    li.querySelector('.cat-dot').style.background  = color;
    li.querySelector('.cat-name').textContent       = name;
    cancelInlineCat(li);
    document.querySelectorAll(`#edit-category option[value="${id}"], #new-category option[value="${id}"], #categoryFilter option[value="${id}"]`)
      .forEach(o => { o.textContent = name; o.dataset.color = color; });
  });
}

function deleteCat(li) {
  if (!confirm('確定刪除此分類？卡片的分類標籤將會清除。')) return;
  const id = li.dataset.catId;
  fetch(`/work-board/categories/${id}`, {
    method: 'DELETE',
    headers: { 'X-CSRF-TOKEN': csrf },
  }).then(r => r.json()).then(d => {
    if (!d.success) { showToast('❌ 刪除失敗', 2500); return; }
    li.remove();
    document.querySelectorAll(`#edit-category option[value="${id}"], #new-category option[value="${id}"], #categoryFilter option[value="${id}"]`).forEach(o => o.remove());
    document.querySelectorAll(`.kanban-card[data-category-id="${id}"]`).forEach(c => {
      c.dataset.categoryId = '';
      const badge = c.querySelector('.badge.rounded-pill');
      if (badge) badge.remove();
    });
  });
}

// 新增分類
document.getElementById('cat-save-btn').addEventListener('click', function () {
  const name  = document.getElementById('cat-name-input').value.trim();
  const color = document.getElementById('cat-color').value;
  if (!name) { document.getElementById('cat-name-input').focus(); return; }

  fetch('/work-board/categories', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
    body: JSON.stringify({ name, color }),
  }).then(r => r.json()).then(d => {
    if (!d.success) { showToast('❌ 新增失敗', 2500); return; }
    const id = d.category.id;
    const li = document.createElement('li');
    li.className = 'list-group-item px-1 py-1';
    li.dataset.catId    = id;
    li.dataset.catName  = name;
    li.dataset.catColor = color;
    li.innerHTML = catViewHtml(name, color);
    document.getElementById('cat-list').appendChild(li);
    ['edit-category', 'new-category', 'categoryFilter'].forEach(sel => {
      const o = document.createElement('option');
      o.value = id; o.dataset.color = color; o.textContent = name;
      document.getElementById(sel).appendChild(o);
    });
    document.getElementById('cat-name-input').value = '';
    document.getElementById('cat-color').value = '#0d6efd';
    document.querySelectorAll('#cat-color-presets div').forEach(d => d.style.borderColor = 'transparent');
  });
});

// ── 成員管理 ─────────────────────────────────────────────────
@if($isAdmin ?? false)
(function () {
  function updateEmptyHint() {
    const ul    = document.getElementById('member-list');
    const items = ul.querySelectorAll('li[data-user-id]');
    let hint = document.getElementById('member-empty-hint');
    if (items.length === 0) {
      if (!hint) {
        hint = document.createElement('li');
        hint.id = 'member-empty-hint';
        hint.className = 'list-group-item text-muted small px-1';
        hint.textContent = '尚未設定（全員可存取）';
        ul.appendChild(hint);
      }
      hint.style.display = '';
    } else {
      if (hint) hint.style.display = 'none';
    }
  }

  window.removeMember = function (userId, btn) {
    btn.disabled = true;
    fetch(`/work-board/members/${userId}`, {
      method: 'DELETE',
      headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
    })
    .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); })
    .then(d => {
      if (d.success) {
        btn.closest('li').remove();
        updateEmptyHint();
      } else { btn.disabled = false; showToast('❌ 移除失敗', 2500); }
    })
    .catch(() => { btn.disabled = false; showToast('❌ 移除失敗', 2500); });
  };

  document.getElementById('member-add-btn').addEventListener('click', function () {
    const sel    = document.getElementById('member-user-select');
    const userId = sel.value;
    if (!userId) { sel.focus(); return; }
    const btn = this;
    btn.disabled = true;

    fetch('/work-board/members', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
      body: JSON.stringify({ user_id: userId }),
    })
    .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); })
    .then(d => {
      btn.disabled = false;
      if (!d.success) { showToast('❌ 新增失敗', 2500); return; }
      // check not already in list
      if (document.querySelector(`#member-list li[data-user-id="${d.user.id}"]`)) {
        showToast('該成員已在名單中', 2000); return;
      }
      const li = document.createElement('li');
      li.className = 'list-group-item d-flex align-items-center justify-content-between px-1 py-2';
      li.dataset.userId = d.user.id;
      const nameSpan = document.createElement('span');
      nameSpan.className = 'small';
      nameSpan.innerHTML = `<i class="bi bi-person me-1 text-muted"></i>${d.user.name}`;
      const removeBtn = document.createElement('button');
      removeBtn.type = 'button';
      removeBtn.className = 'btn btn-sm btn-outline-danger px-2 py-0';
      removeBtn.innerHTML = '<i class="bi bi-x-lg"></i>';
      removeBtn.addEventListener('click', () => window.removeMember(d.user.id, removeBtn));
      li.append(nameSpan, removeBtn);
      document.getElementById('member-list').appendChild(li);
      updateEmptyHint();
      sel.value = '';
    })
    .catch(() => { btn.disabled = false; showToast('❌ 新增失敗', 2500); });
  });
})();
@endif

// ── Tom Select（專案 + 指派人員）───────────────────────────────
let tsNewProject, tsEditProject, tsNewAssignees, tsEditAssignees, tsNewParent, tsEditParent;

document.getElementById('createCardModal').addEventListener('shown.bs.modal', () => {
  if (!tsNewProject) {
    tsNewProject = new TomSelect('#new-project', {
      placeholder: '搜尋或選擇專案…',
      allowEmptyOption: true,
      maxOptions: null,
    });
  }
  if (!tsNewAssignees) {
    tsNewAssignees = new TomSelect('#new-assignees', {
      plugins: ['remove_button'],
      placeholder: '選擇指派人員…',
      maxOptions: null,
    });
  }
  if (!tsNewParent) {
    tsNewParent = new TomSelect('#new-parent-card', {
      plugins: ['clear_button'], maxOptions: null, placeholder: '搜尋母議題…',
    });
  } else {
    tsNewParent.setValue('', true);
  }
});

document.getElementById('editCardModal').addEventListener('shown.bs.modal', () => {
  if (!tsEditProject) {
    tsEditProject = new TomSelect('#edit-project', {
      placeholder: '搜尋或選擇專案…',
      allowEmptyOption: true,
      maxOptions: null,
    });
  }
  if (!tsEditAssignees) {
    tsEditAssignees = new TomSelect('#edit-assignees', {
      plugins: ['remove_button'],
      placeholder: '選擇指派人員…',
      maxOptions: null,
    });
  }
});

// ── 通知設定 ─────────────────────────────────────────────────
document.getElementById('notifSettingsModal').addEventListener('show.bs.modal', () => {
  fetch('/work-board/notification-settings', {
    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
  })
  .then(r => r.json())
  .then(d => {
    document.getElementById('notif-assigned').checked = !!d.notify_assigned;
    document.getElementById('notif-added').checked    = !!d.notify_added;
    document.getElementById('notif-moved').checked    = !!d.notify_moved;
  });
});

document.getElementById('notif-save-btn').addEventListener('click', function () {
  const btn = this;
  btn.disabled = true;
  fetch('/work-board/notification-settings', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
    body: JSON.stringify({
      notify_assigned: document.getElementById('notif-assigned').checked,
      notify_added:    document.getElementById('notif-added').checked,
      notify_moved:    document.getElementById('notif-moved').checked,
    }),
  })
  .then(r => r.json())
  .then(d => {
    btn.disabled = false;
    if (d.success) {
      bootstrap.Modal.getInstance(document.getElementById('notifSettingsModal')).hide();
      showToast('✓ 通知設定已儲存', 2000);
    }
  })
  .catch(() => { btn.disabled = false; showToast('❌ 儲存失敗', 2500); });
});

// ── Toast ────────────────────────────────────────────────────
let toastTimer;
function showToast(msg, duration = 0) {
  clearTimeout(toastTimer);
  const el = document.getElementById('toast-wrap');
  document.getElementById('toast-msg').textContent = msg;
  el.style.display = 'block';
  if (duration) toastTimer = setTimeout(() => el.style.display = 'none', duration);
}

// ── 泳道欄位拖拉排序 ─────────────────────────────────────────
const LANE_ORDER_KEY = 'wb_lane_order_v1';
const kanbanBoard = document.getElementById('kanban-board');

if (kanbanBoard) {
  Sortable.create(kanbanBoard, {
    animation: 200,
    handle: '.kanban-col-header',
    draggable: '.kanban-col',
    ghostClass: 'col-ghost',
    dragClass: 'col-dragging',
    forceFallback: true,
    fallbackTolerance: 5,
    onStart() { kanbanBoard.style.overflowX = 'hidden'; },
    onEnd()   {
      kanbanBoard.style.overflowX = 'scroll';
      const order = [...kanbanBoard.querySelectorAll('.kanban-col')]
        .map(col => col.dataset.colId).filter(Boolean);
      localStorage.setItem(LANE_ORDER_KEY, JSON.stringify(order));
    },
  });

  // 還原欄位順序
  (function() {
    const saved = localStorage.getItem(LANE_ORDER_KEY);
    if (!saved) return;
    try {
      JSON.parse(saved).forEach(colId => {
        const col = kanbanBoard.querySelector(`.kanban-col[data-col-id="${colId}"]`);
        if (col) kanbanBoard.appendChild(col);
      });
    } catch(e) {}
  })();
}

// ── 一鍵填寫 ─────────────────────────────────────────────────
let qfCards = [];       // raw data from API
let qfDirty = {};       // { id: { due_date, estimated_due_date } }

(function() {
  const qfModal = document.getElementById('quickFillModal');
  if (!qfModal) return;

  qfModal.addEventListener('show.bs.modal', function() {
    qfCards  = [];
    qfDirty  = {};
    document.getElementById('qf-loading').classList.remove('d-none');
    document.getElementById('qf-content').classList.add('d-none');
    document.getElementById('qf-empty').classList.add('d-none');
    document.getElementById('qf-filter-bar').style.setProperty('display', 'none', 'important');
    qfUpdateChangedCount();

    fetch('{{ route("work-board.quick-fill") }}', {
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(r => r.json())
    .then(data => {
      document.getElementById('qf-loading').classList.add('d-none');
      if (!data.length) {
        document.getElementById('qf-empty').classList.remove('d-none');
        return;
      }
      qfCards = data;
      qfBuildColFilter(data);
      qfRenderTable(data);
      document.getElementById('qf-content').classList.remove('d-none');
      document.getElementById('qf-filter-bar').style.removeProperty('display');
    })
    .catch(() => {
      document.getElementById('qf-loading').classList.add('d-none');
      document.getElementById('qf-empty').classList.remove('d-none');
    });
  });
})();

function qfBuildColFilter(cards) {
  const seen = new Map();
  cards.forEach(c => { if (!seen.has(c.column_name)) seen.set(c.column_name, c.column_color); });
  const sel = document.getElementById('qf-col-filter');
  sel.innerHTML = '<option value="">全部</option>';
  seen.forEach((color, name) => {
    const opt = document.createElement('option');
    opt.value  = name;
    opt.textContent = name;
    sel.appendChild(opt);
  });
  sel.onchange = () => qfRenderTable(qfCards);
}

function qfRenderTable(cards) {
  const filter = document.getElementById('qf-col-filter').value;
  const filtered = filter ? cards.filter(c => c.column_name === filter) : cards;

  const tbody = document.getElementById('qf-tbody');
  tbody.innerHTML = '';
  filtered.forEach(c => {
    const dirty = qfDirty[c.id] || {};
    const dueVal  = (dirty.due_date           !== undefined) ? dirty.due_date           : (c.due_date           ?? '');
    const estVal  = (dirty.estimated_due_date !== undefined) ? dirty.estimated_due_date : (c.estimated_due_date ?? '');
    const isDirty = qfDirty[c.id] !== undefined;

    const tr = document.createElement('tr');
    if (isDirty) tr.classList.add('table-warning');
    tr.dataset.id = c.id;

    tr.innerHTML = `
      <td class="ps-3 text-muted" style="font-variant-numeric:tabular-nums;">${c.id}</td>
      <td>
        <div class="fw-semibold text-truncate" style="max-width:320px;" title="${escHtml(c.title)}">${escHtml(c.title)}</div>
        <span class="badge rounded-pill" style="background:${escHtml(c.column_color)}20;color:${escHtml(c.column_color)};border:1px solid ${escHtml(c.column_color)}40;font-size:.68rem;">${escHtml(c.column_name)}</span>
      </td>
      <td><span class="badge text-bg-secondary" style="font-size:.72rem;">—</span></td>
      <td>
        <input type="date" class="form-control form-control-sm qf-due"
               aria-label="結束時間 card ${c.id}"
               value="${escHtml(dueVal)}" data-id="${c.id}" data-field="due_date">
      </td>
      <td>
        <input type="date" class="form-control form-control-sm qf-est"
               aria-label="預估結束時間 card ${c.id}"
               value="${escHtml(estVal)}" data-id="${c.id}" data-field="estimated_due_date">
      </td>
    `;
    tbody.appendChild(tr);
  });

  // bind change events
  tbody.querySelectorAll('input[type=date]').forEach(input => {
    input.addEventListener('change', function() {
      const id    = parseInt(this.dataset.id);
      const field = this.dataset.field;
      if (!qfDirty[id]) qfDirty[id] = {};
      qfDirty[id][field] = this.value;

      // highlight row
      const row = this.closest('tr');
      if (Object.values(qfDirty[id]).some(v => v !== undefined))
        row.classList.add('table-warning');

      qfUpdateChangedCount();
    });
  });
}

function qfUpdateChangedCount() {
  const n = Object.keys(qfDirty).length;
  const txt = n ? `已修改 ${n} 張卡片` : '';
  const el1 = document.getElementById('qf-changed-count');
  const el2 = document.getElementById('qf-changed-count-footer');
  if (el1) el1.textContent = txt;
  if (el2) el2.textContent = txt;
}

function qfSave() {
  if (!Object.keys(qfDirty).length) {
    showToast('沒有修改任何卡片', 2000);
    return;
  }

  const btn = document.getElementById('qf-save-btn');
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>儲存中…';

  const payload = Object.entries(qfDirty).map(([id, fields]) => ({
    id: parseInt(id),
    ...fields
  }));

  fetch('{{ route("work-board.quick-fill.save") }}', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': csrf,
      'X-Requested-With': 'XMLHttpRequest',
    },
    body: JSON.stringify({ cards: payload }),
  })
  .then(r => r.json())
  .then(data => {
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>儲存';
    if (data.success) {
      showToast(`✅ 已更新 ${data.updated} 張卡片`, 3000);
      bootstrap.Modal.getInstance(document.getElementById('quickFillModal')).hide();
    } else {
      showToast('❌ 儲存失敗', 2500);
    }
  })
  .catch(() => {
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>儲存';
    showToast('❌ 儲存失敗', 2500);
  });
}

function escHtml(str) {
  return String(str ?? '').replace(/[&<>"']/g, m =>
    ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[m]));
}
</script>
@endpush