@extends('layouts.super-admin', ['title' => 'Create Edit Plan - Booklio Super Admin', 'pageTitle' => $plan->exists ? 'Edit Plan' : 'Create Plan', 'active' => 'plans'])

@section('content')
    <form method="POST" action="{{ $formAction }}" class="space-y-5">
        @csrf
        @if (($formMethod ?? 'POST') !== 'POST')
            @method($formMethod)
        @endif

        <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">Configure plan pricing, limits, enabled modules, and status. Recurring billing will be connected later.</p>
            <x-ui.button variant="secondary" href="{{ route('super-admin.plans.index') }}">Back to plans</x-ui.button>
        </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

        <x-ui.card title="Plan Fields" description="These fields drive SaaS subscription limits and feature gates. Leave a limit blank for unlimited.">
            <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                <x-form.input name="name" label="Plan name" :value="$plan->name" />
                <x-form.input name="slug" label="Slug" :value="$plan->slug" placeholder="professional" help="Used in URLs and backend references." />
                <x-form.select name="status" label="Status active/inactive" :value="$plan->status ?? 'active'" :options="\App\Models\Plan::STATUSES" />
                <x-form.input name="monthly_price" type="number" step="0.01" label="Monthly price" :value="$plan->monthly_price" />
                <x-form.input name="yearly_price" type="number" step="0.01" label="Yearly price" :value="$plan->yearly_price" />
                <x-form.input name="trial_days" type="number" label="Trial days" :value="$plan->trial_days ?? 0" />
                <x-form.input name="max_staff" type="number" label="Max staff" :value="$plan->max_staff" placeholder="Unlimited" />
                <x-form.input name="max_services" type="number" label="Max services" :value="$plan->max_services" placeholder="Unlimited" />
                <x-form.input name="max_appointments_per_month" type="number" label="Max appointments per month" :value="$plan->max_appointments_per_month" placeholder="Unlimited" />
                <x-form.input name="max_reminders_per_month" type="number" label="Max reminders per month" :value="$plan->max_reminders_per_month" placeholder="Unlimited" />
                <x-form.input name="max_invoices_per_month" type="number" label="Max invoices per month" :value="$plan->max_invoices_per_month" placeholder="Unlimited" />
                <x-form.input name="sort_order" type="number" label="Sort order" :value="$plan->sort_order ?? 0" />
                <div class="md:col-span-2 xl:col-span-3">
                    <x-form.textarea name="description" label="Description" :value="$plan->description" rows="3" />
                </div>
            </div>
        </x-ui.card>

        <x-ui.card title="Feature Access" description="Toggle modules available for this plan.">
            <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
                @foreach ([
                    'invoice_module_enabled' => 'Invoice module enabled',
                    'whatsapp_reminder_enabled' => 'WhatsApp reminder enabled',
                    'email_reminder_enabled' => 'Email reminder enabled',
                    'reports_enabled' => 'Reports enabled',
                    'custom_branding_enabled' => 'Custom branding enabled',
                ] as $field => $label)
                    <label class="flex items-center justify-between gap-3 rounded-lg border border-booklio-border bg-slate-50 p-4">
                        <span class="text-sm font-bold text-slate-700">{{ $label }}</span>
                        <input name="{{ $field }}" value="1" type="checkbox" @checked(old($field, $plan->{$field})) class="h-4 w-4 rounded border-booklio-border text-booklio-primary focus:ring-booklio-primary">
                    </label>
                @endforeach
            </div>
            <div class="mt-5 flex flex-col gap-3 sm:flex-row sm:justify-end">
                <x-ui.button variant="secondary" href="{{ route('super-admin.plans.index') }}">Cancel</x-ui.button>
                <x-ui.button type="submit">{{ $submitLabel }}</x-ui.button>
            </div>
        </x-ui.card>
    </form>
@endsection