@extends('layouts.app')
@section('title', 'Training Tracking')
@section('content')

  @include('partials.flash')

  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-stack-lg">
    <div>
      <a href="{{ route('admin.courses.builder', $course) }}" class="inline-flex items-center gap-1 text-label-md font-label-md text-outline hover:text-primary mb-1">
        <span class="material-symbols-outlined text-[18px]">arrow_back</span> Builder
      </a>
      <h3 class="text-headline-md font-headline-md text-on-surface">{{ $course->title }}</h3>
      <p class="text-label-md font-label-md text-outline">{{ $learners->total() }} enrolled · {{ $moduleCount }} modules · {{ $assessmentModules->count() }} assessments</p>
    </div>
  </div>

  <div class="surface-card rounded-xl overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full text-left min-w-[720px]">
        <thead class="bg-surface-container-high">
          <tr class="text-label-md font-label-md text-outline uppercase tracking-wide">
            <th class="px-5 py-3">Learner</th>
            <th class="px-5 py-3 w-56">Module progress</th>
            @foreach($assessmentModules as $am)
              <th class="px-4 py-3 text-center" title="{{ $am->title }}">{{ \Illuminate\Support\Str::limit($am->title, 18) }}</th>
            @endforeach
            <th class="px-5 py-3">Status</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-outline-variant">
          @forelse($learners as $learner)
            @php
              $completed = (int) ($done[$learner->id] ?? 0);
              $pct = $moduleCount > 0 ? (int) round($completed / $moduleCount * 100) : 0;
              $userBest = $best->get($learner->id) ?? collect();
              $pStatus = $learner->pivot->status;
            @endphp
            <tr class="text-body-md font-body-md text-on-surface">
              <td class="px-5 py-4">
                <p class="font-semibold">{{ $learner->name }}</p>
                <p class="text-label-md font-label-md text-outline">{{ $learner->email }}</p>
              </td>
              <td class="px-5 py-4">
                <div class="flex items-center gap-2">
                  <div class="flex-1 h-2 bg-surface-container-high rounded-full overflow-hidden">
                    <div class="h-full bg-primary rounded-full" style="width: {{ $pct }}%"></div>
                  </div>
                  <span class="text-label-md font-label-md text-outline w-14 text-right">{{ $completed }}/{{ $moduleCount }}</span>
                </div>
              </td>
              @foreach($assessmentModules as $am)
                @php $b = $userBest->firstWhere('course_module_id', $am->id); @endphp
                <td class="px-4 py-4 text-center">
                  @if($b)
                    <span class="inline-block text-label-md font-label-md px-2 py-0.5 rounded-full {{ $b->passed ? 'bg-primary/10 text-primary' : 'bg-error-container text-error' }}">{{ $b->best }}%</span>
                  @else
                    <span class="text-outline/50">—</span>
                  @endif
                </td>
              @endforeach
              <td class="px-5 py-4">
                @php $sm = match($pStatus){ 'completed'=>['Completed','text-primary'], 'in_progress'=>['In progress','text-gold'], default=>['Not started','text-outline'] }; @endphp
                <span class="text-label-md font-label-md font-bold {{ $sm[1] }}">{{ $sm[0] }}</span>
              </td>
            </tr>
          @empty
            <tr><td colspan="{{ 3 + $assessmentModules->count() }}" class="px-5 py-12 text-center text-body-md font-body-md text-outline">No learners enrolled in this course yet.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

  <div class="mt-stack-lg">{{ $learners->links() }}</div>

  {{-- xAPI activity timeline --}}
  <div class="mt-stack-lg">
    <div class="flex items-center gap-2 mb-3">
      <span class="material-symbols-outlined text-primary">timeline</span>
      <h4 class="text-headline-md font-headline-md text-on-surface">xAPI Activity</h4>
      <span class="text-label-md font-label-md text-outline">latest {{ $activity->count() }} statements</span>
    </div>
    <div class="surface-card rounded-xl p-2">
      @php
        $verbMeta = [
          'experienced' => ['icon' => 'visibility', 'class' => 'text-secondary', 'word' => 'viewed'],
          'completed' => ['icon' => 'check_circle', 'class' => 'text-primary', 'word' => 'completed'],
          'passed' => ['icon' => 'verified', 'class' => 'text-primary', 'word' => 'passed'],
          'failed' => ['icon' => 'cancel', 'class' => 'text-error', 'word' => 'failed'],
          'answered' => ['icon' => 'quiz', 'class' => 'text-gold', 'word' => 'answered'],
          'attempted' => ['icon' => 'play_circle', 'class' => 'text-outline', 'word' => 'attempted'],
        ];
      @endphp
      @forelse($activity as $s)
        @php $m = $verbMeta[$s->verb] ?? ['icon' => 'radio_button_checked', 'class' => 'text-outline', 'word' => $s->verb]; @endphp
        <div class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-surface-container-low">
          <span class="material-symbols-outlined text-[20px] {{ $m['class'] }} shrink-0">{{ $m['icon'] }}</span>
          <div class="flex-1 min-w-0">
            <p class="text-body-md font-body-md text-on-surface truncate">
              <span class="font-semibold">{{ $s->user->name ?? 'Someone' }}</span>
              {{ $m['word'] }}
              <span class="text-on-surface-variant">{{ $s->object_name }}</span>
              @if(!is_null($s->score_percent))<span class="text-label-md font-label-md font-bold {{ $s->success ? 'text-primary' : 'text-error' }}">· {{ $s->score_percent }}%</span>@endif
            </p>
          </div>
          <span class="text-label-md font-label-md text-outline whitespace-nowrap shrink-0">{{ $s->occurred_at->diffForHumans() }}</span>
        </div>
      @empty
        <div class="px-4 py-10 text-center">
          <span class="material-symbols-outlined text-[32px] text-outline">timeline</span>
          <p class="text-body-md font-body-md text-on-surface font-semibold mt-1">No activity yet</p>
          <p class="text-label-md font-label-md text-outline">xAPI statements appear here as learners view and complete modules.</p>
        </div>
      @endforelse
    </div>
  </div>

@endsection