@php

    $singleWidgetData = [];
    if (!empty($singleWidgetDataShow)) {
        $singleWidgetData = $singleWidgetDataShow->getTranslation('widget_content');
    }

    $pageLink = $singleWidgetData['page_link'] ?? '';
    $showItem = $singleWidgetData['show_item'] ?? 6;
    $featuredJobs = featuredJobs($showItem);
@endphp

<div class="featured-section mb-120">
    <div class="featured-section-wrap">
        <div class="container">
            @if (!empty($singleWidgetData['title']))
                <div class="row wow animate fadeInDown" data-wow-delay="200ms" data-wow-duration="1500ms">
                    <div class="col-lg-12 mb-40">
                        <div class="section-title">
                            <h3>{{ $singleWidgetData['title'] }}</h3>
                        </div>
                    </div>
                </div>
            @endif
            <div class="row gy-4 mb-50">
                @php
                    $delays = ['200ms', '400ms', '600ms', '800ms', '400ms', '200ms'];
                @endphp
                @foreach ($featuredJobs as $index => $job)
                    @php
                        $delay = $delays[$index % count($delays)];
                    @endphp
                    <div class="col-xl-4 col-lg-6 col-md-6 wow animate fadeInDown" data-wow-delay="{{ $delay }}"
                        data-wow-duration="1500ms">
                        <div class="feature-card">
                            <div class="feature-wrape">
                                <div class="company-area">
                                    <div class="logo">
                                        @if (fileExists($folder = 'jobs', $fileName = $job->job_image) == true && $job->job_image !== '')
                                            <img src="{{ asset('storage/jobs/' . $job->job_image) }}"
                                                alt="company-logo">
                                        @else
                                            <img src="{{ asset('frontend/assets/images/demo-logo.png') }}"
                                                alt="company-logo">
                                        @endif
                                    </div>
                                    <div class="company-details">
                                        <div class="name-location">
                                            <h5><a
                                                    href="{{ url('job-details/' . $job->slug) }}">{{ $job->job_title }}</a>
                                            </h5>
                                            <p>
                                                {{ translate('By') }}
                                                <span>{{ $job->company?->company_name ?? 'Unknown Company' }}</span>
                                            </p>
                                        </div>

                                        @php
                                            $active =
                                                Auth::check() && checkArrayValue($job->id, userBookBarkJobs())
                                                    ? 'active'
                                                    : '';
                                        @endphp
                                        <div class="bookmark {{ $active }}"
                                            data-action="{{ route('bookmark', $job->id) }}">
                                            <i class="bi bi-heart"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="job-discription">
                                    <ul>
                                        <li class="style-2">
                                            <svg width="10" height="10" viewBox="0 0 10 10"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M7.60375 5.5875C7.27625 6.25125 6.8325 6.9125 6.37875 7.50625C5.94784 8.06563 5.48762 8.6018 5 9.1125C4.51238 8.6018 4.05216 8.06563 3.62125 7.50625C3.1675 6.9125 2.72375 6.25125 2.39625 5.5875C2.065 4.91687 1.875 4.28875 1.875 3.75C1.875 2.9212 2.20424 2.12634 2.79029 1.54029C3.37634 0.95424 4.1712 0.625 5 0.625C5.8288 0.625 6.62366 0.95424 7.20971 1.54029C7.79576 2.12634 8.125 2.9212 8.125 3.75C8.125 4.28875 7.93438 4.91687 7.60375 5.5875ZM5 10C5 10 8.75 6.44625 8.75 3.75C8.75 2.75544 8.35491 1.80161 7.65165 1.09835C6.94839 0.395088 5.99456 0 5 0C4.00544 0 3.05161 0.395088 2.34835 1.09835C1.64509 1.80161 1.25 2.75544 1.25 3.75C1.25 6.44625 5 10 5 10Z" />
                                                <path
                                                    d="M5 5C4.66848 5 4.35054 4.8683 4.11612 4.63388C3.8817 4.39946 3.75 4.08152 3.75 3.75C3.75 3.41848 3.8817 3.10054 4.11612 2.86612C4.35054 2.6317 4.66848 2.5 5 2.5C5.33152 2.5 5.64946 2.6317 5.88388 2.86612C6.1183 3.10054 6.25 3.41848 6.25 3.75C6.25 4.08152 6.1183 4.39946 5.88388 4.63388C5.64946 4.8683 5.33152 5 5 5ZM5 5.625C5.49728 5.625 5.97419 5.42746 6.32583 5.07583C6.67746 4.72419 6.875 4.24728 6.875 3.75C6.875 3.25272 6.67746 2.77581 6.32583 2.42417C5.97419 2.07254 5.49728 1.875 5 1.875C4.50272 1.875 4.02581 2.07254 3.67417 2.42417C3.32254 2.77581 3.125 3.25272 3.125 3.75C3.125 4.24728 3.32254 4.72419 3.67417 5.07583C4.02581 5.42746 4.50272 5.625 5 5.625Z" />
                                            </svg>
                                            {{ $job->city_name ? $job->city_name : translate('Unknown City') }},
                                            {{ $job->country_name ? $job->country_name : translate('Unknown Country') }}
                                        </li>
                                        <li class="style-3">
                                            @if ($job->salary_mode == 'range')
                                                @if (!empty($job->min_salary))
                                                    {{ defaultCurrency() }}{{ formatToK(dotZeroRemovePrice($job->min_salary)) }}
                                                    -
                                                @endif
                                                {{ defaultCurrency() }}{{ formatToK(dotZeroRemovePrice($job->max_salary)) }}
                                            @else
                                                {{ ucfirst($job->salary_mode) }}
                                            @endif
                                        </li>
                                        <li class="style-4">
                                            {{ $job->jobJobTypes?->implode('type_name', ' , ') }}
                                        </li>
                                        <li class="style-5">
                                            {{ translate('Vacancy') }}: {{ $job->job_vacancy }}
                                        </li>
                                    </ul>
                                </div>
                                <div class="date">
                                    <p>{{ translate('Deadline') }}: {{ customDateFormate($job->job_deadline) }}</p>
                                </div>
                            </div>
                            <div class="button-area">
                                <a href="{{ url('job-details', $job->slug) }}"
                                    class="primary-btn-4">{{ translate('Apply Now') }}
                                    <svg width="12" height="12" viewBox="0 0 12 12"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M10.8125 0.750301C10.9285 0.750301 11.0398 0.796394 11.1219 0.878442C11.2039 0.960489 11.25 1.07177 11.25 1.1878L11.25 6.4378C11.25 6.55383 11.2039 6.66511 11.1219 6.74716C11.0398 6.82921 10.9285 6.8753 10.8125 6.8753C10.6965 6.8753 10.5852 6.82921 10.5031 6.74716C10.4211 6.66511 10.375 6.55383 10.375 6.4378L10.375 2.24393L1.49725 11.1226C1.45657 11.1632 1.40828 11.1955 1.35514 11.2175C1.30199 11.2395 1.24503 11.2509 1.1875 11.2509C1.12997 11.2509 1.07301 11.2395 1.01986 11.2175C0.966718 11.1955 0.918427 11.1632 0.87775 11.1226C0.837073 11.0819 0.804806 11.0336 0.782792 10.9804C0.760777 10.9273 0.749448 10.8703 0.749448 10.8128C0.749448 10.7553 0.760777 10.6983 0.782792 10.6452C0.804806 10.592 0.837073 10.5437 0.87775 10.5031L9.75637 1.6253L5.5625 1.6253C5.44647 1.6253 5.33519 1.57921 5.25314 1.49716C5.17109 1.41511 5.125 1.30383 5.125 1.1878C5.125 1.07177 5.17109 0.96049 5.25314 0.878442C5.33519 0.796395 5.44647 0.750302 5.5625 0.750302L10.8125 0.750301Z" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="row wow animate fadeInUp" data-wow-delay="200ms" data-wow-duration="1500ms">
                <div class="col-lg-12 d-flex justify-content-center">
                    <a href="{{ $pageLink ? $pageLink . '?featured=featured' : 'javascript:void(0)' }}"
                        class="primary-btn-3">{{ translate('Explore All Jobs') }}</a>
                </div>
            </div>
        </div>
    </div>
</div>