ladill-queue/resources/views/qms/pro/index.blade.php

<x-app-layout title="Plans" heading="Queue plans">
    @php
        $proPrice = number_format($proPriceMinor / 100, 0);
        $enterprisePerBranch = number_format($enterprisePricePerBranchMinor / 100, 0);
        $enterpriseTotal = number_format($enterprisePriceMinor / 100, 0);
    @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

        <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 Queue 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.
                Enterprise includes a one-time setup fee — <a href="{{ $salesUrl }}" class="font-medium text-indigo-600 hover:text-indigo-800" target="_blank" rel="noopener">contact sales</a> for onboarding.
            </p>
            <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>
        </div>

        <div class="grid gap-5 lg:grid-cols-3">
            {{-- Free --}}
            <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">1 branch · 5 queues</p>
                <ul class="mt-5 flex-1 space-y-2 text-sm text-slate-700">
                    <li>Core queue & tickets</li>
                    <li>1 kiosk · 1 display</li>
                    <li>Basic analytics</li>
                </ul>
                @if ($planKey === 'free')
                    <p class="mt-6 text-sm font-medium text-indigo-700">Current plan</p>
                @endif
            </div>

            {{-- Pro --}}
            <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" />
                <p class="mt-1 text-sm text-slate-500" x-show="billing === 'monthly'">Unlimited branches & queues</p>
                <ul class="mt-5 flex-1 space-y-2 text-sm text-slate-700">
                    <li>Advanced routing rules</li>
                    <li>Unlimited kiosks & displays</li>
                    <li>Care & Frontdesk API</li>
                    <li>Reports & exports</li>
                </ul>
                <div class="mt-6">
                    @if ($planKey === 'pro')
                        <p class="text-sm text-slate-600">
                            Active
                            @if ($planExpiresAt)
                                until <strong>{{ $planExpiresAt->format('d M Y') }}</strong>
                            @endif
                            .
                        </p>
                    @elseif ($canManage)
                        <form x-show="billing === 'monthly'" method="post" action="{{ route('qms.pro.subscribe') }}">
                            @csrf
                            <button class="btn-primary w-full">Upgrade to Pro — monthly wallet</button>
                        </form>
                        <template x-for="months in @js($prepaidMonths)" :key="months">
                            <form x-show="billing == months" method="post" action="{{ route('qms.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" x-text="'Pay ' + months + ' months via Paystack'"></button>
                            </form>
                        </template>
                    @else
                        <p class="text-sm text-slate-500">Ask an admin to upgrade.</p>
                    @endif
                </div>
            </div>

            {{-- Enterprise --}}
            <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">Enterprise</p>
                <x-plan-tier-price
                    :currency="$currency"
                    :monthly-minor="$enterprisePricePerBranchMinor"
                    :prepaid-minor="$enterprisePriceMinor"
                    :monthly-display="$enterprisePerBranch"
                    monthly-suffix="/branch/mo"
                    dark
                />
                <p class="mt-1 text-sm text-slate-300" x-show="billing === 'monthly'">
                    @if ($branchCount > 0)
                        {{ $branchCount }} active {{ str('branch')->plural($branchCount) }} = {{ $currency }} {{ $enterpriseTotal }}/mo
                    @else
                        Per-branch billing for multi-site
                    @endif
                </p>
                <ul class="mt-5 flex-1 space-y-2 text-sm text-slate-200">
                    <li>Everything in Pro</li>
                    <li>Full API & integrations</li>
                    <li>Advanced analytics + SLA</li>
                    <li>Dedicated onboarding (setup fee)</li>
                </ul>
                <div class="mt-6 space-y-2">
                    @if ($planKey === 'enterprise')
                        <p class="text-sm text-slate-200">
                            Active
                            @if ($planExpiresAt)
                                until <strong class="text-white">{{ $planExpiresAt->format('d M Y') }}</strong>
                            @endif
                            @if ($enterpriseBilledBranches > 0)
                                · billed for {{ $enterpriseBilledBranches }} {{ str('branch')->plural($enterpriseBilledBranches) }}
                            @endif
                            .
                        </p>
                    @elseif ($canManage)
                        @if ($canSubscribeEnterprise)
                            <form x-show="billing === 'monthly'" method="post" action="{{ route('qms.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 — {{ $currency }} {{ $enterpriseTotal }}/mo wallet
                                </button>
                            </form>
                            <template x-for="months in @js($prepaidMonths)" :key="'ent-' + months">
                                <form x-show="billing == months" method="post" action="{{ route('qms.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"
                                            x-text="'Pay ' + months + ' months via Paystack — {{ $currency }} ' + ({{ $enterprisePriceMinor }} * months / 100).toLocaleString()"></button>
                                </form>
                            </template>
                        @else
                            <p class="text-sm text-slate-300">Add at least {{ $enterpriseMinBranches }} active branches, or choose Pro for a single site.</p>
                        @endif
                        <a href="{{ $salesUrl }}" target="_blank" rel="noopener" class="block text-center text-xs text-amber-200 underline hover:text-white">Contact sales for setup & SLA</a>
                    @else
                        <p class="text-sm text-slate-300">Ask an admin to upgrade.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</x-app-layout>