@php
    $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/'));
    $pricingPlansList = \App\Models\PricingPlan::query()->active()->ordered()->get();
@endphp

<section class="tv-pricing-section space bg-light">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="title-wrap text-center three">
                    <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Pricing Plans</div>
                    <h2 class="sec-title">Choose the Perfect Plans for <br> Your Business Growth</h2>
                </div>
            </div>
        </div>
        <div class="row gy-30 align-items-end">
            @if($pricingPlansList->isEmpty())
                @foreach([
                    ['Starter', '29 USD', false, ['3 Users availble', 'Limited tools', 'Unlimited Supports'], ['API Access', 'Premium apps']],
                    ['Starter', '39 USD', true, ['3 Users availble', 'Limited tools', 'Unlimited Supports', 'API Access'], ['Premium apps']],
                    ['Business', '39 USD', false, ['3 Users availble', 'Limited tools', 'Unlimited Supports', 'API Access', 'Premium apps'], []],
                ] as $plan)
                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <div class="tv-pricing-card {{ $plan[2] ? 'style2' : '' }} wow fadeInUp" data-wow-delay=".{{ 3 + ($loop->iteration * 2) }}s">
                            @if($plan[2])
                                <div class="popular-badge"><i class="fa-solid fa-fire"></i> Most Popular</div>
                            @endif
                            <div class="pricing-inner-box">
                                @if($plan[2])
                                    <div class="top-icon spin"><img src="{{ $assetPath('images/pricing/spin-shape02.webp') }}" alt=""></div>
                                @endif
                                <div class="pricing-inner">
                                    <div class="pricing-plan">
                                        <h5 class="plan">{{ $plan[0] }}</h5>
                                        <div class="price"><h2>{{ $plan[1] }}</h2><span class="billing-cycle">/ month</span></div>
                                        <p>Organize Daily Task by free</p>
                                        <a href="{{ route('frontend.contact') }}" class="theme-btn mt-25 w-100 br-25">
                                            <span class="link-effect"><span class="effect-1">Join this Plan</span><span class="effect-1">Join this Plan</span></span>
                                            <span class="arrow1"><i class="fa-solid fa-arrow-right"></i></span>
                                        </a>
                                        <h4>Key Features</h4>
                                    </div>
                                    <ul class="features">
                                        @foreach($plan[3] as $feature)
                                            <li><span class="checkmark"><i class="fa-solid fa-circle-check"></i></span> {{ $feature }}</li>
                                        @endforeach
                                        @foreach($plan[4] as $feature)
                                            <li class="disabled"><span class="checkmark"><i class="fa-solid fa-circle-x"></i></span> {{ $feature }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                @foreach($pricingPlansList as $plan)
                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <div class="tv-pricing-card {{ $plan->is_popular ? 'style2' : '' }} wow fadeInUp" data-wow-delay=".{{ 3 + ($loop->iteration * 2) }}s">
                            @if($plan->is_popular)
                                <div class="popular-badge"><i class="fa-solid fa-fire"></i> Most Popular</div>
                            @endif
                            <div class="pricing-inner-box">
                                @if($plan->is_popular)
                                    <div class="top-icon spin"><img src="{{ $assetPath('images/pricing/spin-shape02.webp') }}" alt=""></div>
                                @endif
                                <div class="pricing-inner">
                                    <div class="pricing-plan">
                                        <h5 class="plan">{{ $plan->name }}</h5>
                                        <div class="price"><h2>{{ $plan->price_label }}</h2><span class="billing-cycle">{{ $plan->billing_suffix }}</span></div>
                                        <p>{{ $plan->tagline ?: 'Organize Daily Task by free' }}</p>
                                        <a href="{{ route('frontend.contact') }}" class="theme-btn mt-25 w-100 br-25">
                                            <span class="link-effect"><span class="effect-1">{{ $plan->button_label }}</span><span class="effect-1">{{ $plan->button_label }}</span></span>
                                            <span class="arrow1"><i class="fa-solid fa-arrow-right"></i></span>
                                        </a>
                                        <h4>Key Features</h4>
                                    </div>
                                    <ul class="features">
                                        @foreach($plan->features_included ?? [] as $feature)
                                            <li><span class="checkmark"><i class="fa-solid fa-circle-check"></i></span> {{ $feature }}</li>
                                        @endforeach
                                        @foreach($plan->features_excluded ?? [] as $feature)
                                            <li class="disabled"><span class="checkmark"><i class="fa-solid fa-circle-x"></i></span> {{ $feature }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
</section>