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

  <a href="{{ route('trainer.sessions.index') }}" class="inline-flex items-center gap-1 text-label-md font-label-md text-outline hover:text-primary mb-stack-lg">
    <span class="material-symbols-outlined text-[18px]">arrow_back</span> Back to My Trainings
  </a>

  @include('partials.flash')

  @php $isPast = $session->session_date->isPast(); @endphp

  {{-- Session header --}}
  <div class="surface-card rounded-xl p-6 mb-stack-lg">
    <div class="flex flex-col md:flex-row md:items-start justify-between gap-4">
      <div>
        <div class="flex items-center gap-2 flex-wrap mb-2">
          <h3 class="text-headline-md font-headline-md text-on-surface">{{ $session->title }}</h3>
          @if($session->training_code)
            <span class="inline-flex items-center gap-1 text-label-md font-label-md px-2.5 py-1 rounded-full bg-secondary-container text-on-secondary-container font-bold tracking-wide">
              <span class="material-symbols-outlined text-[15px]">sell</span>{{ $session->training_code }}
            </span>
          @endif
          <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>
          @if($isPast)<span class="inline-block text-label-md font-label-md px-2.5 py-1 rounded-full bg-surface-container-high text-outline">Completed</span>@endif
        </div>
        <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-body-md font-body-md text-on-surface-variant">
          <span class="flex items-center gap-1.5"><span class="material-symbols-outlined text-[18px] text-outline">calendar_month</span>{{ $session->session_date->format('l, j F Y') }}</span>
          <span class="flex items-center gap-1.5"><span class="material-symbols-outlined text-[18px] text-outline">schedule</span>{{ \Carbon\Carbon::parse($session->start_time)->format('H:i') }} · {{ $session->duration_minutes }} min</span>
          <span class="flex items-center gap-1.5"><span class="material-symbols-outlined text-[18px] text-outline">{{ $session->format === 'online' ? 'videocam' : 'location_on' }}</span>{{ $session->format === 'online' ? ($session->teams_link ? 'Microsoft Teams' : 'Online') : ($session->location ?? 'Venue TBC') }}</span>
        </div>
      </div>
      <div class="flex items-center gap-2 shrink-0">
        @unless($isPast)
          <a href="{{ route('trainer.sessions.edit', $session) }}" class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg border border-outline-variant text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high"><span class="material-symbols-outlined text-[18px]">edit</span> Edit</a>
        @endunless
        <form method="POST" action="{{ route('trainer.sessions.destroy', $session) }}" class="m-0" onsubmit="return confirm('Delete this session?');">
          @csrf @method('DELETE')
          <button type="submit" class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-label-md font-label-md text-error hover:bg-error-container"><span class="material-symbols-outlined text-[18px]">delete</span> Delete</button>
        </form>
        @if($session->recurrence_group_id)
          <form method="POST" action="{{ route('trainer.sessions.series.destroy', $session) }}" class="m-0" onsubmit="return confirm('Delete EVERY session in this recurring series?');">
            @csrf @method('DELETE')
            <button type="submit" class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-label-md font-label-md text-error hover:bg-error-container"><span class="material-symbols-outlined text-[18px]">delete_sweep</span> Delete series</button>
          </form>
        @endif
      </div>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-gutter">
    {{-- Attendance --}}
    <div>
      <div class="flex items-center gap-2 mb-4">
        <span class="material-symbols-outlined text-primary">how_to_reg</span>
        <h3 class="text-headline-md font-headline-md text-on-surface">Attendance</h3>
        <span class="text-label-md font-label-md text-outline">({{ $attendees->count() }})</span>
      </div>
      @php
        $open = $session->attendanceOpen();
        $sum = [
          'attended' => $attendees->where('pivot.status', 'attended')->count(),
          'no_show' => $attendees->where('pivot.status', 'no_show')->count(),
          'on_leave' => $attendees->where('pivot.status', 'on_leave')->count(),
        ];
      @endphp

      {{-- Attendance window notice --}}
      @unless($open)
        <div class="flex items-start gap-3 rounded-xl border border-gold/40 bg-gold/10 p-4 mb-4">
          <span class="material-symbols-outlined text-[#8a6d3b]">schedule</span>
          <div>
            <p class="text-body-md font-body-md text-on-surface font-semibold">Attendance not open yet</p>
            <p class="text-label-md font-label-md text-outline">You can mark attendance from <strong>{{ $session->attendanceOpensAt()->format('H:i, j M Y') }}</strong> — 10 minutes before the training starts.</p>
          </div>
        </div>
      @endunless

      {{-- Attendance summary (report) --}}
      @if($sum['attended'] || $sum['no_show'] || $sum['on_leave'])
        <div class="flex flex-wrap items-center gap-2 mb-3">
          <span class="text-label-md font-label-md px-2.5 py-1 rounded-full bg-primary/10 text-primary font-bold">{{ $sum['attended'] }} attended</span>
          @if($sum['no_show'])<span class="text-label-md font-label-md px-2.5 py-1 rounded-full bg-error-container text-error font-bold">{{ $sum['no_show'] }} no-show</span>@endif
          @if($sum['on_leave'])<span class="text-label-md font-label-md px-2.5 py-1 rounded-full bg-gold/20 text-on-surface font-bold">{{ $sum['on_leave'] }} on leave</span>@endif
        </div>
      @endif

      <form method="POST" action="{{ route('trainer.sessions.attendance', $session) }}">
        @csrf
        <div class="surface-card rounded-xl overflow-hidden">
          @if($attendees->isEmpty())
            <div class="px-5 py-12 text-center text-body-md font-body-md text-outline">
              No one is booked onto this session yet.
            </div>
          @else
            <ul class="divide-y divide-outline-variant">
              @foreach($attendees as $attendee)
                @php
                  $st = $attendee->pivot->status;
                  $badge = match($st) {
                    'attended' => ['label' => 'Attended', 'class' => 'text-primary'],
                    'no_show'  => ['label' => 'No-show', 'class' => 'text-error'],
                    'on_leave' => ['label' => 'On leave', 'class' => 'text-[#8a6d3b]'],
                    default    => ['label' => 'Booked', 'class' => 'text-outline'],
                  };
                  $onLeave = $st === 'on_leave';
                @endphp
                <li class="flex items-center gap-3 px-5 py-3 {{ $onLeave ? 'bg-gold/5' : '' }}">
                  <input type="checkbox" name="present[]" value="{{ $attendee->id }}" @checked($st === 'attended')
                    @disabled(! $open || $onLeave)
                    class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary/20 disabled:opacity-40">
                  <div class="w-9 h-9 rounded-full bg-secondary-container flex items-center justify-center text-primary font-bold text-label-md shrink-0">
                    {{ strtoupper(collect(explode(' ', $attendee->name))->map(fn($n) => $n[0] ?? '')->take(2)->implode('')) }}
                  </div>
                  <div class="flex-1 min-w-0">
                    <p class="text-body-md font-body-md text-on-surface font-semibold">{{ $attendee->name }}</p>
                    <p class="text-label-md font-label-md {{ $badge['class'] }}">
                      {{ $badge['label'] }}@if($attendee->pivot->note) · {{ $attendee->pivot->note }}@endif
                    </p>
                  </div>
                </li>
              @endforeach
            </ul>
            <div class="px-5 py-4 border-t border-outline-variant flex flex-col sm:flex-row sm:items-center justify-between gap-2">
              <p class="text-label-md font-label-md text-outline">
                {{ $open ? 'Tick everyone who attended, then save. You can update this later.' : 'Opens '.$session->attendanceOpensAt()->diffForHumans().'.' }}
              </p>
              <button type="submit" @disabled(! $open)
                class="bg-primary text-on-primary px-5 py-2 rounded-lg text-label-md font-label-md hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed">
                Save Attendance
              </button>
            </div>
          @endif
        </div>
      </form>
    </div>

    {{-- Training notes --}}
    <div>
      <div class="flex items-center gap-2 mb-4">
        <span class="material-symbols-outlined text-primary">edit_note</span>
        <h3 class="text-headline-md font-headline-md text-on-surface">Training Notes</h3>
      </div>
      <form method="POST" action="{{ route('trainer.sessions.notes', $session) }}">
        @csrf
        <div class="surface-card rounded-xl p-6">
          <p class="text-label-md font-label-md text-outline mb-3">These notes are shared with attendees after the session (summary, follow-up actions, resources).</p>
          <textarea name="notes" rows="10" placeholder="Add notes for attendees…"
            class="w-full px-4 py-2.5 bg-surface-container rounded-lg border-none focus:ring-2 focus:ring-primary/20 text-body-md outline-none">{{ old('notes', $session->notes) }}</textarea>
          <div class="flex justify-end mt-4">
            <button type="submit" class="bg-primary text-on-primary px-5 py-2 rounded-lg text-label-md font-label-md hover:opacity-90 transition-opacity">Save Notes</button>
          </div>
        </div>
      </form>
    </div>
  </div>

@endsection