@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: 8px 13px;
            background: #fff;
            border: solid 1px #ddd;
            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;
        }

        .disabled {
            color: #919191;
            pointer-events: none;
            background-color: var(--bs-list-group-disabled-bg);
        }
        .disabled span{
            color: #919191;
            pointer-events: none;
            background-color: var(--bs-list-group-disabled-bg);
        }
    </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 mb-4 min_height">
        <div class="container">
            <div class="bg-light rounded-1 shadow-sm">
                <div>
                    <div class="row mb-2 p-3">
                        <h4 class="mb-2">{{ $category->name }}</h4>
                        @foreach ($subcategory as $item)
                            <div class="col-md-4">
                                <a
                                    @if ($item->activeAds->count() > 0) href="{{ route('ads', ['location' => request()->route()->parameter('location', 'kenya'), 'category' => $category->slug, 'scategory' => $item->slug]) }}"@endif>
                                    <div class="service-item @if ($item->activeAds->count()== 0) disabled @endif">{{ $item->name }} <span
                                            class="count">{{ $item->activeAds->count() ?? 0 }}</span></div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ======================= privacy policy end  ============================ -->
@endsection
@push('style')
@endpush