@extends('layouts.app')
@section('title', 'Upgrade Plan')
@section('content')
<div class="max-w-6xl mx-auto px-4 py-8">
    <div class="text-center mb-10">
        <h1 class="text-3xl font-bold text-gray-800">Choose Your Plan</h1>
        <p class="text-gray-500 mt-2">Your balance: <strong class="text-green-600">${{ number_format($user->balance, 2) }}</strong></p>
        @if($user->activePlan)
        <div class="mt-3 inline-flex items-center bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">
            <i class="fas fa-crown mr-2"></i>Active: {{ $user->activePlan->plan->name }} plan (expires {{ $user->activePlan->expires_at->format('M d, Y') }})
        </div>
        @endif
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        @foreach($plans as $plan)
        <div class="bg-white rounded-2xl shadow-lg p-8 card-hover {{ $plan->name === 'Basic' ? 'ring-2 ring-purple-500 relative' : '' }}">
            @if($plan->name === 'Basic')
            <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-purple-600 text-white text-xs font-bold px-4 py-1 rounded-full">MOST POPULAR</div>
            @endif
            @if($plan->name === 'VIP')
            <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-yellow-400 text-gray-900 text-xs font-bold px-4 py-1 rounded-full"><i class="fas fa-crown mr-1"></i>VIP</div>
            @endif
            <h3 class="text-xl font-bold text-gray-800 mb-2">{{ $plan->name }}</h3>
            <div class="text-4xl font-extrabold text-gray-800 mb-1">${{ number_format($plan->price, 2) }}</div>
            <p class="text-sm text-gray-500 mb-5">for {{ $plan->duration_days }} days</p>
            <div class="space-y-3 mb-6">
                <div class="flex items-center text-sm">
                    <i class="fas fa-check text-green-500 mr-3 w-4"></i>
                    <span>{{ $plan->daily_survey_limit }} surveys per day</span>
                </div>
                <div class="flex items-center text-sm">
                    <i class="fas fa-check text-green-500 mr-3 w-4"></i>
                    <span>Access to premium surveys</span>
                </div>
                <div class="flex items-center text-sm">
                    <i class="fas fa-check text-green-500 mr-3 w-4"></i>
                    <span>Referral commissions</span>
                </div>
                @if($plan->description)
                <p class="text-xs text-gray-400 mt-3">{{ $plan->description }}</p>
                @endif
            </div>
            @if($user->activePlan && $user->activePlan->plan_id === $plan->id)
            <button disabled class="w-full bg-gray-200 text-gray-500 py-3 rounded-xl font-bold cursor-not-allowed">Current Plan</button>
            @elseif($plan->price == 0)
            <button disabled class="w-full bg-gray-100 text-gray-500 py-2 rounded-xl text-sm cursor-not-allowed">Default Plan</button>
            @else
            <form action="{{ route('plans.purchase', $plan->id) }}" method="POST">
                @csrf
                <button type="submit" onclick="return confirm('Purchase {{ $plan->name }} plan for ${{ number_format($plan->price, 2) }}?')"
                    class="w-full {{ $plan->name === 'VIP' ? 'bg-yellow-400 text-gray-900 hover:bg-yellow-300' : 'gradient-bg text-white hover:opacity-90' }} py-3 rounded-xl font-bold transition">
                    Buy for ${{ number_format($plan->price, 2) }}
                </button>
            </form>
            @endif
        </div>
        @endforeach
    </div>
    <div class="mt-6 text-center text-sm text-gray-400">
        <i class="fas fa-info-circle mr-1"></i>Plans are deducted from your wallet balance. <a href="{{ route('wallet.deposit') }}" class="text-purple-600 hover:underline">Deposit funds</a> if needed.
    </div>
</div>
@endsection