@extends('layouts.app')

@section('title', '專案管理看板')

@push('styles')
<style>
.kanban-wrapper {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  height: calc(100vh - 260px);
  align-items: flex-start;
  scrollbar-width: auto;
  scrollbar-color: #6c757d #dee2e6;
}
.kanban-wrapper::-webkit-scrollbar { height: 14px; }
.kanban-wrapper::-webkit-scrollbar-track { background:#dee2e6; border-radius:7px; margin:0 4px; }
.kanban-wrapper::-webkit-scrollbar-thumb { background:#6c757d; border-radius:7px; border:3px solid #dee2e6; }
.kanban-wrapper::-webkit-scrollbar-thumb:hover { background:#343a40; }
.kanban-col {
  flex: 0 0 260px;
  background: #f4f6f8;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 260px);
}
.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;
  position: sticky;
  top: 0;
  cursor: grab;
  user-select: none;
}
.kanban-col-header:active { cursor: grabbing; }
.kanban-col-header::before {
  content: '⠿';
  margin-right: 6px;
  opacity: .4;
  font-size: .9rem;
  letter-spacing: -1px;
}
.kanban-col.col-ghost    { opacity:.4; border:2px dashed #6c757d; }
.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); }
.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; }
.edit-btn { opacity:0; transition:opacity .15s; }
.kanban-card:hover .edit-btn { opacity:1; }
.pri-urgent { border-left-color: #dc3545; }
.pri-high   { border-left-color: #fd7e14; }
.pri-normal { border-left-color: #0d6efd; }
.pri-low    { border-left-color: #6c757d; }
.mine-badge { display:inline-block; width:7px; height:7px; border-radius:50%; background:#0d6efd; margin-right:3px; }
/* 泳道顏色 */
.col-pending   { background:linear-gradient(135deg,#0d6efd,#3d8bfd); color:#fff; }
.col-progress  { background:linear-gradient(135deg,#fd7e14,#ffa04d); color:#fff; }
.col-hold      { background:linear-gradient(135deg,#dc3545,#e07b85); color:#fff; }
.col-watching  { background:linear-gradient(135deg,#f59e0b,#fcd34d); color:#fff; }
.col-completed { background:linear-gradient(135deg,#198754,#28a96a); color:#fff; }
.col-rejected  { background:linear-gradient(135deg,#6c757d,#868e96); color:#fff; }
.col-default-0 { background:linear-gradient(135deg,#0891b2,#22d3ee); color:#fff; }
.col-default-1 { background:linear-gradient(135deg,#7c3aed,#a78bfa); color:#fff; }
.col-default-2 { background:linear-gradient(135deg,#b45309,#fbbf24); color:#fff; }
.col-default-3 { background:linear-gradient(135deg,#065f46,#34d399); color:#fff; }
.col-default-4 { background:linear-gradient(135deg,#9d174d,#f472b6); color:#fff; }
/* 暗黑模式 */
[data-bs-theme="dark"] .kanban-wrapper {
  scrollbar-color: #4b5563 #1c1f26;
}
[data-bs-theme="dark"] .kanban-wrapper::-webkit-scrollbar-track { background: #1c1f26; }
[data-bs-theme="dark"] .kanban-wrapper::-webkit-scrollbar-thumb { background: #4b5563; border-color: #1c1f26; }
[data-bs-theme="dark"] .kanban-wrapper::-webkit-scrollbar-thumb:hover { background: #6b7280; }
[data-bs-theme="dark"] .kanban-col { background: #1c1f26; }
[data-bs-theme="dark"] .kanban-card { background: #252830; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
[data-bs-theme="dark"] .kanban-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .inline-date-d,
[data-bs-theme="dark"] .inline-date-t {
  background: #252830 !important;
  color: #dee2e6 !important;
  border-color: #3a3f4b !important;
}
/* Win11 */
[data-theme="win11"] .kanban-col {
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(12px);
}
[data-theme="win11"] .kanban-card {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
[data-theme="win11"] .kanban-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); }
[data-theme="win11"] .inline-date-d,
[data-theme="win11"] .inline-date-t {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(0,0,0,.15) !important;
  color: #1a1a1a !important;
}
[data-theme="win11"] .kanban-wrapper {
  scrollbar-color: rgba(0,0,0,.2) rgba(0,0,0,.05);
}
[data-theme="win11"] .kanban-wrapper::-webkit-scrollbar-track { background: rgba(0,0,0,.04); border-radius: 7px; }
[data-theme="win11"] .kanban-wrapper::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-color: rgba(0,0,0,.04); border-radius: 7px; }
[data-theme="win11"] .kanban-wrapper::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.28); }
/* Space */
[data-theme="space"] .kanban-col { background: rgba(139,92,246,.08); border: 1px solid rgba(139,92,246,.2); backdrop-filter: blur(10px); }
[data-theme="space"] .kanban-card { background: rgba(255,255,255,.05); border: 1px solid rgba(139,92,246,.18); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
[data-theme="space"] .kanban-card:hover { box-shadow: 0 4px 16px rgba(124,58,237,.25); border-color: rgba(139,92,246,.35); }
[data-theme="space"] .inline-date-d,
[data-theme="space"] .inline-date-t { background: rgba(255,255,255,.06) !important; border-color: rgba(139,92,246,.2) !important; color: #c8d3f5 !important; }
[data-theme="space"] .kanban-wrapper { scrollbar-color: rgba(139,92,246,.4) rgba(139,92,246,.08); }
[data-theme="space"] .kanban-wrapper::-webkit-scrollbar-track { background: rgba(139,92,246,.06); }
[data-theme="space"] .kanban-wrapper::-webkit-scrollbar-thumb { background: rgba(139,92,246,.35); border-color: rgba(139,92,246,.06); }
[data-theme="space"] .kanban-wrapper::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,.55); }
/* AI */
[data-theme="japandi"] .kanban-col { background: #f0ebe1; border: 1px solid #ddd4c6; border-radius: 6px; box-shadow: 0 2px 8px rgba(61,43,31,.06); }
[data-theme="japandi"] .kanban-card { background: #faf7f2; border: 1px solid #ddd4c6; border-radius: 4px; box-shadow: 0 1px 3px rgba(61,43,31,.05); }
[data-theme="japandi"] .kanban-card:hover { box-shadow: 0 4px 16px rgba(61,43,31,.1); border-color: #c4b8a8; }
[data-theme="japandi"] .inline-date-d,
[data-theme="japandi"] .inline-date-t { background: #faf7f2 !important; border-color: #cfc4b6 !important; color: #3d2b1f !important; }
[data-theme="japandi"] .kanban-wrapper { scrollbar-color: #bbb0a0 #ede8de; }
[data-theme="japandi"] .kanban-wrapper::-webkit-scrollbar-track { background: #ede8de; }
[data-theme="japandi"] .kanban-wrapper::-webkit-scrollbar-thumb { background: #bbb0a0; border-color: #ede8de; }
[data-theme="japandi"] .kanban-wrapper::-webkit-scrollbar-thumb:hover { background: #9b8b7a; }
/* Sepia */
[data-theme="sepia"] .kanban-col { background: #f0e8d8; }
[data-theme="sepia"] .kanban-card { background: #faf5ee; box-shadow: 0 1px 3px rgba(139,94,60,.1); }
[data-theme="sepia"] .kanban-card:hover { box-shadow: 0 4px 12px rgba(139,94,60,.15); }
[data-theme="sepia"] .inline-date-d,
[data-theme="sepia"] .inline-date-t {
  background: #fdf9f3 !important;
  border-color: rgba(139,94,60,.3) !important;
  color: #3d2b1f !important;
}
</style>
<link rel="stylesheet" href="/vendor/tom-select/tom-select.bootstrap5.min.css">
@endpush

@section('content')
<div class="px-2">

  {{-- 頂部工具列 --}}
  <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">
        <a href="{{ route('projects.index') }}" class="btn btn-sm btn-outline-secondary">
          <i class="bi bi-arrow-left me-1"></i>返回專案清單
        </a>
        <i class="bi bi-kanban-fill fs-4" style="color:#6366f1;"></i>
        <h4 class="mb-0 fw-bold">專案管理看板</h4>
      </div>
      <div class="d-flex align-items-center gap-2 flex-wrap">
        <form method="GET" action="{{ route('project-board.board') }}" class="d-flex align-items-center gap-2 flex-wrap" id="filter-form">
          {{-- 人員 --}}
          <div class="d-flex align-items-center gap-1">
            <label class="small text-muted mb-0 text-nowrap" for="assignee_id">人員：</label>
            <select name="assignee_id" class="form-select form-select-sm" style="max-width:180px;" onchange="this.form.submit()" id="assignee_id">
              <option value="" {{ $selectedAssigneeId === null ? 'selected' : '' }}>── 全部 ──</option>
              <option value="{{ $currentUser->id }}" {{ (string)$selectedAssigneeId === (string)$currentUser->id ? 'selected' : '' }}>
                ⭐ 我的議題
              </option>
              @foreach($users as $u)
                @if($u->id != $currentUser->id)
                  <option value="{{ $u->id }}" {{ (string)$selectedAssigneeId === (string)$u->id ? 'selected' : '' }}>
                    {{ $u->name }}
                  </option>
                @endif
              @endforeach
            </select>
          </div>
          {{-- 新增者 --}}
          <div class="d-flex align-items-center gap-1">
            <label class="small text-muted mb-0 text-nowrap" for="creator_id">新增者：</label>
            <select name="creator_id" class="form-select form-select-sm" style="max-width:160px;" onchange="this.form.submit()" id="creator_id">
              <option value="">── 全部 ──</option>
              @foreach($users as $u)
                <option value="{{ $u->id }}" {{ (string)$selectedCreatorId === (string)$u->id ? 'selected' : '' }}>
                  {{ $u->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 name="project_id" class="form-select form-select-sm" style="max-width:220px;" onchange="this.form.submit()">
              <option value="">── 全部 ──</option>
              @foreach($projects as $proj)
                <option value="{{ $proj->id }}" {{ $selectedProject?->id == $proj->id ? 'selected' : '' }}>
                  {{ $proj->name }}
                </option>
              @endforeach
            </select>
          </div>
        </form>
        {{-- 排序 --}}
        <div class="d-flex align-items-center gap-1">
          <label class="small text-muted mb-0 text-nowrap">排序：</label>
          <select id="sort-select" class="form-select form-select-sm" style="max-width:150px;">
            <option value="">── 預設 ──</option>
            <optgroup label="到期日">
              <option value="due_asc">到期日 早→晚</option>
              <option value="due_desc">到期日 晚→早</option>
            </optgroup>
            <optgroup label="完成日">
              <option value="completed_asc">完成日 早→晚</option>
              <option value="completed_desc">完成日 晚→早</option>
            </optgroup>
            <optgroup label="標題">
              <option value="subject_asc">標題 A→Z</option>
              <option value="subject_desc">標題 Z→A</option>
            </optgroup>
            <optgroup label="建立日期">
              <option value="created_desc">建立日期 新→舊</option>
              <option value="created_asc">建立日期 舊→新</option>
            </optgroup>
            <optgroup label="更新日期">
              <option value="updated_desc">更新日期 新→舊</option>
              <option value="updated_asc">更新日期 舊→新</option>
            </optgroup>
            <optgroup label="優先權">
              <option value="priority_desc">優先權 高→低</option>
              <option value="priority_asc">優先權 低→高</option>
            </optgroup>
          </select>
        </div>
        {{-- 泳道篩選 --}}
        <div class="d-flex align-items-center gap-1">
          <label class="small text-muted mb-0 text-nowrap">泳道：</label>
          <div class="dropdown">
            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button"
              id="laneFilterBtn" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
              <i class="bi bi-layout-three-columns me-1"></i><span id="lane-filter-label">全部</span>
            </button>
            <div class="dropdown-menu p-2" style="min-width:180px;" id="laneFilterMenu">
              <div class="d-flex justify-content-between mb-2">
                <a href="#" class="small text-primary text-decoration-none" onclick="setAllLanes(true);return false;">全選</a>
                <a href="#" class="small text-secondary text-decoration-none" onclick="setAllLanes(false);return false;">全不選</a>
              </div>
              @foreach($statuses as $status)
              <div class="form-check mb-1">
                <input class="form-check-input lane-check" type="checkbox"
                  value="{{ $status->slug }}" id="lane_{{ $status->slug }}"
                  checked onchange="applyLaneFilter()">
                <label class="form-check-label small" for="lane_{{ $status->slug }}">
                  {{ $status->label }}
                </label>
              </div>
              @endforeach
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- 第二行：統計 + 新增 --}}
    @php
      $today         = now()->timezone('Asia/Taipei')->toDateString();
      $totalCount    = $issues->count();
      $progressCount = $issues->whereIn('status', ['hold', 'in_progress'])->count();
      $resolvedCount = $issues->whereIn('status', ['completed', 'watching', 'custom__1779266741', 'custom__1779266752'])->count();
    @endphp
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mt-1">
      <div class="d-flex gap-2 flex-wrap">
        <span class="badge rounded-pill bg-secondary fs-6 px-3">
          <i class="bi bi-card-list me-1"></i>全部 <span id="stat-total-n">{{ $totalCount }}</span>
        </span>
        <span class="badge rounded-pill fs-6 px-3" style="background:#fd7e14;">
          <i class="bi bi-arrow-repeat me-1"></i>處理中 <span id="stat-progress-n">{{ $progressCount }}</span>
        </span>
        <span class="badge rounded-pill bg-success fs-6 px-3">
          <i class="bi bi-check-circle me-1"></i>已完成 <span id="stat-resolved-n">{{ $resolvedCount }}</span>
        </span>
      </div>
      <button class="btn btn-sm btn-outline-warning ms-2" data-bs-toggle="modal" data-bs-target="#pbQuickFillModal">
        <i class="bi bi-lightning-fill me-1"></i>一鍵填寫
      </button>
      <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#createIssueModal">
        <i class="bi bi-plus-lg me-1"></i>新增議題
      </button>
    </div>
  </div>

  {{-- 新增議題 Modal --}}
  <div class="modal fade" id="createIssueModal" tabindex="-1">
    <div class="modal-dialog">
      <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" placeholder="請輸入議題標題">
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">專案 <span class="text-danger">*</span></label>
            <select class="form-select" id="new-project">
              <option value="">── 請選擇 ──</option>
              @foreach($projects as $proj)
                <option value="{{ $proj->id }}" {{ $selectedProject?->id == $proj->id ? 'selected' : '' }}>
                  {{ $proj->name }}
                </option>
              @endforeach
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">合約</label>
            <select class="form-select" id="new-contract">
              <option value="">── 請先選擇專案 ──</option>
            </select>
          </div>
          <div class="row g-3 mb-3">
            <div class="col-6">
              <label class="form-label fw-semibold">類型</label>
              <select class="form-select" id="new-tracker">
                @foreach($trackers as $k => $t)
                  <option value="{{ $k }}">{{ $t['label'] }}</option>
                @endforeach
              </select>
            </div>
            <div class="col-6">
              <label class="form-label fw-semibold">狀態</label>
              <select class="form-select" id="new-status">
                @foreach($statuses as $s)
                  <option value="{{ $s->slug }}">{{ $s->label }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="row g-3 mb-3">
            <div class="col-6">
              <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-6">
              <label class="form-label fw-semibold">指派給</label>
              <select class="form-select" id="new-assignee">
                <option value="">── 未指派 ──</option>
                @foreach($users as $u)
                  <option value="{{ $u->id }}">{{ $u->name }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="row g-2 mb-3">
            <div class="col-6">
              <label class="form-label fw-semibold" for="new-due-date-d">到期日</label>
              <div class="d-flex gap-1">
                <input type="date" class="form-control" id="new-due-date-d">
                <input type="time" step="600" class="form-control" id="new-due-date-t" aria-label="到期日時間" style="width:120px">
              </div>
            </div>
            <div class="col-6">
              <label class="form-label fw-semibold" for="new-completed-on-d">完成日</label>
              <div class="d-flex gap-1">
                <input type="date" class="form-control" id="new-completed-on-d">
                <input type="time" step="600" class="form-control" id="new-completed-on-t" aria-label="完成日時間" style="width:120px">
              </div>
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">母議題</label>
            <select class="form-select" id="new-parent-issue">
              <option value=""></option>
              @foreach($allIssues as $i)
                <option value="{{ $i->id }}">#{{ $i->id }} {{ Str::limit($i->title, 40) }}</option>
              @endforeach
            </select>
            <div class="form-text" style="font-size:.72rem;">設定後，此議題為子議題；母議題需等所有子議題完成度達 100% 才能變更狀態。</div>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">描述</label>
            <textarea class="form-control" id="new-description" rows="3" placeholder="選填"></textarea>
          </div>
          <div class="mb-1">
            <label class="form-label fw-semibold">附件</label>
            <input type="file" class="form-control form-control-sm" id="new-attachments" multiple
                   accept=".pdf,.doc,.docx,.odt,.jpg,.jpeg,.png">
            <div class="form-text">PDF、DOC / DOCX、ODT、JPG、PNG，單檔上限 20 MB</div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button class="btn btn-primary" id="create-issue-btn">
            <i class="bi bi-plus-lg me-1"></i>建立
          </button>
        </div>
      </div>
    </div>
  </div>

  {{-- 編輯議題 Modal --}}
  <div class="modal fade" id="editIssueModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"><i class="bi bi-pencil-square me-1"></i>編輯議題 <span id="modal-issue-num" class="text-muted fs-6"></span></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="edit-issue-id">
          <div class="mb-3">
            <label class="form-label fw-semibold">標題</label>
            <input type="text" class="form-control" id="edit-subject" maxlength="255">
          </div>
          <div class="row g-3 mb-3">
            <div class="col-6">
              <label class="form-label fw-semibold">狀態</label>
              <select class="form-select" id="edit-status">
                @foreach($statuses as $s)
                  <option value="{{ $s->slug }}">{{ $s->label }}</option>
                @endforeach
              </select>
            </div>
            <div class="col-6">
              <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>
          <div class="mb-3">
            <label class="form-label fw-semibold">指派給</label>
            <select class="form-select" id="edit-assignee">
              <option value="">── 未指派 ──</option>
              @foreach($users as $u)
                <option value="{{ $u->id }}">{{ $u->name }}</option>
              @endforeach
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">母議題</label>
            <select class="form-select" id="edit-parent-issue">
              <option value=""></option>
              @foreach($allIssues as $i)
                <option value="{{ $i->id }}" data-issue-id="{{ $i->id }}">#{{ $i->id }} {{ Str::limit($i->title, 40) }}</option>
              @endforeach
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">完成度：<span id="edit-ratio-label">0</span>%</label>
            <input type="range" class="form-range" id="edit-ratio" min="0" max="100" step="10"
              oninput="document.getElementById('edit-ratio-label').textContent = this.value">
          </div>
          <div class="row g-2 mb-1 align-items-end">
            <div class="col-4">
              <small class="text-muted d-block mb-1">建立日</small>
              <div class="form-control-plaintext ps-2 border-bottom text-muted small" id="edit-created-on">—</div>
            </div>
            <div class="col-4">
              <label class="form-label fw-semibold" for="edit-due-date-d">到期日</label>
              <div class="d-flex gap-1">
                <input type="date" class="form-control" id="edit-due-date-d">
                <input type="time" step="600" class="form-control" id="edit-due-date-t" aria-label="到期日時間" style="width:120px">
              </div>
            </div>
            <div class="col-4">
              <label class="form-label fw-semibold" for="edit-completed-on-d">完成日</label>
              <div class="d-flex gap-1">
                <input type="date" class="form-control" id="edit-completed-on-d">
                <input type="time" step="600" class="form-control" id="edit-completed-on-t" aria-label="完成日時間" style="width:120px">
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button class="btn btn-primary" id="save-issue-btn">
            <i class="bi bi-check-lg me-1"></i>儲存
          </button>
        </div>
      </div>
    </div>
  </div>

  {{-- Toast --}}
  <div id="toast-update" 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>

  {{-- 看板主體 --}}
  @if($issues->isEmpty())
    <div class="text-center text-muted py-5">
      <i class="bi bi-check-circle fs-1 d-block mb-2 text-success"></i>
      目前沒有議題
    </div>
  @else
    <div class="kanban-wrapper" id="kanban-board">
      @foreach($statuses as $statusIdx => $status)
        @php
          $colIssues = $issuesByStatus->get($status->slug, collect());
          $count = $colIssues->count();
          $colColor = match($status->slug) {
            'pending'    => 'col-pending',
            'in_progress'=> 'col-progress',
            'hold'       => 'col-hold',
            'watching'   => 'col-watching',
            'completed'  => 'col-completed',
            'rejected'   => 'col-rejected',
            default      => 'col-default-' . ($statusIdx % 5),
          };
          $statGroup = in_array($status->slug, ['hold', 'in_progress']) ? 'progress'
            : (str_contains($status->slug, 'completed') || str_contains($status->slug, 'watching') ? 'resolved' : 'other');
        @endphp
        <div class="kanban-col" data-stat-group="{{ $statGroup }}" data-status-id="{{ $status->slug }}">
          <div class="kanban-col-header {{ $colColor }}">
            <span>{{ $status->label }}</span>
            <span class="badge bg-light text-dark">{{ $count }}</span>
          </div>
          <div class="kanban-cards sortable-list"
            data-status-id="{{ $status->slug }}"
            data-status-name="{{ $status->label }}">
            @foreach($colIssues as $issue)
              @php
                $isMine   = $issue->assigned_to_id === $currentUser->id;
                $priClass = match($issue->priority) {
                  'urgent' => 'pri-urgent',
                  'high'   => 'pri-high',
                  'low'    => 'pri-low',
                  default  => 'pri-normal',
                };
                $priData  = $priorities[$issue->priority] ?? ['label' => $issue->priority, 'color' => 'secondary'];
                $overdue  = $issue->due_date && $issue->due_date->isPast();
                $trackerLabels = $trackers;
              @endphp
              <div class="kanban-card {{ $priClass }} {{ $isMine ? 'is-mine' : '' }}"
                data-issue-id="{{ $issue->id }}"
                data-author-id="{{ $issue->user_id }}"
                data-assigned-id="{{ $issue->assigned_to_id ?? '' }}"
                data-updated-on="{{ $issue->updated_at->toDateString() }}"
                data-created-on="{{ $issue->created_at->toDateString() }}"
                data-subject="{{ $issue->title }}"
                data-status-id="{{ $issue->status }}"
                data-priority-id="{{ $issue->priority }}"
                data-done-ratio="{{ $issue->done_ratio ?? 0 }}"
                data-start-date="{{ $issue->start_date?->format('Y-m-d') ?? '' }}"
                data-due-date="{{ $issue->due_date?->format('Y-m-d\TH:i') ?? '' }}"
                data-completed-on="{{ $issue->completed_on?->format('Y-m-d\TH:i') ?? '' }}"
                data-assigned-name="{{ $issue->assignee?->name ?? '' }}"
                data-parent-id="{{ $issue->parent_id ?? '' }}"
                data-parent-title="{{ $issue->parent?->title ?? '' }}">

                {{-- 卡片頂部 --}}
                <div class="d-flex justify-content-between align-items-start mb-1">
                  <span class="text-muted" style="font-size:.75rem;">
                    @if($isMine)<span class="mine-badge"></span>@endif
                    #{{ $issue->redmine_id }}
                    @if($issue->project)
                      <span class="badge bg-light text-secondary ms-1" style="font-size:.68rem; font-weight:normal;">{{ $issue->project->name }}</span>
                    @endif
                  </span>
                  <div class="d-flex align-items-center gap-1">
                    <span class="badge bg-{{ $priData['color'] }}" style="font-size:.65rem;">
                      <i class="bi bi-flag-fill me-1" style="font-size:.55rem;"></i>{{ $priData['label'] }}
                    </span>
                    @if($issue->tracker)
                      <span class="badge bg-{{ $trackers[$issue->tracker]['color'] ?? 'secondary' }}" style="font-size:.68rem;">{{ $trackers[$issue->tracker]['label'] ?? $issue->tracker }}</span>
                    @endif
                    @if($issue->project)
                    <a href="{{ route('projects.issues.show', [$issue->project, $issue]) }}"
                      class="btn p-0 border-0 bg-transparent edit-btn"
                      style="font-size:.85rem; line-height:1; color:#adb5bd;"
                      title="前往議題頁"
                      onmouseenter="this.style.color='#0d6efd'"
                      onmouseleave="this.style.color='#adb5bd'"
                      onclick="event.stopPropagation()">
                      <i class="bi bi-pencil-square"></i>
                    </a>
                    @endif
                    @if($issue->user_id === $currentUser->id || $currentUser->isAdmin())
                    <button class="btn p-0 border-0 bg-transparent edit-btn"
                      style="font-size:.85rem; line-height:1; color:#adb5bd;"
                      title="刪除"
                      onmouseenter="this.style.color='#dc3545'"
                      onmouseleave="this.style.color='#adb5bd'"
                      onclick="event.stopPropagation(); deleteIssue({{ $issue->id }}, this.closest('.kanban-card'))">
                      <i class="bi bi-trash3"></i>
                    </button>
                    @endif
                  </div>
                </div>

                {{-- 標題（連到議題詳情，project 為 null 時不加連結） --}}
                @if($issue->project)
                <a href="{{ route('projects.issues.show', [$issue->project, $issue]) }}"
                  class="d-block text-dark text-decoration-none fw-semibold mb-2 lh-sm"
                  style="font-size:.85rem;" draggable="false"
                  onclick="event.stopPropagation();">
                  {{ Str::limit($issue->title, 60) }}
                </a>
                @else
                <span class="d-block fw-semibold mb-2 lh-sm text-dark" style="font-size:.85rem;">
                  {{ Str::limit($issue->title, 60) }}
                </span>
                @endif

                {{-- 母議題徽章 --}}
                @if($issue->parent_id)
                <div class="mb-1">
                  <span class="badge rounded-pill bg-secondary bg-opacity-75 text-white" style="font-size:.65rem;" title="母議題：#{{ $issue->parent_id }} {{ $issue->parent?->title ?? '' }}">
                    <i class="bi bi-arrow-return-right"></i> #{{ $issue->parent_id }}
                  </span>
                </div>
                @endif

                {{-- 指派人 + 日期 --}}
                <div class="d-flex justify-content-between align-items-end mt-1" style="font-size:.72rem;">
                  <span class="text-muted">
                    <i class="bi bi-person me-1"></i>{{ $issue->assignee?->name ?? '未指派' }}
                  </span>
                  <div class="text-end" style="line-height:1.8;">
                    {{-- 到期日（本地可編輯）--}}
                    <div class="inline-date-wrap {{ $overdue ? 'text-danger fw-bold' : ($issue->due_date ? 'text-warning' : 'text-muted') }}"
                         title="到期日（點擊編輯）" style="cursor:pointer;"
                         data-field="due_date" onclick="openInlineDate(this,event)">
                      <i class="bi bi-flag me-1"></i>
                      <span class="inline-date-label">{{ $issue->due_date?->format('Y-m-d H:i') ?? '到期日' }}</span>
                      <span class="inline-date-editor" onclick="event.stopPropagation()" style="display:none;gap:3px;">
                        <input type="date" class="inline-date-d" value="{{ $issue->due_date?->format('Y-m-d') ?? '' }}"
                               style="font-size:.72rem;padding:1px 3px;border:1px solid #ced4da;border-radius:4px;background:#fff;color:#333;width:115px;" aria-label="到期日">
                        <input type="time" step="600" class="inline-date-t" value="{{ $issue->due_date?->format('H:i') ?? '' }}"
                               style="font-size:.72rem;padding:1px 3px;border:1px solid #ced4da;border-radius:4px;background:#fff;color:#333;width:90px;" aria-label="到期日時間">
                      </span>
                    </div>
                    {{-- 完成日（可編輯，從 Redmine closed_on 帶入）--}}
                    <div class="inline-date-wrap {{ $issue->completed_on ? 'text-success' : 'text-muted' }}"
                         title="完成日（點擊編輯）" style="cursor:pointer;"
                         data-field="completed_on" onclick="openInlineDate(this,event)">
                      <i class="bi bi-check-circle me-1"></i>
                      <span class="inline-date-label">{{ $issue->completed_on?->format('Y-m-d H:i') ?? '完成日' }}</span>
                      <span class="inline-date-editor" onclick="event.stopPropagation()" style="display:none;gap:3px;">
                        <input type="date" class="inline-date-d" value="{{ $issue->completed_on?->format('Y-m-d') ?? '' }}"
                               style="font-size:.72rem;padding:1px 3px;border:1px solid #ced4da;border-radius:4px;background:#fff;color:#333;width:115px;" aria-label="完成日">
                        <input type="time" step="600" class="inline-date-t" value="{{ $issue->completed_on?->format('H:i') ?? '' }}"
                               style="font-size:.72rem;padding:1px 3px;border:1px solid #ced4da;border-radius:4px;background:#fff;color:#333;width:90px;" aria-label="完成日時間">
                      </span>
                    </div>
                  </div>
                </div>

                {{-- 工時 --}}
                @php
                  $estimated = $issue->estimated_hours;
                  $spent     = $issue->timeEntries->sum('hours');
                @endphp
                @if($estimated || $spent)
                <div class="d-flex gap-2 mt-1" style="font-size:.72rem;">
                  @if($estimated)
                    <span class="text-muted"><i class="bi bi-hourglass-split me-1"></i>預估 {{ number_format($estimated, 1) }}小時</span>
                  @endif
                  @if($spent)
                    <span class="{{ ($estimated && $spent > $estimated) ? 'text-danger' : 'text-muted' }}">
                      <i class="bi bi-clock-history me-1"></i>已用 {{ number_format($spent, 1) }}小時
                    </span>
                  @endif
                </div>
                @endif

                {{-- 完成度 --}}
                @if(($issue->done_ratio ?? 0) > 0)
                  <div class="progress mt-2" style="height:3px;">
                    <div class="progress-bar bg-success" style="width:{{ $issue->done_ratio }}%"></div>
                  </div>
                @endif

              </div>
            @endforeach
          </div>
        </div>
      @endforeach
    </div>
  @endif

</div>

{{-- ── 一鍵填寫 Modal ──────────────────────────────────────── --}}
<div class="modal fade" id="pbQuickFillModal" 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="modal-body p-0">
        {{-- Loading --}}
        <div id="pbqf-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="pbqf-content" class="d-none">
          <div class="table-responsive">
            <table class="table table-sm table-hover align-middle mb-0" style="font-size:.875rem;">
              <thead class="table-light sticky-top" style="z-index:1;">
                <tr>
                  <th style="width:70px;" class="ps-3">#</th>
                  <th>議題名稱</th>
                  <th style="width:120px;">狀態</th>
                  <th style="width:150px;">開始時間</th>
                  <th style="width:150px;">到期日</th>
                  <th style="width:150px;">完成日</th>
                </tr>
              </thead>
              <tbody id="pbqf-tbody"></tbody>
            </table>
          </div>
        </div>

        {{-- Empty --}}
        <div id="pbqf-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="pbqf-changed-count"></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="pbqf-save-btn" onclick="pbqfSave()">
          <i class="bi bi-check-lg me-1"></i>儲存
        </button>
      </div>
    </div>
  </div>
</div>

@endsection

@push('scripts')
<script src="/vendor/sortablejs/Sortable.min.js"></script>
<script src="/vendor/tom-select/tom-select.complete.min.js"></script>
<script>
const currentUserId = {{ $currentUser->id }};
const projectContracts = @json($projects->mapWithKeys(fn($p) => [
    $p->id => $p->contracts->map(fn($c) => ['id' => $c->id, 'name' => $c->name])->values()
]));
const csrfToken     = '{{ csrf_token() }}';
const BASE_URL      = '/project-board/issues';

// ── 拖拉初始化 ─────────────────────────────────────────────
document.querySelectorAll('.sortable-list').forEach(list => {
  Sortable.create(list, {
    group: 'kanban',
    animation: 150,
    ghostClass: 'sortable-ghost',
    dragClass: 'sortable-drag',
    onEnd(evt) {
      const issueId   = evt.item.dataset.issueId;
      const newStatus = evt.to.dataset.statusId;
      const oldStatus = evt.from.dataset.statusId;
      if (newStatus === oldStatus) return;

      updateColCounts();
      evt.item.classList.add('updating');
      showToast('更新狀態中…');

      fetch(`${BASE_URL}/${issueId}/status`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
        body: JSON.stringify({ status: newStatus }),
      })
      .then(r => r.json())
      .then(data => {
        evt.item.classList.remove('updating');
        if (data.success) {
          evt.item.dataset.statusId = newStatus;
          autoSetCompletedOn(evt.item, newStatus);
          showToast('✓ 狀態已更新', 1800);
        } else {
          const from = evt.from;
          from.insertBefore(evt.item, from.children[evt.oldIndex] || null);
          updateColCounts();
          showToast('❌ ' + (data.error || '更新失敗，已還原'), 3000);
        }
      })
      .catch(() => {
        evt.item.classList.remove('updating');
        evt.from.insertBefore(evt.item, evt.from.children[evt.oldIndex] || null);
        updateColCounts();
        showToast('❌ 連線錯誤，已還原', 2500);
      });
    }
  });
});

// ── 欄位計數 ──────────────────────────────────────────────
function updateColCounts() {
  let total = 0, progress = 0, resolved = 0;
  document.querySelectorAll('.kanban-col').forEach(col => {
    const cards = [...col.querySelectorAll('.kanban-card')].filter(c => c.style.display !== 'none');
    const count = cards.length;
    col.querySelector('.badge').textContent = count;
    const group = col.dataset.statGroup;
    total += count;
    if (group === 'progress') progress += count;
    if (group === 'resolved') resolved += count;
  });
  document.getElementById('stat-total-n').textContent    = total;
  document.getElementById('stat-progress-n').textContent = progress;
  document.getElementById('stat-resolved-n').textContent = resolved;
}

// ── 新增議題 ───────────────────────────────────────────────
document.getElementById('create-issue-btn').addEventListener('click', function () {
  const title     = document.getElementById('new-title').value.trim();
  const projectId = document.getElementById('new-project').value;

  if (!title) {
    document.getElementById('new-title').classList.add('is-invalid');
    document.getElementById('new-title').focus();
    return;
  }
  document.getElementById('new-title').classList.remove('is-invalid');
  if (!projectId) {
    document.getElementById('new-project').classList.add('is-invalid');
    document.getElementById('new-project').focus();
    return;
  }
  document.getElementById('new-project').classList.remove('is-invalid');

  const btn = this;
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>建立中…';

  const fd = new FormData();
  fd.append('title',          title);
  fd.append('project_id',     projectId);
  const contractId = document.getElementById('new-contract').value;
  if (contractId) fd.append('contract_id', contractId);
  fd.append('tracker',        document.getElementById('new-tracker').value);
  fd.append('status',         document.getElementById('new-status').value);
  fd.append('priority',       document.getElementById('new-priority').value);
  const assignee = document.getElementById('new-assignee').value;
  if (assignee) fd.append('assigned_to_id', assignee);
  const parentId = document.getElementById('new-parent-issue').value;
  if (parentId) fd.append('parent_id', parentId);
  const dueDateD = document.getElementById('new-due-date-d').value;
  const dueDateT = document.getElementById('new-due-date-t').value;
  if (dueDateD) fd.append('due_date', dueDateD + (dueDateT ? ' ' + dueDateT : ' 00:00:00'));
  const completedOnD = document.getElementById('new-completed-on-d').value;
  const completedOnT = document.getElementById('new-completed-on-t').value;
  if (completedOnD) fd.append('completed_on', completedOnD + (completedOnT ? ' ' + completedOnT : ' 00:00:00'));
  const desc = document.getElementById('new-description').value;
  if (desc) fd.append('description', desc);
  const files = document.getElementById('new-attachments').files;
  for (const f of files) fd.append('attachments[]', f);

  fetch(BASE_URL, {
    method: 'POST',
    headers: { 'X-CSRF-TOKEN': csrfToken },
    body: fd,
  })
  .then(r => r.json())
  .then(data => {
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-plus-lg me-1"></i>建立';
    if (data.success) {
      bootstrap.Modal.getInstance(document.getElementById('createIssueModal')).hide();
      ['new-title','new-description','new-due-date-d','new-due-date-t','new-completed-on-d','new-completed-on-t','new-parent-issue'].forEach(id => document.getElementById(id).value = '');
      document.getElementById('new-attachments').value = '';
      showToast('✓ 議題已建立，重新整理中…', 1500);
      setTimeout(() => location.reload(), 1500);
    } else {
      showToast('❌ ' + (data.message || '建立失敗'), 2500);
    }
  })
  .catch(() => {
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-plus-lg me-1"></i>建立';
    showToast('❌ 連線錯誤', 2500);
  });
});

// ── 編輯 Modal ─────────────────────────────────────────────
const editModal = new bootstrap.Modal(document.getElementById('editIssueModal'));
let editingCard = null;

function openEditModal(card) {
  editingCard = card;
  document.getElementById('edit-issue-id').value         = card.dataset.issueId;
  document.getElementById('modal-issue-num').textContent = '#' + card.dataset.issueId;
  document.getElementById('edit-subject').value          = card.dataset.subject;
  document.getElementById('edit-status').value           = card.dataset.statusId;
  document.getElementById('edit-priority').value         = card.dataset.priorityId;
  document.getElementById('edit-assignee').value         = card.dataset.assignedId || '';
  document.getElementById('edit-ratio').value            = card.dataset.doneRatio;
  document.getElementById('edit-ratio-label').textContent = card.dataset.doneRatio;
  document.getElementById('edit-created-on').textContent = card.dataset.createdOn || '—';
  const [ddDate='', ddTime=''] = (card.dataset.dueDate || '').split('T');
  document.getElementById('edit-due-date-d').value = ddDate;
  document.getElementById('edit-due-date-t').value = ddTime;
  const [coDate='', coTime=''] = (card.dataset.completedOn || '').split('T');
  document.getElementById('edit-completed-on-d').value = coDate;
  document.getElementById('edit-completed-on-t').value = coTime;
  // 母議題：不能選自己（先更新 raw option，再 destroy+recreate TomSelect）
  document.getElementById('edit-parent-issue').querySelectorAll('option[data-issue-id]').forEach(o => {
    o.disabled = (o.dataset.issueId === card.dataset.issueId);
  });
  editModal.show();
  document.getElementById('editIssueModal').addEventListener('shown.bs.modal', () => {
    if (tsEditParentIssue) tsEditParentIssue.destroy();
    tsEditParentIssue = new TomSelect('#edit-parent-issue', {
      plugins: ['clear_button'], maxOptions: null, placeholder: '搜尋母議題…',
    });
    tsEditParentIssue.setValue(card.dataset.parentId || '', true);
  }, { once: true });
}

function deleteIssue(issueId, card) {
  if (!confirm(`確定要刪除議題 #${issueId}？此操作無法復原。`)) return;
  card.classList.add('updating');
  fetch(`${BASE_URL}/${issueId}`, {
    method: 'DELETE',
    headers: { 'X-CSRF-TOKEN': csrfToken },
  })
  .then(r => r.json())
  .then(data => {
    if (data.success) {
      card.remove();
      updateColCounts();
      showToast('✓ 議題已刪除', 1800);
    } else {
      card.classList.remove('updating');
      showToast('❌ ' + (data.message || '刪除失敗'), 2500);
    }
  })
  .catch(() => {
    card.classList.remove('updating');
    showToast('❌ 連線錯誤', 2500);
  });
}

document.getElementById('save-issue-btn').addEventListener('click', function () {
  const issueId = document.getElementById('edit-issue-id').value;
  const payload = {
    title:          document.getElementById('edit-subject').value,
    status:         document.getElementById('edit-status').value,
    priority:       document.getElementById('edit-priority').value,
    assigned_to_id: document.getElementById('edit-assignee').value || null,
    parent_id:      document.getElementById('edit-parent-issue').value ? parseInt(document.getElementById('edit-parent-issue').value) : null,
    done_ratio:     parseInt(document.getElementById('edit-ratio').value),
    due_date:     (() => { const d=document.getElementById('edit-due-date-d').value, t=document.getElementById('edit-due-date-t').value; return d ? d+(t?' '+t:' 00:00:00') : null; })(),
    completed_on: (() => { const d=document.getElementById('edit-completed-on-d').value, t=document.getElementById('edit-completed-on-t').value; return d ? d+(t?' '+t:' 00:00:00') : null; })(),
  };

  this.disabled = true;
  showToast('儲存中…');

  fetch(`${BASE_URL}/${issueId}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
    body: JSON.stringify(payload),
  })
  .then(r => r.json())
  .then(data => {
    document.getElementById('save-issue-btn').disabled = false;
    if (data.success) {
      editModal.hide();
      showToast('✓ 已儲存', 2000);
      // 更新 card data
      editingCard.dataset.subject    = payload.title;
      editingCard.dataset.statusId   = payload.status;
      editingCard.dataset.priorityId = payload.priority;
      editingCard.dataset.assignedId = payload.assigned_to_id ?? '';
      editingCard.dataset.parentId   = payload.parent_id ?? '';
      editingCard.dataset.doneRatio    = payload.done_ratio;
      editingCard.dataset.dueDate     = payload.due_date     ? payload.due_date.replace(' ', 'T')     : '';
      editingCard.dataset.completedOn = payload.completed_on ? payload.completed_on.replace(' ', 'T') : '';
      // 同步卡片上的 inline 日期顯示
      const today = new Date().toISOString().slice(0,10);
      const ldWrap = editingCard.querySelector('.inline-date-wrap[data-field="due_date"]');
      if (ldWrap) {
        const v = payload.due_date;
        ldWrap.querySelector('.inline-date-label').textContent = v || '到期日';
        ldWrap.className = 'inline-date-wrap ' + (!v ? 'text-muted' : v < today ? 'text-danger fw-bold' : 'text-warning');
      }
      const coWrap = editingCard.querySelector('.inline-date-wrap[data-field="completed_on"]');
      if (coWrap) {
        const v = payload.completed_on;
        coWrap.querySelector('.inline-date-label').textContent = v || '完成日';
        coWrap.className = 'inline-date-wrap ' + (v ? 'text-success' : 'text-muted');
      }
      // 更新標題顯示
      const titleEl = editingCard.querySelector('a[href*="issues"]');
      if (titleEl) titleEl.textContent = payload.title.length > 60 ? payload.title.substring(0,60)+'…' : payload.title;
      // 進度條
      let bar = editingCard.querySelector('.progress-bar');
      if (payload.done_ratio > 0) {
        if (!bar) {
          editingCard.insertAdjacentHTML('beforeend',
            `<div class="progress mt-2" style="height:3px;"><div class="progress-bar bg-success" style="width:${payload.done_ratio}%"></div></div>`);
        } else { bar.style.width = payload.done_ratio + '%'; }
      } else if (bar) { bar.closest('.progress').remove(); }
      // 移欄
      if (payload.status !== editingCard.closest('.sortable-list').dataset.statusId) {
        const targetList = document.querySelector(`.sortable-list[data-status-id="${payload.status}"]`);
        if (targetList) { targetList.prepend(editingCard); updateColCounts(); }
      }
    } else { showToast('❌ 儲存失敗', 2500); }
  })
  .catch(() => {
    document.getElementById('save-issue-btn').disabled = false;
    showToast('❌ 連線錯誤', 2500);
  });
});

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

// ── 泳道篩選 ───────────────────────────────────────────────
const LANE_KEY = 'pb_kanban_lanes_v1';

function applyLaneFilter() {
  const checks  = [...document.querySelectorAll('.lane-check')];
  const visible = checks.filter(c => c.checked).map(c => c.value);
  document.querySelectorAll('.kanban-col').forEach(col => {
    const sid = col.querySelector('.sortable-list')?.dataset.statusId;
    col.style.display = visible.includes(sid) ? '' : 'none';
  });
  const label = document.getElementById('lane-filter-label');
  label.textContent = visible.length === checks.length ? '全部' : visible.length === 0 ? '無' : `${visible.length} / ${checks.length}`;
  localStorage.setItem(LANE_KEY, JSON.stringify(visible));
}

function setAllLanes(checked) {
  document.querySelectorAll('.lane-check').forEach(c => c.checked = checked);
  applyLaneFilter();
}

(function restoreLanes() {
  const saved = localStorage.getItem(LANE_KEY);
  if (!saved) return;
  try {
    const visible = JSON.parse(saved);
    document.querySelectorAll('.lane-check').forEach(c => { c.checked = visible.includes(c.value); });
    applyLaneFilter();
  } catch(e) {}
})();

// ── 卡片排序 ───────────────────────────────────────────────
const SORT_KEY = 'pb-kanban-sort';
const PRI_ORDER = { urgent: 4, high: 3, normal: 2, low: 1 };

function sortCards(val) {
  document.querySelectorAll('.sortable-list').forEach(list => {
    const cards = Array.from(list.querySelectorAll('.kanban-card'));
    if (!val) {
      cards.sort((a, b) => parseInt(a.dataset.issueId) - parseInt(b.dataset.issueId));
    } else {
      const lastUs = val.lastIndexOf('_');
      const field  = val.slice(0, lastUs);
      const dir    = val.slice(lastUs + 1);
      cards.sort((a, b) => {
        let av, bv;
        if (field === 'due') {
          av = a.dataset.dueDate || '9999-99-99';
          bv = b.dataset.dueDate || '9999-99-99';
        } else if (field === 'completed') {
          av = a.dataset.completedOn || '9999-99-99';
          bv = b.dataset.completedOn || '9999-99-99';
        } else if (field === 'subject') {
          return dir === 'asc'
            ? (a.dataset.subject||'').localeCompare(b.dataset.subject||'', 'zh-Hant')
            : (b.dataset.subject||'').localeCompare(a.dataset.subject||'', 'zh-Hant');
        } else if (field === 'created') {
          av = a.dataset.createdOn || '';
          bv = b.dataset.createdOn || '';
        } else if (field === 'updated') {
          av = a.dataset.updatedOn || '';
          bv = b.dataset.updatedOn || '';
        } else if (field === 'priority') {
          av = PRI_ORDER[a.dataset.priorityId] || 2;
          bv = PRI_ORDER[b.dataset.priorityId] || 2;
          if (av !== bv) return dir === 'asc' ? av - bv : bv - av;
          // same priority → sort by updated desc as tiebreaker
          return (b.dataset.updatedOn || '') > (a.dataset.updatedOn || '') ? 1 : -1;
        } else { return 0; }
        if (av < bv) return dir === 'asc' ? -1 : 1;
        if (av > bv) return dir === 'asc' ?  1 : -1;
        return 0;
      });
    }
    cards.forEach(c => list.appendChild(c));
  });
}

document.getElementById('sort-select').addEventListener('change', function() {
  sortCards(this.value);
  localStorage.setItem(SORT_KEY, this.value);
});

(function restoreSort() {
  const saved = localStorage.getItem(SORT_KEY);
  if (!saved) return;
  const el = document.getElementById('sort-select');
  if (el) { el.value = saved; sortCards(saved); }
})();

// ── 泳道欄位拖拉 ───────────────────────────────────────────
const LANE_ORDER_KEY = 'pb_kanban_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'; saveLaneOrder(); },
  });
}

function saveLaneOrder() {
  const order = [...document.querySelectorAll('#kanban-board .kanban-col')]
    .map(col => col.dataset.statusId).filter(Boolean);
  localStorage.setItem(LANE_ORDER_KEY, JSON.stringify(order));
}

(function restoreLaneOrder() {
  const saved = localStorage.getItem(LANE_ORDER_KEY);
  if (!saved) return;
  try {
    const order = JSON.parse(saved);
    const board = document.getElementById('kanban-board');
    if (!board) return;
    order.forEach(slug => {
      const col = board.querySelector(`.kanban-col[data-status-id="${slug}"]`);
      if (col) board.appendChild(col);
    });
  } catch(e) {}
})();

/* ── Inline 日期編輯（到期日 / 完成日）── */
const DONE_STATUSES = new Set(['completed','done_prod','done_test','resolved']);

function openInlineDate(wrap, e) {
  e.stopPropagation();
  const label  = wrap.querySelector('.inline-date-label');
  const editor = wrap.querySelector('.inline-date-editor');
  const dInput = wrap.querySelector('.inline-date-d');
  const tInput = wrap.querySelector('.inline-date-t');
  const field  = wrap.dataset.field;
  label.classList.add('d-none');
  editor.style.display = 'inline-flex';
  dInput.focus();

  async function save() {
    const card    = wrap.closest('.kanban-card');
    const issueId = card.dataset.issueId;
    const d = dInput.value;
    const t = tInput.value;
    const val     = d ? d + (t ? ' ' + t : ' 00:00:00') : null;
    const display = d ? d + (t ? ' ' + t : '') : null;
    try {
      await fetch(`${BASE_URL}/${issueId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
        body: JSON.stringify({ [field]: val }),
      });
    } catch {}
    if (field === 'due_date')     card.dataset.dueDate     = d ? d + 'T' + (t || '00:00') : '';
    if (field === 'completed_on') card.dataset.completedOn = d ? d + 'T' + (t || '00:00') : '';
    label.textContent = display || (field === 'due_date' ? '到期日' : '完成日');
    const today = new Date().toISOString().slice(0, 10);
    if (field === 'due_date') {
      wrap.className = 'inline-date-wrap ' + (!d ? 'text-muted' : d < today ? 'text-danger fw-bold' : 'text-warning');
    } else {
      wrap.className = 'inline-date-wrap ' + (d ? 'text-success' : 'text-muted');
    }
    editor.style.display = 'none';
    label.classList.remove('d-none');
  }

  // 只在焦點完全離開整個 editor 群組時才存檔
  function onFocusOut() {
    setTimeout(() => {
      if (!editor.contains(document.activeElement)) {
        dInput.removeEventListener('focusout', onFocusOut);
        tInput.removeEventListener('focusout', onFocusOut);
        save();
      }
    }, 150);
  }

  dInput.addEventListener('focusout', onFocusOut);
  tInput.addEventListener('focusout', onFocusOut);
}

/* 拖曳到完成欄時自動設完成日 */
function autoSetCompletedOn(card, newStatus) {
  if (!DONE_STATUSES.has(newStatus)) return;
  if (card.dataset.completedOn) return;
  const today = new Date().toISOString().slice(0,10);
  fetch(`${BASE_URL}/${card.dataset.issueId}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
    body: JSON.stringify({ completed_on: today }),
  }).then(() => {
    card.dataset.completedOn = today;
    const wrap  = card.querySelector('.inline-date-wrap[data-field="completed_on"]');
    if (wrap) {
      wrap.querySelector('.inline-date-label').textContent = today;
      wrap.className = 'inline-date-wrap text-success';
    }
  }).catch(() => {});
}

// ── Tom Select（母議題）─────────────────────────────────────────
let tsNewParentIssue, tsEditParentIssue;

document.getElementById('createIssueModal').addEventListener('shown.bs.modal', () => {
  if (!tsNewParentIssue) {
    tsNewParentIssue = new TomSelect('#new-parent-issue', {
      plugins: ['clear_button'], maxOptions: null, placeholder: '搜尋母議題…',
    });
  } else {
    tsNewParentIssue.setValue('', true);
  }
  fillContractSelect(document.getElementById('new-project').value);
});

function fillContractSelect(projectId, selectedId) {
  const sel = document.getElementById('new-contract');
  const contracts = projectContracts[projectId] || [];
  if (!contracts.length) {
    sel.innerHTML = '<option value="">── 無合約 ──</option>';
    return;
  }
  sel.innerHTML = contracts.map(c =>
    `<option value="${c.id}" ${selectedId == c.id ? 'selected' : ''}>${pbEsc(c.name)}</option>`
  ).join('');
}

document.getElementById('new-project').addEventListener('change', function () {
  fillContractSelect(this.value);
});

// 動態計算 kanban-wrapper 高度，確保水平 scrollbar 在 footer 上方可見
function fitKanbanHeight() {
  const wrapper = document.getElementById('kanban-board');
  if (!wrapper) return;
  const top    = wrapper.getBoundingClientRect().top;
  const footer = 60;
  const h      = window.innerHeight - top - footer;
  wrapper.style.height = Math.max(h, 200) + 'px';
  wrapper.querySelectorAll('.kanban-col').forEach(col => {
    col.style.maxHeight = Math.max(h, 200) + 'px';
  });
}
fitKanbanHeight();
window.addEventListener('resize', fitKanbanHeight);

// ── 一鍵填寫 ─────────────────────────────────────────────────
let pbqfDirty     = {};
let pbqfOriginals = {};

(function () {
  const modal = document.getElementById('pbQuickFillModal');
  if (!modal) return;

  modal.addEventListener('show.bs.modal', function () {
    pbqfDirty     = {};
    pbqfOriginals = {};
    document.getElementById('pbqf-loading').classList.remove('d-none');
    document.getElementById('pbqf-content').classList.add('d-none');
    document.getElementById('pbqf-empty').classList.add('d-none');
    pbqfUpdateCount();

    fetch('{{ route("project-board.quick-fill") }}', {
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
      .then(r => r.json())
      .then(data => {
        document.getElementById('pbqf-loading').classList.add('d-none');
        if (!data.length) {
          document.getElementById('pbqf-empty').classList.remove('d-none');
          return;
        }
        pbqfRender(data);
        document.getElementById('pbqf-content').classList.remove('d-none');
      })
      .catch(() => {
        document.getElementById('pbqf-loading').classList.add('d-none');
        document.getElementById('pbqf-empty').classList.remove('d-none');
      });
  });
})();

function pbqfRender(issues) {
  const tbody = document.getElementById('pbqf-tbody');
  tbody.innerHTML = '';
  issues.forEach(issue => {
    const tr = document.createElement('tr');
    tr.dataset.id = issue.id;

    // 記錄原始值，供儲存時比對
    pbqfOriginals[issue.id] = {
      start_date:   [(issue.start_date??'').split('T')[0], (issue.start_date??'').split('T')[1]??''],
      due_date:     [(issue.due_date??'').split('T')[0],   (issue.due_date??'').split('T')[1]??''],
      completed_on: [(issue.completed_on??'').split('T')[0], (issue.completed_on??'').split('T')[1]??''],
    };

    tr.innerHTML = `
      <td class="ps-3 text-muted" style="font-variant-numeric:tabular-nums;">${issue.id}</td>
      <td>
        <div class="fw-semibold text-truncate" style="max-width:300px;" title="${pbEsc(issue.title)}">${pbEsc(issue.title)}</div>
        <span class="text-muted small">${pbEsc(issue.project_name)}</span>
      </td>
      <td><span class="badge text-bg-${pbEsc(issue.status_color)}" style="font-size:.72rem;">${pbEsc(issue.status_label)}</span></td>
      <td>
        <div class="d-flex gap-1">
          <input type="date" class="form-control form-control-sm"
                 aria-label="開始時間 issue ${issue.id}"
                 value="${pbEsc((issue.start_date??'').split('T')[0])}"
                 data-id="${issue.id}" data-field="start_date" data-part="date">
          <input type="time" step="600" class="form-control form-control-sm"
                 aria-label="開始時間時間 issue ${issue.id}"
                 value="${pbEsc((issue.start_date??'').split('T')[1]??'')}"
                 data-id="${issue.id}" data-field="start_date" data-part="time" style="width:100px">
        </div>
      </td>
      <td>
        <div class="d-flex gap-1">
          <input type="date" class="form-control form-control-sm"
                 aria-label="到期日 issue ${issue.id}"
                 value="${pbEsc((issue.due_date??'').split('T')[0])}"
                 data-id="${issue.id}" data-field="due_date" data-part="date">
          <input type="time" step="600" class="form-control form-control-sm"
                 aria-label="到期日時間 issue ${issue.id}"
                 value="${pbEsc((issue.due_date??'').split('T')[1]??'')}"
                 data-id="${issue.id}" data-field="due_date" data-part="time" style="width:100px">
        </div>
      </td>
      <td>
        <div class="d-flex gap-1">
          <input type="date" class="form-control form-control-sm"
                 aria-label="完成日 issue ${issue.id}"
                 value="${pbEsc((issue.completed_on??'').split('T')[0])}"
                 data-id="${issue.id}" data-field="completed_on" data-part="date">
          <input type="time" step="600" class="form-control form-control-sm"
                 aria-label="完成日時間 issue ${issue.id}"
                 value="${pbEsc((issue.completed_on??'').split('T')[1]??'')}"
                 data-id="${issue.id}" data-field="completed_on" data-part="time" style="width:100px">
        </div>
      </td>
    `;
    tbody.appendChild(tr);
  });

  tbody.querySelectorAll('input[data-field]').forEach(input => {
    function markDirty() {
      input.closest('tr').classList.add('table-warning');
      pbqfUpdateCount();
    }
    input.addEventListener('input',  markDirty);
    input.addEventListener('change', markDirty);
  });
}

function pbqfUpdateCount() {
  const n   = document.querySelectorAll('#pbqf-tbody tr.table-warning').length;
  const txt = n ? `已修改 ${n} 筆議題` : '';
  const el  = document.getElementById('pbqf-changed-count');
  if (el) { el.textContent = txt; }
}

function pbqfSave() {
  // 直接從 DOM 讀取當前值並和原始值比對，不依賴 change 事件是否觸發
  const tbody   = document.getElementById('pbqf-tbody');
  const payload = [];

  tbody.querySelectorAll('tr[data-id]').forEach(row => {
    const id   = parseInt(row.dataset.id);
    const orig = pbqfOriginals[id] || {};
    const entry = { id };
    let changed = false;

    for (const field of ['start_date', 'due_date', 'completed_on']) {
      const dEl  = row.querySelector(`input[data-field="${field}"][data-part="date"]`);
      const tEl  = row.querySelector(`input[data-field="${field}"][data-part="time"]`);
      const dVal = dEl ? dEl.value : '';
      const tVal = tEl ? tEl.value : '';
      const [dOrig = '', tOrig = ''] = orig[field] || [];

      if (dVal !== dOrig || tVal !== tOrig) {
        changed = true;
        entry[field] = dVal ? dVal + (tVal ? ' ' + tVal : ' 00:00:00') : null;
      }
    }

    if (changed) { payload.push(entry); }
  });

  if (!payload.length) {
    alert('沒有修改任何議題');
    return;
  }

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

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

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