{{--
	Properties to Let — ported from the legacy properties.php.

	The search form GETs back to this same route so filters survive in the
	URL and a filtered listing stays linkable and bookmarkable.
--}}

<x-layouts.app
	title="Properties to Let | B Bailey"
	description="Browse premium homes and investment opportunities available through B Bailey Property Management across London and the South East."
	keywords="properties to let London, rental properties Ilford, B Bailey lettings"
	body-class="page-properties"
	:styles="['main', 'property-pages']"
	:swiper="true"
	lcp="assets/img/properties/detail/listing-hero.jpg"
>

	<section class="pl-hero" aria-labelledby="pl-hero-heading">
		<div class="pl-hero-bg" aria-hidden="true">
			<img src="{{ asset('assets/img/properties/detail/listing-hero.jpg') }}" alt="" width="1600" height="1132" decoding="async" fetchpriority="high">
			<div class="pl-hero-overlay"></div>
			<div class="pl-hero-fade"></div>
		</div>
		<div class="container">
			<div class="pl-hero-content">
				<x-breadcrumb :items="[
					['label' => 'Home', 'href' => route('home')],
					['label' => 'To Let'],
				]" />
				<h1 id="pl-hero-heading" class="pl-hero-title">Properties to Let</h1>
				<p class="pl-hero-lead">Homes and investments across London and the South East — available now through B Bailey.</p>
				<x-hero-actions />
			</div>

			<form class="pl-search" role="search" action="{{ route('properties.index') }}" method="get" aria-label="Search properties">
				<label class="pl-search-field pl-search-field--query">
					<span class="visually-hidden">Search by area or address</span>
					<i class="bx bx-search" aria-hidden="true"></i>
					<input type="search" name="q" placeholder="Area or postcode..." autocomplete="off" value="{{ $filters['q'] ?? '' }}">
				</label>

				<div class="pl-search-filters">
					<label class="pl-search-field pl-search-field--select">
						<span class="visually-hidden">Location</span>
						<select name="location">
							<option value="">Location</option>
							@foreach (['Chingford', 'Ilford', 'Romford', 'Walthamstow'] as $town)
								<option value="{{ $town }}" @selected(($filters['location'] ?? null) === $town)>{{ $town }}</option>
							@endforeach
						</select>
						<i class="bx bx-chevron-down" aria-hidden="true"></i>
					</label>

					<label class="pl-search-field pl-search-field--select">
						<span class="visually-hidden">Min Price PCM</span>
						<select name="min_price">
							<option value="">Min Price</option>
							@foreach ([1000, 2000, 3000, 5000] as $price)
								<option value="{{ $price }}" @selected((int) ($filters['min_price'] ?? 0) === $price)>£{{ number_format($price) }}</option>
							@endforeach
						</select>
						<i class="bx bx-chevron-down" aria-hidden="true"></i>
					</label>

					<label class="pl-search-field pl-search-field--select">
						<span class="visually-hidden">Max Price PCM</span>
						<select name="max_price">
							<option value="">Max Price</option>
							@foreach ([3000, 5000, 7000, 10000] as $price)
								<option value="{{ $price }}" @selected((int) ($filters['max_price'] ?? 0) === $price)>£{{ number_format($price) }}</option>
							@endforeach
						</select>
						<i class="bx bx-chevron-down" aria-hidden="true"></i>
					</label>

					<label class="pl-search-field pl-search-field--select">
						<span class="visually-hidden">Min Bedrooms</span>
						<select name="beds">
							<option value="">Beds</option>
							@foreach ([1, 2, 3, 4] as $beds)
								<option value="{{ $beds }}" @selected((int) ($filters['beds'] ?? 0) === $beds)>{{ $beds }}+</option>
							@endforeach
						</select>
						<i class="bx bx-chevron-down" aria-hidden="true"></i>
					</label>

					<label class="pl-search-field pl-search-field--select">
						<span class="visually-hidden">Type</span>
						<select name="type">
							<option value="">Type</option>
							@foreach (\App\Enums\PropertyType::cases() as $type)
								<option value="{{ $type->value }}" @selected(($filters['type'] ?? null) === $type->value)>{{ $type->label() }}</option>
							@endforeach
						</select>
						<i class="bx bx-chevron-down" aria-hidden="true"></i>
					</label>
				</div>

				{{-- Keep the chosen sort when the filters are re-submitted. --}}
				@if ($sort !== 'newest')
					<input type="hidden" name="sort" value="{{ $sort }}">
				@endif

				<button type="submit" class="pl-search-btn" aria-label="Search properties">
					<i class="bx bx-search" aria-hidden="true"></i>
					<span class="pl-search-btn-label">Search</span>
				</button>
			</form>
		</div>
	</section>

	<main id="main" class="pl-main">
		<div class="container">
			<div class="pl-toolbar">
				<p class="pl-results-count">
					<strong>{{ $properties->total() }}</strong>
					{{ Str::plural('property', $properties->total()) }} to let
					@if ($filters !== [])
						of {{ $total }}
					@endif
				</p>
				<div class="pl-toolbar-line" aria-hidden="true"></div>

				<form class="pl-sort-form" action="{{ route('properties.index') }}" method="get">
					{{-- Carry the active filters through a sort change. --}}
					@foreach ($filters as $key => $value)
						<input type="hidden" name="{{ $key }}" value="{{ $value }}">
					@endforeach
					<label class="pl-sort">
						<span class="pl-sort-label" aria-hidden="true">Sort</span>
						<span class="visually-hidden">Sort properties</span>
						<select name="sort" aria-label="Sort by" onchange="this.form.submit()">
							<option value="newest" @selected($sort === 'newest')>Newest</option>
							<option value="price_asc" @selected($sort === 'price_asc')>Price: low to high</option>
							<option value="price_desc" @selected($sort === 'price_desc')>Price: high to low</option>
							<option value="beds" @selected($sort === 'beds')>Bedrooms</option>
						</select>
						<i class="bx bx-chevron-down" aria-hidden="true"></i>
					</label>
					<noscript><button type="submit" class="pl-search-btn">Sort</button></noscript>
				</form>
			</div>

			@if ($properties->isEmpty())
				<div class="pl-empty">
					<h2>No properties match your search</h2>
					<p>Try widening the price range or clearing a filter. Our team can also let you know as soon as something suitable becomes available.</p>
					<div class="pl-empty-actions">
						<x-btn-pill :href="route('properties.index')" variant="dark" label="Clear filters" />
						<x-btn-pill :href="route('contact')" variant="outline" label="Register your requirements" />
					</div>
				</div>
			@else
				<div class="pl-grid">
					@foreach ($properties as $property)
						<x-property-card
							:href="route('properties.show', $property)"
							:image="$property->primaryImage?->url"
							:title="$property->title"
							:status="$property->status->label()"
							:price="(string) $property->price"
							:period="$property->pricePeriodLabel()"
							:type="$property->property_type->label()"
							:beds="$property->bedrooms"
							:baths="$property->bathrooms"
							:text="$property->summary ?? ''"
							heading="h2"
						/>
					@endforeach
				</div>

				@if ($properties->hasPages())
					<nav class="pl-pagination" aria-label="Properties pagination">
						{{ $properties->onEachSide(1)->links() }}
					</nav>
				@endif
			@endif
		</div>
	</main>

	{{-- Legacy properties.php carried this outside <main>, after the grid. --}}
	@include('partials.property-register', ['extraClass' => 'pl-register'])

</x-layouts.app>