@extends('layouts.admin', ['title' => 'Upgrade Plan - Booklio', 'pageTitle' => 'Upgrade Plan', 'active' => 'subscription'])

@include('admin.subscription.partials.data')
@php($activeTab = 'upgrade')

@section('content')
    <div data-pricing-scope data-billing-cycle="{{ $billingCycle ?? 'monthly' }}" class="space-y-5">
        @include('admin.subscription.partials.nav', ['activeTab' => $activeTab])

        <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
            <p class="text-sm font-semibold text-booklio-muted">Choose the right plan for your staff, appointments, reminders, and invoices.</p>
            <div class="inline-flex w-max rounded-lg border border-booklio-border bg-white p-1 shadow-soft">
                <button type="button" data-billing-cycle="monthly" class="h-10 rounded-md px-4 py-2.5 text-sm font-bold {{ ($billingCycle ?? 'monthly') === 'monthly' ? 'bg-booklio-primary text-white' : 'text-booklio-muted' }}" aria-pressed="{{ ($billingCycle ?? 'monthly') === 'monthly' ? 'true' : 'false' }}">Monthly</button>
                <button type="button" data-billing-cycle="yearly" class="h-10 rounded-md px-4 py-2.5 text-sm font-bold {{ ($billingCycle ?? 'monthly') === 'yearly' ? 'bg-booklio-primary text-white' : 'text-booklio-muted' }}" aria-pressed="{{ ($billingCycle ?? 'monthly') === 'yearly' ? 'true' : 'false' }}">Yearly</button>
            </div>
        </div>

        <div class="grid gap-5 lg:grid-cols-4">
            @foreach ($plans as $plan)
                <section data-plan-card class="rounded-lg border {{ $plan['is_recommended'] ? 'border-booklio-primary ring-4 ring-blue-100' : 'border-booklio-border' }} bg-white p-5 shadow-card">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <h2 class="text-lg font-extrabold text-booklio-dark">{{ $plan['name'] }}</h2>
                            <p
                                data-plan-price
                                data-monthly="{{ $plan['monthly'] }}"
                                data-yearly="{{ $plan['yearly'] }}"
                                class="mt-3 text-3xl font-extrabold"
                            >{{ ($billingCycle ?? 'monthly') === 'yearly' ? $plan['yearly'] : $plan['monthly'] }}</p>
                            <p
                                data-plan-period
                                data-monthly-period="per month"
                                data-yearly-period="per year"
                                class="mt-1 text-xs font-semibold text-booklio-muted"
                            >{{ ($billingCycle ?? 'monthly') === 'yearly' ? 'per year' : 'per month' }}</p>
                            <p
                                data-plan-note
                                data-monthly-note="Billed monthly"
                                data-yearly-note="Billed yearly"
                                class="mt-1 text-xs font-semibold text-booklio-muted"
                            >{{ ($billingCycle ?? 'monthly') === 'yearly' ? 'Billed yearly' : 'Billed monthly' }}</p>
                        </div>
                        <x-ui.badge :variant="$plan['is_recommended'] ? 'success' : 'muted'">{{ $plan['is_current'] ? 'Current' : $plan['badge'] }}</x-ui.badge>
                    </div>
                    <p class="mt-4 text-sm leading-6 text-booklio-muted">{{ $plan['description'] }}</p>
                    <div class="mt-5 space-y-3">
                        @foreach ($plan['features'] as $feature)
                            <div class="flex gap-2 text-sm font-semibold text-slate-700">
                                <x-ui.icon name="check" class="mt-0.5 h-4 w-4 shrink-0 text-booklio-success" />
                                <span>{{ $feature }}</span>
                            </div>
                        @endforeach
                    </div>
                    <form method="POST" action="{{ route('admin.subscription.upgrade.store') }}" class="mt-6">
                        @csrf
                        <input type="hidden" name="plan_id" value="{{ $plan['id'] }}">
                        <input data-plan-billing-input type="hidden" name="billing_cycle" value="{{ $billingCycle ?? 'monthly' }}">
                        <x-ui.button class="w-full" type="submit" :variant="$plan['is_recommended'] ? 'primary' : 'secondary'" :disabled="$plan['is_current']">
                            {{ $plan['is_current'] ? 'Current plan' : 'Upgrade' }}
                        </x-ui.button>
                    </form>
                </section>
            @endforeach
        </div>

        <x-ui.card title="Feature comparison table" description="Compare limits before upgrading.">
            <x-ui.table :headers="['Feature', 'Free Trial', 'Starter', 'Professional', 'Agency']">
                @foreach ([['Staff', 'staff'], ['Services', 'services'], ['Appointments / month', 'appointments'], ['Reminders / month', 'reminders'], ['Invoices', 'invoices']] as [$label, $key])
                    <tr>
                        <td class="px-4 py-4 font-semibold text-slate-700">{{ $label }}</td>
                        @foreach ($plans as $plan)
                            <td class="px-4 py-4 font-semibold text-slate-700">{{ $plan['limits'][$key] ?? '-' }}</td>
                        @endforeach
                    </tr>
                @endforeach
            </x-ui.table>
        </x-ui.card>
    </div>
@endsection