@props(['produk', 'key'])
@push('scripts')
  <script>
    async function addToCart(actionURL) {
      // disable button add yang di klik (agar user hanya dapat addtocart 1x)
      event.target.parentElement.disabled = true;

      const response = await fetch(actionURL, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': '{{ csrf_token() }}'
        },
      })
      const data = await response.json();

      // perbaru icoc keranjang di navbar
      $('#cart-items-amount').html(data.cart_kuantitas);
    }
  </script>
@endpush
<div class="card product-card" style="height: 100%">
  <div class="card-body" style="display: flex; flex-direction: column; justify-content: space-between;">
    <div>
      <!-- Thumbnail -->
      <a class="product-thumbnail d-block" href="{{ route('produk-detail', $produk->id) }}">
        <img class="mb-2" src="{{ asset('storage/' . $produk->foto) }}" alt=""
          style="height: 140px; object-fit: cover; border-radius: 3px;" />
        <!-- Product Title -->
      </a>
      <a class="product-title" href="{{ route('produk-detail', $produk->id) }}">{{ $produk->nama }}</a>
    </div>
    <div>
      <!-- Product Price -->
      <p class="sale-price">
        Rp. {{ number_format($produk->harga) }}
      </p>
      <!-- Rating -->
      {{-- <div class="product-rating">
        <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i
          class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
      </div> --}}
    </div>
    <!-- Add to Cart -->
    <button class="btn btn-success btn-sm {{ $produk->isExistInCart() ? 'disabled' : '' }}" type="button"
      onclick="addToCart('{{ route('cart.store', $produk->id) }}')">
      <i class="fa-solid fa-plus"></i>
    </button>
  </div>
</div>