@extends('layouts.previews.crownPlaza')

@php
    use App\Enums\ElementType;
    use App\Enums\RoomDetailElementDefault;
    use App\Enums\CustomElementType;
    use App\Enums\MultiLangMode;
    use App\Enums\DisplayContent;
    use App\Enums\RoomDetailPage;
    use App\Enums\CustomContentType;
    $roomUrl = setUrl($project->id, $domainPublish ?? false, $lang, $project->room_url);
@endphp

@section('content')
    <div class="page-rooms page-room-detail" id="room-detail-page">
        {{-- @include('preview.crownPlaza.commons.boxSearch') --}}
        <div v-if="room && room.detail_page == @json(RoomDetailPage::CREATE_DETAILED)">
            <div class="banner-block flex center-align relative">
                <div class="image-aspect-ratio-banner">
                    <img class="pc" :src="setImagePreview(fieldPropertyValue('image', roomBanner))" alt="Rooms banner" />
                    <img class="sp" :src="setImagePreview(fieldPropertyValue('image_sp', roomBanner))"
                        alt="Rooms banner" />
                </div>
                <div class="banner-txt">
                    <h2 class="banner-title">
                        <span class="pc" v-html="setTextDefault(textLocale('title', roomBanner))"></span>
                        <span class="sp" v-html="setTextDefault(textLocale('title_sp', roomBanner))"></span>
                    </h2>
                    <h2 class="banner-sub-title">
                        <span class="pc" v-html="setTextDefault(textLocale('subtitle', roomBanner))"></span>
                        <span class="sp" v-html="setTextDefault(textLocale('subtitle_sp', roomBanner))"></span>
                    </h2>
                </div>
            </div>
            @include('preview.crownPlaza.commons.breadcrumbVue')
            <template v-for="item in elements">
                <div
                    v-if="item.status && fieldPropertyValue('element_type', item) == @json(ElementType::DEFAULT) && fieldPropertyValue('default_element_type', item) == @json(RoomDetailElementDefault::CONCEPT)">
                    @include('preview.crownPlaza.defaults.roomDetail.concept')
                </div>
                <div
                    v-if="item.status && fieldPropertyValue('element_type', item) == @json(ElementType::DEFAULT) && fieldPropertyValue('default_element_type', item) == @json(RoomDetailElementDefault::MAIN_CONTENT) && fieldPropertyValue('display_content', item) == @json(DisplayContent::VIEW_DETAIL)">
                    @include('preview.crownPlaza.defaults.roomDetail.mainContent')
                </div>
                <div
                    v-if="item.status && fieldPropertyValue('element_type', item) == @json(ElementType::DEFAULT) && fieldPropertyValue('default_element_type', item) == @json(RoomDetailElementDefault::AMENITY)">
                    @include('preview.crownPlaza.defaults.roomDetail.amenities')
                    @include('preview.crownPlaza.defaults.roomDetail.otherRoom')
                </div>
                <div
                    v-if="item.status && fieldPropertyValue('element_type', item) == @json(ElementType::DEFAULT) && fieldPropertyValue('default_element_type', item) == @json(RoomDetailElementDefault::PLAN)">
                    @include('preview.crownPlaza.commons.plan')
                </div>
                <div class="container"
                    v-if="fieldPropertyValue('element_type', item) == @json(ElementType::CUSTOM) && fieldPropertyValue('custom_element_type', item) >= @json(CustomElementType::ONE_COLUMN) &&
                    fieldPropertyValue('custom_element_type', item) <= @json(CustomElementType::SIDE_CONTENT_V2)">
                    @include('preview.customs.customContentVue')
                </div>
            </template>
            @include('preview.crownPlaza.commons.reserve')
        </div>
    </div>
@endsection

