<div class="mx-auto max-w-[1120px] space-y-6">
    <div class="animate-rise">
        <h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('order.title') }}</h1>
        <p class="mt-1 max-w-[70ch] text-sm text-muted">{{ __('order.subtitle') }}</p>
    </div>

    @if ($contract)
        {{-- Not an error and not a dead end: they have a contract, and the way
             to a bigger package is a plan change, which prorates and leaves
             their data where it is. A second checkout would build a second,
             empty cloud and bill for both. --}}
        <x-ui.alert variant="info">
            {{ __('order.already_customer') }}
            <a href="{{ route('billing') }}" class="font-semibold underline">{{ __('order.to_billing') }}</a>
        </x-ui.alert>
    @elseif ($plans === [])
        <x-ui.alert variant="warning">{{ __('order.no_catalogue') }}</x-ui.alert>
    @else
        @error('plan')<x-ui.alert variant="error">{{ $message }}</x-ui.alert>@enderror

        {{-- One consent for the page, not one per card: the sentence is the
             law's own wording and four copies of it is a wall nobody reads.
             The forms each carry it as a hidden field bound to this one box.

             The server rule is the real gate (CheckoutController validates
             `accepted`), so with JavaScript off the field arrives empty and the
             checkout is refused with the sentence explaining why — the safe
             direction to fail in. Ticking a box in a browser is not the record
             anyway: the record is the timestamp taken when the payment lands. --}}
        <div x-data="{ immediateStart: false }">
        <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ($plans as $plan)
                <div @class([
                    'flex flex-col rounded-lg border bg-surface p-6 shadow-xs animate-rise',
                    'border-ink shadow-md' => $plan['recommended'],
                    'border-line' => ! $plan['recommended'],
                ])>
                    <div class="flex flex-wrap items-center gap-2">
                        <h2 class="font-semibold text-ink">{{ $plan['name'] }}</h2>
                        @if ($plan['recommended'])
                            <span class="rounded-pill bg-accent-active px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-on-accent">{{ __('order.recommended') }}</span>
                        @endif
                    </div>
                    @if ($plan['audience'])
                        <p class="mt-1 text-xs text-muted">{{ $plan['audience'] }}</p>
                    @endif

                    {{-- What this customer's card will be charged, like the public
                         sheet. A customer quoted 58,80 € out there must not meet
                         49 € on the page with the button on it. --}}
                    <p class="mt-5 flex items-baseline gap-1.5">
                        <span class="font-mono text-2xl font-semibold tabular-nums text-ink">{{ Number::currency($plan['gross'] / 100, in: $plan['currency'], locale: app()->getLocale()) }}</span>
                        <span class="text-xs text-muted">{{ __('order.per_month') }}</span>
                    </p>
                    <p class="mt-1 text-xs text-muted">
                        {{-- A reverse-charge business is charged the bare net, so
                             there is no VAT to state and no second figure to show:
                             saying "inkl. 20 %" over a net price would describe a
                             tax nothing collects. --}}
                        @if ($tax->reverseCharge)
                            {{ __('order.reverse_charge') }}
                        @else
                            {{ __('order.incl_vat', ['rate' => $vat]) }} ·
                            {{ __('order.net') }} {{ Number::currency($plan['net'] / 100, in: $plan['currency'], locale: app()->getLocale()) }}
                        @endif
                    </p>
                    @if ($setup > 0)
                        <p class="mt-1 text-xs text-muted">
                            {{ __('order.setup', ['amount' => Number::currency($setup / 100, in: $plan['currency'], locale: app()->getLocale())]) }}
                        </p>
                    @endif

                    <x-ui.delivery :state="$plan['delivery']" class="mt-4" />

                    <dl class="mt-5 flex-1 space-y-2 border-t border-line pt-4 text-sm">
                        @foreach ([
                            __('order.storage') => $plan['quota_gb'].' GB',
                            __('order.traffic') => $plan['traffic_gb'].' GB',
                            __('order.seats') => $plan['seats'],
                        ] as $term => $value)
                            <div class="flex justify-between gap-3">
                                <dt class="text-muted">{{ $term }}</dt>
                                <dd class="font-mono tabular-nums text-ink">{{ $value }}</dd>
                            </div>
                        @endforeach
                    </dl>

                    {{-- A plain form post, not a Livewire action: the response
                         is a redirect to another domain, and Livewire's
                         XHR-and-swap cannot leave the site. --}}
                    <form method="POST" action="{{ route('checkout.start') }}" class="mt-6">
                        @csrf
                        <input type="hidden" name="plan" value="{{ $plan['key'] }}" />
                        {{-- The consent, carried from the one box below. --}}
                        <input type="hidden" name="immediate_start" x-bind:value="immediateStart ? '1' : ''" />
                        {{-- The wording is the legal one and not a nicety:
                             the button that concludes a paid contract has to
                             say that it costs money. --}}
                        <x-ui.button type="submit" :variant="$plan['recommended'] ? 'primary' : 'secondary'" class="w-full"
                                     x-bind:disabled="!immediateStart">
                            {{ __('order.buy') }}
                        </x-ui.button>
                    </form>
                </div>
            @endforeach
        </div>

        {{-- The withdrawal consent. Without it on record a withdrawal on day
             thirteen gets the WHOLE amount back however long the machine ran,
             because a seller who cannot prove the consent was given cannot
             charge for the days it was given for. --}}
        <label class="mt-5 flex max-w-[80ch] cursor-pointer items-start gap-3 rounded-lg border border-line bg-surface-2 p-4">
            <input type="checkbox" x-model="immediateStart"
                   class="mt-0.5 size-4 shrink-0 rounded border-line-strong text-accent-active focus:ring-accent-active" />
            <span class="text-xs leading-relaxed text-body">{{ __('checkout.immediate_start') }}</span>
        </label>

        @error('immediate_start')
            <x-ui.alert variant="error" class="mt-3">{{ $message }}</x-ui.alert>
        @enderror
        </div>

        <p class="max-w-[80ch] text-xs leading-relaxed text-muted">
            {{ __('order.terms') }}
        </p>
    @endif
</div>
