@extends('layouts.app')
@section('title', 'Employee Compliance')
@section('content')

  @include('partials.flash')

  {{-- Summary tiles --}}
  <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-stack-lg">
    @php
      $tiles = [
        ['label' => 'Employees', 'value' => $summary['employees'], 'icon' => 'group', 'class' => 'text-primary'],
        ['label' => 'Fully Compliant', 'value' => $summary['fully_compliant'], 'icon' => 'verified', 'class' => 'text-on-secondary-container'],
        ['label' => 'With Overdue', 'value' => $summary['with_overdue'], 'icon' => 'warning', 'class' => 'text-error'],
        ['label' => 'Avg. Compliance', 'value' => $summary['avg_compliance'] . '%', 'icon' => 'donut_large', 'class' => 'text-secondary'],
      ];
    @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>

  {{-- Filters --}}
  <form method="GET" action="{{ route('admin.compliance.index') }}" 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-[220px]">
        <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Search employee</label>
        <div class="relative">
          <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-[20px]">search</span>
          <input type="text" name="q" value="{{ $filters['q'] }}" placeholder="Name or email…"
            class="w-full pl-10 pr-4 py-2.5 bg-surface-container rounded-lg border-none focus:ring-2 focus:ring-primary/20 text-body-md outline-none">
        </div>
      </div>
      <div>
        <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Service</label>
        <select name="home" 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-[200px] max-w-[260px]">
          <option value="">All services</option>
          @foreach($homes as $home)
            <option value="{{ $home->id }}" @selected($filters['homeId'] === $home->id)>{{ $home->name }}</option>
          @endforeach
        </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="overdue" value="1" onchange="document.getElementById('filters').submit()" @checked($filters['overdueOnly'])
          class="w-4 h-4 rounded border-outline-variant text-error focus:ring-error/20">
        <span class="text-on-surface-variant">Only overdue</span>
      </label>
      <button type="submit" class="px-5 py-2.5 rounded-lg bg-primary text-on-primary text-label-md font-label-md hover:opacity-90">Apply</button>
      @if($filters['q'] || $filters['homeId'] || $filters['overdueOnly'])
        <a href="{{ route('admin.compliance.index') }}" 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>

  <div class="surface-card rounded-xl overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full text-left min-w-[860px]">
        <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">Employee</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-56">Compliance</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-outline-variant">
          @forelse($rows as $row)
            @php
              $initials = collect(explode(' ', $row['user']->name))->map(fn($n) => $n[0] ?? '')->take(2)->implode('');
              $pct = $row['compliance'];
              $barColor = $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-10 h-10 rounded-full bg-secondary-container flex items-center justify-center text-primary font-bold shrink-0">{{ strtoupper($initials) }}</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 {{ $barColor }} 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-12 text-center text-body-md font-body-md text-outline">No employees found.</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

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

@endsection