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

@include('admin.subscription.partials.data')

@section('content')
    <section class="mx-auto max-w-3xl rounded-lg border border-booklio-border bg-white p-6 text-center shadow-card sm:p-8">
        <span class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-600">
            <x-ui.icon name="check" class="h-8 w-8" />
        </span>
        <h1 class="mt-5 text-3xl font-extrabold tracking-tight text-booklio-dark">Plan upgraded successfully</h1>
        <p class="mx-auto mt-2 max-w-xl text-sm leading-6 text-booklio-muted">Your Booklio {{ $currentPlan['name'] }} plan is now active. New limits and premium features are available immediately.</p>

        <div class="mt-6 grid gap-3 sm:grid-cols-3">
            @foreach ([['Plan', $currentPlan['name']], ['Billing cycle', $currentPlan['cycle']], ['Next renewal', $currentPlan['renewal']]] as $item)
                <div class="rounded-lg border border-booklio-border bg-slate-50 p-4">
                    <p class="text-xs font-bold text-booklio-muted">{{ $item[0] }}</p>
                    <p class="mt-2 text-sm font-extrabold">{{ $item[1] }}</p>
                </div>
            @endforeach
        </div>

        <div class="mt-6 grid gap-3 sm:grid-cols-2">
            <x-ui.button href="{{ route('admin.subscription.current') }}">View current plan</x-ui.button>
            <x-ui.button variant="secondary" href="{{ route('admin.dashboard') }}">Back to dashboard</x-ui.button>
        </div>
    </section>
@endsection