@foreach($productItems as $product_item)
    @php
        $items['name'] = $extraMap[$product_item['product_id']]['category_name'];
        $products['name'] = $extraMap[$product_item['product_id']]['product_name'];
    @endphp

    <div class="col-sm-6 col-md-4 col-lg-3 mb-4 isotope-item {{$items['name']}} {{str_replace([' ','(',')'], '_', $products['name'])}}_{{$items['name']}}">
        <!-- Block2 -->
        <div class="block2">
            <div class="block2-pic hov-img0">
                @if(array_key_exists(0,$product_item['product_item_image']))
                    <img src="{{ url('/hb-shared-images/'.$product_item['product_id'].'/' . $product_item['product_item_image'][0]['image']) }}" alt="IMG-PRODUCT">
                @endif

                <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1"
                   data-id="{{ $product_item['id'] }}"
                   data-cat-name="{{ $products['name'] }}"
                   data-name="{{ $product_item['item_name'] }}"
                   data-price="{{ $product_item['price'] }}"
                   data-description="{{ $product_item['short_description'] }}"
                   {{--data-asset-path="{{ asset('site/images/items') }}"--}}
                   data-asset-path="{{ url('/hb-shared-images/'.$product_item['product_id']) }}"
                   data-images='@json($product_item['product_item_image'])'>Quick View
                </a>
            </div>

            <div class="block2-txt flex-w flex-t p-t-14">
                <div class="block2-txt-child1 flex-col-l ">
                    <a href="{{url('product_detail/' . $product_item['product_id'] . '/' . $product_item['id'])}}" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                        {{$product_item['item_name']}}
                    </a>

                    <span class="stext-105 cl3">
                        {{$product_item['price']}}
                    </span>
                </div>

                <div class="block2-txt-child2 flex-r p-t-3">
                    <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
                        <img class="icon-heart1 dis-block trans-04" src="{{asset('site/images/icons/icon-heart-01.png')}}" alt="ICON">
                        <img class="icon-heart2 dis-block trans-04 ab-t-l" src="{{asset('site/images/icons/icon-heart-02.png')}}" alt="ICON">
                    </a>
                </div>
            </div>
        </div>
    </div>
@endforeach