@extends('layouts.shell')
@section('title', $event->title)
@section('meta_description', Str::limit(strip_tags($event->description), 155))
@section('og_image', $event->coverUrl() ?? asset('icons/icon-512.png'))

@section('jsonld')
<script type="application/ld+json">{!! json_encode([
    '@context'=>'https://schema.org','@type'=>'Event','name'=>$event->title,
    'startDate'=>$event->starts_at?->toAtomString(),'endDate'=>$event->ends_at?->toAtomString(),
    'eventAttendanceMode'=>$event->isOnline() ? 'https://schema.org/OnlineEventAttendanceMode' : 'https://schema.org/OfflineEventAttendanceMode',
    'location'=>$event->isOnline()
        ? ['@type'=>'VirtualLocation','url'=>$event->online_url ?? url()->current()]
        : ['@type'=>'Place','name'=>$event->location,'address'=>$event->location],
    'image'=>$event->coverUrl(),'description'=>strip_tags((string)$event->description),
    'offers'=>['@type'=>'Offer','price'=>$event->price,'priceCurrency'=>'IDR'],
], JSON_UNESCAPED_SLASHES) !!}</script>
@endsection

@section('content')
<a href="{{ route('events.index') }}" class="mb-4 inline-flex items-center gap-1 text-small text-muted hover:text-primary">
    <x-icon name="arrow-left" class="w-4 h-4"/> Semua Event
</a>

