@php
$allowedIp ??= null;
$typedAddresses = old('ip_addresses');
$typedAddresses = is_array($typedAddresses) ? implode("\n", $typedAddresses) : (string) $typedAddresses;
// Errors for the list come back per line ("ip_addresses.2"), so gather them under the one field.
$addressErrors = collect($errors->getMessages())
    ->filter(fn ($messages, $field) => $field === 'ip_addresses' || str_starts_with($field, 'ip_addresses.'))
    ->flatten()
    ->unique()
    ->all();
@endphp

<x-toast :message="$errors->any() ? __('Please fix the fields marked in red.') : null" icon="error" />

<div class="grid grid-cols-1 gap-8 xl:grid-cols-3">
    <div class="flex flex-col gap-6 xl:col-span-2">
        @if ($allowedIp)
            <x-form-panel step="1" :title="__('Address')" :description="__('One IP address, or a range like 203.0.113.0/24 for a whole office network.')">
                <div x-data="{ ip: @js(old('ip_address', $allowedIp->ip_address)) }">
                    <x-input-label for="ip_address" :value="__('IP address or range')" />

                    <div class="mt-1 flex flex-col gap-2 sm:flex-row">
                        <x-text-input id="ip_address" name="ip_address" type="text" class="block w-full font-mono" x-model="ip" autofocus autocomplete="off" placeholder="203.0.113.10" />

                        <x-secondary-button type="button" class="shrink-0" @click="ip = @js($currentIp)">
                            {{ __('Use my current IP') }}
                        </x-secondary-button>
                    </div>

                    <x-input-error class="mt-2" :messages="$errors->get('ip_address')" />
                    <p class="mt-2 text-xs text-gray-500">{{ __('You are on :ip right now.', ['ip' => $currentIp]) }}</p>
                </div>
            </x-form-panel>
        @else
            <x-form-panel step="1" :title="__('Addresses')" :description="__('One or more IP addresses, one per line. A range like 203.0.113.0/24 covers a whole office network.')">
                <div x-data="{ ips: @js($typedAddresses), add(ip) { if (this.ips.split(/\s+/).includes(ip)) { return; } this.ips = this.ips.trim() ? this.ips.trim() + '\n' + ip : ip; } }">
                    <x-input-label for="ip_addresses" :value="__('IP addresses or ranges')" />

                    <div class="mt-1 flex flex-col gap-2 sm:flex-row sm:items-start">
                        <x-textarea-input id="ip_addresses" name="ip_addresses" class="block w-full font-mono text-sm" rows="4" x-model="ips" :invalid="count($addressErrors) > 0" autofocus placeholder="103.169.99.42&#10;203.0.113.0/24"></x-textarea-input>

                        <x-secondary-button type="button" class="shrink-0" @click="add(@js($currentIp))">
                            {{ __('Use my current IP') }}
                        </x-secondary-button>
                    </div>

                    <x-input-error class="mt-2" :messages="$addressErrors" />
                    <p class="mt-2 text-xs text-gray-500">{{ __('You are on :ip right now. Every address here gets the place name below.', ['ip' => $currentIp]) }}</p>
                </div>
            </x-form-panel>
        @endif

        <x-form-panel step="2" :title="__('Where is this')" :description="__('A name so you know later which place each address is.')">
            <div>
                <x-input-label for="label" :value="__('Place')" />
                <x-text-input id="label" name="label" type="text" class="mt-1 block w-full" :value="old('label', $allowedIp?->label)" autocomplete="off" placeholder="{{ __('e.g. Lahore office, Dallas clinic, Home') }}" />
                <x-input-error class="mt-2" :messages="$errors->get('label')" />
            </div>
        </x-form-panel>

        @if ($allowedIp)
            <x-form-panel step="3" :title="__('Status')" :description="__('An address that is off stays on the list but cannot open the software.')">
                <label class="flex items-center gap-3">
                    <x-switch name="is_active" value="1" :checked="(bool) old('is_active', $allowedIp->is_active)" />
                    <span class="text-sm font-medium text-gray-900">{{ __('On') }}</span>
                </label>
            </x-form-panel>
        @endif

        <div class="flex items-center justify-end gap-3 rounded-2xl bg-white px-6 py-4 shadow-raised sm:px-8">
            <x-secondary-button :href="route('settings.allowed-ips.index')">{{ __('Cancel') }}</x-secondary-button>

            <x-primary-button>
                @unless ($allowedIp)
                    <x-icon-plus />
                @endunless

                {{ $submitLabel }}
            </x-primary-button>
        </div>
    </div>

    <aside class="flex flex-col gap-3 self-start rounded-2xl bg-white p-6 text-sm shadow-raised xl:sticky xl:top-8">
        <h3 class="text-base font-semibold text-gray-900">{{ __('Good to know') }}</h3>

        <ul class="flex flex-col gap-3 text-gray-700">
            <li class="flex items-start gap-2">
                <svg class="mt-0.5 h-4 w-4 shrink-0 text-brand-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
                {{ __('While the restriction is on, the software closes to every place not on this list, including the login page.') }}
            </li>
            <li class="flex items-start gap-2">
                <svg class="mt-0.5 h-4 w-4 shrink-0 text-brand-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
                {{ __('Home internet often changes its address. If people get locked out, ask the internet company for a fixed IP or allow a range.') }}
            </li>
            <li class="flex items-start gap-2">
                <svg class="mt-0.5 h-4 w-4 shrink-0 text-brand-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
                {{ __('You cannot save a change that leaves your own address off the list, so you will not lock yourself out.') }}
            </li>
        </ul>
    </aside>
</div>