@extends('layouts.guest-page')

@section('title', 'Pricing')
@section('description', 'Choose the plan that fits your trading needs. Flexible monthly, yearly, and lifetime options.')
@section('keywords', 'pricing, trading plans, subscription, cost, value')

@section('no-container', true)

@section('content')
    <div class="bg-[#030508] relative pt-32 pb-20 overflow-hidden font-sans">
        <!-- Hero Section -->
        <div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-500/50 to-transparent"></div>
        <div class="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-blue-500/10 rounded-full blur-[120px] pointer-events-none"></div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <h2 class="text-blue-500 font-bold tracking-widest uppercase text-xs mb-3">Transparent Pricing</h2>
                <h1 class="text-4xl md:text-6xl font-display font-bold text-white mb-6 leading-tight">
                    Invest in Your <br/>
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-500">Trading Future</span>
                </h1>
                <p class="text-gray-400 text-lg md:text-xl leading-relaxed">
                    Simple pricing. No hidden fees. Cancel anytime. Start with the free plan and upgrade as you scale.
                </p>
            </div>

            <!-- Pricing Toggle -->
            <div class="flex justify-center mb-16">
                <div class="bg-[#0E121A] border border-white/5 p-1 rounded-xl flex items-center shadow-lg relative z-10 overflow-x-auto max-w-full">
                    <button onclick="switchPricing('monthly')" id="btn-monthly" class="pricing-toggle-btn px-6 py-2 rounded-lg text-sm font-bold transition-all duration-200 bg-blue-600 text-white shadow-md whitespace-nowrap">
                        Monthly
                    </button>
                    <button onclick="switchPricing('yearly')" id="btn-yearly" class="pricing-toggle-btn px-6 py-2 rounded-lg text-sm font-bold transition-all duration-200 text-gray-400 hover:text-white flex items-center gap-2 whitespace-nowrap">
                        Yearly
                        @php
                            $yearlySavings = [];
                            foreach ($plans as $p) {
                                $m = $p->price_monthly ?? 0;
                                $y = $p->price_yearly ?? 0;
                                $oy = $p->offer_price_yearly ?? 0;
                                
                                // 1. Direct Discount
                                if ($y > 0 && $oy > 0 && $oy < $y) {
                                    $yearlySavings[] = round((($y - $oy) / $y) * 100);
                                } else {
                                    // 2. Monthly vs Yearly
                                    $finalY = ($oy > 0) ? $oy : $y;
                                    if ($m > 0 && $finalY > 0) {
                                        $yearlySavings[] = round((($m * 12) - $finalY) / ($m * 12) * 100);
                                    }
                                }
                            }
                            $minS = count($yearlySavings) > 0 ? min($yearlySavings) : 0;
                            $maxS = count($yearlySavings) > 0 ? max($yearlySavings) : 0;
                            $savingsText = ($minS > 0) ? ($minS == $maxS ? "Save ~$minS%" : "Save $minS% to $maxS%") : "";
                        @endphp
                        @if($savingsText)
                            <span class="bg-green-500/10 text-green-500 border border-green-500/20 text-[10px] px-1.5 py-0.5 rounded hidden sm:inline-block">{{ $savingsText }}</span>
                        @endif
                    </button>
                    <button onclick="switchPricing('lifetime')" id="btn-lifetime" class="pricing-toggle-btn px-6 py-2 rounded-lg text-sm font-bold transition-all duration-200 text-gray-400 hover:text-white flex items-center gap-2 whitespace-nowrap">
                        Lifetime
                        <span class="bg-amber-500/10 text-amber-500 border border-amber-500/20 text-[10px] px-1.5 py-0.5 rounded hidden sm:inline-block">Best Value</span>
                    </button>
                </div>
            </div>

            <!-- Pricing Cards Grid -->
            <div id="plans-container" class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-7xl mx-auto mb-24">
                @foreach ($plans as $plan)
                    @php
                        $marketing_bullets = is_array($plan->features) && isset($plan->features['marketing_bullets']) 
                                            ? $plan->features['marketing_bullets'] 
                                            : (is_array($plan->features) ? $plan->features : []);
                        $displayPrice = $plan->offer_price_monthly ?? $plan->price_monthly ?? 0;
                        $regularPrice = $plan->price_monthly ?? 0;
                        $isPro = $plan->name === 'Pro' || $plan->is_popular;
                    @endphp

                    <div class="relative flex flex-col p-8 rounded-3xl bg-[#0E121A] border {{ $isPro ? 'border-blue-500/50 shadow-2xl shadow-blue-500/10' : 'border-white/5' }} transition-all duration-300 hover:scale-[1.02] hover:border-blue-500/30 group pricing-card w-full"
                         data-price-monthly="{{ $plan->offer_price_monthly ?? $plan->price_monthly ?? 0 }}"
                         data-regular-monthly="{{ $plan->price_monthly ?? 0 }}"
                         data-price-yearly="{{ $plan->offer_price_yearly ?? $plan->price_yearly ?? 0 }}"
                         data-regular-yearly="{{ $plan->price_yearly ?? 0 }}"
                         data-price-lifetime="{{ $plan->offer_price_lifetime ?? $plan->price_lifetime ?? 0 }}"
                         data-regular-lifetime="{{ $plan->price_lifetime ?? 0 }}"
                         data-name="{{ $plan->name }}">
                        
                        @if ($isPro)
                            <div class="absolute -top-4 left-1/2 transform -translate-x-1/2 w-full text-center">
                                <span class="bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-[10px] font-bold px-4 py-1.5 rounded-full uppercase tracking-widest shadow-lg shadow-blue-500/30 ring-4 ring-[#030508]">
                                    {{ $plan->badge_text ?? 'Most Popular' }}
                                </span>
                            </div>
                        @endif

                        <div class="mb-6 {{ $isPro ? 'mt-4' : '' }}">
                            <h3 class="text-2xl font-display font-bold text-white">{{ $plan->name }}</h3>
                            <p class="text-gray-500 text-sm mt-2 font-medium">{{ $plan->description ?? 'Unlock your potential' }}</p>
                        </div>

                        <div class="mb-8 border-b border-white/5 pb-8">
                            <div class="flex items-baseline flex-wrap gap-x-2 gap-y-1 price-container">
                                @if($displayPrice == 0)
                                    <span class="text-5xl font-display font-bold text-white price-text">Free</span>
                                @else
                                    <span class="text-5xl font-display font-bold text-white price-text">${{ $displayPrice }}</span>
                                    <span class="text-gray-500 text-lg period-text">/mo</span>
                                @endif

                                <span class="text-lg text-gray-500 line-through decoration-gray-600 decoration-2 regular-price-text {{ (isset($plan->offer_price_monthly) && $plan->offer_price_monthly < $plan->price_monthly && $plan->price_monthly > 0) ? '' : 'hidden' }}">${{ $plan->price_monthly }}</span>
                                
                                <span class="text-xs font-bold text-green-400 bg-green-400/10 border border-green-400/20 px-2 py-0.5 rounded-full uppercase tracking-wide discount-badge {{ (isset($plan->offer_price_monthly) && $plan->offer_price_monthly < $plan->price_monthly && $plan->price_monthly > 0) ? '' : 'hidden' }}">
                                    @if(isset($plan->offer_price_monthly) && $plan->price_monthly > 0)
                                        {{ round((($plan->price_monthly - $plan->offer_price_monthly) / $plan->price_monthly) * 100) }}% OFF
                                    @endif
                                </span>
                                
                                <span class="hidden text-xs font-bold text-green-400 bg-green-400/10 border border-green-400/20 px-2 py-0.5 rounded-full uppercase tracking-wide savings-badge">
                                </span>
                            </div>
                        </div>

                        <div class="flex-grow mb-8 space-y-4">
                            @foreach ($marketing_bullets as $feature)
                                @if(is_string($feature))
                                <div class="flex items-start group-hover:translate-x-1 transition-transform duration-200">
                                    <div class="w-5 h-5 rounded-full {{ $isPro ? 'bg-blue-500/20' : 'bg-gray-800' }} flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">
                                        <svg class="w-3 h-3 {{ $isPro ? 'text-blue-400' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
                                    </div>
                                    <span class="text-gray-300 text-sm font-medium">{{ $feature }}</span>
                                </div>
                                @endif
                            @endforeach
                        </div>

                        <a href="{{ route('register') }}" class="cta-button w-full block text-center px-6 py-4 rounded-xl font-bold transition-all duration-200 {{ $isPro ? 'bg-blue-600 text-white hover:bg-blue-500 shadow-lg shadow-blue-600/20 hover:shadow-blue-600/30' : 'bg-white/5 text-white border border-white/10 hover:bg-white/10 hover:border-white/20' }}">
                            {{ $displayPrice == 0 ? 'Get Started Free' : 'Choose ' . $plan->name }}
                        </a>
                    </div>
                @endforeach
            </div>
            
            <script>
                function switchPricing(cycle) {
                    // Update Toggle Stylings
                    document.querySelectorAll('.pricing-toggle-btn').forEach(btn => {
                        btn.classList.remove('bg-blue-600', 'text-white', 'shadow-md');
                        btn.classList.add('text-gray-400', 'hover:text-white');
                    });
                    
                    const activeBtn = document.getElementById('btn-' + cycle);
                    activeBtn.classList.remove('text-gray-400', 'hover:text-white');
                    activeBtn.classList.add('bg-blue-600', 'text-white', 'shadow-md');

                    // Update Prices
                    document.querySelectorAll('.pricing-card').forEach(card => {
                        const price = parseFloat(card.getAttribute('data-price-' + cycle));
                        const regular = parseFloat(card.getAttribute('data-regular-' + cycle));
                        
                        const name = card.getAttribute('data-name');
                        const priceEl = card.querySelector('.price-text');
                        const regularEl = card.querySelector('.regular-price-text');
                        const periodEl = card.querySelector('.period-text');
                        const discountBadge = card.querySelector('.discount-badge');
                        const savingsBadge = card.querySelector('.savings-badge');
                        const ctaBtn = card.querySelector('.cta-button');

                        let shouldHide = false;
                        
                        if (name === 'Starter' || parseFloat(card.getAttribute('data-price-monthly')) === 0) {
                             if (cycle === 'yearly' || cycle === 'lifetime') {
                                 shouldHide = true;
                             }
                        } else {
                            if (price === 0) {
                                 shouldHide = true;
                            }
                        }

                        if (shouldHide) {
                            card.classList.add('hidden');
                            return; 
                        } else {
                            card.classList.remove('hidden');
                        }

                        if (price === 0 && (name === 'Starter' || parseFloat(card.getAttribute('data-price-monthly')) === 0)) {
                            // Free Plan Display
                            priceEl.textContent = 'Free';
                            if (periodEl) periodEl.textContent = '';
                            regularEl.classList.add('hidden');
                            discountBadge.classList.add('hidden');
                            if(savingsBadge) savingsBadge.classList.add('hidden');
                            ctaBtn.textContent = 'Get Started Free';
                        } else {
                            // Paid Plan Display
                            priceEl.textContent = '$' + price;
                            if (periodEl) {
                                if (cycle === 'monthly') periodEl.textContent = '/mo';
                                else if (cycle === 'yearly') periodEl.textContent = '/yr';
                                else periodEl.textContent = '';
                            }
                            
                            if (cycle === 'lifetime') {
                                ctaBtn.textContent = 'Get Lifetime Access';
                            } else {
                                ctaBtn.textContent = 'Subscribe Now';
                            }

                            // Calculate Direct Discount (Slashed Price)
                            let directDiscount = 0;
                            if (regular > price && regular > 0) {
                                directDiscount = Math.round(((regular - price) / regular) * 100);
                            }

                            // Calculate Savings vs Monthly (Yearly only)
                            let yearlySavings = 0;
                            const monthlyPrice = parseFloat(card.getAttribute('data-price-monthly') || 0);
                            if (cycle === 'yearly' && monthlyPrice > 0) {
                                yearlySavings = Math.round(((monthlyPrice * 12 - price) / (monthlyPrice * 12)) * 100);
                            }

                            if (regular > price && directDiscount > 0) {
                                regularEl.textContent = '$' + regular;
                                regularEl.classList.remove('hidden');
                                
                                discountBadge.textContent = directDiscount + '% OFF';
                                discountBadge.classList.remove('hidden');
                                if(savingsBadge) savingsBadge.classList.add('hidden');
                            } else {
                                regularEl.classList.add('hidden');
                                discountBadge.classList.add('hidden');
                                
                                if (cycle === 'yearly' && yearlySavings > 0) {
                                    if(savingsBadge) {
                                        savingsBadge.textContent = 'Save ' + yearlySavings + '%';
                                        savingsBadge.classList.remove('hidden');
                                    }
                                } else {
                                    if(savingsBadge) savingsBadge.classList.add('hidden');
                                }
                            }
                        }
                    });
                }
            </script>
        </div>
    </div>
@endsection