@extends('layouts.super-admin', ['title' => 'Plans - Booklio Super Admin', 'pageTitle' => 'Plans', 'active' => 'plans'])

@section('content')
    <div data-pricing-scope data-billing-cycle="monthly" class="space-y-5">
        <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">Create, price, and manage CodeCanyon-ready SaaS subscription plans.</p>
            <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                <div data-billing-toggle 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 bg-booklio-primary px-4 text-sm font-bold text-white" aria-pressed="true">Monthly</button>
                    <button type="button" data-billing-cycle="yearly" class="h-10 rounded-md px-4 text-sm font-bold text-booklio-muted" aria-pressed="false">Yearly</button>
                </div>
                <x-ui.button href="{{ route('super-admin.plans.create') }}"><x-ui.icon name="plus" class="h-4 w-4" />Create Plan</x-ui.button>
            </div>
        </div>

        @if (session('status'))
            <div class="rounded-lg border border-emerald-100 bg-emerald-50 px-4 py-3 text-sm font-bold text-emerald-700">
                {{ session('status') }}
            </div>
        @endif

        <div class="grid gap-5 lg:grid-cols-4">
            @foreach ($plans as $plan)
                <section data-plan-card class="rounded-lg border {{ $plan->slug === 'professional' ? '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 class="min-w-0">
                            <h2 class="truncate text-lg font-extrabold">{{ $plan->name }}</h2>
                            <p
                                data-plan-price
                                data-monthly="{{ $plan->monthlyDisplay() }}"
                                data-yearly="{{ $plan->yearlyDisplay() }}"
                                class="mt-3 text-3xl font-extrabold"
                            >{{ $plan->monthlyDisplay() }}</p>
                            <p
                                data-plan-period
                                data-monthly-period="per month"
                                data-yearly-period="per year"
                                class="text-xs font-semibold text-booklio-muted"
                            >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"
                            >Billed monthly</p>
                        </div>
                        <x-ui.badge :variant="$plan->status === 'active' ? 'success' : 'muted'">{{ $plan->status_label }}</x-ui.badge>
                    </div>
                    <div class="mt-5 space-y-2 text-sm font-semibold text-slate-700">
                        <p>Trial days: {{ $plan->trial_days }}</p>
                        <p>Max staff: {{ $plan->max_staff ? number_format($plan->max_staff) : 'Unlimited' }}</p>
                        <p>Max services: {{ $plan->max_services ? number_format($plan->max_services) : 'Unlimited' }}</p>
                        <p>Appointments/month: {{ $plan->max_appointments_per_month ? number_format($plan->max_appointments_per_month) : 'Unlimited' }}</p>
                        <p>Subscriptions: {{ number_format($plan->subscriptions_count) }}</p>
                    </div>
                    <x-ui.button class="mt-5 w-full" variant="secondary" href="{{ route('super-admin.plans.edit', $plan) }}">Edit Plan</x-ui.button>
                </section>
            @endforeach
        </div>
    </div>
@endsection