@php($packages = $info->packages)
@if (!empty($packages) && $packages->isNotEmpty())
<div class="bg-gradient-to-t from-white to-[#F6F3FE] sectionGap">
    <div class="container">
        <div class="sectionDiv text-left max-w-full">
            <p class="sectionSub" data-aos="fade-up" data-aos-duration="1000">OUR PRICNG PLAN</p>
            <h2 class="sectionTitle" data-aos="fade-up" data-aos-duration="1000">
                Our awesome Pricing Plan
            </h2>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">
            @foreach ($packages as $key => $row)
            <div class="border relative pb-24 rounded-lg shadow-custom bg-white p-4 md:p-6 md:pb-24" data-aos="fade-up"
                data-aos-duration="1000">
                <div
                    class="p-4 rounded-xl {{$row->is_recommended == 1 ? 'bg-primary' : 'bg-darkblue'}} flex items-start justify-between">
                    <div class="grid gap-4">
                        <h5 class="text-xl font-medium text-white">{{ strFilter($row->type) }}</h5>
                        <span class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white">
                            @if ($row->yearly > 0.0)
                            ${{ $row->yearly }}
                            <span class="text-xs text-white/80">/year</span>
                            @else
                            ${{ $row->monthly }}
                            <span class="text-xs text-white/80">/monthly</span>
                            @endif
                        </span>
                    </div>
                    <img src="{{asset('/')}}images/cloud.png" alt="Cloud img">
                </div>

                <ul class="space-y-2.5 my-4">
                    @if (!empty($row->features))
                    @php($allFeatures = json_decode($row->features))
                    @foreach ($allFeatures as $feature)
                    <li class="flex gap-3 items-center text-gray-700 font-medium ">
                        <span class="text-primary">
                            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512"
                                height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="m479.07 111.36-.79-12.53-12.36-2.21c-86.5-15.52-122.61-26.74-203.33-63.2l-6.59-3-6.59 3C168.69 69.88 132.58 81.1 46.08 96.62l-12.36 2.21-.79 12.53c-3.85 61.11 4.36 118.05 24.43 169.24A349.47 349.47 0 0 0 129 393.11c53.47 56.73 110.24 81.37 121.07 85.73l6 2.41 6-2.41c10.83-4.36 67.6-29 121.07-85.73a349.47 349.47 0 0 0 71.5-112.51c20.07-51.19 28.28-108.13 24.43-169.24zm-252.91 216L153.37 256l22.4-22.86 48.47 47.49 110.13-127.2 24.2 20.94z">
                                </path>
                            </svg>
                        </span>
                        {{ $feature }}
                    </li>
                    @endforeach
                    @endif
                </ul>

                <a href="{{ url("contact") }}"
                    class="absolute bottom-4 md:bottom-6 font-medium inset-x-4 md:inset-x-6 flex items-center justify-center gap-2 p-3 border duration-300 rounded-lg {{ $row->is_recommended == 1 ? 'border-primary bg-primary text-white hover:bg-darkblue hover:border-darkblue' : 'border-darkblue text-darkblue hover:text-white hover:bg-primary hover:border-primary' }} ">
                    Choose Plan
                    <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
                        stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5 12h14"></path>
                        <path d="m12 5 7 7-7 7"></path>
                    </svg>
                </a>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endif