@extends('storefront.layout')

@section('title', ($settings->company_name ?? 'Shop') . ' — Products')

@section('content')

    @if (session('cart_recovery_error'))
        <div class="rounded-md bg-red-50 border border-red-200 text-red-800 px-4 py-3 mb-4 text-sm">
            {{ session('cart_recovery_error') }}
        </div>
    @endif

    {{-- Search + filter bar --}}
    <form method="GET" action="{{ route('storefront.index') }}" class="flex flex-wrap gap-3 mb-8">
        <input
            type="text"
            name="search"
            value="{{ request('search') }}"
            placeholder="Search products…"
            class="border rounded-lg px-4 py-2 text-sm flex-1 min-w-48 focus:outline-none focus:ring-2 focus:ring-blue-500"
        >

        <select name="category" class="border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">All categories</option>
            @foreach($categories as $category)
                <option value="{{ $category->slug }}" @selected(request('category') === $category->slug)>
                    {{ $category->name }}
                </option>
            @endforeach
        </select>

        <button type="submit" class="btn-brand px-5 py-2 text-sm">
            Filter
        </button>

        @if(request('search') || request('category'))
            <a href="{{ route('storefront.index') }}" class="px-5 py-2 rounded-lg text-sm border hover:bg-gray-100 transition">
                Clear
            </a>
        @endif
    </form>

    {{-- Featured products (only when no filter active) --}}
    @if($featured->isNotEmpty())
        <section class="mb-10">
            <h2 class="text-xl font-bold text-gray-900 mb-5">Featured Products</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                @foreach($featured as $product)
                    <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition overflow-hidden flex flex-col relative">
                        <div class="absolute top-2 right-2 z-10">
                            <livewire:wishlist-toggle :product-id="$product->id" :key="'feat-'.$product->id" />
                        </div>
                        <a href="{{ route('storefront.product', $product->slug) }}"
                           class="aspect-[4/3] bg-gray-100 overflow-hidden flex items-center justify-center block">
                            @if(filled($product->images))
                                <img src="/storage/{{ $product->images[0] }}" alt="{{ $product->name }}"
                                     class="w-full h-full object-contain">
                            @else
                                <div class="w-full h-full flex items-center justify-center text-gray-300 text-4xl">📷</div>
                            @endif
                        </a>
                        <a href="{{ route('storefront.product', $product->slug) }}" class="p-4 flex flex-col flex-1">
                            @if($product->category)
                                <span class="text-xs text-gray-400 uppercase tracking-wide mb-1">{{ $product->category->name }}</span>
                            @endif
                            <h2 class="font-semibold text-gray-900 mb-2 flex-1">{{ $product->name }}</h2>
                            <div class="flex items-baseline gap-2 mt-auto">
                                @if($product->is_on_sale && $product->sale_price)
                                    <span class="text-lg font-bold text-red-600">{{ $settings->currency_symbol ?? '$' }}{{ number_format($product->sale_price, 2) }}</span>
                                    <span class="text-sm text-gray-400 line-through">{{ $settings->currency_symbol ?? '$' }}{{ number_format($product->price, 2) }}</span>
                                @else
                                    <span class="text-lg font-bold text-gray-900">{{ $settings->currency_symbol ?? '$' }}{{ number_format($product->price, 2) }}</span>
                                @endif
                            </div>
                            @if($product->track_inventory && $product->units_in_stock <= 0)
                                <span class="mt-2 inline-block text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded-full font-medium">Out of stock</span>
                            @endif
                        </a>
                    </div>
                @endforeach
            </div>
        </section>
        <h2 class="text-xl font-bold text-gray-900 mb-5">All Products</h2>
    @endif

    {{-- Product grid --}}
    @if($products->isEmpty())
        <div class="text-center py-20 text-gray-400">
            <p class="text-lg">No products found.</p>
        </div>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            @foreach($products as $product)
                <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition overflow-hidden flex flex-col relative">

                    {{-- Wishlist toggle (positioned over image) --}}
                    <div class="absolute top-2 right-2 z-10">
                        <livewire:wishlist-toggle :product-id="$product->id" :key="'idx-'.$product->id" />
                    </div>

                    {{-- Product image --}}
                    <a href="{{ route('storefront.product', $product->slug) }}"
                       class="aspect-[4/3] bg-gray-100 overflow-hidden flex items-center justify-center block">
                        @if(filled($product->images))
                            <img
                                src="/storage/{{ $product->images[0] }}"
                                alt="{{ $product->name }}"
                                class="w-full h-full object-contain"
                            >
                        @else
                            <div class="w-full h-full flex items-center justify-center text-gray-300 text-4xl">
                                📷
                            </div>
                        @endif
                    </a>

                    {{-- Product info --}}
                    <a href="{{ route('storefront.product', $product->slug) }}" class="p-4 flex flex-col flex-1">
                        @if($product->category)
                            <span class="text-xs text-gray-400 uppercase tracking-wide mb-1">
                                {{ $product->category->name }}
                            </span>
                        @endif

                        <h2 class="font-semibold text-gray-900 mb-2 flex-1">{{ $product->name }}</h2>

                        <div class="flex items-baseline gap-2 mt-auto">
                            @if($product->is_on_sale && $product->sale_price)
                                <span class="text-lg font-bold text-red-600">
                                    {{ $settings->currency_symbol ?? '$' }}{{ number_format($product->sale_price, 2) }}
                                </span>
                                <span class="text-sm text-gray-400 line-through">
                                    {{ $settings->currency_symbol ?? '$' }}{{ number_format($product->price, 2) }}
                                </span>
                            @else
                                <span class="text-lg font-bold text-gray-900">
                                    {{ $settings->currency_symbol ?? '$' }}{{ number_format($product->price, 2) }}
                                </span>
                            @endif
                        </div>

                        @if($product->track_inventory && $product->units_in_stock <= 0)
                            <span class="mt-2 inline-block text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded-full font-medium">
                                Out of stock
                            </span>
                        @endif
                    </a>
                </div>
            @endforeach
        </div>

        {{-- Pagination --}}
        <div class="mt-8">
            {{ $products->withQueryString()->links() }}
        </div>
    @endif

@endsection