@extends('layouts.app')
@section('title', 'Training Calendar')
@section('content')

  @include('partials.flash')

  {{-- Month navigation --}}
  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-stack-lg">
    <div class="flex items-center gap-2">
      <a href="{{ route('trainer.sessions.calendar', ['month' => $prevMonth]) }}"
         class="w-10 h-10 rounded-lg bg-surface-container-high text-on-surface-variant flex items-center justify-center hover:bg-surface-container-highest" title="Previous month">
        <span class="material-symbols-outlined">chevron_left</span>
      </a>
      <h3 class="text-headline-md font-headline-md text-on-surface min-w-[190px] text-center">{{ $anchor->format('F Y') }}</h3>
      <a href="{{ route('trainer.sessions.calendar', ['month' => $nextMonth]) }}"
         class="w-10 h-10 rounded-lg bg-surface-container-high text-on-surface-variant flex items-center justify-center hover:bg-surface-container-highest" title="Next month">
        <span class="material-symbols-outlined">chevron_right</span>
      </a>
      <a href="{{ route('trainer.sessions.calendar') }}" class="ml-1 px-3 py-2 rounded-lg text-label-md font-label-md text-primary font-bold hover:bg-primary/10">Today</a>
    </div>
    <div class="flex items-center gap-2">
      <span class="text-label-md font-label-md text-outline">{{ $sessions->count() }} {{ Str::plural('session', $sessions->count()) }} this month</span>
      <a href="{{ route('trainer.sessions.index') }}" class="inline-flex items-center gap-1.5 bg-surface-container-high text-on-surface-variant px-4 py-2.5 rounded-lg text-label-md font-label-md hover:bg-surface-container-highest">
        <span class="material-symbols-outlined text-[18px]">list</span> List
      </a>
      <a href="{{ route('trainer.sessions.create') }}" class="inline-flex items-center gap-1.5 bg-primary text-on-primary px-4 py-2.5 rounded-lg text-label-md font-label-md hover:opacity-90">
        <span class="material-symbols-outlined text-[18px]">add</span> New training
      </a>
    </div>
  </div>

  {{-- Month grid --}}
  <div class="surface-card rounded-xl p-4">
    <div class="overflow-x-auto">
      <div class="min-w-[760px]">
        <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>

        <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-[112px] 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'] as $s)
                    <a href="{{ route('trainer.sessions.show', $s) }}"
                       class="block rounded-md px-1.5 py-1 text-left bg-primary/10 hover:bg-primary/20 transition-colors"
                       title="{{ $s->title }} · {{ \Carbon\Carbon::parse($s->start_time)->format('H:i') }} · {{ $s->booked_count }} booked">
                      <p class="text-[11px] font-bold text-primary leading-tight truncate">{{ \Carbon\Carbon::parse($s->start_time)->format('H:i') }} {{ $s->title }}</p>
                      <p class="text-[10px] text-outline leading-tight flex items-center gap-1">
                        @if($s->recurrence_group_id)<span class="material-symbols-outlined text-[11px]">repeat</span>@endif
                        {{ $s->booked_count }} booked
                      </p>
                    </a>
                  @endforeach
                </div>
              @endforeach
            </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>

@endsection