@php
    $categories = App\Models\Category::with('subcategory')->whereStatus(1)->orderby('serial', 'asc')->take(8)->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">
        @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)}}"> --}}
                   {{ $pcategory->name }} 
                    @if ($pcategory->subcategory->count() > 0)
                        <i class="icon-chevron-right"></i>
                    @endif
                </a>
                @if ($pcategory->subcategory->count() > 0)
                    <div class="sub-c-box">
                        @foreach ($pcategory->subcategory as $scategory)
                            <div class="child-c-box">
                                <a class="title" href="{{ route('front.catalog') . '?subcategory=' . $scategory->slug }}">
                                    {{ $scategory->name }}
                                    @if ($scategory->childcategory->count() > 0)
                                        <i class="icon-chevron-right"></i>
                                    @endif
                                </a>
                                @if ($scategory->childcategory->count() > 0)
                                    <div class="child-category" style='width:750px; height:auto; padding:1%;'>

                                        <div id="child_detail">
                                            <div>
                                                @foreach ($scategory->childcategory as $childcategory)
                                                    <a
                                                        href="{{ route('front.catalog') . '?childcategory=' . $childcategory->slug }}">{{ $childcategory->name }}</a>
                                                @endforeach
                                            </div>
                                            <div>
                                                <a href="{{ route('front.catalog') . '?childcategory=' . $childcategory->slug }}">{{ __('โปรโมชั่น') }}
                                                    <span class="badge bg-light-danger">HOT!</span></a>

                                                <a href="{{ route('front.catalog') . '?childcategory=' . $childcategory->slug }}">{{ __('ขายดี') }}
                                                    <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>
{{-- 
                                                <a href="" class="pt-0">
                                                    <img src="{{ asset('assets/images/banner-megemenu/sample01.png') }}"
                                                        class="mw-100" alt=''>
                                                </a>
                                                <br>
                                                <a href="" class="pt-0">
                                                    <img src="{{ asset('assets/images/banner-megemenu/sample02.png') }}"
                                                        class="mw-100" alt=''>
                                                </a>
                                                <br>
                                                <a href="" class="pt-0">
                                                    <img src="{{ asset('assets/images/banner-megemenu/sample03.png') }}"
                                                        class="mw-100" alt=''>
                                                </a> --}}

                                            </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>