@use('App\Support\Img')
@php $pill = ['approved' => 'bg-emerald-100 text-emerald-700', 'pending' => 'bg-amber-100 text-amber-700', 'rejected' => 'bg-red-100 text-red-700']; @endphp
<x-layouts.public :title="$event->title">
    <article class="section max-w-4xl">
        <a href="{{ route('events.index') }}" class="text-sm text-blue-600 hover:underline dark:text-blue-400">&larr; All events</a>

        <x-cover :src="$event->image" :alt="$event->title" class="mt-4 aspect-[16/8] w-full rounded-3xl border border-slate-200 shadow-lg dark:border-slate-800" />

        <div class="mt-6 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-slate-500 dark:text-slate-400">
            <span class="flex items-center gap-2"><x-icon name="calendar" class="h-4 w-4"/> {{ $event->starts_at->format('l, d F Y · h:i A') }}</span>
            <span class="flex items-center gap-2"><x-icon name="pin" class="h-4 w-4"/> {{ $event->location }}</span>
            <span class="badge bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300">{{ ucfirst($event->type) }}</span>
            <span class="badge {{ $event->isFree() ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }}">{{ $event->feeLabel() }}</span>
        </div>

        <h1 class="mt-3 text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white sm:text-4xl">{{ $event->title }}</h1>

        {{-- Registration box --}}
        <div class="card mt-6 flex flex-wrap items-center justify-between gap-4 p-5">
            <div>
                <p class="font-semibold text-slate-900 dark:text-white">
                    @if($event->isFree()) Free event · no payment needed @else Registration fee: {{ number_format($event->fee) }} BDT @endif
                </p>
                <p class="text-sm text-slate-500 dark:text-slate-400">{{ $event->registrations_count }} {{ Str::plural('person', $event->registrations_count) }} registered · open to everyone, membership not required · <a href="{{ route('registration.status') }}" class="text-blue-600 hover:underline dark:text-blue-400">Check registration status</a></p>
            </div>

            @if($mine)
                <div class="flex items-center gap-3">
                    <span class="badge {{ $pill[$mine->status] ?? '' }}">
                        {{ $mine->status === 'approved' ? "You're registered" : ($mine->status === 'pending' ? 'Payment under review' : 'Registration rejected') }}
                    </span>
                    <form method="POST" action="{{ route('events.unregister', $event) }}" onsubmit="return confirm('Cancel your registration?')">@csrf @method('DELETE')
                        <button class="btn btn-ghost btn-sm">Cancel</button>
                    </form>
                </div>
            @elseif($event->canRegister())
                <a href="{{ route('events.register.create', $event) }}" class="btn btn-accent">Register now</a>
            @elseif(! $event->isUpcoming())
                <span class="badge bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300">This event has ended</span>
            @else
                <span class="badge bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300">Registration closed</span>
            @endif
        </div>

        @if($event->description)
            <div class="rich mt-8">{!! $event->description_html !!}</div>
        @endif

        @if($event->gallery->isNotEmpty())
            <h2 class="mt-12 text-2xl font-bold text-slate-900 dark:text-white">Gallery</h2>
            <div class="mt-4 grid grid-cols-2 gap-3 md:grid-cols-3">
                @foreach($event->gallery as $photo)
                    <figure class="overflow-hidden rounded-xl border border-slate-200 dark:border-slate-800">
                        <img src="{{ Img::url($photo->image) }}" alt="{{ $photo->caption ?? $event->title }}" loading="lazy" class="aspect-[4/3] w-full object-cover transition duration-300 hover:scale-105">
                    </figure>
                @endforeach
            </div>
        @endif
    </article>
</x-layouts.public>