@extends('layouts.app') @section('title',$product->name.' | Threeways Sports Pub') @section('content')<div class="mx-auto max-w-7xl px-5 py-10"><p class="text-xs text-slate-500">Home / Shop / {{$product->category->name}} / {{$product->name}}</p><section class="mt-6 grid gap-10 rounded-2xl bg-white p-5 shadow-premium md:grid-cols-2"><img src="{{$product->image}}" alt="{{$product->name}}" class="h-[420px] w-full rounded-xl object-cover"><div><p class="text-xs font-bold text-violet">{{$product->category->name}}</p><h1 class="font-display mt-2 text-3xl font-extrabold">{{strtoupper($product->name)}}</h1><p class="mt-3 text-amber-400">★★★★★ <span class="text-xs text-slate-500">(25 reviews)</span></p><p class="mt-4 text-2xl font-extrabold text-brand">KES {{number_format($product->price)}}</p><p class="mt-5 text-sm leading-7 text-slate-600">{{$product->description}}</p><div class="mt-6 flex items-center gap-4"><label class="text-xs font-bold">Quantity</label><input id="qty" value="1" min="1" type="number" class="w-16 rounded border p-2 text-center"></div><label class="mt-5 block text-xs font-bold">Special instructions <input id="note" class="mt-2 w-full rounded border p-3 font-normal" placeholder="E.g. no ice, extra lemon"></label><a onclick="this.href='https://wa.me/{{\App\Models\SiteSetting::value('whatsapp_number')}}?text='+encodeURIComponent('Hello Threeways Sports Pub,%0A%0AI would like to order:%0A{{$product->name}}%0AQuantity: '+document.getElementById('qty').value+'%0ASpecial instructions: '+document.getElementById('note').value)" href="#" class="mt-6 inline-block rounded-lg bg-green-500 px-6 py-3 text-xs font-bold text-white">◔ ORDER ON WHATSAPP</a></div></section><h2 class="font-display mt-14 text-2xl text-violet">YOU MAY ALSO LIKE</h2><div class="mt-5 grid grid-cols-2 gap-4 md:grid-cols-4">@foreach($related as $item)<x-product-card :product="$item" />@endforeach</div></div>@endsection