@extends('layouts.app')
@section('title', 'My Trainings')
@section('content')

  @include('partials.flash')

  <div class="flex items-center justify-between gap-3 mb-stack-lg">
    <p class="text-body-md font-body-md text-outline">Sessions you're leading — upcoming and past.</p>
    <a href="{{ route('trainer.sessions.create') }}"
       class="inline-flex items-center gap-1.5 bg-primary text-on-primary px-5 py-2.5 rounded-lg text-label-md font-label-md hover:opacity-90 transition-opacity whitespace-nowrap">
      <span class="material-symbols-outlined text-[20px]">add</span> Create Session
    </a>
  </div>

  {{-- Upcoming --}}
  <div class="flex items-center gap-2 mb-4">
    <span class="material-symbols-outlined text-primary">event_upcoming</span>
    <h3 class="text-headline-md font-headline-md text-on-surface">Upcoming</h3>
    <span class="text-label-md font-label-md text-outline">({{ $upcoming->count() }})</span>
  </div>
  @if($upcoming->isEmpty())
    <div class="surface-card rounded-xl px-6 py-8 text-center text-body-md font-body-md text-outline mb-stack-lg">No upcoming sessions.</div>
  @else
    <div class="surface-card rounded-xl overflow-hidden mb-stack-lg">
      <div class="overflow-x-auto">
        <table class="w-full text-left min-w-[680px]">
          <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 & Time</th>
              <th class="px-5 py-3">Format</th>
              <th class="px-5 py-3">Booked</th>
              <th class="px-5 py-3 text-right">Actions</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-outline-variant">
            @foreach($upcoming 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 whitespace-nowrap">{{ $session->session_date->format('j M Y') }} <span class="text-outline">· {{ \Carbon\Carbon::parse($session->start_time)->format('H:i') }}</span></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 === 'in_person' ? 'In-Person' : 'Online' }}</span>
                </td>
                <td class="px-5 py-4 text-on-surface-variant">{{ $session->booked_count }}{{ $session->capacity ? ' / ' . $session->capacity : '' }}</td>
                <td class="px-5 py-4">
                  <div class="flex items-center justify-end gap-1">
                    <a href="{{ route('trainer.sessions.show', $session) }}" title="Manage" class="w-9 h-9 flex items-center justify-center rounded-lg text-outline hover:text-primary hover:bg-surface-container-high"><span class="material-symbols-outlined text-[20px]">how_to_reg</span></a>
                    <a href="{{ route('trainer.sessions.edit', $session) }}" title="Edit" class="w-9 h-9 flex items-center justify-center rounded-lg text-outline hover:text-primary hover:bg-surface-container-high"><span class="material-symbols-outlined text-[20px]">edit</span></a>
                  </div>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  @endif

  {{-- Past --}}
  <div class="flex items-center gap-2 mb-4">
    <span class="material-symbols-outlined text-outline">history</span>
    <h3 class="text-headline-md font-headline-md text-on-surface">Past</h3>
    <span class="text-label-md font-label-md text-outline">({{ $past->count() }})</span>
  </div>
  @if($past->isEmpty())
    <div class="surface-card rounded-xl px-6 py-8 text-center text-body-md font-body-md text-outline">No past sessions yet.</div>
  @else
    <div class="surface-card rounded-xl overflow-hidden">
      <div class="overflow-x-auto">
        <table class="w-full text-left min-w-[680px]">
          <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">Attendance</th>
              <th class="px-5 py-3">Notes</th>
              <th class="px-5 py-3 text-right">Action</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-outline-variant">
            @foreach($past 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 whitespace-nowrap">{{ $session->session_date->format('j M Y') }}</td>
                <td class="px-5 py-4 text-on-surface-variant">{{ $session->attended_count }} / {{ $session->booked_count }} attended</td>
                <td class="px-5 py-4">
                  @if($session->notes)
                    <span class="inline-flex items-center gap-1 text-label-md font-label-md text-primary"><span class="material-symbols-outlined text-[16px]">check_circle</span> Added</span>
                  @else
                    <span class="text-label-md font-label-md text-outline">—</span>
                  @endif
                </td>
                <td class="px-5 py-4 text-right">
                  <a href="{{ route('trainer.sessions.show', $session) }}" class="text-label-md font-label-md text-primary font-bold hover:underline">Open</a>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  @endif

@endsection