@php
    $categories = App\Taxonomy::all()->where('category_type', $sub->category_type)->where('hierarchical', $sub->hierarchical)->where('published', 1)->sortBy('sort_order');
@endphp

{{-- Desktop View --}}
<div class="container-fluid px-0 d-none d-md-block">
    <div class="row">
        @foreach ($categories as $cat)
            <div class="col-md-3 col-sm-4 col-6 my-4">
                <a class="d-flex flex-column cat-block h-100 bg-white box-shadow" href="/{{$cat->slug}}">
                    <div class="embed-responsive embed-responsive-3by2">
                        <img class="embed-responsive-item"  src="{{$cat->featured_image ?? $site->default_image}}" alt="{{$cat->title}} Featured Image">
                    </div>
                    <h5 class="mx-4 py-4 my-auto text-center">{{$cat->title}}</h5>
                </a>
            </div>
        @endforeach
    </div>
</div>

{{-- Mobile View --}}
<div class="cat-accordion accordion d-md-none" id="mobile-cat-accordion-{{$sub->id}}">
    @foreach ($categories as $cat)
        <div class="cat-accordion-item">
            <button type="button" id="cat-accordion-header-{{$cat->slug}}" class="cat-accordion-header mb-0 collapsed" data-toggle="collapse" data-target="#cat-accordion-body-{{$cat->slug}}" aria-expanded="false" aria-controls="cat-accordion-body-{{$cat->slug}}">
                <h4 id="cat-accordion-header-{{$cat->slug}}" class="cat-accordion-title" data-toggle="collapse" data-target="#cat-accordion-body-{{$cat->slug}}">{{$cat->title}}</h4>
            </button>
            <div id="cat-accordion-body-{{$cat->slug}}" class="products collapse pl-3 pr-3 pb-3 pt-0" data-parent="#mobile-cat-accordion-{{$sub->id}}">                
                @foreach($cat->posts->sortBy('sort_order') as $post)                                    
                    <a class="cat-accordion-product-link" href="/product/{{$post->slug}}">
                        <div class="cat-accordion-product">                        
                            <p class="mb-0">{{$post->title}}</p>
                            <small><i>{{ ($post->post->hire && $post->post->buy) ? "Hire Or Buy": ($post->post->hire ? "Hire": ($post->post->buy ? "Buy": "None")) }}</i></small>
                            <span class="text-right cat-accordion-product-icon"></span>
                        </div>
                    </a>
                @endforeach                
            </div>
        </div>
    @endforeach
</div>