@php
    $planInfo = html_entity_decode($planInfo);
    $planInfo = json_decode($planInfo, true);
@endphp
<div class="relative text-left p-8 rounded-xl hover:ring-2 {{ $planInfo['variant'] == 1 ? 'bg-[#F9FAFB] ring-[#A4C843]' : 'bg-[#A4C843] ring-[#EF6C00]' }} flex flex-col space-y-4 {{ $planInfo['variant'] !== 1 ? 'text-white' : '' }}">
    @if ($planInfo['variant'] != 1)
        <div class="flex flex-row absolute -top-4 left-[10%] items-baseline">
            <div class="bg-[#EF6C00] text-center w-max py-2 px-3 rounded-md ">
                CEL MAI POPULAR
            </div>
        </div>
    @endif
    <div class="plan-details relative">
        <div class="flex flex-row space-x-6 items-center">
            <div>
                {{ $image ?? 'image' }}
            </div>
            <div class="flex flex-col">
                @if ($planInfo['variant'] == 1)
                    <div class="text-sm text-[#A4C843]">BUSINESS</div>
                @else
                    <div class="text-sm text-[#38646F]">BUSINESS</div>
                @endif
                <div class="text-4xl uppercase font-extrabold">
                    {{ $heading ?? 'heading' }}
                </div>
            </div>
        </div>
        <div class="font-semibold">
            {{ $planInfo['heading'][0] }}
            <span class="font-normal">
                {{ $planInfo['heading'][1] }}
            </span>
        </div>
        <div style="display: none" class=" max-h-[60%] h-[17rem] h-3/5_ overflow-hidden"></div>
        {{-- <div class="" :class="togglePlans ? 'h-full' : 'h-[17rem] overflow-hidden'"> --}}
        <div class="relative overflow-hidden transition-all max-h-[17rem] duration-700" ref="planscontainer" v-bind:style="togglePlans == 1 ? 'max-height: ' + $refs.planscontainer.scrollHeight + 'px' : ''">
            <div class="flex flex-col space-y-2 text-sm_">
                @foreach ($planInfo['features'] as $feature)
                    <div class="flex flex-row space-x-2 items-baseline">
                        <div class="h-max">
                            @if ($planInfo['variant'] == 1)
                                <img src="{{ asset('autoreg_assets\check.png') }}" alt="" class="h-2">
                            @else
                                <img src="{{ asset('autoreg_assets\check-2.png') }}" alt="" class="h-2">
                            @endif
                        </div>
                        <div>
                            {{ $feature }}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        <div v-if="!togglePlans" class="absolute right-0 h-2/5 w-full bottom-0 bg-gradient-to-t {{ $planInfo['variant'] == 1 ? 'from-[#F9FAFB]' : 'from-[#A4C843]' }} to-transparent">
        </div>
    </div>
    <div class="flex flex-row space-x-4 justify-start">
        <button @@click="openForm('{{ json_encode($planInfo) }}')" class="w-max text-center align-middle py-3 px-10 {{ $planInfo['variant'] == 1 ? 'bg-[#A4C843]' : 'bg-[#38646F] text-white' }} hover:bg-[#38646F] hover:text-white">
            ALEGE PLAN
        </button>
        <button class="w-max text-center align-middle py-3 px-10 border-2 border-[#38646F] hover:bg-[#38646F] hover:text-white" @@click="togglePlans = !togglePlans">
            <span v-if="togglePlans">
                Închide -
            </span>
            <span v-else>
                Compară +
            </span>
        </button>
    </div>
</div>