@php
    use App\Enums\MultiLangMode;
    $langText = $lang == MultiLangMode::DEFAULT ? 'ja' : Str::slug(MultiLangMode::getDescription($lang));

    $modalName = 'bookNow';
    if (!empty($roomInfo)) {
        $modalName .= '-' . $roomInfo['id'];
        unset($roomInfo['plan_information']);
        unset($roomInfo['room_information_details']);
    }
    if (!empty($planInfo)) {
        $modalName .= '-' . $planInfo['id'];
        unset($planInfo['room_information']);
        unset($planInfo['linking_tags']);
    }
@endphp
<div class="modal fade custom-modal" id="{{ $modalName }}" tabindex="-1" aria-labelledby="datePickerModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="datePickerModalLabel">
                    {!! __('hotels.modal_book_now.heading', [], $multiLangMode::getLanguageCode($lang)) !!}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i></i>
                    <i></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-box-info">
                    <div class="hotel-modal-content">
                        <form class="hotels-form" action="{{ route('hotels.addToCart', $project->id) }}" method="POST">
                            @csrf
                            <input type="hidden" name="room"
                                value="{{ json_encode(!empty($roomInfo) ? $roomInfo : []) }}">
                            <input type="hidden" name="plan"
                                value="{{ json_encode(!empty($planInfo) ? $planInfo : []) }}">
                            <input type="hidden" name="params"
                                value="{{ json_encode(!empty($params) ? $params : []) }}">
                            <div class="hotel-roomDetailBox hotel-roomDetailBox-reservation">
                                <div class="hotel-roomDetailBox-inner">
                                    <div class="hotel-roomDetailBox-img">
                                        <img class="u-pc" src="{{ setImageRoot($roomInfo) }}" width="240"
                                            height="160" loading="lazy" alt="">
                                        <img class="u-sp" src="{{ setImageRoot($roomInfo, true) }}" width="240"
                                            height="160" loading="lazy" alt="">
                                    </div>
                                    <div class="hotel-roomDetailBox-cont">
                                        <ul class="hotel-listRoomData">
                                            <li>
                                                <i class="hotel-icon hotel-svg domain"></i>
                                                {!! textLocale('facility_name', $basic, $lang) !!}
                                            </li>
                                            @if (textLocale('name', $roomInfo, $lang))
                                                <li class="u-pc">
                                                    <i class="hotel-icon hotel-svg room"></i>
                                                    <span>{!! textLocale('name', $roomInfo, $lang) !!}</span>
                                                </li>
                                            @endif
                                            @if (textLocale('name_sp', $roomInfo, $lang))
                                                <li class="u-sp">
                                                    <i class="hotel-icon hotel-svg room"></i>
                                                    <span>{!! textLocale('name_sp', $roomInfo, $lang) !!}</span>
                                                </li>
                                            @endif
                                            @if (textLocale('heading', $planInfo, $lang))
                                                <li class="u-pc">
                                                    <i class="hotel-icon hotel-svg plan"></i>
                                                    <span>{!! textLocale('heading', $planInfo, $lang) !!}</span>
                                                </li>
                                            @endif
                                            @if (textLocale('heading_sp', $planInfo, $lang))
                                                <li class="u-sp">
                                                    <i class="hotel-icon hotel-svg plan"></i>
                                                    <span>{!! textLocale('heading_sp', $planInfo, $lang) !!}</span>
                                                </li>
                                            @endif
                                            <li>
                                                <i class="hotel-icon hotel-svg vacancy"></i>
                                                {!! __('hotels.modal_book_now.params_search', [], $multiLangMode::getLanguageCode($lang)) !!}
                                                <p>
                                                    {{ formatDateByLang($params['checkin_date'], 'Y/n/j(D)', $lang) }}～{{ formatDateByLang($params['checkout_date'], 'Y/n/j(D)', $lang) }}
                                                    <br>
                                                    {!! __(
                                                        'hotels.booking_info',
                                                        ['adults' => $params['adults'], 'rooms' => $params['rooms']],
                                                        $multiLangMode::getLanguageCode($lang),
                                                    ) !!}
                                                </p>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                @if (fieldPropertyValue('amount', $planInfo))
                                    <div class="hotel-totalBox u-pc">
                                        <p>
                                            {!! __('hotels.modal_book_now.total_price', [], $multiLangMode::getLanguageCode($lang)) !!}
                                        </p>
                                        <div class="hotel-textPriceBox">
                                            <dl class="hotel-textPrice hotel-textPrice-total">
                                                <dt>
                                                    {!! __('hotels.text_price.tax_included', [], $multiLangMode::getLanguageCode($lang)) !!}
                                                </dt>
                                                <dd>
                                                    <strong>
                                                        {{ number_format((int) fieldPropertyValue('amount', $planInfo)) }}
                                                    </strong>
                                                    <span>
                                                        {!! __('hotels.text_price.unit', [], $multiLangMode::getLanguageCode($lang)) !!}
                                                    </span>
                                                </dd>
                                            </dl>
                                        </div>
                                    </div>
                                @endif
                                @if (fieldPropertyValue('amount_sp', $planInfo))
                                    <div class="hotel-totalBox u-sp">
                                        <p>
                                            {!! __('hotels.modal_book_now.total_price', [], $multiLangMode::getLanguageCode($lang)) !!}
                                        </p>
                                        <div class="hotel-textPriceBox">
                                            <dl class="hotel-textPrice hotel-textPrice-total">
                                                <dt>
                                                    {!! __('hotels.text_price.tax_included', [], $multiLangMode::getLanguageCode($lang)) !!}
                                                </dt>
                                                <dd>
                                                    <strong>
                                                        {{ number_format((int) fieldPropertyValue('amount_sp', $planInfo)) }}
                                                    </strong>
                                                    <span>
                                                        {!! __('hotels.text_price.unit', [], $multiLangMode::getLanguageCode($lang)) !!}
                                                    </span>
                                                </dd>
                                            </dl>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            <div class="hotel-floatBox gap-20">
                                <button type="submit" class="hotel-button hotel-button-border flex-1"
                                    data-action="add-to-cart" data-modal-id="{{ $modalName }}">
                                    {!! __('hotels.btn.add_to_cart', [], $multiLangMode::getLanguageCode($lang)) !!}
                                </button>
                                <button type="submit" class="hotel-button flex-1" data-action="redirect"
                                    data-redirect-to="{{ route('hotels.' . $langText . '.reservations.cart', $project->id) }}">
                                    {!! __('hotels.btn.book_now', [], $multiLangMode::getLanguageCode($lang)) !!}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>