<x-app-layout
    title="Buy & Sell Musical Instruments"
    :description="'Browse ' . $items->total() . ' musical instruments and gear for sale.'"
>
    <div class="py-8">
        <div class="max-w-3xl mx-auto px-4">
            <!-- Intro + search -->
            <div class="mb-8">
                <h1 class="text-lg font-semibold text-black dark:text-gray-100 mb-1">Gear for sale</h1>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">{{ $items->total() }} {{ Str::plural('item', $items->total()) }} listed by people like you.</p>

                <form method="GET" class="flex flex-wrap items-center gap-2 text-sm">
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="search"
                        class="flex-1 min-w-40 px-2 py-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-black dark:text-gray-100 placeholder-gray-400 focus:outline-none focus:border-black dark:focus:border-gray-300">

                    <select name="category" class="px-2 py-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-black dark:text-gray-100">
                        <option value="">all categories</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                {{ strtolower($category->name) }}
                            </option>
                        @endforeach
                    </select>

                    <select name="sort" class="px-2 py-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-black dark:text-gray-100">
                        <option value="newest" {{ request('sort') == 'newest' ? 'selected' : '' }}>newest</option>
                        <option value="oldest" {{ request('sort') == 'oldest' ? 'selected' : '' }}>oldest</option>
                        <option value="price_low" {{ request('sort') == 'price_low' ? 'selected' : '' }}>price: low</option>
                        <option value="price_high" {{ request('sort') == 'price_high' ? 'selected' : '' }}>price: high</option>
                    </select>

                    <button type="submit" class="px-3 py-1 border border-gray-400 dark:border-gray-500 rounded text-black dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800">go</button>

                    @if(request()->hasAny(['search', 'category', 'sort', 'type', 'min_price', 'max_price', 'location']))
                        <a href="{{ route('items.index') }}" class="text-gray-500 dark:text-gray-400 hover:underline">clear</a>
                    @endif
                </form>
            </div>

            <!-- Item rows -->
            @if($items->count() > 0)
                <ul class="divide-y divide-gray-200 dark:divide-gray-700 border-t border-b border-gray-200 dark:border-gray-700 mb-8">
                    @foreach($items as $item)
                        <li class="py-3">
                            <div class="flex items-baseline justify-between gap-4">
                                <a href="{{ route('items.show', $item) }}" data-item-id="{{ $item->id }}" class="text-black dark:text-gray-100 font-medium hover:underline">
                                    {{ $item->title }}
                                </a>
                                <span class="text-black dark:text-gray-100 whitespace-nowrap">
                                    @if($item->price && in_array($item->listing_type, ['sale', 'inventory_open']))
                                        ${{ number_format($item->price, 0) }}
                                    @elseif($item->listing_type === 'trade')
                                        trade
                                    @else
                                        inventory
                                    @endif
                                </span>
                            </div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                @if($item->category){{ strtolower($item->category->name) }}@endif
                                @if($item->location_city || $item->location_state)
                                    &middot; {{ collect([$item->location_city, $item->location_state])->filter()->join(', ') }}
                                @endif
                                &middot; <a href="{{ route('sellers.profile', $item->user) }}" class="hover:underline">{{ $item->user->name }}</a>
                                &middot; {{ $item->created_at->diffForHumans() }}
                                @if(($item->quantity ?? 1) > 1)
                                    &middot; qty {{ $item->quantity }}
                                @endif
                                @if($item->status === 'sale_pending')
                                    &middot; <span class="text-amber-600 dark:text-amber-400">sale pending</span>
                                @endif
                            </p>
                        </li>
                    @endforeach
                </ul>

                <div class="mb-8">
                    {{ $items->links() }}
                </div>
            @else
                <div class="py-16 text-center">
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">nothing found</p>
                    <a href="{{ route('items.index') }}" class="text-sm text-black dark:text-gray-100 hover:underline">see all</a>
                </div>
            @endif

            <p class="text-xs text-gray-400 dark:text-gray-500">
                prefer pictures? <a href="{{ request()->fullUrlWithQuery(['ui' => 'classic']) }}" class="underline">switch to the photo view</a>
            </p>
        </div>
    </div>
</x-app-layout>
