{{--
    Compliance Matrix (drill) — one home's care workers × courses.
    From ManagementController@matrix (?service=ID): $service, $rows, $courses
--}}
@extends('layouts.app')
@section('title', $service->name . ' — Matrix')
@section('content')

  @include('partials.flash')

  @php
    $role = auth()->user()->primaryRole();
    $matrixRoute = $role . '.compliance.matrix';
    $statusMeta = [
      'completed'   => ['icon' => 'check_circle', 'class' => 'text-primary', 'label' => 'Completed'],
      'in_progress' => ['icon' => 'timelapse', 'class' => 'text-gold', 'label' => 'In progress'],
      'overdue'     => ['icon' => 'error', 'class' => 'text-error', 'label' => 'Overdue'],
      'not_started' => ['icon' => 'radio_button_unchecked', 'class' => 'text-outline', 'label' => 'Not started'],
    ];
  @endphp

  <div class="flex items-center justify-between gap-3 mb-stack-lg">
    <a href="{{ route($matrixRoute) }}" class="inline-flex items-center gap-1 text-label-md font-label-md text-outline hover:text-primary">
      <span class="material-symbols-outlined text-[18px]">arrow_back</span> All services
    </a>
    <a href="{{ route($matrixRoute, ['service' => $service->id, 'format' => 'csv']) }}" class="inline-flex items-center gap-1.5 bg-surface-container-high text-on-surface-variant px-4 py-2.5 rounded-lg text-label-md font-label-md hover:bg-surface-container-highest">
      <span class="material-symbols-outlined text-[18px]">download</span> Export CSV
    </a>
  </div>

  <div class="flex items-center gap-3 mb-4">
    <span class="material-symbols-outlined text-[28px] text-primary">home_health</span>
    <div>
      <h3 class="text-headline-md font-headline-md text-on-surface">{{ $service->name }}</h3>
      <p class="text-label-md font-label-md text-outline">{{ $rows->count() }} care {{ Str::plural('worker', $rows->count()) }} · {{ $courses->count() }} {{ Str::plural('course', $courses->count()) }}</p>
    </div>
  </div>

  {{-- Legend --}}
  <div class="flex flex-wrap items-center gap-4 mb-4 text-label-md font-label-md text-on-surface-variant">
    @foreach($statusMeta as $meta)
      <span class="flex items-center gap-1.5"><span class="material-symbols-outlined text-[18px] {{ $meta['class'] }}">{{ $meta['icon'] }}</span> {{ $meta['label'] }}</span>
    @endforeach
    <span class="flex items-center gap-1.5"><span class="text-outline/60">–</span> Not assigned</span>
  </div>

  @if($courses->isEmpty())
    <div class="surface-card rounded-xl px-6 py-12 text-center">
      <span class="material-symbols-outlined text-[42px] text-outline mb-2">grid_view</span>
      <p class="text-body-lg font-body-lg text-on-surface font-semibold">Nothing to show</p>
      <p class="text-body-md font-body-md text-outline">No assigned courses for workers at this service.</p>
    </div>
  @else
    <div class="surface-card rounded-xl overflow-hidden">
      <div class="overflow-x-auto">
        <table class="text-left border-collapse">
          <thead>
            <tr class="bg-surface-container-high">
              <th class="sticky left-0 z-20 bg-surface-container-high px-5 py-3 text-label-md font-label-md text-outline uppercase tracking-wide align-bottom min-w-[220px]">Care Worker</th>
              @foreach($courses as $course)
                <th class="px-0 py-3 align-bottom h-40 w-10 border-l border-outline-variant/40">
                  <div class="mx-auto h-full flex items-end justify-center pb-2">
                    <span class="text-label-md font-label-md text-on-surface-variant" style="writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;" title="{{ $course->title }}">
                      {{ \Illuminate\Support\Str::limit($course->title, 26) }}
                    </span>
                  </div>
                </th>
              @endforeach
            </tr>
          </thead>
          <tbody class="divide-y divide-outline-variant">
            @forelse($rows as $row)
              <tr class="hover:bg-surface-container-low">
                <td class="sticky left-0 z-10 bg-white px-5 py-3">
                  <p class="text-body-md font-body-md text-on-surface font-semibold whitespace-nowrap">{{ $row['user']->name }}</p>
                  <p class="text-label-md font-label-md text-outline">{{ $row['user']->email }}</p>
                </td>
                @foreach($row['cells'] as $i => $status)
                  <td class="text-center border-l border-outline-variant/40 px-0 py-3">
                    @if($status)
                      @php $m = $statusMeta[$status]; @endphp
                      <span class="material-symbols-outlined text-[19px] {{ $m['class'] }}" title="{{ $courses[$i]->title }} — {{ $m['label'] }}">{{ $m['icon'] }}</span>
                    @else
                      <span class="text-outline/40" title="{{ $courses[$i]->title }} — Not assigned">–</span>
                    @endif
                  </td>
                @endforeach
              </tr>
            @empty
              <tr>
                <td class="sticky left-0 bg-white px-5 py-3 text-body-md font-body-md text-outline">No care workers</td>
                <td colspan="{{ $courses->count() }}"></td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>
  @endif

@endsection