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

@push('head')
<style>
  #calendar-wrap { min-height: 600px; }

  .fc .fc-toolbar-title        { font-size: 1.1rem; font-weight: 600; }
  .fc .fc-button               { font-size: .85rem; }
  .fc .fc-event                { cursor: pointer; font-size: .78rem; border: none; }
  .fc .fc-event .fc-event-title{ font-weight: 500; }
  .fc .fc-daygrid-event-dot    { display: none; }

  /* 暗黑模式 */
  [data-bs-theme="dark"] .fc-theme-standard .fc-scrollgrid { border-color: #444; }
  [data-bs-theme="dark"] .fc-theme-standard td,
  [data-bs-theme="dark"] .fc-theme-standard th  { border-color: #444; }
  [data-bs-theme="dark"] .fc .fc-col-header-cell-cushion { color: #ccc; }
  [data-bs-theme="dark"] .fc .fc-daygrid-day-number      { color: #ccc; }
  [data-bs-theme="dark"] .fc .fc-button-primary          { background: #374151; border-color: #4b5563; color: #e5e7eb; }
  [data-bs-theme="dark"] .fc .fc-button-primary:hover    { background: #4b5563; }
  [data-bs-theme="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active { background: #0d6efd; border-color: #0d6efd; }
  [data-bs-theme="dark"] .fc .fc-today-button            { opacity: .8; }
  [data-bs-theme="dark"] .fc .fc-toolbar-title           { color: #e5e7eb; }
  [data-bs-theme="dark"] .fc .fc-daygrid-day.fc-day-today { background: rgba(13,110,253,.1); }
  [data-bs-theme="dark"] .fc .fc-popover                 { background: #1f2937; border-color: #374151; color: #e5e7eb; }
  [data-bs-theme="dark"] .fc .fc-popover-title           { background: #374151; }

  /* 圖例 */
  .legend-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex-shrink: 0; }

  /* tooltip */
  #cal-tooltip {
    position: fixed; z-index: 9999; pointer-events: none;
    background: rgba(0,0,0,.85); color: #fff;
    padding: 8px 12px; border-radius: 6px;
    font-size: .8rem; max-width: 240px;
    display: none; line-height: 1.5;
  }
  .dark #cal-tooltip { background: rgba(30,30,30,.95); border: 1px solid #555; }
</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-calendar3 me-2"></i>行事曆</h5>

    {{-- 篩選 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>

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

  {{-- 圖例 --}}
  <div class="d-flex flex-wrap gap-3 mb-3 small">
    @foreach([
      ['#dc3545','缺陷'],['#0d6efd','功能'],['#198754','任務'],['#fd7e14','支援'],['#6c757d','其他'],
    ] as [$c,$l])
    <span class="d-flex align-items-center gap-1">
      <span class="legend-dot" style="background:{{ $c }}"></span>{{ $l }}
    </span>
    @endforeach
  </div>

  <div class="card shadow-sm p-3">
    <div id="calendar-wrap">
      <div id="calendar"></div>
    </div>
  </div>
</div>

{{-- tooltip --}}
<div id="cal-tooltip"></div>
@endsection

@push('scripts')
<script src="{{ asset('js/fullcalendar/index.global.min.js') }}"></script>
<script src="{{ asset('js/fullcalendar/zh-tw.global.min.js') }}"></script>
<script>
(function() {
  const allEvents = @json($events);

  const statusLabel = {
    pending:'待處理', in_progress:'處理中', hold:'暫停',
    watching:'觀察中', completed:'已完成', rejected:'已拒絕',
  };
  const priorityLabel = { low:'低', normal:'一般', high:'高', urgent:'緊急' };

  let filterTracker = '';
  let filterStatus  = '';

  function filteredEvents() {
    return allEvents.filter(e =>
      (!filterTracker || e.extendedProps.tracker === filterTracker) &&
      (!filterStatus  || e.extendedProps.status  === filterStatus)
    );
  }

  const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    locale: 'zh-tw',
    initialView: 'dayGridMonth',
    headerToolbar: {
      left:   'prev,next today',
      center: 'title',
      right:  'dayGridMonth,dayGridWeek',
    },
    buttonText: { today:'今天', month:'月', week:'週' },
    events: filteredEvents(),
    eventTimeFormat: false,
    displayEventTime: false,
    dayMaxEvents: 4,
    eventClick(info) {
      info.jsEvent.preventDefault();
      if (info.event.url) window.location.href = info.event.url;
    },
    eventMouseEnter(info) {
      const p = info.event.extendedProps;
      const start = info.event.startStr;
      const end   = info.event.end
        ? new Date(info.event.end.getTime() - 86400000).toISOString().slice(0,10)
        : null;
      const dateStr = end && end !== start ? `${start} ─ ${end}` : start;
      document.getElementById('cal-tooltip').innerHTML =
        `<div style="font-weight:600;margin-bottom:4px">${info.event.title}</div>
         <div>${p.trackerLabel} ／ ${statusLabel[p.status] ?? p.status}</div>
         <div><i class="bi bi-calendar-range"></i> ${dateStr}</div>
         <div><i class="bi bi-person"></i> ${p.assignee}</div>
         <div>優先度：${priorityLabel[p.priority] ?? p.priority} ／ 進度 ${p.done_ratio}%</div>`;
      document.getElementById('cal-tooltip').style.display = 'block';
    },
    eventMouseLeave() {
      document.getElementById('cal-tooltip').style.display = 'none';
    },
    eventDidMount(info) {
      // 已完成/已拒絕加刪除線
      if (['completed','rejected'].includes(info.event.extendedProps.status)) {
        info.el.style.opacity = '.55';
        info.el.style.textDecoration = 'line-through';
      }
    },
  });

  calendar.render();

  // 滑鼠跟隨 tooltip
  document.addEventListener('mousemove', e => {
    const tip = document.getElementById('cal-tooltip');
    if (tip.style.display === 'block') {
      tip.style.left = (e.clientX + 14) + 'px';
      tip.style.top  = (e.clientY + 14) + 'px';
    }
  });

  // 篩選
  document.getElementById('filterTracker').addEventListener('change', function() {
    filterTracker = this.value;
    calendar.setOption('events', filteredEvents());
  });
  document.getElementById('filterStatus').addEventListener('change', function() {
    filterStatus = this.value;
    calendar.setOption('events', filteredEvents());
  });
})();
</script>
@endpush