@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="col-md-6 listing-dynamic-option-col">
            <div class="crancy__item-form--group mg-top-form-20 listing-dynamic-option-field" data-group-key="{{ $group->key }}">
                <label class="crancy__item-label" for="listing_option_{{ $group->key }}">
                    {{ $group->label }}
                    @if ($group->is_required)
                        <span>*</span>
                    @endif
                </label>

                @if ($group->type === 'select')
                    <select
                        class="form-select crancy__item-input 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 crancy__item-input"
                        id="listing_option_{{ $group->key }}"
                        name="{{ $fieldName }}"
                        value="{{ $selectedValue }}"
                        {{ $group->is_required ? 'required' : '' }}
                    >
                @else
                    <input
                        type="text"
                        class="form-control crancy__item-input"
                        id="listing_option_{{ $group->key }}"
                        name="{{ $fieldName }}"
                        value="{{ $selectedValue }}"
                        {{ $group->is_required ? 'required' : '' }}
                    >
                @endif
            </div>
        </div>

        @if ($childGroup)
            @php
                $childFieldName = 'listing_options['.$childGroup->key.']';
                $childSelected = $selectedOptions[$childGroup->key] ?? '';
            @endphp
            <div class="col-md-6 listing-dynamic-option-col">
                <div
                    class="crancy__item-form--group mg-top-form-20 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="crancy__item-label" for="listing_option_{{ $childGroup->key }}">
                        {{ $childGroup->label }}
                        @if ($childGroup->is_required)
                            <span>*</span>
                        @endif
                    </label>
                    <select
                        class="form-select crancy__item-input 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>
            </div>
        @endif
    @endforeach
@endif