@extends('layouts.app')

@section('title', 'Redmine 看板')

@push('styles')
<style>
.kanban-wrapper {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  height: calc(100vh - 280px);
  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 - 280px);
}
.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-new       { background: linear-gradient(135deg, #0d6efd, #3d8bfd); color:#fff; }
.col-progress  { background: linear-gradient(135deg, #fd7e14, #ffa04d); color:#fff; }
.col-feedback  { background: linear-gradient(135deg, #6f42c1, #9261e0); color:#fff; }
.col-resolved  { background: linear-gradient(135deg, #198754, #28a96a); color:#fff; }
.col-closed    { 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; }
</style>
@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">
        <i class="bi bi-kanban-fill fs-4 text-danger"></i>
        <h4 class="mb-0 fw-bold">Redmine 看板</h4>
      </div>
      <div class="d-flex align-items-center gap-2 flex-wrap">
        <form method="GET" action="{{ route('my-redmine.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="">── 全部 ──</option>
              <option value="{{ $redmineUser['id'] }}" {{ (string)$selectedAssigneeId === (string)$redmineUser['id'] ? 'selected' : '' }}>
                ⭐ 我的議題
              </option>
              @foreach ($redmineUsers as $u)
                @if ($u['id'] != $redmineUser['id'])
                  <option value="{{ $u['id'] }}" {{ (string)$selectedAssigneeId === (string)$u['id'] ? 'selected' : '' }}>
                    {{ $u['firstname'] }} {{ $u['lastname'] }}
                  </option>
                @endif
              @endforeach
            </select>
          </div>
          {{-- 專案（可搜尋 combobox） --}}
          <div class="d-flex align-items-center gap-1">
            <label class="small text-muted mb-0 text-nowrap">專案：</label>
            <input type="hidden" name="project_id" id="filter-project-id"
                   value="{{ $selectedProject ? $selectedProject['id'] : '' }}">
            <div class="position-relative" style="min-width:220px;max-width:280px">
              <input type="text" id="filter-project-text" class="form-control form-control-sm"
                     placeholder="輸入專案名稱…"
                     value="{{ $selectedProject ? $selectedProject['name'] : '' }}"
                     autocomplete="off">
              <div id="filter-project-dropdown"
                   class="position-absolute start-0 bg-white border rounded shadow-sm d-none"
                   style="z-index:9999;max-height:240px;overflow-y:auto;width:100%;top:100%;margin-top:2px">
              </div>
            </div>
            {{-- 清除 --}}
            @if($selectedProject)
            <a href="{{ route('my-redmine.board', array_filter(['assignee_id' => request('assignee_id')])) }}"
               class="btn btn-sm btn-outline-secondary text-nowrap" title="清除專案篩選">
              <i class="bi bi-x"></i>
            </a>
            @endif
          </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="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:160px;" 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 ($openStatuses as $status)
              <div class="form-check mb-1">
                <input class="form-check-input lane-check" type="checkbox"
                  value="{{ $status['id'] }}" id="lane_{{ $status['id'] }}"
                  checked onchange="applyLaneFilter()">
                <label class="form-check-label small" for="lane_{{ $status['id'] }}">
                  {{ $status['name'] }}
                </label>
              </div>
              @endforeach
            </div>
          </div>
        </div>
      </div>
    </div>
    {{-- 第二行：統計（左）+ 新增按鈕（右） --}}
    @php
      $today         = now()->timezone('Asia/Taipei')->toDateString();
      $totalCount    = count($issues);
      $progressCount = collect($issues)->filter(fn($i) => preg_match('/處理|進行|doing|in.prog/iu', $i['status']['name'] ?? ''))->count();
      $resolvedCount = collect($issues)->filter(fn($i) => preg_match('/完成|解決|done|resolv/iu',   $i['status']['name'] ?? ''))->count();
      $todayCount    = collect($issues)->filter(function($i) use ($today) {
        if (!preg_match('/完成|解決|done|resolv/iu', $i['status']['name'] ?? '')) return false;
        return substr($i['updated_on'] ?? '', 0, 10) === $today;
      })->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" id="stat-total">
          <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;" id="stat-progress">
          <i class="bi bi-arrow-repeat me-1"></i>處理中 <span id="stat-progress-n">{{ $progressCount }}</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">{{ $todayCount }}</span>
        </span>
        <span class="badge rounded-pill bg-success fs-6 px-3" id="stat-resolved">
          <i class="bi bi-check-circle me-1"></i>全部已完成 <span id="stat-resolved-n">{{ $resolvedCount }}</span>
        </span>
      </div>
      <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-subject" maxlength="255" placeholder="請輸入議題主旨">
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">專案 <span class="text-danger">*</span></label>
            <input type="hidden" id="new-project">
            <div class="position-relative">
              <input type="text" id="new-project-text" class="form-control" autocomplete="off"
                     placeholder="輸入關鍵字搜尋專案…"
                     value="{{ $selectedProject ? $selectedProject['name'] : '' }}">
              <div id="new-project-dropdown"
                   class="position-absolute start-0 bg-white border rounded shadow-sm d-none"
                   style="z-index:9999;max-height:240px;overflow-y:auto;width:100%;top:100%;margin-top:2px">
              </div>
            </div>
            <div class="form-text" id="new-project-hint"></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-tracker">
                @foreach ($trackers as $t)
                  <option value="{{ $t['id'] }}">{{ $t['name'] }}</option>
                @endforeach
              </select>
            </div>
            <div class="col-6">
              <label class="form-label fw-semibold">狀態</label>
              <select class="form-select" id="new-status">
                @foreach ($openStatuses as $s)
                  <option value="{{ $s['id'] }}">{{ $s['name'] }}</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">
                @foreach ($priorities as $p)
                  <option value="{{ $p['id'] }}">{{ $p['name'] }}</option>
                @endforeach
              </select>
            </div>
            <div class="col-6">
              <label class="form-label fw-semibold">指派給</label>
              <select class="form-select" id="new-assignee">
                <option value="">── 未指派 ──</option>
                @foreach ($redmineUsers as $a)
                  <option value="{{ $a['id'] }}">{{ $a['firstname'] }} {{ $a['lastname'] }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">到期日</label>
            <input type="date" class="form-control" id="new-due-date">
          </div>
          <div class="mb-1">
            <label class="form-label fw-semibold">描述</label>
            <textarea class="form-control" id="new-description" rows="3" placeholder="選填"></textarea>
          </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 ($openStatuses as $s)
                  <option value="{{ $s['id'] }}">{{ $s['name'] }}</option>
                @endforeach
              </select>
            </div>
            <div class="col-6">
              <label class="form-label fw-semibold">優先權</label>
              <select class="form-select" id="edit-priority">
                @foreach ($priorities as $p)
                  <option value="{{ $p['id'] }}">{{ $p['name'] }}</option>
                @endforeach
              </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 ($redmineUsers as $a)
                <option value="{{ $a['id'] }}">{{ $a['firstname'] }} {{ $a['lastname'] }}</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="mb-1">
            <label class="form-label fw-semibold">到期日</label>
            <input type="date" class="form-control" id="edit-due-date">
          </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>

  {{-- 載入提示 --}}
  <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 (count($issues) === 0)
    <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 ($openStatuses as $statusIdx => $status)
        @php
          $colIssues = $issuesByStatus[$status['id']] ?? [];
          $count = count($colIssues);
          $sn = $status['name'];
          $colColor = match(true) {
            (bool) preg_match('/新|new|open/iu',          $sn) => 'col-new',
            (bool) preg_match('/處理|進行|doing|in.prog/iu', $sn) => 'col-progress',
            (bool) preg_match('/意見|回饋|feedback/iu',    $sn) => 'col-feedback',
            (bool) preg_match('/完成|解決|done|resolv/iu', $sn) => 'col-resolved',
            (bool) preg_match('/關閉|closed|reject|拒/iu', $sn) => 'col-closed',
            default => 'col-default-' . ($statusIdx % 5),
          };
        @endphp
        @php
          $statGroup = match($colColor) {
            'col-progress' => 'progress',
            'col-resolved' => 'resolved',
            default        => 'other',
          };
        @endphp
        <div class="kanban-col" data-stat-group="{{ $statGroup }}" data-status-id="{{ $status['id'] }}">
          <div class="kanban-col-header {{ $colColor }}">
            <span>{{ $status['name'] }}</span>
            <span class="badge bg-light text-dark">{{ $count }}</span>
          </div>
          <div class="kanban-cards sortable-list"
            data-status-id="{{ $status['id'] }}"
            data-status-name="{{ $status['name'] }}">
            @foreach ($colIssues as $issue)
              @php
                $isMine   = ($issue['assigned_to']['id'] ?? null) === $redmineUser['id'];
                $priClass = match(true) {
                  in_array($issue['priority']['name'] ?? '', ['Urgent','Immediate','緊急','立即']) => 'pri-urgent',
                  in_array($issue['priority']['name'] ?? '', ['High','高']) => 'pri-high',
                  in_array($issue['priority']['name'] ?? '', ['Low','低']) => 'pri-low',
                  default => 'pri-normal',
                };
                $overdue = !empty($issue['due_date']) && \Carbon\Carbon::parse($issue['due_date'])->isPast();
              @endphp
              @php
                $closedOn = !empty($issue['closed_on']) ? substr($issue['closed_on'], 0, 10) : null;
              @endphp
              <div class="kanban-card {{ $priClass }} {{ $isMine ? 'is-mine' : '' }}"
                data-issue-id="{{ $issue['id'] }}"
                data-author-id="{{ $issue['author']['id'] ?? 0 }}"
                data-assigned-id="{{ $issue['assigned_to']['id'] ?? 0 }}"
                data-updated-on="{{ substr($issue['updated_on'] ?? '', 0, 10) }}"
                data-created-on="{{ substr($issue['created_on'] ?? '', 0, 10) }}"
                data-closed-on="{{ $closedOn ?? '' }}"
                data-subject="{{ $issue['subject'] }}"
                data-status-id="{{ $issue['status']['id'] ?? '' }}"
                data-priority-id="{{ $issue['priority']['id'] ?? '' }}"
                data-done-ratio="{{ $issue['done_ratio'] ?? 0 }}"
                data-due-date="{{ $issue['due_date'] ?? '' }}"
                data-assigned-name="{{ $issue['assigned_to']['name'] ?? '' }}">

                {{-- 卡片頂部 --}}
                <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['id'] }}
                    @if (!empty($issue['project']['name']))
                      <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">
                    @if (!empty($issue['tracker']['name']))
                      <span class="badge bg-light text-secondary" style="font-size:.68rem;">{{ $issue['tracker']['name'] }}</span>
                    @endif
                    <a href="{{ route('my-redmine.issue', $issue['id']) }}"
                      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>
                    @if (($issue['author']['id'] ?? null) === $redmineUser['id'])
                    <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>

                {{-- 主旨 --}}
                <a href="{{ route('my-redmine.issue', $issue['id']) }}"
                  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['subject'], 60) }}
                </a>

                {{-- 指派人（左）+ 日期（右下）--}}
                <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['assigned_to']['name'] ?? '未指派' }}
                  </span>
                  <div class="text-end" style="line-height:1.65;">
                    <div class="text-muted">
                      <i class="bi bi-calendar-plus me-1"></i>{{ substr($issue['created_on'] ?? '', 0, 10) ?: '—' }}
                    </div>
                    <div class="{{ $overdue ? 'text-danger fw-bold' : (!empty($issue['due_date']) ? 'text-warning' : 'text-muted') }}">
                      <i class="bi bi-calendar2-event me-1"></i>{{ $issue['due_date'] ?? '—' }}
                    </div>
                    @if($closedOn)
                    <div class="text-success">
                      <i class="bi bi-calendar-check me-1"></i>{{ $closedOn }}
                    </div>
                    @endif
                  </div>
                </div>

                {{-- 工時 --}}
                @php
                  $estimated = $issue['estimated_hours'] ?? null;
                  $spent     = $issue['spent_hours'] ?? null;
                @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>
@endsection

@push('scripts')
<script src="/vendor/sortablejs/Sortable.min.js"></script>
<script>
const myRedmineUserId = {{ $redmineUser['id'] }};
const updateUrl = id => `/my-redmine/issues/${id}/status`;
const csrfToken = '{{ csrf_token() }}';

// ── 專案 Combobox 元件 ─────────────────────────────────────
// 資料來源：使用者所有 membership 專案
const ALL_USER_PROJECTS = @json($userProjects);

/**
 * 建立可搜尋的專案 Combobox
 * @param {string} textId   - 顯示文字 input 的 ID
 * @param {string} hiddenId - 儲存 project_id 的 hidden input 的 ID
 * @param {string} dropId   - dropdown div 的 ID
 * @param {function|null} onSelect - 選取後的 callback(id, name)
 */
function initProjectCombobox(textId, hiddenId, dropId, onSelect) {
  const textEl   = document.getElementById(textId);
  const hiddenEl = document.getElementById(hiddenId);
  const dropEl   = document.getElementById(dropId);
  if (!textEl || !hiddenEl || !dropEl) return;

  let highlighted = -1;

  const MAX_SHOW = 100;

  function renderDropdown(list) {
    highlighted = -1;
    const shown   = list.slice(0, MAX_SHOW);
    const overflow = list.length - shown.length;

    if (list.length === 0) {
      dropEl.innerHTML = '<div class="px-3 py-2 text-muted small">無符合結果</div>';
    } else {
      let html = shown.map(p =>
        `<div class="px-3 py-1 small combobox-item" style="cursor:pointer" data-id="${p.id}" data-name="${p.name.replace(/"/g,'&quot;')}">${p.name}</div>`
      ).join('');
      if (overflow > 0) {
        html += `<div class="px-3 py-1 text-muted small border-top">還有 ${overflow} 個，請輸入關鍵字縮小範圍</div>`;
      }
      dropEl.innerHTML = html;
      dropEl.querySelectorAll('.combobox-item').forEach(item => {
        item.addEventListener('mousedown', e => {
          e.preventDefault();
          selectProject(item.dataset.id, item.dataset.name);
        });
        item.addEventListener('mouseenter', function() {
          dropEl.querySelectorAll('.combobox-item').forEach(el => el.classList.remove('bg-primary','text-white'));
          this.classList.add('bg-primary','text-white');
        });
        item.addEventListener('mouseleave', function() {
          this.classList.remove('bg-primary','text-white');
        });
      });
    }
    dropEl.classList.remove('d-none');
  }

  function filterList(q) {
    const lower = q.toLowerCase();
    return ALL_USER_PROJECTS.filter(p => p.name.toLowerCase().includes(lower));
  }

  function selectProject(id, name) {
    textEl.value   = name;
    hiddenEl.value = id;
    dropEl.classList.add('d-none');
    highlighted = -1;
    if (onSelect) onSelect(id, name);
  }

  function clearProject() {
    hiddenEl.value = '';
  }

  // 輸入時過濾
  textEl.addEventListener('input', function () {
    const q = this.value.trim();
    if (q === '') {
      clearProject();
      renderDropdown(ALL_USER_PROJECTS);
    } else {
      renderDropdown(filterList(q));
    }
  });

  // 聚焦時展開
  textEl.addEventListener('focus', function () {
    const q = this.value.trim();
    renderDropdown(q ? filterList(q) : ALL_USER_PROJECTS);
  });

  // 失焦時收起（延遲讓 mousedown 先觸發）
  textEl.addEventListener('blur', function () {
    setTimeout(() => dropEl.classList.add('d-none'), 180);
    // 若文字與 hidden value 不對應（使用者只打了文字但沒選），清除 id
    if (!hiddenEl.value) textEl.value = '';
  });

  // 鍵盤導航
  textEl.addEventListener('keydown', function(e) {
    const items = dropEl.querySelectorAll('.combobox-item');
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      highlighted = Math.min(highlighted + 1, items.length - 1);
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      highlighted = Math.max(highlighted - 1, 0);
    } else if (e.key === 'Enter') {
      e.preventDefault();
      if (highlighted >= 0 && items[highlighted]) {
        const item = items[highlighted];
        selectProject(item.dataset.id, item.dataset.name);
      }
      return;
    } else if (e.key === 'Escape') {
      dropEl.classList.add('d-none');
      return;
    } else {
      return;
    }
    items.forEach((el, i) => {
      el.classList.toggle('bg-primary', i === highlighted);
      el.classList.toggle('text-white', i === highlighted);
      if (i === highlighted) el.scrollIntoView({ block: 'nearest' });
    });
  });
}

// ── 初始化兩個 combobox ────────────────────────────────────

// 1. 篩選列的專案 combobox（送出 form 前寫入 hidden）
initProjectCombobox('filter-project-text', 'filter-project-id', 'filter-project-dropdown', function(id, name) {
  // 選取後自動送出表單
  document.getElementById('filter-form').submit();
});
// 如果目前有選取的專案，也要讓 hidden 欄位有值
(function(){
  const hid = document.getElementById('filter-project-id');
  const txt = document.getElementById('filter-project-text');
  if (txt && txt.value && hid && !hid.value) {
    // 不需要，初始值由 blade 設定
  }
})();

// 2. 新增議題 modal 的專案 combobox
initProjectCombobox('new-project-text', 'new-project', 'new-project-dropdown', function(id, name) {
  // 清除提示
  document.getElementById('new-project-hint').textContent = '已選：' + name;
  document.getElementById('new-project-hint').className = 'form-text text-success';
});

// modal 開啟時預設選取目前篩選的專案
document.getElementById('createIssueModal').addEventListener('show.bs.modal', function () {
  const currentId   = '{{ $selectedProject ? $selectedProject["id"] : "" }}';
  const currentName = '{{ $selectedProject ? addslashes($selectedProject["name"]) : "" }}';
  const hid = document.getElementById('new-project');
  const txt = document.getElementById('new-project-text');
  if (!hid.value && currentId) {
    hid.value = currentId;
    txt.value = currentName;
    document.getElementById('new-project-hint').textContent = '已選：' + currentName;
    document.getElementById('new-project-hint').className = 'form-text text-success';
  }
});

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

      if (newStatus === oldStatus) return;

      // 更新欄位計數
      updateColCounts();

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

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


// ── 更新欄位計數 + 統計列 ───────────────────────────────────
const todayStr = new Date().toLocaleDateString('sv-SE', { timeZone: 'Asia/Taipei' }); // YYYY-MM-DD

function updateColCounts() {
  let total = 0, progress = 0, resolved = 0, todayDone = 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;
      todayDone += cards.filter(c => c.dataset.updatedOn === todayStr).length;
    }
  });

  document.getElementById('stat-total-n').textContent    = total;
  document.getElementById('stat-progress-n').textContent = progress;
  document.getElementById('stat-resolved-n').textContent = resolved;
  document.getElementById('stat-today-n').textContent    = todayDone;
}

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

  // 驗證主旨
  if (!subject) {
    document.getElementById('new-subject').focus();
    document.getElementById('new-subject').classList.add('is-invalid');
    return;
  }
  document.getElementById('new-subject').classList.remove('is-invalid');

  // 驗證專案
  if (!projectId) {
    projectTxt.classList.add('is-invalid');
    projectTxt.focus();
    document.getElementById('new-project-hint').textContent = '請選擇一個專案';
    document.getElementById('new-project-hint').className = 'form-text text-danger';
    return;
  }
  projectTxt.classList.remove('is-invalid');

  const btn = this;
  const payload = {
    project_id:     projectId,
    subject,
    tracker_id:     parseInt(document.getElementById('new-tracker').value) || null,
    status_id:      parseInt(document.getElementById('new-status').value) || null,
    priority_id:    parseInt(document.getElementById('new-priority').value) || null,
    assigned_to_id: document.getElementById('new-assignee').value ? parseInt(document.getElementById('new-assignee').value) : null,
    due_date:       document.getElementById('new-due-date').value || null,
    description:    document.getElementById('new-description').value || null,
  };

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

  fetch('/my-redmine/issues', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
    body: JSON.stringify(payload),
  })
  .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();
      document.getElementById('new-subject').value = '';
      document.getElementById('new-description').value = '';
      document.getElementById('new-due-date').value = '';
      document.getElementById('new-project').value = '';
      document.getElementById('new-project-text').value = '';
      document.getElementById('new-project-hint').textContent = '';
      document.getElementById('new-project-hint').className = 'form-text';
      showToast('✓ 議題已建立，重新整理中…', 1500);
      setTimeout(() => location.reload(), 1500);
    } else {
      const msg = (data.errors && data.errors.length) ? data.errors.join('、') : '建立失敗';
      showToast('❌ ' + msg, 3500);
    }
  })
  .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-due-date').value      = card.dataset.dueDate || '';
  editModal.show();
}

