Files
ladill-events/resources/views/events/pro/index.blade.php
T
isaaccladandCursor 4c87c786da
Deploy Ladill Events / deploy (push) Successful in 42s
Add Events Pro/Business and BYO ticket gateways.
Cut ticket checkouts off Ladill Pay, settle to merchant gateways at 0% platform fee, and mirror Invoice freemium pricing (GHS 49 / 149).

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-15 01:26:28 +00:00

101 lines
7.0 KiB
PHP

<x-app-layout title="Plans" heading="Events plans">
@php
$proPrice = number_format($proPriceMinor / 100, 0);
$enterprisePrice = number_format($enterprisePriceMinor / 100, 0);
$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>{{ $isEnterprise ? 'Business' : 'Pro' }}</strong> active until <strong>{{ $subscription->current_period_end->format('d M Y') }}</strong>
</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($isEnterprise ? 'events.pro.subscribe-enterprise' : 'events.pro.subscribe') }}">@csrf<button class="btn-primary">Resume subscription</button></form>
@endif
</div>
</div>
@endif
<div class="grid gap-5 lg:grid-cols-3">
<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>
<ul class="mt-5 flex-1 space-y-2 text-sm text-slate-700">
<li>2 live events</li>
<li>100 tickets / month</li>
<li>BYO Paystack / Flutterwave / Hubtel</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-white p-6 {{ $planKey === 'pro' ? 'ring-2 ring-indigo-500' : '' }}">
<p class="text-xs font-semibold uppercase tracking-wide text-indigo-600">Pro</p>
<x-plan-tier-price :currency="$currency" :monthly-minor="$proPriceMinor" />
<ul class="mt-5 flex-1 space-y-2 text-sm text-slate-700">
<li>Unlimited events</li>
<li>Unlimited tickets</li>
<li>Priority support</li>
</ul>
<div class="mt-6">
@if ($planKey === 'pro')
<p class="text-sm text-slate-600">Current plan</p>
@elseif ($gatingActive && ! $hasPaidPlan)
<form x-show="billing === 'monthly'" method="post" action="{{ route('events.pro.subscribe') }}">@csrf<button class="btn-primary w-full">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="pro"><input type="hidden" name="months" value="{{ $months }}"><button type="submit" class="btn-primary w-full">Pay {{ $months }} months via Paystack</button></form>
@endforeach
@endif
</div>
</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 {{ $planKey === 'enterprise' ? '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>Everything in Pro</li>
<li>Team seats</li>
<li>Advanced attendee tools</li>
</ul>
<div class="mt-6">
@if ($planKey === 'enterprise')
<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-app-layout>