@php
    use App\Enums\MultiLangMode;
    use App\Enums\ReservationEngine;
@endphp
<section class="reserve-top" id="box-search" type-search="{!! fieldPropertyValue('reservation_engine', $basic) !!}" data-hotel="{!! setTextDefault($basic['hotel_id'] ?? null, 0000000002) !!}"
    data-hotel-domain="{!! setTextDefault($basic['hotel_domain'] ?? null) !!}" data-route-search="{{ routeSearch($lang, $project->id) }}">
    <div class="reserve-heading">
        <h2 class="heading-title">Reserve</h2>
        <p class="heading-desc" data-i18n="search_modal.search_txt"></p>
    </div>
    <div class="search-box" id="booking-form">
        <div class="form">
            <div class="search-icon__form form-content">
                <div class="icon-search">
                    <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>
                    <span data-i18n="search_modal.vacancy_search"></span>
                </div>
            </div>
            <div class="search-date__form form-content date-pc">
                <div class="search_box__date_time">
                    <label for="" data-i18n="search_modal.check_in"></label>
                    <div class="search_box__time">
                        <input class="input_date date_check_in" id="datepicker" type="text" name="date"
                            onchange="handleChangeDateCheckIn(this, 'box-search')" placeholder="YYYY/MM/DD">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20">
                            <g id="カレンダーのフリーアイコン19" transform="translate(-17.867)">
                                <path id="Path_730" data-name="Path 730"
                                    d="M102.14,3.663a.7.7,0,0,0,.7-.7V.7a.7.7,0,0,0-1.409,0V2.958A.7.7,0,0,0,102.14,3.663Z"
                                    transform="translate(-80.052)"></path>
                                <path id="Path_731" data-name="Path 731"
                                    d="M239.528,3.663a.7.7,0,0,0,.7-.7V.7a.7.7,0,0,0-1.409,0V2.958A.7.7,0,0,0,239.528,3.663Z"
                                    transform="translate(-211.661)"></path>
                                <path id="Path_732" data-name="Path 732"
                                    d="M35.048,44.9h-.114v1.059a1.3,1.3,0,0,1-2.6,0V44.9H29.165v1.059a1.3,1.3,0,0,1-2.6,0V44.9H23.4v1.059a1.3,1.3,0,0,1-2.6,0V44.9h-.113a2.721,2.721,0,0,0-2.819,2.61V60.448a2.721,2.721,0,0,0,2.819,2.61H35.048a2.721,2.721,0,0,0,2.819-2.61V47.509A2.721,2.721,0,0,0,35.048,44.9ZM36.713,60.25a1.813,1.813,0,0,1-1.879,1.74H20.9a1.814,1.814,0,0,1-1.88-1.74V50.558H36.713V60.25Z"
                                    transform="translate(0 -43.057)"></path>
                                <path id="Path_733" data-name="Path 733"
                                    d="M376.9,3.663a.7.7,0,0,0,.7-.7V.7A.7.7,0,0,0,376.2.7V2.958A.7.7,0,0,0,376.9,3.663Z"
                                    transform="translate(-343.254)"></path>
                            </g>
                        </svg>
                    </div>
                </div><span class="space-date">-</span>
                <div class="search_box__date_time">
                    <label for="" data-i18n="search_modal.check_out"></label>
                    <div class="search_box__time">
                        <input class="input_date date_check_out" id="datepicker" type="text" name="date"
                            name="date" onchange="handleChangeDateCheckOut(this, 'box-search')"
                            placeholder="YYYY/MM/DD">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20">
                            <g id="カレンダーのフリーアイコン19" transform="translate(-17.867)">
                                <path id="Path_730" data-name="Path 730"
                                    d="M102.14,3.663a.7.7,0,0,0,.7-.7V.7a.7.7,0,0,0-1.409,0V2.958A.7.7,0,0,0,102.14,3.663Z"
                                    transform="translate(-80.052)"></path>
                                <path id="Path_731" data-name="Path 731"
                                    d="M239.528,3.663a.7.7,0,0,0,.7-.7V.7a.7.7,0,0,0-1.409,0V2.958A.7.7,0,0,0,239.528,3.663Z"
                                    transform="translate(-211.661)"></path>
                                <path id="Path_732" data-name="Path 732"
                                    d="M35.048,44.9h-.114v1.059a1.3,1.3,0,0,1-2.6,0V44.9H29.165v1.059a1.3,1.3,0,0,1-2.6,0V44.9H23.4v1.059a1.3,1.3,0,0,1-2.6,0V44.9h-.113a2.721,2.721,0,0,0-2.819,2.61V60.448a2.721,2.721,0,0,0,2.819,2.61H35.048a2.721,2.721,0,0,0,2.819-2.61V47.509A2.721,2.721,0,0,0,35.048,44.9ZM36.713,60.25a1.813,1.813,0,0,1-1.879,1.74H20.9a1.814,1.814,0,0,1-1.88-1.74V50.558H36.713V60.25Z"
                                    transform="translate(0 -43.057)"></path>
                                <path id="Path_733" data-name="Path 733"
                                    d="M376.9,3.663a.7.7,0,0,0,.7-.7V.7A.7.7,0,0,0,376.2.7V2.958A.7.7,0,0,0,376.9,3.663Z"
                                    transform="translate(-343.254)"></path>
                            </g>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="search-date__form form-content date-sp">
                <div class="search_box__date_time">
                    <label for="" data-i18n="search_modal.scheduled_stay_date"></label>
                    <div class="search_box__time">
                        <input class="input_date dates" id="datepicker" type="text" name="dates"
                            placeholder="YYYY/MM/DD-YYYY/MM/DD">
                        <svg id="calendar-due" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                            viewbox="0 0 24 24">
                            <path id="Path_8529" data-name="Path 8529" d="M0,0H24V24H0Z" fill="none"></path>
                            <path id="Path_8530" data-name="Path 8530"
                                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="1"></path>
                            <path id="Path_8531" data-name="Path 8531" d="M16,3V7" fill="none" stroke="#000"
                                stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path>
                            <path id="Path_8532" data-name="Path 8532" d="M8,3V7" fill="none" stroke="#000"
                                stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path>
                            <path id="Path_8533" data-name="Path 8533" d="M4,11H20" fill="none" stroke="#000"
                                stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="search-people__form form-content">
                @if (fieldPropertyValue('reservation_engine', $basic) == ReservationEngine::SYS)
                    <div class="half-content form-select" style="width: 100%; text-align: left">
                        <label for="numberOfRooms" data-i18n="search_modal.rooms_people"></label>
                        <button id="openDialogSelectElement" class="number_of_rooms_people">
                            {!! __('hankyu.from_search.booking_info', ['adults' => 1, 'rooms' => 1], MultiLangMode::getLanguageCode($lang)) !!}
                        </button>
                    </div>
                    <input type="hidden" name="adults" value="1">
                    <input type="hidden" name="child1" value="0">
                    <input type="hidden" name="child2" value="0">
                    <input type="hidden" name="rooms" value="1">
                    <div id="dialog-select-element" title="{!! __('hankyu.from_search.select_number', [], MultiLangMode::getLanguageCode($lang)) !!}">
                        <div class="hotel-modal-content">
                            <div class="hotels-form-number-area">
                                <div class="hotels-form-number-area-item">
                                    <ul class="hotels-list-reservation-item">
                                        <li class="hotels-list-reservation-item-item">
                                            <div class="hotels-list-reservation-item-item-data">
                                                <p class="hotels-list-reservation-item-item-data-main">
                                                    {!! __('hankyu.from_search.people', [], MultiLangMode::getLanguageCode($lang)) !!}
                                                </p>
                                            </div>
                                            <div class="hotels-list-reservation-item-item-number">
                                                <button
                                                    class="hotels-list-reservation-item-item-number-btn hotels-list-reservation-item-item-number-btn-minus js-downBtn"
                                                    type="button">−</button>
                                                <input class="js-number-input adults" type="number" name="dialog-adults"
                                                    value="1" readonly="readonly" min="1"
                                                    max="{{ $basic['max_people'] ?? 10 }}"
                                                    onchange="updateTextRoomPeople('dialog-select-element')">
                                                <button
                                                    class="hotels-list-reservation-item-item-number-btn hotels-list-reservation-item-item-number-btn-plus js-upBtn"
                                                    type="button">＋</button>
                                            </div>
                                        </li>
                                        <li class="hotels-list-reservation-item-item">
                                            <div class="hotels-list-reservation-item-item-data">
                                                <p class="hotels-list-reservation-item-item-data-main">
                                                    {!! __('hankyu.from_search.elementary_school_child', [], MultiLangMode::getLanguageCode($lang)) !!}
                                                </p>
                                            </div>
                                            <div class="hotels-list-reservation-item-item-number">
                                                <button
                                                    class="hotels-list-reservation-item-item-number-btn hotels-list-reservation-item-item-number-btn-minus js-downBtn"
                                                    type="button">−</button>
                                                <input class="js-number-input child1" type="number" name="dialog-child1"
                                                    value="0" readonly="readonly" min="0"
                                                    max="{{ $basic['max_people'] ?? 10 }}"
                                                    onchange="updateTextRoomPeople('dialog-select-element')">
                                                <button
                                                    class="hotels-list-reservation-item-item-number-btn hotels-list-reservation-item-item-number-btn-plus js-upBtn"
                                                    type="button">＋</button>
                                            </div>
                                        </li>
                                        <li class="hotels-list-reservation-item-item">
                                            <div class="hotels-list-reservation-item-item-data">
                                                <p class="hotels-list-reservation-item-item-data-main">
                                                    {!! __('hankyu.from_search.infant_sharing_bed', [], MultiLangMode::getLanguageCode($lang)) !!}
                                                </p>
                                            </div>
                                            <div class="hotels-list-reservation-item-item-number">
                                                <button
                                                    class="hotels-list-reservation-item-item-number-btn hotels-list-reservation-item-item-number-btn-minus js-downBtn"
                                                    type="button">−</button>
                                                <input class="js-number-input child2" type="number" name="dialog-child2"
                                                    value="0" readonly="readonly" min="0"
                                                    max="{{ $basic['max_people'] ?? 10 }}"
                                                    onchange="updateTextRoomPeople('dialog-select-element')">
                                                <button
                                                    class="hotels-list-reservation-item-item-number-btn hotels-list-reservation-item-item-number-btn-plus js-upBtn"
                                                    type="button">＋</button>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="hotels-form-number-area-item">
                                    <ul class="hotels-list-reservation-item">
                                        <li class="hotels-list-reservation-item-item">
                                            <div class="hotels-list-reservation-item-item-data">
                                                <p class="hotels-list-reservation-item-item-data-main">
                                                    {!! __('hankyu.from_search.room', [], MultiLangMode::getLanguageCode($lang)) !!}
                                                </p>
                                            </div>
                                            <div class="hotels-list-reservation-item-item-number">
                                                <button
                                                    class="hotels-list-reservation-item-item-number-btn hotels-list-reservation-item-item-number-btn-minus js-downBtn"
                                                    type="button">−</button>
                                                <input class="js-number-input rooms" type="number" name="dialog-rooms"
                                                    value="1" readonly="readonly" min="1"
                                                    max="{{ $basic['max_room'] ?? 10 }}"
                                                    onchange="updateTextRoomPeople('dialog-select-element')">
                                                <button
                                                    class="hotels-list-reservation-item-item-number-btn hotels-list-reservation-item-item-number-btn-plus js-upBtn"
                                                    type="button">＋</button>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="hotel-floatBox">
                                <dl class="hotel-floatBox-selectItems">
                                    <dt>
                                        {!! __('hankyu.from_search.selected_people_and_room', [], MultiLangMode::getLanguageCode($lang)) !!}
                                    </dt>
                                    <dd class="text-room-people"
                                        data-text-people="{{ __('hankyu.from_search.text_people', [], MultiLangMode::getLanguageCode($lang)) }}"
                                        data-text-child="{{ __('hankyu.from_search.text_child', [], MultiLangMode::getLanguageCode($lang)) }}"
                                        data-text-room="{{ __('hankyu.from_search.text_room', [], MultiLangMode::getLanguageCode($lang)) }}">
                                        {!! __('hankyu.from_search.booking_info', ['adults' => 1, 'rooms' => 1], MultiLangMode::getLanguageCode($lang)) !!}
                                    </dd>
                                </dl>
                                <button type="button" class="hotel-button" onclick="applyPeopleAndRoom('dialog-select-element', 'box-search')">
                                    {!! __('hankyu.from_search.apply', [], MultiLangMode::getLanguageCode($lang)) !!}
                                </button>
                            </div>
                        </div>
                    </div>
                @else
                    @if (showSearchRoom(fieldPropertyValue('reservation_engine', $basic)))
                        <div class="half-content form-select">
                            <label for="numberOfRooms" data-i18n="search_modal.rooms"></label>
                            <select id="numberOfRooms" name="numRoom">
                                @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>
                    @endif
                    @if (showSearchPeople(fieldPropertyValue('reservation_engine', $basic)))
                        <div class="half-content form-select">
                            <label for="numberOfAdults" data-i18n="search_modal.people"></label>
                            <select id="numberOfAdults" 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>
                    @endif
                @endif
            </div>
            <div class="search-btn__form form-content">
                <button class="reservation-button button-cv" onclick="searchHotel('box-search')"
                    data-i18n="search_modal.search_btn"></button>
                <div class="text-reserve sp">
                    <p data-i18n="search_modal.text_reserve"></p>
                </div>
            </div>
        </div>
    </div>
    <div class="applyCancel"> <a class="textApplyCancel" data-i18n="search_modal.search_plan_list"
            href="https://go-oursinn-hankyu.reservation.jp/ja/reservations/detail_entry"></a></div>
    <div class="text-reserve pc">
        <p data-i18n="search_modal.text_reserve"></p>
    </div>
</section>