@extends('layouts.app', ['title' => $product->seo_title ?: $product->name])

@section('content')
<div class="mx-auto grid max-w-7xl gap-8 px-4 py-8 lg:grid-cols-2">
    <div class="panel bg-white p-6">
        <img class="aspect-square w-full object-contain" src="{{ asset('storage/'.$product->main_image_path) }}" alt="{{ $product->name }}">
    </div>
    <div>
        <div class="text-sm font-bold uppercase text-gray-500">{{ $product->brand?->name }}</div>
        <h1 class="mt-2 text-4xl font-black">{{ $product->name }}</h1>
        <p class="mt-2 text-gray-600">SKU {{ $product->sku }} @if($product->pack_size) · {{ $product->pack_size }} @endif</p>
        <div class="mt-5 flex items-end gap-3">
            <span class="text-4xl font-black text-pantry-leaf">R{{ number_format((float) $product->currentPrice(), 2) }}</span>
            @if ($product->hasActiveSpecial())
                <span class="text-lg text-gray-400 line-through">R{{ number_format((float) $product->price, 2) }}</span>
            @endif
        </div>
        <div class="mt-4 font-bold {{ $product->stock_quantity > 0 ? 'text-pantry-leaf' : 'text-pantry-tomato' }}">{{ $product->stock_quantity > 0 ? 'In Stock' : 'Out of Stock' }}</div>
        <form method="POST" action="{{ route('cart.items.store') }}" class="mt-6 flex max-w-sm gap-3">
            @csrf
            <input type="hidden" name="product_id" value="{{ $product->id }}">
            <input class="field w-24" type="number" min="{{ $product->min_quantity }}" max="{{ $product->max_quantity ?: $product->stock_quantity }}" name="quantity" value="1">
            <button class="btn-primary flex-1" @disabled($product->stock_quantity <= 0)>Add to Cart</button>
        </form>
        <div class="mt-8 prose max-w-none">{!! nl2br(e($product->description)) !!}</div>
        <div class="mt-6 panel p-4 text-sm">Delivery is calculated by zone during checkout. Substitution preferences can be selected before payment.</div>
    </div>
</div>
<section class="mx-auto max-w-7xl px-4 py-8">
    <h2 class="text-2xl font-black">Related Products</h2>
    <div class="mt-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        @foreach ($related as $product)
            <x-product-card :product="$product" />
        @endforeach
    </div>
</section>
@endsection