{{--
    Compliance overview — one row per service, aggregated in SQL.
    From ManagementController@compliance: $rows (paginator), $totals, $filters,
    $registeredManagers, $serviceManagers
--}}
@extends('layouts.app')
@section('title', 'Compliance')
@section('content')

  @include('partials.flash')

  @php
    $role = auth()->user()->primaryRole();
    $indexRoute = $role . '.compliance.index';
    $matrixRoute = $role . '.compliance.matrix';
  @endphp

  {{-- Summary tiles (reflect the current filter) --}}
  <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-stack-lg">
    @php
      $tiles = [
        ['label' => 'Services', 'value' => $totals['homes'], 'icon' => 'home_health', 'class' => 'text-primary'],
        ['label' => 'Care Workers', 'value' => $totals['workers'], 'icon' => 'groups', 'class' => 'text-secondary'],
        ['label' => 'Avg. Compliance', 'value' => $totals['avg_compliance'] . '%', 'icon' => 'donut_large', 'class' => 'text-on-secondary-container'],
        ['label' => 'Overdue Courses', 'value' => $totals['overdue'], 'icon' => 'warning', 'class' => 'text-error'],
      ];
    @endphp
    @foreach($tiles as $tile)
      <div class="surface-card rounded-xl p-5 flex items-center gap-4">
        <span class="material-symbols-outlined text-[28px] {{ $tile['class'] }}">{{ $tile['icon'] }}</span>
        <div>
          <p class="text-headline-lg font-headline-lg text-on-surface">{{ $tile['value'] }}</p>
          <p class="text-label-md font-label-md text-outline uppercase tracking-wide">{{ $tile['label'] }}</p>
        </div>
      </div>
    @endforeach
  </div>

  {{-- Filter bar --}}
  <form method="GET" action="{{ route($indexRoute) }}" class="surface-card rounded-xl p-4 mb-stack-lg" id="filters">
    <div class="flex flex-wrap items-end gap-3">
      <div class="flex-1 min-w-[200px]">
        <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="{{ $filters['q'] }}" placeholder="Service name or code…"
            class="w-full 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">
        </div>
      </div>
      @if($headsOfOperations->isNotEmpty())
        <div>
          <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Head of Operations</label>
          <select name="hoo" onchange="document.getElementById('filters').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-[180px]">
            <option value="">All</option>
            @foreach($headsOfOperations as $m)
              <option value="{{ $m->id }}" @selected($filters['hooId'] === $m->id)>{{ $m->name }}</option>
            @endforeach
          </select>
        </div>
      @endif
      @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('filters').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-[180px]">
            <option value="">All</option>
            @foreach($registeredManagers as $m)
              <option value="{{ $m->id }}" @selected($filters['rmId'] === $m->id)>{{ $m->name }}</option>
            @endforeach
          </select>
        </div>
      @endif
      @if($serviceManagers->isNotEmpty())
        <div>
          <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Service Manager</label>
          <select name="sm" onchange="document.getElementById('filters').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-[180px]">
            <option value="">All</option>
            @foreach($serviceManagers as $m)
              <option value="{{ $m->id }}" @selected($filters['smId'] === $m->id)>{{ $m->name }}</option>
            @endforeach
          </select>
        </div>
      @endif
      <div>
        <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Sort</label>
        <select name="sort" onchange="document.getElementById('filters').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">
          <option value="name" @selected($filters['sort'] === 'name')>Service name</option>
          <option value="worst" @selected($filters['sort'] === 'worst')>Worst first</option>
          <option value="overdue" @selected($filters['sort'] === 'overdue')>Most overdue</option>
          <option value="best" @selected($filters['sort'] === 'best')>Best first</option>
        </select>
      </div>
      <button type="submit" class="bg-primary text-on-primary px-5 py-2.5 rounded-lg text-label-md font-label-md hover:opacity-90">Apply</button>
      @if($filters['q'] || $filters['hooId'] || $filters['rmId'] || $filters['smId'] || $filters['sort'] !== 'name')
        <a href="{{ route($indexRoute) }}" 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
      <a href="{{ route($matrixRoute) }}" class="ml-auto 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 view
      </a>
    </div>
  </form>

  {{-- Home roll-up table --}}
  @if($rows->isEmpty())
    <div class="surface-card rounded-xl px-6 py-12 text-center">
      <span class="material-symbols-outlined text-[42px] text-outline mb-2">home_health</span>
      <p class="text-body-lg font-body-lg text-on-surface font-semibold">No services match your filters</p>
      <p class="text-body-md font-body-md text-outline">Try clearing the search or manager filters.</p>
    </div>
  @else
    <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">Service</th>
              <th class="px-5 py-3">Service Manager</th>
              <th class="px-5 py-3">Workers</th>
              <th class="px-5 py-3">Overdue</th>
              <th class="px-5 py-3 w-52">Compliance</th>
              <th class="px-5 py-3"></th>
            </tr>
          </thead>
          <tbody class="divide-y divide-outline-variant">
            @foreach($rows as $row)
              @php
                $pct = $row['compliance'];
                $bar = $row['overdue'] > 0 ? 'bg-error' : ($pct >= 100 ? 'bg-primary' : 'bg-gold');
                $drill = route($indexRoute, ['service' => $row['service']->id]);
              @endphp
              <tr class="text-body-md font-body-md text-on-surface hover:bg-surface-container-low">
                <td class="px-5 py-4">
                  <a href="{{ $drill }}" class="font-semibold hover:text-primary">{{ $row['service']->name }}</a>
                  <p class="text-label-md font-label-md text-outline">{{ $row['service']->code }}{{ $row['service']->registeredManager ? ' · RM: ' . $row['service']->registeredManager->name : '' }}</p>
                </td>
                <td class="px-5 py-4 text-on-surface-variant">{{ $row['service']->serviceManager->name ?? '—' }}</td>
                <td class="px-5 py-4 text-on-surface-variant">{{ $row['workers'] }}</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>
                <td class="px-5 py-4 text-right">
                  <a href="{{ $drill }}" class="text-label-md font-label-md text-primary font-bold hover:underline whitespace-nowrap">View →</a>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>

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

@endsection