@extends('layouts.previews.default')

@php
    use App\Enums\ElementType;
    use App\Enums\TopElementDefault;
    use App\Enums\CustomElementType;
    use App\Enums\NoteType;
    use App\Enums\Status;
    use App\Enums\NewsElementDefault;
    use App\Enums\Boolean;
    use App\Enums\LinkType;
    use App\Enums\MultiLangMode;
    use App\Enums\FvType;

    $listImagePc = [];
    $listImageSp = [];
    $isSlidePc = false;
    for ($i = 1; $i <= 3; $i++) {
        if (!empty($project->topPage['slide_image_pc' . $i])) {
            $listImagePc[] = $project->topPage['slide_image_pc' . $i];
        }
        if (!empty($project->topPage['slide_image_sp' . $i])) {
            $listImageSp[] = $project->topPage['slide_image_sp' . $i];
        }
    }
    if (count($listImageSp) == 0) {
        $isSlidePc = true;
        $listImageSp = $listImagePc;
    }
@endphp

@section('content')
    <div class="top__page master__body" id="top__page">
        <div class="home__banner relative">
            @if (fieldPropertyValue('fv_type', $project->topPage) == FvType::IMAGE)
                @if (count($listImagePc) <= 1)
                    <div class="mv-slide-single img_wrap pc">
                        <img src="{!! setImageRootBannerTop($listImagePc) !!}" alt="">
                    </div>
                @else
                    <div class="mv-content__slide pc">
                        <div>
                            <ul class="mv-slide container pc"
                                data-delayed-slide="{{ getDurationFv('delayed_slide', $project->topPage) }}"
                                style="--transition-duration: {{ getDurationFv('delayed_slide', $project->topPage) ? getDurationFv('delayed_slide', $project->topPage) : 5000 }}ms">
                                @foreach ($listImagePc as $image)
                                    <li class="mv-slide__item">
                                        <div class="image-slide img_wrap">
                                            <img src="{!! setImagePreview($image) !!}" alt="">
                                        </div>
                                    </li>
                                @endforeach
                                <div class="progess-bar">
                                    <div class="progess-bar__inner" id="progess-bar__inner"></div>
                                </div>
                                <div class="name-silde">
                                    @php
                                        $firtNameSlide = true;
                                    @endphp
                                    @for ($i = 1; $i <= 3; $i++)
                                        @if (!empty($project->topPage['slide_image_pc' . $i]))
                                            <p class="name-slide__item {!! $firtNameSlide ? 'active' : '' !!}">
                                                {!! setTextDefault($project->topPage['slide_name_pc' . $i], '') !!}
                                            </p>
                                            @php
                                                $firtNameSlide = false;
                                            @endphp
                                        @endif
                                    @endfor
                                </div>
                            </ul>
                        </div>
                    </div>
                @endif
            @else
                <div class="mv-movie img_wrap pc">
                    {!! fieldPropertyValue('movie_tag', $project->topPage) !!}
                </div>
            @endif
            @if (fieldPropertyValue('fv_type_sp', $project->topPage) == FvType::IMAGE)
                @if (count($listImageSp) == 1)
                    <div class="mv-slide-single img_wrap sp">
                        <img src="{!! setImageRootBannerTop($listImageSp) !!}" alt="">
                    </div>
                @else
                    <div class="mv-content__slide sp">
                        <div>
                            <ul class="mv-slide container sp"
                                data-delayed-slide="{{ getDurationFv('delayed_slide_sp', $project->topPage) }}"
                                style="--transition-duration: {{ getDurationFv('delayed_slide_sp', $project->topPage) ? getDurationFv('delayed_slide_sp', $project->topPage) : 5000 }}ms">
                                @foreach ($listImageSp as $image)
                                    <li class="mv-slide__item">
                                        <div class="image-slide img_wrap">
                                            <img src="{!! setImagePreview($image) !!}" alt="">
                                        </div>
                                    </li>
                                @endforeach
                                <div class="progess-bar">
                                    <div class="progess-bar__inner" id="progess-bar__inner"></div>
                                </div>
                                <div class="name-silde">
                                    @php
                                        $firtNameSlide = true;
                                    @endphp
                                    @for ($i = 1; $i <= 3; $i++)
                                        @if (
                                            (!$isSlidePc && !empty($project->topPage['slide_image_sp' . $i])) ||
                                                ($isSlidePc && !empty($project->topPage['slide_image_pc' . $i])))
                                            <p class="name-slide__item {!! $firtNameSlide ? 'active' : '' !!}">
                                                @if (!empty($project->topPage['slide_name_sp' . $i]))
                                                    {!! setTextDefault($project->topPage['slide_name_sp' . $i], '') !!}
                                                @else
                                                    {!! setTextDefault($project->topPage['slide_name_pc' . $i], '') !!}
                                                @endif
                                            </p>
                                            @php
                                                $firtNameSlide = false;
                                            @endphp
                                        @endif
                                    @endfor
                                </div>
                            </ul>
                        </div>
                    </div>
                @endif
            @else
                <div class="mv-movie img_wrap sp">
                    {!! fieldPropertyValue('movie_tag_sp', $project->topPage) !!}
                </div>
            @endif
            <div class="overlay"></div>
            <div class="banner_text flex center__align pc_flex">
                @if (fieldPropertyValue('note_type', $project->topPage) == NoteType::THERE_IS_TEXT)
                    <div class="container">
                        <h1 class="relative">
                            {!! setTextDefault(textLocale('note', $project->topPage, $lang)) !!}
                        </h1>
                    </div>
                @endif
            </div>
            <div class="banner_text flex center__align sp_flex">
                @if (fieldPropertyValue('note_type_sp', $project->topPage) == NoteType::THERE_IS_TEXT)
                    <div class="container">
                        <h1 class="relative">
                            {!! setTextDefault(textLocale('note_sp', $project->topPage, $lang)) !!}
                        </h1>
                    </div>
                @endif
            </div>
        </div>
        <div class="search_box" id="search_box_index" data-aos="fade-up" type-search="{!! fieldPropertyValue('reservation_engine', $basic) !!}"
            data-hotel="{!! fieldPropertyValue('hotel_id', $basic) !!}" data-hotel-domain="{!! setTextDefault($basic['hotel_domain'] ?? null) !!}" data-route-search="{{ routeSearch($lang, $project->id) }}">
            <div class="container">
                <div class="search_box__body">
                    <div class="search_box__search_text sp" data-i18n="search_modal.search_txt_sp"></div>
                    <div class="search_box__left">
                        <div class="search_box__search search_border pc_flex">
                            <div class="search_box__svg">
                                <svg id="検索用の虫眼鏡アイコン素材_その3_1_" data-name="検索用の虫眼鏡アイコン素材 その3 (1)"
                                    xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 30 30">
                                    <path id="Path_891" data-name="Path 891"
                                        d="M29.114,24.834l-5-5a14.54,14.54,0,0,1-.9,1.239l-1.845-1.845c.08-.1.158-.208.235-.315.052-.072.1-.144.152-.216.009-.011.016-.023.024-.035.05-.073.1-.148.149-.222.105-.161.207-.323.3-.489a11.914,11.914,0,0,0,0-12.038,12.026,12.026,0,0,0-4.28-4.28,11.914,11.914,0,0,0-12.038,0c-.073.042-.144.086-.216.131-.092.056-.183.114-.273.173-.16.1-.318.213-.473.325-.052.037-.1.075-.154.113L4.635,2.5l-.149.118c-.1.078-.193.157-.287.238A11.949,11.949,0,0,0,2.851,4.2c-.081.094-.16.189-.238.287L2.5,4.635,2.374,4.8c-.038.051-.076.1-.113.154-.112.155-.22.313-.325.473-.059.09-.117.182-.173.273-.045.072-.088.143-.131.216a11.914,11.914,0,0,0,0,12.038,12.026,12.026,0,0,0,4.28,4.28,11.913,11.913,0,0,0,12.038,0q.166-.1.328-.2c.054-.034.108-.068.162-.1.074-.048.149-.1.222-.149l.035-.024c.073-.049.144-.1.216-.152.106-.077.211-.156.315-.235l1.845,1.845a14.582,14.582,0,0,1-1.239.9l5,5a3.026,3.026,0,0,0,4.279-4.28ZM16.681,18.942c-.024.017-.048.034-.073.049s-.056.038-.085.056l-.078.05-.1.062-.1.058c-.068.041-.137.08-.206.118l-.016.009c-.056.031-.113.061-.17.091-.022.013-.045.025-.068.036l-.137.068q-.131.065-.265.124a8.465,8.465,0,0,1-6.911,0,8.517,8.517,0,0,1-4.28-4.28,8.444,8.444,0,0,1,.448-7.773l.058-.1c.054-.089.11-.177.169-.264.032-.049.065-.1.1-.146s.083-.12.127-.179c.067-.091.135-.181.2-.269A8.565,8.565,0,0,1,6.66,5.3c.088-.07.178-.138.269-.2q.088-.066.179-.127c.048-.035.1-.067.146-.1.086-.059.175-.115.264-.169l.1-.058A8.47,8.47,0,0,1,19.666,15.386q-.06.134-.124.265c-.022.046-.045.092-.068.137-.011.023-.023.046-.036.068-.029.057-.06.114-.091.17l-.009.016c-.038.069-.078.137-.118.206l-.058.1q-.03.051-.062.1c-.016.026-.033.052-.05.078s-.036.057-.056.085-.032.049-.049.073l-.05.073a.362.362,0,0,1-.03.043c-.019.029-.04.058-.061.086a8.024,8.024,0,0,1-.5.63c-.032.037-.065.073-.1.11s-.085.093-.128.138-.1.105-.154.157-.1.1-.157.154-.092.086-.138.128-.073.066-.11.1a8.027,8.027,0,0,1-.63.5l-.086.061a.349.349,0,0,1-.043.03Z">
                                    </path>
                                </svg>
                            </div>
                            <div class="search_box__search_text" data-i18n="search_modal.search_txt"></div>
                        </div>
                        <div class="search_box__date_time search_border">
                            <div class="search_box__text pc" data-i18n="search_modal.check_in"></div>
                            <div class="search_box__time flex">
                                <div class="search_box__text sp" data-i18n="search_modal.check_in_sp"></div>
                                <input class="input_date" id="datepicker-index" type="text" name="dates">
                                <label class="calendar_img" for="datepicker-index"><img src="https://assets.micado-rayout.jp/img/common/datetime.svg"
                                        alt="calendar_img"></label>
                            </div>
                        </div>
                        @if (showSearchRoom(fieldPropertyValue('reservation_engine', $basic)))
                            <div
                                class="search_box__select search_border pr-sp-15 {{ !showSearchPeople(fieldPropertyValue('reservation_engine', $basic)) ? 'with-sp-100' : '' }}">
                                <div class="search_box__text pc" data-i18n="search_modal.rooms"></div>
                                <div class="search_box__text sp" data-i18n="search_modal.rooms_sp"></div>
                                <div class="search_box__option">
                                    <select id="numOfRoom" name="numRoom" onchange="changeNumOfRoom('search_box_index')">
                                        @for ($i = 1; $i <= (fieldPropertyValue('max_room', $basic) ?? 10); $i++)
                                            <option value="{{ $i }}"
                                                data-i18n="search_modal.rooms_option.rooms_option_{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">
                                            </option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                        @endif
                        @if (showSearchPeople(fieldPropertyValue('reservation_engine', $basic)))
                            <div
                                class="search_box__select search_border pl-sp-15 {{ !showSearchRoom(fieldPropertyValue('reservation_engine', $basic)) ? 'with-sp-100' : '' }}">
                                <div class="search_box__text pc" data-i18n="search_modal.people"></div>
                                <div class="search_box__text sp" data-i18n="search_modal.people_sp"></div>
                                <div class="search_box__option">
                                    <select id="numOfPeople" name="numPeople">
                                        @for ($i = 1; $i <= (fieldPropertyValue('max_people', $basic) ?? 10); $i++)
                                            <option value="{{ $i }}"
                                                data-i18n="search_modal.people_option.people_option_{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">
                                            </option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="search_box__right">
                        <div class="couple__button_purple search_box__button flex center__align center__justify flex button-cv"
                            data-index="1">
                            <svg class="pc" xmlns="http://www.w3.org/2000/svg" width="17.355" height="17.355"
                                viewbox="0 0 17.355 17.355">
                                <path id="Path_925" data-name="Path 925"
                                    d="M16.843,14.367l-2.893-2.893a8.412,8.412,0,0,1-.522.717L12.36,11.123c.046-.06.092-.121.136-.182.03-.042.06-.083.088-.125l.014-.02c.029-.043.058-.086.086-.129.061-.093.12-.187.176-.283a6.892,6.892,0,0,0,0-6.964A6.957,6.957,0,0,0,10.384.944a6.892,6.892,0,0,0-6.964,0l-.125.076c-.053.033-.106.066-.158.1-.093.061-.184.123-.274.188l-.089.066-.093.071L2.6,1.512c-.056.045-.112.091-.166.138a6.913,6.913,0,0,0-.78.78c-.047.055-.093.11-.138.166l-.068.086-.071.093-.066.089c-.065.09-.128.181-.188.274-.034.052-.068.105-.1.158s-.051.083-.076.125a6.892,6.892,0,0,0,0,6.964A6.957,6.957,0,0,0,3.42,12.86a6.892,6.892,0,0,0,6.964,0q.1-.056.19-.116l.094-.06L10.8,12.6l.02-.014c.042-.029.084-.058.125-.088.062-.045.122-.09.182-.136l1.067,1.067a8.436,8.436,0,0,1-.717.522l2.893,2.893a1.751,1.751,0,0,0,2.476-2.476ZM9.65,10.958l-.043.029-.049.033-.045.029-.059.036-.055.034-.119.069-.009.005-.1.053-.04.021-.079.04q-.076.038-.153.072a4.9,4.9,0,0,1-4,0A4.927,4.927,0,0,1,2.427,8.9a4.885,4.885,0,0,1,.259-4.5l.033-.055c.031-.052.064-.1.1-.153.019-.029.037-.057.057-.085s.048-.07.074-.1c.038-.053.078-.1.119-.156a4.955,4.955,0,0,1,.786-.786c.051-.041.1-.08.156-.119q.051-.038.1-.074L4.2,2.817c.05-.034.1-.067.153-.1L4.4,2.686A4.9,4.9,0,0,1,11.377,8.9q-.035.077-.072.153l-.04.079c-.007.013-.014.027-.021.04-.017.033-.035.066-.053.1l-.005.009c-.022.04-.045.08-.069.119l-.033.055-.036.059-.029.045c-.011.017-.021.033-.033.049s-.019.029-.029.043l-.029.042a.209.209,0,0,1-.017.025l-.035.05a4.642,4.642,0,0,1-.291.365l-.057.064c-.025.027-.049.054-.074.08l-.089.091-.091.089-.08.074-.064.057a4.643,4.643,0,0,1-.365.291l-.05.035-.025.017Z"
                                    transform="translate(0)" fill="#fff"></path>
                            </svg><span data-i18n="search_modal.search_btn"></span>
                        </div>
                        <div class="search_box__detail">
                            <a class="search_box__desc" href="{!! textLocale('cv_url2', $basic, $lang) ?? '#' !!}"
                                data-i18n="search_modal.search_plan_list"></a>
                            @if (fieldPropertyValue('hotel_link_type', $basic) == LinkType::THERE_IS_A_LINK)
                                <a class="search_box__desc pc" href="{!! fieldPropertyValue('hotel_link_url', $basic) !!}"
                                    data-i18n="search_modal.reservation_confirmation"></a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @php
            $viewIG = false;
        @endphp
        @foreach ($elements as $item)
            @if (fieldPropertyValue('status', $item))
                @if (fieldPropertyValue('element_type', $item) == ElementType::DEFAULT)
                    @switch(fieldPropertyValue('default_element_type', $item))
                        @case(TopElementDefault::PICKUP)
                            @include('preview.default.defaults.tops.pickup')
                        @break

                        @case(TopElementDefault::CONCEPT)
                            @include('preview.default.defaults.tops.concept')
                        @break

                        @case(TopElementDefault::CHILD_PAGE_TRANSITION)
                            @include('preview.default.defaults.tops.childPageTransition')
                        @break

                        @case(TopElementDefault::ROOM)
                            @include('preview.default.defaults.tops.room')
                        @break

                        @case(TopElementDefault::PLAN)
                            @include('preview.default.commons.plan')
                        @break

                        @case(TopElementDefault::RESTAURANT)
                            @include('preview.default.defaults.tops.restaurant')
                        @break

                        @case(TopElementDefault::OTHER_FACILITY)
                            @include('preview.default.defaults.tops.facility')
                        @break

                        @case(TopElementDefault::FOUR_SEASONS)
                            @if (!$viewIG)
                                @include('preview.default.defaults.tops.fourSeason')
                            @endif
                            @php
                                $viewIG = true;
                            @endphp
                        @break

                        @case(TopElementDefault::INSTAGRAM)
                            @if (!$viewIG)
                                @include('preview.default.defaults.tops.fourSeason')
                            @endif
                            @php
                                $viewIG = true;
                            @endphp
                        @break

                        @case(TopElementDefault::CV_NEXT)
                            @php
                                $reserve = $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_child" data-aos="fade-in">
                    @include('preview.customs.customContent')
                </div>
            @endif
        @endforeach
        @if ($project->show_news && $project->noticePage)
            @php
                $noticePage = $project->noticePage->noticeElements
                    ->filter(function ($val) use ($item) {
                        return $val->element_type == ElementType::DEFAULT &&
                            $val->default_element_type == NewsElementDefault::NEW_LIST &&
                            $val->status == Boolean::TRUE;
                    })
                    ->first();
            @endphp
            @if ($noticePage && $notices)
                <div class="news_slide" data-aos="fade-in">
                    <div class="container relative">
                        <div class="text_title_EN flex center__justify pc_flex" {!! setStyle(['color' => $project->point_color]) !!}>News
                        </div>
                        <div class="flex center__justify sp">
                            <a class="text_title_EN" {!! setStyle(['color' => $project->point_color]) !!} href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->news_url) !!}">INFORMATION
                            </a>
                        </div>
                        @if ($lang == MultiLangMode::DEFAULT)
                            <div class="text_title_JP flex center__justify pc_flex">お知らせ</div>
                        @endif
                        @if ($lang == MultiLangMode::CHINESE_SIMPLIFIED)
                            <div class="text_title_JP flex center__justify pc_flex">注意</div>
                        @endif
                        @if ($lang == MultiLangMode::CHINESE_TRADITIONAL)
                            <div class="text_title_JP flex center__justify pc_flex">注意</div>
                        @endif
                        <a class="news_slide__link pc_flex" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->news_url) !!}" data-i18n="news_btn">
                            ></a>
                        <div class="swiper-button sp_flex">
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>
                        <div class="news_slide_swiper">
                            <div class="swiper-wrapper flex">
                                                                @foreach ($notices[$lang] as $notice)
                                    @if ($ind < 10)
                                                                                <div class="news_slide_item swiper-slide">
                                            <a href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->news_url) .
                                                '/detail?id=' .
                                                fieldPropertyValue('id', $notice) !!}">
                                                <div class="img_wrap">
                                                    <img class="pc" src="{!! setImagePreview(fieldPropertyValue('imgsrc', $notice)) !!}">
                                                    <img class="sp" src="{!! setImagePreview(fieldPropertyValue('img_sp', $notice)) !!}">
                                                </div>
                                                <div class="slide_item_txt">
                                                    <div class="txt_date">
                                                        {!! fieldPropertyValue('date', $notice) !!}
                                                    </div>
                                                    <div class="txt_desc pc">
                                                        {!! setTextDefault(fieldPropertyValue('title', $notice)) !!}
                                                    </div>
                                                    <div class="txt_desc sp">
                                                        {!! setTextDefault(fieldPropertyValue('title_sp', $notice)) !!}
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        @endif
        @include('preview.default.commons.allContaintSP')
        @if (!empty($reserve))
            @include('preview.default.commons.reserve')
        @endif
    </div>
@endsection