{{--
	Property detail — ported from the legacy property.php, which was a single
	hardcoded document describing one listing.

	Only the Chingford property has recovered detail data, so every spec block
	below is conditional: a section with nothing to show is omitted rather
	than rendered with empty values.
--}}

@php
    $gallery = $property->images;
    $hero = $property->primaryImage;

    // The legacy address line was "Meridian House, 62 Station Road, North
    // Chingford, E4 7BA" — street through to postcode, with no county.
    //
    // `county` is a filing field here ("London", "Essex"), not part of a UK
    // address line, and `town` carries the listing-page filter value, which
    // address_line_1 usually already spells out in full ("North Chingford"
    // vs "Chingford"). Including both unconditionally produced a line that
    // said Chingford twice, so a component already present in what has been
    // built so far is dropped.
    $addressLine = collect([$property->address_line_1, $property->town, $property->postcode])
        ->filter()
        ->reduce(function (array $parts, string $part): array {
            $line = implode(', ', $parts);

            return str_contains(Str::lower($line), Str::lower($part))
                ? $parts
                : [...$parts, $part];
        }, []);

    $addressLine = implode(', ', $addressLine) ?: $property->title;

    // The legacy crumb was "Station Road, Chingford" — the street off the
    // headline plus the town, not the full postcoded title. Taking the first
    // comma segment reproduces that for any listing titled the same way.
    $breadcrumbLabel = collect([
        Str::before($property->title, ','),
        $property->town,
    ])->filter()->unique()->implode(', ');

    // Which tabs have content to jump to.
    $tabs = array_filter([
        'pd-overview' => filled($property->description) ? 'Overview' : null,
        'pd-features' => $property->features->isNotEmpty() ? 'Features' : null,
        'pd-details' => filled($property->property_type) ? 'Details' : null,
        'pd-tenancy' => filled($property->tenure) || $property->available_from ? 'Tenancy' : null,
        'pd-location' => filled($property->map_embed_url) || $property->nearbyPlaces->isNotEmpty() ? 'Location' : null,
        'pd-epc' => filled($property->epc_rating) ? 'EPC' : null,
        'pd-floorplan' => filled($property->floorplan_image) ? 'Floorplan' : null,
    ]);
@endphp

<x-layouts.app
	:title="$property->metaTitle()"
	:description="$property->metaDescription()"
	:keywords="'property to let, ' . ($property->town ?? '') . ', B Bailey'"
	body-class="page-solid page-property"
	:styles="['main', 'property-pages']"
	:swiper="true"
	:lcp="$hero?->path"
