@if ($stores)
    @foreach ($stores as $store)
        @php
            $images = $store->images;
            $rating = rating( $store->id );
            $review = review( $store->id );
        @endphp
        <div class="col-6 col-md-4 col-lg-3 mb-4 mb-md-5">
            <div class="rounded shadow-sm a-p">
                <a href="{{ url('product/detail/' . $store->id .'/'. encodeLink( $store->name ) ) }}" class="text-dark text-decoration-none">
                    <div class="position-relative shop-image">
                        <img src="{{ url(count($images) > 0 ? productImage($images[0]->link) : 'assets/frontend/img/shop_banner-13.jpg' ) }}" alt="" class="w-100">
                        <span class="tag-banner {{ tagBgColor($store->store_type) }} text-white">{{ storeTags($store->store_type) }}</span>
                    </div>
                </a>
                <div class="p-3 position-relative" style="background-color:#fff;min-height:160px;">
                    <a href="{{ url('product/detail/' . $store->id .'/'. encodeLink( $store->name ) ) }}" class="text-dark text-decoration-none">
                        <div>
                            <h4><b>{{ $store->name }}</b></h4>
                        </div>
                        <div>
                            <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">{{ $store->tags }}</div>
                    </a>
                </div>
                <div class="text-end pt-3 position-absolute" style="right: 15px;bottom: 15px;">
                    <span data-bs-toggle="collapse" href="#social-share-{{ $store->id }}" role="button"
                        aria-expanded="true">
                        <img src="{{ url('assets/frontend/icon/sh.svg') }}" alt="" class="">
                    </span>
                </div>
                <div class="collapse box-share " id="social-share-{{ $store->id }}" style="">
                    <div class="text-center p-2">
                        <span data-bs-toggle="collapse" href="#social-share-{{ $store->id }}" role="button">
                            {{-- <img src="{{ url('assets/frontend/icon/close.svg') }}" alt="" class=""> --}}
                            <i class="fa fa-times text-secondary" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div class="card card-body">
                        <ul>
                            <li><a  href="https://www.facebook.com/sharer/sharer.php?u={{ url('product/detail/' . $store->id .'/'. encodeLink( $store->name ) ) }}" target="_blank"><img src="{{ url('assets/frontend/icon/icon-facebook.svg') }}"
                                        alt=""></a></li>
                            <li><a href="https://twitter.com/intent/tweet?text={{ $store->name }}&url={{ url('product/detail/' . $store->id .'/'. encodeLink( $store->name ) ) }}" target="_blank"><img src="{{ url('assets/frontend/icon/icon-twitter.svg') }}"
                                        alt=""></a></li>
                            <li><a href="line://msg/text/{{ url('product/detail/' . $store->id .'/'. encodeLink( $store->name ) )  }}" target="_blank"><img src="{{ url('assets/frontend/icon/icon-line.svg') }}"
                                        alt=""></a></li>
                            <li><button class="share-link" data-link="{{ url('product/detail/' . $store->id .'/'. encodeLink( $store->name ) )  }}"><img src="{{ url('assets/frontend/icon/icon-link.svg') }}"
                                        alt=""></button></li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    @endforeach
@endif