@extends('layouts.app')
@section('title', 'Upgrade Plan')
@section('page-title', 'Choose Your Plan')
@section('breadcrumb', 'Upgrade to unlock all features')

@section('content')
<div x-data="{ billing: 'monthly' }" class="max-w-5xl mx-auto">

    {{-- Billing toggle --}}
    <div class="flex justify-center mb-8">
        <div class="inline-flex items-center bg-slate-100 rounded-2xl p-1 gap-1">
            <button @click="billing='monthly'"
                    :class="billing==='monthly' ? 'bg-white shadow-sm text-slate-800' : 'text-slate-500'"
                    class="px-5 py-2 rounded-xl text-sm font-semibold transition-all">Monthly</button>
            <button @click="billing='yearly'"
                    :class="billing==='yearly' ? 'bg-white shadow-sm text-slate-800' : 'text-slate-500'"
                    class="px-5 py-2 rounded-xl text-sm font-semibold transition-all">
                Yearly
                <span class="ml-1.5 text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full font-bold">Save 20%</span>
            </button>
        </div>
    </div>

    {{-- Current plan badge --}}
    <div class="text-center mb-6">
        <span class="inline-flex items-center gap-1.5 text-sm text-slate-500 bg-slate-100 px-4 py-2 rounded-full">
            Current plan:
            <strong class="text-slate-800 capitalize">{{ $currentPlan }}</strong>
            @if(auth()->user()->tenant->isOnTrial())
            <span class="badge-yellow">Trial expires {{ auth()->user()->tenant->trial_ends_at->diffForHumans() }}</span>
            @endif
        </span>
    </div>

    {{-- Plan cards --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        @forelse($plans as $plan)
        <div class="relative card flex flex-col {{ $plan->is_popular ? 'border-2 border-brand-600 shadow-xl shadow-brand-100' : '' }} {{ $currentPlan === $plan->slug ? 'ring-2 ring-green-400' : '' }}">

            @if($plan->is_popular)
            <div class="absolute -top-3 left-1/2 -translate-x-1/2">
                <span class="bg-brand-600 text-white text-xs font-bold px-4 py-1 rounded-full shadow">Most Popular</span>
            </div>
            @endif

            @if($currentPlan === $plan->slug)
            <div class="absolute -top-3 right-4">
                <span class="bg-green-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow">Current Plan</span>
            </div>
            @endif

            <div class="mb-4">
                <h3 class="text-lg font-bold text-slate-800">{{ $plan->name }}</h3>
                <p class="text-sm text-slate-500 mt-1">{{ $plan->description }}</p>
            </div>

            <div class="mb-5">
                <div x-show="billing==='monthly'">
                    <span class="text-4xl font-black text-slate-800">₹{{ number_format($plan->price_monthly, 0) }}</span>
                    <span class="text-slate-400 text-sm">/month</span>
                </div>
                <div x-show="billing==='yearly'" x-cloak>
                    <span class="text-4xl font-black text-slate-800">₹{{ number_format($plan->price_yearly / 12, 0) }}</span>
                    <span class="text-slate-400 text-sm">/month</span>
                    <p class="text-sm text-green-600 font-semibold mt-1">₹{{ number_format($plan->price_yearly, 0) }}/year — Save ₹{{ number_format($plan->yearly_savings, 0) }}</p>
                </div>
            </div>

            <ul class="space-y-2 mb-6 flex-1">
                @foreach($plan->features ?? [] as $feature)
                <li class="flex items-start gap-2 text-sm text-slate-600">
                    <svg class="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                    {{ $feature }}
                </li>
                @endforeach
                <li class="flex items-start gap-2 text-sm text-slate-600">
                    <svg class="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                    Up to {{ $plan->max_users }} user{{ $plan->max_users > 1 ? 's' : '' }}
                </li>
                <li class="flex items-start gap-2 text-sm text-slate-600">
                    <svg class="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                    {{ $plan->max_invoices == 0 ? 'Unlimited' : $plan->max_invoices }} invoices/month
                </li>
            </ul>

            @if($currentPlan !== $plan->slug)
            <form method="POST" action="{{ route('upgrade.subscribe') }}">
                @csrf
                <input type="hidden" name="plan_id" value="{{ $plan->id }}">
                <input type="hidden" name="billing" x-bind:value="billing">

                <button type="submit"
                        class="w-full justify-center {{ $plan->is_popular ? 'btn-primary' : 'btn-secondary' }} btn">
                    @if($plan->price_monthly == 0)
                        Get Started Free
                    @else
                        Upgrade to {{ $plan->name }}
                    @endif
                </button>
            </form>
            @else
            <div class="w-full text-center py-2.5 bg-green-50 text-green-700 rounded-xl text-sm font-semibold">
                ✓ Current Plan
            </div>
            @endif
        </div>
        @empty
        <div class="col-span-3 text-center py-12 text-slate-400">
            <p>No plans configured yet. Contact support.</p>
        </div>
        @endforelse
    </div>

    {{-- Features comparison table --}}
    <div class="mt-10 card">
        <h2 class="text-base font-bold text-slate-800 mb-5 text-center">What's included in every plan</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center text-sm">
            @foreach([
                ['icon'=>'🧾','title'=>'GST Invoices','desc'=>'GSTR-1, GSTR-3B ready'],
                ['icon'=>'📊','title'=>'P&L & Balance Sheet','desc'=>'Full accounting reports'],
                ['icon'=>'👥','title'=>'Customers & Products','desc'=>'Unlimited records'],
                ['icon'=>'🏪','title'=>'Online Storefront','desc'=>'Public ordering page'],
                ['icon'=>'💸','title'=>'Expense Tracking','desc'=>'All expense types'],
                ['icon'=>'👔','title'=>'Employee & Salary','desc'=>'With payslip PDF'],
                ['icon'=>'📱','title'=>'WhatsApp Invoices','desc'=>'Auto-send on order'],
                ['icon'=>'🔌','title'=>'REST API','desc'=>'Mobile app ready'],
            ] as $f)
            <div class="p-4 bg-slate-50 rounded-xl">
                <div class="text-2xl mb-2">{{ $f['icon'] }}</div>
                <p class="font-semibold text-slate-700">{{ $f['title'] }}</p>
                <p class="text-xs text-slate-400 mt-1">{{ $f['desc'] }}</p>
            </div>
            @endforeach
        </div>
    </div>
</div>

@push('scripts')
<script>
// Auto-submit billing selection when Razorpay checkout form is present
document.querySelectorAll('form[action*="subscribe"]').forEach(form => {
    form.addEventListener('submit', function(e) {
        const billing = document.querySelector('[x-data]').__x.$data.billing;
        this.querySelector('[name="billing"]').value = billing;
    });
});
</script>
@endpush
@endsection