@extends('layouts.previews.ibisStylesV2')

@php
    use App\Enums\ElementType;
    use App\Enums\PlanListDefault;
    use App\Enums\CustomElementType;
    use App\Enums\Meals;
    use App\Enums\ThePlan;

    $planContent = current(
        array_filter($elements, function ($item) {
            return fieldPropertyValue('element_type', $item) == ElementType::DEFAULT &&
                fieldPropertyValue('default_element_type', $item) == PlanListDefault::PLAN &&
                $item['status'];
        }),
    );
@endphp
@section('content')
    <div class="page-plan-list page-header-white" id="page-plan-list">
        <div class="banner-block">
            <div class="container-custom">
                <div class="flex center-align relative between-justify">
                    <div class="banner-txt">
                        <div class="banner-txt__heading">
                            <div class="banner-txt__sub-title">{!! setTextDefault(textLocale('plan_display_text', $basic, $lang)) !!}</div>
                            <h1 class="banner-txt__title">{!! setTextDefault(textLocale('plan_list_title', $basic, $lang)) !!}</h1>
                            <p class="banner-txt__sub-description">{!! setTextDefault(textLocale('plan_list_introduction', $basic, $lang)) !!}</p>
                        </div>
                        @if ($planContent)
                            <div class="banner-custom">
                                <div class="plan-filter pc">
                                    <div class="plan-title" data-i18n="plan_modal.recommended_label"></div>
                                    <div class="plan-group-button">
                                        @foreach (ThePlan::getValues() as $value)
                                            <div class="plan-button {{ fieldPropertyValue('plan_display1', $planContent) == $value ? 'active' : '' }}"
                                                id="button-recommended" data-value="{!! $value !!}">
                                                <div class="icon">
                                                    {!! iconPlanRecommended($value) !!}
                                                </div>
                                                <span>{!! config('translate.' . $lang . '.common_element.plan.the_plan.' . $value) !!}</span>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="plan-title" data-i18n="plan_modal.breakfast_label"></div>
                                    <div class="plan-group-button">
                                        @foreach (Meals::getValues() as $value)
                                            <div class="plan-button {{ fieldPropertyValue('plan_display2', $planContent) == $value ? 'active' : '' }}"
                                                id="button-breakfast" data-value="{!! $value !!}">
                                                <div class="icon">
                                                    {!! iconPlanBreakfast($value) !!}
                                                </div>
                                                <span>{!! config('translate.' . $lang . '.common_element.plan.meals.' . $value) !!}</span>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="plan-filter sp-flex">
                                    <div class="drop-box">
                                        <input id="recommended" type="hidden" value="{!! fieldPropertyValue('plan_display1_sp', $planContent) !!}" />
                                        <div class="drop-selected">
                                            <div class="plan-button">
                                                <div class="icon">
                                                    {!! iconPlanRecommended(fieldPropertyValue('plan_display1_sp', $planContent)) !!}
                                                </div><span>{!! config(
                                                    'translate.' . $lang . '.common_element.plan.the_plan.' . fieldPropertyValue('plan_display1_sp', $planContent),
                                                ) !!}</span>
                                            </div>
                                        </div>
                                        <div class="drop-options">
                                            <p class="title" data-i18n="plan_modal.recommended_label"></p>
                                            <div class="flex">
                                                @foreach (ThePlan::getValues() as $value)
                                                    <div class="option {{ $value == fieldPropertyValue('plan_display1_sp', $planContent) ? 'active' : '' }}"
                                                        data-value="{!! $value !!}">
                                                        <div class="plan-button">
                                                            <div class="icon">
                                                                {!! iconPlanRecommended($value) !!}
                                                            </div><span>{!! config('translate.' . $lang . '.common_element.plan.the_plan.' . $value) !!}</span>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    <div class="drop-box">
                                        <input id="breakfast" type="hidden" value="{!! fieldPropertyValue('plan_display2_sp', $planContent) !!}" />
                                        <div class="drop-selected">
                                            <div class="plan-button">
                                                <div class="icon">
                                                    {!! iconPlanBreakfast(fieldPropertyValue('plan_display2_sp', $planContent)) !!}
                                                </div><span>{!! config(
                                                    'translate.' . $lang . '.common_element.plan.meals.' . fieldPropertyValue('plan_display2_sp', $planContent),
                                                ) !!}</span>
                                            </div>
                                        </div>
                                        <div class="drop-options">
                                            <p class="title" data-i18n="plan_modal.breakfast_label"></p>
                                            <div class="flex">
                                                @foreach (Meals::getValues() as $value)
                                                    <div class="option {{ $value == fieldPropertyValue('plan_display2_sp', $planContent) ? 'active' : '' }}"
                                                        data-value="{!! $value !!}">
                                                        <div class="plan-button">
                                                            <div class="icon">
                                                                {!! iconPlanBreakfast($value) !!}
                                                            </div><span>{!! config('translate.' . $lang . '.common_element.plan.meals.' . $value) !!}</span>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="img-wrap">
                        <div class="img-scale"><img src="{!! setImagePreview(fieldPropertyValue('plan_list_image', $basic)) !!}" alt="Plan banner" /></div>
                    </div>
                </div>
            </div>
        </div>

        @if ($planContent)
            @include('preview.ibisStylesV2.defaults.plan.list')
        @endif

        @foreach ($elements as $item)
            @if (textLocale('status', $item, $lang) &&
                    fieldPropertyValue('custom_element_type', $item) >= CustomElementType::ONE_COLUMN &&
                    fieldPropertyValue('custom_element_type', $item) <= CustomElementType::SIDE_CONTENT_V2)
                <div class="add-custom-content">
                    <div class="container">
                        @include('preview.customs.customContent')
                    </div>
                </div>
            @endif
        @endforeach
        @include('preview.ibisStylesV2.commons.allContaint')
        @include('preview.ibisStylesV2.commons.reserve')
    </div>
@endsection