@php
    use App\Enums\SightseeingAroundElementDefault;
@endphp


<div class="content-one">
    <div class="br-opacity">
        <div class="box-text">
            <h1 class="text-title heading-main">
                <span class="pc">{!! setTextDefault(textLocale('name', $item, $lang)) !!}</span>
                <span class="sp">{!! setTextDefault(textLocale('name_sp', $item, $lang)) !!}</span>
            </h1>
            <p class="text-content">
                <span class="pc">{!! setTextDefault(textLocale('descriptive', $item, $lang)) !!}</span>
                <span class="sp">{!! setTextDefault(textLocale('descriptive_sp', $item, $lang)) !!}</span>
            </p>
        </div>
    </div>
</div>
@if (fieldPropertyValue('default_element_type', $item) == SightseeingAroundElementDefault::TOURIST_ATTRACTIONS)
    <div class="content-title heading-main" data-i18n="sightseeing_page.tourist_attractions_title"></div>
@else
    <div class="content-title heading-main" data-i18n="sightseeing_page.annual_event_title"> </div>
@endif
@if (fieldPropertyValue('sightseeing_spot_contents', $item))
    <div class="swiper slider-sightseeing">
        <div class="swiper-wrapper">
            @foreach ($item['sightseeing_spot_contents'] as $index => $val)
                <div class="swiper-slide">
                    <div class="image-aspect">
                        <img class="pc" src="{!! setImagePreview(fieldPropertyValue('image', $val)) !!}">
                        <img class="sp" src="{!! setImagePreview(fieldPropertyValue('image_sp', $val)) !!}">
                    </div>
                    <div class="title">
                        <p class="content-text subheading-main">
                            <span class="pc">{!! setTextDefault(textLocale('name', $val, $lang)) !!}</span>
                            <span class="sp">{!! setTextDefault(textLocale('name_sp', $val, $lang)) !!}</span>
                        </p>
                        @if (fieldPropertyValue('default_element_type', $item) == SightseeingAroundElementDefault::TOURIST_ATTRACTIONS)
                            <p class="title-content-text">
                                <span class="pc">({!! descSightseeingSpot('mode', 'minute', 'area', $val, $lang) !!})</span>
                                <span class="sp">({!! descSightseeingSpot('mode_sp', 'minute_sp', 'area_sp', $val, $lang) !!})</span>
                            </p>
                        @endif
                    </div>
                    <span class="box-title pc">{!! setTextDefault(textLocale('descriptive', $val, $lang)) !!}</span>
                    <span class="box-title sp">{!! setTextDefault(textLocale('descriptive_sp', $val, $lang)) !!}</span>
                </div>
            @endforeach
        </div>
        <div class="flex items-center center-justify">
            <div class="pagination-custom">
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination flex"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </div>
@endif

@push('styles')
    <style>
        .page-sightseeing .content-one {
            background-image: url({!! setImagePreview(fieldPropertyValue('image', $item)) !!}) !important;
        }

        @media screen and (max-width: 768px) {
            .page-sightseeing .content-one {
                background-image: url({!! setImagePreview(fieldPropertyValue('image_sp', $item)) !!}) !important;
            }
        }
    </style>
@endpush