@php
    $sidebarCategories = $categories ?? collect();
@endphp
<div class="hero-cat-sidebar" id="heroCatSidebar">
    <div class="hero-cat-sidebar-title d-none d-md-block">Browse Categories</div>
    <ul class="hero-cat-list">
        @foreach($sidebarCategories as $cat)
        @php
            $subcats = ($cat->children ?? collect())->where('status', 1);
            $hasSubcats = $subcats->isNotEmpty();
            $catTotal = $cat->displayProductsCount();
        @endphp
        <li class="hero-cat-list-item{{ $hasSubcats ? ' has-subcats' : '' }}">
            <a href="{{ route('frontend.category', $cat->slug) }}" class="hero-cat-item {{ request()->route('slug') == $cat->slug ? 'active' : '' }}">
                <span class="hero-cat-icon">
                    @if($cat->imageUrl())
                        <img src="{{ $cat->imageUrl() }}" alt="{{ $cat->name }}">
                    @else
                        <i class="{{ $cat->iconClass() }}"></i>
                    @endif
                </span>
                <span class="hero-cat-name">{{ $cat->name }}</span>
                @if($catTotal > 0)
                <span class="hero-cat-count">{{ $catTotal }}</span>
                @endif
                @if($hasSubcats)
                <i class="fas fa-chevron-right hero-cat-arrow"></i>
                @endif
            </a>
            @if($hasSubcats)
            <ul class="hero-cat-sublist">
                @foreach($subcats as $sub)
                @php
                    $subTotal = (int) ($sub->products_count ?? 0);
                    if ($subTotal === 0 && $subcats->count() === 1) {
                        $subTotal = $catTotal;
                    }
                @endphp
                <li>
                    <a href="{{ route('frontend.category', $sub->slug) }}" class="hero-cat-subitem {{ request()->route('slug') == $sub->slug ? 'active' : '' }}">
                        <span class="hero-cat-icon">
                            @if($sub->imageUrl())
                                <img src="{{ $sub->imageUrl() }}" alt="{{ $sub->name }}">
                            @else
                                <i class="{{ $sub->iconClass() }}"></i>
                            @endif
                        </span>
                        <span class="hero-cat-name">{{ $sub->name }}</span>
                        @if($subTotal > 0)
                        <span class="hero-cat-count">{{ $subTotal }}</span>
                        @endif
                    </a>
                </li>
                @endforeach
            </ul>
            @endif
        </li>
        @endforeach
    </ul>
</div>