@php
    $tersedia = $product->inStock();
    $quickAdd = $tersedia ? [
        'name' => $product->name,
        'price' => rupiah($product->price),
        'image' => $product->image_url,
        'url' => route('produk.show', $product),
        'variants' => $product->sortedVariants()->map(fn ($v) => ['id' => $v->id, 'size' => $v->size, 'color'=>$v->color, 'stock' => (int) $v->stock])->values()->all(),
    ] : null;
@endphp
<div class="product-card">
  <a href="{{ route('produk.show', $product) }}" class="thumb-wrap d-block" tabindex="-1" aria-hidden="true">
    <img src="{{ $product->image_url }}" alt="" class="product-thumb" width="400" height="300" loading="lazy" decoding="async">
    <span class="cat-chip">{{ $product->category?->name }}</span>
    @unless ($tersedia)<span class="soldout-chip">Habis</span>@endunless
  </a>
  @include('partials.wishlist-button', ['wishlistClass' => 'wishlist-overlay'])
  <div class="card-body-p">
    <div class="d-flex flex-wrap gap-1 mb-2">
      <span class="badge bg-biru-muda text-primary rounded-pill">{{ $product->sizeRange() === 'All Size' ? 'All Size' : 'Size '.$product->sizeRange() }}</span>
      @if ($product->color)<span class="badge bg-light text-muted-soft rounded-pill">{{ $product->color }}</span>@endif
    </div>
    <a href="{{ route('produk.show', $product) }}" class="text-decoration-none">
      <h3 class="product-name mb-1 text-dark">{{ $product->name }}</h3>
    </a>
    <div class="d-flex justify-content-between align-items-center gap-2 mt-auto pt-2">
      <span class="price">{{ rupiah($product->price) }}</span>
      @if ($tersedia)
        <a href="{{ route('produk.show', $product) }}" class="btn btn-sm btn-primary btn-quick-add" data-quick-add="{{ json_encode($quickAdd, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}" aria-label="Tambah {{ $product->name }} ke keranjang" title="Tambah ke keranjang"><i class="bi bi-bag-plus" aria-hidden="true"></i></a>
      @else
        <span class="badge bg-danger">Habis</span>
      @endif
    </div>
  </div>
</div>