{{--
    Compliance Matrix (overview) — services (rows) × courses (columns), each
    cell the home's completion rate for that course.
    From ManagementController@matrix: $rows, $courses, $registeredManagers, $rmId, $q
--}}
@extends('layouts.app')
@section('title', 'Compliance Matrix')
@section('content')

  @include('partials.flash')

  @php
    $role = auth()->user()->primaryRole();
    $matrixRoute = $role . '.compliance.matrix';
    $indexRoute = $role . '.compliance.index';
    $exportUrl = route($matrixRoute, array_filter(['rm' => $rmId, 'q' => $q, 'format' => 'csv']));
  @endphp

  {{-- Controls --}}
  <div class="flex flex-col lg:flex-row lg:items-end justify-between gap-3 mb-4">
    <form method="GET" action="{{ route($matrixRoute) }}" class="flex flex-wrap items-end gap-3" id="matrixFilters">
      <div>
        <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Search service</label>
        <div class="relative">
          <span class="material-symbols-outlined text-[20px] text-outline absolute left-3 top-1/2 -translate-y-1/2">search</span>
          <input type="text" name="q" value="{{ $q }}" placeholder="Service name…"
            class="pl-10 pr-3 py-2.5 bg-surface-container rounded-lg border-none focus:ring-2 focus:ring-primary/20 text-body-md outline-none min-w-[200px]">
        </div>
      </div>
      @if($registeredManagers->isNotEmpty())
        <div>
          <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Registered Manager</label>
          <select name="rm" onchange="document.getElementById('matrixFilters').submit()" class="py-2.5 px-3 bg-surface-container rounded-lg border-none focus:ring-2 focus:ring-primary/20 text-body-md outline-none min-w-[200px]">
            <option value="">All Registered Managers</option>
            @foreach($registeredManagers as $rm)
              <option value="{{ $rm->id }}" @selected($rmId === $rm->id)>{{ $rm->name }}</option>
            @endforeach
          </select>
        </div>
      @endif
      <button type="submit" class="py-2.5 px-4 rounded-lg bg-primary text-on-primary text-label-md font-label-md hover:opacity-90">Apply</button>
      @if($rmId || $q)
        <a href="{{ route($matrixRoute) }}" class="py-2.5 px-4 rounded-lg text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high">Reset</a>
      @endif
    </form>

    <div class="flex items-center gap-3">
      <span class="text-label-md font-label-md text-outline">{{ $rows->count() }} {{ Str::plural('service', $rows->count()) }} · {{ $courses->count() }} {{ Str::plural('course', $courses->count()) }}</span>
      <a href="{{ $indexRoute ? route($indexRoute) : '#' }}" 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]">table_rows</span> List view
      </a>
      <a href="{{ $exportUrl }}" 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>

  {{-- Legend --}}
  <div class="flex flex-wrap items-center gap-4 mb-4 text-label-md font-label-md text-on-surface-variant">
    <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-primary"></span> 100% complete</span>
    <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-gold"></span> Partial</span>
    <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-error"></span> Has overdue</span>
    <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-surface-container-high border border-outline-variant"></span> Not assigned</span>
    <span class="ml-2">Each cell shows % of that service's assigned workers who have completed the course. Click a service to see individuals.</span>
  </div>

  @if($rows->isEmpty() || $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 services or assigned courses in this selection.</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-[240px]">Service</th>
              @foreach($courses as $course)
                <th class="px-0 py-3 align-bottom h-40 w-12 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">
            @foreach($rows as $row)
              <tr class="hover:bg-surface-container-low">
                <td class="sticky left-0 z-10 bg-white px-5 py-3">
                  <a href="{{ route($matrixRoute, ['service' => $row['service']->id]) }}" class="text-body-md font-body-md text-on-surface font-semibold whitespace-nowrap hover:text-primary">{{ $row['service']->name }}</a>
                  <p class="text-label-md font-label-md text-outline">{{ $row['service']->code }}</p>
                </td>
                @foreach($row['cells'] as $cell)
                  <td class="text-center border-l border-outline-variant/40 px-0 py-3">
                    @if($cell === null)
                      <span class="text-outline/40" title="Not assigned">–</span>
                    @else
                      @php
                        $bg = $cell['overdue'] > 0 ? 'bg-error text-on-error'
                            : ($cell['pct'] >= 100 ? 'bg-primary text-on-primary'
                            : ($cell['pct'] > 0 ? 'bg-gold text-on-primary' : 'bg-surface-container-high text-on-surface-variant'));
                      @endphp
                      <span class="inline-flex items-center justify-center min-w-[38px] px-1.5 py-1 rounded-md text-label-md font-label-md {{ $bg }}"
                        title="{{ $cell['completed'] }}/{{ $cell['total'] }} complete{{ $cell['overdue'] > 0 ? ', ' . $cell['overdue'] . ' overdue' : '' }}">
                        {{ $cell['pct'] }}%
                      </span>
                    @endif
                  </td>
                @endforeach
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  @endif

@endsection