@php
    $osLabels = [
        'alma_9' => 'AlmaLinux 9', 'alma_8' => 'AlmaLinux 8',
        'rocky_9' => 'Rocky Linux 9', 'rocky_8' => 'Rocky Linux 8',
        'ubuntu_22' => 'Ubuntu 22.04', 'ubuntu_20' => 'Ubuntu 20.04',
        'ubuntu_18' => 'Ubuntu 18.04', 'ubuntu_16' => 'Ubuntu 16.04',
        'centos_8' => 'CentOS 8', 'centos_7' => 'CentOS 7',
        'debian_10' => 'Debian 10', 'debian_9' => 'Debian 9',
    ];
    $addonLabels = [
        'cpanel' => 'cPanel',
        'plesk_10_domain' => 'Plesk 10 Domains',
        'plesk_30_domain' => 'Plesk 30 Domains',
        'plesk_unlimited_domain' => 'Plesk Unlimited Domains',
        'plesk_web_admin_license' => 'Plesk Web Admin',
        'plesk_web_pro_license' => 'Plesk Web Pro',
        'plesk_web_host_license' => 'Plesk Web Host',
        'ipaddress' => 'Dedicated IP Address',
        'whmcs' => 'WHMCS License',
        'storage_1' => 'Extra Storage Level 1',
        'storage_2' => 'Extra Storage Level 2',
        'storage_3' => 'Extra Storage Level 3',
        'storage_4' => 'Extra Storage Level 4',
        'storage_5' => 'Extra Storage Level 5',
    ];
    $hasAdvanced = $nativeForm['supports_os'] || $nativeForm['supports_addons'] || $nativeForm['supports_ssl_toggle'] || $nativeForm['supports_dedicated_ip'];
@endphp

