{{--
    Book team members onto a session.
    From TeamSessionController@manage: $session, $team, $registeredIds
--}}
@extends('layouts.app')
@section('title', 'Book Team onto Session')
@section('content')

  <a href="{{ route('service_manager.team.sessions') }}" 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> Back to Assign Sessions
  </a>

  @include('partials.flash')

  <div class="surface-card rounded-xl p-6 mb-stack-lg">
    <div class="flex items-center gap-2 flex-wrap">
      <h3 class="text-headline-md font-headline-md text-on-surface">{{ $session->title }}</h3>
      @if($session->training_code)
        <span class="inline-flex items-center gap-1 text-label-md font-label-md px-2.5 py-1 rounded-full bg-secondary-container text-on-secondary-container font-bold tracking-wide">
          <span class="material-symbols-outlined text-[15px]">sell</span>{{ $session->training_code }}
        </span>
      @endif
    </div>
    <div class="flex flex-wrap items-center gap-x-4 gap-y-1 mt-2 text-body-md font-body-md text-on-surface-variant">
      <span class="flex items-center gap-1.5"><span class="material-symbols-outlined text-[18px] text-outline">calendar_month</span>{{ $session->session_date->format('l, j F Y') }}</span>
      <span class="flex items-center gap-1.5"><span class="material-symbols-outlined text-[18px] text-outline">schedule</span>{{ \Carbon\Carbon::parse($session->start_time)->format('H:i') }} · {{ $session->duration_minutes }} min</span>
      <span class="flex items-center gap-1.5"><span class="material-symbols-outlined text-[18px] text-outline">{{ $session->format === 'online' ? 'videocam' : 'location_on' }}</span>{{ $session->format === 'online' ? 'Online' : ($session->location ?? 'Venue TBC') }}</span>
    </div>
  </div>

  <form method="POST" action="{{ route('service_manager.team.session.assign', $session) }}">
    @csrf
    <div class="surface-card rounded-xl overflow-hidden">
      <div class="flex items-center justify-between px-5 py-3 bg-surface-container-high">
        <p class="text-label-md font-label-md text-outline uppercase tracking-wide">Your Team</p>
        <label class="flex items-center gap-2 text-label-md font-label-md text-on-surface-variant cursor-pointer">
          <input type="checkbox" id="selectAll" class="w-4 h-4 rounded border-outline-variant text-primary focus:ring-primary/20">
          Select all available
        </label>
      </div>
      <ul class="divide-y divide-outline-variant">
        @forelse($team as $member)
          @php
            $isBooked = in_array($member->id, $registeredIds);
            $tookOn = $alreadyTaken[$member->id] ?? null;      // already completed THIS training
            $past = $history[$member->id] ?? collect();        // everything they've attended
            $locked = $isBooked || $tookOn;
          @endphp
          <li class="flex items-start gap-3 px-5 py-3 {{ $tookOn ? 'bg-surface-container-low' : '' }}">
            <input type="checkbox" name="user_ids[]" value="{{ $member->id }}"
              {{ $isBooked ? 'checked' : '' }} {{ $locked ? 'disabled' : '' }}
              class="teamBox mt-0.5 w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary/20 {{ $locked ? 'opacity-50' : '' }}">
            <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(' ', $member->name))->filter()->map(fn($n) => mb_substr($n, 0, 1))->take(2)->implode('')) }}
            </div>
            <div class="flex-1 min-w-0">
              <p class="text-body-md font-body-md text-on-surface font-semibold">{{ $member->name }}</p>
              <p class="text-label-md font-label-md text-outline">
                {{ $member->location?->name ?? '—' }} · {{ $past->count() }} {{ Str::plural('training', $past->count()) }} taken
              </p>
              @if($past->isNotEmpty())
                <details class="mt-1">
                  <summary class="text-label-md font-label-md text-primary cursor-pointer hover:underline">Training history</summary>
                  <ul class="mt-1 space-y-0.5">
                    @foreach($past->take(6) as $h)
                      <li class="text-label-md font-label-md text-on-surface-variant flex items-center gap-1.5">
                        <span class="material-symbols-outlined text-[14px] text-primary">check_circle</span>
                        {{ $h->title }} <span class="text-outline">· {{ \Carbon\Carbon::parse($h->session_date)->format('j M Y') }}</span>
                      </li>
                    @endforeach
                    @if($past->count() > 6)<li class="text-label-md font-label-md text-outline">+ {{ $past->count() - 6 }} more</li>@endif
                  </ul>
                </details>
              @endif
            </div>
            <div class="shrink-0 text-right">
              @if($tookOn)
                <span class="inline-flex items-center gap-1 text-label-md font-label-md text-primary font-bold whitespace-nowrap">
                  <span class="material-symbols-outlined text-[18px]">verified</span> Already completed
                </span>
                <p class="text-label-md font-label-md text-outline">{{ \Carbon\Carbon::parse($tookOn)->format('j M Y') }}</p>
              @elseif($isBooked)
                <span class="inline-flex items-center gap-1 text-label-md font-label-md text-primary font-bold whitespace-nowrap">
                  <span class="material-symbols-outlined text-[18px]">check_circle</span> Booked
                </span>
              @endif
            </div>
          </li>
        @empty
          <li class="px-5 py-12 text-center text-body-md font-body-md text-outline">You have no care workers in your team yet.</li>
        @endforelse
      </ul>
    </div>

    <div class="flex items-center gap-3 mt-stack-lg">
      <button type="submit" class="bg-primary text-on-primary px-6 py-2.5 rounded-lg text-label-md font-label-md hover:opacity-90 transition-opacity">
        Book Selected
      </button>
      <a href="{{ route('service_manager.team.sessions') }}" class="px-6 py-2.5 rounded-lg text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high transition-colors">Cancel</a>
    </div>
  </form>

  {{-- Team attendance report --}}
  @if($roster->isNotEmpty())
    <div class="mt-stack-lg">
      <div class="flex flex-wrap items-center gap-2 mb-3">
        <span class="material-symbols-outlined text-primary">fact_check</span>
        <h3 class="text-headline-md font-headline-md text-on-surface">Your team's attendance</h3>
        <span class="text-label-md font-label-md px-2.5 py-1 rounded-full bg-primary/10 text-primary font-bold">{{ $summary['attended'] }} attended</span>
        @if($summary['no_show'])<span class="text-label-md font-label-md px-2.5 py-1 rounded-full bg-error-container text-error font-bold">{{ $summary['no_show'] }} no-show</span>@endif
        @if($summary['on_leave'])<span class="text-label-md font-label-md px-2.5 py-1 rounded-full bg-gold/20 text-on-surface font-bold">{{ $summary['on_leave'] }} on leave</span>@endif
        @if($summary['booked'])<span class="text-label-md font-label-md px-2.5 py-1 rounded-full bg-surface-container-high text-on-surface-variant font-bold">{{ $summary['booked'] }} booked</span>@endif
      </div>

      <div class="surface-card rounded-xl overflow-hidden">
        <ul class="divide-y divide-outline-variant">
          @foreach($roster as $r)
            @php
              $st = $r['row']->status;
              $badge = match($st) {
                'attended' => ['Attended', 'bg-primary/10 text-primary'],
                'no_show'  => ['No-show', 'bg-error-container text-error'],
                'on_leave' => ['On leave', 'bg-gold/20 text-on-surface'],
                default    => ['Booked', 'bg-surface-container-high text-on-surface-variant'],
              };
              $canChange = ! in_array($st, ['attended', 'no_show'], true);
            @endphp
            <li class="flex flex-col sm:flex-row sm:items-center gap-3 px-5 py-3">
              <div class="flex items-center gap-3 flex-1 min-w-0">
                <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(' ', $r['user']->name))->filter()->map(fn($n) => mb_substr($n, 0, 1))->take(2)->implode('')) }}
                </div>
                <div class="min-w-0">
                  <p class="text-body-md font-body-md text-on-surface font-semibold truncate">{{ $r['user']->name }}</p>
                  <p class="text-label-md font-label-md text-outline truncate">{{ $r['user']->location?->name ?? '—' }}@if($r['row']->note) · {{ $r['row']->note }}@endif</p>
                </div>
              </div>
              <span class="text-label-md font-label-md px-2.5 py-1 rounded-full shrink-0 {{ $badge[1] }}">{{ $badge[0] }}</span>

              @if($canChange)
                <div class="flex items-center gap-2 shrink-0">
                  {{-- Mark on leave --}}
                  <form method="POST" action="{{ route('service_manager.team.session.leave', [$session, $r['user']]) }}" class="m-0" onsubmit="return confirm('Mark {{ $r['user']->name }} as on leave for this training?');">
                    @csrf
                    <input type="hidden" name="note" value="On leave">
                    <button type="submit" class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high"><span class="material-symbols-outlined text-[16px]">event_busy</span> On leave</button>
                  </form>
                  {{-- Replace with cover --}}
                  <form method="POST" action="{{ route('service_manager.team.session.replace', [$session, $r['user']]) }}" class="m-0 flex items-center gap-1">
                    @csrf
                    <select name="replacement_id" required class="py-1.5 px-2 bg-surface-container rounded-lg border-none text-label-md outline-none max-w-[150px]">
                      <option value="">Replace with…</option>
                      @foreach($team as $member)
                        @continue($member->id === $r['user']->id)
                        <option value="{{ $member->id }}">{{ $member->name }}</option>
                      @endforeach
                    </select>
                    <button type="submit" class="inline-flex items-center gap-1 px-2 py-1.5 rounded-lg text-label-md font-label-md text-primary font-bold hover:bg-primary/10"><span class="material-symbols-outlined text-[16px]">swap_horiz</span></button>
                  </form>
                </div>
              @endif
            </li>
          @endforeach
        </ul>
        <div class="px-5 py-3 border-t border-outline-variant">
          <p class="text-label-md font-label-md text-outline">Attendance is recorded by the trainer. Mark someone on leave (e.g. sick) or swap in cover before the training runs.</p>
        </div>
      </div>
    </div>
  @endif

  <script>
    (function () {
      var all = document.getElementById('selectAll');
      if (!all) return;
      all.addEventListener('change', function () {
        document.querySelectorAll('.teamBox:not(:disabled)').forEach(function (b) { b.checked = all.checked; });
      });
    })();
  </script>

@endsection