>

	<main id="main" class="pd-main">
		<div class="container">
			<div class="pd-toolbar">
				<x-breadcrumb :items="[
					['label' => 'Home', 'href' => route('home')],
					['label' => 'To Let', 'href' => route('properties.index')],
					['label' => $breadcrumbLabel],
				]" />
				<div class="pl-toolbar-line" aria-hidden="true"></div>
			</div>

			<div class="pd-layout">
				<div class="pd-content">

					@if ($gallery->isNotEmpty())
						<div class="pd-gallery">
							<div class="swiper pd-gallery-main">
								<div class="swiper-wrapper">
									@foreach ($gallery as $image)
										<div class="swiper-slide">
											<img src="{{ $image->url }}" alt="{{ $image->alt ?? $property->pageHeadline() }}"
												@if (! $loop->first) loading="lazy" @endif decoding="async">
										</div>
									@endforeach
								</div>
								<button type="button" class="pd-gallery-nav pd-gallery-nav--prev" aria-label="Previous photo">
									<i class="bx bx-chevron-left" aria-hidden="true"></i>
								</button>
								<button type="button" class="pd-gallery-nav pd-gallery-nav--next" aria-label="Next photo">
									<i class="bx bx-chevron-right" aria-hidden="true"></i>
								</button>
								<span class="pd-gallery-count">
									<i class="bx bx-camera" aria-hidden="true"></i>
									<span data-pd-count>1 / {{ $gallery->count() }}</span>
								</span>
								@if ($property->virtual_tour_thumbnail || $property->virtual_tour_url)
									<a href="#pd-overview" class="pd-gallery-tour">
										<i class="bx bx-play-circle" aria-hidden="true"></i>
										<span>Virtual tour</span>
									</a>
								@endif
							</div>
							@if ($gallery->count() > 1)
								<div class="swiper pd-gallery-thumbs" thumbsSlider="">
									<div class="swiper-wrapper">
										@foreach ($gallery as $image)
											<div class="swiper-slide">
												<img src="{{ $image->url }}" alt="" loading="lazy" decoding="async">
											</div>
										@endforeach
									</div>
								</div>
							@endif
						</div>
					@endif

					<header class="pd-heading">
						<div class="pd-heading-top">
							<span class="pd-tag">{{ $property->status->label() }}</span>
							@if ($property->price)
								<p class="pd-price pd-price--inline">{{ $property->price }} <span class="pcm">{{ $property->pricePeriodLabel() }}</span></p>
							@endif
						</div>
						<h1>{{ $property->pageHeadline() }}</h1>
						<p class="pd-address">
							<i class="bx bx-location-alt-2" aria-hidden="true"></i>
							<span>{{ $addressLine }}</span>
						</p>

						<ul class="pd-key-facts pd-spec-grid" aria-label="Key facts">
							@if ($property->bedrooms !== null)
								<x-spec-item tag="li" icon="bx-bed-alt" label="Bedrooms" :value="$property->bedrooms" />
							@endif
							@if ($property->bathrooms !== null)
								<x-spec-item tag="li" icon="bx-bath" label="Bathrooms" :value="$property->bathrooms" />
							@endif
							@if ($property->receptions !== null)
								<x-spec-item tag="li" icon="bx-couch" label="Receptions" :value="$property->receptions" />
							@endif
							@if ($property->furnishing)
								<x-spec-item tag="li" icon="bx-chair" label="Furnishing" :value="$property->furnishing->label()" />
							@endif
							@if ($property->available_from)
								<x-spec-item tag="li" icon="bx-calendar-check" label="Available" :value="$property->available_from->format('j M Y')" />
							@endif
							@if ($property->epc_rating)
								<x-spec-item tag="li" icon="bx-trophy-star" label="EPC">
									<span class="pd-epc-badge">{{ $property->epc_rating }}</span>
								</x-spec-item>
							@endif
						</ul>
					</header>

					@if (count($tabs) > 1)
						<nav class="pd-tabs" aria-label="Property sections">
							@foreach ($tabs as $anchor => $label)
								<a class="pd-tab @if ($loop->first) is-active @endif" href="#{{ $anchor }}">{{ $label }}</a>
							@endforeach
						</nav>
					@endif

					@if (filled($property->description))
						<section id="pd-overview" class="pd-block pd-block--overview">
							<div class="pd-overview-text">
								<h2>Overview</h2>
								<p class="pd-desc-text" data-pd-desc>{{ $property->description }}</p>
								{{-- The <i> is required: main.js:887 swaps its class
								     between bx-chevron-down / bx-chevron-up and
								     throws on a null query if it is absent. --}}
								<button type="button" class="pd-read-more" data-pd-read-more>
									<span>Read more</span>
									<i class="bx bx-chevron-down" aria-hidden="true"></i>
								</button>
							</div>
							@if ($property->virtual_tour_thumbnail)
								<aside class="pd-tour">
									<p class="pd-tour-label">Virtual tour</p>
									<a href="{{ $property->virtual_tour_url ?? '#pd-overview' }}" class="pd-tour-preview">
										<img src="{{ \App\Support\MediaUrl::resolve($property->virtual_tour_thumbnail) }}" alt="Virtual tour preview" loading="lazy" decoding="async">
										<span class="pd-tour-play" aria-hidden="true"><i class="bx bx-play"></i></span>
									</a>
								</aside>
							@endif
						</section>
					@endif

					@if ($property->features->isNotEmpty())
						<section id="pd-features" class="pd-block">
							<h2>Key Features</h2>
							<ul class="pd-features">
								@foreach ($property->features as $feature)
									<li><i class="bx bx-check-circle" aria-hidden="true"></i><span>{{ $feature->label }}</span></li>
								@endforeach
							</ul>
						</section>
					@endif

					<section id="pd-details" class="pd-block">
						<h2>Property Details</h2>
						<div class="pd-spec-grid">
							<x-spec-item icon="bx-home-alt-2" label="Property Type" :value="$property->property_type->label()" />
							@if ($property->bedrooms !== null)
								<x-spec-item icon="bx-bed-alt" label="Bedrooms" :value="$property->bedrooms" />
							@endif
							@if ($property->bathrooms !== null)
								<x-spec-item icon="bx-bath" label="Bathrooms" :value="$property->bathrooms" />
							@endif
							@if ($property->receptions !== null)
								<x-spec-item icon="bx-couch" label="Reception Rooms" :value="$property->receptions" />
							@endif
							@if ($property->furnishing)
								<x-spec-item icon="bx-chair" label="Furnishing" :value="$property->furnishing->label()" />
							@endif
							@if ($property->garden)
								<x-spec-item icon="bx-leaf" label="Garden" :value="$property->garden" />
							@endif
							@if ($property->parking)
								<x-spec-item icon="bx-car" label="Parking" :value="$property->parking" />
							@endif
							@if ($property->council_tax_band)
								<x-spec-item icon="bx-info-circle" label="Council Tax Band" :value="$property->council_tax_band" />
							@endif
							@if ($property->epc_rating)
								<x-spec-item icon="bx-trophy-star" label="EPC Rating" :value="$property->epc_rating" />
							@endif
							@if ($property->pets)
								<x-spec-item icon="bx-paw-print" label="Pets" :value="$property->pets" />
							@endif
							@if ($property->max_occupants !== null)
								<x-spec-item icon="bx-group" label="Max Occupants" :value="$property->max_occupants" />
							@endif
							@if ($property->smoking)
								<x-spec-item icon="bx-cigarette" label="Smoking" :value="$property->smoking" />
							@endif
						</div>
					</section>

					@if ($property->tenure || $property->available_from || $property->deposit_pence !== null)
						<section id="pd-tenancy" class="pd-block">
							<h2>Tenancy Information</h2>
							<div class="pd-spec-grid">
								@if ($property->tenure)
									<x-spec-item icon="bx-info-circle" label="Tenure" :value="$property->tenure" />
								@endif
								@if ($property->tenancy_length)
									<x-spec-item icon="bx-calendar" label="Tenancy Length" :value="$property->tenancy_length" />
								@endif
								@if ($property->available_from)
									<x-spec-item icon="bx-calendar-check" label="Available From" :value="$property->available_from->format('j F Y')" />
								@endif
								@if ($property->price)
									<x-spec-item icon="bx-currency-notes" label="Monthly Rent">
										{{ $property->price }} <span class="pcm">{{ $property->pricePeriodLabel() }}</span>
									</x-spec-item>
								@endif
								@if ($property->deposit_pence !== null)
									<x-spec-item icon="bx-lock" label="Deposit" :value="(string) $property->deposit" />
								@endif
								@if ($property->holding_deposit_pence !== null)
									<x-spec-item icon="bx-wallet" label="Holding Deposit" :value="(string) $property->holdingDeposit" />
								@endif
								<x-spec-item icon="bx-info-circle" label="Bills Included" :value="$property->bills_included ? 'Yes' : 'No'" />
								@if ($property->current_tenants)
									<x-spec-item icon="bx-user-search" label="Current Tenants" :value="$property->current_tenants" />
								@endif
								@if ($property->lease_renewal)
									<x-spec-item icon="bx-clock-5" label="Lease Renewal" :value="$property->lease_renewal" />
								@endif
							</div>
						</section>
					@endif

					@if ($property->map_embed_url || $property->nearbyPlaces->isNotEmpty())
						<section id="pd-location" class="pd-block">
							<h2>Location</h2>
							<div class="pd-location">
								@if ($property->map_embed_url)
									<div class="pd-map">
										<iframe
											src="{{ $property->map_embed_url }}"
											title="Map for {{ $property->title }}"
											width="100%" height="100%" style="border:0;"
											allowfullscreen="" loading="lazy"
											referrerpolicy="strict-origin-when-cross-origin"></iframe>
									</div>
								@endif
								@if ($property->nearbyPlaces->isNotEmpty())
									<div class="pd-nearby">
										<h3>What's Nearby</h3>
										<ul class="pd-spec-grid pd-spec-grid--list">
											@foreach ($property->nearbyPlaces as $place)
												<x-spec-item
													tag="li"
													:icon="$place->icon ?? 'bx-map'"
													:label="$place->label"
													:value="$place->distanceLabel()"
												/>
											@endforeach
										</ul>
									</div>
								@endif
							</div>
						</section>
					@endif

					@if ($property->epc_rating)
						<section id="pd-epc" class="pd-block">
							<h2>Energy performance certificate (EPC)</h2>
							<div class="pd-epc">
								<div class="pd-epc-card pd-epc-card--cta">
									<p>{{ $addressLine }}</p>
									@if ($property->epc_certificate_url)
										<a class="pd-epc-btn" href="{{ $property->epc_certificate_url }}" aria-label="View EPC Certificate">
											<span class="pd-epc-btn-icon" aria-hidden="true"><i class="bx bx-file"></i></span>
											<span>View EPC Certificate</span>
										</a>
									@endif
								</div>
								<div class="pd-epc-card pd-epc-card--rating">
									<p>Energy rating</p>
									<strong>{{ $property->epc_rating }}</strong>
								</div>
								@if ($property->epc_valid_until)
									<div class="pd-epc-card pd-epc-card--meta">
										<span class="pd-spec-label">Valid until</span>
										<span class="pd-spec-value">{{ $property->epc_valid_until->format('j F Y') }}</span>
									</div>
								@endif
								@if ($property->epc_certificate_number)
									<div class="pd-epc-card pd-epc-card--meta">
										<span class="pd-spec-label">Certificate number</span>
										<span class="pd-spec-value">{{ $property->epc_certificate_number }}</span>
									</div>
								@endif
							</div>
						</section>
					@endif

					@if ($property->floorplan_image)
						<section id="pd-floorplan" class="pd-block pd-block--last">
							<div class="pd-section-head">
								<h2>Floor Plan</h2>
								<a class="pd-inline-link" href="{{ \App\Support\MediaUrl::resolve($property->floorplan_image) }}" target="_blank" rel="noopener">
									<i class="bx bx-expand-alt" aria-hidden="true"></i>
									<span>View larger</span>
								</a>
							</div>
							<div class="pd-floorplan">
								<img src="{{ \App\Support\MediaUrl::resolve($property->floorplan_image) }}" alt="Floor plan" loading="lazy" decoding="async">
							</div>
						</section>
					@endif
				</div>

				<aside class="pd-sidebar">
					<div class="pd-panel pd-panel--price">
						<span class="pd-tag">{{ $property->status->label() }}</span>
						@if ($property->price)
							<p class="pd-price">{{ $property->price }} <span class="pcm">{{ $property->pricePeriodLabel() }}</span></p>
						@endif
						<p class="pd-sidebar-address">
							<i class="bx bx-location-alt-2" aria-hidden="true"></i>
							<span>{{ $addressLine }}</span>
						</p>
						<div class="pd-panel-rule" aria-hidden="true"></div>
						<div class="pd-room-pills">
							@if ($property->bedrooms !== null)
								<span><i class="bx bx-bed-alt" aria-hidden="true"></i> {{ $property->bedrooms }} Bedroom</span>
							@endif
							@if ($property->bathrooms !== null)
								<span><i class="bx bx-bath" aria-hidden="true"></i> {{ $property->bathrooms }} Bathroom</span>
							@endif
							@if ($property->receptions !== null)
								<span><i class="bx bx-couch" aria-hidden="true"></i> {{ $property->receptions }} Reception</span>
							@endif
						</div>
						<div class="pd-panel-rule" aria-hidden="true"></div>
						<dl class="pd-kv">
							@if ($property->available_from)
								<div><dt>Available from</dt><dd>{{ $property->available_from->format('j F Y') }}</dd></div>
							@endif
							@if ($property->furnishing)
								<div><dt>Furnishing</dt><dd>{{ $property->furnishing->label() }}</dd></div>
							@endif
							@if ($property->epc_rating)
								<div><dt>EPC Rating</dt><dd><span class="pd-epc-badge">{{ $property->epc_rating }}</span></dd></div>
							@endif
							@if ($property->council_tax_band)
								<div><dt>Council Tax Band</dt><dd>{{ $property->council_tax_band }}</dd></div>
							@endif
							@if ($property->deposit_pence !== null)
								<div><dt>Deposit</dt><dd>{{ $property->deposit }}</dd></div>
							@endif
						</dl>
						<div class="pd-panel-rule" aria-hidden="true"></div>
						{{-- Stage 8: these carry the property slug so the contact
						     form arrives scoped to this listing and the stored
						     enquiry is linked to it. --}}
						<div class="pd-actions">
							<a href="{{ route('contact', ['property' => $property->slug, 'topic' => \App\Enums\EnquiryTopic::Lettings->value]) }}#enquiry-form" class="pd-action pd-action--primary">
								<span class="pd-action-ico" aria-hidden="true"><i class="bx bx-calendar-week"></i></span>
								<span class="pd-action-label">Arrange a Viewing</span>
							</a>
							<a href="{{ route('contact', ['property' => $property->slug, 'topic' => \App\Enums\EnquiryTopic::Lettings->value]) }}#enquiry-form" class="pd-action pd-action--dark">
								<span class="pd-action-ico" aria-hidden="true"><i class="bx bx-price-tag"></i></span>
								<span class="pd-action-label">Make an Offer</span>
							</a>
							@if ($property->brochure_url || $property->floorplan_image)
								<a href="{{ $property->brochure_url ?? '#pd-floorplan' }}" class="pd-action pd-action--outline">
									<span class="pd-action-ico" aria-hidden="true"><i class="bx bx-book"></i></span>
									<span class="pd-action-label">Download Brochure</span>
								</a>
							@endif
						</div>
					</div>

					@if ($property->negotiator)
						<div class="pd-panel">
							<h2 class="pd-panel-title">Contact Agent</h2>
							<div class="pd-agent">
								<img src="{{ \App\Support\MediaUrl::resolve($property->negotiator->image) }}" alt="{{ $property->negotiator->name }}" width="56" height="56" loading="lazy" decoding="async">
								<div>
									<strong>{{ $property->negotiator->name }}</strong>
									<p>{{ $property->negotiator->role }}</p>
								</div>
							</div>
							<ul class="pd-agent-contact">
								@if ($property->negotiator->phone)
									<li>
										<i class="bx bx-phone" aria-hidden="true"></i>
										<a href="tel:{{ config('site.phone.tel') }}">{{ $property->negotiator->phone }}</a>
									</li>
								@endif
								@if ($property->negotiator->email)
									<li>
										<i class="bx bx-envelope" aria-hidden="true"></i>
										<a href="mailto:{{ $property->negotiator->email }}">{{ $property->negotiator->email }}</a>
									</li>
								@endif
							</ul>
							<div class="pd-agent-actions">
								<x-btn-pill :href="'tel:' . config('site.phone.tel')" variant="dark" label="Call Branch" />
								@if ($property->negotiator->email)
									<x-btn-pill :href="'mailto:' . $property->negotiator->email" variant="outline" label="Email Agent" />
								@endif
							</div>
						</div>
					@endif

					<div class="pd-panel">
						<h2 class="pd-panel-title">Useful Links</h2>
						<ul class="pd-links pd-links--compact">
							<li><a href="{{ route('contact', ['property' => $property->slug]) }}"><i class="bx bx-coin" aria-hidden="true"></i> Tenant Fees</a></li>
							<li><a href="{{ route('contact', ['property' => $property->slug]) }}"><i class="bx bx-form" aria-hidden="true"></i> Rental Application</a></li>
							<li><a href="{{ route('contact', ['property' => $property->slug]) }}"><i class="bx bx-cog" aria-hidden="true"></i> Report Maintenance</a></li>
						</ul>
					</div>
				</aside>
			</div>
		</div>

		@if ($similar->isNotEmpty())
			<section class="pd-similar">
				<div class="container">
					<div class="pd-similar-head">
						<h2>Similar Properties</h2>
					</div>
					<div class="pl-grid pd-similar-grid">
						@foreach ($similar as $other)
							<x-property-card
								:href="route('properties.show', $other)"
								:image="$other->primaryImage?->url"
								:title="$other->title"
								:status="$other->status->label()"
								:price="(string) $other->price"
								:period="$other->pricePeriodLabel()"
								:type="$other->property_type->label()"
								:beds="$other->bedrooms"
								:baths="$other->bathrooms"
								:text="$other->summary ?? ''"
								heading="h3"
							/>
						@endforeach
					</div>
				</div>
			</section>
		@endif

		@include('partials.property-register')
	</main>

	{{--
		Sticky quick-action bar. property-pages.css keeps it display:none until
		the mobile breakpoint, so it costs desktop nothing and is the only CTA
		in view once a phone user has scrolled past the sidebar.
	--}}
	<div class="pd-mobile-bar" aria-label="Quick actions">
		<div class="pd-mobile-bar-price">
			<span class="pd-tag">{{ $property->status->label() }}</span>
			@if ($property->price)
				<strong>{{ $property->price }} <span class="pcm">{{ $property->pricePeriodLabel() }}</span></strong>
			@endif
		</div>
		@if ($property->negotiator)
			<a href="tel:{{ config('site.phone.tel') }}" class="pd-mobile-bar-agent" aria-label="Call {{ $property->negotiator->name }}">
				<img src="{{ \App\Support\MediaUrl::resolve($property->negotiator->image) }}" alt="" width="36" height="36" decoding="async">
				<span class="pd-mobile-bar-agent-ico" aria-hidden="true"><i class="bx bx-phone"></i></span>
			</a>
		@endif
		<a href="{{ route('contact', ['property' => $property->slug, 'topic' => \App\Enums\EnquiryTopic::Lettings->value]) }}#enquiry-form" class="pd-action pd-action--primary">
			<span class="pd-action-ico" aria-hidden="true"><i class="bx bx-calendar-week"></i></span>
			<span class="pd-action-label">Arrange Viewing</span>
		</a>
	</div>

</x-layouts.app>