{{--
    My Courses — full enrolled-course listing.
    From EmployeeCourseController@index:
      $courses = Collection<Course> each with ->pivot->status (live) and ->pivot->progress_percent
      $stats   = ['total','completed','in_progress','overdue']
--}}
@extends('layouts.app')
@section('title', 'My Courses')
@section('content')

  @include('employee._flash')

  {{-- Summary tiles --}}
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-stack-lg">
    @php
      $tiles = [
        ['label' => 'Assigned', 'value' => $stats['total'], 'icon' => 'school', 'class' => 'text-primary'],
        ['label' => 'Completed', 'value' => $stats['completed'], 'icon' => 'task_alt', 'class' => 'text-on-secondary-container'],
        ['label' => 'In Progress', 'value' => $stats['in_progress'], 'icon' => 'timelapse', 'class' => 'text-secondary'],
        ['label' => 'Overdue', 'value' => $stats['overdue'], 'icon' => 'warning', 'class' => 'text-error'],
      ];
    @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>

  {{-- Filter tabs --}}
  <div class="flex flex-wrap items-center gap-2 mb-stack-lg" id="courseFilters">
    @php
      $filters = [
        'all' => 'All',
        'mandatory' => 'Mandatory',
        'service_specific' => 'Service Specific',
        'overdue' => 'Overdue',
        'completed' => 'Completed',
      ];
    @endphp
    @foreach($filters as $key => $label)
      <button type="button" data-filter="{{ $key }}"
        class="course-filter px-4 py-2 rounded-full text-label-md font-label-md border transition-colors hover:bg-surface-container-high hover:text-on-surface {{ $loop->first ? 'bg-primary text-on-primary border-primary' : 'text-on-surface-variant border-outline-variant' }}">
        {{ $label }}
      </button>
    @endforeach
  </div>

  {{-- Course grid --}}
  @if($courses->isEmpty())
    <div class="surface-card rounded-xl px-6 py-12 text-center">
      <span class="material-symbols-outlined text-[42px] text-outline mb-2">school</span>
      <p class="text-body-lg font-body-lg text-on-surface font-semibold">No courses assigned yet</p>
      <p class="text-body-md font-body-md text-outline">When your manager assigns training, it'll appear here.</p>
    </div>
  @else
    <div class="flex flex-wrap gap-5" id="courseGrid">
      @foreach($courses as $course)
        @php
          $status = $course->pivot->status ?? 'not_started';
          $progress = $course->pivot->progress_percent ?? 0;
          $badge = match($status) {
            'completed'   => ['label' => 'Completed', 'class' => 'bg-secondary-container text-on-secondary-container'],
            'overdue'     => ['label' => 'Overdue', 'class' => 'bg-error-container text-error'],
            'in_progress' => ['label' => $progress . '% done', 'class' => 'bg-primary/10 text-primary'],
            default       => ['label' => 'Not started', 'class' => 'bg-surface-container-high text-on-surface-variant'],
          };
        @endphp
        <a href="{{ auth()->user()->learnRoute('course.show', $course->slug) }}"
           class="course-card surface-card rounded-xl w-full sm:w-[300px] sm:shrink-0 overflow-hidden hover:-translate-y-0.5 transition-transform"
           data-category="{{ $course->category }}" data-status="{{ $status }}">
          <div class="relative h-[200px] bg-surface-container-high">
            @if($course->thumbnail)
              <img src="{{ asset('storage/' . $course->thumbnail) }}" alt="{{ $course->title }}" class="absolute inset-0 w-full h-full object-cover">
            @else
              <div class="absolute inset-0 flex items-center justify-center text-outline">
                <span class="material-symbols-outlined text-[52px]">school</span>
              </div>
            @endif
            <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-black/60 to-transparent pointer-events-none"></div>
            <span class="absolute bottom-3.5 right-3 text-[12px] font-bold bg-black/60 text-white px-2.5 py-1 rounded-md">
              {{ $course->duration_minutes }} min
            </span>
            <div class="absolute bottom-0 left-0 right-0 h-1.5 bg-black/20">
              <div class="h-full bg-primary" style="width: {{ $progress }}%"></div>
            </div>
          </div>
          <div class="p-4">
            @if($course->category === 'service_specific')
              <p class="text-[11px] font-bold text-primary uppercase tracking-wide mb-1.5">Service Specific</p>
            @else
              <p class="text-[11px] font-bold text-outline uppercase tracking-wide mb-1.5">Mandatory</p>
            @endif
            <p class="text-body-lg font-body-lg text-on-surface font-semibold leading-snug mb-3 line-clamp-2">{{ $course->title }}</p>
            <span class="inline-block text-[12px] font-bold px-2.5 py-1 rounded-full {{ $badge['class'] }}">{{ $badge['label'] }}</span>
          </div>
        </a>
      @endforeach
    </div>

    <p class="text-body-md font-body-md text-outline mt-stack-lg hidden" id="courseEmptyFilter">
      No courses match this filter.
    </p>
  @endif

  <script>
    (function () {
      var buttons = document.querySelectorAll('.course-filter');
      var cards = document.querySelectorAll('.course-card');
      var emptyMsg = document.getElementById('courseEmptyFilter');

      function apply(filter) {
        var visible = 0;
        cards.forEach(function (card) {
          var cat = card.getAttribute('data-category');
          var status = card.getAttribute('data-status');
          var show = filter === 'all'
            || filter === cat
            || filter === status;
          card.style.display = show ? '' : 'none';
          if (show) visible++;
        });
        if (emptyMsg) emptyMsg.classList.toggle('hidden', visible !== 0);
      }

      buttons.forEach(function (btn) {
        btn.addEventListener('click', function () {
          buttons.forEach(function (b) {
            b.classList.remove('bg-primary', 'text-on-primary', 'border-primary');
            b.classList.add('text-on-surface-variant');
          });
          btn.classList.add('bg-primary', 'text-on-primary', 'border-primary');
          btn.classList.remove('text-on-surface-variant');
          apply(btn.getAttribute('data-filter'));
        });
      });
    })();
  </script>

@endsection