@php
    use App\Enums\SalesUnit;

    $langText = $lang == $multiLangMode::DEFAULT ? 'ja' : Str::slug($multiLangMode::getDescription($lang));
@endphp

@extends('layouts.hotels')

@section('content')
    <div id="list-search" data-route="{{ route('hotels.' . $langText . '.room', $project->id) }}">
        @include('include.hotels.boxSearch')
        @if (!empty($roomInformation))
            <div class="hotel-headingPage">
                <div class="hotel-headingPage-inner">
                    <div class="hotel-headingMain">
                        <h1 class="hotel-headingMain-heading">
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">
                                    <span class="u-pc">
                                        {!! setTextDefault(textLocale('name', $roomInformation, $lang)) !!}
                                    </span>
                                    <span class="u-sp">
                                        {!! setTextDefault(textLocale('name_sp', $roomInformation, $lang)) !!}
                                    </span>
                                </font>
                            </font>
                        </h1>
                    </div>
                </div>
            </div>
            <div class="main-inner">
                <ul class="hotel-listRoom">
                    <li class="hotel-listRoom-item room-display hotel-detail">
                        <section class="hotel-roomDetailBox">
                            <div class="hotel-roomDetailBox-inner">
                                <div class="hotel-roomDetailBox-img">
                                    <div class="hotel-swiper-thumb swiper u-pc">
                                        <div class="swiper-wrapper">
                                            @foreach (listImage($roomInformation) as $image)
                                                <div class="swiper-slide">
                                                    <div class="image-aspect-ratio">
                                                        <img src="{!! setImagePreview($image) !!}" alt="{!! setTextDefault(textLocale('name', $roomInformation, $lang)) !!}">
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="swiper-pagination"></div>
                                    </div>
                                    <div class="hotel-swiper-thumb swiper u-sp">
                                        <div class="swiper-wrapper">
                                            @foreach (listImage($roomInformation, true) as $image)
                                                <div class="swiper-slide">
                                                    <div class="image-aspect-ratio">
                                                        <img src="{!! setImagePreview($image) !!}" alt="{!! setTextDefault(textLocale('name_sp', $roomInformation, $lang)) !!}">
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="swiper-pagination"></div>
                                    </div>
                                </div>
                                <div class="hotel-roomDetailBox-cont">
                                    <ul class="hotel-listType">
                                        @if (fieldPropertyValue('number_of_room', $roomInformation))
                                            <li class="hotel-listType-item u-pc">
                                                <i class="hotel-listType-item-icon hotel-svg setting_overscan"></i>
                                                {{ fieldPropertyValue('number_of_room', $roomInformation) }}m<sup>2</sup>
                                            </li>
                                        @endif
                                        @if (fieldPropertyValue('number_of_room_sp', $roomInformation))
                                            <li class="hotel-listType-item u-sp">
                                                <i class="hotel-listType-item-icon hotel-svg setting_overscan"></i>
                                                {{ fieldPropertyValue('number_of_room_sp', $roomInformation) }}m<sup>2</sup>
                                            </li>
                                        @endif
                                        @if (fieldPropertyValue('capacity', $roomInformation))
                                            <li class="hotel-listType-item u-pc">
                                                <i class="hotel-listType-item-icon hotel-svg group"></i>
                                                {{ fieldPropertyValue('capacity', $roomInformation) }}
                                                {!! __('hotels.room_content.people', [], $multiLangMode::getLanguageCode($lang)) !!}
                                            </li>
                                        @endif
                                        @if (fieldPropertyValue('capacity_sp', $roomInformation))
                                            <li class="hotel-listType-item u-sp">
                                                <i class="hotel-listType-item-icon hotel-svg group"></i>
                                                {{ fieldPropertyValue('capacity_sp', $roomInformation) }}
                                                {!! __('hotels.room_content.people', [], $multiLangMode::getLanguageCode($lang)) !!}
                                            </li>
                                        @endif
                                    </ul>
                                    <div class="hotel-roomDetailBox-cont-text ck-content">
                                        <span class="u-pc">
                                            {!! setTextDefault(textLocale('descriptive', $roomInformation, $lang)) !!}
                                        </span>
                                        <span class="u-sp">
                                            {!! setTextDefault(textLocale('descriptive_sp', $roomInformation, $lang)) !!}
                                        </span>
                                    </div>
                                    <div class="hotel-roomDetailBox-cont-bottom">
                                        <dl class="hotel-textPrice hotel-textPrice-total">
                                            {{-- <dt>税サ込</dt>
                                        <dd>
                                            <strong>61,600</strong>
                                            <span>
                                                円
                                                ～
                                            </span>
                                        </dd> --}}
                                        </dl>
                                        <ul class="hotel-listBtn">
                                            <li class="hotel-listBtn-item">
                                                <div class="hotel-textMoreBtn" style="margin-top: 0">
                                                    <p class="js-more-detail">
                                                        <span class="show-all">
                                                            {!! __('hotels.btn.show_all', [], $multiLangMode::getLanguageCode($lang)) !!}
                                                        </span>
                                                        <span class="close">
                                                            {!! __('hotels.btn.close', [], $multiLangMode::getLanguageCode($lang)) !!}
                                                        </span>
                                                    </p>
                                                </div>
                                            </li>
                                            @if (!count($roomInformation['plan_information']))
                                                @php
                                                    $modalName = 'bookNow';
                                                    if (!empty($roomInformation)) {
                                                        $modalName .= '-' . $roomInformation['id'];
                                                    }
                                                @endphp
                                                <li class="hotel-listBtn-item">
                                                    <a href="javascript: void(0)"
                                                        class="hotel-button hotel-button-reservation"
                                                        onclick="openModalHandler('{{ $modalName }}')">
                                                        {!! __('hotels.btn.book_now', [], $multiLangMode::getLanguageCode($lang)) !!}
                                                    </a>
                                                </li>

                                                @include('include.hotels.modalBookNow', [
                                                    'roomInfo' => $roomInformation,
                                                    'planInfo' => [],
                                                ])
                                            @endif
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            @if (count($roomInformation['plan_information']))
                                <section class="hotel-roomDetailBox-section">
                                    <div class="hotel-rowBox">
                                        <h3 class="hotel-textNumber">
                                            {!! __('hotels.text.selectable_plan', [], $multiLangMode::getLanguageCode($lang)) !!}：
                                            <strong>{{ count($roomInformation['plan_information']) }}</strong>
                                        </h3>
                                    </div>
                                    <ul class="hotel-listPlan">
                                        @for ($i = 0; $i < count($roomInformation['plan_information']); $i++)
                                            @php
                                                $plan = !empty($roomInformation['plan_information'][$i])
                                                    ? $roomInformation['plan_information'][$i]
                                                    : [];
                                            @endphp
                                            @if ($plan)
                                                <li class="hotel-listPlan-item">
                                                    <div class="hotel-listPlan-item-inner">
                                                        <div class="hotel-listPlan-item-data">
                                                            <div class="hotel-listPlan-item-data-img">
                                                                <img src="{{ setImageRoot($plan) }}" class="u-pc"
                                                                    alt="{{ setTextDefault(textLocale('heading', $plan, $lang)) }}">
                                                                <img src="{{ setImageRoot($plan, true) }}" class="u-sp"
                                                                    alt="{{ setTextDefault(textLocale('heading_sp', $plan, $lang)) }}">
                                                            </div>
                                                            @if (fieldPropertyValue('amount', $plan))
                                                                <div class="hotel-textPriceBox u-pc">
                                                                    <dl class="hotel-textPrice hotel-textPrice-total">
                                                                        <dt>
                                                                            {!! __('hotels.text_price.tax_included', [], $multiLangMode::getLanguageCode($lang)) !!}
                                                                        </dt>
                                                                        <dd>
                                                                            <strong>
                                                                                {{ number_format((int) fieldPropertyValue('amount', $plan)) }}
                                                                            </strong>
                                                                            <span>
                                                                                {!! __('hotels.text_price.unit', [], $multiLangMode::getLanguageCode($lang)) !!}
                                                                            </span>
                                                                        </dd>
                                                                    </dl>
                                                                </div>
                                                            @endif
                                                            @if (fieldPropertyValue('amount_sp', $plan))
                                                                <div class="hotel-textPriceBox u-sp">
                                                                    <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', $plan)) }}
                                                                            </strong>
                                                                            <span>
                                                                                {!! __('hotels.text_price.unit', [], $multiLangMode::getLanguageCode($lang)) !!}
                                                                            </span>
                                                                        </dd>
                                                                    </dl>
                                                                </div>
                                                            @endif
                                                        </div>
                                                        <div class="hotel-listPlan-item-detail">
                                                            <p class="hotel-listPlan-item-detail-name">
                                                                <span class="u-pc">
                                                                    {!! setTextDefault(textLocale('heading', $plan, $lang)) !!}
                                                                </span>
                                                                <span class="u-sp">
                                                                    {!! setTextDefault(textLocale('heading_sp', $plan, $lang)) !!}
                                                                </span>
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="hotel-listPlan-item-btnArea">
                                                        <div class="hotel-listPlan-item-btnArea-main">
                                                            <div class="hotel-listPlan-item-btnArea-main-status">
                                                                <i
                                                                    class="hotel-icon hotel-icon-mark hotel-svg trip_origin"></i>
                                                            </div>
                                                            <ul class="hotel-listBtn">
                                                                @php
                                                                    $modalName = 'bookNow';
                                                                    if (!empty($roomInformation)) {
                                                                        $modalName .= '-' . $roomInformation['id'];
                                                                    }
                                                                    if (!empty($plan)) {
                                                                        $modalName .= '-' . $plan['id'];
                                                                    }
                                                                @endphp
                                                                <li class="hotel-listBtn-item">
                                                                    <a href="javascript: void(0)"
                                                                        class="hotel-button hotel-button-reservation"
                                                                        onclick="openModalHandler('{{ $modalName }}')">
                                                                        {!! __('hotels.btn.book_now', [], $multiLangMode::getLanguageCode($lang)) !!}
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </li>
                                                @include('include.hotels.modalBookNow', [
                                                    'roomInfo' => $roomInformation,
                                                    'planInfo' => $plan,
                                                ])
                                            @endif
                                        @endfor
                                    </ul>
                                </section>
                            @endif
                        </section>
                    </li>
                </ul>
            </div>
        @else
            <div class="main-inner">
                <div class="section">
                    <div class="hotel-messageBox">
                        <h1 class="hotel-headingMain">
                            <i class="hotel-icon hotel-svg check"></i>
                            {!! __('hotels.text.no_rooms', [], $multiLangMode::getLanguageCode($lang)) !!}
                        </h1>
                        <p class="hotel-messageBox-text">
                            {!! __('hotels.text.no_available_rooms', [], $multiLangMode::getLanguageCode($lang)) !!}
                        </p>
                        <div class="hotel-btnBox">
                            <a href="{{ route('hotels.' . $langText . '.search', $project->id) }}" class="hotel-button">
                                {!! __('hotels.btn.change_accommodation_conditions', [], $multiLangMode::getLanguageCode($lang)) !!}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://assets.micado-rayout.jp/css/content-style.css">
@endpush