@php
    use App\Enums\InformationMasterialType;

@endphp
<div class="page-sub-menu__content" data-aos="fade-up">
    <div class="container">
        <ul class="clearfix">
            @foreach ($otherFacilitiesElements as $index => $facility)
                @if (!empty($facility))
                    <li>
                        <a class="link-scroll" href="#{!! fieldPropertyValue('id', $facility) !!}">
                            <span class="pc">{!! setTextDefault(textLocale('heading', $facility, $lang)) !!}</span>
                            <span class="sp">{!! setTextDefault(textLocale('heading_sp', $facility, $lang)) !!}</span>
                        </a>
                    </li>
                @endif
            @endforeach
        </ul>
    </div>
</div>

@foreach ($otherFacilitiesElements as $index => $facility)
    @if (!empty($facility))
        @php
            $listImagePc = [];
            $listImageSp = [];
            for ($i = 1; $i <= 4; $i++) {
                if (!empty($facility['image' . $i])) {
                    $listImagePc[] = $facility['image' . $i];
                }
                if (!empty($facility['image' . $i . '_sp'])) {
                    $listImageSp[] = $facility['image' . $i . '_sp'];
                }
            }
            if (count($listImagePc) == 0) {
                $listImagePc = ['https://assets.micado-rayout.jp/img/common/no-image-found-360x250.png'];
            }
            if (count($listImageSp) == 0) {
                $listImageSp = $listImagePc;
            }
        @endphp
        <div class="other-facilities-slide" id="{!! fieldPropertyValue('id', $facility) !!}">
            <div class="container">
                <div class="other-facilities-swiper swiper pc" data-aos="fade-up">
                    <div class="swiper-wrapper">
                        @foreach ($listImagePc as $image)
                            <div class="img-wrap swiper-slide">
                                <div class="aspect-ratio-100x51">
                                    <img src="{!! setImagePreview($image) !!}" alt="">
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @if (count($listImagePc) > 1)
                        <div class="swiper-button">
                            <div class="swiper-button-prev-facilities swiper-button-prev swiper-button-facilities">
                            </div>
                            <div class="swiper-button-next-facilities swiper-button-next swiper-button-facilities">
                            </div>
                        </div>
                    @endif
                    <div class="facilities-swiper-pagination swiper-pagination"></div>
                </div>
                <div class="other-facilities-swiper swiper sp" data-aos="fade-up">
                    <div class="swiper-wrapper">
                        @foreach ($listImageSp as $image)
                            <div class="img-wrap swiper-slide">
                                <div class="aspect-ratio-100x51">
                                    <img src="{!! setImagePreview($image) !!}" alt="">
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="facilities-swiper-pagination swiper-pagination"></div>
                </div>

                <div class="facilities-description" data-aos="fade-up">
                    <div class="inner-left">
                        <h2 class="title">
                            <span class="pc">{!! setTextDefault(textLocale('heading', $facility, $lang)) !!}</span>
                            <span class="sp">{!! setTextDefault(textLocale('heading_sp', $facility, $lang)) !!}</span>
                        </h2>
                        <p class="text">
                            <span class="pc">{!! setTextDefault(textLocale('descriptive', $facility, $lang)) !!}</span>
                            <span class="sp">{!! setTextDefault(textLocale('descriptive_sp', $facility, $lang)) !!}</span>
                        </p>
                    </div>
                    @php
                        $informationMaterial = getInformationMaterial($facility['other_facility_information_details'], $lang);
                    @endphp
                    <div class="inner-right">
                        @foreach ($informationMaterial as $index => $information)

                            <div class="bold-text">
                                <span class="pc">{!! fieldPropertyValue('heading', $information) !!}</span>
                                <span class="sp">{!! fieldPropertyValue('heading_sp', $information) !!}</span>
                            </div>
                            @switch(fieldPropertyValue('type', $information))
                                @case(InformationMasterialType::TEXT)
                                    <div class="text">
                                        <span class="pc">{!! fieldPropertyValue('descriptive', $information) !!}</span>
                                        <span class="sp">{!! fieldPropertyValue('descriptive_sp', $information) !!}</span>
                                    </div>
                                @break

                                @case(InformationMasterialType::BUTTON)
                                    <a class="text text-link pc"
                                        href="{!! fieldPropertyValue('button_link', $information) !!}">
                                        {!! fieldPropertyValue('button_name', $information) !!}
                                    </a>
                                    <a class="text text-link sp"
                                        href="{!! fieldPropertyValue('button_link_sp', $information) !!}">
                                        {!! fieldPropertyValue('button_name_sp', $information) !!}
                                    </a>
                                @break

                                @case(InformationMasterialType::PDF)
                                    @if (fieldPropertyValue('pdf_descriptive', $information))
                                        <a class="text text-link pc-flex"
                                            href="{!! fieldPropertyValue('pdf_link', $information) !!}">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="19.528" height="24"
                                                viewbox="0 0 19.528 24">
                                                <g id="PDFアイコン" transform="translate(-47.706)">
                                                    <path id="Path_716" data-name="Path 716"
                                                        d="M63.208,0H54.616l-.437.437L48.143,6.474l-.437.437V19.974A4.031,4.031,0,0,0,51.732,24H63.208a4.031,4.031,0,0,0,4.026-4.026V4.026A4.03,4.03,0,0,0,63.208,0Zm2.535,19.974a2.535,2.535,0,0,1-2.535,2.536H51.732A2.535,2.535,0,0,1,49.2,19.974V7.528h3.924a2.113,2.113,0,0,0,2.113-2.113V1.491h7.974a2.535,2.535,0,0,1,2.535,2.536Z"
                                                        fill="#4b4b4b"></path>
                                                    <path id="Path_717" data-name="Path 717"
                                                        d="M136.476,252.785h-1.337a.383.383,0,0,0-.407.414v3.457a.469.469,0,1,0,.935,0v-1.05a.034.034,0,0,1,.039-.038h.77a1.4,1.4,0,1,0,0-2.782Zm-.058,1.974h-.713a.034.034,0,0,1-.039-.038v-1.089a.034.034,0,0,1,.039-.038h.713a.584.584,0,1,1,0,1.165Z"
                                                        transform="translate(-82.947 -240.936)" fill="#4b4b4b"></path>
                                                    <path id="Path_718" data-name="Path 718"
                                                        d="M221.069,252.785h-1.025a.383.383,0,0,0-.407.414v3.508a.378.378,0,0,0,.407.408h1.025c.923,0,1.5-.293,1.725-1a5.382,5.382,0,0,0,0-2.33C222.566,253.078,221.992,252.785,221.069,252.785Zm.828,3.005c-.109.344-.42.49-.854.49h-.433a.034.034,0,0,1-.039-.038v-2.585a.034.034,0,0,1,.039-.038h.433c.433,0,.745.147.854.49a4.688,4.688,0,0,1,0,1.681Z"
                                                        transform="translate(-163.872 -240.936)" fill="#4b4b4b"></path>
                                                    <path id="Path_719" data-name="Path 719"
                                                        d="M310.163,252.785h-2.1a.383.383,0,0,0-.408.414v3.457a.469.469,0,1,0,.936,0v-1.235a.034.034,0,0,1,.038-.038h1.223a.4.4,0,1,0,0-.8h-1.223a.034.034,0,0,1-.038-.038v-.911a.034.034,0,0,1,.038-.038h1.534a.405.405,0,1,0,0-.808Z"
                                                        transform="translate(-247.764 -240.936)" fill="#4b4b4b"></path>
                                                </g>
                                            </svg>

                                            <span>{!! fieldPropertyValue('pdf_descriptive', $information) !!}</span>
                                        </a>
                                    @endif
                                    @if (fieldPropertyValue('pdf_descriptive_sp', $information))
                                        <a class="text text-link sp-flex"
                                            href="{!! fieldPropertyValue('pdf_link_sp', $information) !!}">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="19.528" height="24"
                                                viewbox="0 0 19.528 24">
                                                <g id="PDFアイコン" transform="translate(-47.706)">
                                                    <path id="Path_716" data-name="Path 716"
                                                        d="M63.208,0H54.616l-.437.437L48.143,6.474l-.437.437V19.974A4.031,4.031,0,0,0,51.732,24H63.208a4.031,4.031,0,0,0,4.026-4.026V4.026A4.03,4.03,0,0,0,63.208,0Zm2.535,19.974a2.535,2.535,0,0,1-2.535,2.536H51.732A2.535,2.535,0,0,1,49.2,19.974V7.528h3.924a2.113,2.113,0,0,0,2.113-2.113V1.491h7.974a2.535,2.535,0,0,1,2.535,2.536Z"
                                                        fill="#4b4b4b"></path>
                                                    <path id="Path_717" data-name="Path 717"
                                                        d="M136.476,252.785h-1.337a.383.383,0,0,0-.407.414v3.457a.469.469,0,1,0,.935,0v-1.05a.034.034,0,0,1,.039-.038h.77a1.4,1.4,0,1,0,0-2.782Zm-.058,1.974h-.713a.034.034,0,0,1-.039-.038v-1.089a.034.034,0,0,1,.039-.038h.713a.584.584,0,1,1,0,1.165Z"
                                                        transform="translate(-82.947 -240.936)" fill="#4b4b4b"></path>
                                                    <path id="Path_718" data-name="Path 718"
                                                        d="M221.069,252.785h-1.025a.383.383,0,0,0-.407.414v3.508a.378.378,0,0,0,.407.408h1.025c.923,0,1.5-.293,1.725-1a5.382,5.382,0,0,0,0-2.33C222.566,253.078,221.992,252.785,221.069,252.785Zm.828,3.005c-.109.344-.42.49-.854.49h-.433a.034.034,0,0,1-.039-.038v-2.585a.034.034,0,0,1,.039-.038h.433c.433,0,.745.147.854.49a4.688,4.688,0,0,1,0,1.681Z"
                                                        transform="translate(-163.872 -240.936)" fill="#4b4b4b"></path>
                                                    <path id="Path_719" data-name="Path 719"
                                                        d="M310.163,252.785h-2.1a.383.383,0,0,0-.408.414v3.457a.469.469,0,1,0,.936,0v-1.235a.034.034,0,0,1,.038-.038h1.223a.4.4,0,1,0,0-.8h-1.223a.034.034,0,0,1-.038-.038v-.911a.034.034,0,0,1,.038-.038h1.534a.405.405,0,1,0,0-.808Z"
                                                        transform="translate(-247.764 -240.936)" fill="#4b4b4b"></path>
                                                </g>
                                            </svg>

                                            <span>{!! fieldPropertyValue('pdf_descriptive_sp', $information) !!}</span>
                                        </a>
                                    @endif
                                @break
                            @endswitch
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    @endif
@endforeach