@php
    $rootGroups = $optionGroups->whereNull('parent_group_id');
@endphp

@if ($rootGroups->isNotEmpty())
    @foreach ($rootGroups as $group)
        @php
            $fieldName = 'listing_options['.$group->key.']';
            $selectedValue = $selectedOptions[$group->key] ?? '';
            $childGroup = $optionGroups->firstWhere('parent_group_id', $group->id);
        @endphp

        <div class="description-item-inner listing-dynamic-option-field" data-group-key="{{ $group->key }}">
            <label class="form-label" for="listing_option_{{ $group->key }}">
                {{ $group->label }}
                @if ($group->is_required)
                    <span>*</span>
                @endif
            </label>

            @if ($group->type === 'select')
                <select
                    class="form-select listing-option-select"
                    id="listing_option_{{ $group->key }}"
                    name="{{ $fieldName }}"
                    data-group-id="{{ $group->id }}"
                    data-group-key="{{ $group->key }}"
                    @if ($childGroup) data-triggers-group-id="{{ $childGroup->id }}" @endif
                    {{ $group->is_required ? 'required' : '' }}
                >
                    <option value="">{{ __('translate.Select') }}</option>
                    @foreach ($group->options as $option)
                        <option value="{{ $option->id }}" {{ (string) $selectedValue === (string) $option->id ? 'selected' : '' }}>
                            {{ $option->name }}
                        </option>
                    @endforeach
                </select>
            @elseif ($group->type === 'number')
                <input
                    type="number"
                    class="form-control"
                    id="listing_option_{{ $group->key }}"
                    name="{{ $fieldName }}"
                    value="{{ $selectedValue }}"
                    {{ $group->is_required ? 'required' : '' }}
                >
            @else
                <input
                    type="text"
                    class="form-control"
                    id="listing_option_{{ $group->key }}"
                    name="{{ $fieldName }}"
                    value="{{ $selectedValue }}"
                    {{ $group->is_required ? 'required' : '' }}
                >
            @endif
        </div>

        @if ($childGroup)
            @php
                $childFieldName = 'listing_options['.$childGroup->key.']';
                $childSelected = $selectedOptions[$childGroup->key] ?? '';
            @endphp
            <div
                class="description-item-inner listing-dynamic-option-field listing-dynamic-option-field--dependent"
                id="listing_option_dependent_{{ $childGroup->key }}"
                data-parent-group-id="{{ $group->id }}"
                data-child-group-id="{{ $childGroup->id }}"
                data-required="{{ $childGroup->is_required ? '1' : '0' }}"
            >
                <label class="form-label" for="listing_option_{{ $childGroup->key }}">
                    {{ $childGroup->label }}
                    @if ($childGroup->is_required)
                        <span>*</span>
                    @endif
                </label>
                <select
                    class="form-select listing-option-select listing-option-select--dependent"
                    id="listing_option_{{ $childGroup->key }}"
                    name="{{ $childFieldName }}"
                    data-group-id="{{ $childGroup->id }}"
                    data-parent-group-id="{{ $group->id }}"
                    data-preselect="{{ $childSelected }}"
                    @disabled(! $selectedValue)
                    {{ $childGroup->is_required && $selectedValue ? 'required' : '' }}
                >
                    <option value="">{{ __('translate.Select') }}</option>
                </select>
            </div>
        @endif
    @endforeach
@endif