@extends('layouts.app')
@section('title', 'Trainer Dashboard')
@section('content')

  @include('partials.flash')

  {{-- Hero + create --}}
  <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 md:items-center justify-between gap-6">
      <div class="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">Schedule training, mark attendance and share your notes with attendees.</p>
      </div>
      <a href="{{ route('trainer.sessions.create') }}" class="shrink-0 inline-flex items-center gap-1.5 bg-surface-container-lowest text-primary px-5 py-2.5 rounded-lg text-label-md font-label-md hover:scale-105 transition-transform">
        <span class="material-symbols-outlined text-[20px]">add</span> Create Session
      </a>
    </div>
  </div>

  {{-- Stats --}}
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-stack-lg">
    @php
      $tiles = [
        ['label' => 'Upcoming Sessions', 'value' => $stats['upcoming'], 'icon' => 'event_upcoming', 'class' => 'text-primary'],
        ['label' => 'Completed Sessions', 'value' => $stats['past'], 'icon' => 'history', 'class' => 'text-secondary'],
        ['label' => 'Total Attendees', 'value' => $stats['attendees'], 'icon' => 'groups', 'class' => 'text-on-secondary-container'],
      ];
    @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>

  {{-- Upcoming --}}
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center gap-2">
      <span class="material-symbols-outlined text-primary">event_upcoming</span>
      <h3 class="text-headline-md font-headline-md text-on-surface">Your Upcoming Sessions</h3>
    </div>
    <a href="{{ route('trainer.sessions.index') }}" class="text-label-md font-label-md text-primary font-bold hover:underline">All trainings</a>
  </div>

  @if($upcoming->isEmpty())
    <div class="surface-card rounded-xl px-6 py-12 text-center">
      <span class="material-symbols-outlined text-[42px] text-outline mb-2">event_available</span>
      <p class="text-body-lg font-body-lg text-on-surface font-semibold">No upcoming sessions</p>
      <p class="text-body-md font-body-md text-outline mb-4">Create your first training session to get started.</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">
        <span class="material-symbols-outlined text-[20px]">add</span> Create Session
      </a>
    </div>
  @else
    <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 & 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">Action</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 text-right">
                  <a href="{{ route('trainer.sessions.show', $session) }}" class="text-label-md font-label-md text-primary font-bold hover:underline">Manage</a>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  @endif

@endsection