ladill-events/resources/views/events/pro/index.blade.php

<x-user-layout>
    <x-slot name="title">Plans</x-slot>
    @php
        $live = $subscription && $subscription->entitled();
    @endphp

    <div class="mx-auto max-w-5xl space-y-6" x-data="{ billing: 'monthly' }">
        @if (session('success'))
            <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ session('error') }}</div>
        @endif
        @if (session('upsell'))
            <div class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">{{ session('upsell') }}</div>
        @endif

        <div class="rounded-2xl border border-slate-200 bg-white px-6 py-5">
            <h1 class="text-2xl font-bold text-slate-900">Choose your Events plan</h1>
            <p class="mt-1 text-sm text-slate-600">Pay monthly from your Ladill wallet, or prepay 6/12/24 months via Paystack.</p>
            @if ($gatingActive && ! $live)
                <div class="mt-4 flex flex-wrap gap-2">
                    <button type="button" @click="billing = 'monthly'"
                            :class="billing === 'monthly' ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'"
                            class="rounded-lg px-3 py-1.5 text-sm font-medium transition">Monthly · wallet</button>
                    @foreach ($prepaidMonths as $months)
                        <button type="button" @click="billing = '{{ $months }}'"
                                :class="billing === '{{ $months }}' ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'"
                                class="rounded-lg px-3 py-1.5 text-sm font-medium transition">{{ $months }} months · Paystack</button>
                    @endforeach
                </div>
            @endif
        </div>

        @if ($live)
            <div class="rounded-2xl border border-slate-200 bg-white px-6 py-5">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div class="text-sm text-slate-600">
                        <strong>Business</strong> active
                        @if ($subscription->current_period_end)
                            until <strong>{{ $subscription->current_period_end->format('d M Y') }}</strong>
                        @endif
                        @if ($subscription->auto_renew)
                            · renews from wallet
                        @else
                            · prepaid / auto-renew off
                        @endif
                    </div>
                    @if ($subscription->auto_renew)
                        <form method="post" action="{{ route('events.pro.cancel') }}" onsubmit="return confirm('Turn off auto-renew?');">
                            @csrf
                            <button class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50">Cancel auto-renew</button>
                        </form>
                    @elseif ($subscription->status === 'canceled')
                        <form method="post" action="{{ route('events.pro.subscribe-enterprise') }}">
                            @csrf
                            <button class="btn-primary">Resume subscription</button>
                        </form>
                    @endif
                </div>
            </div>
        @endif

        <div class="grid gap-5 lg:grid-cols-2">
            <div class="flex flex-col rounded-2xl border border-slate-200 bg-white p-6 {{ $planKey === 'free' ? 'ring-2 ring-indigo-500' : '' }}">
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Free</p>
                <p class="mt-2 text-3xl font-bold text-slate-900">GHS 0</p>
                <p class="mt-1 text-sm text-slate-500">Get started with ticketed events</p>
                <ul class="mt-5 flex-1 space-y-2 text-sm text-slate-700">
                    <li>{{ (int) config('events.free.max_live_events', 2) }} live events</li>
                    <li>{{ (int) config('events.free.max_tickets_per_month', 100) }} tickets / month</li>
                    <li>Ladill Pay (zero-config)</li>
                    <li>100 emails + 50 SMS / month</li>
                </ul>
                @if ($planKey === 'free')
                    <p class="mt-6 text-sm font-medium text-indigo-700">Current plan</p>
                @endif
            </div>

            <div class="flex flex-col rounded-2xl border border-slate-200 bg-gradient-to-b from-slate-900 to-slate-800 p-6 text-white {{ in_array($planKey, ['enterprise', 'pro'], true) ? 'ring-2 ring-amber-400' : '' }}">
                <p class="text-xs font-semibold uppercase tracking-wide text-amber-300">Business</p>
                <x-plan-tier-price :currency="$currency" :monthly-minor="$enterprisePriceMinor" dark />
                <ul class="mt-5 flex-1 space-y-2 text-sm text-slate-200">
                    <li>Unlimited events & tickets</li>
                    <li>Programmes & badges</li>
                    <li>Unlimited email & SMS</li>
                    <li>Team seats & dedicated onboarding</li>
                </ul>
                <div class="mt-6">
                    @if (in_array($planKey, ['enterprise', 'pro'], true))
                        <p class="text-sm text-slate-200">Current plan</p>
                    @elseif ($gatingActive && ! $hasPaidPlan)
                        <form x-show="billing === 'monthly'" method="post" action="{{ route('events.pro.subscribe-enterprise') }}">
                            @csrf
                            <button class="w-full rounded-xl bg-amber-400 px-4 py-2.5 text-sm font-semibold text-slate-900 hover:bg-amber-300">Upgrade — monthly wallet</button>
                        </form>
                        @foreach ($prepaidMonths as $months)
                            <form x-show="billing == {{ $months }}" method="post" action="{{ route('events.pro.subscribe-prepaid') }}">
                                @csrf
                                <input type="hidden" name="plan" value="enterprise">
                                <input type="hidden" name="months" value="{{ $months }}">
                                <button type="submit" class="w-full rounded-xl bg-amber-400 px-4 py-2.5 text-sm font-semibold text-slate-900 hover:bg-amber-300">Pay {{ $months }} months via Paystack</button>
                            </form>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
</x-user-layout>