@extends('layouts.previews.ana')

@php
    use App\Enums\ElementType;
    use App\Enums\SightseeingAroundElementDefault;
    use App\Enums\CustomElementType;

    $sightConcept = current(
        array_filter($elements, function ($value) {
            return $value['element_type'] == ElementType::DEFAULT &&
                $value['default_element_type'] == SightseeingAroundElementDefault::CONCEPT &&
                $value['status'];
        }),
    );

@endphp

@section('content')
    <div class="page-sightseeing">
        <div class="banner-block flex center-align relative">
            <div class="image-aspect-ratio-banner">
                <img src="{!! setImagePreview(fieldPropertyValue('sightseeing_transition_image', $basic)) !!}" alt="Restaurants & Bars banner" />
            </div>
            <div class="banner-txt">
                <h2 class="banner-title">{!! setTextDefault(textLocale('sightseeing_transition_title', $basic, $lang), 'SIGHTSEEING') !!}</h2>
                @if ($sightConcept)
                    <h2 class="banner-title">
                        <span class="pc">{!! setTextDefault(textLocale('heading', $sightConcept, $lang)) !!}</span>
                        <span class="sp">{!! setTextDefault(textLocale('heading_sp', $sightConcept, $lang)) !!}</span>
                    </h2>
                @endif
            </div>
        </div>
        @if ($sightConcept)
            <div class="content">
                <div class="container"></div>
                <div class="description" data-aos="fade-up">
                    <span class="pc">{!! setTextDefault(textLocale('body', $sightConcept, $lang)) !!}</span>
                    <span class="sp">{!! setTextDefault(textLocale('body_sp', $sightConcept, $lang)) !!}</span>
                </div>
            </div>
        @endif
        <div class="container" data-aos="fade-up" data-aos-duration="400">
            <div class="travel-nav">
                <a class="link-scroll" href="#model-course" data-i18n="sightseeing_page.model_course.title"></a>
                <a class="link-scroll" href="#sightseeing-spots" data-i18n="sightseeing_page.sightseeing_spots.title"></a>
            </div>
        </div>
        @php
            $touristRoutes = array_filter($elements, function ($value) {
                return $value['element_type'] == ElementType::DEFAULT &&
                    $value['default_element_type'] == SightseeingAroundElementDefault::TOURIST_ROUTE &&
                    $value['status'];
            });
        @endphp
        @include('preview.ana.defaults.roomSightseeing.modelCourse')
        @include('preview.ana.defaults.roomSightseeing.sightseeingSpots')
        @foreach ($elements as $index => $item)
            @if (fieldPropertyValue('status', $item))
                @if (fieldPropertyValue('element_type', $item) == ElementType::DEFAULT)
                    @switch(fieldPropertyValue('default_element_type', $item))
                        @case(SightseeingAroundElementDefault::PLAN)
                            @php
                                $planContent = $item;
                            @endphp
                        @break

                        @case(SightseeingAroundElementDefault::CV_NEXT)
                            @php
                                $reserveContent = $item;
                            @endphp
                        @break
                    @endswitch
                @endif
            @endif

            @if (textLocale('status', $item, $lang) &&
                    fieldPropertyValue('custom_element_type', $item) >= CustomElementType::ONE_COLUMN &&
                    fieldPropertyValue('custom_element_type', $item) <= CustomElementType::SIDE_CONTENT_V2)
                <div class="container">
                    @include('preview.customs.customContent')
                </div>
            @endif
        @endforeach
        @if (!empty($planContent) && !empty($reserveContent))
            @include('preview.ana.commons.plan')
        @endif

        <div class="modal" id="modal-sightseeing">
            <div class="modal-content">
                <div class="modal-wrapper-inner">
                    <div class="wrapper-image">
                        <img class="pc" src="" alt="">
                        <img class="sp" src="" alt="">
                    </div>
                    <div class="wrapper-content">
                        <h2 class="title">
                            <span class="pc"></span>
                            <span class="sp"></span>
                        </h2>
                        <p class="body">
                            <span class="pc"></span>
                            <span class="sp"></span>
                        </p>
                        <table class="detail">
                            <tr class="address">
                                <td data-i18n="sightseeing_page.modal.address"></td>
                                <td>
                                    <span class="pc">大分県別府市鉄輪779</span>
                                    <span class="sp">大分県別府市鉄輪779</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="modal-close">CLOSE</div>
            </div>
        </div>
    </div>
@endsection