@props(['product', 'qty' => 0])

@php
    $tags = $product['tag'] ?? [];
    $badge = empty($tags)
        ? null
        : [
            'label' => implode(', ', array_column($tags, 'name')),
            'class' => in_array(1, array_column($tags, 'id')) ? 'bg-gray-500' : 'bg-red-500',
        ];

    $price = $product['price']['price'] ?? '0.00';
    $priceDiscount = $product['price']['discount'] ?? '0.00';
    $hasDiscount = $priceDiscount != '0.00';
    $displayPrice = $hasDiscount ? $product['price']['price_discount'] ?? '0.00' : $price;

    $isOutOfStock = empty($product['stock']);
    $productUrl = $product['url'] ?? 'javascript:void(0)';
    $productName = $product['name'] ?? '';
    $productUid = $product['uid'] ?? '';
    $stockLabel = $isOutOfStock ? __('frontend::lang.label.out_of_stock') : __('frontend::lang.label.remaining') . ': ' . $product['stock'];

    $cardClass = 'bg-white rounded-xl shadow-sm border border-gray-100 flex flex-col relative group transition hover:shadow-md' . ($isOutOfStock ? ' opacity-80' : '');
    $imageClass = 'w-full h-full object-cover group-hover:scale-110 transition duration-300' . ($isOutOfStock ? ' grayscale' : '');
    $stockSpanClass = $isOutOfStock ? 'text-gray-500 font-medium' : '';
@endphp

<div class="{{ $cardClass }}">
    @if ($badge)
        <div class="absolute top-0 left-0 {{ $badge['class'] }} text-white text-[10px] font-bold px-2 py-1 rounded-tl-xl rounded-br-lg z-10 shadow-sm">
            {{ $badge['label'] }}
        </div>
    @endif

    <a class="block w-full h-40 bg-gray-50 rounded-t-xl relative overflow-hidden" href="{{ $productUrl }}">
        <img class="{{ $imageClass }}" src="{{ asset($product['image'] ?? '') }}" alt="{{ $productName }}">
    </a>

    <div class="p-3 flex flex-col flex-grow">
        <div class="flex justify-between items-center text-[10px] text-gray-400 mb-1">
            <span>SKU: {{ $product['sku'] ?? '' }}</span>
            <span class="{{ $stockSpanClass }}">{{ $stockLabel }}</span>
        </div>

        <h3 class="font-semibold text-gray-800 text-sm mb-1 line-clamp-2 h-10 leading-tight">
            <a class="hover:text-med-primary transition" href="{{ $productUrl }}">{{ $productName }}</a>
        </h3>

        <div class="mt-auto mb-3">
            @if ($hasDiscount)
                <div class="text-xs text-gray-400 line-through">{{ $price }} {{ __('frontend::lang.label.baht') }}</div>
            @endif
            <div class="text-lg font-bold text-med-primary">{{ $displayPrice }} {{ __('frontend::lang.label.baht') }}</div>
        </div>

        @if (!auth()->guard('member')->check() || $isOutOfStock)
            <button class="w-full bg-white text-med-primary border border-med-primary text-sm py-2 rounded-lg transition shadow-sm hover:bg-med-primary hover:text-white flex items-center justify-center gap-2 mt-auto" type="button" onclick="openContactModal()">
                <i class="fa-brands fa-line"></i>
                {{ __('frontend::lang.label.pre_order') }}
            </button>
        @else
            <div class="flex flex-col gap-2">
                <div class="flex items-center border border-gray-200 rounded-lg h-8 overflow-hidden bg-white">
                    <button class="w-8 h-full flex items-center justify-center text-gray-500 hover:bg-gray-100 active:bg-gray-200 transition" type="button" wire:click="updateQty({{ $product['id'] }}, -1)">-</button>
                    <input class="w-full h-full text-center text-sm focus:outline-none text-gray-700" type="number" value="{{ $qty }}" min="0" max="{{ $product['stock'] ?? 0 }}" readonly>
                    <button class="w-8 h-full flex items-center justify-center text-gray-500 hover:bg-gray-100 active:bg-gray-200 transition" type="button" wire:click="updateQty({{ $product['id'] }}, 1)">+</button>
                </div>
                <button class="w-full bg-med-primary hover:bg-med-secondary text-white text-sm py-2 rounded-lg transition shadow-sm active:scale-95 flex items-center justify-center gap-2" type="button" wire:click="addToCart({{ $product['id'] }})">
                    <i class="fas fa-cart-plus"></i>
                    {{ __('frontend::lang.btn.add_to_cart') }}
                </button>
            </div>
        @endif
    </div>
</div>