@extends('layouts.public')

@section('title', $sector->name)
@section('meta_description', $sector->short_description ?: $sector->tagline)

@section('content')
    <x-page-hero :title="$sector->name" :eyebrow="$sector->tagline" />

    <div class="container-page grid gap-10 py-10 lg:grid-cols-12 lg:gap-12">

        {{--
            The same filter panel as the property page, built from the same
            service. What changes between a house and a tractor is which
            attributes the category declares — not the code that renders them.
        --}}
        <aside class="lg:col-span-4 xl:col-span-3">
            <form method="GET" action="{{ route('marketplace.sector', $sector->slug) }}"
                  class="lg:sticky lg:top-28"
                  x-data="fragmentFilter('{{ route('fragments.marketplace', $sector->slug) }}', {{ Js::from(request()->query()) }})"
                  @change="apply(Object.fromEntries(new FormData($el)))">

                <div class="rounded-2xl border border-border bg-surface p-5">
                    <h2 class="font-display text-base font-semibold text-text">{{ __('Refine') }}</h2>

                    <div class="mt-5 space-y-5">
                        <div>
                            <label for="q" class="form-label">{{ __('Keyword') }}</label>
                            <input id="q" type="search" name="q" value="{{ $criteria->keyword }}"
                                   placeholder="{{ __('Make, model or reference') }}" class="form-input">
                        </div>

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

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

                        <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">{{ __('Min price') }}</label>
                                <input id="min_price" type="number" name="min_price" min="0"
                                       value="{{ $criteria->minPrice }}" class="form-input">
                            </div>

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

                        {{-- Whatever this category declares. Bind an attribute in
                             the admin panel and it appears here — there is no
                             per-vertical filter code to write. --}}
                        @foreach ($attributeFilters as $filter)
                            @include('public.partials.attribute-filter', ['filter' => $filter])
                        @endforeach
                    </div>

                    <div class="mt-6 flex flex-wrap gap-3 border-t border-border pt-5">
                        <button type="submit" class="btn btn-primary flex-1">{{ __('Search') }}</button>

                        @if ($criteria->hasFilters())
                            <a href="{{ route('marketplace.sector', $sector->slug) }}" class="btn-ghost">
                                {{ __('Clear') }}
                            </a>
                        @endif
                    </div>
                </div>
            </form>
        </aside>

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

                {{-- A plain GET form, like the property page: sorting is part of
                     the URL, so a sorted view can be shared and reloaded. --}}
                <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'),
                            'oldest' => __('Oldest first'),
                        ] as $value => $label)
                            <option value="{{ $value }}" @selected($criteria->sort === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                </form>
            </div>

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

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