@php
    $categories = App\Models\Category::with('subcategory')->whereStatus(1)->orderby('orderby','asc')->get();
    $brands = App\Models\Brand::where(['status' => '1', 'is_popular' => '1'])
        ->orderby('id', 'asc')
        ->take(8)
        ->get();
@endphp

<style>
    #child_detail {
        display: grid;
        grid-template-columns: 0.3fr 0.3fr 0.6fr;

    }

    .megamenu-brand {
        border: 1px solid #d9d9d9;
        background-color: white;
        padding: 5px 10px;
        margin-bottom: 10px;
        width: 100%;

        img {
            object-fit: contain;
            height: 50px;
            width: 100%;
        }
    }
</style>

<div class="left-category-area" style="border-left: 1px solid #f3f5f6;
border-right: 1px solid #f3f5f6;">
    <div class="category-header select-box">
        <h4 style="background: #fff !important;color: #232323;padding: 10px; font-size: 16px">
            <i class="material-symbols-outlined" style="top: 5px;">
                format_list_bulleted
            </i> {{ __('Categories') }}
        </h4>

    </div>
    <div class="category-list" style="width: 300px;">
        @foreach ($categories as $key => $pcategory)
            <div class="c-item">
                <a class="d-block navi-link" href="{{ route('front.catalog') . '?category=' . $pcategory->slug }}">
                    {{-- <img class="lazy" data-src="{{asset('assets/images/'.$pcategory->photo)}}"> --}}

                     @if (Session::get('language_frontend') == 'Th')
                       {{ $pcategory->name }} 
                     @elseif(Session::get('language_frontend') == 'En')
                     {{ $pcategory->name_en }} 
                     @else
                     {{ $pcategory->name_ch }}
                     @endif

                 
                    @if ($pcategory->subcategory->count() > 0)
                        <i class="icon-chevron-right"></i>
                    @endif
                </a>
                @if ($pcategory->subcategory->count() > 0)
                    <div class="sub-c-box" style="width: 350px;">
                        @foreach ($pcategory->subcategory as $scategory)
                            <div class="child-c-box">
                              <a class="title" href="{{ route('front.catalog', ['category' => $pcategory->slug, 'subcategory' => $scategory->slug]) }}">

                                  

                                      @if (Session::get('language_frontend') == 'Th')
                                        {{ $scategory->name }} 
                                        @elseif(Session::get('language_frontend') == 'En')
                                        {{ $scategory->name_en }} 
                                        @else
                                        {{ $scategory->name_ch }}
                                        @endif


                                    @if ($scategory->childcategory->count() > 0)
                                        <i class="icon-chevron-right"></i>
                                    @endif
                                </a>
                                @if ($scategory->childcategory->count() > 0)
                                    <div class="child-category" style='width:800px; height:auto; padding:1%;'>

                                        <div id="child_detail">
                                            <div>
                                                @foreach ($scategory->childcategory as $childcategory)
                                                <a class="title" href="{{ route('front.catalog', [
                                                    'category' => $pcategory->slug,
                                                    'subcategory' => $scategory->slug,
                                                    'childcategory' => $childcategory->slug
                                                ]) }}"> 
                                                           @if (Session::get('language_frontend') == 'Th')
                                                            {{ $childcategory->name }} 
                                                            @elseif(Session::get('language_frontend') == 'En')
                                                            {{ $childcategory->name_en }} 
                                                            @else
                                                            {{ $childcategory->name_ch }}
                                                            @endif 
                                                    </a>
                                                @endforeach
                                            </div>
                                            <div>
                                                <a href="{{ route('front.PromotionAll')}}">{{ __('โปรโมชั่น') }}
                                                    <span class="badge bg-light-danger">HOT!</span></a>

                                                <a href="{{ route('front.ProductHot') }}">{{ __('ขายดี') }}
                                                    <span
                                                        class="material-symbols-outlined i-fill text-warning">local_fire_department</span></a>

                                                <br>
                                                <h6> {{ __('แบรนด์ยอดนิยม') }}</h6>
                                                {{-- brand popular --}} 
                                                {{-- brand page --}} 
                                                @foreach ($brands as $brand)
                                                    <a href="{{ route('front.catalog') . '?brand=' . $brand->slug }}"
                                                        class="megamenu-brand">
                                                        <img src="{{ asset('assets/images/' . $brand->photo) }}"
                                                            alt=''>
                                                    </a>
                                                    <br>
                                                @endforeach

                                            </div>

                                            <div>
 

                                            </div>
 
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        @endforeach
        <a href="{{ route('front.catalog') }}" class="d-block navi-link view-all-category">
            {{-- <img class="lazy" data-src="{{ asset('assets/images/category.jpg') }}" alt=""> --}}
            <span class="text-gray-dark">{{ __('All Categories') }}</span>
        </a>
    </div>


</div>