@php
    $n = $survey ?? null;
    $enabledLocales = site_supported_locales();
    $primaryLocale = in_array('fa', $enabledLocales, true) ? 'fa' : ($enabledLocales[0] ?? 'fa');
    $publishedValue = old('published_at', $n?->published_at?->format('Y-m-d\TH:i') ?? now()->format('Y-m-d\TH:i'));
    $closesValue = old('closes_at', $n?->closes_at?->format('Y-m-d\TH:i'));
    $type = old('type', $n?->type ?? 'single');
    $emptyOption = ['label_fa' => '', 'label_en' => '', 'label_de' => '', 'sort_order' => 0];
    $defaultOptions = array_map(
        fn (int $i) => array_merge($emptyOption, ['sort_order' => $i]),
        range(0, 3)
    );
    $existingOptions = old('options');
    if (! is_array($existingOptions)) {
        if ($n && $n->relationLoaded('options') && $n->options->isNotEmpty()) {
            $existingOptions = $n->options->map(fn ($o) => [
                'label_fa' => $o->label_fa,
                'label_en' => $o->label_en,
                'label_de' => $o->label_de,
                'sort_order' => $o->sort_order,
            ])->values()->all();
        } else {
            $existingOptions = $defaultOptions;
        }
    }
    $optionFieldClass = match (count($enabledLocales)) {
        1 => 'sm:col-span-10',
        2 => 'sm:col-span-5',
        default => 'sm:col-span-3',
    };
@endphp

<div
    class="space-y-6"
    x-data="{
        type: @js($type),
        options: @js(array_values($existingOptions)),
        addOption() {
            if (this.options.length >= 6) return;
            this.options.push({ label_fa: '', label_en: '', label_de: '', sort_order: this.options.length });
        },
        removeOption(index) {
            if (this.options.length <= 2) return;
            this.options.splice(index, 1);
        }
    }"
>
    <div class="grid gap-4 sm:grid-cols-2">
        @foreach($enabledLocales as $loc)
            <div class="sm:col-span-2">
                <label class="admin-label">
                    @if (count($enabledLocales) > 1)
                        {{ __("admin.locale_{$loc}") }} —
                    @endif
                    {{ __('admin.title') }}
                </label>
                <input name="title_{{ $loc }}" value="{{ old("title_{$loc}", $n?->{"title_{$loc}"}) }}" class="admin-input" @required($loc === $primaryLocale) />
            </div>
            <div class="sm:col-span-2">
                <label class="admin-label">
                    @if (count($enabledLocales) > 1)
                        {{ __("admin.locale_{$loc}") }} —
                    @endif
                    {{ __('admin.commission_survey_question') }}
                </label>
                <textarea name="question_{{ $loc }}" rows="3" class="admin-input" @required($loc === $primaryLocale)>{{ old("question_{$loc}", $n?->{"question_{$loc}"}) }}</textarea>
            </div>
        @endforeach

        <div>
            <label class="admin-label">{{ __('admin.commission_survey_type') }}</label>
            <select name="type" class="admin-input" x-model="type" required>
                <option value="single">{{ __('admin.commission_survey_type_single') }}</option>
                <option value="multiple">{{ __('admin.commission_survey_type_multiple') }}</option>
                <option value="text">{{ __('admin.commission_survey_type_text') }}</option>
            </select>
        </div>
        <div>
            <label class="admin-label">{{ __('admin.published_at') }}</label>
            <x-admin.date-field name="published_at" mode="datetime" :value="$publishedValue" required />
            @error('published_at')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
        </div>
        <div>
            <label class="admin-label">{{ __('admin.commission_survey_closes_at') }}</label>
            <x-admin.date-field name="closes_at" mode="datetime" :value="$closesValue" />
            @error('closes_at')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
            <p class="mt-1 text-xs text-slate-500">{{ __('admin.commission_survey_closes_hint') }}</p>
        </div>
        <div class="flex items-center gap-2 pt-6">
            <input type="hidden" name="is_active" value="0" />
            <label class="flex items-center gap-2 text-sm">
                <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $n?->is_active ?? true)) class="rounded" />
                <span>{{ __('admin.is_active') }}</span>
            </label>
        </div>
    </div>

    <div class="space-y-3 rounded-xl border border-slate-100 p-4" x-show="type !== 'text'" x-cloak>
        <div class="flex items-center justify-between gap-3">
            <div>
                <h3 class="text-sm font-bold text-slate-800">{{ __('admin.commission_survey_options') }}</h3>
                <p class="text-xs text-slate-500">{{ __('admin.commission_survey_options_hint') }}</p>
            </div>
            <button type="button" class="admin-btn-muted text-xs" @click="addOption()" :disabled="options.length >= 6">
                {{ __('admin.commission_survey_add_option') }}
            </button>
        </div>
        @error('options')<p class="text-xs text-rose-600">{{ $message }}</p>@enderror

        <template x-for="(option, index) in options" :key="index">
            <div class="grid gap-3 rounded-lg border border-slate-100 p-3 sm:grid-cols-12">
                @foreach($enabledLocales as $loc)
                    <div class="{{ $optionFieldClass }}">
                        <label class="admin-label">
                            @if (count($enabledLocales) > 1)
                                {{ __("admin.locale_{$loc}") }}
                            @else
                                <span x-text="'{{ __('admin.commission_survey_option') }} ' + (index + 1)"></span>
                            @endif
                        </label>
                        <input
                            class="admin-input"
                            :name="'options['+index+'][label_{{ $loc }}]'"
                            x-model="option.label_{{ $loc }}"
                            @required($loc === $primaryLocale)
                        />
                    </div>
                @endforeach
                <div class="flex items-end sm:col-span-2">
                    <input type="hidden" :name="'options['+index+'][sort_order]'" :value="index" />
                    <button type="button" class="text-xs text-rose-600 hover:underline" @click="removeOption(index)" :disabled="options.length <= 2">
                        {{ __('admin.delete') }}
                    </button>
                </div>
            </div>
        </template>
    </div>
</div>