@extends('layouts.app')
@section('title', $project . ' · QA Dashboard')

@section('content')
@if (in_array($project, ['ERP', 'CRM', 'SMPP'], true))
  @include('partials.project-tabs', ['tabBase' => '/projects', 'tabActive' => $project, 'tabQuery' => $period ? '?period=' . $period : ''])
@endif
<section class="summary">
  <p><a href="/@if ($period)?period={{ $period }}@endif">&larr; All projects</a></p>
  <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">
    <h2 style="margin:0">{{ $project }} @if ($period)<small>· {{ $period }}</small>@endif</h2>
  </div>
  <div class="overall">
    <div class="chart-wrap"><canvas id="projChart"></canvas></div>
    <div class="big-number">
      <strong>{{ $breakdown['percent_complete'] }}%</strong>
      <span>complete ({{ $breakdown['done'] }}/{{ $breakdown['total'] }})</span>
      @if ($breakdown['at_risk'])<span class="badge risk">At risk</span>@endif
    </div>
    <x-status-chips :breakdown="$breakdown" />
  </div>
</section>

@if (!empty($types))
<section>
  <h2>By story type</h2>
  <div class="type-cards">
    @foreach ($types as $ty => $c)
      <x-type-card :ty="$ty" :c="$c"
        :href="'/stories?type=' . urlencode($ty) . '&project=' . urlencode($project) . ($period ? '&period=' . $period : '')" />
    @endforeach
  </div>
</section>
@endif

<section>
  <h2>Members on {{ $project }}</h2>
  @if (empty($members))<p class="empty">No assigned targets for this period.</p>@endif
  <table class="grid sortable" id="projectMembers">
    <thead><tr><th>Member</th><th>Progress</th><th>Done</th><th>Remaining</th><th>Total</th></tr></thead>
    <tbody>
      @foreach ($members as $email => $c)
      <tr class="{{ $c['at_risk'] ? 'at-risk' : '' }}" data-href="/members/{{ $email }}@if ($period)?period={{ $period }}@endif">
        <td><a href="/members/{{ $email }}@if ($period)?period={{ $period }}@endif"><x-who :email="$email" :names="$names" /></a></td>
        <td class="progress-cell"><x-progress-bar :counts="$c" /></td>
        <td>{{ $c['done'] }}</td><td>{{ $c['total'] - $c['done'] }}</td><td><strong>{{ $c['total'] }}</strong></td>
      </tr>
      @endforeach
    </tbody>
  </table>
  @if (!empty($members))<x-pager target="#projectMembers" />@endif
</section>

<section>
  <h2>Target stories</h2>
  @if (count($targets))
  <div class="toolbar">
    <input type="search" id="targetSearch" data-filter="#targetTable" placeholder="Search target stories…">
    <x-filter-select kind="status" target="#targetTable" :options="$statuses" allLabel="All statuses" />
    <x-filter-select kind="type" target="#targetTable" :options="$story_types" allLabel="All types" />
    <x-columns-menu target="#targetTable" />
    <x-hide-completed target="#targetTable" />
  </div>
  @endif
  <x-target-table :targets="$targets" :names="$names" :meta="$meta" id="targetTable"
    :highlightEpic="$project === \App\Support\Constants::AUTOMATION_MODULE ? config('qa.reported_issues_key') : null" />
  @if (count($targets))<x-pager target="#targetTable" />@endif
</section>
@endsection

@push('scripts')
<script>
  function groupByColor(statuses) {
    const map = new Map();
    (statuses || []).forEach(function (s) { const k = s.color || '#cbd5e1';
      if (!map.has(k)) map.set(k, { color: k, count: 0, names: [] });
      const g = map.get(k); g.count += s.count; g.names.push(s.name); });
    return Array.from(map.values()).sort((a, b) => b.count - a.count);
  }
  const g = groupByColor(@json($breakdown['statuses']));
  new Chart(document.getElementById('projChart'), { type: 'doughnut',
    data: { labels: g.map(x => x.names.join(', ')), datasets: [{ data: g.map(x => x.count),
      backgroundColor: g.map(x => x.color), borderColor: '#ffffff', borderWidth: 2 }] },
    options: { responsive: true, maintainAspectRatio: false, cutout: '62%',
      plugins: { legend: { display: false }, tooltip: { enabled: false } } } });
</script>
@endpush