@if (!empty($item))

<div class="item-product {{ $item->is_midnight_sale ? 'sale' : '' }}">

    <div class="product-thumb">
        <a href="{{ $item->slug2 }}" title="{{ $item->name2 }}" class="wrap-img {{ $item->images->isNotEmpty() ? '' : 'has-one' }}">
            <img 
                 loading="lazy" 
                src="{{ asset($item->avatar_path) }}" alt="{{ $item->name2 }}"
                class="">

            {{-- 
                @if ($item->images->isNotEmpty())
                <img 
                    src="{{ asset('frontend/images/placeholder-white.jpg') }}" loading="lazy" decoding="async"
                    data-src="{{ asset($item->images->first()->image_path) }}" alt="{{ $item->name2 }}"
                    class="image2 lazy-img">
                @endif
             --}}
        </a>
        @if($item->old_price > 0 && $item->price > 0)
        <div class="discount">-{{ round(($item->old_price - $item->price) / $item->old_price * 100) }}%</div>
        @endif

        @if ($item->is_midnight_sale)
        <div class="shopping-day">
            <img 
                src="{{ asset('frontend/images/placeholder-white.jpg') }}" loading="lazy" decoding="async" class="lazy-img"
                data-src="{{ asset('frontend/images/christmas-bell.png') }}" alt="">
        </div>
        @endif

        @if(!empty($item->supplier))
            <div class="brand">
                <img 
                    src="{{ asset('frontend/images/placeholder-white.jpg') }}" loading="lazy" decoding="async" class="lazy-img"
                    data-src="{{ asset($item->supplier->logo_path) }}" alt="{{ $item->supplier->name2 }}">
            </div>
        @endif
        
    </div>

    <div class="product-info">
        <div class="stars">
            <div class="rateYo" data-rating="{{ $item->stars_avg_star ?? 0 }}"></div>
            <small class="count-rate">({{ $item->comments_count ?? 0 }})</small>
        </div>
        <h3>
            <a href="{{ $item->slug2 }}" title="{{ $item->name2 }}" class="name">{{ $item->name2 }}</a>
        </h3>

        <div class="option-group">
            <div class="price-wrap">
                @if($item->options->isNotEmpty() && $item->options->first()->price > 0)
                     <div class="price-new">{{ number_format($item->options->first()->price, 0, '.', '.') }}đ</div>
                    @if($item->options->first()->old_price > 0)
                    <div class="price-old">
                        <del>{{ number_format($item->options->first()->old_price, 0, '.', '.') }}đ</del>
                    </div>
                    @endif
                @elseif($item->price > 0)
                    <div class="price-new">{{ number_format($item->price, 0, '.', '.') }}đ</div>
                    @if($item->old_price > 0)
                    <div class="price-old">
                        <del>{{ number_format($item->old_price, 0, '.', '.') }}đ</del>
                    </div>
                    @endif
                @else
                    <div class="price-new">Liên hệ</div>
                @endif
            </div>

            @if($item->price > 0)
            <a href="javascript:;" class="button-add add-cart-ajax" data-id="{{ $item->id }}" @if($item->options->isNotEmpty()) data-option="{{ $item->options->first()->id ?? '' }}" @endif>
                <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round">
                    </g>
                    <g id="SVGRepo_iconCarrier">
                        <path d="M7.2998 5H22L20 12H8.37675M21 16H9L7 3H4M4 8H2M5 11H2M6 14H2M10 20C10 20.5523 9.55228 21 9 21C8.44772 21 8 20.5523 8 20C8 19.4477 8.44772 19 9 19C9.55228 19 10 19.4477 10 20ZM21 20C21 20.5523 20.5523 21 20 21C19.4477 21 19 20.5523 19 20C19 19.4477 19.4477 19 20 19C20.5523 19 21 19.4477 21 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </g>
                </svg>
            </a>
            @else
            <a href="{{ $item->slug2 }}" class="button-add">
                <svg fill="currentColor" width="64px" height="64px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                    <path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"></path>
                </svg>
            </a>
            @endif
        </div>

        <div class="productcount">
            <div class="countitem">
                <div class="fire">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 16 16">
                        <defs>
                            <linearGradient id="prefix__a" x1="50%" x2="50%" y1="36.31%" y2="88.973%">
                                <stop offset="0%" stop-color="#FDD835"></stop>
                                <stop offset="100%" stop-color="#FFB500"></stop>
                            </linearGradient>
                        </defs>
                        <g fill="none" fill-rule="evenodd">
                            <path d="M0 0H16V16H0z"></path>
                            <path fill="url(#prefix__a)" stroke="#FF424E" stroke-width="1.1"
                                d="M9.636 6.506S10.34 2.667 7.454 1c-.087 1.334-.786 2.571-1.923 3.401-1.234 1-3.555 3.249-3.53 5.646-.017 2.091 1.253 4.01 3.277 4.953.072-.935.549-1.804 1.324-2.41.656-.466 1.082-1.155 1.182-1.912 1.729.846 2.847 2.469 2.944 4.27v.012c1.909-.807 3.165-2.533 3.251-4.467.205-2.254-1.134-5.316-2.321-6.317-.448.923-1.144 1.725-2.022 2.33z"
                                transform="rotate(4 8 8)"></path>
                        </g>
                    </svg>
                </div>
                <span class="number">Đã bán <b>{{ $item->sold ?? 0 }}</b></span>
                <div class="countdown" style="width:calc({{ $item->sold ?? 0 }} / 100 * 100%);"></div>
            </div>
        </div>

        {{-- 
            <div class="product-button">
                @if($item->price > 0)
                <button title="Thêm vào giỏ hàng"
                    data-id="{{ $item->id }}"
                    class="add-cart-ajax">
                    Thêm vào giỏ hàng
                </button>
                @else
                <a href="{{ $item->slug2 }}" class="view-detail-btn">Xem chi tiết</a>
                @endif

                <a href="{{ $item->slug2 }}" title="quick view" class="quick-view">
                    <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                        <g id="SVGRepo_iconCarrier">
                            <path d="M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> </path>
                        </g>
                    </svg>
                </a>
            </div>
         --}}

    </div>


</div>
@endif