@props([
'id',
'uuid',
'name',
'slug',
'price',
'features',
'description',
'hasActiveSubscription' => false,
'currentPlanId' => null,
'highlighted' => false
])

@php
$isCurrentPlan = $currentPlanId && $currentPlanId === $id;
@endphp
<div class="col">
    <div {{$attributes->merge([
    'class'=> 'card price-card h-100 '. $slug
        ])}} style="background-color:#fff">
        <div class="card-body p-4">
            <h6 class="mb-1">{{$name}}</h6>
            <p class="text-muted small"><i>{{$description}}</i></p>
            <div class="d-flex align-items-center">
                <h2 class="m-0">{{number_format($price, 0)}}</h2>
                <span class="small d-inline-block text-muted"> / per month</span>
            </div>
            <a
                href="{{ ($hasActiveSubscription && $isCurrentPlan)
        ? url('app/my-account')
        : route('plans.checkout', ['plan' => $uuid]) }}"
                class="btn w-100 d-flex align-items-center justify-content-center gap-2 {{ $isCurrentPlan ? 'disabled opacity-75 ' : '' }}">
                @if($isCurrentPlan)
                Current Plan
                @elseif($hasActiveSubscription)
                Upgrade
                @else
                Choose Plan
                @endif
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#000000" fill="none">
                    <path d="M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </a>
            <ul class="list-unstyled text-muted small mt-4">
                @foreach ($features as $feature)
                <li class="mb-2 d-flex align-items-center justify-content-between"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#000000" fill="none">
                        <path d="M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z" stroke="currentColor" stroke-width="1.5"></path>
                        <path d="M8 12.75C8 12.75 9.6 13.6625 10.4 15C10.4 15 12.8 9.75 16 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <p class="m-0">{{$feature->feature}}</p>
                </li>
                @endforeach
            </ul>
        </div>
    </div>
</div>