@php
    $selectedMonths = (int) ($selectedMonths ?? 1);
    $selectedPlan = $selectedPlan ?? null;
    $style = $style ?? 'app';
    $isLogin = $style === 'login';
@endphp

@if (! empty($tiers) && count($tiers) > 0)
    @if ($isLogin)
        <fieldset class="login-plans">
            <legend class="login-label">Plan</legend>
            <div class="login-plan-grid">
                @foreach ($tiers as $tier)
                    <label class="login-plan">
                        <input type="radio" name="plan_slug" value="{{ $tier->slug }}"
                               @checked($selectedPlan === $tier->slug)>
                        <span class="login-plan-term">{{ $tier->name }}</span>
                        <span class="login-plan-price">{{ \App\Support\Currency::format($tier->monthly_price) }}/mo</span>
                        @if ($tier->includes_branding)
                            <span class="login-plan-save">Branding included</span>
                        @endif
                    </label>
                @endforeach
            </div>
            @error('plan_slug')<p class="login-error">{{ $message }}</p>@enderror
        </fieldset>
    @else
        <div class="grid sm:grid-cols-3 gap-3 mb-4" x-data="{ plan: '{{ $selectedPlan }}' }">
            @foreach ($tiers as $tier)
                <label class="relative cursor-pointer rounded-xl border p-4 transition-colors border-themed bg-themed-subtle"
                       :class="plan === '{{ $tier->slug }}' ? 'ring-2 ring-teal-500 bg-teal-500/5' : ''">
                    <input type="radio" name="plan_slug" value="{{ $tier->slug }}" class="sr-only"
                           x-model="plan" @checked($selectedPlan === $tier->slug)>
                    <p class="text-sm font-semibold">{{ $tier->name }}</p>
                    <p class="text-lg font-semibold mt-1">{{ \App\Support\Currency::format($tier->monthly_price) }}/mo</p>
                    <p class="text-xs text-themed-muted mt-1">
                        {{ $tier->max_devices ? $tier->max_devices.' devices' : 'Unlimited devices' }} ·
                        {{ $tier->max_users ? $tier->max_users.' users' : 'Unlimited users' }}
                    </p>
                    @if ($tier->includes_branding)
                        <p class="text-xs text-emerald-400 mt-1">Branding included</p>
                    @endif
                </label>
            @endforeach
        </div>
        @error('plan_slug')<p class="text-sm text-red-400 mt-2">{{ $message }}</p>@enderror
    @endif
@endif

@if ($isLogin)
    <fieldset class="login-plans">
        <legend class="login-label">Subscription length</legend>
        <div class="login-plan-grid">
            @foreach ($plans as $plan)
                <label class="login-plan">
                    <input type="radio" name="plan_months" value="{{ $plan['months'] }}"
                           @checked($selectedMonths === $plan['months'])>
                    <span class="login-plan-term">{{ $plan['label'] }}</span>
                    <span class="login-plan-price">{{ $plan['price_formatted'] }}</span>
                    @if ($plan['discount_percent'] > 0)
                        <span class="login-plan-save">Save {{ rtrim(rtrim(number_format($plan['discount_percent'], 1), '0'), '.') }}%</span>
                    @else
                        <span class="login-plan-save">{{ $plan['per_month_formatted'] }}/mo</span>
                    @endif
                    @if ($plan['recommended'])
                        <span class="login-plan-badge">Best value</span>
                    @endif
                </label>
            @endforeach
        </div>
        @error('plan_months')<p class="login-error">{{ $message }}</p>@enderror
    </fieldset>
@else
    <div class="grid sm:grid-cols-2 lg:grid-cols-5 gap-3" x-data="{ months: {{ $selectedMonths }} }">
        @foreach ($plans as $plan)
            <label class="relative cursor-pointer rounded-xl border p-4 transition-colors
                          {{ $plan['recommended'] ? 'border-teal-500/50' : 'border-themed' }}
                          bg-themed-subtle"
                   :class="months == {{ $plan['months'] }} ? 'ring-2 ring-teal-500 bg-teal-500/5' : ''">
                <input type="radio" name="plan_months" value="{{ $plan['months'] }}" class="sr-only"
                       x-model.number="months" @checked($selectedMonths === $plan['months'])>
                @if ($plan['recommended'])
                    <span class="badge-info absolute -top-2 right-2">Best value</span>
                @endif
                <p class="text-xs text-themed-muted">{{ $plan['label'] }}</p>
                <p class="text-lg font-semibold mt-1">{{ $plan['price_formatted'] }}</p>
                @if ($plan['discount_percent'] > 0)
                    <p class="text-xs text-themed-muted line-through">{{ $plan['list_price_formatted'] }}</p>
                    <p class="text-xs text-emerald-400 mt-1">Save {{ rtrim(rtrim(number_format($plan['discount_percent'], 1), '0'), '.') }}%</p>
                @else
                    <p class="text-xs text-themed-muted mt-1">{{ $plan['per_month_formatted'] }}/mo</p>
                @endif
            </label>
        @endforeach
    </div>
    @error('plan_months')<p class="text-sm text-red-400 mt-2">{{ $message }}</p>@enderror
@endif