<div class="card overflow-hidden">
    <div class="cinema relative aspect-video overflow-hidden">
        @if($event->coverUrl())
            <img src="{{ $event->coverUrl() }}" class="h-full w-full object-cover" alt="{{ $event->title }}">
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
        @else
            <div class="h-full w-full bg-gradient-to-br from-primary to-amber grid place-items-center"><x-icon name="calendar" class="w-12 h-12 text-white/60"/></div>
        @endif
    </div>

    <div class="p-5">
        <div class="flex flex-wrap items-center gap-2">
            <span class="chip">{{ $event->isOnline() ? '🌐 Online' : '📍 Offline' }}</span>
            <span class="text-small font-bold {{ $event->isFree() ? 'text-secondary' : 'text-primary' }}">{{ $event->isFree() ? 'GRATIS' : 'Rp'.number_format($event->price,0,',','.') }}</span>
            @if($event->remainingSeats() !== null)
                <span class="chip">{{ $event->remainingSeats() }} kursi tersisa</span>
            @endif
        </div>

        <h1 class="mt-2 text-h2">{{ $event->title }}</h1>

        @if($event->speaker)
        <div class="mt-3 flex items-center gap-3 rounded-xl bg-surface-2 p-3">
            <span class="grid h-11 w-11 place-items-center rounded-full bg-primary/15 text-primary font-bold">{{ strtoupper(substr($event->speaker,0,1)) }}</span>
            <div><p class="text-caption text-muted">Narasumber</p><p class="text-h4 leading-tight">{{ $event->speaker }}</p>
            @if($event->speaker_title)<p class="text-small text-muted">{{ $event->speaker_title }}</p>@endif</div>
        </div>
        @endif

        {{-- Info ringkas --}}
        <div class="mt-4 space-y-2.5 text-body">
            <p class="flex items-center gap-2.5 text-muted"><x-icon name="calendar" class="w-5 h-5 text-primary shrink-0"/> {{ $event->starts_at?->translatedFormat('l, d M Y') }}</p>
            <p class="flex items-center gap-2.5 text-muted"><x-icon name="clock" class="w-5 h-5 text-primary shrink-0"/> {{ $event->starts_at?->format('H:i') }}@if($event->ends_at) – {{ $event->ends_at->format('H:i') }}@endif WIB</p>
            @if($event->isOnline())
                <p class="flex items-center gap-2.5 text-muted"><x-icon name="play-circle" class="w-5 h-5 text-primary shrink-0"/> Daring via {{ $event->online_platform ?? 'Online' }}</p>
            @else
                <p class="flex items-start gap-2.5 text-muted"><x-icon name="location" class="w-5 h-5 text-primary shrink-0"/> {{ $event->location ?? 'Lokasi diumumkan' }}</p>
            @endif
        </div>

        {{-- Tombol lokasi/akses --}}
        @if(!$event->isOnline() && $event->map_url)
        <a href="{{ $event->map_url }}" target="_blank" rel="noopener" class="btn-outline mt-4 w-full"><x-icon name="location" class="w-5 h-5"/> Buka di Google Maps</a>
        @endif

        @if($event->description)
        <p class="mt-4 text-body text-muted leading-relaxed prose-body">{{ $event->description }}</p>
        @endif

        @if($event->notes)
        <div class="mt-4 rounded-xl border border-outline bg-surface-2 p-4">
            <p class="text-label text-muted mb-1">Catatan / Persyaratan</p>
            <p class="text-body">{{ $event->notes }}</p>
        </div>
        @endif

        {{-- Akses online untuk pendaftar --}}
        @if($registered && $event->isOnline() && $event->online_url)
        <div class="mt-4 rounded-xl border border-secondary/30 bg-secondary/10 p-4">
            <p class="text-label text-secondary mb-1">Link Akses (Anda terdaftar)</p>
            <a href="{{ $event->online_url }}" target="_blank" rel="noopener" class="btn-filled w-full mt-1"><x-icon name="play-circle" class="w-5 h-5" :fill="true"/> Masuk {{ $event->online_platform ?? 'Ruang Online' }}</a>
        </div>
        @endif

        {{-- CTA daftar / status --}}
        @if($registered)
            <div class="mt-5 rounded-xl border border-secondary/40 bg-secondary/10 p-4 text-center text-body font-semibold text-secondary">
                <x-icon name="check" class="w-5 h-5 inline"/> Anda sudah terdaftar untuk event ini.
            </div>
        @elseif($event->isFull())
            <button disabled class="btn-outline mt-5 w-full opacity-60">Kuota Penuh</button>
        @else
            <form method="POST" action="{{ route('events.register', $event->slug) }}" class="mt-5">
                @csrf
                @if($event->isFree())
                    <button class="btn-filled w-full"><x-icon name="check" class="w-5 h-5"/> Daftar Sekarang (Gratis)</button>
                @elseif($memberFree)
                    <button class="btn-filled w-full"><x-icon name="sparkles" class="w-5 h-5"/> Daftar — Gratis untuk Member</button>
                @else
                    <button class="btn-filled w-full"><x-icon name="cash" class="w-5 h-5"/> Beli Tiket — Rp{{ number_format($event->price,0,',','.') }}</button>
                    <p class="mt-2 text-center text-caption text-muted">Tanpa perlu langganan. Atau <a href="{{ route('membership.index') }}" class="text-primary font-semibold">jadi member</a> → ikut event gratis.</p>
                @endif
            </form>
        @endif

        {{-- Ingatkan saya (opt-in, untuk yang belum daftar) --}}
        @auth
        @if(!$registered)
        <form method="POST" action="{{ route('events.remind', $event->slug) }}" class="mt-3">
            @csrf
            <button class="btn-outline w-full {{ ($reminded ?? false) ? '!border-primary !text-primary' : '' }}">
                <x-icon name="bell" class="w-5 h-5" :fill="$reminded ?? false"/>
                {{ ($reminded ?? false) ? 'Pengingat aktif (H-1)' : 'Ingatkan saya (H-1)' }}
            </button>
        </form>
        @endif
        @endauth

        {{-- Aksi sekunder --}}
        <div class="mt-3 flex gap-2">
            <a href="{{ $event->googleCalendarUrl() }}" target="_blank" rel="noopener" class="btn-ghost flex-1 text-small"><x-icon name="calendar" class="w-4 h-4"/> Tambah ke Calendar</a>
            @if($event->whatsappUrl())
            <a href="{{ $event->whatsappUrl() }}" target="_blank" rel="noopener" class="btn-ghost flex-1 text-small"><x-icon name="bell" class="w-4 h-4"/> Tanya CP</a>
            @endif
            <x-bookmark-button type="event" :id="$event->id" :model="$event"/>
        </div>

        <div class="mt-4 border-t border-outline/60 pt-4">
            <x-share-buttons :url="route('events.show', $event->slug)" :title="$event->title" />
        </div>
    </div>
</div>
@endsection