{{-- Multi-Plan Pricing Box (One-Time with Multiple Plans) --}}
{{-- 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">
    
    <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
                $tier = $plan['pricing_tiers']->first();
                $isDefault = $plan['is_default'] || ($index === 0 && !$pricingData['plans']->contains('is_default', true));
            @endphp
            
            {{-- Plan Radio Card --}}
            <div class="relative" 
                 data-cp-plan="{{ $plan['slug'] }}" 
                 data-plan-cycles="one-time"
                 data-price-one-time="{{ number_format($tier['price'], 2, '.', '') }}"
                 data-tier-one-time="{{ $tier['id'] }}"
                 data-tier-id="{{ $tier['id'] }}"
                 data-price="{{ number_format($tier['price'], 2, '.', '') }}">
                <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'] }}"
                        data-price="{{ number_format($tier['price'], 2, '.', '') }}"
                        data-tier-id="{{ $tier['id'] }}"
                        @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">
                                    ${{ number_format($tier['price'], 0) }}
                                </span>
                                <span class="text-sm font-normal text-text-muted">/@lang('shop.once')</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"
                                    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 --}}
    <input type="hidden" name="pricing_tier_id" id="selected-pricing-tier-id" value="{{ $pricingData['default_plan']['pricing_tiers']->first()['id'] ?? '' }}">

    {{-- Optional Add-ons --}}
    @php
        $defaultTier = $pricingData['default_plan']['pricing_tiers']->first();
        // If no default plan/tier, use the first available tier from the first plan as fallback
        if (!$defaultTier && isset($pricingData['plans'][0])) {
            $defaultTier = $pricingData['plans'][0]['pricing_tiers']->first();
        }
    @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 = $defaultTier && 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 ? number_format($addonTierData['price'], 2, '.', '') : '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">
                ${{ number_format($pricingData['default_plan']['pricing_tiers']->first()['price'] ?? 0, 2) }}
            </span>
        </div>
        <p class="text-xs text-text-muted text-right">@lang('shop.One-time payment. No recurring fees.')</p>
    </div>

    {{-- Purchase 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>@lang('shop.button|Purchase Now')</span>
        <span class="material-symbols-outlined text-[20px]">arrow_forward</span>
    </button>
    
    {{-- Payment Icons --}}
    <div class="flex items-center justify-center gap-4 mt-4 opacity-60">
        <img alt="Visa" class="h-3 grayscale" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDde4KSSHNFYlL0hNLwTZYmb9qAxHyWSZTJ0JAi55ddGKpDPSpDwiZv6MzleGjVs0XiP4kCLU9Fmtae8taAWMx8BQz0IRP72sGCh54iPDo8yqnjfJA3jpQB7kExmeYchJ47f2Ds8LzC98B7JphG0oAU8DUGIshN-ql2HHj5bsG_MbpWNqtKP5mNNwJu73cApPVexT-KG-pCKEII0DuMIgd7S_zzef6_o5fs-XjT1VrRESrKhpYhWXShIRBrRZtyDvM3xz2Lmy1Po9I" />
        <img alt="Mastercard" class="h-4 grayscale" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDqI9jd8OpCYLYQXh_4Hzlf0tY8-VRgpwRK4udj7FGrm2MiAF8e7Npv7X1A7Jmh408ux8hWlXVwjR-PizDq2y0qcMiNYKE7vbIGSVoQPBkeE8iGSgcWZ9c-4P-iLbSnpBZhHivleiKlzH9sGRnswqPuzHB277wfHwe9u4W29WzGuqR3eiQrcNJ1KWenL67FH7zHy_eKBqwSmca-XaUBOLYmaOov_bX1Fhom4sd2KFqM4Olt1sLJjCTjnXFO7ljXQxW-doBNHePLOj0" />
        <img alt="PayPal" class="h-3 grayscale" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDC7gdkUJ12AVd1d1agQ1eR-wZyGTkjYw2cQxAbZPZEAWsAVdGJQ2YWyDuRYy4Uod8jJCKN91cFa0hxSsdpQqD2TIjrKN6Q9tlGAT2NcSumXutzp5iKq10LrK0zWlqcHCJPaZiloCp_OkpDvsIx1GKVIXOmXdpA3bfqc7S-vgf4rOZy7UzC9K3705E2psGVpWDBmHo9Xiyr7ooWDS6QrEyQyUK5GLET--k_MqgMTWf3yLi5zB4dEOWc-fpvnEjJriwXJSaYEFPNkDo" />
    </div>
</div>