@php
    if (!empty($singleWidgetDataShow)) {
        $singleWidgetDataShow = $singleWidgetDataShow->getTranslation('widget_content');
    }
    $banner_bg_img = $singleWidgetDataShow['banner_bg_img']['img'] ?? '';
    $bg = !empty($banner_bg_img)
        ? asset('storage/widgets/' . $banner_bg_img)
        : asset('frontend/assets/images/bg/banner-bg.webp');
@endphp

<div class="banner-wrapper mb-120" style="background: url('{{ $bg }}'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
    <div class="container">
        <div class="row align-items-end gy-md-5 gy-4">
            <div class="col-xxl-7 col-xl-6">
                <div class="banner-content">
                    @if (!empty($singleWidgetDataShow['banner_tag']))
                        <span class="banner-tag">{{ $singleWidgetDataShow['banner_tag'] }}</span>
                    @endif
                    @if (!empty($singleWidgetDataShow['title']))
                        <h1>{!! $singleWidgetDataShow['title'] !!}</h1>
                    @endif
                    @if (!empty($singleWidgetDataShow['description']))
                        <p>{{ $singleWidgetDataShow['description'] }}</p>
                    @endif
                    <div class="job-search-area">
                        @php
                            $pageLink = getThemeOption('page_setting') ?? [];
                            $pageLink = isset($pageLink['job_list_url'])
                                ? $pageLink['job_list_url'] . '?featured=featured'
                                : '#';

                        @endphp
                        <form action="{{ $pageLink }}" method="get">
                            <div class="form-inner job-title">
                                <input type="text" placeholder="Service title or keywords" id="job_title"
                                    name="job_title">
                            </div>
                            <div class="form-inner category">
                                <select class="select1" name="jobcategory" id="jobcategory">
                                    <option selected disabled>{{ translate('Select Category') }}</option>
                                    @foreach (jobCategory($limit = null) as $index => $category)
                                        <option value="{{ $category->category_slug }}">
                                            {{ $category->getTranslation('category_name') }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-inner">
                                <button type="submit" class="primary-btn-2"> {{ translate('Search') }}</button>
                            </div>
                        </form>
                    </div>               
                </div>
            </div>
            <div class="col-xxl-5 col-xl-6">
                <div class="banner-img-wrap">
                    <ul class="counter-item">
                        @if (!empty($singleWidgetDataShow['keyword_one']))
                            <li class="single-counter">
                                <img src="{{ asset('frontend/assets/images/icon/live-jobs-icon.svg') }}"
                                    alt="livejobs-icon">
                                <span>{{ $singleWidgetDataShow['keyword_one'] }}</span>
                                <h6><strong class="counter">{{ CountLiveJobs() }}</strong>+</h6>
                            </li>
                        @endif
                        @if (!empty($singleWidgetDataShow['keyword_three']))
                            <li class="single-counter">
                                <img src="{{ asset('frontend/assets/images/icon/candidates-icon.svg') }}"
                                    alt="candidates-icon">
                                <span>{{ $singleWidgetDataShow['keyword_three'] }}</span>
                                <h6><strong class="counter">{{ CountCandidate() }}</strong>+</h6>
                            </li>
                        @endif
                        @if (!empty($singleWidgetDataShow['keyword_four']))
                            <li class="single-counter">
                                <img src="{{ asset('frontend/assets/images/icon/new-jobs-icon.svg') }}"
                                    alt="newjobs-icon">
                                <span>{{ $singleWidgetDataShow['keyword_four'] }}</span>
                                <h6><strong class="counter">{{ CountNewJobs() }}</strong>+</h6>
                            </li>
                        @endif
                        @if (!empty($singleWidgetDataShow['keyword_two']))
                            <li class="single-counter">
                                <img src="{{ asset('frontend/assets/images/icon/companies-icon.svg') }}"
                                    alt="companies-icon">
                                <span>{{ $singleWidgetDataShow['keyword_two'] }}</span>
                                <h6><strong class="counter">{{ CountCompany() }}</strong>+</h6>
                            </li>
                        @endif
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>