@extends('layouts.app')
@section('title', '藍圖 — ' . $project->name)

@push('styles')
<style>
.rm5-issue-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}
.rm5-issue-table thead th {
  background: #e4e4e4;
  border: 1px solid #d0d0d0;
  padding: 6px 10px;
  font-weight: 600;
  white-space: nowrap;
  color: #333;
}
.rm5-issue-table tbody td {
  border: 1px solid #e8e8e8;
  padding: 6px 10px;
  vertical-align: middle;
}
.rm5-issue-table tbody tr:nth-child(even) td {
  background: #fafafa;
}
.rm5-issue-table tbody tr:hover td {
  background: #fffde7;
}
.rm5-title-link {
  color: #2c5f9a;
  text-decoration: none;
  font-weight: 500;
}
.rm5-title-link:hover { text-decoration: underline; }
</style>
@endpush

@section('content')
@include('projects._nav', ['project' => $project])

<div class="container-fluid px-4 py-4">

  @if (session('success'))
    <div class="alert alert-success alert-dismissible fade show">
      {{ session('success') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  @endif

  <div class="d-flex justify-content-between align-items-center mb-4">
    <h5 class="mb-0 fw-bold"><i class="bi bi-map me-2 text-primary"></i>藍圖（Roadmap）</h5>
    @can('manageRoadmap', $project)
    <a href="{{ route('projects.versions.create', $project) }}" class="btn btn-success btn-sm">
      <i class="bi bi-plus-lg me-1"></i>新增版本
    </a>
    @endcan
  </div>

  {{-- 版本列表 --}}
  @forelse ($versions as $v)
    @php
      $total    = $v->issues_count;
      $open     = $v->open_count;
      $done     = $total - $open;
      $pct      = $total > 0 ? round($done / $total * 100) : 0;
      $issues   = $v->issues()->with('assignee')->orderBy('updated_at', 'desc')->get();
    @endphp
    <div class="card mb-4 shadow-sm">
      <div class="card-header d-flex align-items-center gap-3 py-2">
        <span class="fw-bold fs-6">{{ $v->name }}</span>
        <span class="badge bg-{{ $v->statusColor() }}">{{ $v->statusLabel() }}</span>
        @if ($v->due_date)
          <span class="text-muted small"><i class="bi bi-calendar3 me-1"></i>{{ $v->due_date->format('Y-m-d') }}</span>
        @endif
        @if ($v->members->isNotEmpty())
          <span class="text-muted small" title="{{ $v->members->pluck('name')->join('、') }}">
            <i class="bi bi-people me-1"></i>{{ $v->members->count() }} 位成員
          </span>
        @endif
        <div class="ms-auto d-flex gap-2">
          @can('manageRoadmap', $project)
          <a href="{{ route('projects.versions.edit', [$project, $v]) }}" class="btn btn-sm btn-outline-secondary py-0 px-2">編輯</a>
          <form action="{{ route('projects.versions.destroy', [$project, $v]) }}" method="POST" class="d-inline"
                onsubmit="return confirm('確定刪除版本「{{ $v->name }}」？版本內的議題將設為無版本。')">
            @csrf @method('DELETE')
            <button class="btn btn-sm btn-outline-danger py-0 px-2">刪除</button>
          </form>
          @endcan
        </div>
      </div>
      <div class="card-body">
        @if ($v->description)
          <p class="text-muted small mb-3">{{ $v->description }}</p>
        @endif

        {{-- 進度條 --}}
        <div class="d-flex align-items-center gap-3 mb-3">
          <div class="progress flex-grow-1" style="height:10px;">
            <div class="progress-bar bg-success" style="width:{{ $pct }}%"></div>
          </div>
          <span class="text-muted small text-nowrap">{{ $pct }}%（{{ $done }}/{{ $total }}）</span>
          <span class="badge bg-danger small">{{ $open }} 待完成</span>
        </div>

        {{-- 議題清單 --}}
        @if ($issues->isEmpty())
          <p class="text-muted small mb-0">此版本尚無議題。</p>
        @else
          @php
            $allStatusOpts   = \App\Models\IssueStatus::asOptions();
            $allTrackerOpts  = \App\Models\IssueTracker::asOptions();
            $allPriorityOpts = \App\Models\IssuePriority::asOptions();
          @endphp
          <div class="table-responsive">
            <table class="rm5-issue-table">
              <thead>
                <tr>
                  <th style="width:70px;">#</th>
                  <th style="width:75px;">類型</th>
                  <th style="width:90px;">狀態</th>
                  <th>標題</th>
                  <th style="width:60px;">優先度</th>
                  <th style="width:100px;">指派給</th>
                  <th style="width:90px;">截止日</th>
                  <th style="width:70px;">完成度</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($issues as $issue)
                @php
                  $sData = $allStatusOpts[$issue->status]     ?? null;
                  $tData = $allTrackerOpts[$issue->tracker]   ?? null;
                  $pData = $allPriorityOpts[$issue->priority] ?? null;
                @endphp
                <tr>
                  <td style="font-size:12px;color:#888;white-space:nowrap;">
                    <a href="{{ route('projects.issues.show', [$project, $issue]) }}" style="color:#888;text-decoration:none;">#{{ $issue->redmine_id }}</a>
                  </td>
                  <td><span class="badge bg-{{ $tData['color'] ?? 'secondary' }}">{{ $tData['label'] ?? $issue->tracker }}</span></td>
                  <td><span class="badge bg-{{ $sData['color'] ?? 'secondary' }}">{{ $sData['label'] ?? $issue->status }}</span></td>
                  <td>
                    <a href="{{ route('projects.issues.show', [$project, $issue]) }}" class="rm5-title-link">{{ $issue->title }}</a>
                  </td>
                  <td><span class="badge bg-{{ $pData['color'] ?? 'secondary' }}">{{ $pData['label'] ?? $issue->priority }}</span></td>
                  <td style="font-size:12px;color:#555;">{{ $issue->assignee?->name ?? '—' }}</td>
                  <td style="font-size:12px;color:#888;white-space:nowrap;">{{ $issue->due_date?->format('Y-m-d') ?? '—' }}</td>
                  <td>
                    @if(($issue->done_ratio ?? 0) > 0)
                      <div style="background:#ddd;border-radius:3px;height:6px;overflow:hidden;" title="{{ $issue->done_ratio }}%">
                        <div style="background:#3498db;width:{{ $issue->done_ratio }}%;height:100%;"></div>
                      </div>
                      <small style="font-size:11px;color:#888;">{{ $issue->done_ratio }}%</small>
                    @else
                      <span style="color:#bbb;">—</span>
                    @endif
                  </td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        @endif
      </div>
    </div>
  @empty
    <div class="text-center text-muted py-5">
      <i class="bi bi-map fs-1 d-block mb-3 opacity-25"></i>
      尚未建立任何版本。
      @can('manageRoadmap', $project)
        <a href="{{ route('projects.versions.create', $project) }}" class="d-block mt-2">建立第一個版本</a>
      @endcan
    </div>
  @endforelse

  {{-- 未指派版本的議題 --}}
  @if ($unversioned->isNotEmpty())
    <div class="card border-secondary shadow-sm mt-2">
      <div class="card-header text-muted py-2">
        <i class="bi bi-question-circle me-1"></i>未指派版本的開放議題
        <span class="badge bg-secondary ms-1">{{ $unversioned->count() }}</span>
      </div>
      <div class="card-body">
        <ul class="list-unstyled mb-0">
          @foreach ($unversioned as $issue)
            <li class="mb-1 small">
              <a href="{{ route('projects.issues.show', [$project, $issue]) }}" class="text-decoration-none text-dark">
                {{ $issue->title }}
              </a>
            </li>
          @endforeach
        </ul>
      </div>
    </div>
  @endif

</div>
@endsection