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

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

@section('content')
    <div class="space-y-5">
        @include('admin.subscription.partials.nav', ['activeTab' => $activeTab])

        <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
            <x-ui.card title="Usage Limits" description="Monitor staff, services, appointments, reminders, and invoices included in your current plan.">
                @include('admin.subscription.partials.usage-bars')
            </x-ui.card>

            <x-ui.card title="Need more capacity?" description="Upgrade to Agency for unlimited usage across core modules.">
                <div class="space-y-3">
                    @foreach (['Unlimited staff seats', 'Unlimited services', 'Unlimited appointments', 'Unlimited reminders', 'Unlimited invoices'] as $feature)
                        <div class="flex items-center gap-3 rounded-lg bg-slate-50 p-3">
                            <x-ui.icon name="check" class="h-4 w-4 text-booklio-success" />
                            <span class="text-sm font-bold">{{ $feature }}</span>
                        </div>
                    @endforeach
                </div>
                <x-ui.button class="mt-5 w-full" href="{{ route('admin.subscription.upgrade') }}">View upgrade options</x-ui.button>
            </x-ui.card>
        </div>
    </div>
@endsection