@php
    use App\Enums\Meals;
    use App\Enums\ThePlan;
@endphp
<script>
    const planData = {!! json_encode($planData) !!};
    const linkPlanDetail = {!! json_encode(setUrl($project->id, $domainPublish ?? false, $lang, $project->plan_url)) !!};
</script>
<div class="plan_content relative">
    <div data-aos="fade-up" data-aos-duration="1000">
        <div class="container">
            <div class="text_title_EN">Plan</div>
            <div class="text_title_JP" data-i18n="plan_modal.title"></div>
            <div class="plan_content_row flex">
                <div class="plan_content_left" id="plan_content_select">
                    <p class="plan_title pc" data-i18n="plan_modal.recommended_label"></p>
                    <div class="pc">
                        <div class="plan_button_row flex row_select_item01" id="recommended_pc">
                            <div class="plan_button_item {!! setClassActive(fieldPropertyValue('plan_display1', $item), ThePlan::RECOMMENDED) !!}" id="recommended-item-01"
                                data-i18n="plan_modal.recommended_button.button_recommend"
                                data-value="{{ ThePlan::RECOMMENDED }}">{!! config('translate.' . $lang . '.common_element.plan.the_plan.' . ThePlan::RECOMMENDED) !!}</div>
                            <div class="plan_button_item {!! setClassActive(fieldPropertyValue('plan_display1', $item), ThePlan::POPULAR) !!}" id="recommended-item-02"
                                data-i18n="plan_modal.recommended_button.button_popular"
                                data-value="{{ ThePlan::POPULAR }}">{!! config('translate.' . $lang . '.common_element.plan.the_plan.' . ThePlan::POPULAR) !!}</div>
                            <div class="plan_button_item {!! setClassActive(fieldPropertyValue('plan_display1', $item), ThePlan::LIMITED_TIME) !!}" id="recommended-item-03"
                                data-i18n="plan_modal.recommended_button.button_limited"
                                data-value="{{ ThePlan::LIMITED_TIME }}">{!! config('translate.' . $lang . '.common_element.plan.the_plan.' . ThePlan::LIMITED_TIME) !!}</div>
                        </div>
                    </div>
                    <div class="sp">
                        <div class="plan_button_row flex row_select_item01" id="recommended_sp">
                            <div class="plan_button_item {!! setClassActive(fieldPropertyValue('plan_display1_sp', $item), ThePlan::RECOMMENDED) !!}" id="recommended-item-01"
                                data-i18n="plan_modal.recommended_button.button_recommend"
                                data-value="{{ ThePlan::RECOMMENDED }}">{!! config('translate.' . $lang . '.common_element.plan.the_plan.' . ThePlan::RECOMMENDED) !!}</div>
                            <div class="plan_button_item {!! setClassActive(fieldPropertyValue('plan_display1_sp', $item), ThePlan::POPULAR) !!}" id="recommended-item-02"
                                data-i18n="plan_modal.recommended_button.button_popular"
                                data-value="{{ ThePlan::POPULAR }}">{!! config('translate.' . $lang . '.common_element.plan.the_plan.' . ThePlan::POPULAR) !!}</div>
                            <div class="plan_button_item {!! setClassActive(fieldPropertyValue('plan_display1_sp', $item), ThePlan::LIMITED_TIME) !!}" id="recommended-item-03"
                                data-i18n="plan_modal.recommended_button.button_limited"
                                data-value="{{ ThePlan::LIMITED_TIME }}">{!! config('translate.' . $lang . '.common_element.plan.the_plan.' . ThePlan::LIMITED_TIME) !!}</div>
                        </div>
                    </div>
                    <p class="plan_title pc" data-i18n="plan_modal.breakfast_label"></p>
                    <div class="pc">
                        <div class="plan_button_row flex row_select_item02" id="breakfast_pc">
                            <div class="plan_button_item {!! setClassActive(fieldPropertyValue('plan_display2', $item), Meals::ALL) !!}" id="breakfast-item-01"
                                data-i18n="plan_modal.breakfast_button.button_all" data-value="{{ Meals::ALL }}">
                                {!! config('translate.' . $lang . '.common_element.plan.meals.' . Meals::ALL) !!}</div>
                            <div class="plan_button_item {!! setClassActive(fieldPropertyValue('plan_display2', $item), Meals::WITHOUT_MEALS) !!}" id="breakfast-item-02"
                                data-i18n="plan_modal.breakfast_button.button_without_meals"
                                data-value="{{ Meals::WITHOUT_MEALS }}">{!! config('translate.' . $lang . '.common_element.plan.meals.' . Meals::WITHOUT_MEALS) !!}
                            </div>
                            <div class="plan_button_item {!! setClassActive(fieldPropertyValue('plan_display2', $item), Meals::WITH_MEALS) !!}" id="breakfast-item-03"
                                data-i18n="plan_modal.breakfast_button.button_with_meal"
                                data-value="{{ Meals::WITH_MEALS }}">{!! config('translate.' . $lang . '.common_element.plan.meals.' . Meals::WITH_MEALS) !!}</div>
                        </div>
                    </div>
                    <div class="sp">
                        <div class="plan_button_row flex row_select_item02" id="breakfast_sp">
                            <div class="plan_button_item {!! setClassActive(fieldPropertyValue('plan_display2_sp', $item), Meals::ALL) !!}" id="breakfast-item-01"
                                data-i18n="plan_modal.breakfast_button.button_all" data-value="{{ Meals::ALL }}">
                                {!! config('translate.' . $lang . '.common_element.plan.meals.' . Meals::ALL) !!}</div>
                            <div class="plan_button_item {!! setClassActive(fieldPropertyValue('plan_display2_sp', $item), Meals::WITHOUT_MEALS) !!}" id="breakfast-item-02"
                                data-i18n="plan_modal.breakfast_button.button_without_meals"
                                data-value="{{ Meals::WITHOUT_MEALS }}">{!! config('translate.' . $lang . '.common_element.plan.meals.' . Meals::WITHOUT_MEALS) !!}
                            </div>
                            <div class="plan_button_item {!! setClassActive(fieldPropertyValue('plan_display2_sp', $item), Meals::WITH_MEALS) !!}" id="breakfast-item-03"
                                data-i18n="plan_modal.breakfast_button.button_with_meal"
                                data-value="{{ Meals::WITH_MEALS }}">{!! config('translate.' . $lang . '.common_element.plan.meals.' . Meals::WITH_MEALS) !!}</div>
                        </div>
                    </div>
                    <a class="btn_link pc_flex center__align" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->plan_url) !!}">
                        <span data-i18n="plan_modal.plan_btn_link"></span>
                        <div class="next_icon flex center__align"></div>
                    </a>
                </div>
                <div class="plan_content_right flex">
                    <div class="slide__plan">
                        <div class="relative">
                            <div class="swiper-button flex">
                                <div class="swiper-button-prev-plan swiper-button-prev"></div>
                                <div class="swiper-button-next-plan swiper-button-next"></div>
                            </div>
                            <div class="slide__plan_swiper swiper"></div>
                        </div>
                    </div>
                    <a class="btn_link sp_flex center__align" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->plan_url) !!}">
                        <span data-i18n="plan_modal.plan_btn_link"></span>
                        <div class="next_icon flex center__align"> </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>