@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 class="container">
        <div class="plan-top">
            <div class="plan-top__left">
                <div class="plan-top__title">
                    <div class="text-plan-EN">PLAN</div>
                    <div class="text-plan-JP" data-i18n="plan_modal.title"></div>
                </div>
                <div id="button-plan__filter">
                    <div class="swiper-filter sp-flex cursor-pointer" id="button-plan-filter">
                        <svg xmlns="http://www.w3.org/2000/svg" width="13.983" height="12.485"
                            viewbox="0 0 13.983 12.485">
                            <g id="フィルタのフリー素材3" transform="translate(0 -27.435)">
                                <path id="Path_1067" data-name="Path 1067"
                                    d="M0,27.435l5.788,6.242V39.92L8.2,39.171V33.677l5.788-6.242Z"
                                    transform="translate(0 0)" fill="#fff"></path>
                            </g>
                        </svg>
                        <span data-i18n="plan_modal.btn_change_conditions"></span>
                    </div>
                    <div class="plan-content__select" id="plan-content__select">
                        <div class="box-select__close sp cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="35" viewbox="0 0 24 35">
                                <text id="_" data-name="×" transform="translate(0 28)" font-size="24"
                                    font-family="SourceHanSansJP-Regular, Source Han Sans JP" letter-spacing="0.06em"
                                    opacity="0.6">
                                    <tspan x="0" y="0">&times;</tspan>
                                </text>
                            </svg>
                        </div>
                        <div class="box-select__col">
                            <div class="select__title" data-i18n="plan_modal.recommended_label"></div>
                            <select name="recommended" id="recommended" class="pc">
                                <option data-i18n="plan_modal.recommended_button.button_recommend"
                                    value="{{ ThePlan::RECOMMENDED }}" {!! setSelected(fieldPropertyValue('plan_display1', $item), ThePlan::RECOMMENDED) !!}>
                                    {!! config('translate.' . $lang . '.common_element.plan.the_plan.' . ThePlan::RECOMMENDED) !!}</option>
                                <option data-i18n="plan_modal.recommended_button.button_popular"
                                    value="{{ ThePlan::POPULAR }}" {!! setSelected(fieldPropertyValue('plan_display1', $item), ThePlan::POPULAR) !!}>
                                    {!! config('translate.' . $lang . '.common_element.plan.the_plan.' . ThePlan::POPULAR) !!}</option>
                                <option data-i18n="plan_modal.recommended_button.button_limited"
                                    value="{{ ThePlan::LIMITED_TIME }}" {!! setSelected(fieldPropertyValue('plan_display1', $item), ThePlan::LIMITED_TIME) !!}>
                                    {!! config('translate.' . $lang . '.common_element.plan.the_plan.' . ThePlan::LIMITED_TIME) !!}</option>
                            </select>
                            <select name="recommended" id="recommended" class="sp">
                                <option data-i18n="plan_modal.recommended_button.button_recommend"
                                    value="{{ ThePlan::RECOMMENDED }}" {!! setSelected(fieldPropertyValue('plan_display1_sp', $item), ThePlan::RECOMMENDED) !!}>
                                    {!! config('translate.' . $lang . '.common_element.plan.the_plan.' . ThePlan::RECOMMENDED) !!}</option>
                                <option data-i18n="plan_modal.recommended_button.button_popular"
                                    value="{{ ThePlan::POPULAR }}" {!! setSelected(fieldPropertyValue('plan_display1_sp', $item), ThePlan::POPULAR) !!}>
                                    {!! config('translate.' . $lang . '.common_element.plan.the_plan.' . ThePlan::POPULAR) !!}</option>
                                <option data-i18n="plan_modal.recommended_button.button_limited"
                                    value="{{ ThePlan::LIMITED_TIME }}" {!! setSelected(fieldPropertyValue('plan_display1_sp', $item), ThePlan::LIMITED_TIME) !!}>
                                    {!! config('translate.' . $lang . '.common_element.plan.the_plan.' . ThePlan::LIMITED_TIME) !!}</option>
                            </select>
                        </div>
                        <div class="box-select__col">
                            <div class="select__title" data-i18n="plan_modal.breakfast_label"></div>
                            <select name="breakfast" id="breakfast" class="pc">
                                <option data-i18n="plan_modal.breakfast_button.button_all" value="{{ Meals::ALL }}"
                                    {!! setSelected(fieldPropertyValue('plan_display2', $item), Meals::ALL) !!}>
                                    {!! config('translate.' . $lang . '.common_element.plan.meals.' . Meals::ALL) !!}</option>
                                <option data-i18n="plan_modal.breakfast_button.button_without_meals"
                                    value="{{ Meals::WITHOUT_MEALS }}" {!! setSelected(fieldPropertyValue('plan_display2', $item), Meals::WITHOUT_MEALS) !!}>
                                    {!! config('translate.' . $lang . '.common_element.plan.meals.' . Meals::WITHOUT_MEALS) !!}</option>
                                <option data-i18n="plan_modal.breakfast_button.button_with_meal"
                                    value="{{ Meals::WITH_MEALS }}" {!! setSelected(fieldPropertyValue('plan_display2', $item), Meals::WITH_MEALS) !!}>
                                    {!! config('translate.' . $lang . '.common_element.plan.meals.' . Meals::WITH_MEALS) !!}</option>
                            </select>
                            <select name="breakfast" id="breakfast" class="sp">
                                <option data-i18n="plan_modal.breakfast_button.button_all" value="{{ Meals::ALL }}"
                                    {!! setSelected(fieldPropertyValue('plan_display2_sp', $item), Meals::ALL) !!}>
                                    {!! config('translate.' . $lang . '.common_element.plan.meals.' . Meals::ALL) !!}</option>
                                <option data-i18n="plan_modal.breakfast_button.button_without_meals"
                                    value="{{ Meals::WITHOUT_MEALS }}" {!! setSelected(fieldPropertyValue('plan_display2_sp', $item), Meals::WITHOUT_MEALS) !!}>
                                    {!! config('translate.' . $lang . '.common_element.plan.meals.' . Meals::WITHOUT_MEALS) !!}</option>
                                <option data-i18n="plan_modal.breakfast_button.button_with_meal"
                                    value="{{ Meals::WITH_MEALS }}" {!! setSelected(fieldPropertyValue('plan_display2_sp', $item), Meals::WITH_MEALS) !!}>
                                    {!! config('translate.' . $lang . '.common_element.plan.meals.' . Meals::WITH_MEALS) !!}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div><a class="custom-link pc" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->plan_url) !!}">MORE PLANS</a>
        </div>
        <div class="plan-content__modal">
            <div class="plan-content__list flex relative">
                <div class="plan-swiper swiper" id="slide-plan-list"></div>
                <div class="swiper-button flex relative between-justify center-align">
                    <div class="swiper-button-prev-plan swiper-button-prev flex center-align center-justify"></div>
                    <div class="swiper-button-next-plan swiper-button-next flex center-align center-justify"></div>
                </div>
            </div>
        </div>
    </div>
</div>