@extends('layouts.app')
@section('title', 'Assign Course')
@section('content')

  <a href="{{ route('admin.courses.index') }}" 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 Course Library
  </a>

  @include('partials.flash')

  <div class="surface-card rounded-xl p-6 mb-stack-lg">
    <p class="text-label-md font-label-md text-outline uppercase tracking-wide mb-1">Assigning</p>
    <h3 class="text-headline-md font-headline-md text-on-surface">{{ $course->title }}</h3>
    <p class="text-body-md font-body-md text-outline mt-1">
      {{ \Illuminate\Support\Str::headline($course->category) }} · {{ $course->duration_minutes }} min
      @if($course->refresh_cycle) · Refresh: {{ $course->refresh_cycle }} @endif
    </p>
  </div>

  <form method="POST" action="{{ route('admin.courses.assign.store', $course) }}">
    @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">Employees</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
        </label>
      </div>
      <ul class="divide-y divide-outline-variant">
        @forelse($employees as $employee)
          @php $enrolled = in_array($employee->id, $enrolledIds); @endphp
          <li class="flex items-center gap-3 px-5 py-3">
            <input type="checkbox" name="user_ids[]" value="{{ $employee->id }}"
              {{ $enrolled ? 'disabled' : '' }}
              class="assignBox w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary/20 {{ $enrolled ? 'opacity-40' : '' }}">
            <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(' ', $employee->name))->map(fn($n) => $n[0] ?? '')->take(2)->implode('')) }}
            </div>
            <div class="flex-1 min-w-0">
              <p class="text-body-md font-body-md text-on-surface font-semibold">{{ $employee->name }}</p>
              <p class="text-label-md font-label-md text-outline">{{ $employee->email }}</p>
            </div>
            @if($enrolled)
              <span class="text-label-md font-label-md text-primary font-bold">Already enrolled</span>
            @endif
          </li>
        @empty
          <li class="px-5 py-12 text-center text-body-md font-body-md text-outline">No employees to assign.</li>
        @endforelse
      </ul>
    </div>

    @error('user_ids')
      <p class="text-body-md font-body-md text-error mt-3">{{ $message }}</p>
    @enderror

    <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">
        Assign & Notify
      </button>
      <a href="{{ route('admin.courses.index') }}" 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>

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

@endsection