function deleteIssue(issueId, card) {
  if (!confirm(`確定要刪除議題 #${issueId}？此操作無法復原。`)) return;
  card.classList.add('updating');
  fetch(`/my-redmine/issues/${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 = {
    subject:        document.getElementById('edit-subject').value,
    status_id:      parseInt(document.getElementById('edit-status').value),
    priority_id:    parseInt(document.getElementById('edit-priority').value),
    assigned_to_id: document.getElementById('edit-assignee').value ? parseInt(document.getElementById('edit-assignee').value) : null,
    done_ratio:     parseInt(document.getElementById('edit-ratio').value),
    due_date:       document.getElementById('edit-due-date').value || null,
  };

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

  fetch(`/my-redmine/issues/${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);
      // 更新卡片 data 屬性
      editingCard.dataset.subject    = payload.subject;
      editingCard.dataset.statusId   = payload.status_id;
      editingCard.dataset.priorityId = payload.priority_id;
      editingCard.dataset.assignedId = payload.assigned_to_id ?? 0;
      editingCard.dataset.doneRatio  = payload.done_ratio;
      editingCard.dataset.dueDate    = payload.due_date ?? '';
      // 更新卡片顯示：主旨
      const subjectEl = editingCard.querySelector('a[href*="issues"]');
      if (subjectEl) subjectEl.textContent = payload.subject.length > 60
        ? payload.subject.substring(0, 60) + '…' : payload.subject;
      // 更新完成度進度條
      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();
      }
      // 若狀態改變，將卡片移到對應欄
      const newStatusId = String(payload.status_id);
      const currentCol  = editingCard.closest('.sortable-list').dataset.statusId;
      if (newStatusId !== currentCol) {
        const targetList = document.querySelector(`.sortable-list[data-status-id="${newStatusId}"]`);
        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 = '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 total = checks.length;
  const label = document.getElementById('lane-filter-label');
  label.textContent = visible.length === total ? '全部'
    : visible.length === 0 ? '無'
    : `${visible.length} / ${total}`;

  // 存 localStorage
  localStorage.setItem(LANE_KEY, JSON.stringify(visible));
}

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

// 頁面載入時從 localStorage 還原
(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 = 'kanban-sort';

function sortCards(val) {
  document.querySelectorAll('.sortable-list').forEach(list => {
    const cards = Array.from(list.querySelectorAll('.kanban-card'));
    if (!val) {
      // 預設：按 issue id 升冪
      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);  // asc | desc
      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 === '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 = parseInt(a.dataset.priorityId) || 999;
          bv = parseInt(b.dataset.priorityId) || 999;
          return dir === 'asc' ? av - bv : bv - av;
        } 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 = 'kanban_lane_order_v3';
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(statusId => {
      const col = board.querySelector(`.kanban-col[data-status-id="${statusId}"]`);
      if (col) board.appendChild(col);
    });
  } catch(e) {}
})();

// 動態計算 kanban-wrapper 高度，確保水平 scrollbar 在 footer 上方可見
function fitKanbanHeight() {
  const wrapper = document.getElementById('kanban-board');
  if (!wrapper) return;
  const top    = wrapper.getBoundingClientRect().top;
  const footer = 60; // body padding-bottom，留給 fixed footer
  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);
</script>
@endpush