@php
    use App\Enums\Meals;
    use App\Enums\ThePlan;
    $urlPlan = setUrl($project->id, $domainPublish ?? false, $lang, $project->plan_url);

@endphp
<script>
    const planData = @json($planData);
    const linkPlanDetail = @json($urlPlan);
</script>
<div class="plan-content relative" id="modal-plan">
    <div class="container">
        <div class="plan-content__list">
            <div class="plan-content__list__desc">
                <div class="plan-content__heading">
                    <div class="plan-content__heading__title">
                        <div class="plan-content__title-en">PLAN</div>
                        <div class="plan-content__title-ja" data-i18n="plan_modal.title"></div>
                    </div>
                    <div class="plan-content__heading__button pc-flex">
                        <div class="drop-box">
                            <input id="recommended" type="hidden" value="{!! fieldPropertyValue('plan_display1', $item) !!}" />
                            <div class="drop-selected">
                                <div class="plan-button">
                                    <div class="icon">
                                        {!! iconPlanRecommended(fieldPropertyValue('plan_display1', $item)) !!}
                                    </div><span>{!! config('translate.' . $lang . '.common_element.plan.the_plan.' . fieldPropertyValue('plan_display1', $item)) !!}</span>
                                </div>
                            </div>
                            <div class="drop-options">
                                <p class="title" data-i18n="plan_modal.common_recommended_label"></p>
                                <div class="flex">
                                    @foreach (ThePlan::getValues() as $value)
                                        <div class="option {{ $value == fieldPropertyValue('plan_display1', $item) ? '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', $item) !!}" />
                            <div class="drop-selected">
                                <div class="plan-button">
                                    <div class="icon">
                                        {!! iconPlanBreakfast(fieldPropertyValue('plan_display2', $item)) !!}
                                    </div><span>{!! config('translate.' . $lang . '.common_element.plan.meals.' . fieldPropertyValue('plan_display2', $item)) !!}</span>
                                </div>
                            </div>
                            <div class="drop-options">
                                <p class="title" data-i18n="plan_modal.common_breakfast_label"></p>
                                <div class="flex">
                                    @foreach (Meals::getValues() as $value)
                                        <div class="option {{ $value == fieldPropertyValue('plan_display2', $item) ? '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 class="plan-content__heading__button sp-flex">
                        <div class="drop-box">
                            <input id="recommended" type="hidden" value="{!! fieldPropertyValue('plan_display1_sp', $item) !!}" />
                            <div class="drop-selected">
                                <div class="plan-button">
                                    <div class="icon">
                                        {!! iconPlanRecommended(fieldPropertyValue('plan_display1_sp', $item)) !!}
                                    </div><span>{!! config(
                                        'translate.' . $lang . '.common_element.plan.the_plan.' . fieldPropertyValue('plan_display1_sp', $item),
                                    ) !!}</span>
                                </div>
                            </div>
                            <div class="drop-options">
                                <p class="title" data-i18n="plan_modal.common_recommended_label"></p>
                                <div class="flex">
                                    @foreach (ThePlan::getValues() as $value)
                                        <div class="option {{ $value == fieldPropertyValue('plan_display1_sp', $item) ? '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', $item) !!}" />
                            <div class="drop-selected">
                                <div class="plan-button">
                                    <div class="icon">
                                        {!! iconPlanBreakfast(fieldPropertyValue('plan_display2_sp', $item)) !!}
                                    </div><span>{!! config('translate.' . $lang . '.common_element.plan.meals.' . fieldPropertyValue('plan_display2_sp', $item)) !!}</span>
                                </div>
                            </div>
                            <div class="drop-options">
                                <p class="title" data-i18n="plan_modal.common_breakfast_label"></p>
                                <div class="flex">
                                    @foreach (Meals::getValues() as $value)
                                        <div class="option {{ $value == fieldPropertyValue('plan_display2_sp', $item) ? '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>
                <div class="plan-content__swiper-desc pc">
                    <div class="plan-swiper-desc-pc swiper">
                        <div class="swiper-wrapper" id="modal-plan-desc"></div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
            <div class="plan-content__list__image pc">
                <div class="plan-swiper-image-pc swiper">
                    <div class="swiper-wrapper" id="modal-plan-image"></div>
                    <div class="swiper-button">
                        <div class="swiper-button-next plan-image-button"></div>
                        <div class="swiper-button-prev plan-image-button"></div>
                    </div>
                </div>
            </div>
            <div class="plan-content__list__sp sp">
                <div class="plan-swiper-sp swiper">
                    <div class="swiper-wrapper" id="modal-plan-sp"></div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </div>
</div>