@extends('layouts.app')

@section('title', 'Subscriptions')

@section('content')
<div class="container-fluid px-4 py-4" data-reveal>
    <div class="text-center mb-5">
        <h1 class="display-md mb-2 text-white">Upgrade Your Account</h1>
        <p class="text-muted fs-sm">Get premium analytics, access the transfer market, and verify your gaming identity.</p>
    </div>

    <!-- Monthly/Yearly toggle -->
    <div class="text-center mb-5">
        <div style="display:inline-flex;align-items:center;gap:var(--sp-3);background:var(--arena-surface-02);border:1px solid var(--arena-border);border-radius:var(--r-full);padding:var(--sp-2) var(--sp-4);">
            <span class="fs-sm text-muted">Monthly</span>
            <div class="toggle-arena" id="pricingPeriodToggle" role="switch" aria-checked="false" aria-label="Toggle yearly pricing" tabindex="0"></div>
            <span class="fs-sm text-muted">Yearly <span class="badge-arena badge-green" style="font-size:0.5625rem;">Save 25%</span></span>
        </div>
    </div>

    <!-- Pricing Grid -->
    <div class="row g-4 justify-content-center">
        @foreach($plans as $plan)
        <div class="col-md-6 col-lg-3">
            <div class="pricing-card h-100 {{ isset($plan['featured']) && $plan['featured'] ? 'featured' : '' }}">
                @if(isset($plan['featured']) && $plan['featured'])
                    <div class="pricing-tag">Most Popular</div>
                @endif
                <div class="pricing-tier">{{ strtoupper($plan['name']) }}</div>
                <div class="pricing-price">
                    <span class="currency">$</span>
                    <span class="amount"
                        data-price-monthly="{{ $plan['price_monthly'] }}"
                        data-price-yearly="{{ $plan['price_monthly'] > 0 ? round($plan['price_yearly'] / 12, 2) : 0 }}">
                        {{ $plan['price_monthly'] == 0 ? '0' : $plan['price_monthly'] }}
                    </span>
                    <span class="period">/ <span id="pricingLabel">month</span></span>
                </div>

                <!-- Features list -->
                <ul class="pricing-features">
                    @foreach($plan['features'] as $f)
                    <li class="pricing-feature">
                        @if($f['included'])
                            <i class="bi bi-check-circle-fill check"></i>
                        @else
                            <i class="bi bi-x-circle cross"></i>
                        @endif
                        <span style="{{ !$f['included'] ? 'opacity:0.4;' : '' }}">{{ $f['text'] }}</span>
                    </li>
                    @endforeach
                </ul>

                <button class="btn-arena {{ isset($plan['featured']) && $plan['featured'] ? 'btn-primary' : 'btn-secondary' }} w-100 mt-auto">
                    {{ $plan['price_monthly'] == 0 ? 'Get Started' : 'Subscribe Now' }}
                </button>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endsection
