@php
    use App\Enums\ElementTarget;
    use App\Enums\MultiLangMode;
    use App\Enums\OptionManagementHeader;
    use App\Enums\LanguageSetting;
    use App\Enums\LinkType;
    use App\Enums\LinkDestinationType;
@endphp
<div class="container flex between-justify center-align">
    <div class="header-logo flex center-align">
        <a class="header-logo__img" href="{{ setUrl($project->id, $domainPublish ?? false, $lang) }}">
            <img src="{{ setImagePreview(fieldPropertyValue('logo', $basic)) }}" alt="">
        </a>
        @if ($basic['show_facility_name'])
            <a class="header-logo__txt header-white__txt"
                href="{{ setUrl($project->id, $domainPublish ?? false, $lang) }}">
                {{ setTextDefault(textLocale('facility_name', $basic, $lang)) }}
            </a>
        @endif
    </div>
    @if ($project->multi_lang_mode)
        <div class="header-change-language pc-flex center-align">
            <div class="change-language__item {!! $lang == MultiLangMode::DEFAULT ? 'active' : '' !!}" onclick="changLanguage({!! MultiLangMode::DEFAULT !!})">
                JP</div>
            <span>|</span>
            @if ($project->multi_lang_mode)
                @foreach ($project->multi_lang_mode as $langMode)
                    <div class="change-language__item {!! $lang == $langMode ? 'active' : '' !!}"
                        onclick="changLanguage({!! $langMode !!})">
                        {!! MultiLangMode::getLangHtml($langMode) !!}</div>
                    @if (!$loop->last)
                        <span>|</span>
                    @endif
                @endforeach
            @endif
        </div>
    @endif
    <nav class="header-menu flex center-align">
        @if (setTextDefault(fieldPropertyValue('cv_text1_en', $basic)))
            <div class="header-menu__btn center-align btn-search pc-flex show-search-form hover-opacity">
                {!! setTextDefault(fieldPropertyValue('cv_text1_en', $basic)) !!}</div>
        @else
            <div class="header-menu__btn center-align btn-search pc-flex show-search-form hover-opacity">Book now</div>
        @endif

        @if ($project->show_plan)
            <a class="header-menu__btn center-align btn-plan-list pc-flex button-cv" target="_blank"
                href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->plan_url) !!}">Plan list</a>
        @endif
        <div class="header-menu__btn center-align flex btn-open-menu hover-opacity handle-click-menu">Menu</div>
    </nav>