@push('script')
    <script type="importmap" async>
    {
        "imports": {
            "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
            "axios": "https://unpkg.com/axios@1.2.0/dist/esm/axios.min.js",
            "mixins": "https://assets.micado-rayout.jp/js/mixins.js"
        }
    }
    </script>
    <script type="module" async>
        const roomUrl = @json($roomUrl);
        const MultiLangMode = @json(MultiLangMode::toArray());
        const CustomContentType = @json(CustomContentType::toArray());
        const CustomElementType = @json(CustomElementType::toArray());
        import {
            createApp
        } from 'vue';
        import axios from 'axios';
        import mixins from 'mixins';

        const appObj = {
            mixins: [mixins],
            data() {
                return {
                    route: @json(route('api.project.roomInfo.getDetail')),
                    roomUrl: roomUrl,
                    room: [],
                    otherRooms: [],
                    elements: [],
                    lang: @json($lang),
                    multiLangMode: MultiLangMode,
                    customContentType: CustomContentType,
                    customElementType: CustomElementType,
                    langSuffix: {
                        [MultiLangMode.DEFAULT]: '',
                        [MultiLangMode.ENGLISH]: '_en',
                        [MultiLangMode.CHINESE_TRADITIONAL]: '_zh_tw',
                        [MultiLangMode.CHINESE_SIMPLIFIED]: '_zh_cn',
                        [MultiLangMode.KOREAN]: '_ko',
                    },
                    dataBreadcrumbs: [],
                    amenities: [],
                    windowWidth: window.innerWidth,
                }
            },
            computed: {
                room_id() {
                    var urlParams = new URLSearchParams(window.location.search);
                    if (urlParams.has('id')) {
                        return urlParams.get('id');
                    }
                    return null;
                },
                roomBanner() {
                    if (this.room && this.room.detail_page == @json(RoomDetailPage::CREATE_DETAILED) && this.elements) {
                        let elementBanner = this.elements.filter((item) => item['element_type'] ==
                            @json(ElementType::DEFAULT) && item['default_element_type'] ==
                            @json(RoomDetailElementDefault::BANNER));
                        if (elementBanner) {
                            return elementBanner[0];
                        }
                    }
                    return [];
                },
                breadcrumbs() {
                    let data = [];
                    if (this.dataBreadcrumbs) {
                        data.push({
                            ...this.dataBreadcrumbs
                        });
                    }
                    if (this.roomBanner) {
                        data.push({
                            name: this.setTextDefault(this.textLocale('subtitle', this.roomBanner)),
                            name_sp: this.setTextDefault(this.textLocale('subtitle_sp', this.roomBanner)),
                        });
                    }
                    return data
                }
            },
            async created() {
                await this.getData();
                await this.updatePageTitleAndDescription();
            },
            mounted() {
                window.addEventListener("resize", this.handleResize);
            },
            destroyed() {
                window.removeEventListener("resize", this.handleResize);
            },
            watch: {
                windowWidth() {
                    this.updatePageTitleAndDescription();
                }
            },
            methods: {
                async getData() {
                    try {
                        const params = {
                            id: this.room_id,
                            project_id: @json($project->id),
                            lang: @json($lang),
                            domainPublish: @json($domainPublish ?? false),
                        }
                        const res = await axios.get(this.route, {
                            params: params
                        });
                        if (res.status == 200) {
                            this.room = res.data.room;
                            this.otherRooms = res.data.otherRooms;
                            this.elements = res.data.elements;
                            this.dataBreadcrumbs = res.data.breadcrumbs;
                            this.amenities = res.data.amenities;
                        }
                    } catch (error) {
                        console.error(error);
                    }
                },
                filterNameAmenity(id) {
                    let amenity = this.amenities.filter((item) => item.id == id);
                    if (amenity.length) {
                        return this.textLocale('name', amenity[0]);
                    }
                    return '';
                },
                handleResize() {
                    this.windowWidth = window.innerWidth;
                },
                updatePageTitleAndDescription() {
                    if (this.windowWidth >= 768) {
                        document.title = this.lang == @json(MultiLangMode::ENGLISH) ? this.fieldPropertyValue('name_en',
                            this.room) : this.fieldPropertyValue('name_ja', this.room);
                        document.querySelector('meta[name="description"]').setAttribute('content', this
                            .fieldPropertyValue(
                                'body', this.room));
                    } else {
                        document.title = this.lang == @json(MultiLangMode::ENGLISH) ? this.fieldPropertyValue(
                            'name_en_sp', this.room) : this.fieldPropertyValue('name_ja_sp', this.room);
                        document.querySelector('meta[name="description"]').setAttribute('content', this
                            .fieldPropertyValue(
                                'body_sp', this.room));
                    }
                },
            },
        };
        const app = createApp(appObj).mount('#room-detail-page');
    </script>
@endpush