@php
    $section_content = (array) ($section_content ?? []);
    $section_items = is_array($section_content['items'] ?? null) ? $section_content['items'] : [];
    $has_section_items = count($section_items) > 0;
    $upload_base = asset((config('paths.upload', 'assets/uploads')) . '/service-landing');
    $section_title = $section_content['title'] ?? $setting->getSetting('service_work_sample_title');
@endphp

<section>
    <p class="font-23 bold dark-gray text-center pb-3 mt-lg-5 mt-4 pt-5">
        {{ $section_title }}
        {{--        TODO: kasra-fix--}}
        {{--        نمونه کار ها <span class="mint-green">الوادز</span>--}}
    </p>
    <div class="container sample-container position-relative">
        <div class="row d-lg-flex d-none row-cols-5 mx-0 w-100 justify-content-center">
            @if($has_section_items)
                @foreach($section_items as $work)
                    <div class="col p-2">
                        <div class="position-relative sample-boxes-after">
                            <div class="bg-white p-2 main-radius shadow-sm sample-boxes">
                                <img class="w-100 main-radius" src="{{ ($work['image'] ?? null) ? ($upload_base . '/' . $work['image']) : '' }}" alt="{{ $work['title'] ?? '' }}">
                                @if(!empty($work['link']))
                                    <a class="first-page-btn-component font-12 z-2 text-white main-radius mb-2 btn-mint-green position-absolute bottom-0 end-0 start-0 m-auto max-w"
                                       href="{{ $work['link'] }}">
                                        مشاهده
                                    </a>
                                @endif
                            </div>
                        </div>
                        <span class="bold mint-green text-center mb-0 mt-3 font-18 d-flex justify-content-center">
                        {{ $work['title'] ?? '' }}
                    </span>
                        <span class="light light-gray text-center font-14 mb-0 d-flex justify-content-center">
                        {{ $work['short_description'] ?? '' }}
                    </span>
                    </div>
                @endforeach
            @else
                @foreach($work_samples as $work)
                    <div class="col p-2">
                        <div class="position-relative sample-boxes-after">
                            <div class="bg-white p-2 main-radius shadow-sm sample-boxes">
                                <img class="w-100 main-radius" src="{{$work->getImageFile()}}" alt="{{$work->name}}">
                                @if($work->link)
                                    <a class="first-page-btn-component font-12 z-2 text-white main-radius mb-2 btn-mint-green position-absolute bottom-0 end-0 start-0 m-auto max-w"
                                       href="{{$work->link}}">
                                        مشاهده
                                    </a>
                                @endif
                            </div>
                        </div>
                        <span class="bold mint-green text-center mb-0 mt-3 font-18 d-flex justify-content-center">
                        {{$work->name}}
                    </span>
                        <span class="light light-gray text-center font-14 mb-0 d-flex justify-content-center">
                        {{$work->title}}
                    </span>
                    </div>
                @endforeach
            @endif
        </div>
        <div class="swiper d-lg-none d-block mySwiper-sample mt-4 pt-2">
            <div class="swiper-wrapper">
                @if($has_section_items)
                    @foreach($section_items as $work)
                        <div class="swiper-slide">
                            <div class="w-100">
                                <div class="position-relative sample-boxes-after">
                                    <div class="bg-white p-2 main-radius shadow-sm sample-boxes">
                                        <img class="w-100 main-radius" src="{{ ($work['image'] ?? null) ? ($upload_base . '/' . $work['image']) : '' }}"
                                             alt="{{ $work['title'] ?? '' }}">
                                        @if(!empty($work['link']))
                                            <a class="first-page-btn-component font-12 z-2 text-white main-radius mb-2 btn-mint-green position-absolute bottom-0 end-0 start-0 m-auto max-w"
                                               href="{{ $work['link'] }}">
                                                مشاهده
                                            </a>
                                        @endif
                                    </div>
                                </div>
                                <span class="bold mint-green text-center mb-0 mt-3 font-18 d-flex justify-content-center">
                                {{ $work['title'] ?? '' }}
                            </span>
                                <span class="light light-gray text-center font-14 mb-0 d-flex justify-content-center">
                                {{ $work['short_description'] ?? '' }}
                            </span>
                            </div>
                        </div>
                    @endforeach
                @else
                    @foreach($work_samples as $work)
                        <div class="swiper-slide">
                            <div class="w-100">
                                <div class="position-relative sample-boxes-after">
                                    <div class="bg-white p-2 main-radius shadow-sm sample-boxes">
                                        <img class="w-100 main-radius" src="{{$work->getImageFile()}}"
                                             alt="{{$work->name}}">
                                        @if($work->link)
                                            <a class="first-page-btn-component font-12 z-2 text-white main-radius mb-2 btn-mint-green position-absolute bottom-0 end-0 start-0 m-auto max-w"
                                               href="{{$work->link}}">
                                                مشاهده
                                            </a>
                                        @endif
                                    </div>
                                </div>
                                <span class="bold mint-green text-center mb-0 mt-3 font-18 d-flex justify-content-center">
                                {{$work->name}}
                            </span>
                                <span class="light light-gray text-center font-14 mb-0 d-flex justify-content-center">
                                {{$work->title}}
                            </span>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </div>
</section>