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

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

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

        @if ($subscriptionState['trial_ending'] ?? false)
            <div class="rounded-lg border border-amber-100 bg-amber-50 p-4 shadow-soft">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm font-extrabold text-amber-700">Trial Ending Soon Banner</p>
                        <p class="mt-1 text-sm leading-6 text-amber-700">Your trial ends in {{ $subscriptionState['trial_days_left'] ?? 3 }} days. Upgrade now to keep appointments, invoices, and reminders active.</p>
                    </div>
                    <x-ui.button href="{{ route('admin.subscription.upgrade') }}">Upgrade now</x-ui.button>
                </div>
            </div>
        @endif

        <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_380px]">
            <div class="space-y-5">
                <x-ui.card title="Current Plan" description="Your active Booklio SaaS subscription summary.">
                    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
                        @foreach ([['Current plan name', $currentPlan['name']], ['Billing cycle', $currentPlan['cycle']], ['Subscription status', $currentPlan['status']], ['Renewal date', $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-lg font-extrabold text-booklio-dark">{{ $item[1] }}</p>
                            </div>
                        @endforeach
                    </div>
                    <div class="mt-5 flex flex-col gap-3 sm:flex-row">
                        <x-ui.button href="{{ route('admin.subscription.upgrade') }}">Upgrade Plan</x-ui.button>
                        <x-ui.button variant="danger" data-booklio-placeholder="Subscription cancellation will be connected after recurring billing is implemented.">Cancel subscription</x-ui.button>
                    </div>
                </x-ui.card>

                <x-ui.card title="Usage limits" description="Track current usage against the limits included in your plan.">
                    @include('admin.subscription.partials.usage-bars')
                </x-ui.card>
            </div>

            <x-ui.card title="Plan Benefits" description="Professional plan includes core growth features.">
                <div class="space-y-3">
                    @forelse ($planBenefits as $feature)
                        <div class="flex items-center gap-3 rounded-lg border border-booklio-border 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>
                    @empty
                        <p class="text-sm leading-6 text-booklio-muted">No plan benefits are active yet. Choose a plan to unlock Booklio modules.</p>
                    @endforelse
                </div>
            </x-ui.card>
        </div>
    </div>
@endsection