@if (count($trending_categoryGroups))
    @foreach ($trending_categoryGroups as $group)
        <!------------ start animal-sector section ------------>
    @if($group->style == 2)
        <section class=" wow fadeInUp animated">
            <div class="container">
                <div class="module-title wow fadeInUp animated">
                    <h2>
                        @php
                            $translation = $group->translations->where('language_id',getLocaleId())->first();
                        @endphp
                        <a href="{{ route('categoryGrp.browse', $group->slug) }}">
                            {{$translation->name ?? $group->name }}
                        </a>
                    </h2>
                </div>
                <div  class="agriculural-sector">
                    <div class="row">
                        <div class="col-sm-3 col-md-3 col-lg-3 col-xs-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="as-category">
                                        <ul>
                                            @foreach($group->categories as $category)

                                                @php
                                                $translation = $category->translations->where('language_id',getLocaleId())->first()
                                                @endphp
                                                <li>
                                                    <a href="{{route('category.browse',$category->slug)}}">
                                                        {{$translation->name ?? $category->name}}
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>

                                </div>
                                @if (Storage::exists(optional($group->backgroundImage)->path))
                                    <div style="width: 100%;height: 302px;background-image: url({{ get_storage_file_url(optional($group->backgroundImage)->path, 'medium') }});background-position: center;border-radius: 0.6rem;" class="cat-img"></div>
                                @endif
                            </div>
                        </div>

                        <div class="col-md-9 col-lg-9 col-sm-9 col-xs-12">
                            <div class="row">
                                @foreach ($group->categories as $category)
                                    @foreach($category->products as $product)
                                        @foreach($product->inventories as $item)
                                            @php
                                                $item_translation = $item->translations->where('language_id',getLocaleId())->first();
                                            @endphp
                                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 mb-4">
                                                <div class="card wow fadeInLeft animated">
                                                    <div class="card-body">
                                                        <div class="product-wrapper">
                                                            <div class="thumbnail-wrapper img-hover">
                                                                <a href="{{ route('show.product', $item->slug) }}">
                                                                    <img style="width: 220px; height: 184px; !important;" class="img-fluid img-hover" src="{{ get_inventory_img_src($item, 'medium') }}"
                                                                         data-name="product_image" alt="{{ $item_translation->title ?? $item->title }}" title="{{ $item_translation->title ?? $item->title }}" height="149" width="185">
                                                                </a>
                                                            </div>
                                                            @if (empty($title))
                                                                <div class="meta-wrapper">
                                                                    <h3>
                                                                        <a href="{{ route('show.product', $item->slug) }}">{!! Str::limit(($item_translation->title ?? $item->title), 22) !!}</a>
                                                                    </h3>
                                                                </div>
                                                            @endif
                                                            @if (empty($pricing))
                                                                <div class="price">
                                                                    <span>{!! get_formated_price($item->current_sale_price(), config('system_settings.decimals', 2)) !!}</span>
                                                                    @if ($item->hasOffer())
                                                                        <p style="color: #b0b0b0;text-decoration: line-through;font-size: 16px;line-height: 24px;font-family: Arimo,sans-serif;">
                                                                            {!! get_formated_price($item->sale_price, config('system_settings.decimals', 2)) !!}
                                                                        </p>
                                                                    @endif
                                                                </div>
                                                            @endif
                                                            <div class="product-card-actions">
                                                                <a href="javascript:void(0)" data-link="{{ route('cart.addItem', $item->slug) }}" class="sc-add-to-cart">
                                                                    <i class="bi bi-cart3"></i>
                                                                </a>
                                                                <a class="itemQuickView" href="{{ route('quickView.product', $item->slug) }}">
                                                                    <i class="bi bi-zoom-in "></i>
                                                                </a>
                                                                <a href="javascript:void(0)" data-link="{{ route('wishlist.add', $item) }}" class="add-to-wishlist">
                                                                    <i class="bi bi-heart"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endforeach
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    @else

        <section class="wow fadeInLeft animated">
    <div class="container">
        <div class="module-title wow fadeInUp animated">
            <h2>
                @php
                $translation = $group->translations->where('language_id',getLocaleId())->first();

                @endphp
                <a href="{{ route('categoryGrp.browse', $group->slug) }}">
                    {{$translation->name ?? $group->name }}
                </a>
            </h2>
        </div>
        <div class="animal-sector">
            <div class="row" style="width: 1116px; !important;">
                <div class="col-sm-5 col-md-5 col-lg-5 col-xs-12 pl-0">
                    <div class="as-category">
                        <ul>
                            @foreach($group->categories as $category)
                                @php
                                    $translation = $category->translations->where('language_id',getLocaleId())->first();
                                @endphp
                                <li>
                                    <a href="{{route('category.browse',$category->slug)}}">
                                        {{$translation->name ?? $category->name}}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    @if (Storage::exists(optional($group->backgroundImage)->path))
                        <div class="an-s-img">
                            <a href="{{ route('categoryGrp.browse', $group->slug) }}">
                                <img style="height: 600px" class="img-fluid" src="{{ get_storage_file_url(optional($group->backgroundImage)->path, 'category') }}"/></a>
                        </div>
                    @endif
                </div>

                <div class="col-sm-7 col-md-7 col-lg-7 col-xs-12">
                    <div class="row">
                        @foreach ($group->categories as $category)
                            @foreach($category->products as $product)
                                @foreach($product->inventories as $item)
                                    @php
                                        $item_translation = $item->translations->where('language_id',getLocaleId())->first();
                                    @endphp
                                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 p-0">
                                        <div class="card wow fadeInLeft animated">
                                            <div class="card-body" >
                                                <div class="product-wrapper" >
                                                    <div class="thumbnail-wrapper img-hover">
                                                        <a href="{{ route('show.product', $item->slug) }}">
                                                            <img style="width: 155px; height: 125px; !important;" class="img-fluid img-hover" src="{{ get_inventory_img_src($item, 'medium') }}"
                                                                 data-name="product_image" alt="{{$item_translation->title ?? $item->title }}" title="{{$item_translation->title ?? $item->title }}">
                                                        </a>
                                                    </div>
                                                    @if (empty($title))
                                                        <div class="meta-wrapper">
                                                            <h3>
                                                                <a href="{{ route('show.product', $item->slug) }}">{!! Str::limit($item_translation->title ?? $item->title, 20) !!}</a>
                                                            </h3>
                                                        </div>
                                                    @endif

                                                    @if (empty($pricing))
                                                        <div class="price">
                                                            <span>{!! get_formated_price($item->current_sale_price(), config('system_settings.decimals', 2)) !!}</span>
                                                            @if ($item->hasOffer())
                                                                <p style="color: #b0b0b0;text-decoration: line-through;font-size: 16px;line-height: 24px;font-family: Arimo,sans-serif;">
                                                                    {!! get_formated_price($item->sale_price, config('system_settings.decimals', 2)) !!}
                                                                </p>
                                                            @endif
                                                        </div>
                                                    @endif

                                                    <div class="product-card-actions">
                                                        <a href="javascript:void(0)" data-link="{{ route('cart.addItem', $item->slug) }}" class="sc-add-to-cart">
                                                            <i class="bi bi-cart3"></i>
                                                        </a>
                                                        <a class="itemQuickView" href="{{ route('quickView.product', $item->slug) }}">
                                                            <i class="bi bi-zoom-in "></i>
                                                        </a>
                                                        <a href="javascript:void(0)" data-link="{{ route('wishlist.add', $item) }}" class="add-to-wishlist">
                                                            <i class="bi bi-heart"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endforeach
                        @endforeach


                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
    @endif

    @endforeach
@endif