{{--
    Single-home compliance detail — care workers at one home.
    From ManagementController@compliance (?service=ID): $service, $rows
--}}
@extends('layouts.app')
@section('title', $service->name . ' — Compliance')
@section('content')

  @include('partials.flash')

  @php $role = auth()->user()->primaryRole(); @endphp

  <a href="{{ route($role . '.compliance.index') }}" class="inline-flex items-center gap-1 text-label-md font-label-md text-outline hover:text-primary mb-stack-lg">
    <span class="material-symbols-outlined text-[18px]">arrow_back</span> All services
  </a>

  {{-- Home header --}}
  <div class="surface-card rounded-xl p-6 mb-stack-lg">
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
      <div class="flex items-center gap-3">
        <span class="material-symbols-outlined text-[32px] 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">
            {{ $service->code }}
            @if($service->serviceManager) · SM: {{ $service->serviceManager->name }} @endif
            @if($service->registeredManager) · RM: {{ $service->registeredManager->name }} @endif
          </p>
        </div>
      </div>
      <a href="{{ route($role . '.compliance.matrix', ['service' => $service->id]) }}" 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]">grid_view</span> Matrix for this service
      </a>
    </div>
  </div>

  <div class="surface-card rounded-xl overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full text-left min-w-[820px]">
        <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">Care Worker</th>
            <th class="px-5 py-3">Assigned</th>
            <th class="px-5 py-3">Completed</th>
            <th class="px-5 py-3">In Progress</th>
            <th class="px-5 py-3">Not Started</th>
            <th class="px-5 py-3">Overdue</th>
            <th class="px-5 py-3 w-48">Compliance</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-outline-variant">
          @forelse($rows as $row)
            @php $pct = $row['compliance']; $bar = $row['overdue'] > 0 ? 'bg-error' : ($pct >= 100 ? 'bg-primary' : 'bg-gold'); @endphp
            <tr class="text-body-md font-body-md text-on-surface">
              <td class="px-5 py-4">
                <div class="flex items-center gap-3">
                  <div class="w-9 h-9 rounded-full bg-secondary-container flex items-center justify-center text-primary font-bold text-label-md shrink-0">
                    {{ strtoupper(collect(explode(' ', $row['user']->name))->map(fn($n) => $n[0] ?? '')->take(2)->implode('')) }}
                  </div>
                  <div>
                    <p class="font-semibold">{{ $row['user']->name }}</p>
                    <p class="text-label-md font-label-md text-outline">{{ $row['user']->email }}</p>
                  </div>
                </div>
              </td>
              <td class="px-5 py-4 text-on-surface-variant">{{ $row['total'] }}</td>
              <td class="px-5 py-4 text-on-surface-variant">{{ $row['completed'] }}</td>
              <td class="px-5 py-4 text-on-surface-variant">{{ $row['in_progress'] }}</td>
              <td class="px-5 py-4 text-on-surface-variant">{{ $row['not_started'] }}</td>
              <td class="px-5 py-4">
                @if($row['overdue'] > 0)
                  <span class="inline-block text-label-md font-label-md px-2.5 py-1 rounded-full bg-error-container text-error">{{ $row['overdue'] }}</span>
                @else
                  <span class="text-on-surface-variant">0</span>
                @endif
              </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 {{ $bar }} rounded-full" style="width: {{ $pct }}%"></div>
                  </div>
                  <span class="text-label-md font-label-md text-on-surface-variant w-9 text-right">{{ $pct }}%</span>
                </div>
              </td>
            </tr>
          @empty
            <tr><td colspan="7" class="px-5 py-8 text-center text-body-md font-body-md text-outline">No care workers assigned to this service.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

@endsection