@extends('layouts.previews.crownPlaza')

@php
    use App\Enums\ElementType;
    use App\Enums\TopElementDefault;
    use App\Enums\CustomElementType;
    use App\Enums\MultiLangMode;
    use App\Enums\FvType;
    use App\Enums\NewsElementDefault;

    $listImagePc = [];
    $listImageSp = [];
    for ($i = 1; $i <= 3; $i++) {
        if (!empty($project->topPage['slide_image_pc' . $i])) {
            $listImagePc[] = $project->topPage['slide_image_pc' . $i];
        }
        if (!empty($project->topPage['slide_image_sp' . $i])) {
            $listImageSp[] = $project->topPage['slide_image_sp' . $i];
        }
    }
    if (count($listImageSp) == 0) {
        $listImageSp = $listImagePc;
    }

@endphp

@section('content')
    <div class="top-page">
        {{-- @include('preview.crownPlaza.commons.boxSearch') --}}
        <div class="mv-top">
            @if (fieldPropertyValue('fv_type', $project->topPage) == FvType::MOVIE)
                <div class="movie-container pc">
                    {!! fieldPropertyValue('movie_tag', $project->topPage) !!}
                </div>
            @else
                <div class="swiper mv-swiper mv-swiper-pc"
                    data-delayed-slide="{{ getDurationFv('delayed_slide', $project->topPage) }}">
                    <div class="swiper-wrapper">
                        @for ($i = 0; $i < count($listImagePc); $i++)
                            <div class="swiper-slide" data-index="0">
                                <div class="slide-inner">
                                    <div class="image-aspect-ratio-banner custom-banner">
                                        <img src="{!! setImagePreview($listImagePc[$i]) !!}" alt="">
                                    </div>
                                </div>
                            </div>
                        @endfor
                    </div>
                    <div class="swiper-pagination"></div>
                    <div class="overlay"></div>
                </div>
            @endif
            @if (fieldPropertyValue('fv_type_sp', $project->topPage) == FvType::MOVIE)
                <div class="movie-container sp">
                    {!! fieldPropertyValue('movie_tag_sp', $project->topPage) !!}
                </div>
            @else
                <div class="swiper mv-swiper mv-swiper-sp"
                    data-delayed-slide="{{ getDurationFv('delayed_slide_sp', $project->topPage) }}">
                    <div class="swiper-wrapper">
                        @for ($i = 0; $i < count($listImageSp); $i++)
                            <div class="swiper-slide" data-index="0">
                                <div class="slide-inner">
                                    <div class="image-aspect-ratio-banner custom-banner">
                                        <img src="{!! setImagePreview($listImagePc[$i]) !!}" alt="">
                                    </div>
                                </div>
                            </div>
                        @endfor
                    </div>
                    <div class="swiper-pagination"></div>
                    <div class="overlay"></div>
                </div>
            @endif
            <div class="booking-form-mv" type-search="{!! fieldPropertyValue('reservation_engine', $basic) !!}" data-hotel="{!! setTextDefault($basic['hotel_id'] ?? null, 0000000002) !!}"
                data-hotel-domain="{!! setTextDefault($basic['hotel_domain'] ?? null) !!}" id="booking-form-mv" data-route-search="{{ routeSearch($lang, $project->id) }}">
                <div class="wrapper">
                    <h4 data-i18n="search_modal.title" class="heading-main"></h4>
                    <div class="form">
                        <div>
                            <div class="search_box__date_time search_border">
                                <label for="" data-i18n="search_modal.check_in"></label>
                                <div class="search_box__time flex">
                                    <input class="input_date date_check_in" id="datepicker" type="text" name="dates">
                                </div>
                            </div>
                        </div>
                        <div class="flex between-justify wrap-flex">
                            <div class="half-content">
                                <label for="numberOfAdults" data-i18n="search_modal.people"></label>
                                <input type="number" name="adult" id="numberOfAdults" value="1" min="1"
                                    max="10">
                            </div>
                            <div class="half-content">
                                <label for="numberChild" data-i18n="search_modal.child"></label>
                                <input type="number" name="child" id="numberChild" value="0" min="0"
                                    max="10">
                            </div>
                            <div class="half-content">
                                <label for="numberOfRooms" data-i18n="search_modal.rooms"></label>
                                <input type="number" id="numberOfRooms" name="room" value="1" min="1"
                                    max="10">
                            </div>
                        </div>
                    </div>
                    <div class="clearfix form-button">
                        <button class="reservation-button button-cv" data-i18n="search_modal.search_btn"
                            onclick="searchHotel('booking-form-mv')"></button>
                    </div>
                </div>
            </div>
        </div>

        @foreach ($elements as $item)
            @if (fieldPropertyValue('element_type', $item) == ElementType::DEFAULT &&
                    fieldPropertyValue('default_element_type', $item) == TopElementDefault::INSTAGRAM)
                @include('preview.crownPlaza.defaults.tops.instagram')
            @endif
            @if (fieldPropertyValue('status', $item))
                @if (fieldPropertyValue('element_type', $item) == ElementType::DEFAULT)
                    @switch(fieldPropertyValue('default_element_type', $item))
                        @case(TopElementDefault::PICKUP)
                            @include('preview.crownPlaza.defaults.tops.pickup')
                        @break

                        @case(TopElementDefault::CONCEPT)
                            @include('preview.crownPlaza.defaults.tops.concept')
                        @break

                        @case(TopElementDefault::ROOM)
                            @include('preview.crownPlaza.defaults.tops.room')
                        @break

                        @case(TopElementDefault::PLAN)
                            @include('preview.crownPlaza.commons.plan')
                        @break

                        @case(TopElementDefault::RESTAURANT)
                            @include('preview.crownPlaza.defaults.tops.restaurant')
                        @break

                        @case(TopElementDefault::BANQUET)
                            @include('preview.crownPlaza.defaults.tops.banquet')
                        @break

                        @case(TopElementDefault::CV_NEXT)
                            @php
                                $reserve = $item;
                            @endphp
                        @break
                    @endswitch
                @endif
            @endif

            @if (textLocale('status', $item, $lang) &&
                    fieldPropertyValue('custom_element_type', $item) >= CustomElementType::ONE_COLUMN &&
                    fieldPropertyValue('custom_element_type', $item) <= CustomElementType::SIDE_CONTENT_V2)
                <div class="container" data-aos="fade-in">
                    @include('preview.customs.customContent')
                </div>
            @endif
        @endforeach
        @if (!empty($reserve))
            @include('preview.crownPlaza.commons.reserve')
        @endif
    </div>
@endsection