@extends('layouts.previews.crownPlaza')

@php
    use App\Enums\ElementType;
    use App\Enums\DishsElementDefault;
    use App\Enums\CustomElementType;
    use App\Enums\MultiLangMode;
    use App\Enums\CustomContentType;
    use App\Enums\RoomDetailPage;
    use App\Enums\RestaurantDetailElementDefault;
    $restaurants = [];
    if (!empty($dataDetail) && !empty($dataDetail[$lang])) {
        $restaurants = $dataDetail[$lang];
    }
@endphp

@section('content')
    <script>
        const restaurantRestaurantData = @json($restaurants);
    </script>
    <div class="page-restaurant-detail" id="restaurant-detail-page">
        {{-- @include('preview.crownPlaza.commons.boxSearch') --}}
        <template v-if="restaurant && restaurant.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', restaurantBanner))"
                        alt="Rooms banner" />
                    <img class="sp" :src="setImagePreview(fieldPropertyValue('image_sp', restaurantBanner))"
                        alt="Rooms banner" />
                </div>
                <div class="banner-txt">
                    <h2 class="banner-title">
                        <span class="pc" v-html="setTextDefault(textLocale('title', restaurantBanner))"></span>
                        <span class="sp" v-html="setTextDefault(textLocale('title_sp', restaurantBanner))"></span>
                    </h2>
                    <h2 class="banner-sub-title">
                        <span class="pc" v-html="setTextDefault(textLocale('subtitle', restaurantBanner))"></span>
                        <span class="sp" v-html="setTextDefault(textLocale('subtitle_sp', restaurantBanner))"></span>
                    </h2>
                </div>
            </div>
            @include('preview.crownPlaza.commons.breadcrumbVue')
            <template v-for="item in elements">
                <template
                    v-if="item.status && fieldPropertyValue('element_type', item) == @json(ElementType::DEFAULT) && fieldPropertyValue('default_element_type', item) == @json(RestaurantDetailElementDefault::CONCEPT)">
                    @include('preview.crownPlaza.defaults.roomDishDetail.concept')
                </template>
                <template
                    v-if="item.status && fieldPropertyValue('element_type', item) == @json(ElementType::DEFAULT) && fieldPropertyValue('default_element_type', item) == @json(RestaurantDetailElementDefault::MAIN_CONTENT)">
                    @include('preview.crownPlaza.defaults.roomDishDetail.mainContent')
                </template>
                <template
                    v-if="item.status && fieldPropertyValue('element_type', item) == @json(ElementType::DEFAULT) && fieldPropertyValue('default_element_type', item) == @json(RestaurantDetailElementDefault::MENU_CONTENT)">
                    @include('preview.crownPlaza.defaults.roomDishDetail.menuContent')
                </template>
                <template
                    v-if="item.status && fieldPropertyValue('element_type', item) == @json(ElementType::DEFAULT) && fieldPropertyValue('default_element_type', item) == @json(RestaurantDetailElementDefault::PLAN)">
                    @include('preview.crownPlaza.commons.plan')
                </template>
                <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')
        </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": "/assets/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.restaurantInfo.getDetail')),
                    restaurant: [],
                    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: [],
                }
            },
            computed: {
                restaurant_id() {
                    var urlParams = new URLSearchParams(window.location.search);
                    if (urlParams.has('id')) {
                        return urlParams.get('id');
                    }
                    return null;
                },
                restaurantBanner() {
                    if (this.restaurant && this.restaurant.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(RestaurantDetailElementDefault::BANNER));
                        if (elementBanner) {
                            return elementBanner[0];
                        }
                    }
                    return [];
                },
                breadcrumbs() {
                    let data = [];
                    if (this.dataBreadcrumbs) {
                        data.push({
                            ...this.dataBreadcrumbs
                        });
                    }
                    if (this.restaurantBanner) {
                        data.push({
                            name: this.setTextDefault(this.textLocale('subtitle', this.restaurantBanner)),
                            name_sp: this.setTextDefault(this.textLocale('subtitle_sp', this.restaurantBanner)),
                        });
                    }
                    return data;
                }
            },
            async created() {
                await this.getData();
                await this.updatePageTitleAndDescription();
            },
            mounted() {
                window.addEventListener("resize", this.handleResize);
            },
            destroyed() {
                window.removeEventListener("resize", this.handleResize);
            },
            methods: {
                async getData() {
                    try {
                        const params = {
                            id: this.restaurant_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.restaurant = res.data.restaurant;
                            this.elements = res.data.elements;
                            this.dataBreadcrumbs = res.data.breadcrumbs;
                        }
                    } catch (error) {
                        console.error(error);
                    }
                },
                handleResize() {
                    this.windowWidth = window.innerWidth;
                },
                updatePageTitleAndDescription() {
                    if (this.windowWidth >= 768) {
                        document.title = this.lang == @json(MultiLangMode::ENGLISH) ? this.fieldPropertyValue(
                            'title_en',
                            this.restaurant) : this.fieldPropertyValue('title_ja', this.restaurant);
                        document.querySelector('meta[name="description"]').setAttribute('content', this
                            .fieldPropertyValue(
                                'descriptive', this.restaurant));
                    } else {
                        document.title = this.lang == @json(MultiLangMode::ENGLISH) ? this.fieldPropertyValue(
                            'title_en_sp', this.restaurant) : this.fieldPropertyValue('title_ja_sp', this
                            .restaurant);
                        document.querySelector('meta[name="description"]').setAttribute('content', this
                            .fieldPropertyValue(
                                'descriptive_sp', this.restaurant));
                    }
                },
            },
        };
        const app = createApp(appObj).mount('#restaurant-detail-page');
    </script>
@endpush