{{-- resources/views/projects/gantt/index.blade.php --}}
@extends('layouts.app')

@push('head')
<link rel="stylesheet" href="/js/frappe-gantt/frappe-gantt.css">
<style>
  #gantt-wrap { overflow-x: auto; }
  .gantt .bar-wrapper.bar-pending    .bar { fill: #6c757d !important; }
  .gantt .bar-wrapper.bar-in_progress .bar { fill: #0d6efd !important; }
  .gantt .bar-wrapper.bar-hold      .bar { fill: #ffc107 !important; }
  .gantt .bar-wrapper.bar-watching  .bar { fill: #0dcaf0 !important; }
  .gantt .bar-wrapper.bar-completed .bar { fill: #198754 !important; }
  .gantt .bar-wrapper.bar-rejected  .bar { fill: #dc3545 !important; }
  .gantt .bar-progress { fill: rgba(255,255,255,.4) !important; }
  .gantt-container { font-family: inherit; }
  .dark #gantt-wrap svg { background: #1e1e1e; }
  .dark .gantt .grid-background  { fill: #1e1e1e; }
  .dark .gantt .grid-header      { fill: #2d2d2d; stroke: #444; }
  .dark .gantt .grid-row         { fill: #1e1e1e; }
  .dark .gantt .grid-row:nth-child(even) { fill: #252525; }
  .dark .gantt .row-line         { stroke: #333; }
  .dark .gantt .tick             { stroke: #444; }
  .dark .gantt .today-highlight  { fill: rgba(13,110,253,.12); }
  .dark .gantt .lower-text,
  .dark .gantt .upper-text       { fill: #ccc; }
  .dark .gantt .bar-label        { fill: #fff; }
  .gantt-popup { max-width: 280px; font-size: .85rem; }
  .gantt-popup .popup-title      { font-weight: 600; margin-bottom: 4px; }
  .gantt-popup .popup-meta       { color: #888; font-size: .78rem; }
  .tracker-badge { font-size: .7rem; padding: 2px 6px; border-radius: 4px; }
  .legend-dot    { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
</style>
@endpush

@section('content')
@include('projects._nav')
<div class="container-fluid py-3 px-4">

  {{-- 工具列 --}}
  <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
    <h5 class="mb-0 fw-bold me-2"><i class="bi bi-bar-chart-steps me-2"></i>甘特圖</h5>

    {{-- 視圖切換 --}}
    <div class="btn-group btn-group-sm" role="group">
      <button class="btn btn-outline-secondary view-btn" data-mode="Day">日</button>
      <button class="btn btn-outline-secondary view-btn active" data-mode="Week">週</button>
      <button class="btn btn-outline-secondary view-btn" data-mode="Month">月</button>
    </div>

    {{-- 篩選 Tracker --}}
    <select id="filterTracker" class="form-select form-select-sm" style="width:auto">
      <option value="">全部類型</option>
      <option value="bug">缺陷</option>
      <option value="feature">功能</option>
      <option value="task">任務</option>
      <option value="support">支援</option>
    </select>

    {{-- 篩選 Status --}}
    <select id="filterStatus" class="form-select form-select-sm" style="width:auto">
      <option value="">全部狀態</option>
      <option value="pending">待處理</option>
      <option value="in_progress">處理中</option>
      <option value="hold">暫停</option>
      <option value="watching">觀察中</option>
      <option value="completed">已完成</option>
      <option value="rejected">已拒絕</option>
    </select>

    <span class="ms-auto text-muted small">
      顯示 <span id="showCount">{{ count($ganttTasks) }}</span> / {{ $totalCount }} 筆議題
      @if($noDateCount > 0)
        <span class="text-warning ms-1">
          <i class="bi bi-exclamation-triangle"></i> {{ $noDateCount }} 筆無日期未顯示
        </span>
      @endif
    </span>
  </div>

  {{-- 圖例 --}}
  <div class="d-flex flex-wrap gap-3 mb-3 small">
    @foreach([
      ['pending','#6c757d','待處理'],['in_progress','#0d6efd','處理中'],
      ['hold','#ffc107','暫停'],['watching','#0dcaf0','觀察中'],
      ['completed','#198754','已完成'],['rejected','#dc3545','已拒絕'],
    ] as [$s,$c,$l])
    <span class="d-flex align-items-center gap-1">
      <span class="legend-dot" style="background:{{ $c }}"></span>{{ $l }}
    </span>
    @endforeach
  </div>

  @if(count($ganttTasks) === 0)
    <div class="alert alert-info">
      <i class="bi bi-info-circle me-2"></i>
      此專案目前沒有設定起始/結束日期的議題。
      <a href="{{ route('projects.issues.index', $project) }}" class="alert-link">前往議題列表</a>設定日期後即可顯示。
    </div>
  @else
    <div id="gantt-wrap" class="card shadow-sm p-3">
      <svg id="gantt-chart"></svg>
    </div>
  @endif

</div>
@endsection

@push('scripts')
<script src="{{ asset('js/frappe-gantt/frappe-gantt.min.js') }}"></script>
<script>
(function() {
  const trackerLabel = { bug:'缺陷', feature:'功能', task:'任務', support:'支援' };
  const statusLabel  = { pending:'待處理', in_progress:'處理中', hold:'暫停', watching:'觀察中', completed:'已完成', rejected:'已拒絕' };
  const priorityLabel= { low:'低', normal:'一般', high:'高', urgent:'緊急' };

  const rawTasks = @json($ganttTasks);

  if (!rawTasks.length) return;

  let gantt;
  let currentMode = 'Week';
  let filterTracker = '';
  let filterStatus  = '';

  function buildTasks() {
    return rawTasks.filter(t =>
      (!filterTracker || t.tracker === filterTracker) &&
      (!filterStatus  || t.status  === filterStatus)
    );
  }

  function renderGantt(tasks) {
    document.getElementById('showCount').textContent = tasks.length;
    if (!tasks.length) {
      document.getElementById('gantt-wrap').innerHTML =
        '<div class="text-center text-muted py-5">篩選結果無議題</div>';
      gantt = null;
      return;
    }
    if (!document.getElementById('gantt-chart')) {
      document.getElementById('gantt-wrap').innerHTML = '<svg id="gantt-chart"></svg>';
    }
    gantt = new Gantt('#gantt-chart', tasks, {
      view_mode: currentMode,
      date_format: 'YYYY-MM-DD',
      popup_trigger: 'hover',
      language: 'zh',
      custom_popup_html: function(task) {
        return `<div class="gantt-popup p-2">
          <div class="popup-title">${task.name}</div>
          <div class="popup-meta mb-1">
            <span class="badge bg-secondary tracker-badge me-1">${trackerLabel[task.tracker] ?? task.tracker}</span>
            <span class="badge bg-light text-dark border tracker-badge">${statusLabel[task.status] ?? task.status}</span>
          </div>
          <div class="popup-meta">
            <i class="bi bi-calendar-range me-1"></i>${task._start?.toLocaleDateString('zh-TW') ?? ''} ─ ${task._end?.toLocaleDateString('zh-TW') ?? ''}
          </div>
          <div class="popup-meta">
            <i class="bi bi-person me-1"></i>${task.assignee}
            &nbsp;|&nbsp;進度 ${task.progress}%
          </div>
        </div>`;
      },
      on_click: function(task) {
        if (task.url) window.location.href = task.url;
      },
    });
  }

  function refresh() {
    renderGantt(buildTasks());
  }

  // 視圖切換
  document.querySelectorAll('.view-btn').forEach(btn => {
    btn.addEventListener('click', function() {
      document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
      this.classList.add('active');
      currentMode = this.dataset.mode;
      if (gantt) gantt.change_view_mode(currentMode);
    });
  });

  // 篩選
  document.getElementById('filterTracker')?.addEventListener('change', function() {
    filterTracker = this.value;
    refresh();
  });
  document.getElementById('filterStatus')?.addEventListener('change', function() {
    filterStatus = this.value;
    refresh();
  });

  refresh();
})();
</script>
@endpush