@php
    $singleWidgetData = [];
    if (!empty($singleWidgetDataShow)) {
        $singleWidgetData = $singleWidgetDataShow->getTranslation('widget_content');
    }
    $showItem = $singleWidgetData['show_item'] ?? 10;
    $categories = activeCategoryCountJob('', $showItem);
    $pageSetting = getThemeOption('page_setting') ?? [];
    $jobListUrl = $pageSetting['job_list_url'] ?? '';
@endphp
<div class="category-section mb-120">
    <div class="container">
        <div
            class="row row-cols-xl-5 row-cols-lg-4 row-cols-md-3 row-cols-sm-2 row-cols-1 justify-content-center gy-md-5 gy-4">
            @foreach ($categories as $key => $category)
                <div class="col wow animate fadeInDown" data-wow-delay="{{ 200 + $key * 200 }}ms"
                    data-wow-duration="1500ms">
                    <div class="single-category text-center">
                        <div class="category-wrap">
                            <div class="category-icon">
                                @if (fileExists($folder = 'categories', $fileName = $category->category_image) == true &&
                                        $category->category_image !== '')
                                    <img src="{{ asset('storage/categories/' . $category->category_image) }}"
                                        alt="{{ $category->getTranslation('category_name') }}">
                                @else
                                    <img src="{{ asset('frontend/assets/images/icon/category-icon.svg') }}"
                                        alt="{{ $category->getTranslation('category_name') }}">
                                @endif
                            </div>
                            <div class="category-content">
                                <h5><a
                                        href="{{ $jobListUrl ? $jobListUrl . '?jobcategory=' . $category->category_slug : 'javascript:void(0)' }}">{{ $category->getTranslation('category_name') }}</a>
                                </h5>
                                <p>{{ translate('Available') }}: <span>{{ $category?->jobs->count() ?? 0 }}</span></p>
                            </div>
                        </div>
                        <div class="button-area">
                            <a href="{{ $jobListUrl ? $jobListUrl . '?jobcategory=' . $category->category_slug : 'javascript:void(0)' }}"
                                class="icon">
                                <svg width="16" height="16" viewBox="0 0 16 16"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M3.06567 12.9342L12.9341 3.0658M12.9341 3.0658H5.53278M12.9341 3.0658V10.4671"
                                        stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="col-lg-12 d-flex justify-content-center pt-70">
            <div class="pagination-area">
                {{ $categories->links('front.vendor.pagination.custom') }}
            </div>
        </div>
    </div>
</div>