@extends('layouts.public')

@section('title', __('Properties'))
@section('meta_description', __('Houses, apartments, land and commercial property for sale and to rent.'))

@section('content')
    <x-page-hero :title="__('Properties')"
                 :eyebrow="__('For sale and to rent')"
                 :image="setting('properties_banner')" />

    @php($isWide = in_array($criteria->view, ['map', 'split'], true))

    <div @class([
        'container-page grid gap-10 py-10 lg:gap-12',
        'lg:grid-cols-12' => ! $isWide,
    ])>

        {{--
            The filter panel is a plain GET form, so every filtered view is a real
            URL that can be shared, bookmarked and reloaded. Alpine swaps the
            results in without a reload where it can; without JavaScript the form
            still submits and the page still works.
        --}}
        <aside @class(['lg:col-span-4 xl:col-span-3' => ! $isWide])>
            <form method="GET" action="{{ route('properties.index') }}"
                  @class(['lg:sticky lg:top-28' => ! $isWide])
                  x-data="fragmentFilter('{{ route('fragments.properties') }}', {{ Js::from(request()->query()) }})"
                  @change="apply(Object.fromEntries(new FormData($el)))">

                <input type="hidden" name="view" value="{{ $criteria->view }}">

                <div @class([
                    'rounded-2xl border border-border bg-surface p-5',
                    'grid gap-5 sm:grid-cols-2 lg:grid-cols-4' => $isWide,
                ])>
                    <h2 @class(['font-display text-base font-semibold text-text', 'sr-only' => $isWide])>
                        {{ __('Refine') }}
                    </h2>

                    <div @class([
                        'mt-5 space-y-5' => ! $isWide,
                        'contents' => $isWide,
                    ])>
                        <div>
                            <label for="q" class="form-label">{{ __('Keyword') }}</label>
                            <input id="q" type="search" name="q" value="{{ $criteria->keyword }}"
                                   placeholder="{{ __('Area, landmark or reference') }}" class="form-input">
                        </div>

                        <x-form.select name="listing" :label="__('Offered for')" :options="$intents"
                                       :value="$criteria->intent" :placeholder="__('Any')" />

                        <x-form.select name="type" :label="__('Property type')"
                                       :options="$categories->mapWithKeys(fn ($c) => [$c->slug => str_repeat('— ', $c->depth).$c->name])->all()"
                                       :value="$criteria->category" :placeholder="__('Any type')" />

                        <x-form.select name="district" :label="__('District')" :options="$districts"
                                       :value="$criteria->district" :placeholder="__('Anywhere')" data-searchable />

                        <div class="grid gap-3 xs:grid-cols-2">
                            <div>
                                <label for="min_price" class="form-label">{{ __('Price from') }}</label>
                                <input id="min_price" type="number" name="min_price" min="0" step="100000"
                                       value="{{ $criteria->minPrice }}" class="form-input">
                            </div>

                            <div>
                                <label for="max_price" class="form-label">{{ __('Price up to') }}</label>
                                <input id="max_price" type="number" name="max_price" min="0" step="100000"
                                       value="{{ $criteria->maxPrice }}" class="form-input">
                            </div>
                        </div>

                        <div class="grid gap-3 xs:grid-cols-2">
                            <x-form.select name="beds" :label="__('Bedrooms')"
                                           :options="collect(range(1, 6))->mapWithKeys(fn ($n) => [$n => $n.'+'])->all()"
                                           :value="request('beds')" :placeholder="__('Any')" />

                            <x-form.select name="baths" :label="__('Bathrooms')"
                                           :options="collect(range(1, 5))->mapWithKeys(fn ($n) => [$n => $n.'+'])->all()"
                                           :value="request('baths')" :placeholder="__('Any')" />
                        </div>

                        <div class="grid gap-3 xs:grid-cols-2">
                            <div>
                                <label for="min_area" class="form-label">{{ __('Min area') }}</label>
                                <input id="min_area" type="number" name="min_area" min="0"
                                       value="{{ request('min_area') }}" class="form-input"
                                       placeholder="{{ __('sq. ft') }}">
                            </div>

                            <div>
                                <label for="max_area" class="form-label">{{ __('Max area') }}</label>
                                <input id="max_area" type="number" name="max_area" min="0"
                                       value="{{ request('max_area') }}" class="form-input"
                                       placeholder="{{ __('sq. ft') }}">
                            </div>
                        </div>

                        {{--
                            Filters the chosen category declares for itself.
                            Nothing below is named in this template — bind an
                            attribute in the panel and the control appears.
                        --}}
                        @foreach ($attributeFilters as $filter)
                            @continue(in_array($filter['code'], ['bedrooms', 'bathrooms', 'built_up_area', 'land_area'], true))

                            @include('public.partials.attribute-filter', ['filter' => $filter])
                        @endforeach

                        @if ($amenities->isNotEmpty())
                            <fieldset x-data="{ open: false }">
                                <legend class="form-label">{{ __('Amenities') }}</legend>

                                <div class="space-y-2" x-bind:class="open ? '' : 'max-h-40 overflow-hidden'">
                                    @foreach ($amenities as $amenity)
                                        <label class="flex cursor-pointer items-center gap-2.5">
                                            <input type="checkbox" name="amenities[]" value="{{ $amenity->slug }}"
                                                   @checked(in_array($amenity->slug, $criteria->amenities, true))
                                                   class="size-4 rounded border-border text-text-brand focus:ring-primary">
                                            <span class="text-sm text-text-secondary">{{ $amenity->name }}</span>
                                        </label>
                                    @endforeach
                                </div>

                                <button type="button" @click="open = !open"
                                        class="mt-2 text-xs font-medium text-text-brand underline-offset-4 hover:underline">
                                    <span x-show="!open">{{ __('Show all amenities') }}</span>
                                    <span x-show="open" x-cloak>{{ __('Show fewer') }}</span>
                                </button>
                            </fieldset>
                        @endif

                        <x-form.checkbox name="verified" :checked="$criteria->verifiedOnly"
                                         :label="__('Verified listings only')" />
                    </div>

                    <div @class(['flex flex-wrap gap-2', 'mt-6' => ! $isWide, 'sm:col-span-2 lg:col-span-4' => $isWide])>
                        <button type="submit" class="btn-primary btn-sm">{{ __('Apply') }}</button>

                        @if ($hasFilters)
                            <a href="{{ route('properties.index', ['view' => $criteria->view]) }}"
                               class="btn-ghost btn-sm">{{ __('Clear all') }}</a>
                        @endif
                    </div>
                </div>
            </form>
        </aside>

        <div @class(['lg:col-span-8 xl:col-span-9' => ! $isWide])>
            <div class="mb-6 flex flex-wrap items-center justify-between gap-4">
                <p class="text-sm text-text-secondary">
                    {{ trans_choice('One property|:count properties', $listings->total(), ['count' => number_format($listings->total())]) }}
                </p>

                <div class="flex flex-wrap items-center gap-3">
                    {{-- The view is a query-string key, so a link opens on the
                         same one the sender was looking at. --}}
                    <div class="flex items-center rounded-lg border border-border p-0.5"
                         role="group" aria-label="{{ __('Result view') }}">
                        @foreach ([
                            'grid' => ['grid', __('Grid')],
                            'list' => ['menu', __('List')],
                            'map' => ['map', __('Map')],
                            'split' => ['layers', __('Split')],
                        ] as $value => [$icon, $label])
                            <a href="{{ request()->fullUrlWithQuery(['view' => $value, 'page' => null]) }}"
                               @class([
                                   'inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition',
                                   'bg-primary/15 text-text' => $criteria->view === $value,
                                   'text-text-secondary hover:bg-surface-muted hover:text-text' => $criteria->view !== $value,
                               ])
                               @if ($criteria->view === $value) aria-current="true" @endif>
                                <x-icon :name="$icon" class="size-3.5" />
                                <span class="hidden xs:inline">{{ $label }}</span>
                            </a>
                        @endforeach
                    </div>

                    <form method="GET" class="flex items-center gap-2">
                        @include('public.partials.query-inputs', [
                            'params' => request()->except(['sort', 'page']),
                            'prefix' => '',
                        ])

                        <label for="sort" class="sr-only">{{ __('Sort by') }}</label>
                        <select id="sort" name="sort" onchange="this.form.submit()" class="form-input w-48"
                                data-no-select2>
                            @foreach ([
                                '' => __('Featured first'),
                                'price_asc' => __('Price: low to high'),
                                'price_desc' => __('Price: high to low'),
                                'area_desc' => __('Largest first'),
                                'oldest' => __('Oldest first'),
                            ] as $value => $label)
                                <option value="{{ $value }}" @selected($criteria->sort === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </form>
                </div>
            </div>

            {{--
                Saving the search posts the page's own query string, so what is
                stored reproduces exactly what the buyer is looking at — no
                re-entering, and no drift between the two.
            --}}
            @if ($hasFilters)
                <div class="mb-6 rounded-xl border border-border bg-surface p-4">
                    @auth
                        <form action="{{ route('account.saved-searches.store') }}" method="POST"
                              class="flex flex-wrap items-end gap-3">
                            @csrf

                            @include('public.partials.query-inputs', [
                                'params' => request()->except(['page', 'view']),
                                'prefix' => 'criteria',
                            ])

                            <div class="min-w-0 flex-1">
                                <label for="saved-search-name" class="form-label">{{ __('Save this search') }}</label>
                                <input id="saved-search-name" type="text" name="name" class="form-input"
                                       placeholder="{{ __('Name it, or leave blank') }}" maxlength="120">
                            </div>

                            <x-form.select name="alert_frequency" :label="__('Tell me')"
                                           :options="\App\Models\SavedSearch::FREQUENCIES"
                                           value="instant" :placeholder="false" class="w-full sm:w-56" />

                            <button type="submit" class="btn btn-outline">{{ __('Save search') }}</button>
                        </form>
                    @else
                        <p class="text-sm text-text-secondary">
                            <a href="{{ route('login') }}" class="font-medium text-text-brand underline underline-offset-4">
                                {{ __('Sign in') }}
                            </a>
                            {{ __('to save this search and be told when something new matches it.') }}
                        </p>
                    @endauth
                </div>
            @endif

            @if ($activeFilters)
                <div class="mb-6 flex flex-wrap gap-2">
                    @foreach ($activeFilters as $filter)
                        <span class="pill pill-muted">{{ $filter['label'] }}: {{ $filter['value'] }}</span>
                    @endforeach
                </div>
            @endif

            <div x-ref="results" data-results>
                @include('public.partials.listing-results', ['listings' => $listings, 'criteria' => $criteria])
            </div>
        </div>
    </div>
@endsection