@php
    $editing = $plan->exists;
    $selected = old('locations', $selectedLocations ?? []);
@endphp

<x-layouts.admin
    :title="$editing ? 'Edit plan' : 'Add plan'"
    :heading="$editing ? 'Edit '.$plan->name : 'Add plan'">

    <div class="max-w-3xl space-y-6">
        @if ($editing)
            <x-ui.alert variant="info" title="Changes apply to new sign-ups only">
                Existing subscribers keep the price, device limit and allowance they agreed to —
                those were copied onto their subscription at purchase. Changing them here would
                silently re-price customers and could revoke devices they are actively using.
            </x-ui.alert>
        @endif

        <x-ui.card>
            <form method="POST"
                  action="{{ $editing ? route('admin.plans.update', $plan) : route('admin.plans.store') }}"
                  x-data="{ allLocations: {{ old('has_all_locations', $plan->has_all_locations) ? 'true' : 'false' }} }"
                  class="space-y-6">
                @csrf
                @if ($editing) @method('PUT') @endif

                {{-- ------------------------------------------------ identity --}}
                <div class="grid gap-5 sm:grid-cols-2">
                    <x-ui.field label="Plan name" name="name" :value="$plan->name" required/>
                    <x-ui.field label="URL slug" name="slug" :value="$plan->slug"
                                hint="Left blank, generated from the name."/>
                </div>

                <x-ui.field label="Tagline" name="tagline" :value="$plan->tagline"
                            hint="Short line shown under the plan name on the pricing page."/>

                {{-- ------------------------------------------------- pricing --}}
                <div class="grid gap-5 sm:grid-cols-3">
                    <x-ui.field label="Price" name="price" type="number" step="0.01" required
                                :value="old('price', $editing ? number_format($plan->price_cents / 100, 2, '.', '') : '')"/>

                    <x-ui.field label="Currency" name="currency" required maxlength="3"
                                :value="$plan->currency ?? 'USD'" class="uppercase"/>

                    <div class="space-y-1.5">
                        <label for="billing_interval" class="block text-sm font-medium text-silver-200">
                            Billing interval <span class="text-danger" aria-hidden="true">*</span>
                        </label>
                        <select id="billing_interval" name="billing_interval" required
                                class="block w-full rounded-lg border border-line-strong bg-abyss px-3.5 py-2.5
                                       text-sm text-silver-100 focus:border-electric-500 focus:outline-none">
                            @foreach ($intervals as $interval)
                                <option value="{{ $interval->value }}"
                                    @selected(old('billing_interval', $plan->billing_interval?->value) === $interval->value)>
                                    {{ $interval->label() }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- --------------------------------------------------- limits --}}
                <div class="grid gap-5 sm:grid-cols-3">
                    <x-ui.field label="Device limit" name="device_limit" type="number" required
                                :value="$plan->device_limit"/>

                    <x-ui.field label="Data limit (GB)" name="data_limit_gb" type="number" step="0.1"
                                :value="old('data_limit_gb', $plan->data_limit_bytes ? round($plan->data_limit_bytes / 1024 ** 3, 1) : '')"
                                hint="Blank = unmetered."/>

                    <x-ui.field label="Speed limit (Mbps)" name="speed_limit_mbps" type="number"
                                :value="$plan->speed_limit_mbps" hint="Blank = unlimited."/>
                </div>

                <x-ui.field label="Trial days" name="trial_days" type="number"
                            :value="$plan->trial_days ?? 0"
                            hint="0 disables the trial for this plan."/>

                {{-- ------------------------------------------------ locations --}}
                <div class="space-y-3">
                    <label class="flex cursor-pointer items-center gap-2.5 select-none">
                        <input type="checkbox" name="has_all_locations" value="1"
                               x-model="allLocations"
                               class="h-4 w-4 rounded border-line-strong bg-abyss text-electric-500
                                      focus:ring-2 focus:ring-electric-500/40 focus:ring-offset-0">
                        <span class="text-sm text-silver-300">Access to all locations</span>
                    </label>

                    <p class="text-xs text-silver-500">
                        Recommended. An unrestricted plan reaches new locations automatically,
                        with no need to re-select them each time one is added.
                    </p>

                    <div x-show="!allLocations" x-cloak class="rounded-lg border border-line-strong bg-abyss p-4">
                        @if ($locations->isEmpty())
                            <p class="text-sm text-silver-500">No locations exist yet.</p>
                        @else
                            <div class="grid gap-2 sm:grid-cols-2">
                                @foreach ($locations as $location)
                                    <label class="flex cursor-pointer items-center gap-2.5 select-none">
                                        <input type="checkbox" name="locations[]" value="{{ $location->id }}"
                                               @checked(in_array($location->id, $selected))
                                               class="h-4 w-4 rounded border-line-strong bg-abyss text-electric-500
                                                      focus:ring-2 focus:ring-electric-500/40">
                                        <span class="text-sm text-silver-300">
                                            {{ $location->flagEmoji() }} {{ $location->display_name }}
                                        </span>
                                    </label>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>

                {{-- ------------------------------------------------- features --}}
                <div class="space-y-1.5">
                    <label for="features" class="block text-sm font-medium text-silver-200">
                        Feature bullets
                    </label>
                    <textarea id="features" name="features" rows="4"
                              class="block w-full rounded-lg border border-line-strong bg-abyss px-3.5 py-2.5
                                     text-sm text-silver-100 focus:border-electric-500 focus:outline-none"
                    >{{ old('features', collect($plan->features ?? [])->implode("\n")) }}</textarea>
                    <p class="text-xs text-silver-500">
                        One per line. Device count, data allowance and location access are shown
                        automatically — no need to repeat them here.
                    </p>
                </div>

                {{-- ---------------------------------------------------- flags --}}
                <div class="grid gap-3 sm:grid-cols-3">
                    @php
                        $flags = [
                            ['priority_routing', 'Priority routing'],
                            ['is_active', 'Active (visible to customers)'],
                            ['is_featured', 'Highlight as most popular'],
                        ];
                    @endphp

                    @foreach ($flags as [$field, $label])
                        <label class="flex cursor-pointer items-center gap-2.5 select-none">
                            <input type="checkbox" name="{{ $field }}" value="1"
                                   @checked(old($field, $plan->{$field}))
                                   class="h-4 w-4 rounded border-line-strong bg-abyss text-electric-500
                                          focus:ring-2 focus:ring-electric-500/40">
                            <span class="text-sm text-silver-300">{{ $label }}</span>
                        </label>
                    @endforeach
                </div>

                <x-ui.field label="Sort order" name="sort_order" type="number"
                            :value="$plan->sort_order ?? 0" hint="Lower sorts first."/>

                <div class="flex gap-3 pt-2">
                    <x-ui.button type="submit">{{ $editing ? 'Save changes' : 'Create plan' }}</x-ui.button>
                    <x-ui.button variant="ghost" :href="route('admin.plans.index')">Cancel</x-ui.button>
                </div>
            </form>
        </x-ui.card>
    </div>

</x-layouts.admin>