@php
    use App\Services\PlanMapper;

    $card = $card ?? 'starter';
    $period = $period ?? 'monthly';
    $btnId = match ([$card, $period]) {
        ['starter', 'monthly'], ['starter', 'yearly'] => null,
        ['reply', 'monthly'] => $idPrefix.'-proBtn',
        ['reply', 'yearly'] => $idPrefix.'-proBtnYearly',
        ['invite', 'monthly'] => $idPrefix.'-inviteReplyBtn',
        ['invite', 'yearly'] => $idPrefix.'-inviteReplyBtnYearly',
        ['agency', 'monthly'] => $idPrefix.'-agencyBtn',
        ['agency', 'yearly'] => $idPrefix.'-agencyBtnYearly',
        default => null,
    };
    $selectId = match ([$card, $period]) {
        ['reply', 'monthly'] => $idPrefix.'-quantitySelectPro',
        ['reply', 'yearly'] => $idPrefix.'-quantitySelectProYearly',
        ['invite', 'monthly'] => $idPrefix.'-quantitySelectInvite',
        ['invite', 'yearly'] => $idPrefix.'-quantitySelectInviteYearly',
        default => null,
    };
@endphp

@if ($isMarketing)
    @if ($card === 'starter')
        <a href="{{ url('/register') }}"
            class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full">
            Get Started Free
        </a>
    @elseif ($card === 'agency')
        <a href="{{ url('/register') }}"
            class="text-white bg-gradient-to-br from-slate-900 to-slate-700 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-slate-200 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full">
            Get Started
        </a>
    @else
        <div x-data="{ plan: 'Pro', businessCount: 1 }">
            <a href="#"
                @if ($selectId)
                    x-on:click.prevent="$dispatch('open-popup', { plan: plan, businessCount: parseInt(document.getElementById('{{ $selectId }}')?.value || '1', 10) })"
                @else
                    @click.prevent="$dispatch('open-popup', { plan: plan, businessCount: businessCount })"
                @endif
                @if ($card === 'invite')
                    class="text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200"
                @else
                    class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full"
                @endif>
                Start Free Trial
            </a>
        </div>
    @endif
@else
    @if ($card === 'starter')
        @if ($period === 'monthly')
            @if ($planName != 'Starter' && !$planExpired)
            @else
                <a href="#"
                    class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full cursor-not-allowed"
                    disabled>Active</a>
            @endif
        @else
            @if (!PlanMapper::isStarterPlan($planName) && !$planExpired)
            @else
                <a href="#"
                    class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full cursor-not-allowed"
                    disabled>Active</a>
            @endif
        @endif
    @elseif ($card === 'reply' && $period === 'monthly')
        @if (!PlanMapper::isPlan($planName, ['Pro Monthly', 'Pro Yearly', 'Reply', 'Pro Trial', 'Reply Trial']) && !$planExpired)
            <a href="{{ route('subscription.subscribe', ['p' => 'Reply', 'period' => 'monthly', 'b' => 1]) }}" id="{{ $btnId }}"
                class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full">Subscribe</a>
        @else
            <a href="#" id="{{ $btnId }}"
                class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full cursor-not-allowed"
                disabled>Active</a>
        @endif
    @elseif ($card === 'reply' && $period === 'yearly')
        @if ((in_array($planName, ['Pro Monthly', 'Reply Monthly']) || ($planName === 'Reply' && $isMonthly)) && !$planExpired)
            <a href="{{ route('subscription.subscribe', ['p' => 'Reply', 'period' => 'yearly', 'b' => 1]) }}" id="{{ $btnId }}"
                class="text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 focus:ring-4 focus:outline-none focus:ring-blue-200 dark:focus:ring-blue-800 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200">
                Upgrade to Yearly
            </a>
        @elseif ((in_array($planName, ['Pro Yearly', 'Pro Trial', 'Reply Trial']) || ($planName === 'Reply' && !$isMonthly)) && !$planExpired)
            <a href="#" id="{{ $btnId }}"
                class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full cursor-not-allowed"
                disabled>Active</a>
        @else
            <a href="{{ route('subscription.subscribe', ['p' => 'Reply', 'period' => 'yearly', 'b' => 1]) }}" id="{{ $btnId }}"
                class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full">Subscribe</a>
        @endif
    @elseif ($card === 'invite' && $period === 'monthly')
        @if (!PlanMapper::isPlan($planName, ['Multi Pro Monthly', 'Multi Pro Yearly', 'Invite Reply', 'Multi Pro Trial', 'Invite Reply Trial']) && !$planExpired)
            <a id="{{ $btnId }}" href="{{ route('subscription.subscribe', ['p' => 'InviteReply', 'period' => 'monthly', 'b' => 1]) }}"
                class="text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 focus:ring-4 focus:outline-none focus:ring-blue-200 dark:focus:ring-blue-800 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200">Subscribe</a>
        @else
            <a href="#"
                class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full cursor-not-allowed"
                disabled>Active</a>
        @endif
    @elseif ($card === 'invite' && $period === 'yearly')
        @if ((in_array($planName, ['Multi Pro Monthly', 'Invite Reply Monthly']) || ($planName === 'Invite Reply' && $isMonthly)) && !$planExpired)
            <a id="{{ $btnId }}" href="{{ route('subscription.subscribe', ['p' => 'InviteReply', 'period' => 'yearly', 'b' => 1]) }}"
                class="text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 focus:ring-4 focus:outline-none focus:ring-blue-200 dark:focus:ring-blue-800 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200">
                Upgrade to Yearly
            </a>
        @elseif ((in_array($planName, ['Multi Pro Yearly', 'Multi Pro Trial', 'Invite Reply Trial']) || ($planName === 'Invite Reply' && !$isMonthly)) && !$planExpired)
            <a href="#"
                class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full cursor-not-allowed"
                disabled>Active</a>
        @else
            <a id="{{ $btnId }}" href="{{ route('subscription.subscribe', ['p' => 'InviteReply', 'period' => 'yearly', 'b' => 1]) }}"
                class="text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 focus:ring-4 focus:outline-none focus:ring-blue-200 dark:focus:ring-blue-800 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200">Subscribe</a>
        @endif
    @elseif ($card === 'agency')
        @if (!PlanMapper::isPlan($planName, ['Agency / Reseller']) && !$planExpired)
            <a id="{{ $btnId }}" href="{{ route('subscription.subscribe', ['p' => 'AgencyReseller', 'period' => $period, 'b' => 1]) }}"
                class="text-white bg-gradient-to-br from-slate-900 to-slate-700 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-slate-200 dark:focus:ring-slate-800 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full">Subscribe</a>
        @else
            <a href="#"
                class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm sm:text-base px-5 py-3 sm:py-2.5 text-center mr-2 mb-2 mt-2 inline-flex justify-center w-full cursor-not-allowed"
                disabled>Active</a>
        @endif
    @endif
@endif