@extends('Client.layouts.layout')
@section('title', $Category?->title() ?? __('trans.categories')  )
@section('content')
    <div class="container" style="min-height: 200px;">
        <div class="row py-0">
            <div class="col-12">
                <ul class="breadcrumb wizard">
                  <li class="completed"><a href="{{ route('client.home') }}">@lang('trans.home')</a></li>
                  <li class="not-completed"><a href="javascript:void(0);">{{ $Category?->title() ?? __('trans.categories')  }}</a></li>
                </ul>
            </div>
            <div class="col-12">
                @if($Category)   
                    @if ( $Category->Children->count() )
                        <div class="row justify-content-center align-items-center">
                            @foreach ( $Category->Children as $Category)
                                <div class="col-6 col-md-4 col-lg-3 col-xl-2 px-0 py-2" onclick="location.href='{{ route('client.categories',['title'=>str_replace(' ', '-', $Category->title())]) }}'">
                                    <div class="row px-2 transition_me point rounded d-flex align-items-center justify-content-center">
                                        <div class="col-12 col-md-12 text-center d-flex align-items-center justify-content-center" style="height: 210px;overflow: hidden;">
                                            <img width="100%" height="auto" loading="lazy" style="max-width: 100%;" src="{{ asset($Category->image ?? setting('logo')) }}" alt="{{ $Category->title() }}" class="img-fluid">
                                        </div>
                                        <div class="col-12 col-md-12 text-center px-0">
                                            <h4 class="my-1" style="font-weight: bold;font-size: 20px;">{{ $Category->title() }}</h4>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @elseif ($Category->Products->where('status',1)->count())
                        <div class="row justify-content-center align-items-center">
                            @foreach ($Category->Products->where('status',1) as $Product)
                                <div class="col-6 col-md-4 col-lg-3 p-2" onclick="location.href='{{ route('client.product',['title'=>str_replace(' ', '-', $Product->title())]) }}'">
                                    @include('Client.layouts.product',['Product'=>$Product])
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center">
                            <img src="{{ asset('new_assets/img/not-found.webp') }}" alt="data-not-found" style="max-width: 400px">
                            <h3>@lang('trans.Data not found')</h3>
                        </div>
                    @endif
                @else
                    <div class="row justify-content-center align-items-center">
                        @foreach ($Categories as $Category)
                            <div class="col-6 col-md-4 col-lg-3 col-xl-2 px-0 py-2" onclick="location.href='{{ route('client.categories',['title'=>str_replace(' ', '-', $Category->title())]) }}'">
                                <div class="row px-2 transition_me point rounded d-flex align-items-center justify-content-center">
                                    <div class="col-12 col-md-12 text-center d-flex align-items-center justify-content-center" style="height: 210px;overflow: hidden;">
                                        <img width="100%" height="auto" loading="lazy" style="max-width: 100%;" src="{{ asset($Category->image ?? setting('logo')) }}" alt="{{ $Category->title() }}" class="img-fluid">
                                    </div>
                                    <div class="col-12 col-md-12 text-center px-0">
                                        <h4 class="my-1" style="font-weight: bold;font-size: 20px;">{{ $Category->title() }}</h4>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>




@endsection