<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve(['title' => 'Buy & Sell Musical Instruments','description' => 'Browse ' . $items->total() . ' musical instruments and gear for sale.'] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
    <div class="py-16">
        <div class="max-w-7xl mx-auto px-8 sm:px-12">
            <!-- Search and Filters -->
            <div class="mb-16">
                <form method="GET" class="space-y-8">
                    <!-- Always Visible Search -->
                    <div class="flex items-center justify-between">
                        <div class="flex-1 max-w-md">
                            <input id="search" type="text" name="search" value="<?php echo e(request('search')); ?>" placeholder="search" class="w-full px-0 py-2 border-0 border-b border-gray-200 dark:border-gray-600 bg-transparent text-sm tracking-widest placeholder-gray-400 dark:placeholder-gray-500 text-black dark:text-gray-100 focus:outline-none focus:border-black dark:focus:border-gray-300 transition-colors">
                        </div>
                        
                        <div class="flex items-center space-x-8">
                            <button type="button" onclick="toggleFilters()" class="text-xs tracking-widest hover:opacity-60 transition-opacity text-black dark:text-gray-100">
                                <span id="filter-toggle-text">search options</span>
                            </button>
                            <span class="text-xs tracking-widest text-gray-500 dark:text-gray-400"><?php echo e($items->total()); ?></span>
                        </div>
                    </div>

                    <!-- Hidden Filters -->
                    <div id="filters-section" class="hidden space-y-8">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                            <!-- Category -->
                            <div>
                                <select id="category" name="category" class="w-full px-0 py-2 border-0 border-b border-gray-200 dark:border-gray-600 bg-transparent text-xs tracking-widest text-black dark:text-gray-100 focus:outline-none focus:border-black dark:focus:border-gray-300 transition-colors">
                                    <option value="">all categories</option>
                                    <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($category->id); ?>" <?php echo e(request('category') == $category->id ? 'selected' : ''); ?>>
                                            <?php echo e(strtolower($category->name)); ?>

                                        </option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            </div>

                            <!-- Listing Type -->
                            <div>
                                <select id="type" name="type" class="w-full px-0 py-2 border-0 border-b border-gray-200 dark:border-gray-600 bg-transparent text-xs tracking-widest text-black dark:text-gray-100 focus:outline-none focus:border-black dark:focus:border-gray-300 transition-colors">
                                    <option value="">all</option>
                                    <option value="sale" <?php echo e(request('type') == 'sale' ? 'selected' : ''); ?>>for sale</option>
                                    <option value="pre-market" <?php echo e(request('type') == 'pre-market' ? 'selected' : ''); ?>>pre-market</option>
                                </select>
                            </div>

                            <!-- Sort -->
                            <div>
                                <select id="sort" name="sort" class="w-full px-0 py-2 border-0 border-b border-gray-200 dark:border-gray-600 bg-transparent text-xs tracking-widest text-black dark:text-gray-100 focus:outline-none focus:border-black dark:focus:border-gray-300 transition-colors">
                                    <option value="newest" <?php echo e(request('sort') == 'newest' ? 'selected' : ''); ?>>newest</option>
                                    <option value="oldest" <?php echo e(request('sort') == 'oldest' ? 'selected' : ''); ?>>oldest</option>
                                    <option value="price_low" <?php echo e(request('sort') == 'price_low' ? 'selected' : ''); ?>>price: low</option>
                                    <option value="price_high" <?php echo e(request('sort') == 'price_high' ? 'selected' : ''); ?>>price: high</option>
                                </select>
                            </div>
                        </div>

                        <!-- Price Range -->
                        <div class="grid grid-cols-2 gap-8 max-w-md">
                            <div>
                                <input id="min_price" type="number" name="min_price" value="<?php echo e(request('min_price')); ?>" step="0.01" min="0" placeholder="min price" class="w-full px-0 py-2 border-0 border-b border-gray-200 dark:border-gray-600 bg-transparent text-xs tracking-widest placeholder-gray-400 dark:placeholder-gray-500 text-black dark:text-gray-100 focus:outline-none focus:border-black dark:focus:border-gray-300 transition-colors">
                            </div>
                            <div>
                                <input id="max_price" type="number" name="max_price" value="<?php echo e(request('max_price')); ?>" step="0.01" min="0" placeholder="max price" class="w-full px-0 py-2 border-0 border-b border-gray-200 dark:border-gray-600 bg-transparent text-xs tracking-widest placeholder-gray-400 dark:placeholder-gray-500 text-black dark:text-gray-100 focus:outline-none focus:border-black dark:focus:border-gray-300 transition-colors">
                            </div>
                        </div>

                        <div class="flex space-x-8">
                            <a href="<?php echo e(route('items.index')); ?>" class="text-xs tracking-widest hover:opacity-60 transition-opacity text-black dark:text-gray-100">clear</a>
                            <button type="submit" class="text-xs tracking-widest hover:opacity-60 transition-opacity text-black dark:text-gray-100">apply</button>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Items Grid -->
            <?php if($items->count() > 0): ?>
                <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-16 lg:gap-24 mb-32">
                    <?php $__currentLoopData = $items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="group">
                            <a href="<?php echo e(route('items.show', $item)); ?>" class="block">
                                <div class="aspect-square bg-gray-50 dark:bg-gray-800 mb-8 overflow-hidden relative transition-colors duration-300 rounded-lg">
                                    <?php if($item->primaryPhoto): ?>
                                        <img src="<?php echo e(asset($item->primaryPhoto->url)); ?>" alt="<?php echo e($item->title); ?>" class="w-full h-full object-cover group-hover:opacity-80 transition-opacity duration-500">
                                    <?php else: ?>
                                        <div class="w-full h-full flex items-center justify-center">
                                            <div class="w-8 h-8 border border-gray-300 dark:border-gray-500"></div>
                                        </div>
                                    <?php endif; ?>
                                    
                                    <!-- Status indicators -->
                                    <?php if($item->status === 'sale_pending'): ?>
                                        <div class="absolute top-4 left-4 w-2 h-2 bg-black dark:bg-gray-100"></div>
                                    <?php endif; ?>
                                    
                                    <?php if($item->listing_type === 'trade'): ?>
                                        <div class="absolute top-4 right-4 w-2 h-2 border border-black dark:border-gray-100"></div>
                                    <?php endif; ?>
                                </div>
                                
                                <div class="space-y-6">
                                    <h3 class="text-sm tracking-widest group-hover:opacity-60 transition-opacity leading-relaxed text-black dark:text-gray-100"><?php echo e(strtolower($item->title)); ?></h3>
                                    
                                    <?php if($item->price && in_array($item->listing_type, ['sale', 'inventory_open'])): ?>
                                        <p class="text-sm tracking-widest text-gray-500 dark:text-gray-400">$<?php echo e(number_format($item->price, 0)); ?><?php if(($item->quantity ?? 1) > 1): ?> · qty <?php echo e($item->quantity); ?><?php endif; ?></p>
                                    <?php else: ?>
                                        <p class="text-sm tracking-widest text-gray-500 dark:text-gray-400">
                                            <?php if($item->listing_type === 'trade'): ?>
                                                trade
                                            <?php else: ?>
                                                inventory
                                            <?php endif; ?>
                                            <?php if(($item->quantity ?? 1) > 1): ?> · qty <?php echo e($item->quantity); ?><?php endif; ?>
                                        </p>
                                    <?php endif; ?>
                                </div>
                            </a>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>

                <!-- Minimal Pagination -->
                <div class="text-center">
                    <?php echo e($items->links()); ?>

                </div>
            <?php else: ?>
                <div class="text-center py-48">
                    <p class="text-xs tracking-widest text-gray-500 dark:text-gray-400 mb-16">nothing found</p>
                    <a href="<?php echo e(route('items.index')); ?>" class="text-xs tracking-widest hover:opacity-60 transition-opacity text-black dark:text-white">
                        see all
                    </a>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <script>
        function toggleFilters() {
            const filtersSection = document.getElementById('filters-section');
            const toggleText = document.getElementById('filter-toggle-text');
            
            if (filtersSection.classList.contains('hidden')) {
                filtersSection.classList.remove('hidden');
                toggleText.textContent = 'hide options';
            } else {
                filtersSection.classList.add('hidden');
                toggleText.textContent = 'search options';
            }
        }
        
        // Show filters if any filter is active
        <?php if(request()->filled(['category', 'type', 'sort', 'min_price', 'max_price', 'location'])): ?>
            document.addEventListener('DOMContentLoaded', function() {
                toggleFilters();
            });
        <?php endif; ?>
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?><?php /**PATH /var/www/html/resources/views/items/index.blade.php ENDPATH**/ ?>