@extends('layouts.app')

@section('title', $project['name'] . ' — Redmine 專案')

@section('content')
<div class="container py-4">

  {{-- 麵包屑 --}}
  <nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="{{ route('projects.list') }}">專案管理</a></li>
      <li class="breadcrumb-item active">{{ $project['name'] }}</li>
    </ol>
  </nav>

  {{-- 專案標題 --}}
  <div class="d-flex align-items-center gap-3 mb-4">
    <div class="rounded-3 p-3 d-flex align-items-center justify-content-center"
      style="background: linear-gradient(135deg, #ff6b6b, #ee5a24); width:52px; height:52px;">
      <i class="bi bi-folder2-open text-white fs-4"></i>
    </div>
    <div>
      <h2 class="mb-0 fw-bold">{{ $project['name'] }}</h2>
      @if (!empty($project['description']))
        <p class="text-muted mb-0 small">{{ $project['description'] }}</p>
      @endif
    </div>
  </div>

  {{-- 統計列 --}}
  @php
    $myIssues  = collect($issues)->where('assigned_to.id', $redmineUser['id']);
    $highPri   = collect($issues)->whereIn('priority.name', ['Urgent', 'Immediate', '緊急', '立即']);
  @endphp
  <div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
      <div class="card border-0 shadow-sm text-center py-3">
        <div class="fs-2 fw-bold text-danger">{{ count($issues) }}</div>
        <div class="text-muted small">開放議題</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card border-0 shadow-sm text-center py-3">
        <div class="fs-2 fw-bold text-primary">{{ $myIssues->count() }}</div>
        <div class="text-muted small">指派給我</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card border-0 shadow-sm text-center py-3">
        <div class="fs-2 fw-bold text-warning">{{ $highPri->count() }}</div>
        <div class="text-muted small">高優先</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card border-0 shadow-sm text-center py-3">
        <div class="fs-2 fw-bold text-success">
          {{ collect($issues)->avg('done_ratio') ? number_format(collect($issues)->avg('done_ratio'), 0) : 0 }}%
        </div>
        <div class="text-muted small">平均完成度</div>
      </div>
    </div>
  </div>

  {{-- 篩選 --}}
  <div class="d-flex gap-2 mb-3 flex-wrap">
    <button class="btn btn-sm btn-outline-secondary active" id="filter-all"
      onclick="filterIssues('all')">全部（{{ count($issues) }}）</button>
    <button class="btn btn-sm btn-outline-primary" id="filter-mine"
      onclick="filterIssues('mine')">指派給我（{{ $myIssues->count() }}）</button>
  </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="card border-0 shadow-sm">
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th style="width:70px">#</th>
              <th>主旨</th>
              <th style="width:100px">狀態</th>
              <th style="width:100px">優先權</th>
              <th style="width:130px">指派給</th>
              <th style="width:80px">完成度</th>
              <th style="width:110px">更新日期</th>
            </tr>
          </thead>
          <tbody id="issues-table">
            @foreach ($issues as $issue)
              @php
                $isMine = ($issue['assigned_to']['id'] ?? null) === $redmineUser['id'];
                $priColor = match($issue['priority']['name'] ?? '') {
                  'Urgent', '緊急'     => 'danger',
                  'Immediate', '立即'  => 'dark',
                  'High', '高'         => 'warning',
                  'Low', '低'          => 'secondary',
                  default              => 'info',
                };
              @endphp
              <tr class="issue-row {{ $isMine ? 'mine' : '' }}">
                <td class="text-muted small">#{{ $issue['id'] }}</td>
                <td>
                  <a href="{{ route('my-redmine.issue', $issue['id']) }}"
                    class="text-decoration-none fw-semibold text-dark stretched-link-inner">
                    {{ $issue['subject'] }}
                  </a>
                  @if (!empty($issue['tracker']['name']))
                    <span class="badge bg-light text-secondary ms-1">{{ $issue['tracker']['name'] }}</span>
                  @endif
                  @if ($isMine)
                    <span class="badge bg-primary-subtle text-primary ms-1">我</span>
                  @endif
                </td>
                <td><span class="badge bg-success-subtle text-success">{{ $issue['status']['name'] ?? '-' }}</span></td>
                <td><span class="badge bg-{{ $priColor }}-subtle text-{{ $priColor }}">{{ $issue['priority']['name'] ?? '-' }}</span></td>
                <td class="small text-muted">{{ $issue['assigned_to']['name'] ?? '未指派' }}</td>
                <td>
                  <div class="progress" style="height:6px;">
                    <div class="progress-bar bg-success" style="width:{{ $issue['done_ratio'] ?? 0 }}%"></div>
                  </div>
                  <div class="text-muted small mt-1">{{ $issue['done_ratio'] ?? 0 }}%</div>
                </td>
                <td class="small text-muted">
                  {{ \Carbon\Carbon::parse($issue['updated_on'])->format('Y-m-d') }}
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  @endif

</div>

@push('scripts')
<script>
function filterIssues(type) {
  document.querySelectorAll('#filter-all, #filter-mine').forEach(b => b.classList.remove('active'));
  document.getElementById('filter-' + type).classList.add('active');

  document.querySelectorAll('.issue-row').forEach(row => {
    if (type === 'mine') {
      row.style.display = row.classList.contains('mine') ? '' : 'none';
    } else {
      row.style.display = '';
    }
  });
}
</script>
@endpush
@endsection