</div>
<div class="header-toggle">
    <div class="container flex between-justify">
        <div class="header-toggle__left flex">
            <nav class="header-toggle__page flex col">
                <a class="page-item" href="{!! setUrl($project->id, $domainPublish ?? false, $lang) !!}">
                    <span class="page-item__en">{!! setTextDefault(textLocale('top_display_text', $basic, $lang)) !!}</span>
                </a>
                @if ($project->show_room)
                    <a class="page-item" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->room_url) !!}">
                        <span class="page-item__en">{!! setTextDefault(textLocale('room_display_text', $basic, $lang)) !!}</span>
                    </a>
                @endif
                @if ($project->show_food_list)
                    <a class="page-item" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->food_list_url) !!}">
                        <span class="page-item__en">{!! setTextDefault(textLocale('cooking_display_text', $basic, $lang)) !!}</span>
                    </a>
                @endif
                @if ($project->show_facility)
                    <a class="page-item" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->facility_url) !!}">
                        <span class="page-item__en">{!! setTextDefault(textLocale('facility_display_text', $basic, $lang)) !!}</span>
                    </a>
                @endif
                @if ($project->show_sightseeing)
                    <a class="page-item" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->sightseeing_url) !!}">
                        <span class="page-item__en">{!! setTextDefault(textLocale('sightseeing_display_text', $basic, $lang)) !!}</span>
                    </a>
                @endif
                @if ($project->show_access)
                    <a class="page-item" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->access_url) !!}">
                        <span class="page-item__en">{!! setTextDefault(textLocale('access_display_text', $basic, $lang)) !!}</span>
                    </a>
                @endif
                @if ($project->show_plan)
                    <a class="page-item" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->plan_url) !!}">
                        <span class="page-item__en">{!! setTextDefault(textLocale('plan_display_text', $basic, $lang)) !!}</span>
                    </a>
                @endif
                @if (!empty($basic['additional_link_display_text1']))
                    <a class="page-item" href="{!! setTextDefault(fieldPropertyValue('additional_link_url1', $basic)) !!}">
                        <span class="page-item__en">{!! setTextDefault(textLocale('additional_link_display_text1', $basic, $lang)) !!}</span>
                    </a>
                @endif
                @if (!empty($basic['additional_link_display_text2']))
                    <a class="page-item" href="{!! setTextDefault(fieldPropertyValue('additional_link_url2', $basic)) !!}">
                        <span class="page-item__en">{!! setTextDefault(textLocale('additional_link_display_text2', $basic, $lang)) !!}</span>
                    </a>
                @endif
                @if (!empty($basic['additional_link_display_text3']))
                    <a class="page-item" href="{!! setTextDefault(fieldPropertyValue('additional_link_url3', $basic)) !!}">
                        <span class="page-item__en">{!! setTextDefault(textLocale('additional_link_display_text3', $basic, $lang)) !!}</span>
                    </a>
                @endif
                @foreach ($project->optionManagements as $optionManagement)
                    @if (fieldPropertyValue('is_header', $optionManagement) == OptionManagementHeader::ADD &&
                            fieldPropertyValue('is_publish', $optionManagement) == 1)
                        @if (fieldPropertyValue('is_page', $optionManagement) == 1 &&
                                !empty($project[LinkDestinationType::getLinkProject(fieldPropertyValue('target_page', $optionManagement))]))
                            <a class="page-item" href="{!! setUrl(
                                $project->id,
                                $domainPublish ?? false,
                                $lang,
                                $project[LinkDestinationType::getLinkProject(fieldPropertyValue('target_page', $optionManagement))] .
                                    '/' .
                                    fieldPropertyValue('url', $optionManagement),
                            ) !!}">
                                <span class="page-item__en">
                                    {!! setTextDefault(textLocale('page_name', $optionManagement, $lang)) !!}
                                </span>
                            </a>
                        @else
                            <a class="page-item" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, fieldPropertyValue('url', $optionManagement)) !!}">
                                <span class="page-item__en">
                                    {!! setTextDefault(textLocale('page_name', $optionManagement, $lang)) !!}
                                </span>
                            </a>
                        @endif
                    @endif
                @endforeach

            </nav>
            <nav class="header-toggle__page-child flex col">
                @if ($project->show_terms_of_use)
                    <a class="page-item" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->terms_of_use_url) !!}">
                        <span class="page-item__en">{!! setTextDefault(textLocale('terms_of_use_display_text', $basic, $lang)) !!}</span>
                    </a>
                @endif
                @if ($project->show_accommodation_agreement)
                    <a class="page-item" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->accommodation_agreement_url) !!}">
                        <span class="page-item__en">{!! setTextDefault(textLocale('accommodation_agreement_display_text', $basic, $lang)) !!}</span>
                    </a>
                @endif
                @if ($project->show_privacy_policy)
                    <a class="page-item" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->privacy_policy_url) !!}">
                        <span class="page-item__en">{!! setTextDefault(textLocale('privacy_policy_display_text', $basic, $lang)) !!}</span>
                    </a>
                @endif
                @if ($project->show_commercial_law)
                    <a class="page-item" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->commercial_law_url) !!}">
                        <span class="page-item__en">{!! setTextDefault(textLocale('commercial_law_display_text', $basic, $lang)) !!}</span>
                    </a>
                @endif
                @if (!empty($basic['about_display_text']))
                    <a class="page-item" href="{!! textLocale('about_url', $basic, $lang) ?? '#' !!}">
                        <span class="page-item__en">{!! setTextDefault(textLocale('about_display_text', $basic, $lang)) !!}</span>
                    </a>
                @endif
                @if (!empty($basic['additional_link_footer_display_text']))
                    <a class="page-item" href="{!! textLocale('additional_link_footer_url', $basic, $lang) ?? '#' !!}">
                        <span class="page-item__en">{!! setTextDefault(textLocale('additional_link_footer_display_text', $basic, $lang)) !!}</span>
                    </a>
                @endif
                @if ($project->show_contact)
                    <a class="page-item" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->contact_url) !!}">
                        <span class="page-item__en">{!! config('translate.' . $lang . '.basic.contact') !!}</span>
                    </a>
                @endif

                <ul class="page-media">
                    @if (
                        !empty($basic['twitter_link_type']) &&
                            $basic['twitter_link_type'] == LinkType::THERE_IS_A_LINK &&
                            !empty($basic['twitter_link_url']))
                        <a class="page-media__item" href="{{ $basic['twitter_link_url'] ?? '#' }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="22.681" height="18.146"
                                viewbox="0 0 22.681 18.146">
                                <path id="icons8-twitter"
                                    d="M24.681,4a14.922,14.922,0,0,1-3.7,1.447c-.031.008-.056.018-.085.026A5.1,5.1,0,0,0,12.207,9.1c0,.149-.012.422,0,.567A11.21,11.21,0,0,1,3.435,5.133a6.906,6.906,0,0,0-.324,2.3c0,1.589,1.242,3.149,3.175,4.117a4.648,4.648,0,0,1-1.157.158,3.046,3.046,0,0,1-1.995-.7v.058c0,2.221,2.357,3.732,4.452,4.153a4.063,4.063,0,0,1-1.7.276c-.295,0-1.338-.135-1.617-.187.583,1.82,2.685,2.843,4.689,2.879C7.39,19.42,6.3,19.876,3.093,19.876H2a13.746,13.746,0,0,0,7.2,2.269c8.426,0,13.215-6.422,13.215-12.476,0-.1,0-.3-.006-.507,0-.02.006-.04.006-.06s-.009-.06-.009-.091c0-.154-.007-.3-.01-.373a9.319,9.319,0,0,0,2.287-2.371,9.152,9.152,0,0,1-2.631.721A6.869,6.869,0,0,0,24.681,4Z"
                                    transform="translate(-2 -3.999)" fill="#fff"></path>
                            </svg>
                        </a>
                    @endif
                    @if (
                        !empty($basic['facebook_link_type']) &&
                            $basic['facebook_link_type'] == LinkType::THERE_IS_A_LINK &&
                            !empty($basic['facebook_link_url']))
                        <a class="page-media__item" href="{{ $basic['facebook_link_url'] ?? '#' }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="22.681" height="22.564"
                                viewbox="0 0 22.681 22.564">
                                <path id="icons8-facebook"
                                    d="M13.341,2a11.334,11.334,0,0,0-1.7,22.541V16.346H8.84V13.365h2.806V11.381c0-3.284,1.6-4.726,4.33-4.726A15.821,15.821,0,0,1,18.3,6.8V9.4H16.439c-1.159,0-1.564,1.1-1.564,2.337v1.63h3.4l-.46,2.981H14.876v8.219A11.334,11.334,0,0,0,13.341,2Z"
                                    transform="translate(-2 -2)" fill="#fff"></path>
                            </svg>
                        </a>
                    @endif
                    @if (!empty($instagramFollowUrl))
                        <a class="page-media__item" href="{{ $instagramFollowUrl }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20.413" height="20.413"
                                viewbox="0 0 20.413 20.413">
                                <path id="icons8-instagram"
                                    d="M8.67,3A5.671,5.671,0,0,0,3,8.67v9.073a5.671,5.671,0,0,0,5.67,5.67h9.072a5.671,5.671,0,0,0,5.67-5.67V8.67A5.671,5.671,0,0,0,17.743,3ZM20.011,5.268A1.134,1.134,0,1,1,18.877,6.4,1.134,1.134,0,0,1,20.011,5.268Zm-6.8,2.268a5.67,5.67,0,1,1-5.67,5.67A5.671,5.671,0,0,1,13.207,7.536Zm0,2.268a3.4,3.4,0,1,0,3.4,3.4,3.4,3.4,0,0,0-3.4-3.4Z"
                                    transform="translate(-3 -3)" fill="#fff"></path>
                            </svg>
                        </a>
                    @endif
                    {{-- <a class="page-media__item" href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20.413" height="22.682"
                            viewbox="0 0 20.413 22.682">
                            <path id="icons8-youtube"
                                d="M6.039,2,7.716,8.06v2.906H9.169V8.06L10.868,2H9.4L8.794,4.758q-.257,1.208-.33,1.719H8.42q-.107-.716-.33-1.73L7.5,2Zm6.523,2.288a2.159,2.159,0,0,0-1.192.292,1.7,1.7,0,0,0-.669.935,5.541,5.541,0,0,0-.213,1.7v.952a6.087,6.087,0,0,0,.186,1.677,1.629,1.629,0,0,0,.631.93,2.164,2.164,0,0,0,1.223.3,2.15,2.15,0,0,0,1.2-.295,1.649,1.649,0,0,0,.64-.928,5.845,5.845,0,0,0,.2-1.683V7.214a5.747,5.747,0,0,0-.2-1.692,1.714,1.714,0,0,0-.642-.935A2.025,2.025,0,0,0,12.562,4.288Zm2.775.128V9.309a2.3,2.3,0,0,0,.308,1.336,1.108,1.108,0,0,0,.961.427,1.509,1.509,0,0,0,1.411-.908h.031l.128.8h1.154V4.417H17.858v5.2a.72.72,0,0,1-.261.3.645.645,0,0,1-.368.117.333.333,0,0,1-.321-.186,1.463,1.463,0,0,1-.1-.627V4.417ZM12.529,5.3a.44.44,0,0,1,.434.326,3.17,3.17,0,0,1,.122,1.032V8.7a3.209,3.209,0,0,1-.122,1.048.441.441,0,0,1-.432.321.431.431,0,0,1-.427-.321A3.3,3.3,0,0,1,11.986,8.7V6.66a3.18,3.18,0,0,1,.122-1.032A.432.432,0,0,1,12.529,5.3Zm-7.261,6.9A2.275,2.275,0,0,0,3,14.475v7.939a2.275,2.275,0,0,0,2.268,2.268H21.145a2.275,2.275,0,0,0,2.268-2.268V14.475a2.275,2.275,0,0,0-2.268-2.268Zm7.994,2.268h1.2v2.913h.009a1.311,1.311,0,0,1,.461-.509,1.155,1.155,0,0,1,.642-.193.976.976,0,0,1,.693.235,1.424,1.424,0,0,1,.365.758,7.322,7.322,0,0,1,.111,1.453v.875h0a4.175,4.175,0,0,1-.3,1.816.98.98,0,0,1-.928.583,1.288,1.288,0,0,1-.64-.162,1.054,1.054,0,0,1-.434-.443h-.027l-.126.523H13.262Zm-7.442.279H9.508v1H8.272v6.565H7.056V15.757H5.82Zm13.168,1.934a1.736,1.736,0,0,1,.983.235,1.269,1.269,0,0,1,.483.731,5.3,5.3,0,0,1,.14,1.371v.948H18.511v.281a7.26,7.26,0,0,0,.031.8.766.766,0,0,0,.131.388.368.368,0,0,0,.306.122.387.387,0,0,0,.383-.217,1.863,1.863,0,0,0,.113-.72l1.074.062a1.793,1.793,0,0,1,.009.2,1.463,1.463,0,0,1-.421,1.145,1.7,1.7,0,0,1-1.185.379,1.417,1.417,0,0,1-1.291-.578,3.37,3.37,0,0,1-.37-1.785V19.08a3.352,3.352,0,0,1,.383-1.819A1.463,1.463,0,0,1,18.988,16.688Zm-9.852.106h1.247v4.06a1.228,1.228,0,0,0,.082.527.279.279,0,0,0,.27.157.551.551,0,0,0,.312-.1.61.61,0,0,0,.219-.253V16.794h1.247v5.529h-.977l-.106-.678H11.4a1.274,1.274,0,0,1-1.192.769.933.933,0,0,1-.811-.361,1.935,1.935,0,0,1-.264-1.127Zm9.826.735a.361.361,0,0,0-.295.117.753.753,0,0,0-.126.383,7.376,7.376,0,0,0-.031.806v.4h.91v-.4a6.766,6.766,0,0,0-.035-.806.753.753,0,0,0-.131-.388A.361.361,0,0,0,18.961,17.529Zm-3.949.04a.474.474,0,0,0-.332.144.792.792,0,0,0-.217.37v3.139a.552.552,0,0,0,.213.217.58.58,0,0,0,.284.073.382.382,0,0,0,.315-.144,1.018,1.018,0,0,0,.168-.487,7.058,7.058,0,0,0,.049-.948v-.711a9.336,9.336,0,0,0-.04-1,1.169,1.169,0,0,0-.144-.5A.339.339,0,0,0,15.012,17.569Z"
                                transform="translate(-3 -2)" fill="#fff"></path>
                        </svg>
                    </a> --}}
                </ul>
            </nav>
        </div>
        <div class="header-toggle__right">
            <div class="header-toggle__right--func">
                <div class="header-toggle-click handle-click-menu">close</div>
                <div class="header-change-language flex center-align">
                    <div class="change-language__item {!! $lang == MultiLangMode::DEFAULT ? 'active' : '' !!}"
                        onclick="changLanguage({!! MultiLangMode::DEFAULT !!})">
                        JP</div>
                    <span>|</span>
                    @if ($project->multi_lang_mode)
                        @foreach ($project->multi_lang_mode as $langMode)
                            <div class="change-language__item {!! $lang == $langMode ? 'active' : '' !!}"
                                onclick="changLanguage({!! $langMode !!})">
                                {!! MultiLangMode::getLangHtml($langMode) !!}</div>
                            @if (!$loop->last)
                                <span>|</span>
                            @endif
                        @endforeach
                    @endif
                </div>
            </div>
            <div class="search_box_header" id="search_box_index" type-search="{!! fieldPropertyValue('reservation_engine', $basic) !!}"
                data-hotel="{!! fieldPropertyValue('hotel_id', $basic) !!}" data-route-search="{{ routeSearch($lang, $project->id) }}">
                <div class="container">
                    <div class="search_box__body">
                        <div class="search_box__left">
                            <div class="search_box__search search_border">
                                <div class="search_box__search_text">
                                    @if (setTextDefault(fieldPropertyValue('cv_text1_en', $basic)))
                                        <span class="text-en">{!! setTextDefault(fieldPropertyValue('cv_text1_en', $basic)) !!}</span>
                                    @else
                                        <span class="text-en">Book now</span>
                                    @endif
                                    @if ($lang != MultiLangMode::ENGLISH)
                                        <span class="text-ja">{!! setTextDefault(textLocale('cv_text1', $basic, $lang)) !!}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="search_box__date_time search_border">
                                <div class="search_box__text" data-i18n="search_modal.check_in"></div>
                                <div class="search_box__time flex">
                                    <input class="input_date" id="datepicker-index" type="text" name="dates">
                                    <label class="calendar-img" for="datepicker-index">
                                        <svg id="calendar-due" xmlns="http://www.w3.org/2000/svg" width="24"
                                            height="24" viewbox="0 0 24 24">
                                            <path id="Path_9316" data-name="Path 9316" d="M0,0H24V24H0Z"
                                                fill="none"></path>
                                            <path id="Path_9317" data-name="Path 9317"
                                                d="M4,5,4,7A2,2,0,0,1,6,5H18a2,2,0,0,1,2,2V19a2,2,0,0,1-2,2H6a2,2,0,0,1-2-2Z"
                                                fill="none" stroke="#000" stroke-linecap="round"
                                                stroke-linejoin="round" stroke-width="2"></path>
                                            <path id="Path_9318" data-name="Path 9318" d="M16,3V7" fill="none"
                                                stroke="#000" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="2"></path>
                                            <path id="Path_9319" data-name="Path 9319" d="M8,3V7" fill="none"
                                                stroke="#000" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="2"></path>
                                            <path id="Path_9320" data-name="Path 9320" d="M4,11H20" fill="none"
                                                stroke="#000" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="2"></path>
                                        </svg>
                                    </label>
                                </div>
                            </div>
                            @if (showSearchRoom(fieldPropertyValue('reservation_engine', $basic)))
                                <div class="search_box__select search_border pr-sp-15">
                                    <div class="search_box__text" data-i18n="search_modal.rooms"></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">
                                    <div class="search_box__text" data-i18n="search_modal.people"></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 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>
                            @if (!empty($basic['cv_text2']))
                                <a class="couple__button_view flex center-align button-cv" target="_blank"
                                    href="{!! textLocale('cv_url2', $basic, $lang) ?? '#' !!}">
                                    <div class="text-label">{!! setTextDefault(textLocale('cv_text2', $basic, $lang)) !!}</div>
                                    <div class="next-arrow"></div>
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="search-box-fixer relative" id="search-box-fixer">
    <div class="close-search-form close-search-form__btn"></div>
    <div class="search_box" id="search_box" type-search="{!! fieldPropertyValue('reservation_engine', $basic) !!}"
        data-hotel="{!! fieldPropertyValue('hotel_id', $basic) !!}" 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"></div>
                            <input class="input_date" id="datepicker" type="text" name="dates">
                            <label class="calendar-img" for="datepicker"><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">
                            <div class="search_box__text" data-i18n="search_modal.rooms"></div>
                            <div class="search_box__option">
                                <select id="numOfRoom" name="numRoom" onchange="changeNumOfRoom('search_box')">
                                    @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">
                            <div class="search_box__text" data-i18n="search_modal.people"></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="0">
                        <svg 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>
                @if (!empty($basic['cv_text2']))
                    <a class="view-more-plan sp button-cv" target="_blank"
                        href="{!! textLocale('cv_url2', $basic, $lang) ?? '#' !!}">{!! setTextDefault(textLocale('cv_text2', $basic, $lang)) !!}
                    </a>
                @endif
            </div>
        </div>
    </div>
    <div class="search_box__hide">x </div>
