✨ Add event management to meetups landing pages

- Added route for event pages within meetups.
- Updated meetups landing page to display upcoming events.
- Implemented individual event detail pages.
- Enhanced meetups table with the next event column.

resources/views/livewire/meetups/index.blade.php

@@ -62,6 +62,7 @@ new class extends Component {
             <flux:table.column sortable :sorted="$sortBy === 'name'" :direction="$sortDirection"
                                wire:click="sort('name')">{{ __('Name') }}
             </flux:table.column>
+            <flux:table.column>{{ __('Nächster Termin') }}</flux:table.column>
             <flux:table.column>{{ __('Links') }}</flux:table.column>
             <flux:table.column>{{ __('Aktionen') }}</flux:table.column>
         </flux:table.columns>
@@ -87,6 +88,21 @@ new class extends Component {
                         </div>
                     </flux:table.cell>
 
+                    <flux:table.cell>
+                        @if($meetup->nextEvent && $meetup->nextEvent['start']->isFuture())
+                            <div class="flex flex-col gap-1">
+                                <flux:badge color="green" size="sm">
+                                    {{ $meetup->nextEvent['start']->format('d.m.Y H:i') }}
+                                </flux:badge>
+                                <div class="text-xs text-zinc-500 flex items-center gap-2">
+                                    <span>{{ $meetup->nextEvent['attendees'] }} Zusagen</span>
+                                    <flux:separator vertical/>
+                                    <span>{{ $meetup->nextEvent['might_attendees'] }} Vielleicht</span>
+                                </div>
+                            </div>
+                        @endif
+                    </flux:table.cell>
+
                     <flux:table.cell>
                         <div class="flex gap-2">
                             @if($meetup->telegram_link)

resources/views/livewire/meetups/landingpage-event.blade.php

@@ -0,0 +1,118 @@
+<?php
+
+use App\Models\MeetupEvent;
+use Livewire\Volt\Component;
+
+new class extends Component {
+    public MeetupEvent $event;
+    public $country = 'de';
+
+    public function mount(): void
+    {
+        $this->country = request()->route('country');
+    }
+
+    public function with(): array
+    {
+        return [
+            'event' => $this->event->load('meetup'),
+        ];
+    }
+}; ?>
+
+<div class="container mx-auto px-4 py-8">
+    <!-- Breadcrumb -->
+    <div class="mb-6">
+        <flux:text class="text-sm text-zinc-600 dark:text-zinc-400">
+            <a href="{{ route('meetups.landingpage', ['meetup' => $event->meetup->slug, 'country' => $country]) }}" class="hover:underline">
+                {{ $event->meetup->name }}
+            </a>
+            <span class="mx-2">/</span>
+            <span>{{ $event->start->format('d.m.Y') }}</span>
+        </flux:text>
+    </div>
+
+    <!-- Event Details -->
+    <flux:card class="max-w-3xl">
+        <flux:heading size="xl" class="mb-4">
+            <flux:icon.calendar class="inline w-6 h-6 mr-2" />
+            {{ $event->start->format('d.m.Y') }}
+        </flux:heading>
+
+        <div class="space-y-4">
+            <!-- Date and Time -->
+            <div class="flex items-center text-zinc-700 dark:text-zinc-300">
+                <flux:icon.clock class="w-5 h-5 mr-3" />
+                <div>
+                    <div class="font-semibold">{{ $event->start->format('H:i') }} Uhr</div>
+                    <div class="text-sm text-zinc-600 dark:text-zinc-400">{{ $event->start->isoFormat('dddd, D. MMMM YYYY') }}</div>
+                </div>
+            </div>
+
+            <!-- Location -->
+            @if($event->location)
+                <div class="flex items-center text-zinc-700 dark:text-zinc-300">
+                    <flux:icon.map-pin class="w-5 h-5 mr-3" />
+                    <div>
+                        <div class="font-semibold">{{ __('Ort') }}</div>
+                        <div class="text-sm">{{ $event->location }}</div>
+                    </div>
+                </div>
+            @endif
+
+            <!-- Description -->
+            @if($event->description)
+                <div class="pt-4 border-t border-zinc-200 dark:border-zinc-700">
+                    <flux:heading size="lg" class="mb-2">{{ __('Beschreibung') }}</flux:heading>
+                    <flux:text class="whitespace-pre-wrap">{{ $event->description }}</flux:text>
+                </div>
+            @endif
+
+            <!-- Link -->
+            @if($event->link)
+                <div class="pt-4">
+                    <flux:button href="{{ $event->link }}" target="_blank" variant="primary">
+                        <flux:icon.arrow-top-right-on-square class="w-5 h-5 mr-2" />
+                        {{ __('Mehr Informationen') }}
+                    </flux:button>
+                </div>
+            @endif
+
+            <!-- Attendees -->
+            @if($event->attendees && count($event->attendees) > 0)
+                <div class="pt-4 border-t border-zinc-200 dark:border-zinc-700">
+                    <flux:heading size="lg" class="mb-2">
+                        {{ __('Zusagen') }} ({{ count($event->attendees) }})
+                    </flux:heading>
+                    <div class="flex flex-wrap gap-2">
+                        @foreach($event->attendees as $attendee)
+                            <flux:badge>{{ $attendee }}</flux:badge>
+                        @endforeach
+                    </div>
+                </div>
+            @endif
+
+            <!-- Might Attend -->
+            @if($event->might_attendees && count($event->might_attendees) > 0)
+                <div class="pt-4 border-t border-zinc-200 dark:border-zinc-700">
+                    <flux:heading size="lg" class="mb-2">
+                        {{ __('Vielleicht') }} ({{ count($event->might_attendees) }})
+                    </flux:heading>
+                    <div class="flex flex-wrap gap-2">
+                        @foreach($event->might_attendees as $attendee)
+                            <flux:badge variant="outline">{{ $attendee }}</flux:badge>
+                        @endforeach
+                    </div>
+                </div>
+            @endif
+        </div>
+    </flux:card>
+
+    <!-- Back Button -->
+    <div class="mt-6">
+        <flux:button href="{{ route('meetups.landingpage', ['meetup' => $event->meetup->slug, 'country' => $country]) }}" variant="ghost">
+            <flux:icon.arrow-left class="w-5 h-5 mr-2" />
+            {{ __('Zurück zum Meetup') }}
+        </flux:button>
+    </div>
+</div>

resources/views/livewire/meetups/landingpage.blade.php

@@ -1,15 +1,27 @@
 <?php
 
 use App\Models\Meetup;
+use App\Models\MeetupEvent;
 use Livewire\Volt\Component;
 
 new class extends Component {
     public Meetup $meetup;
 
+    public $country = 'de';
+
+    public function mount(): void
+    {
+        $this->country = request()->route('country');
+    }
+
     public function with(): array
     {
         return [
             'meetup' => $this->meetup,
+            'events' => $this->meetup->meetupEvents()
+                ->where('start', '>=', now())
+                ->orderBy('start', 'asc')
+                ->get(),
         ];
     }
 }; ?>
@@ -165,4 +177,40 @@ new class extends Component {
             </div>
         </div>
     </div>
+
+    <!-- Events Section -->
+    @if($events->isNotEmpty())
+        <div class="mt-16">
+            <flux:heading size="xl" class="mb-6">{{ __('Kommende Veranstaltungen') }}</flux:heading>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                @foreach($events as $event)
+                    <a href="{{ route('meetups.landingpage-event', ['meetup' => $meetup->slug, 'event' => $event->id, 'country' => $country]) }}" aria-label="{{ $event->description ?? 'Event details' }}">
+                        <flux:card size="sm" class="hover:bg-zinc-50 dark:hover:bg-zinc-700 h-full">
+                            <flux:heading class="flex items-center gap-2">
+                                {{ $event->start->format('d.m.Y') }}
+                                <flux:icon name="arrow-up-right" class="ml-auto text-zinc-400" variant="micro" />
+                            </flux:heading>
+
+                            <flux:text class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+                                <flux:icon.clock class="inline w-4 h-4" />
+                                {{ $event->start->format('H:i') }} Uhr
+                            </flux:text>
+
+                            @if($event->location)
+                                <flux:text class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
+                                    <flux:icon.map-pin class="inline w-4 h-4" />
+                                    {{ $event->location }}
+                                </flux:text>
+                            @endif
+
+                            @if($event->description)
+                                <flux:text class="mt-2">{{ Str::limit($event->description, 100) }}</flux:text>
+                            @endif
+                        </flux:card>
+                    </a>
+                @endforeach
+            </div>
+        </div>
+    @endif
 </div>