@php
    $activeVariants = ($product->variants ?? collect())->where('status', 1)->values();
    $basePrice = $product->effective_price;
    $firstInStock = $activeVariants->first(fn ($v) => (int) $v->stock > 0);
@endphp

@if($activeVariants->isNotEmpty())
<style>
.product-variant-picker .variant-chip {
    border: 2px solid #d1d5db;
    background: #fff;
    color: #374151;
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all .15s ease;
}
.product-variant-picker .variant-chip:hover:not(:disabled) {
    border-color: #2d6a4f;
    color: #2d6a4f;
}
.product-variant-picker .variant-chip.active {
    background: #2d6a4f;
    border-color: #2d6a4f;
    color: #fff;
}
.product-variant-picker .variant-chip:disabled {
    opacity: .45;
    cursor: not-allowed;
    text-decoration: line-through;
}
</style>

<div id="variants" class="product-variant-picker mb-3">
    <label class="fw-bold mb-2 d-block">ভ্যারিয়েন্ট নির্বাচন করুন <span class="text-danger">*</span></label>
    <div class="variant-chips d-flex flex-wrap gap-2">
        @foreach($activeVariants as $variant)
        @php
            $variantPrice = $basePrice + (float) $variant->price_adjustment;
            $variantImage = $variant->image
                ? asset($variant->image)
                : ($product->thumbnail ? asset($product->thumbnail) : '');
        @endphp
        <button type="button"
                class="variant-chip"
                data-variant-id="{{ $variant->id }}"
                data-price="{{ $variantPrice }}"
                data-stock="{{ (int) $variant->stock }}"
                data-image="{{ $variantImage }}"
                data-label="{{ $variant->label() }}"
                {{ (int) $variant->stock <= 0 ? 'disabled' : '' }}>
            {{ $variant->label() }}
        </button>
        @endforeach
    </div>
    <input type="hidden" id="selectedVariantId" value="{{ $firstInStock?->id ?? '' }}">
</div>
@endif