@extends('layouts.previews.intercontinental')
@php
    use App\Enums\ElementType;
    use App\Enums\BanquetDetailType;
    use App\Enums\CustomElementType;
    use App\Enums\MultiLangMode;
    use App\Enums\DisplayContent;
    use App\Enums\Boolean;
    use App\Enums\CustomContentType;
@endphp

@section('content')
    <div class="page-banquet-detail" id="banquet-detail-page">
        <template v-if="banquet && banquet.detail_page == @json(Boolean::TRUE)">
            <div class="banner-block">
                <div class="image-aspect-ratio">
                    <img class="pc" :src="setImagePreview(fieldPropertyValue('image', banquetBanner))"
                        alt="Rooms banner" />
                    <img class="sp" :src="setImagePreview(fieldPropertyValue('image_sp', banquetBanner))"
                        alt="Rooms banner" />
                </div>
            </div>
            <template v-for="(item, index) in elements">
                <div
                    v-if="item.status && fieldPropertyValue('element_type', item) == @json(ElementType::DEFAULT) && fieldPropertyValue('default_element_type', item) == @json(BanquetDetailType::MAIN_CONTENT) && fieldPropertyValue('display_content', item) == @json(DisplayContent::VIEW_DETAIL)">
                    @include('preview.intercontinental.defaults.banquetDetail.mainContent')
                </div>
                <div
                    v-if="item.status && fieldPropertyValue('element_type', item) == @json(ElementType::DEFAULT) && fieldPropertyValue('default_element_type', item) == @json(BanquetDetailType::PLAN)">
                    @include('preview.intercontinental.commons.plan')
                </div>
                <div class="container"
                    v-if="item.status && 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>
                <div
                    v-if="item.status && fieldPropertyValue('element_type', item) == @json(ElementType::CUSTOM) && fieldPropertyValue('custom_element_type', item) == @json(CustomElementType::CONTACT)">
                    @include('preview.intercontinental.customs.contactContentVue')

                </div>
            </template>
            @include('preview.intercontinental.defaults.banquetDetail.otherBanquet')
        </template>
    </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 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.banquetInfo.getDetail')),
                    banquet: [],
                    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: [],
                    otherBanquets: [],
                    contactForms: @json($contactForms),
                    forms: [],
                }
            },
            computed: {
                banquet_id() {
                    var urlParams = new URLSearchParams(window.location.search);
                    if (urlParams.has('id')) {
                        return urlParams.get('id');
                    }
                    return null;
                },
                banquetBanner() {
                    if (this.banquet && this.banquet.detail_page == @json(Boolean::TRUE) && this.elements) {
                        let elementBanner = this.elements.filter((item) => item['element_type'] ==
                            @json(ElementType::DEFAULT) && item['default_element_type'] ==
                            @json(BanquetDetailType::BANNER));
                        if (elementBanner) {
                            return elementBanner[0];
                        }
                    }
                    return [];
                },
                breadcrumbs() {
                    let data = [];
                    if (this.dataBreadcrumbs) {
                        data.push({
                            ...this.dataBreadcrumbs
                        });
                    }
                    if (this.banquetBanner) {
                        data.push({
                            name: this.setTextDefault(this.textLocale('subtitle', this.banquetBanner)),
                            name_sp: this.setTextDefault(this.textLocale('subtitle_sp', this.banquetBanner)),
                        });
                    }
                    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.banquet_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.banquet = res.data.banquet;
                            this.elements = res.data.elements;
                            this.dataBreadcrumbs = res.data.breadcrumbs;
                            this.otherBanquets = res.data.otherBanquets;
                        }
                    } catch (error) {
                        console.error(error);
                    }
                },
                updatePageTitleAndDescription() {
                    if (this.windowWidth >= 768) {
                        document.title = this.textLocale('banquet_name', this.banquet);
                        document.querySelector('meta[name="description"]').setAttribute('content', this
                            .textLocale(
                                'list_comment', this.banquet));
                    } else {
                        document.title = this.textLocale('banquet_name_sp', this.banquet);
                        document.querySelector('meta[name="description"]').setAttribute('content', this
                            .textLocale(
                                'list_comment_sp', this.banquet));
                    }
                },
                filterContactForm(id, index) {
                    var form = this.contactForms.filter((item) => item.id == id);
                    if (form.length > 0) {
                        this.forms[index] = form[0];
                        console.log();
                        return true;
                    }
                    return false;
                },
            },
        };
        const app = createApp(appObj).mount('#banquet-detail-page');
    </script>
@endpush