@props([
    'action',
    'method' => 'POST',
    'field' => null,
    'module',
    'entity',
    'submitLabel',
])

@php
    $typeOptions = [];
    foreach (\App\Modules\Customization\CustomFields\Support\CustomFieldType::all() as $t) {
        $typeOptions[$t] = __('custom_fields.types.'.$t);
    }
@endphp

<form method="POST" action="{{ $action }}" novalidate>
    @csrf
    @if (strtoupper($method) !== 'POST')
        @method($method)
    @endif

    <input type="hidden" name="module" value="{{ $module }}">
    <input type="hidden" name="entity" value="{{ $entity }}">

    <div class="card">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <x-ui.form.input name="name" :label="__('custom_fields.fields.name')" :value="$field?->name" required />
                </div>
                <div class="col-md-6">
                    <x-ui.form.input name="slug" :label="__('custom_fields.fields.slug')" :value="$field?->slug" required />
                </div>
                <div class="col-md-6">
                    <x-ui.form.select name="field_type" :label="__('custom_fields.fields.field_type')" :options="$typeOptions"
                        :selected="old('field_type', $field?->field_type)" required />
                </div>
                @if ($field !== null)
                    <div class="col-md-6">
                        <x-ui.form.input name="sort_order" type="number" min="0" :label="__('custom_fields.fields.sort_order')"
                            :value="old('sort_order', $field->sort_order)" />
                    </div>
                @endif
                <div class="col-md-6">
                    <x-ui.form.select name="is_required" :label="__('custom_fields.fields.is_required')"
                        :options="[0 => __('common.no'), 1 => __('common.yes')]"
                        :selected="old('is_required', $field?->is_required ? 1 : 0)" required />
                </div>
                <div class="col-md-6">
                    <x-ui.form.select name="is_active" :label="__('custom_fields.fields.is_active')"
                        :options="[1 => __('custom_fields.status.active'), 0 => __('custom_fields.status.inactive')]"
                        :selected="old('is_active', $field?->is_active ? 1 : 1)" required />
                </div>
                <div class="col-12">
                    <x-ui.form.input name="placeholder" :label="__('custom_fields.fields.placeholder')"
                        :value="$field?->placeholder" />
                </div>
                <div class="col-12">
                    <x-ui.form.field name="help_text" :label="__('custom_fields.fields.help_text')" id="help_text">
                        <textarea id="help_text" name="help_text" rows="2" class="form-control">{{ old('help_text', $field?->help_text) }}</textarea>
                    </x-ui.form.field>
                </div>
                <div class="col-12">
                    <x-ui.form.input name="validation_rules" :label="__('custom_fields.fields.validation_rules')"
                        :value="$field?->validation_rules"
                        :placeholder="__('custom_fields.placeholders.validation_rules')" />
                </div>
                <div class="col-12">
                    <p class="fw-semibold mb-2">{{ __('custom_fields.fields.options') }}</p>
                    <p class="text-muted small">{{ __('custom_fields.hints.options') }}</p>
                    @php
                        $rows = old('options', $field !== null ? $field->options->map(fn ($o) => ['label' => $o->label, 'value' => $o->value])->all() : [['label' => '', 'value' => ''], ['label' => '', 'value' => ''], ['label' => '', 'value' => '']]);
                    @endphp
                    @foreach ($rows as $i => $row)
                        <div class="row g-2 mb-2">
                            <div class="col-md-5">
                                <input type="text" name="options[{{ $i }}][label]" value="{{ $row['label'] ?? '' }}"
                                    class="form-control" placeholder="{{ __('custom_fields.fields.option_label') }}">
                            </div>
                            <div class="col-md-5">
                                <input type="text" name="options[{{ $i }}][value]" value="{{ $row['value'] ?? '' }}"
                                    class="form-control" placeholder="{{ __('custom_fields.fields.option_value') }}">
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="card-footer d-flex justify-content-end gap-2 bg-white">
            <x-ui.buttons.secondary :href="route('settings.custom-fields.index')">{{ __('common.cancel') }}</x-ui.buttons.secondary>
            <x-ui.buttons.primary type="submit" icon="fe fe-save">{{ $submitLabel }}</x-ui.buttons.primary>
        </div>
    </div>
</form>
