@php
    use App\Models\AppConfig;

    $taxSettings = AppConfig::getTaxSettings();
    $taxEnabled = ($taxSettings['enabled'] ?? 'no') === 'yes';
    $defaultTaxRate = (float) ($taxSettings['default_rate'] ?? 0);
    $selectedPlanId = old('plans');
    $plansContainPopular = $plans->contains(fn ($p) => (bool) $p->is_popular);
@endphp

<div class="register-step-header register-step-header--compact">
    <span class="register-step-eyebrow">{{ __('locale.labels.billing') }}</span>
    <h2>{{ __('locale.labels.select_plan') }}</h2>
    <p>{{ __('locale.plans.select_plan_as_per_requirement') }}</p>
</div>

<div class="register-billing-layout" id="register-billing-layout"
     data-tax-enabled="{{ $taxEnabled ? '1' : '0' }}"
     data-tax-rate="{{ $defaultTaxRate }}">
    <div class="register-billing-main">
        <div class="register-plan-grid pricing-data" role="radiogroup" aria-label="{{ __('locale.labels.select_plan') }}">
            @foreach($plans as $plan)
                @include('auth.register._plan-card', [
                    'plan' => $plan,
                    'selectedPlanId' => $selectedPlanId,
                    'plansContainPopular' => $plansContainPopular,
                ])
            @endforeach
        </div>
        <p class="register-plan-error" id="register-plan-error" role="alert">
            {{ __('locale.labels.select_plan') }}
        </p>
    </div>

    <aside class="register-billing-sidebar">
        <div class="register-billing-summary-card" aria-live="polite">
            <div class="register-summary-header">
                <h3>{{ __('locale.labels.total_price') }}</h3>
                <p>{{ __('locale.subscription.payment_for_plan') }}</p>
            </div>
            <div class="register-summary-body">
                <div class="register-summary-plan-name" id="register-summary-plan-name">—</div>
                <div class="register-summary-cycle" id="register-summary-cycle"></div>
                <ul class="register-summary-lines">
                    <li>
                        <span>{{ __('locale.plans.price') }}</span>
                        <span id="register-summary-subtotal">—</span>
                    </li>
                    <li id="register-summary-tax-row" @if(! $taxEnabled) style="display:none" @endif>
                        <span>{{ __('locale.labels.tax') }} (<span id="register-summary-tax-rate">{{ $defaultTaxRate }}</span>%)</span>
                        <span id="register-summary-tax">—</span>
                    </li>
                    <li class="register-summary-total">
                        <span>{{ __('locale.labels.total_price') }}</span>
                        <span id="register-summary-total">—</span>
                    </li>
                </ul>
                <div class="register-summary-renewal" id="register-summary-renewal">
                    <i data-feather="refresh-cw"></i>
                    <span id="register-summary-renewal-text">{{ __('locale.labels.renew') }}: {{ __('locale.labels.every') }} —</span>
                </div>
            </div>
            <div class="register-summary-trust">
                <i data-feather="lock"></i>
                <span>{{ __('locale.labels.payment_details') }}</span>
            </div>
        </div>
    </aside>
</div>

<div class="register-payment-section hide-for-free">
    <h3 class="register-payment-title">{{ __('locale.labels.payment_options') }}</h3>
    <p class="register-payment-subtitle">{{ __('locale.payment_gateways.click_on_correct_option') }}</p>

    @if($taxEnabled)
        <div class="register-tax-notice">
            {{ __('locale.tax.tax_rate_description', ['tax_rate' => $defaultTaxRate . '%']) }}
        </div>
    @endif

    <div class="register-payment-grid other-payment-options" role="radiogroup" aria-label="{{ __('locale.labels.payment_options') }}">
        @foreach($payment_methods as $method)
            <div class="register-payment-option">
                <input type="radio"
                       name="payment_methods"
                       id="register-payment-{{ $method->type }}"
                       class="register-payment-input"
                       value="{{ $method->type }}"
                       @checked($method->is_default) />
                <label class="register-payment-label" for="register-payment-{{ $method->type }}" title="{{ $method->name }}">
                    <x-payment-gateway-icon :gateway="$method->type" :label="$method->name" :show-name="false" :size="24" :tooltip="false" />
                    <span class="register-payment-name">{{ $method->name }}</span>
                </label>
            </div>
        @endforeach
    </div>
</div>