@extends('layouts.app')

@section('title', 'Αναζήτηση')

@section('content')

    <section class="px-8 py-16 lg:px-16">

        <form method="GET" action="{{ route('search') }}" class="max-w-xl mb-12">
            <x-ui.field label="Αναζήτηση" for="search-q">
                <x-ui.input id="search-q" name="q" value="{{ $query }}" autocomplete="off" />
            </x-ui.field>
        </form>

        @if ($query === '')
            <p class="text-neutral-500">Πληκτρολόγησε κάτι για αναζήτηση.</p>
        @else
            <div class="grid grid-cols-1 lg:grid-cols-[1fr_230px] gap-14">

                <div>
                    @if ($results->isEmpty())
                        <p class="text-neutral-500">Δεν βρέθηκαν αποτελέσματα για "{{ $query }}".</p>
                    @else
                        <p class="mb-6 text-neutral-500">{{ $results->count() }} αποτελέσματα για "{{ $query }}"</p>

                        <ul>
                            @foreach ($results as $product)
                                <li>
                                    #{{ $product->id }} —
                                    <a href="{{ route('product.show', ['id' => $product->id]) }}">
                                        {{ $product->translateAttribute('name') ?? '(no name — id: ' . $product->id . ')' }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </div>

                {{-- Filter sidebar — same shape/components as category/partials/listing.blade.php,
                     adapted to SearchListing's query() (which always carries `q`) instead of
                     CategoryListing's collection-scoped one. --}}
                <aside class="flex flex-col gap-10">

                    <form
                        method="get"
                        action="{{ route('search') }}"
                        data-controller="auto-submit"
                        data-action="change->auto-submit#submit range-slider:change->auto-submit#submit"
                        class="contents"
                    >
                        <input type="hidden" name="q" value="{{ $listing->query }}">

                        @if ($listing->sort)
                            <input type="hidden" name="sort" value="{{ $listing->sort->value }}">
                        @endif

                        @if ($priceFloor !== null && $priceCeil !== null && $priceCeil > $priceFloor)
                            <div class="flex flex-col gap-4">
                                <p class="font-extrabold text-h4">{{ __('storefront.shop.filter_price') }}</p>

                                <x-ui.range-slider
                                    name="price"
                                    :min="$priceFloor"
                                    :max="$priceCeil"
                                    :min-value="max($priceFloor, $listing->minPrice ?? $priceFloor)"
                                    :max-value="min($priceCeil, $listing->maxPrice ?? $priceCeil)"
                                    prefix="€"
                                    separator=" - "
                                    :legend="__('storefront.shop.filter_price')"
                                    :min-label="__('storefront.shop.price_min')"
                                    :max-label="__('storefront.shop.price_max')"
                                >
                                    @if ($priceFiltered)
                                        <a
                                            href="{{ route('search', $listing->query(['price_min' => null, 'price_max' => null, 'page' => null])) }}"
                                            class="underline-slide [--slide-h:1px] font-display text-sm font-bold uppercase italic"
                                        >{{ __('storefront.shop.reset') }}</a>
                                    @endif
                                </x-ui.range-slider>
                            </div>
                        @endif

                        <div class="flex flex-col gap-4 [&_label]:text-base">
                            <p class="font-extrabold text-h4">{{ __('storefront.shop.availability') }}</p>
                            <x-ui.checkbox id="search-in-stock" name="in_stock" :checked="$listing->inStockOnly">
                                {{ __('storefront.shop.in_stock_only') }}
                            </x-ui.checkbox>
                        </div>

                        <button type="submit" class="sr-only">{{ __('storefront.shop.apply') }}</button>
                    </form>

                </aside>

            </div>
        @endif

    </section>

@endsection