<div>
    <x-ui.page-header
        title="Settings"
        subtitle="Panel-wide configuration. Anything product-specific belongs in that product's own settings."
    />

    <form wire:submit="save" class="grid gap-4 lg:grid-cols-2">

        <x-ui.card title="Identity">
            <div class="space-y-3">
                <x-ui.input label="Panel name" wire:model="form.panel_name" required
                            :error="$errors->first('form.panel_name')" />

                <x-ui.input label="Support email" type="email" wire:model="form.support_email" required
                            hint="Printed on invoices and shown to shops when a payment is rejected."
                            :error="$errors->first('form.support_email')" />

                <x-ui.input label="Support phone" wire:model="form.support_phone"
                            :error="$errors->first('form.support_phone')" />
            </div>
        </x-ui.card>

        <x-ui.card title="Invoicing">
            <div class="space-y-3">
                <x-ui.input label="Invoice number prefix" wire:model="form.invoice_prefix" required
                            hint="Numbers look like TX-2026-000042. Changing this does not renumber past invoices."
                            :error="$errors->first('form.invoice_prefix')" />

                <x-ui.textarea label="Terms printed on every invoice" wire:model="form.invoice_terms" rows="3"
                               :error="$errors->first('form.invoice_terms')" />
            </div>
        </x-ui.card>

        <x-ui.card title="Subscriptions">
            <div class="space-y-3">
                <x-ui.input label="Default trial length (days)" type="number" wire:model="form.default_trial_days"
                            required hint="Used when a plan does not set its own."
                            :error="$errors->first('form.default_trial_days')" />

                <x-ui.toggle
                    wire:model="form.auto_activate_on_verify"
                    label="Activate the subscription as soon as a payment is verified"
                    hint="Turn this off only if a second person must approve activations separately."
                />

                <p class="rounded-lg bg-slate-50 p-2.5 text-xs text-slate-600 dark:bg-slate-800 dark:text-slate-300">
                    Grace period is {{ config('thinkrax.grace_days') }} day(s) — set with
                    <code>THINKRAX_GRACE_DAYS</code> in <code>.env</code>, because both this panel and every
                    product application have to agree on it.
                </p>
            </div>
        </x-ui.card>

        <x-ui.card title="Notify the team when">
            <div class="space-y-3">
                <x-ui.toggle wire:model="form.notify_on_signup" label="A new shop signs up" />
                <x-ui.toggle wire:model="form.notify_on_payment" label="A payment proof is uploaded"
                             hint="Strongly recommended — this is the event the queue exists for." />
            </div>
        </x-ui.card>

        <div class="lg:col-span-2">
            <x-ui.button type="submit" variant="primary" loading="save">Save settings</x-ui.button>
        </div>
    </form>
</div>
