@extends('layouts.public')

@section('title', $listing->seoTitle())
@section('meta_description', $listing->seoDescription())

@section('content')
    <div class="border-b border-border bg-surface">
        <div class="container-page py-4">
            <x-breadcrumbs tone="light" :items="[
                $listing->sector->name => null,
                $listing->category->name => null,
                $listing->title => null,
            ]" />
        </div>
    </div>

    @unless ($listing->isLive())
        <div class="container-page pt-6">
            <x-alert type="warning" :title="__('Not published')">
                {{ __('You are seeing this because it is your listing, or because you moderate listings. It is not visible to buyers.') }}
            </x-alert>
        </div>
    @endunless

    <div class="container-page grid gap-10 pb-16 pt-8 lg:grid-cols-12 lg:gap-12">
        <div class="lg:col-span-7 xl:col-span-8" x-data="lightbox">
            @php($cover = $images->firstWhere('is_cover') ?? $images->first())

            {{-- The hero is the LCP image: eager, high priority, never lazy. --}}
            <div class="relative overflow-hidden rounded-2xl bg-surface-muted">
                @if ($cover)
                    <img src="{{ $cover->url() }}"
                         @if ($srcset = $cover->srcset()) srcset="{{ $srcset }}" sizes="(min-width: 1024px) 60vw, 100vw" @endif
                         alt="{{ $cover->alt_text ?: $listing->title }}"
                         fetchpriority="high" decoding="async"
                         class="aspect-4/3 w-full object-cover sm:aspect-16/10">
                @else
                    <x-image :src="null" :alt="$listing->title" ratio="16/10" eager />
                @endif

                @if ($images->count() > 1)
                    <button type="button"
                            @click="show({{ Js::from($images->map(fn ($m) => ['src' => $m->url(), 'caption' => $m->caption])->values()) }}, 0)"
                            class="absolute bottom-4 right-4 inline-flex items-center gap-2 rounded-lg bg-surface/95 px-3.5 py-2 text-sm font-medium text-text shadow-card transition hover:bg-surface">
                        <x-icon name="photo" class="size-4" />
                        {{ trans_choice('Show :count photo|Show all :count photos', $images->count(), ['count' => $images->count()]) }}
                    </button>
                @endif
            </div>

            @if ($images->count() > 1)
                {{-- Thumbnail strip, scrollable rather than wrapping. --}}
                <div class="mt-3 flex gap-3 overflow-x-auto pb-2">
                    @foreach ($images as $index => $medium)
                        <button type="button"
                                @click="show({{ Js::from($images->map(fn ($m) => ['src' => $m->url(), 'caption' => $m->caption])->values()) }}, {{ $index }})"
                                class="group relative h-20 w-28 shrink-0 overflow-hidden rounded-lg bg-surface-muted">
                            <img src="{{ $medium->thumbnailUrl() }}" alt="{{ $medium->caption ?: $listing->title }}"
                                 loading="lazy" decoding="async"
                                 class="size-full object-cover transition group-hover:scale-105">
                            <span class="sr-only">{{ __('Open image :n', ['n' => $index + 1]) }}</span>
                        </button>
                    @endforeach
                </div>
            @endif

            @include('public.partials.lightbox')

            <div class="mt-10 space-y-10">
                <section data-reveal>
                    <h2 class="mb-4 font-display text-title font-bold text-text">{{ __('About this listing') }}</h2>
                    <div class="prose-measure whitespace-pre-line text-text-secondary">{{ $listing->description }}</div>
                </section>

                @if ($specification)
                    <section data-reveal>
                        <h2 class="mb-4 font-display text-title font-bold text-text">{{ __('Details') }}</h2>

                        <dl class="grid gap-x-8 gap-y-3 text-sm xs:grid-cols-2 3xl:grid-cols-3">
                            @foreach ($specification as $row)
                                <div class="flex justify-between gap-4 border-b border-border pb-2.5">
                                    <dt class="text-text-secondary">{{ $row['label'] }}</dt>
                                    <dd class="text-right font-medium text-text">{{ $row['value'] }}</dd>
                                </div>
                            @endforeach
                        </dl>
                    </section>
                @endif

                @if ($floorPlans->isNotEmpty())
                    <section data-reveal>
                        <h2 class="mb-4 font-display text-title font-bold text-text">{{ __('Floor plans') }}</h2>

                        <div class="grid gap-4 sm:grid-cols-2">
                            @foreach ($floorPlans as $plan)
                                <figure class="overflow-hidden rounded-xl border border-border">
                                    <img src="{{ $plan->url() }}" alt="{{ $plan->caption ?: __('Floor plan') }}"
                                         loading="lazy" decoding="async"
                                         class="aspect-4/3 w-full bg-surface-muted object-contain">

                                    @if ($plan->caption)
                                        <figcaption class="border-t border-border px-3 py-2 text-xs text-text-secondary">
                                            {{ $plan->caption }}
                                        </figcaption>
                                    @endif
                                </figure>
                            @endforeach
                        </div>
                    </section>
                @endif

                @if ($videos->isNotEmpty())
                    <section data-reveal>
                        <h2 class="mb-4 font-display text-title font-bold text-text">{{ __('Video') }}</h2>

                        <div class="aspect-16/9 overflow-hidden rounded-2xl border border-border bg-surface-muted">
                            <iframe src="{{ embed_url($videos->first()->embed_url) }}"
                                    title="{{ __('Video tour of :listing', ['listing' => $listing->title]) }}"
                                    class="size-full" loading="lazy" allowfullscreen></iframe>
                        </div>
                    </section>
                @endif

                @if ($listing->latitude && $listing->longitude)
                    <section data-reveal>
                        <h2 class="mb-4 font-display text-title font-bold text-text">{{ __('Location') }}</h2>

                        <div class="aspect-16/9 overflow-hidden rounded-2xl border border-border">
                            <iframe src="https://maps.google.com/maps?q={{ $listing->latitude }},{{ $listing->longitude }}&output=embed"
                                    title="{{ __('Map showing :listing', ['listing' => $listing->title]) }}"
                                    class="size-full" style="border:0" loading="lazy"
                                    referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </section>
                @endif
            </div>
        </div>

        <aside class="lg:col-span-5 xl:col-span-4">
            <div class="lg:sticky lg:top-28">
                <div class="flex flex-wrap items-center gap-2">
                    <x-badge variant="brand">{{ $listing->intent->label() }}</x-badge>
                    @if ($listing->isVerified())
                        <x-badge variant="success" icon="shield">{{ __('Verified') }}</x-badge>
                    @endif
                </div>

                <h1 class="mt-4 font-display text-display font-bold leading-tight text-text">{{ $listing->title }}</h1>

                <p class="mt-4 font-display text-title font-bold text-text">
                    {{ $listing->formattedPrice() }}
                    @if ($period = $listing->pricePeriodLabel())
                        <span class="text-base font-normal text-text-secondary">{{ $period }}</span>
                    @endif
                    @if ($listing->price_negotiable)
                        <span class="ml-2 text-sm font-normal text-text-muted">{{ __('Open to offers') }}</span>
                    @endif
                </p>

                <dl class="mt-6 space-y-3.5 border-t border-border pt-6 text-sm">
                    @foreach ([
                        ['icon' => 'map', 'label' => __('Location'), 'value' => $listing->locationLabel()],
                        ['icon' => 'grid', 'label' => __('Category'), 'value' => $listing->category?->name],
                        ['icon' => 'tag', 'label' => __('Reference'), 'value' => $listing->reference],
                    ] as $fact)
                        @if (filled($fact['value']))
                            <div class="flex items-center gap-3">
                                <x-icon :name="$fact['icon']" class="size-4 shrink-0 text-text-muted" />
                                <dt class="sr-only">{{ $fact['label'] }}</dt>
                                <dd class="text-text">{{ $fact['value'] }}</dd>
                            </div>
                        @endif
                    @endforeach
                </dl>

                {{-- Enquiries, favourites and offers arrive in phases 8–12; the
                     contact details are shown plainly until then. --}}
                <div class="mt-6 rounded-xl border border-border bg-surface p-5">
                    <p class="meta-label">{{ __('Listed by') }}</p>
                    <p class="mt-1 font-medium text-text">{{ $listing->contactName() }}</p>

                    @if ($phone = $listing->contactPhone())
                        <a href="tel:{{ preg_replace('/\s+/', '', $phone) }}"
                           class="mt-3 inline-flex text-sm font-medium text-text-brand underline-offset-4 hover:underline">
                            {{ $phone }}
                        </a>
                    @endif
                </div>
            </div>
        </aside>
    </div>
@endsection