@for ($i = 0; $i < 4; $i++)
@php
    $emptyLog = emptyLog();
@endphp
<div class="col-6 col-md-4 col-lg-3 mb-5">
    <div class="rounded shadow-sm a-p">
        <a href="{{ url('product/detail/' . $emptyLog->id .'/'. encodeLink( $emptyLog->name ) ) }}" class="d-block text-dark text-decoration-none">
            <div class="position-relative">
                <img src="{{ url(count($emptyLog->images) > 0 ? productImage($emptyLog->images[0]->link) : 'assets/frontend/img/shop_banner-13.jpg' ) }}" alt="" class="w-100">
                <span class="tag-banner {{ tagBgColor($emptyLog->store_type) }} text-white">{{ storeTags($emptyLog->store_type) }}</span>
            </div>
        </a>
        <div class="p-3 position-relative" style="background-color:#fff;min-height:160px;">
            <a href="{{ url('product/detail/' . $emptyLog->id .'/'. encodeLink( $emptyLog->name ) ) }}" class="d-block text-dark text-decoration-none">
                <div>
                    <h4><b> {{ $emptyLog->name}}</b></h4>
                </div>
                <div>
                    @php
                        $rating = rating( $emptyLog->id );
                        $review = review( $emptyLog->id );
                    @endphp
                    <i class="fa fa-star {{ $rating >= 1 ? 'ico-yellow' : 'ico-gray' }}" aria-hidden="true"></i>
                    <i class="fa fa-star {{ $rating >= 2 ? 'ico-yellow' : 'ico-gray' }}" aria-hidden="true"></i>
                    <i class="fa fa-star {{ $rating >= 3 ? 'ico-yellow' : 'ico-gray' }}" aria-hidden="true"></i>
                    <i class="fa fa-star {{ $rating >= 4 ? 'ico-yellow' : 'ico-gray' }}" aria-hidden="true"></i>
                    <i class="fa fa-star {{ $rating >= 5 ? 'ico-yellow' : 'ico-gray' }}" aria-hidden="true"></i>
                </div>
                <div class="c-g">{{ $emptyLog->tags }}</div>
            </a>
        </div>
        <div class="text-end pt-3 position-absolute" style="right: 15px;bottom: 15px;">
            <span data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="true">
                <img src="{{ url('assets/frontend/icon/sh.svg') }}" alt="" class="">
            </span>
        </div>
        <div class="collapse box-share " id="collapseExample" style="">
            <div class="text-center p-2">
                <span data-bs-toggle="collapse" href="#collapseExample" role="button">
                    <img src="{{ url('assets/frontend/icon/close.svg') }}" alt="" class="">
                </span>
            </div>
            <div class="card card-body">
                <ul>
                    <li><button><img src="{{ url('assets/frontend/icon/icon-facebook.svg') }}"
                                alt=""></button></li>
                    <li><button><img src="{{ url('assets/frontend/icon/icon-twitter.svg') }}"
                                alt=""></button></li>
                    <li><button><img src="{{ url('assets/frontend/icon/icon-line.svg') }}"
                                alt=""></button></li>
                    <li><button><img src="{{ url('assets/frontend/icon/icon-link.svg') }}"
                                alt=""></button></li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endfor