@extends('layouts.app')

@section('content')
@php($heroData = data_get($hero, 'data', []))
@php($listingData = data_get($listing, 'data', []))
@php($ctaData = data_get($cta, 'data', []))
@php($filters = array_filter(['type' => $eventTypeId, 'status' => $temporalStatus !== 'all' ? $temporalStatus : null], fn ($value) => $value !== null))
<main>
    <section class="events-hero relative overflow-hidden text-cream">
        @if($media)<img class="absolute inset-0 h-full w-full object-cover" src="{{ $media->url() }}" alt="{{ $media->translation($locale)?->alt_text ?? '' }}" loading="eager">@endif
        <div class="absolute inset-0 bg-gradient-to-r from-olive/95 via-olive/72 to-olive/44"></div>
        <div class="bg-leaf pointer-events-none absolute inset-0 opacity-[.05]"></div>
        <div class="container-page relative flex h-full flex-col justify-end pb-16 md:pb-20">@can('update',$page)<livewire:events-page-inline-editor :page="$page" :locale="$locale" section-key="events.hero" />@endcan<p class="eyebrow text-cream/68">{{ $heroData['eyebrow'] ?? '' }}</p><h1 class="display-hero mt-4 max-w-3xl">{{ $heroData['title'] ?? $translation->title }}</h1><p class="mt-5 max-w-2xl text-base leading-relaxed text-cream/82 md:text-lg">{{ $heroData['summary'] ?? $translation->summary }}</p></div>
    </section>

    @if($featuredEvent)
        @php($featuredTranslation = $featuredEvent->translation($locale))
        @php($featuredStatus = $featuredEvent->temporalStatus())
        <section class="bg-cream py-20 md:py-28" aria-labelledby="featured-event-heading">
            <div class="container-page"><div class="events-section-label"><span></span><p class="eyebrow">{{ $locale === 'ar' ? 'فعالية مميزة' : 'Featured Event' }}</p></div>
                <article class="events-featured mt-9">
                    <figure class="events-featured-image">@if($featuredEvent->primaryMedia)<img src="{{ $featuredEvent->primaryMedia->url() }}" alt="{{ $featuredEvent->primaryMedia->translation($locale)?->alt_text ?? $featuredTranslation?->title }}" loading="lazy">@endif @can('update',$featuredEvent)<livewire:event-inline-editor :event="$featuredEvent" :locale="$locale" :key="'featured-event-'.$featuredEvent->id" />@endcan</figure>
                    <div class="events-featured-content"><div class="events-meta"><span class="event-status" data-status="{{ $featuredStatus }}">{{ $listingData[$featuredStatus.'_label'] ?? ucfirst($featuredStatus) }}</span><span>{{ $featuredEvent->eventType->translation($locale)?->name }}</span></div><h2 id="featured-event-heading">{{ $featuredTranslation?->title }}</h2><dl class="event-detail-list"><div><dt>{{ $locale === 'ar' ? 'التاريخ' : 'Date' }}</dt><dd>{{ $featuredEvent->starts_at->translatedFormat('d M Y') }}@if($featuredEvent->ends_at) – {{ $featuredEvent->ends_at->translatedFormat('d M Y') }}@endif</dd></div><div><dt>{{ $locale === 'ar' ? 'الموقع' : 'Location' }}</dt><dd>{{ $featuredTranslation?->venue }}</dd></div></dl><p>{{ $featuredTranslation?->summary }}</p><a class="events-read-more" href="{{ route('events.show', ['locale' => $locale, 'slug' => $featuredTranslation?->slug]) }}">{{ __('events_detail.read_more') }}</a></div>
                </article>
            </div>
        </section>
    @endif

    <section id="events-listing" class="relative overflow-hidden border-t border-border bg-card py-20 md:py-28" aria-labelledby="events-listing-heading">
        <div class="bg-leaf pointer-events-none absolute inset-0 opacity-[.02]"></div>
        <div class="container-page relative">@can('update',$page)<livewire:events-page-inline-editor :page="$page" :locale="$locale" section-key="events.listing" />@endcan<div class="max-w-2xl"><p class="eyebrow">{{ $listingData['eyebrow'] ?? '' }}</p><h2 id="events-listing-heading" class="display-xl mt-4">{{ $listingData['title'] ?? '' }}</h2><p class="mt-5 leading-relaxed text-foreground/68">{{ $listingData['summary'] ?? '' }}</p></div>
            <div class="events-controls mt-10"><div class="events-filter-rail horizontal-filter-rail" data-horizontal-scroll-rail><div class="no-scrollbar events-filter-row horizontal-filter-row" role="toolbar" aria-label="{{ $locale === 'ar' ? 'تصفية الفعاليات حسب النوع' : 'Filter events by type' }}" data-horizontal-scroll-row><a class="event-filter" data-active="{{ $eventTypeId === null ? 'true' : 'false' }}" href="{{ route('events', ['locale' => $locale, 'status' => $temporalStatus !== 'all' ? $temporalStatus : null]) }}#events-listing" aria-pressed="{{ $eventTypeId === null ? 'true' : 'false' }}">{{ $listingData['all_events_label'] ?? 'All Events' }}</a>@foreach($eventTypes as $eventType)<a class="event-filter" data-active="{{ $eventTypeId === $eventType->id ? 'true' : 'false' }}" href="{{ route('events', ['locale' => $locale, 'type' => $eventType->id, 'status' => $temporalStatus !== 'all' ? $temporalStatus : null]) }}#events-listing" aria-pressed="{{ $eventTypeId === $eventType->id ? 'true' : 'false' }}">{{ $eventType->translation($locale)?->name }}</a>@endforeach</div></div>
                <div class="events-status-controls" role="toolbar" aria-label="{{ $locale === 'ar' ? 'تصفية الفعاليات حسب التوقيت' : 'Filter events by timing' }}"><span>{{ $listingData['status_prompt'] ?? 'Show events:' }}</span>@foreach(['all' => 'all_status_label', 'upcoming' => 'upcoming_label', 'ongoing' => 'ongoing_label', 'past' => 'past_label'] as $status => $label)<a data-active="{{ $temporalStatus === $status ? 'true' : 'false' }}" href="{{ route('events', ['locale' => $locale, 'type' => $eventTypeId, 'status' => $status === 'all' ? null : $status]) }}#events-listing" aria-pressed="{{ $temporalStatus === $status ? 'true' : 'false' }}">{{ $listingData[$label] ?? ucfirst($status) }}</a>@endforeach</div>
            </div>
            <div class="events-grid mt-10" data-event-list>@forelse($events as $event) @php($item = $event->translation($locale)) @php($status = $event->temporalStatus())<article class="event-card group" data-event-record data-event-category="{{ $event->event_type_id }}" data-event-status="{{ $status }}">@can('update',$event)<livewire:event-inline-editor :event="$event" :locale="$locale" :key="'event-'.$event->id" />@endcan<figure class="event-card-image">@if($event->primaryMedia)<img src="{{ $event->primaryMedia->url() }}" alt="{{ $event->primaryMedia->translation($locale)?->alt_text ?? $item?->title }}" loading="lazy">@endif<span class="event-status" data-status="{{ $status }}">{{ $listingData[$status.'_label'] ?? ucfirst($status) }}</span></figure><div class="event-card-content"><time class="event-date" datetime="{{ $event->starts_at->toDateString() }}"><strong>{{ $event->starts_at->format('d') }}@if($event->ends_at && !$event->starts_at->isSameDay($event->ends_at))–{{ $event->ends_at->format('d') }}@endif</strong><span>{{ $event->starts_at->translatedFormat('M') }}</span><small>{{ $event->starts_at->format('Y') }}</small></time><div class="event-card-copy"><p class="event-type">{{ $event->eventType->translation($locale)?->name }}</p><h3>{{ $item?->title }}</h3><p class="event-location"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.5"/></svg>{{ $item?->venue }}</p><p class="event-card-excerpt">{{ $item?->summary }}</p><a class="events-read-more" href="{{ route('events.show', ['locale' => $locale, 'slug' => $item?->slug]) }}">{{ __('events_detail.read_more') }}</a></div></div></article>@empty<div class="events-empty mt-10" data-event-empty><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.55"><circle cx="11" cy="11" r="6.5"/><path d="m16 16 4.5 4.5"/></svg><div><h3>{{ $listingData['empty_title'] ?? '' }}</h3><p>{{ $listingData['empty_summary'] ?? '' }}</p></div><a href="{{ route('events', ['locale' => $locale]) }}">{{ $listingData['reset_label'] ?? '' }}</a></div>@endforelse</div>
        </div>
    </section>
    <section class="relative overflow-hidden bg-cedar py-20 text-cream md:py-28"><div class="bg-leaf pointer-events-none absolute inset-0 opacity-[.06]"></div><div class="container-page relative grid gap-9 md:grid-cols-[1fr_auto] md:items-center">@can('update',$page)<livewire:events-page-inline-editor :page="$page" :locale="$locale" section-key="events.cta" />@endcan<div><p class="eyebrow text-cream/65">{{ $ctaData['eyebrow'] ?? '' }}</p><h2 class="display-xl mt-4 max-w-2xl">{{ $ctaData['title'] ?? '' }}</h2><p class="mt-5 max-w-xl leading-relaxed text-cream/72">{{ $ctaData['summary'] ?? '' }}</p></div><div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap"><a class="events-cta events-cta--light" href="{{ route('contact', ['locale' => $locale]) }}">{{ $ctaData['primary_cta_label'] ?? '' }}</a><a class="events-cta events-cta--outline" href="{{ route('products', ['locale' => $locale]) }}">{{ $ctaData['secondary_cta_label'] ?? '' }}</a><span class="events-cta events-cta--outline" aria-disabled="true">{{ $ctaData['tertiary_cta_label'] ?? '' }}</span></div></div></section>
</main>
@endsection