@extends('layouts.public')

@section('title', $product->name.' | Shop')
@section('meta_description', \Illuminate\Support\Str::limit($product->description ?: 'Device repair part available online.', 155))

@section('content')
@php $images = json_decode($product->images ?? '[]', true); $image = is_array($images) ? ($images[0] ?? null) : null; @endphp
<section class="container mx-auto px-4 py-10 md:px-8">
    <a href="{{ route('shop.index') }}" class="text-sm font-bold text-zinc-500 hover:text-primary">← Back to shop</a>
    @include('shop.partials.flash')
    <div class="mt-6 grid gap-10 md:grid-cols-2">
        <div class="shop-detail-image">@if($image)<img src="{{ $image }}" alt="{{ $product->name }}">@else <span>Parts</span> @endif</div>
        <div>
            <div class="flex flex-wrap gap-2 text-sm font-bold text-zinc-500">@if($product->brand)<span>{{ $product->brand }}</span>@endif @if($product->category)<span>• {{ $product->category }}</span>@endif</div>
            <h1 class="mt-2 text-3xl font-extrabold tracking-tight text-zinc-950">{{ $product->name }}</h1>
            @if($product->sku)<p class="mt-2 text-sm text-zinc-500">SKU: {{ $product->sku }}</p>@endif
            <p class="mt-5 text-3xl font-extrabold text-emerald-700">${{ number_format((float) $product->sell_price, 2) }}</p>
            @if($product->compare_at_price && (float) $product->compare_at_price > (float) $product->sell_price)<p class="mt-1 text-sm text-zinc-400 line-through">${{ number_format((float) $product->compare_at_price, 2) }}</p>@endif
            <p class="mt-4 text-sm font-bold {{ (int) $product->quantity > 0 ? 'text-emerald-700' : 'text-red-600' }}">{{ (int) $product->quantity > 0 ? $product->quantity.' available' : 'Out of stock' }}</p>
            @if($product->description)<p class="mt-5 leading-relaxed text-zinc-600">{{ $product->description }}</p>@endif
            @php $models = json_decode($product->compatible_models ?? '[]', true); @endphp
            @if(is_array($models) && count($models))
                <div class="mt-5"><h2 class="text-sm font-extrabold text-zinc-900">Compatible with</h2><div class="mt-2 flex flex-wrap gap-2">@foreach($models as $model)<span class="rounded-full bg-zinc-100 px-3 py-1 text-xs font-bold text-zinc-600">{{ $model }}</span>@endforeach</div></div>
            @endif

            @if((int) $product->quantity > 0)
                <form method="POST" action="{{ route('shop.cart.add') }}" class="mt-8 space-y-4 rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
                    @csrf
                    <input type="hidden" name="item_id" value="{{ $product->id }}">
                    @if($product->variants->isNotEmpty())
                        <label class="block text-sm font-extrabold text-zinc-800">Product option
                            <select name="variant_id" class="shop-input mt-2" required>
                                @foreach($product->variants as $variant)
                                    @php $label = trim(implode(' / ', array_filter([$variant->color, $variant->quality]))) ?: 'Standard'; @endphp
                                    <option value="{{ $variant->id }}" @disabled((int) $variant->quantity < 1)>{{ $label }} — ${{ number_format((float) $variant->price, 2) }} ({{ (int) $variant->quantity }} available)</option>
                                @endforeach
                            </select>
                        </label>
                    @endif
                    <label class="block text-sm font-extrabold text-zinc-800">Quantity <input class="shop-input mt-2" type="number" name="quantity" value="1" min="1" max="{{ $product->quantity }}"></label>
                    <button class="shop-button w-full">Add to cart</button>
                </form>
            @endif
        </div>
    </div>
</section>
@endsection