@php
    use App\Enums\Boolean;
    use App\Enums\ElementType;
    use App\Enums\TopElementDefault;
    $forSeasons = current(
        array_filter($elements, function ($val) {
            return $val['element_type'] == ElementType::DEFAULT && $val['default_element_type'] == TopElementDefault::FOUR_SEASONS && $val['status'];
        }),
    );
@endphp
<script>
    const routeGetMedia = "{!! route('preview.getMediaInstagram', $project->id) !!}"
</script>
<div class="four_seasons" {!! !empty($forSeasons) ? 'id=four_seasons' : '' !!} data-aos="fade-right">
    <div class="container flex jb-sp" id="instagramPC">
        @if (!empty($forSeasons))
            <div class="four_seasons__box" id="forSeasonsPC">
                <div class="four_seasons__head">
                    <div class="four_seasons__title" {!! setStyle(['color' => $project->point_color]) !!}>PHOTO GALLERY</div>
                    <div class="four_seasons__link">
                        <div class="four_seasons__link-slide active">01
                            <div class="four_seasons_line"> </div>
                            <div class="four_seasons_run"></div>
                        </div>
                        <div class="four_seasons__link-slide">
                            02
                            <div class="four_seasons_line"> </div>
                            <div class="four_seasons_run"> </div>
                        </div>
                        <div class="four_seasons__link-slide">
                            03
                            <div class="four_seasons_line"> </div>
                            <div class="four_seasons_run"></div>
                        </div>
                        <div class="four_seasons__link-slide">
                            04
                            <div class="four_seasons_line"> </div>
                            <div class="four_seasons_run"> </div>
                        </div>
                    </div>
                </div>
                <div class="four_seasons__body">
                    <div class="four_seasons__image-slide image-active img_wrap">
                        <img class="pc" src="{!! setImagePreview(fieldPropertyValue('image_spring', $forSeasons)) !!}">
                        <img class="sp" src="{!! setImagePreview(fieldPropertyValue('image_spring_sp', $forSeasons)) !!}">
                    </div>
                    <div class="four_seasons__image-slide img_wrap">
                        <img class="pc" src="{!! setImagePreview(fieldPropertyValue('image_summer', $forSeasons)) !!}">
                        <img class="sp" src="{!! setImagePreview(fieldPropertyValue('image_summer_sp', $forSeasons)) !!}">
                    </div>
                    <div class="four_seasons__image-slide img_wrap">
                        <img class="pc" src="{!! setImagePreview(fieldPropertyValue('image_autumn', $forSeasons)) !!}">
                        <img class="sp" src="{!! setImagePreview(fieldPropertyValue('image_autumn_sp', $forSeasons)) !!}">
                    </div>
                    <div class="four_seasons__image-slide img_wrap">
                        <img class="pc" src="{!! setImagePreview(fieldPropertyValue('image_winter', $forSeasons)) !!}">
                        <img class="sp" src="{!! setImagePreview(fieldPropertyValue('image_winter_sp', $forSeasons)) !!}">
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>
<div id="instagramSP"></div>