@extends('layouts.front')

@section('content')
<div class="pricing-table section-padding bg-light">
    <div class="container">
        <div class="row g-3">
            <div class="col-lg-3">
                <div class="card price-card h-100 position-relative wi overflow-hidden d-flex align-items-center justify-content-center">
                    <img class="position-absolute w-100 h-100 object-fit-cover start-0 top-0" src="{{asset('assets/images/banner-image.webp')}}" alt="{{env('APP_NAME')}}">
                    <div class="position-relative z-3 text-white p-4">
                        <h4>Our Subscription Plans</h4>
                        <p>Select a plan that best suits your needs and gain full access to all premium content.</p>
                    </div>
                </div>
            </div>
            @if(isset($plans))
            @foreach($plans as $plan)
            <x-ui.pricing-card
                :id="$plan->id"
                :uuid="$plan->uuid"
                :name="$plan->name"
                :description="$plan->description"
                :slug="$plan->slug"
                :price="$plan->price"
                :currentPlanId="$subscription?->plan_id"
                :features="$plan->features"
                :hasActiveSubscription="$subscription && $subscription->status === 'active'" />
            @endforeach
            @endif
        </div>
    </div>
</div>
@endsection