{{-- Single Plan Pricing Box --}}
{{-- All data is prepared by ProductService - no business logic in theme --}}

@php
    $plan = $defaultPlan;
    $tier = $plan['pricing_tiers']->first();
@endphp

<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"
     data-cp-plan="{{ $plan['slug'] ?? 'default' }}" 
     data-plan-cycles="onetime"
     data-price-onetime="{{ number_format($tier['price'], 2, '.', '') }}"
     data-tier-onetime="{{ $tier['id'] }}"
     data-tier-id="{{ $tier['id'] }}"
     data-price="{{ number_format($tier['price'], 2, '.', '') }}">
    
    {{-- Plan Header --}}
    <div class="mb-6">
        <h4 class="text-xl font-bold text-text-main dark:text-white">{{ $plan['name'] }}</h4>
        @if($plan['description'])
            <p class="text-sm text-text-muted mt-1">{{ $plan['description'] }}</p>
        @endif
    </div>

    {{-- Price Display --}}
    <div class="mb-8">
        <div class="flex items-baseline gap-2">
            <span class="text-4xl font-bold text-text-main dark:text-white">${{ number_format($tier['price'], 0) }}</span>
            <span class="text-text-muted">{{ $tier['billing_cycle_label'] }}</span>
        </div>
    </div>

    {{-- Features List --}}
    @if(count($plan['features']) > 0)
    <div class="mb-8">
        <h5 class="text-sm font-semibold text-text-muted uppercase tracking-wider mb-4">@lang('shop.What\'s Included')</h5>
        <ul class="space-y-3">
            @foreach($plan['features'] as $feature)
            <li class="flex items-start gap-3">
                <span class="material-symbols-outlined text-green-500 text-[20px] mt-0.5">check_circle</span>
                <span class="text-sm text-text-main dark:text-white flex-1">{{ $feature }}</span>
            </li>
            @endforeach
        </ul>
    </div>
    @endif

    {{-- Hidden Form Inputs --}}
    <input type="hidden" name="plan_id" value="{{ $plan['id'] }}">
    <input type="hidden" name="pricing_tier_id" id="selected-pricing-tier-id" value="{{ $tier['id'] }}">

    {{-- Optional Add-ons --}}
    @if($tier['addons']->count() > 0)
    <div class="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="{{ $tier['id'] }}">
        <h5 class="text-sm font-semibold text-text-muted uppercase tracking-wider mb-4">@lang('shop.Optional Add-ons')</h5>
        <div class="space-y-3">
            @foreach($tier['addons'] as $addon)
            <div class="addon-item" 
                 data-addon-id="{{ $addon['id'] }}" 
                 data-tier-pricing="{{ json_encode([$tier['id'] => ['price' => $addon['price']]]) }}">
                <label class="flex items-start gap-3 cursor-pointer group">
                    <input 
                        name="addons[]" 
                        value="{{ $addon['id'] }}" 
                        data-id="{{ $addon['id'] }}"
                        data-price="{{ number_format($addon['price'], 2, '.', '') }}"
                        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">{{ number_format($addon['price'], 0) }}</span>
                            </span>
                        </div>
                        @if($addon['description'])
                            <p class="text-xs text-text-muted">{{ $addon['description'] }}</p>
                        @endif
                    </div>
                </label>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Total Price --}}
    <div class="bg-gray-50 dark:bg-background-dark p-4 rounded-xl mb-4">
        <div class="flex justify-between items-center">
            <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($tier['price'], 2) }}</span>
        </div>
    </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>

</div>