<div class="space-y-4">
    @if (session('error'))
        <div class="rounded-lg border border-red-200 bg-red-50 px-3 py-2.5 text-sm text-red-700">
            {{ session('error') }}
        </div>
    @endif

    @if ($nativeForm['requires_domain'])
        @php
            $newDomainUrl = ladill_domains_url('/find');
        @endphp
        <div>
            <div class="mb-2 flex items-center justify-between">
                <label class="text-sm font-medium text-gray-700">Domain</label>
                <div class="inline-flex items-center rounded-md bg-gray-100 p-0.5 text-[11px] font-medium">
                    <button type="button" @click="domainSource = 'ladill'"
                            :class="domainSource === 'ladill' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500'"
                            class="rounded px-2 py-1 transition">Ladill</button>
                    <button type="button" @click="domainSource = 'external'"
                            :class="domainSource === 'external' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500'"
                            class="rounded px-2 py-1 transition">External</button>
                </div>
            </div>

            <div x-show="domainSource === 'ladill'" x-cloak>
                @if ($userDomains->isNotEmpty())
                    <div class="space-y-2">
                        <select name="domain_name" :disabled="domainSource !== 'ladill'"
                                class="w-full rounded-lg border-gray-200 bg-white px-3 py-2 text-sm focus:border-gray-400 focus:ring-0">
                            <option value="">Choose a domain</option>
                            @foreach ($userDomains as $domain)
                                <option value="{{ $domain->host }}" @selected(old('domain_name') === $domain->host)>{{ $domain->host }}</option>
                            @endforeach
                        </select>
                        <p class="text-xs text-gray-500">
                            Prefer another?
                            <a href="{{ $newDomainUrl }}" class="font-medium text-gray-700 underline underline-offset-2 hover:text-gray-900">Get a new domain</a>
                        </p>
                    </div>
                @else
                    <div class="rounded-lg bg-gray-50 px-3 py-2.5 text-center text-xs">
                        <a href="{{ $newDomainUrl }}" class="font-medium text-gray-700 underline underline-offset-2 hover:text-gray-900">Get a new domain</a>
                    </div>
                @endif
            </div>
            <div x-show="domainSource === 'external'" x-cloak>
                <input name="domain_name" type="text" x-model="externalDomain" :disabled="domainSource !== 'external'" value="{{ old('domain_name') }}"
                       placeholder="example.com"
                       class="w-full rounded-lg border-gray-200 bg-white px-3 py-2 text-sm placeholder-gray-400 focus:border-gray-400 focus:ring-0">
            </div>
            @error('domain_name')
                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
            @enderror
        </div>
    @endif

    <div>
        <label class="mb-2 block text-sm font-medium text-gray-700">Plan</label>
        <select name="plan_id" x-model="selectedPlan" @change="ensureMonths()"
                class="w-full rounded-lg border-gray-200 bg-white px-3 py-2 text-sm focus:border-gray-400 focus:ring-0">
            @foreach ($nativeForm['packages'] as $package)
                <option value="{{ $package['value'] }}">{{ $package['label'] }}{{ ! empty($package['starting_label']) ? ' — From ' . $package['starting_label'] : '' }}</option>
            @endforeach
        </select>
        @error('plan_id')
            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
        @enderror

        <template x-if="selectedPackage() && selectedPackage().summary">
            <p class="mt-1.5 text-xs text-gray-500" x-text="selectedPackage().summary"></p>
        </template>
    </div>

    <div class="grid grid-cols-2 gap-3">
        <div>
            <label for="order-months" class="mb-1.5 block text-sm font-medium text-gray-700">Billing</label>
            <select id="order-months" name="months" x-model="selectedMonths"
                    class="w-full rounded-lg border-gray-200 bg-white px-3 py-2 text-sm focus:border-gray-400 focus:ring-0">
                <template x-for="term in availableTerms()" :key="term">
                    <option :value="term" x-text="termLabel(term)"></option>
                </template>
            </select>
            @error('months')
                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
            @enderror
        </div>
        <div class="flex flex-col justify-center rounded-lg bg-gray-50 px-3 py-2">
            <p class="text-[11px] font-medium text-gray-400">Price</p>
            <p class="text-lg font-semibold text-gray-900">
                <span x-text="currentPrice() ?? '---'"></span>
                <span x-show="currentPrice()" class="text-xs font-normal text-gray-400">/ mo</span>
            </p>
            <p x-show="currentTotal() && Number(selectedMonths) > 1" class="text-[11px] text-gray-400">
                <span x-text="currentTotal()"></span> total
            </p>
        </div>
    </div>

    @if ($hasAdvanced)
        <div class="rounded-lg border border-gray-100">
            <button type="button" @click="showAdvanced = !showAdvanced"
                    class="flex w-full items-center justify-between px-3 py-2.5 text-sm font-medium text-gray-600 transition hover:text-gray-900">
                <span>Advanced Options</span>
                <svg class="h-4 w-4 text-gray-400 transition-transform duration-200" :class="showAdvanced ? 'rotate-180' : ''" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
            </button>

            <div x-show="showAdvanced" x-collapse>
                <div class="space-y-3 border-t border-gray-100 px-3 pb-3 pt-3">
                    @if ($nativeForm['supports_os'])
                        <div>
                            <label for="order-os" class="mb-1 block text-xs font-medium text-gray-600">Operating System</label>
                            <select id="order-os" name="os" class="w-full rounded-lg border-gray-200 bg-white px-3 py-1.5 text-sm focus:border-gray-400 focus:ring-0">
                                <option value="">Default image</option>
                                @foreach ($nativeForm['os_options'] as $os)
                                    <option value="{{ $os }}" @selected(old('os') === $os)>{{ $osLabels[$os] ?? ucwords(str_replace('_', ' ', $os)) }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endif

                    @if ($nativeForm['supports_addons'])
                        <div>
                            <p class="mb-1.5 text-xs font-medium text-gray-600">Add-ons</p>
                            <div class="grid gap-1.5 sm:grid-cols-2">
                                @foreach ($nativeForm['addon_options'] as $addon)
                                    <label class="flex items-center gap-2 rounded-md bg-gray-50 px-2.5 py-2 text-xs text-gray-700 transition hover:bg-gray-100">
                                        <input type="checkbox" name="addons[]" value="{{ $addon }}" @checked(in_array($addon, old('addons', []), true)) class="h-3.5 w-3.5 rounded border-gray-300 text-gray-900 focus:ring-0">
                                        <span>{{ $addonLabels[$addon] ?? ucwords(str_replace('_', ' ', $addon)) }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    @if ($nativeForm['supports_ssl_toggle'] || $nativeForm['supports_dedicated_ip'])
                        <div class="flex flex-wrap gap-1.5">
                            @if ($nativeForm['supports_ssl_toggle'])
                                <label class="flex items-center gap-2 rounded-md bg-gray-50 px-2.5 py-2 text-xs text-gray-700 transition hover:bg-gray-100">
                                    <input type="checkbox" name="enable_ssl" value="1" @checked(old('enable_ssl')) class="h-3.5 w-3.5 rounded border-gray-300 text-gray-900 focus:ring-0">
                                    <span>Bundled SSL</span>
                                </label>
                            @endif
                            @if ($nativeForm['supports_dedicated_ip'])
                                <label class="flex items-center gap-2 rounded-md bg-gray-50 px-2.5 py-2 text-xs text-gray-700 transition hover:bg-gray-100">
                                    <input type="checkbox" name="add_dedicated_ip" value="1" @checked(old('add_dedicated_ip')) class="h-3.5 w-3.5 rounded border-gray-300 text-gray-900 focus:ring-0">
                                    <span>Dedicated IP</span>
                                </label>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>
    @endif
</div>