@extends('frontend.layouts.app')
@section('title')
{{ $title ?? 'Page header' }}
@endsection

@section('meta')
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />
@endsection

@push('style')
<style>
    .service-item {
        padding: 3px 13px;
        border: solid 1px #38abab;
        border-radius: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        color: #333;
        margin-bottom: 10px;
    }

    /* .service-item:hover {
        background-color: #e0e0e0;
    } */

    .count {
        font-weight: bold;
        color: #555;
    }
</style>
@endpush

@section('content')
<!-- ======================= breadcrumb start  ============================ -->
@include('frontend.layouts.includes.breadcrumb',
['links'=>[[$title=>route('frontend.allCategories')]]])
<!-- ======================= breadcrumb end  ============================ -->

<!-- ======================= privacy policy start  ============================ -->
<div class="custom_section pt-2 pb-5">
    <div class="category_section mb-5">
        <div class="container">
            <div class="section_heading mb-4">
                <h2 class="title">Browse items by category</h2>
            </div>
            <div class="row g-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 border rounded overflow-hidden">
                <!-- category -->
                @foreach ($categories as $category)
                <div class="col">
                    <div class="category_item d-flex align-items-center position-relative p-3 p-lg-4 h-100 border-end border-bottom">
                        <div class="category_icon bg-light rounded p-2 shadow-sm me-2">
                            <a @if ($category->activeAds->count()) href="{{route('frontend.allSubCategories', $category->slug)}}" @endif class="stretched-link">
                                <img src="{{ getIcon($category->image) }}" width="50" class="img-fluid" alt="Mobiles">
                            </a>
                        </div>
                        <div class="category_content">
                            <div class="category_name mb-1 @if ($category->activeAds->count()==0) no-ads @endif"><strong>{{$category->name}}</strong></div>
                            <div class="count_items @if ($category->activeAds->count()==0) no-ads @endif">{{ $category->activeAds->count() ?? 0 }} ads</div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
<!-- ======================= privacy policy end  ============================ -->


@endsection
@push('style')
@endpush