@extends('layouts.public')

@section('title', 'Shop Device Parts | Anywhere Phone Repair')
@section('meta_description', 'Browse in-stock device parts and repair components.')

@section('content')
<section class="shop-hero">
    <div class="container mx-auto px-4 md:px-8 py-12">
        <div class="flex flex-col justify-between gap-6 md:flex-row md:items-end">
            <div>
                <p class="shop-eyebrow">Parts shop</p>
                <h1 class="mt-2 text-3xl font-extrabold tracking-tight text-white md:text-4xl">Phone parts &amp; repair components</h1>
                <p class="mt-3 max-w-2xl text-zinc-300">Shop active, in-stock repair inventory with current prices and product options.</p>
            </div>
            <a href="{{ route('shop.cart') }}" class="shop-button shop-button-light">Cart ({{ app(\App\Services\Shop\ShopService::class)->cartCount() }})</a>
        </div>
    </div>
</section>

<section class="container mx-auto px-4 py-10 md:px-8">
    @include('shop.partials.flash')
    <form method="GET" class="shop-filter-card">
        <div class="grid gap-3 md:grid-cols-5">
            <input name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Search parts, SKU, or model" class="shop-input md:col-span-2">
            <select name="brand" class="shop-input">
                <option value="">All brands</option>
                @foreach($brands as $brand)<option value="{{ $brand }}" @selected(($filters['brand'] ?? '') === $brand)>{{ $brand }}</option>@endforeach
            </select>
            <select name="category" class="shop-input">
                <option value="">All part types</option>
                @foreach($categories as $category)<option value="{{ $category }}" @selected(($filters['category'] ?? '') === $category)>{{ $category }}</option>@endforeach
            </select>
            <button class="shop-button">Search</button>
        </div>
        @if(request()->hasAny(['q', 'brand', 'category', 'grade']))
            <a href="{{ route('shop.index') }}" class="mt-3 inline-block text-sm font-bold text-primary hover:underline">Clear filters</a>
        @endif
    </form>

    <div class="mt-8 flex items-center justify-between">
        <h2 class="text-xl font-extrabold text-zinc-900">Available parts</h2>
        <p class="text-sm text-zinc-500">{{ $products->total() }} result{{ $products->total() === 1 ? '' : 's' }}</p>
    </div>
    @if($products->isEmpty())
        <div class="shop-empty mt-5"><h3>No parts found</h3><p>Try changing your search or filters.</p></div>
    @else
        <div class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            @foreach($products as $product)
                @php
                    $images = json_decode($product->images ?? '[]', true);
                    $image = is_array($images) ? ($images[0] ?? null) : null;
                    $sale = $product->compare_at_price && (float) $product->compare_at_price > (float) $product->sell_price;
                @endphp
                <article class="shop-product-card">
                    <a href="{{ route('shop.show', $product->id) }}" class="shop-product-image">
                        @if($image)<img src="{{ $image }}" alt="{{ $product->name }}">@else<span>Parts</span>@endif
                        @if((int) $product->quantity < 1)<b class="shop-stock-badge">Out of stock</b>@endif
                    </a>
                    <div class="p-5">
                        <div class="flex min-h-5 flex-wrap gap-2 text-xs font-bold text-zinc-500">
                            @if($product->brand)<span>{{ $product->brand }}</span>@endif
                            @if($product->subcategory)<span class="rounded bg-zinc-100 px-2 py-0.5">{{ $product->subcategory }}</span>@endif
                        </div>
                        <h3 class="mt-2 line-clamp-2 min-h-12 text-base font-extrabold text-zinc-900"><a href="{{ route('shop.show', $product->id) }}">{{ $product->name }}</a></h3>
                        @if($product->sku)<p class="mt-1 text-xs text-zinc-500">SKU: {{ $product->sku }}</p>@endif
                        <div class="mt-4 flex items-end justify-between gap-3">
                            <div><span class="text-xl font-extrabold text-emerald-700">${{ number_format((float) $product->sell_price, 2) }}</span>@if($sale)<span class="ml-1 text-xs text-zinc-400 line-through">${{ number_format((float) $product->compare_at_price, 2) }}</span>@endif</div>
                            <span class="text-xs font-bold {{ (int) $product->quantity > 0 ? 'text-emerald-700' : 'text-red-600' }}">{{ (int) $product->quantity > 0 ? $product->quantity.' in stock' : 'Unavailable' }}</span>
                        </div>
                    </div>
                </article>
            @endforeach
        </div>
        <div class="mt-8">{{ $products->links() }}</div>
    @endif
</section>
@endsection