@extends('layouts.app')

@section('title', 'Plans & Pricing')

@push('styles')
<style>
    .plans-page{max-width:1050px;margin:0 auto}
    .plans-hero{text-align:center;margin-bottom:32px}
    .plans-hero h1{font-size:32px;font-weight:700;color:var(--text-primary);letter-spacing:-.5px;margin-bottom:6px}
    .plans-hero p{font-size:14px;color:var(--text-secondary)}

    .plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

    .plan-card{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:28px 20px;text-align:center;transition:all .2s;position:relative;display:flex;flex-direction:column}
    .plan-card:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.25)}
    .plan-card.current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
    .plan-card.featured{border-color:var(--brand)}

    .plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:5px 16px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
    .plan-badge.best{background:var(--accent);color:#fff}
    .plan-badge.popular{background:var(--brand);color:var(--brand-fg)}

    .plan-icon-wrap{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
    .plan-icon-wrap svg{width:22px;height:22px;stroke:#fff}
    .plan-name{font-size:17px;font-weight:700;color:var(--text-primary);margin-bottom:2px}
    .plan-users{font-size:11px;color:var(--text-muted);background:var(--bg-input);display:inline-block;padding:2px 10px;border-radius:12px;margin-bottom:14px}
    .plan-desc{font-size:12px;color:var(--text-secondary);margin-bottom:16px;line-height:1.5}

    .plan-price-wrap{margin-bottom:8px}
    .plan-price{font-size:38px;font-weight:800;color:var(--text-primary);font-family:'JetBrains Mono',monospace;line-height:1.1;transition:all .2s}
    .plan-price .period{font-size:13px;font-weight:400;color:var(--text-muted)}
    .plan-save{font-size:11px;color:var(--positive);font-weight:600;margin-top:2px;height:18px}

  .toggle-inline{display:inline-flex;background:var(--bg-input);border:1px solid var(--border);border-radius:24px;padding:2px;margin:0 auto 16px}
.toggle-inline button{padding:7px 16px;border-radius:22px;font-size:12px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--text-secondary);font-family:'Inter',sans-serif;transition:all .15s;white-space:nowrap}
.toggle-inline button.active{background:var(--brand);color:var(--brand-fg)}

    .feat-list{text-align:left;flex:1;margin-bottom:18px}
    .feat{display:flex;align-items:flex-start;gap:7px;padding:6px 0;font-size:12px;color:var(--text-secondary);border-bottom:1px solid var(--border)}
    .feat:last-child{border-bottom:none}
    .feat svg{width:12px;height:12px;flex-shrink:0;margin-top:2px;color:var(--accent)}

    .plan-btn{width:100%;padding:12px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;border:none;transition:all .15s;font-family:'Inter',sans-serif;background:var(--brand);color:var(--brand-fg)}
    .plan-btn:hover{filter:brightness(1.08)}
    .plan-btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
    .plan-btn.outline{background:transparent;color:var(--text-primary);border:1px solid var(--border)}
    .plan-btn.free{background:var(--bg-card-hover);color:var(--text-primary);border:1px solid var(--border)}

    .trial-banner{background:var(--brand-subtle);border:1px solid var(--brand-border);border-radius:14px;padding:12px 20px;text-align:center;margin-bottom:24px;font-size:13px;color:var(--brand);display:flex;align-items:center;justify-content:center;gap:8px}

    @media(max-width:900px){.plans-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}}
    @media(max-width:540px){
        .plan-price{font-size:32px}
        .plan-card{padding:22px 16px}
    }
</style>
@endpush

@section('content')

@if(session('success'))
<div style="position:fixed;bottom:24px;right:24px;z-index:9999;padding:14px 22px;border-radius:12px;font-size:13px;font-weight:500;background:var(--brand);color:var(--brand-fg);animation:slideUp .3s ease">
    {{ session('success') }}
</div>
<script>setTimeout(()=>document.querySelector('div[style*="fixed"]')?.remove(),3000)</script>
<style>@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}</style>
@endif

@if($isTrialing && $trialEndsAt)
<div class="trial-banner">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
    <span>Your <strong>35-day free trial</strong> ends <strong>{{ $trialEndsAt->format('M d, Y') }}</strong> — {{ $daysRemaining }} days remaining.</span>
</div>
@endif