</div>
<script>
    const maxRoom = {!! json_encode($basic['max_room'] ?? 10) !!};
    const maxPeople = {!! json_encode($basic['max_people'] ?? 10) !!};

    function changLanguage(elm) {
        let multiLangMode = {!! json_encode(MultiLangMode::toArray()) !!};
        let multiLang = {!! json_encode(MultiLangMode::asSelectArray()) !!};
        let oldLang = {!! $lang !!};
        let isPublish = {!! json_encode($domainPublish ?? false) !!};

        let pathNameList = document.location.pathname.split('/');
        let lang = elm;
        const stringToSlug = (str) => {
            return str
                .trim()
                .toLowerCase()
                .replace(/[\W_]+/g, '-')
                .replace(/^-+|-+$/g, '');
        };

        if (!Object.values(multiLangMode).includes(parseInt(lang))) {
            return;
        }

        if (lang == multiLangMode.DEFAULT) {
            return document.location.pathname = pathNameList.filter(function(item) {
                return item !== stringToSlug(multiLang[oldLang]);
            }).join("/");
        }

        if (oldLang == multiLangMode.DEFAULT) {
            if (isPublish) {
                pathNameList.splice((isPublish == 'domain_own' ? 1 : 3), 0, stringToSlug(multiLang[lang]));
            } else {
                pathNameList.splice(3, 0, stringToSlug(multiLang[lang]));
            }
        } else {
            if (lang == lang == multiLangMode.DEFAULT) {
                pathNameList[isPublish ? 1 : 3] = multiLang[lang];
            } else {
                pathNameList = pathNameList.filter(function(item) {
                    return item !== stringToSlug(multiLang[oldLang]);
                });
                if (isPublish) {
                    pathNameList.splice((isPublish == 'domain_own' ? 1 : 3), 0, stringToSlug(multiLang[lang]));
                } else {
                    pathNameList.splice(3, 0, stringToSlug(multiLang[lang]));
                }
            }
        }
        return document.location.pathname = pathNameList.join("/");

    }
</script>