{{-- Subscription Pricing Box (with billing cycle toggle) --}}
{{-- All data is prepared by ProductService - no business logic in theme --}}

<div class="bg-white dark:bg-surface-dark border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-soft hover:shadow-soft-hover transition-shadow duration-300" data-cp-container="product">
    
    {{-- Inject Product Config for JS --}}
    @if(isset($pricingData['product_config']))
        <script>
            window.ProductConfig = @json($pricingData['product_config']);
        </script>
    @endif

    {{-- Billing Cycle Switcher --}}
    <div class="p-1 bg-gray-100 dark:bg-gray-800 rounded-xl mb-8 flex tier-switcher">
        @foreach($billingTiers as $cycleId => $tier)
            @if($tier)
                <button 
                    class="tier-btn @if(($pricingData['default_billing_cycle'] ?? '') == $cycleId) active bg-white dark:bg-surface-dark shadow-sm text-primary @else text-text-muted hover:text-primary @endif flex-1 py-2 text-xs font-bold rounded-lg transition-all" 
                    data-cp-action="select-cycle"
                    data-value="{{ $cycleId }}" 
                    type="button">
                    {{ $tier['billing_cycle_label'] }}
                </button>
            @endif
        @endforeach
    </div>

    <div class="space-y-4 mb-8">
        <p class="text-xs font-semibold text-text-muted uppercase tracking-wider mb-2">
            @lang('shop.Select Plan')
        </p>

        @foreach($pricingData['plans'] as $index => $plan)
            @php
                $planTiers = collect($plan['pricing_tiers']);
                $isDefault = $plan['is_default'] || ($index === 0 && !$pricingData['plans']->contains('is_default', true));
                
                // Get list of supported cycle IDs for this plan
                $supportedCycles = $planTiers->map(function($t) {
                    return $t['billing_cycle'] ?: 'onetime';
                })->implode(',');
            @endphp
            
            {{-- Plan Radio Card --}}
            <div class="relative" 
                data-cp-plan="{{ $plan['slug'] }}" 
                data-plan-cycles="{{ $supportedCycles }}" 
                data-value="{{ $plan['slug'] }}"
                @foreach($billingTiers as $cycleId => $tier)
                    @if($tier)
                        @php
                            // Match plan tier by Cycle ID
                            $planTier = $planTiers->first(function($t) use ($cycleId) {
                                $tCycleId = $t['billing_cycle'] ?: 'onetime';
                                return $tCycleId == $cycleId;
                            });
                        @endphp
                        data-price-{{ $cycleId }}="{{ $planTier ? number_format($planTier['price'], 2, '.', '') : '0.00' }}"
                        data-tier-{{ $cycleId }}="{{ $planTier ? $planTier['id'] : '' }}"
                    @endif
                @endforeach
            >
                <label class="block cursor-pointer group">
                    <input 
                        class="plan-radio sr-only" 
                        name="plan_id" 
                        type="radio" 
                        value="{{ $plan['id'] }}" 
                        data-cp-action="select-plan" 
                        data-value="{{ $plan['slug'] }}"
                        @if($isDefault) checked @endif 
                    />
                    <div class="plan-card border border-gray-200 dark:border-gray-700 rounded-xl p-4 transition-all hover:border-primary/50">
                        <div class="flex justify-between items-start mb-4">
                            <div class="flex items-center gap-3">
                                <div class="check-circle size-5 rounded-full border border-gray-300 dark:border-gray-600 flex items-center justify-center text-transparent transition-colors">
                                    <span class="material-symbols-outlined text-[14px] font-bold">check</span>
                                </div>
                                <div>
                                    <h4 class="font-bold text-text-main dark:text-white">
                                        {{ $plan['name'] }}
                                        @if($plan['is_popular'] || $isDefault)
                                        <span class="bg-primary/10 text-primary text-[10px] px-1.5 py-0.5 rounded ml-1">@lang('shop.POPULAR')</span>
                                        @endif
                                    </h4>
                                    <p class="text-xs text-text-muted">{{ $plan['description'] ?? 'Perfect for you' }}</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <span class="price-display font-bold text-lg text-text-main dark:text-white" data-cp-target="price">
                                    @php
                                        $defaultCycle = $pricingData['default_billing_cycle'];
                                        $activeTier = $planTiers->first(function($t) use ($defaultCycle) {
                                            $tCycleId = $t['billing_cycle'] ?: 'onetime';
                                            return $tCycleId == $defaultCycle;
                                        }) ?? $planTiers->first();
                                    @endphp
                                    ${{ number_format($activeTier['price'] ?? 0, 2) }}
                                </span>
                                <span class="text-sm font-normal text-text-muted duration-period">
                                    /{{ $activeTier['billing_cycle_label'] ?? 'mo' }}
                                </span>
                            </div>
                        </div>

                        @if(count($plan['features']) > 0)
                            {{-- Key Features (first 3) --}}
                            <ul class="pl-8 text-xs text-text-muted space-y-2 mb-4">
                                @foreach(array_slice($plan['features'], 0, 3) as $feature)
                                <li class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-[14px] text-green-500">check</span>
                                    {{ $feature }}
                                </li>
                                @endforeach
                            </ul>

                            @if(count($plan['features']) > 3)
                                {{-- Collapsible Extra Features --}}
                                <div class="extra-features hidden pl-8 text-xs text-text-muted space-y-2 mb-4 border-t border-gray-50 dark:border-gray-800 pt-4" data-cp-target="feature-list">
                                    @foreach(array_slice($plan['features'], 3) as $feature)
                                    <li class="flex items-center gap-2 @if($loop->first) pt-1 @endif">
                                        <span class="material-symbols-outlined text-[14px] text-green-500">check</span>
                                        {{ $feature }}
                                    </li>
                                    @endforeach
                                </div>

                                <div role="button"
                                    data-cp-action="toggle-features"
                                    data-expanded="false"
                                    class="toggle-features-btn relative z-10 w-full mt-2 py-2 text-[10px] font-bold uppercase tracking-wider text-primary/60 hover:text-primary transition-colors flex items-center justify-center gap-1 cursor-pointer">
                                    <span>@lang('shop.Show all features')</span>
                                    <span class="material-symbols-outlined text-[16px] transition-transform duration-200">expand_more</span>
                                </div>
                            @endif
                        @endif
                    </div>
                </label>
            </div>
        @endforeach
    </div>

    {{-- Hidden input for selected pricing tier --}}
    @php
        // Find default tier ID based on default cycle
        $defaultTier = null;
        if ($pricingData['default_billing_cycle'] && isset($billingTiers[$pricingData['default_billing_cycle']])) {
             $defaultTier = $billingTiers[$pricingData['default_billing_cycle']];
        } elseif ($billingTiers->isNotEmpty()) {
             $defaultTier = $billingTiers->first();
        }
        $defaultTierId = $defaultTier ? $defaultTier['id'] : '';
    @endphp
    <input type="hidden" name="pricing_tier_id" id="selected-pricing-tier-id" value="{{ $defaultTierId }}">

    {{-- Enhanced Add-ons Section --}}
    @php
        $currentTierAddons = isset($pricingData['addons_by_tier'][$defaultTierId]) 
            ? $pricingData['addons_by_tier'][$defaultTierId] 
            : [];
    @endphp
    
    @if(count($pricingData['available_addons'] ?? []) > 0)
    <div class="space-y-3 mb-8 pt-6 border-t border-gray-100 dark:border-gray-700" id="addon-container" data-cp-target="addon-list" data-current-tier-id="{{ $defaultTier ? $defaultTier['id'] : '' }}">
        <p class="text-xs font-semibold text-text-muted uppercase tracking-wider mb-2">
            @lang('shop.Optional Add-ons')
        </p>
        
        @foreach($pricingData['available_addons'] as $addonId => $addon)
            @php
                $isAvailable = isset($addon['tier_pricing'][$defaultTier['id']]);
                $addonTierData = $isAvailable ? $addon['tier_pricing'][$defaultTier['id']] : null;
            @endphp
            
            <div class="addon-item" 
                 data-addon-id="{{ $addonId }}" 
                 data-tier-pricing="{{ json_encode($addon['tier_pricing']) }}"
                 style="display: {{ $isAvailable ? 'block' : 'none' }};">
                <label class="flex items-start gap-3 cursor-pointer group">
                    <input 
                        name="addons[]" 
                        value="{{ $addonId }}" 
                        data-id="{{ $addonId }}"
                        data-price="{{ $addonTierData ? $addonTierData['price'] : 0 }}"
                        data-cp-action="toggle-addon"
                        class="addon-checkbox mt-1 w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary/20 dark:bg-surface-dark dark:border-gray-600" 
                        type="checkbox" 
                    />
                    <div class="flex-grow">
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-text-main dark:text-white">{{ $addon['name'] }}</span>
                            <span class="addon-price text-sm font-medium text-text-muted">
                                +<span class="price-value" data-cp-target="addon-price">${{ $addonTierData ? number_format($addonTierData['price'], 0) : 0 }}</span>
                            </span>
                        </div>
                        @if($addon['description'])
                            <p class="text-xs text-text-muted">{{ $addon['description'] }}</p>
                        @endif
                    </div>
                </label>
            </div>
        @endforeach
    </div>
    @endif

    {{-- Total Due Today --}}
    <div class="bg-gray-50 dark:bg-background-dark p-4 rounded-xl mb-4">
        <div class="flex justify-between items-end mb-1">
            <span class="text-sm text-text-muted">@lang('shop.Total Due Today')</span>
            <span class="text-2xl font-bold text-text-main dark:text-white" id="total-due-price" data-cp-target="total">
                ${{ $defaultTier ? number_format($defaultTier['price'], 2) : '0.00' }}
            </span>
        </div>
        <p class="text-xs text-text-muted text-right" data-cp-target="renewal-text">@lang('shop.Renews automatically. Cancel anytime.')</p>
    </div>

    {{-- Subscribe Button --}}
    <button type="button" data-cp-action="submit-cart"
        class="w-full bg-primary hover:bg-primary-dark text-white font-bold py-3.5 rounded-xl transition-all shadow-lg shadow-primary/20 hover:shadow-primary/40 flex items-center justify-center gap-2">
        <span data-cp-target="cta-text">@lang('shop.button|Subscribe Now')</span>
        <span class="material-symbols-outlined text-[20px]">arrow_forward</span>
    </button>

</div>