@php

    $singleWidgetData = [];
    if (!empty($singleWidgetDataShow)) {
        $singleWidgetData = $singleWidgetDataShow->getTranslation('widget_content');
    }
    $pageSetting = getThemeOption('page_setting') ?? [];
    $jobListUrl = $pageSetting['job_list_url'] ?? '';

@endphp

<div class="category-section mb-120">
    <div class="container">
        <div class="row mb-35 wow animate fadeInDown" data-wow-delay="200ms" data-wow-duration="1500ms">
            <div class="col-lg-12 d-flex align-items-center justify-content-between flex-wrap gap-3">
                <div class="section-title">
                    @if(!empty($singleWidgetData['title']))
                        <h3>{{ $singleWidgetData['title'] }}</h3>
                    @endif
                </div>
                @if(!empty($singleWidgetData['page_link']))
                    <a href="{{ $singleWidgetData['page_link'] }}" class="primary-btn-3">{{ translate('View All') }}</a>
                @endif
            </div>
        </div>
        <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 (featuredCategories($singleWidgetData['show_item'] ?? 10) 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>
</div>