@forelse($products as $product)
<div class="col-md-3 col-xs-6 product_list no-print">
    <div 
        class="product-card product_box"
        data-variation_id="{{ $product->id }}"
        title="{{ $product->name }} ({{ $product->sub_sku }})">
        <span class="product-badge" style="display: none; position: absolute; top: 5px; right: 5px; background: red; color: white; font-size: 11px; padding: 2px 6px; border-radius: 50%; z-index: 100;">0</span>

        {{-- BADGE --}}
        @if($product->type === 'variable')
            <span class="product-badge purple">متغير</span>
        @elseif($product->enable_stock && $product->qty_available <= 0)
            <span class="product-badge red">نفذ</span>
        @endif

        {{-- IMAGE --}}
        <div class="product-image">
            <img 
                src="
                @if(count($product->media) > 0)
                    {{ $product->media->first()->display_url }}
                @elseif(!empty($product->product_image))
                    {{ asset('/uploads/img/' . rawurlencode($product->product_image)) }}
                @else
                    {{ asset('/img/default.png') }}
                @endif
                "
                alt="{{ $product->name }}"
                loading="lazy">
        </div>

        {{-- INFO --}}
        <div class="product-info">
            <div class="product-name">
                {{ $product->name }}
                @if($product->type == 'variable')
                    - {{ $product->variation }}
                @endif
            </div>

            <div class="product-sku">
                {{ $product->sub_sku }}
            </div>

            <div class="product-stock 
                {{ $product->enable_stock && $product->qty_available > 0 ? 'in' : 'out' }}">
                @if($product->enable_stock)
                    {{ @num_format($product->qty_available) }} {{ $product->unit }}
                @else
                    --
                @endif
            </div>
        </div>
    </div>
</div>
@empty
<input type="hidden" id="no_products_found">
<div class="col-md-12">
    <h4 class="text-center text-muted">
        @lang('lang_v1.no_products_to_display')
    </h4>
</div>
@endforelse

<style>
	.product-card{
    position: relative;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.product-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.product-image{
    height: 140px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f9fafb;
}
.product-image img{
    max-height: 120px;
    max-width: 100%;
    object-fit: contain;
}

.product-info{
    padding: 10px;
}
.product-name{
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-sku{
    font-size: 11px;
    color:#6b7280;
}
.product-stock{
    font-size: 11px;
    margin-top:4px;
}
.product-stock.in{color:#16a34a;}
.product-stock.out{color:#dc2626;}

.add-btn{
    position:absolute;
    bottom:10px;
    right:10px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:#001F3E;
    color:#fff;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
}

.product-badge{
    position:absolute;
    top:8px;
    right:8px;
    font-size:10px;
    padding:2px 6px;
    border-radius:8px;
    color:#fff;
}
.product-badge.red{background:#dc2626;}
.product-badge.purple{background:#7c3aed;}

</style>