@extends('layouts.app')

@section('title', $collection['name'] . ' — ' . config('app.name'))
@section('description', strip_tags($collection['description'] ?? ''))

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-8 py-12">

        <div class="flex items-end justify-between gap-6 flex-wrap mb-10">
            <h1 class="font-display font-extrabold text-h1">{{ $collection['name'] }}</h1>

            <x-breadcrumb :items="[
                ['label' => __('storefront.nav.home'), 'href' => route('home')],
                ['label' => $collection['name']],
            ]" />
        </div>

        <div class="flex items-center justify-between gap-6 flex-wrap border-b border-black pb-6 mb-10">
            <p class="text-neutral-600">
                {{ trans_choice('storefront.shop.showing_results', $products->total(), [
                    'first' => $products->firstItem() ?? 0,
                    'last'  => $products->lastItem() ?? 0,
                    'total' => $products->total(),
                ]) }}
            </p>

            {{-- Dummy — not wired to real sorting yet --}}
            <x-ui.select
                :ariaLabel="__('storefront.shop.sort_label')"
                :options="[
                    ['value' => 'default',    'label' => __('storefront.shop.sort_default')],
                    ['value' => 'popularity', 'label' => __('storefront.shop.sort_popularity')],
                    ['value' => 'price-asc',  'label' => __('storefront.shop.sort_price_asc')],
                    ['value' => 'price-desc', 'label' => __('storefront.shop.sort_price_desc')],
                    ['value' => 'newest',     'label' => __('storefront.shop.sort_newest')],
                ]"
                value="default"
            />
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-12">

            {{-- Products --}}
            <div>
                @if($products->isEmpty())
                    <p class="text-neutral-500">{{ __('storefront.shop.no_products') }}</p>
                @else
                    <x-product-grid :products="$products->items()" cols="3" />

                    <div class="mt-12">
                        <x-ui.pagination :paginator="$products" />
                    </div>
                @endif
            </div>

            {{-- Sidebar — search, price and availability filters are dummy for now --}}
            <aside class="flex flex-col gap-10">

                <div>
                    <label for="shop-search" class="sr-only">{{ __('storefront.shop.search_label') }}</label>
                    <div class="relative">
                        <x-ui.input
                            type="search"
                            id="shop-search"
                            :placeholder="__('storefront.shop.search_placeholder')"
                            class="pr-10"
                        />
                        <button
                            type="button"
                            class="absolute right-0 top-1/2 -translate-y-1/2"
                            aria-label="{{ __('storefront.shop.search_label') }}"
                        >
                            <x-ui.icon name="search" :size="20" />
                        </button>
                    </div>
                </div>

                <div class="flex flex-col gap-4">
                    <h2 class="font-display font-extrabold uppercase">{{ __('storefront.shop.filter_price') }}</h2>

                    <div class="flex items-center gap-2" aria-hidden="true">
                        <x-ui.icon name="arrow-left" :size="20" />
                        <span class="flex-1 h-px bg-black"></span>
                        <x-ui.icon name="arrow-right" :size="20" />
                    </div>

                    <div class="flex items-center justify-between gap-4">
                        <span class="text-sm">€10 - €50</span>
                        <button type="button" class="underline-slide [--slide-h:1px] font-display font-bold italic uppercase text-sm">
                            {{ __('storefront.shop.apply') }}
                        </button>
                    </div>
                </div>

                <div class="flex flex-col gap-4">
                    <h2 class="font-display font-extrabold uppercase">{{ __('storefront.shop.availability') }}</h2>
                    <x-ui.checkbox id="shop-in-stock" name="in_stock">
                        {{ __('storefront.shop.in_stock_only') }}
                    </x-ui.checkbox>
                </div>

            </aside>

        </div>

    </div>
@endsection