@extends('layouts.master')

@section('title', 'Marketplace - DigitalStore')

@section('content')

{{-- HEADER --}}
<section class="bg-slate-900 pt-16 pb-12 relative overflow-hidden">
    <div class="absolute inset-0 z-0 opacity-10">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[300px] bg-brand-500 blur-[100px] rounded-full"></div>
    </div>

    <div class="max-w-7xl mx-auto px-6 lg:px-8 relative z-10">
        <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-8">
            <div class="space-y-3">
                <nav class="flex items-center gap-2 text-[9px] font-900 uppercase tracking-[0.2em] text-slate-500">
                    <a href="{{ route('storefront.home') }}" class="hover:text-brand-500 transition-colors">Home</a>
                    <svg class="w-3 h-3 opacity-20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></svg>
                    <span class="text-brand-500">Marketplace</span>
                </nav>
                <h1 class="text-2xl lg:text-4xl font-900 text-white tracking-tight uppercase">
                    Digital <span class="text-brand-500">Marketplace</span>
                </h1>
                <p class="text-sm text-slate-400 font-500 max-w-sm">
                    Premium assets curated for high-performance creators.
                </p>
            </div>
            
            {{-- Search Bar --}}
            <div class="w-full lg:max-w-sm">
                <form action="{{ route('storefront.products') }}" method="GET" class="relative group">
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search catalog..." 
                        class="w-full h-12 bg-white/5 border border-white/10 rounded-xl pl-12 pr-6 text-white placeholder:text-slate-500 focus:outline-none focus:border-brand-500 transition-all font-600 text-sm">
                    <div class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 group-focus-within:text-brand-500 transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

{{-- FILTERS --}}
<section class="bg-white border-b border-slate-100 py-6 sticky top-20 z-40 shadow-sm">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <form action="{{ route('storefront.products') }}" method="GET" class="flex flex-wrap items-center gap-4">
            <input type="hidden" name="search" value="{{ request('search') }}">
            
            <div class="flex items-center gap-2">
                <span class="text-[10px] font-900 text-slate-400 uppercase tracking-widest mr-2">Filter By:</span>
                <select name="category" onchange="this.form.submit()" class="h-11 bg-slate-50 border border-slate-200 rounded-xl px-4 text-xs font-800 text-slate-700 focus:outline-none focus:border-brand-500 transition-all cursor-pointer">
                    <option value="">All Categories</option>
                    @foreach ($categories as $cat)
                    <option value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="flex items-center gap-2">
                <select name="sort" onchange="this.form.submit()" class="h-11 bg-slate-50 border border-slate-200 rounded-xl px-4 text-xs font-800 text-slate-700 focus:outline-none focus:border-brand-500 transition-all cursor-pointer">
                    <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>Latest Release</option>
                    <option value="sales" {{ request('sort') == 'sales' ? 'selected' : '' }}>Best Sellers</option>
                    <option value="trending" {{ request('sort') == 'trending' ? 'selected' : '' }}>Trending</option>
                    <option value="rating" {{ request('sort') == 'rating' ? 'selected' : '' }}>Top Rated</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>
            </div>

            @if(request('search') || request('category') || request('sort'))
            <a href="{{ route('storefront.products') }}" class="text-[10px] font-900 text-red-500 uppercase tracking-widest hover:underline ml-auto">Clear Filters</a>
            @endif
        </form>
    </div>
</section>

{{-- GRID --}}
<main class="py-24 bg-slate-50">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        @if($products->isEmpty())
        <div class="py-32 text-center bg-white rounded-[3rem] border border-slate-100 shadow-sm">
            <div class="w-24 h-24 bg-slate-50 rounded-3xl flex items-center justify-center mx-auto mb-8 text-4xl opacity-50">
                🔎
            </div>
            <h2 class="text-2xl font-900 text-slate-900 mb-4 uppercase">No products matched</h2>
            <p class="text-slate-500 font-500 max-w-xs mx-auto mb-10">Try a different search term or category filter.</p>
            <a href="{{ route('storefront.products') }}" class="inline-flex h-14 px-10 bg-brand-500 text-white rounded-2xl font-800 items-center justify-center shadow-lg shadow-brand-500/20">
                Show All Products
            </a>
        </div>
        @else
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            @foreach ($products as $product)
                @include('components.product-card', ['product' => $product])
            @endforeach
        </div>

        {{-- Pagination --}}
        <div class="mt-20 pt-10 border-t border-slate-200">
            {{ $products->links() }}
        </div>
        @endif
    </div>
</main>

@endsection