@extends('layouts.public')

@section('title', $listing->seoTitle())
@section('meta_description', $listing->seoDescription())
@section('meta_image', $listing->cover_image ? asset_path($listing->cover_image) : '')

@push('head')
    <link rel="canonical" href="{{ $canonical }}">
@endpush

@push('structured-data')
    {{--
        Schema.org, so a search engine can read the price, the place and the
        photographs without inferring them from the markup (specification §23).

        Built in PHP rather than inline in @json(): Blade treats the leading @ of
        "@context" and "@type" as its own directive syntax and mangles the array.
    --}}
    @php
        $schema = [
            '@context' => 'https://schema.org',
            '@type' => 'RealEstateListing',
            'name' => $listing->title,
            'url' => $canonical,
            'description' => $listing->seoDescription(),
            'datePosted' => $listing->published_at?->toIso8601String(),
            'image' => $images->take(6)->map(fn ($m) => $m->url())->filter()->values()->all(),
            'offers' => array_filter([
                '@type' => 'Offer',
                'price' => $listing->price_on_request || ! $listing->price ? null : $listing->price / 100,
                'priceCurrency' => $listing->currency,
                'availability' => $listing->isLive() ? 'https://schema.org/InStock' : 'https://schema.org/SoldOut',
            ]),
            'address' => array_filter([
                '@type' => 'PostalAddress',
                'streetAddress' => $listing->address,
                'addressLocality' => $listing->municipality,
                'addressRegion' => $listing->province ?: $listing->district,
                'addressCountry' => $listing->country,
            ]),
        ];
    @endphp

    <script type="application/ld+json">{!! ld_json($schema) !!}</script>
@endpush