<div class="plans-page">
    <div class="plans-hero">
        <h1>Choose Your Plan</h1>
        <p>Upgrade anytime. Cancel anytime. All prices in USD.</p>
    </div>

    <div class="plans-grid">
        @foreach($plans as $plan)
        @php
            $isCurrent = in_array($currentPlanId, [$plan->id, $plan->yearly_id ?? 0]);
            $cardClass = $isCurrent ? 'current' : ($plan->badge ? 'featured' : '');
            $isPremium = $plan->plan_type === 'premium';
            $isFamily = $plan->plan_type === 'family';
            $isStarter = $plan->plan_type === 'starter';
        @endphp
        
        <div class="plan-card {{ $cardClass }}" 
             id="card-{{ $plan->slug }}"
             data-slug="{{ $plan->slug }}"
             data-monthly="{{ $plan->monthly_price ?? 0 }}"
             data-yearly="{{ $plan->yearly_price ?? 0 }}"
             data-yearly-slug="{{ $plan->yearly_slug ?? '' }}">
            
            @if($plan->badge)
            <div class="plan-badge {{ $plan->badge === 'Best Value' ? 'best' : 'popular' }}">{{ $plan->badge }}</div>
            @endif
            
            <div class="plan-icon-wrap" style="background:{{ $isStarter ? 'var(--text-muted)' : ($isPremium ? 'var(--brand)' : 'var(--accent)') }}">
                @if($isStarter)
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
                @elseif($isPremium)
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                @else
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                @endif
            </div>
            
            <div class="plan-name">{{ $plan->name }}</div>
            <div class="plan-users">{{ $plan->max_users }} {{ $plan->max_users > 1 ? 'Users' : 'User' }}</div>
            <div class="plan-desc">{{ $plan->description }}</div>
            
            <div class="plan-price-wrap">
                @if($isStarter)
                <div class="plan-price" id="price-{{ $plan->slug }}" style="color:var(--text-muted)">Free</div>
                @else
                <div class="plan-price" id="price-{{ $plan->slug }}">
                    ${{ number_format($plan->monthly_price, 0) }}<span class="period">/month</span>
                </div>
                @endif
                <div class="plan-save" id="save-{{ $plan->slug }}"></div>
            </div>
           @if(!$isStarter)
<div style="display:flex;justify-content:center">
    <div class="toggle-inline">
        <button class="active" onclick="switchBilling('monthly', '{{ $plan->slug }}')">Monthly</button>
        <button onclick="switchBilling('yearly', '{{ $plan->slug }}')">Yearly</button>
    </div>
</div>
@endif
            
            <div class="feat-list">
                @foreach($plan->features as $feat)
                <div class="feat">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
                    {{ $feat }}
                </div>
                @endforeach
            </div>
            
            <form method="POST" action="{{ route('plans.subscribe') }}" id="form-{{ $plan->slug }}">
                @csrf
                <input type="hidden" name="plan" value="{{ $plan->slug }}" id="plan-input-{{ $plan->slug }}">
                <input type="hidden" name="billing" value="monthly" id="billing-{{ $plan->slug }}">
                <button type="submit" class="plan-btn {{ $isStarter ? 'free' : '' }} {{ $isCurrent ? 'outline' : '' }}" {{ $isCurrent ? 'disabled' : '' }}>
                    {{ $isCurrent ? 'Current Plan' : ($isStarter ? 'Get Started Free' : 'Upgrade') }}
                </button>
            </form>
        </div>
        @endforeach
    </div>
</div>

<script>
function switchBilling(type, slug) {
    const card = document.getElementById('card-' + slug);
    if (!card) return;
    
    const monthly = parseFloat(card.dataset.monthly) || 0;
    const yearly = parseFloat(card.dataset.yearly) || 0;
    const yearlySlug = card.dataset.yearlySlug;
    
    const priceEl = document.getElementById('price-' + slug);
    const saveEl = document.getElementById('save-' + slug);
    const billingInput = document.getElementById('billing-' + slug);
    const planInput = document.getElementById('plan-input-' + slug);
    const buttons = card.querySelectorAll('.toggle-inline button');
    
    buttons.forEach(b => b.classList.remove('active'));
    
    if (type === 'yearly') {
        priceEl.innerHTML = '$' + yearly + '<span class="period">/year</span>';
        saveEl.textContent = 'Save $' + ((monthly * 12) - yearly) + '/year';
        saveEl.style.display = 'block';
        billingInput.value = 'yearly';
        if (planInput && yearlySlug) planInput.value = yearlySlug;
        buttons[1].classList.add('active');
    } else {
        priceEl.innerHTML = '$' + monthly + '<span class="period">/month</span>';
        saveEl.style.display = 'none';
        billingInput.value = 'monthly';
        if (planInput) planInput.value = slug;
        buttons[0].classList.add('active');
    }
}
</script>
@endsection