@php
    use App\Enums\LinkType;
@endphp
@if (count($touristRoutes))
    <div class="model-course" id="model-course">
        <div class="container">
            <ul class="travel-nav__cat" data-aos="fade-up" data-aos-duration="400">
                @foreach ($touristRoutes as $touristRoute)
                    <a class="link-scroll" href="#model-course-{!! fieldPropertyValue('id', $touristRoute) !!}">
                        <li>
                            <div class="image-overlay">
                                <img class="pc" src="{!! setImagePreview(fieldPropertyValue('image', $touristRoute)) !!}">
                                <img class="sp" src="{!! setImagePreview(fieldPropertyValue('image_sp', $touristRoute)) !!}">
                            </div>
                            <font class="text pc">{!! setTextDefault(textLocale('name', $touristRoute, $lang)) !!}</font>
                            <font class="text sp">{!! setTextDefault(textLocale('name_sp', $touristRoute, $lang)) !!}</font>
                        </li>
                    </a>
                @endforeach
            </ul>
            @foreach ($touristRoutes as $touristRoute)
                <div class="slide-content" id="model-course-{!! fieldPropertyValue('id', $touristRoute) !!}" data-aos="fade-up"
                    data-aos-duration="400">
                    <div class="slide-heading">
                        <h2>
                            <span class="pc">{!! setTextDefault(textLocale('name', $touristRoute, $lang)) !!}</span>
                            <span class="sp">{!! setTextDefault(textLocale('name_sp', $touristRoute, $lang)) !!}</span>
                        </h2>
                        <p>
                            <span class="pc">{!! setTextDefault(textLocale('descriptive', $touristRoute, $lang)) !!}</span>
                            <span class="sp">{!! setTextDefault(textLocale('descriptive_sp', $touristRoute, $lang)) !!}</span>
                        </p>
                    </div>
                    @if (fieldPropertyValue('sightseeing_spot_contents', $touristRoute))
                        <div class="swiper-container sightseeing-slide swiper">
                            <div class="swiper-wrapper">
                                @foreach (fieldPropertyValue('sightseeing_spot_contents', $touristRoute) as $sightSpot)
                                    <div class="swiper-slide">
                                        <div class="box-shadow-sp">
                                            <span class="date pc">
                                                {!! fieldPropertyValue('day', $sightSpot) ? '【Day ' . fieldPropertyValue('day', $sightSpot) . '】' : '' !!}{!! fieldPropertyValue('time', $sightSpot) !!}
                                            </span>
                                            <span class="date sp">
                                                {!! fieldPropertyValue('day_sp', $sightSpot) ? '【Day ' . fieldPropertyValue('day_sp', $sightSpot) . '】' : '' !!}{!! fieldPropertyValue('time_sp', $sightSpot) !!}
                                            </span>
                                            <div class="aspect-ratio-100x66 overlay pc">
                                                <img src="{!! setImagePreview(fieldPropertyValue('image', $sightSpot)) !!}" alt="">
                                            </div>
                                            <div class="aspect-ratio-100x66 overlay sp">
                                                <img src="{!! setImagePreview(fieldPropertyValue('image_sp', $sightSpot)) !!}" alt="">
                                            </div>
                                            <h2>
                                                <span class="pc">{!! setTextDefault(textLocale('name', $sightSpot, $lang)) !!}</span>
                                                <span class="sp">{!! setTextDefault(textLocale('name_sp', $sightSpot, $lang)) !!}</span>
                                            </h2>
                                            <p>
                                                <span class="pc">{!! setTextDefault(textLocale('descriptive', $sightSpot, $lang)) !!}</span>
                                                <span class="sp">{!! setTextDefault(textLocale('descriptive_sp', $sightSpot, $lang)) !!}</span>
                                            </p>
                                            @if (fieldPropertyValue('link_type', $sightSpot) == LinkType::THERE_IS_A_LINK)
                                                <a class="show-detail-sightseeing pc" href="{!! fieldPropertyValue('link_url', $sightSpot) !!}"
                                                    target="_blank" data-i18n="sightseeing_page.btn_detail"></a>
                                            @else
                                                <a class="show-detail-sightseeing open-modal pc"
                                                    data-image="{!! setImagePreview(fieldPropertyValue('image', $sightSpot)) !!}"
                                                    data-title="{!! setTextDefault(textLocale('name', $sightSpot, $lang)) !!}"
                                                    data-body="{!! setTextDefault(textLocale('descriptive', $sightSpot, $lang)) !!}"
                                                    data-address="{!! setTextDefault(textLocale('address', $sightSpot, $lang)) !!}"
                                                    data-i18n="sightseeing_page.btn_detail"></a>
                                            @endif
                                            @if (fieldPropertyValue('link_type_sp', $sightSpot) == LinkType::THERE_IS_A_LINK)
                                                <a class="show-detail-sightseeing sp" href="{!! fieldPropertyValue('link_url_sp', $sightSpot) !!}"
                                                    target="_blank" data-i18n="sightseeing_page.btn_detail"></a>
                                            @else
                                                <a class="show-detail-sightseeing open-modal sp"
                                                    data-image-sp="{!! setImagePreview(fieldPropertyValue('image_sp', $sightSpot)) !!}"
                                                    data-title-sp="{!! setTextDefault(textLocale('name_sp', $sightSpot, $lang)) !!}"
                                                    data-body-sp="{!! setTextDefault(textLocale('descriptive_sp', $sightSpot, $lang)) !!}"
                                                    data-address-sp="{!! setTextDefault(textLocale('address_sp', $sightSpot, $lang)) !!}"
                                                    data-i18n="sightseeing_page.btn_detail"></a>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="swiper-pagination swiper-pagination-sightseeing"></div>
                            <div class="swiper-button pc-flex">
                                <div
                                    class="swiper-button-prev-sightseeing swiper-button-prev swiper-button-sightseeing">
                                </div>
                                <div
                                    class="swiper-button-next-sightseeing swiper-button-next swiper-button-sightseeing">
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
@endif