{{--
    Services Compliance — one tile per home, overall completion % rolled up
    across the home's Registered Manager + Service Manager + Care Workers.
    From ManagementController@houseCompliance: $rows (paginator), $overall,
    $homeCount, $filters, $headsOfOperations, $registeredManagers, $serviceManagers
--}}
@extends('layouts.app')
@section('title', 'Services Compliance')
@section('content')

  @include('partials.flash')

  @php $role = auth()->user()->primaryRole(); $houseRoute = route($role . '.house.compliance'); @endphp

  {{-- Header: org-wide roll-up --}}
  <div class="flex items-center gap-4 mb-stack-lg">
    <div class="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center">
      <span class="material-symbols-outlined text-[30px] text-primary">holiday_village</span>
    </div>
    <div>
      <p class="text-headline-lg font-headline-lg text-on-surface">{{ $overall }}% <span class="text-body-md font-body-md text-outline">overall complete</span></p>
      <p class="text-label-md font-label-md text-outline uppercase tracking-wide">{{ $homeCount }} {{ Str::plural('service', $homeCount) }} · RM + SM + Care Workers combined</p>
    </div>
  </div>

  {{-- Filter bar --}}
  <form method="GET" action="{{ $houseRoute }}" class="surface-card rounded-xl p-4 mb-stack-lg" id="houseFilters">
    <div class="flex flex-wrap items-end gap-3">
      <div class="flex-1 min-w-[180px]">
        <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Search</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…"
            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('houseFilters').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-[170px]">
            <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('houseFilters').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-[170px]">
            <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('houseFilters').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-[170px]">
            <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('houseFilters').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')>Name</option>
          <option value="worst" @selected($filters['sort'] === 'worst')>Worst first</option>
          <option value="best" @selected($filters['sort'] === 'best')>Best first</option>
        </select>
      </div>
      <label class="flex items-center gap-2 py-2.5 px-3 bg-surface-container rounded-lg cursor-pointer text-body-md">
        <input type="checkbox" name="noncompliant" value="1" onchange="document.getElementById('houseFilters').submit()" @checked($filters['nonCompliant'])
          class="w-4 h-4 rounded border-outline-variant text-error focus:ring-error/20">
        <span class="text-on-surface-variant whitespace-nowrap">Non-compliant only</span>
      </label>
      <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['nonCompliant'] || $filters['sort'] !== 'name')
        <a href="{{ $houseRoute }}" 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
    </div>
  </form>

  @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">holiday_village</span>
      <p class="text-body-lg font-body-lg text-on-surface font-semibold">No services to show</p>
      <p class="text-body-md font-body-md text-outline">Nothing matches the current filters.</p>
    </div>
  @else
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
      @foreach($rows as $row)
        @php
          $pct = $row['compliance'];
          $ring = $row['overdue'] > 0 ? '#C1473A' : ($pct >= 100 ? '#0E7C7B' : '#B08D57');
          $r = 46; $circ = 2 * M_PI * $r;
          $drill = route($role . '.compliance.index', ['service' => $row['service']->id]);
        @endphp
        <a href="{{ $drill }}" class="surface-card rounded-xl p-5 flex items-center gap-5 hover:shadow-md transition-shadow">
          {{-- Circular chart on the LEFT --}}
          <div class="relative w-[112px] h-[112px] shrink-0">
            <svg width="112" height="112" viewBox="0 0 112 112" class="-rotate-90">
              <circle cx="56" cy="56" r="{{ $r }}" fill="none" stroke="#EAEEF2" stroke-width="10"/>
              <circle cx="56" cy="56" r="{{ $r }}" fill="none" stroke="{{ $ring }}" stroke-width="10"
                stroke-dasharray="{{ round($circ) }}"
                stroke-dashoffset="{{ round($circ * (1 - $pct / 100)) }}" stroke-linecap="round"/>
            </svg>
            <div class="absolute inset-0 flex flex-col items-center justify-center">
              <span class="font-bold text-headline-md text-on-surface leading-none">{{ $pct }}%</span>
              <span class="text-label-md font-label-md text-outline mt-0.5">complete</span>
            </div>
          </div>

          {{-- Text on the RIGHT --}}
          <div class="flex-1 min-w-0">
            <div class="flex items-center gap-1.5 mb-1">
              <span class="material-symbols-outlined text-[20px] text-primary">cottage</span>
              <p class="text-body-lg font-body-lg text-on-surface font-semibold truncate">{{ $row['service']->name }}</p>
            </div>
            <p class="text-label-md font-label-md text-outline mb-3">{{ $row['service']->code }}{{ $row['service']->region ? ' · ' . $row['service']->region : '' }}</p>

            <div class="flex flex-col gap-1.5 text-label-md font-label-md text-on-surface-variant">
              <span class="flex items-center gap-1.5"><span class="material-symbols-outlined text-[17px] text-outline">groups</span>{{ $row['people'] }} people <span class="text-outline">(RM + SM + workers)</span></span>
              <span class="flex items-center gap-1.5"><span class="material-symbols-outlined text-[17px] text-outline">task_alt</span>{{ $row['completed'] }} / {{ $row['total'] }} courses complete</span>
              @if($row['overdue'] > 0)
                <span class="flex items-center gap-1.5 text-error font-bold"><span class="material-symbols-outlined text-[17px]">warning</span>{{ $row['overdue'] }} overdue</span>
              @endif
            </div>
          </div>
        </a>
      @endforeach
    </div>

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

@endsection