@extends('layouts.public')

@section('title', $listing->title)
@section('meta_description', Str::limit(strip_tags($listing->description ?? ''), 158))

@push('head')
    @php
        // Built in PHP rather than with @json: Blade reads an @-prefixed key
        // inside a directive as a directive of its own.
        $schema = array_filter([
            '@context' => 'https://schema.org',
            '@type' => 'Product',
            'name' => $listing->title,
            'description' => Str::limit(strip_tags($listing->description ?? ''), 300) ?: null,
            'sku' => $listing->reference,
            'image' => $listing->cover_image ? image_url($listing->cover_image) : null,
            'offers' => array_filter([
                '@type' => 'Offer',
                'price' => $listing->price ? (string) ($listing->price / 100) : null,
                'priceCurrency' => $listing->currency ?: config('marketplace.currency.default'),
                'availability' => $listing->isLive()
                    ? 'https://schema.org/InStock'
                    : 'https://schema.org/SoldOut',
                'url' => $listing->publicUrl(),
            ]),
        ]);
    @endphp

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

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

    <div class="container-page grid gap-10 py-8 lg:grid-cols-12 lg:gap-12">
        <div class="lg:col-span-8">
            @if ($images->isNotEmpty())
                <div class="overflow-hidden rounded-2xl border border-border">
                    <x-image :src="$listing->cover_image" :alt="$listing->title" ratio="16/9"
                             eager rounded="rounded-none" />
                </div>

                @if ($images->count() > 1)
                    <div class="mt-3 grid grid-cols-4 gap-3 sm:grid-cols-6">
                        @foreach ($images->take(6) as $image)
                            <x-image :src="$image->path" :alt="$image->alt_text ?: $listing->title"
                                     ratio="1/1" thumbnail rounded="rounded-lg" />
                        @endforeach
                    </div>
                @endif
            @endif

            <div class="mt-8">
                <div class="flex flex-wrap items-center gap-2">
                    <x-badge variant="brand">{{ $listing->intent->label() }}</x-badge>

                    @if ($listing->category)
                        <x-badge variant="muted">{{ $listing->category->name }}</x-badge>
                    @endif

                    @if ($listing->status->isClosed())
                        <x-badge variant="muted">{{ $listing->status->label() }}</x-badge>
                    @endif
                </div>

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

                <p class="mt-2 flex items-center gap-1.5 text-text-secondary">
                    <x-icon name="map" class="size-4 shrink-0 text-text-muted" />
                    {{ $listing->locationLabel() }}
                </p>
            </div>

            @if ($listing->description)
                <section class="prose-measure mt-8 whitespace-pre-line text-text-secondary" aria-labelledby="about">
                    <h2 id="about" class="mb-3 font-display text-title font-bold text-text">{{ __('Description') }}</h2>
                    {{ $listing->description }}
                </section>
            @endif

            {{-- The specification is whatever the category declared. There is no
                 per-vertical view: a tractor and a phone render through the same
                 loop because the difference between them is data. --}}
            @if ($specification !== [])
                <section class="mt-10" aria-labelledby="spec">
                    <h2 id="spec" class="mb-4 font-display text-title font-bold text-text">
                        {{ __('Specification') }}
                    </h2>

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

            @if ($related->isNotEmpty())
                <section class="mt-12" aria-labelledby="related">
                    <h2 id="related" class="mb-5 font-display text-title font-bold text-text">
                        {{ __('More in :category', ['category' => $listing->category?->name]) }}
                    </h2>

                    <div class="grid gap-6 sm:grid-cols-2 xl:grid-cols-4" data-reveal-group>
                        @foreach ($related as $other)
                            @include('public.partials.listing-card', ['listing' => $other, 'favouritedIds' => []])
                        @endforeach
                    </div>
                </section>
            @endif
        </div>

        <aside class="lg:col-span-4">
            <div class="lg:sticky lg:top-28 space-y-6">
                <div class="rounded-2xl border border-border bg-surface p-6">
                    <p class="font-display text-display font-bold text-text">
                        {{ $listing->formattedPrice() }}

                        @if ($period = $listing->pricePeriodLabel())
                            <span class="text-base font-normal text-text-secondary">{{ $period }}</span>
                        @endif
                    </p>

                    <p class="meta-label mt-1">{{ $listing->reference }}</p>

                    <div class="mt-5 flex flex-wrap gap-3">
                        <x-favourite-button :listing="$listing" :favourited="$favourited" />
                    </div>

                    {{-- A closed listing keeps its page but loses its form: an
                         enquiry about something already sold wastes both sides'
                         time. --}}
                    @if ($listing->isLive())
                        <div class="mt-5 border-t border-border pt-5">
                            @include('public.properties.partials.enquiry-form', ['listing' => $listing])
                        </div>
                    @else
                        <p class="mt-5 border-t border-border pt-5 text-sm text-text-secondary">
                            {{ __('This listing is no longer available.') }}
                        </p>
                    @endif
                </div>

                @if ($listing->seller)
                    <div class="rounded-2xl border border-border bg-surface p-6">
                        <p class="meta-label">{{ __('Listed by') }}</p>

                        <a href="{{ route('sellers.show', $listing->seller->slug) }}"
                           class="mt-2 block font-display text-base font-semibold text-text hover:text-text-brand">
                            {{ $listing->seller->display_name }}
                        </a>

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

                <x-report-button type="listing" :id="$listing->id" :label="__('Report this listing')" />
            </div>
        </aside>
    </div>
@endsection