{{--
    Training Sessions — calendar (this month / next month / year) + agenda.
    From EmployeeSessionController@index: $filter, $anchor, $periodLabel,
    $sessions, $byDate, $weeks, $myStatuses
--}}
@extends('layouts.app')
@section('title', 'Training Sessions')
@section('content')

  @include('employee._flash')

  {{-- Toolbar: filter segmented control + period label --}}
  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-stack-lg">
    <div class="inline-flex bg-surface-container rounded-lg p-1">
      @php
        $filters = ['this_month' => 'This Month', 'next_month' => 'Next Month', 'year' => 'This Year'];
      @endphp
      @foreach($filters as $key => $label)
        <a href="{{ auth()->user()->learnRoute('sessions', ['filter' => $key]) }}"
           class="px-4 py-2 rounded-md text-label-md font-label-md transition-colors {{ $filter === $key ? 'bg-primary text-on-primary shadow-sm' : 'text-on-surface-variant hover:text-primary' }}">
          {{ $label }}
        </a>
      @endforeach
    </div>
    <div class="flex items-center gap-2">
      <span class="material-symbols-outlined text-primary">calendar_month</span>
      <span class="text-headline-md font-headline-md text-on-surface">{{ $periodLabel }}</span>
    </div>
  </div>

  {{-- Calendar grid (month views only) --}}
  @if($weeks)
    <div class="surface-card rounded-xl p-4 mb-stack-lg">
      <div class="overflow-x-auto">
        <div class="min-w-[720px]">
          {{-- Weekday header --}}
          <div class="grid grid-cols-7 gap-2 mb-2">
            @foreach(['Mon','Tue','Wed','Thu','Fri','Sat','Sun'] as $dow)
              <div class="text-label-md font-label-md text-outline uppercase tracking-wide text-center py-1">{{ $dow }}</div>
            @endforeach
          </div>

          {{-- Weeks --}}
          <div class="space-y-2">
            @foreach($weeks as $week)
              <div class="grid grid-cols-7 gap-2">
                @foreach($week as $day)
                  <div class="min-h-[104px] rounded-lg p-1.5 flex flex-col gap-1 border {{ $day['isToday'] ? 'border-primary bg-primary/5' : 'border-outline-variant/50' }} {{ $day['inMonth'] ? '' : 'opacity-40' }}">
                    <div class="text-right">
                      <span class="inline-flex items-center justify-center w-6 h-6 text-label-md font-label-md rounded-full {{ $day['isToday'] ? 'bg-primary text-on-primary font-bold' : 'text-on-surface-variant' }}">
                        {{ $day['date']->format('j') }}
                      </span>
                    </div>
                    @foreach($day['sessions']->take(3) as $s)
                      @php
                        $st = $myStatuses[$s->id] ?? null;
                        $booked = $st && $st !== 'cancelled';
                        $pill = $booked
                          ? 'bg-primary/10 text-primary ring-1 ring-primary/30'
                          : ($s->format === 'in_person' ? 'bg-secondary-container text-on-secondary-container' : 'bg-surface-container-high text-secondary');
                      @endphp
                      <a href="#session-{{ $s->id }}" title="{{ $s->title }}"
                         class="block rounded px-1.5 py-1 text-[11px] leading-tight font-semibold truncate {{ $pill }} hover:opacity-80 transition-opacity">
                        <span class="tabular-nums">{{ \Carbon\Carbon::parse($s->start_time)->format('H:i') }}</span> {{ $s->title }}
                      </a>
                    @endforeach
                    @if($day['sessions']->count() > 3)
                      <span class="text-[11px] font-semibold text-outline px-1.5">+{{ $day['sessions']->count() - 3 }} more</span>
                    @endif
                  </div>
                @endforeach
              </div>
            @endforeach
          </div>
        </div>
      </div>

      {{-- Legend --}}
      <div class="flex flex-wrap items-center gap-4 mt-4 pt-3 border-t border-outline-variant/60 text-label-md font-label-md text-outline">
        <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded bg-primary/10 ring-1 ring-primary/30"></span> Registered</span>
        <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded bg-secondary-container"></span> In-Person</span>
        <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded bg-surface-container-high"></span> Online</span>
      </div>
    </div>
  @endif

  {{-- Agenda --}}
  <div class="flex items-center gap-2 mb-4">
    <span class="material-symbols-outlined text-primary">event_note</span>
    <h3 class="text-headline-md font-headline-md text-on-surface">
      {{ $filter === 'year' ? 'Sessions This Year' : 'Sessions in ' . $periodLabel }}
    </h3>
    <span class="ml-1 text-label-md font-label-md text-outline">({{ $sessions->count() }})</span>
  </div>

  @if($sessions->isEmpty())
    <div class="surface-card rounded-xl px-6 py-12 text-center">
      <span class="material-symbols-outlined text-[42px] text-outline mb-2">calendar_today</span>
      <p class="text-body-lg font-body-lg text-on-surface font-semibold">No sessions in this period</p>
      <p class="text-body-md font-body-md text-outline">Try another range, or check back once new dates are scheduled.</p>
    </div>
  @elseif($filter === 'year')
    {{-- Year view: group agenda by month --}}
    @foreach($sessions->groupBy(fn ($s) => $s->session_date->format('Y-m')) as $monthKey => $monthSessions)
      <div class="mb-stack-lg">
        <p class="text-label-md font-label-md text-outline uppercase tracking-wide mb-3">
          {{ \Carbon\Carbon::createFromFormat('Y-m', $monthKey)->format('F Y') }}
          <span class="text-outline/70">· {{ $monthSessions->count() }}</span>
        </p>
        <div class="space-y-4">
          @foreach($monthSessions as $session)
            @include('employee._session-agenda-item')
          @endforeach
        </div>
      </div>
    @endforeach
  @else
    <div class="space-y-4">
      @foreach($sessions as $session)
        @include('employee._session-agenda-item')
      @endforeach
    </div>
  @endif

@endsection