@extends('layouts.public')

@section('title', 'Programme')

@section('content')
    <x-inner-hero kicker="Programme" title="Two days, one agenda." subtitle="Sessions, workshops and networking across the symposium. Times are shown in local time and may be updated by the organisers." />

    <section class="mesh-light py-14 sm:py-20">
        <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
            @forelse ($sessionsByDay as $day => $sessions)
                @php($date = \Illuminate\Support\Carbon::parse($day, $event['timezone']))
                <div class="{{ $loop->first ? '' : 'mt-16' }}">
                    <div class="flex items-baseline gap-4 border-b-2 border-emerald-500 pb-3">
                        <span class="font-display text-5xl font-bold text-emerald-500">{{ $date->format('j') }}</span>
                        <div>
                            <h2 class="font-display text-2xl font-semibold text-navy-900">{{ $date->format('l') }}</h2>
                            <p class="text-sm text-navy-500">{{ $date->format('F Y') }} &middot; Day {{ $loop->iteration }}</p>
                        </div>
                    </div>

                    <ol class="divide-y divide-navy-100">
                        @foreach ($sessions as $session)
                            <li class="grid gap-2 py-6 sm:grid-cols-[9rem_1fr] sm:gap-8">
                                <p class="font-display text-lg font-semibold text-navy-900">
                                    {{ $session->starts_at->timezone($event['timezone'])->format('H:i') }}
                                    @if ($session->ends_at)
                                        <span class="text-navy-200">–</span> {{ $session->ends_at->timezone($event['timezone'])->format('H:i') }}
                                    @endif
                                </p>
                                <div>
                                    <h3 class="font-display text-xl font-semibold text-navy-900">{{ $session->title }}</h3>
                                    @if ($session->description)
                                        <p class="mt-1 text-navy-500">{{ $session->description }}</p>
                                    @endif
                                    <p class="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-sm font-medium text-turquoise-700">
                                        @if ($session->speaker_name) <span>{{ $session->speaker_name }}</span> @endif
                                        @if ($session->room) <span>{{ $session->room }}</span> @endif
                                    </p>
                                </div>
                            </li>
                        @endforeach
                    </ol>
                </div>
            @empty
                <div class="surface p-10 text-center">
                    <h2 class="font-display text-2xl font-semibold text-navy-900">The programme is being finalised.</h2>
                    <p class="mt-2 text-navy-500">Check back soon, or register now to receive updates.</p>
                    <a href="{{ route('registration.create') }}" class="btn-primary mt-6">Register</a>
                </div>
            @endforelse
        </div>
    </section>
@endsection