@section('content')
    @php($period = $listing->pricePeriodLabel())

    <div class="border-b border-border bg-surface">
        <div class="container-page py-4">
            <x-breadcrumbs tone="light" :items="[
                __('Properties') => route('properties.index'),
                $listing->category->name => route('properties.index', ['type' => $listing->category->slug]),
                $listing->title => null,
            ]" />
        </div>
    </div>

    <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())
            @php($gallery = $images->map(fn ($m) => ['src' => $m->url(), 'caption' => $m->caption])->values())

            <div class="relative overflow-hidden rounded-2xl bg-surface-muted">
                @if ($cover)
                    {{-- The LCP image: eager, high priority, never lazy. --}}
                    <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

                <span class="absolute left-4 top-4 flex flex-wrap gap-2">
                    <span class="pill bg-primary text-text">{{ $listing->intent->label() }}</span>

                    @if ($listing->status->isClosed())
                        <span class="pill bg-surface text-text">{{ $listing->status->label() }}</span>
                    @endif
                </span>

                @if ($gallery->isNotEmpty())
                    <button type="button" @click="show({{ Js::from($gallery) }}, 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', $gallery->count(), ['count' => $gallery->count()]) }}
                    </button>
                @endif
            </div>

            @if ($images->count() > 1)
                <div class="mt-3 flex gap-3 overflow-x-auto pb-2">
                    @foreach ($images as $index => $medium)
                        <button type="button" @click="show({{ Js::from($gallery) }}, {{ $loop->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' => $loop->iteration]) }}</span>
                        </button>
                    @endforeach
                </div>
            @endif

            @include('public.partials.lightbox')
        </div>

        {{-- Facts rail. Spans both rows so it stays with the reader. --}}
        <aside class="lg:col-span-5 lg:row-span-2 xl:col-span-4">
            <div class="lg:sticky lg:top-28">
                @if (session('success'))
                    <x-alert type="success" class="mb-5">{{ session('success') }}</x-alert>
                @endif

                @unless ($listing->isLive())
                    <x-alert type="warning" class="mb-5" :title="__('Not published')">
                        {{ __('You can see this because it is yours, or because you moderate listings.') }}
                    </x-alert>
                @endunless

                <div class="flex flex-wrap items-center gap-2">
                    @if ($listing->isVerified())
                        <x-badge variant="success" icon="shield">{{ __('Verified') }}</x-badge>
                    @endif

                    @if ($listing->isLive())
                        <x-favourite-button :listing="$listing" :favourited="$favourited" label />

                        <x-button variant="accent" size="sm" href="#book">{{ __('Book a visit') }}</x-button>
                    @endif
                </div>

                <h1 class="mt-5 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)
                        <span class="text-base font-normal text-text-secondary">{{ $period }}</span>
                    @endif
                </p>

                @if ($reduction)
                    <p class="mt-1.5 flex items-center gap-2 text-sm">
                        <span class="pill pill-success">{{ __('Reduced') }}</span>
                        <span class="text-text-secondary">
                            {{ __('was :price', ['price' => $reduction->formattedOldPrice()]) }}
                        </span>
                    </p>
                @endif

                @if ($detail && ! $listing->price_on_request && $listing->price && ($perFoot = $detail->pricePerSquareFoot((int) $listing->price)))
                    <p class="mt-1 text-sm text-text-muted">
                        {{ __(':currency :amount per sq. ft', [
                            'currency' => $listing->currency,
                            'amount' => number_format($perFoot),
                        ]) }}
                    </p>
                @endif

                <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' => 'area', 'label' => __('Area'), 'value' => $detail?->headlineArea()
                            ? number_format($detail->headlineArea()).' '.__('sq. ft') : null],
                        ['icon' => 'building', 'label' => __('Type'), 'value' => $listing->category->name],
                        ['icon' => 'tag', 'label' => __('Reference'), 'value' => $listing->reference],
                    ] as $fact)
                        @if (filled($fact['value']))
                            <div class="flex items-start gap-3">
                                <x-icon :name="$fact['icon']" class="mt-0.5 size-4 shrink-0 text-text-muted" />
                                <dt class="sr-only">{{ $fact['label'] }}</dt>
                                <dd class="text-text">{{ $fact['value'] }}</dd>
                            </div>
                        @endif
                    @endforeach

                    @if ($detail && ($detail->bedrooms || $detail->bathrooms || $detail->parking))
                        <div class="flex flex-wrap items-center gap-x-4 gap-y-2 border-t border-border pt-3.5">
                            @foreach ([
                                ['bed', $detail->bedrooms, __('beds')],
                                ['bath', $detail->bathrooms, __('baths')],
                                ['key', $detail->parking, __('parking spaces')],
                            ] as [$icon, $value, $label])
                                @if ($value)
                                    <span class="flex items-center gap-1.5 text-text">
                                        <x-icon :name="$icon" class="size-4 shrink-0 text-text-muted" />
                                        {{ $value }} {{ $label }}
                                    </span>
                                @endif
                            @endforeach
                        </div>
                    @endif
                </dl>

                @if ($listing->short_description || $listing->description)
                    <div class="mt-6 border-t border-border pt-6" x-data="{ expanded: false }">
                        @if ($listing->short_description)
                            <p class="text-sm text-text-secondary">{{ $listing->short_description }}</p>
                        @endif

                        <p class="mt-3 whitespace-pre-line text-sm text-text-secondary"
                           x-bind:class="expanded ? '' : 'line-clamp-4'">{{ $listing->description }}</p>

                        <button type="button" @click="expanded = !expanded"
                                class="mt-2 text-sm font-medium text-text-brand underline-offset-4 hover:underline">
                            <span x-show="!expanded">{{ __('Read more') }}</span>
                            <span x-show="expanded" x-cloak>{{ __('Show less') }}</span>
                        </button>
                    </div>
                @endif

                <div class="mt-6 rounded-xl border border-border bg-surface p-5">
                    <p class="meta-label">{{ __('Your contact') }}</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-2 inline-flex text-sm font-medium text-text-brand underline-offset-4 hover:underline">
                            {{ $phone }}
                        </a>
                    @endif
                </div>

                <div class="mt-8">
                    @include('public.properties.partials.enquiry-form', ['listing' => $listing])
                </div>

                <x-report-button type="listing" :id="$listing->id" class="mt-4 text-center"
                                 :label="__('Report this listing')" />
            </div>
        </aside>

        <div class="space-y-12 lg:col-span-7 lg:col-start-1 lg:row-start-2 xl:col-span-8">
            @if ($listing->amenities->isNotEmpty())
                <section data-reveal>
                    <h2 class="mb-5 font-display text-title font-bold text-text">{{ __('Amenities') }}</h2>

                    <ul class="flex flex-wrap gap-2">
                        @foreach ($listing->amenities as $amenity)
                            <li class="pill pill-idle">
                                <x-icon :name="$amenity->icon ?: 'check'" class="size-3.5" />
                                {{ $amenity->name }}
                            </li>
                        @endforeach
                    </ul>
                </section>
            @endif

            @if ($specification)
                <section data-reveal>
                    <h2 class="mb-5 font-display text-title font-bold text-text">{{ __('Specification') }}</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-5 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.5 py-2.5 text-xs text-text-secondary">
                                        {{ $plan->caption }}
                                    </figcaption>
                                @endif
                            </figure>
                        @endforeach
                    </div>
                </section>
            @endif

            @if ($videos->isNotEmpty())
                <section data-reveal>
                    <h2 class="mb-5 font-display text-title font-bold text-text">{{ __('Tour') }}</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-5 font-display text-title font-bold text-text">{{ __('Location') }}</h2>

                    {{-- Whose tiles these are is the provider's business; see
                         App\Contracts\MapProvider. --}}
                    <div class="aspect-16/9 overflow-hidden rounded-2xl border border-border">
                        <iframe src="{{ $mapEmbed }}"
                                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>

    @if ($similar->isNotEmpty())
        <section class="section bg-surface-muted/60">
            <div class="container-page">
                <div class="flex flex-wrap items-end justify-between gap-6">
                    <x-section-heading :eyebrow="__('You may also like')" :title="__('Similar properties')" />

                    <x-button variant="outline" class="shrink-0" arrow
                              :href="route('properties.index', ['district' => $listing->district])">
                        {{ __('All properties in :place', ['place' => $listing->district ?: __('this area')]) }}
                    </x-button>
                </div>

                <div class="mt-10">
                    @include('public.partials.listing-grid', ['listings' => $similar])
                </div>
            </div>
        </section>
    @endif
@endsection