@extends('layouts.app')
@section('page-title', 'All Categories')
@section('body-content')
    <main id="main">

        <section class="page-title">
            <div class="auto-container">
                <!-- Icons Box -->
                <div class="icons-box">

                </div>
                <h1>Products <span>Categories</span></h1>

            </div>
        </section>


        <section id="shopByCategory">
            <div class="shopByCategory-wrapper g_in_spacing_block">
                <div class="container">
                    <div class="row">
                        {{-- <div class="col-md-12">
                            <div class="sec-title">
                                @if (!empty($brand))
                                <h2>{{$brand}} / <span>Categories</span></h2>
                                @else
                                <h2>All <span>Categories</span></h2>
                                @endif
                            </div>
                        </div> --}}
                        <div class="col-md-12">
                            <div class="row">
                                {{-- {{dd($categories)}} --}}
                                @foreach ($categories as $subCategories)
                                    <div class="col-md-12">
                                        <div class="shop-category-list" id="shopByCategory-{{$subCategories['slug']}}">
                                            <a href="/category/{{$subCategories['slug']}}">
                                                <span class="shop-category-icon">
                                                    <div class="shop-category-icon-wrapper">
                                                        <i class="fa-solid {{ !empty($subCategories['icon']) ? $subCategories['icon'] : 'fa-bolt' }}"></i>
                                                    </div>
                                                </span>
                                                <span class="shop-category-title">{{$subCategories['name']}}</span>
                                            </a>
                                        </div>
                                        <div class="category-list-box">
                                            <div class="row">
                                                @foreach ($subCategories['subCategories'] as $row)
                                                    <div class="col-lg-3 col-md-4 col-sm-6">
                                                        <a href="/{{$subCategories['slug']}}/{{$row['slug']}}" class="brandName">
                                                            <span>{{ $row['name'] }}</span>
                                                        </a>
                                                    </div>
                                                    {{-- @if ($key == 7)
                                                        @break
                                                    @endif --}}
                                                @endforeach
                                            </div>
                                            <div class="category-viewMore clear-fix">
                                                <a href="#">View More</a>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection
@section('end-scripts')
    <script src="{{ asset('js/all-categories.js?v=') . config('constants.VERSION') }}"></script>
@endsection