{{--
    The catalog product card, shared by the POS terminal
    (resources/views/filament/pages/pos.blade.php) and the sales-order picker
    (resources/views/filament/forms/sales-order-product-grid.blade.php).

    Alpine contract on the consuming root (both screens provide it):
      p                  — the product object (name, sku, image_url,
                            main_category, sub_category, base_unit, quantity,
                            price_min/max via priceLabel)
      tapProduct(p)      — the click handler: guards + add-to-cart for the
                            screen's own cart model
      cartQtyFor(p)      — total quantity of this product already in the
                            screen's cart (0 when absent)
      priceLabel(p)      — "Rs. X" / "Rs. X – Rs. Y" / "—"
      formatQty(q)       — integer q rendered plain, fractional to 3dp
      formatQtyWithUnit(q, unit) — "3 kg" / "1.5 l" style label

    Flags (passed as Blade data):
      $dimClass  — Alpine expression for the :class binding when the card is
                   unusable (POS dims out-of-stock cards; the order form rings
                   cards already in the cart).
      $showSku   — render the SKU line under the name (order form).
      $noLotExpr — optional Alpine expression that, when truthy, renders the
                   "No sellable lot" hint under the price (order form).

    The card body below is byte-for-byte the POS terminal's card — the POS
    screenshots (pw_pos_*.png) are the regression oracle for any change here.
--}}
<div
    x-on:click="tapProduct(p)"
    class="group relative overflow-hidden rounded-lg border border-gray-200 bg-white transition-all dark:border-white/10 dark:bg-gray-800"
    :class="{{ $dimClass }}"
>
    <template x-if="p.quantity > 0">
        <div class="absolute top-1.5 right-1.5 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-green-500 text-[10px] font-bold text-white" :title="formatQtyWithUnit(p.quantity, p.base_unit) + ' in stock'">
            <span x-text="p.quantity > 99 ? '99+' : formatQty(p.quantity)"></span>
        </div>
    </template>
    <template x-if="p.quantity <= 0">
        <div class="absolute top-1.5 right-1.5 left-1.5 z-10 rounded bg-red-500/90 py-0.5 text-center text-[9px] font-bold text-white">
            OUT OF STOCK
        </div>
    </template>
    <template x-if="cartQtyFor(p) > 0">
        <div class="absolute top-1.5 left-1.5 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-primary-600 text-[10px] font-bold text-white" :title="formatQtyWithUnit(cartQtyFor(p), p.base_unit) + ' in cart'">
            <span x-text="formatQty(cartQtyFor(p))"></span>
        </div>
    </template>

    <div class="aspect-[4/3] overflow-hidden bg-gray-100 dark:bg-gray-900">
        <template x-if="p.image_url">
            <img :src="p.image_url" :alt="p.name" loading="lazy" decoding="async" class="h-full w-full object-cover transition-transform group-hover:scale-105">
        </template>
        <template x-if="! p.image_url">
            <div class="flex h-full w-full items-center justify-center">
                <x-filament::icon icon="heroicon-m-squares-2x2" class="h-8 w-8 text-gray-400/40" />
            </div>
        </template>
    </div>

    <div class="p-2">
        <div class="mb-0.5 line-clamp-2 text-xs leading-tight font-medium" x-text="p.name"></div>
        @if ($showSku)
            <div class="mb-0.5 truncate text-[10px] text-gray-500 dark:text-gray-400" x-text="p.sku || '—'"></div>
        @endif
        <template x-if="p.main_category || p.sub_category">
            <div class="text-[10px] tracking-wide text-gray-500 uppercase dark:text-gray-400">
                <span x-text="p.main_category"></span><template x-if="p.main_category && p.sub_category"><span> / </span></template><span x-text="p.sub_category"></span>
            </div>
        </template>
        <div class="mt-1 text-sm font-bold text-primary-600 tabular-nums dark:text-primary-400">
            <span x-text="priceLabel(p)"></span><span x-show="p.base_unit && Number(p.price_min) > 0" class="text-[10px] font-normal text-gray-500" x-text="'/' + p.base_unit.name"></span>
        </div>
        @if ($noLotExpr)
            <template x-if="{{ $noLotExpr }}">
                <div class="mt-1 text-[10px] font-medium text-gray-400">No sellable lot</div>
            </template>
        @endif
    </div>
</div>