{{--
    Data contract expected from EmployeeDashboardController@index:

    $stats = [
        'completed'  => int,   // courses completed
        'total'      => int,   // courses assigned
        'overdue'    => int,   // courses overdue
        'progress'   => int,   // 0-100, overall completion percentage
    ];

    $continueCourses    = Collection<Course>  // in-progress or resumable courses, each with ->pivot->progress (0-100) and ->pivot->status
    $overdueCourses     = Collection<Course>  // status = overdue
    $mandatoryCourses   = Collection<Course>  // category = mandatory
    $serviceCourses     = Collection<Course>  // category = service_specific
    $upcomingSessions   = Collection          // ['title','date','time','format','action_state']
    $policyAckCount     = int                 // policies awaiting digital acknowledgment
--}}
@extends('layouts.app')
@section('title', 'Employee Dashboard')
@section('content')

  {{--
      DUMMY DATA — remove this block once EmployeeDashboardController@index passes
      real $stats / $continueCourses / $overdueCourses / $mandatoryCourses /
      $serviceCourses / $upcomingSessions / $policyAckCount. Every variable below
      uses "??" so real data from the controller always takes priority.
  --}}
  @php
    $course = function (string $title, string $slug, string $category, int $duration, string $status, int $progress = 0) {
      return (object) [
        'title' => $title,
        'slug' => $slug,
        'category' => $category,
        'duration_minutes' => $duration,
        'thumbnail' => null,
        'pivot' => (object) ['status' => $status, 'progress_percent' => $progress],
      ];
    };

    $stats = $stats ?? [
      'completed' => 3,
      'total' => 8,
      'overdue' => 1,
      'progress' => 42,
    ];

    $continueCourses = $continueCourses ?? collect([
      $course('Fire Awareness', 'fire-awareness', 'mandatory', 30, 'in_progress', 60),
      $course('Autism Awareness', 'autism-awareness', 'mandatory', 30, 'in_progress', 25),
    ]);

    $overdueCourses = $overdueCourses ?? collect([
      $course('Mental Capacity Act (MCA) & DoLS', 'mental-capacity-act-mca-deprivation-of-liberty-safeguards-dols', 'mandatory', 45, 'overdue'),
    ]);

    $mandatoryCourses = $mandatoryCourses ?? collect([
      $course('Health and Safety Introduction', 'health-and-safety-introduction', 'mandatory', 30, 'completed', 100),
      $course('Safeguarding and Protection of Adults', 'safeguarding-and-protection-of-adults-non-gloucestershire', 'mandatory', 40, 'not_started'),
      $course('Data Protection UK including GDPR', 'data-protection-uk-including-gdpr', 'mandatory', 30, 'not_started'),
      $course('Dignity and Respect', 'dignity-and-respect', 'mandatory', 30, 'completed', 100),
    ]);

    $serviceCourses = $serviceCourses ?? collect([
      $course('Bed Rails', 'bed-rails', 'service_specific', 30, 'not_started'),
      $course('Epilepsy Awareness: Managing Epilepsy', 'epilepsy-awareness-managing-epilepsy', 'service_specific', 30, 'not_started'),
      $course('Moving and Handling of People', 'moving-and-handling-of-people', 'service_specific', 40, 'completed', 100),
    ]);

    $upcomingSessions = $upcomingSessions ?? [
      ['title' => 'Manual Handling (Practical)', 'date' => '7 May 2026', 'time' => '14:00', 'format' => 'In-Person', 'action_state' => 'register'],
      ['title' => 'Safeguarding Refresher', 'date' => '25 May 2026', 'time' => '14:00', 'format' => 'Online', 'action_state' => 'booked'],
    ];

    $policyAckCount = $policyAckCount ?? 2;
  @endphp

  {{-- Hero: welcome + overall progress ring --}}
  <div class="surface-card rounded-xl overflow-hidden mb-stack-lg">
    <div class="bg-primary px-8 py-8 flex flex-col md:flex-row items-center gap-8">
      <div class="flex-1 text-on-primary">
        <h3 class="text-headline-lg font-headline-lg mb-2">Welcome, {{ auth()->user()->name }}</h3>
        <p class="text-body-md font-body-md text-on-primary-container max-w-xl">
          Here's where your assigned training and compliance status live. Need a hand? Email
          <strong class="font-semibold">training.admin@segralms.com</strong> or use Contact Support in the sidebar.
        </p>
      </div>
      <div class="flex flex-col items-center gap-2 shrink-0">
        <div class="relative w-20 h-20">
          <svg width="80" height="80" viewBox="0 0 80 80" class="-rotate-90">
            <circle cx="40" cy="40" r="34" fill="none" stroke="rgba(255,255,255,.25)" stroke-width="8"/>
            <circle cx="40" cy="40" r="34" fill="none" stroke="#ffffff" stroke-width="8"
              stroke-dasharray="{{ round(2 * M_PI * 34) }}"
              stroke-dashoffset="{{ round(2 * M_PI * 34 * (1 - ($stats['progress'] ?? 0) / 100)) }}"
              stroke-linecap="round"/>
          </svg>
          <div class="absolute inset-0 flex items-center justify-center text-on-primary font-bold text-body-lg">{{ $stats['progress'] ?? 0 }}%</div>
        </div>
        <p class="text-label-md font-label-md text-on-primary-container uppercase tracking-wide">Overall Progress</p>
      </div>
    </div>
  </div>

  {{-- Alerts --}}
  <div class="space-y-3 mb-stack-lg">
    @if(($stats['overdue'] ?? 0) > 0)
      <div class="flex items-center gap-3 bg-error-container text-error rounded-lg px-5 py-3">
        <span class="material-symbols-outlined">warning</span>
        <p class="text-body-md font-body-md flex-1">
          You have <strong>{{ $stats['overdue'] }} overdue {{ Str::plural('course', $stats['overdue']) }}</strong> — please complete {{ $stats['overdue'] === 1 ? 'it' : 'them' }} to stay compliant.
        </p>
      </div>
    @endif
    @if(($policyAckCount ?? 0) > 0)
      <div class="flex items-center gap-3 bg-secondary-container text-on-secondary-container rounded-lg px-5 py-3">
        <span class="material-symbols-outlined">description</span>
        <p class="text-body-md font-body-md flex-1">
          You have <strong>{{ $policyAckCount }} new {{ Str::plural('policy', $policyAckCount) }}</strong> requiring your digital acknowledgment.
        </p>
        <a href="#" class="text-label-md font-label-md text-primary font-bold whitespace-nowrap hover:underline">Review &rarr;</a>
      </div>
    @endif
  </div>

  {{-- Continue where you left off --}}
  @if(($continueCourses ?? collect())->isNotEmpty())
    @include('dashboards.employee._course-rail', [
      'title' => 'Continue Where You Left Off',
      'icon' => 'play_circle',
      'railId' => 'continue',
      'courses' => $continueCourses,
    ])
  @endif

  {{-- Overdue / needs attention --}}
  @if(($overdueCourses ?? collect())->isNotEmpty())
    @include('dashboards.employee._course-rail', [
      'title' => "Here's What You Need To Do",
      'icon' => 'priority_high',
      'railId' => 'overdue',
      'courses' => $overdueCourses,
    ])
  @endif

  {{-- CPD banner --}}
  <div class="surface-card rounded-xl px-8 py-7 mb-stack-lg flex flex-col md:flex-row items-center justify-between gap-4" style="background-color:#FBF6EE;">
    <div>
      <p class="text-label-md font-label-md text-gold uppercase tracking-wide mb-1">Your Development</p>
      <h4 class="text-headline-md font-headline-md text-on-surface mb-1">Your Direction</h4>
      <p class="text-body-md font-body-md text-outline">Set up your CPD scheme to start tracking your progress for the year.</p>
    </div>
    <button class="shrink-0 bg-gold text-on-primary px-5 py-2.5 rounded-lg text-label-md font-label-md hover:opacity-90 transition-opacity">Begin Setup</button>
  </div>

  {{-- Mandatory eLearning --}}
  @if(($mandatoryCourses ?? collect())->isNotEmpty())
    @include('dashboards.employee._course-rail', [
      'title' => 'Mandatory eLearning',
      'icon' => 'school',
      'railId' => 'mandatory',
      'courses' => $mandatoryCourses,
    ])
  @endif

  {{-- Service Specific --}}
  @if(($serviceCourses ?? collect())->isNotEmpty())
    @include('dashboards.employee._course-rail', [
      'title' => 'Service Specific',
      'icon' => 'medical_services',
      'railId' => 'service',
      'courses' => $serviceCourses,
    ])
  @endif

  {{-- Upcoming Sessions --}}
  <div class="mb-stack-lg">
    <div class="flex items-center gap-2 mb-4">
      <span class="material-symbols-outlined text-primary">calendar_today</span>
      <h3 class="text-headline-md font-headline-md text-on-surface">Upcoming Sessions</h3>
    </div>
    <div class="surface-card rounded-xl overflow-hidden">
      <div class="overflow-x-auto">
      <table class="w-full text-left min-w-[640px]">
        <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">Session</th>
            <th class="px-5 py-3">Date</th>
            <th class="px-5 py-3">Time</th>
            <th class="px-5 py-3">Format</th>
            <th class="px-5 py-3 text-right">Action</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-outline-variant">
          @forelse($upcomingSessions ?? [] as $session)
            <tr class="text-body-md font-body-md text-on-surface">
              <td class="px-5 py-4 font-semibold">{{ $session['title'] }}</td>
              <td class="px-5 py-4 text-on-surface-variant">{{ $session['date'] }}</td>
              <td class="px-5 py-4 text-on-surface-variant">{{ $session['time'] }}</td>
              <td class="px-5 py-4">
                <span class="inline-block text-label-md font-label-md px-2.5 py-1 rounded-full {{ $session['format'] === 'In-Person' ? 'bg-secondary-container text-on-secondary-container' : 'bg-surface-container-high text-secondary' }}">
                  {{ $session['format'] }}
                </span>
              </td>
              <td class="px-5 py-4 text-right">
                @if(($session['action_state'] ?? 'register') === 'booked')
                  <span class="inline-flex items-center gap-1 text-label-md font-label-md text-primary font-bold">
                    <span class="material-symbols-outlined text-[16px]">check_circle</span> Booked
                  </span>
                @else
                  <button class="bg-primary text-on-primary px-4 py-1.5 rounded-lg text-label-md font-label-md hover:opacity-90 transition-opacity">Register</button>
                @endif
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="5" class="px-5 py-8 text-center text-body-md font-body-md text-outline">No upcoming sessions scheduled.</td>
            </tr>
          @endforelse
        </tbody>
      </table>
      </div>
    </div>
  </div>

  <script>
    function scrollRail(id, dir) {
      var el = document.getElementById('rail-' + id);
      if (el) el.scrollBy({ left: dir * 230, behavior: 'smooth' });
    }
  </script>

@endsection