@props(['product'])
@php
    $tenant = $product->tenant;
    $image = $product->image_url;
    $price = number_format($product->price, 0, ',', '.');
    $compare = $product->compare_price && $product->compare_price > $product->price
        ? number_format($product->compare_price, 0, ',', '.')
        : null;
    $medicineClass = $product->medicineProfile?->medicine_class ?? null;
    $salesCount = (int) ($product->sales_count ?? 0);
    $location = optional($product->inventories->first()?->outlet)->city;
    $discountPercent = null;
    $variants = $product->variants->where('is_active', true)->map(fn ($variant) => [
        'id' => $variant->id,
        'name' => $variant->name,
        'price' => (int) $variant->price,
        'stock' => (int) $variant->inventories->sum(fn ($inventory) => max(0, $inventory->quantity_available - $inventory->quantity_reserved)),
    ])->values();
    if ($product->compare_price && $product->compare_price > $product->price) {
        $discountPercent = intval((($product->compare_price - $product->price) / max(1, $product->compare_price)) * 100);
    }
@endphp

<article class="group interactive-card relative w-full min-w-[138px] shrink-0 snap-start overflow-hidden rounded-2xl border border-white/90 bg-white/95 shadow-sm sm:min-w-[164px]" data-product-card data-sales="{{ $salesCount }}" data-stock="{{ (int) $product->inventories->sum('quantity_available') }}">
    <form method="POST" action="{{ route('cart.store', $product) }}" class="absolute right-2 top-2 z-20" data-cart-form data-product-name="{{ $product->name }}" data-product-image="{{ $image }}" data-variants='@json($variants)'>@csrf<input type="hidden" name="quantity" value="1"><input type="hidden" name="variant_id" value="{{ $variants->first()['id'] ?? '' }}"><button type="submit" class="grid size-10 place-items-center rounded-full border-2 border-white bg-ocean-900 text-white shadow-float transition duration-200 hover:scale-110 hover:bg-ocean-700 active:scale-95" aria-label="Tambahkan {{ $product->name }} ke keranjang" title="Tambah ke keranjang" data-cart-submit><x-icon name="cart" size="18"/></button></form>
    <a href="{{ route('products.show', $product) }}" class="block p-2.5">
        <div class="relative grid aspect-square place-items-center overflow-hidden rounded-xl bg-ocean-50">
            <img src="{{ $image }}" alt="{{ $product->name }}" loading="lazy" decoding="async" class="size-full object-contain transition duration-300 group-hover:scale-105">
            @if($discountPercent)
                <span class="absolute left-2 top-2 rounded-full bg-amber-50 px-2 py-1 text-[9px] font-extrabold text-amber-700">-{{ $discountPercent }}%</span>
            @endif
            <x-medicine-classification :classification="$medicineClass" :product-type="$product->product_type" class="absolute bottom-2 right-2" />
        </div>

        <div class="pt-2.5">
            @if($product->medicineProfile?->requires_prescription)
                <span class="mb-1.5 inline-flex rounded-full bg-red-50 px-2 py-1 text-[8px] font-extrabold uppercase tracking-wide text-red-600">Wajib resep</span>
            @endif
            <h4 class="line-clamp-2 min-h-8 text-[10px] font-extrabold leading-4 text-ocean-950 sm:text-[12px]">{{ $product->name }}</h4>
            <div class="mt-1.5 flex flex-wrap items-baseline gap-x-1.5 gap-y-0.5"><strong class="text-[12px] font-black text-ocean-900 sm:text-[14px]">Rp{{ $price }}</strong>
                @if($compare)
                    <span class="text-[9px] text-slate-400 line-through">Rp{{ $compare }}</span>
                @endif
            </div>
            <p class="mt-1 truncate text-[8px] font-semibold text-slate-500 sm:text-[9px]">{{ $tenant->name }}</p><div class="mt-1.5 flex items-center gap-1 text-[8px] text-slate-400">
                <span class="font-extrabold text-ocean-600">{{ number_format($salesCount, 0, ',', '.') }} terjual</span>
                @if($location)<span>·</span><span class="truncate">{{ $location }}</span>@endif
            </div>
        </div>
    </a>
</article>