{{--
    Renders dynamic type-specific field inputs.
    Variables: $fieldTemplates (array keyed by type), $property (nullable, for edit mode)
--}}
@php $oldTypeDetails = old('type_details'); @endphp
@foreach(App\Models\Property::activeTypes() as $type)
    <div class="type-fields-section" id="fields-{{ $type }}" style="display:none">
        @if(isset($fieldTemplates[$type]) && $fieldTemplates[$type]->isNotEmpty())
            <hr class="my-3">
            <div class="row g-3">
                @foreach($fieldTemplates[$type] as $field)
                    @php
                        $currentValue = $oldTypeDetails !== null
                            ? ($oldTypeDetails[$field->field_key] ?? null)
                            : (isset($property) && is_array($property->type_details)
                                ? ($property->type_details[$field->field_key] ?? null)
                                : null);
                        $isDependent = !empty($field->depends_on);
                    @endphp
                    <div class="col-md-4 type-field-wrap"
                         data-field-key="{{ $field->field_key }}"
                         @if($isDependent)
                             data-depends-on="{{ $field->depends_on }}"
                             data-show-if-value="{{ $field->show_if_value }}"
                             style="display:none"
                         @endif
                    >
                        <label class="form-label fw-medium">
                            {{ $field->field_label }}
                            @if($field->is_required)<span class="text-danger">*</span>@endif
                        </label>

                        @if($field->field_type === 'select')
                            <select name="type_details[{{ $field->field_key }}]"
                                    class="form-select"
                                    @if($field->is_required) data-required="1" @endif
                                    disabled>
                                <option value="">— Select —</option>
                                @foreach($field->options as $opt)
                                    <option value="{{ $opt }}"
                                            {{ $currentValue === $opt ? 'selected' : '' }}>
                                        {{ $opt }}
                                    </option>
                                @endforeach
                            </select>

                        @elseif($field->field_type === 'boolean')
                            <div class="d-flex gap-3 mt-1">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio"
                                           name="type_details[{{ $field->field_key }}]"
                                           id="{{ $type }}_{{ $field->field_key }}_yes"
                                           value="1"
                                           {{ ($currentValue !== null && (string) $currentValue === '1') ? 'checked' : '' }}
                                           disabled>
                                    <label class="form-check-label" for="{{ $type }}_{{ $field->field_key }}_yes">Yes</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio"
                                           name="type_details[{{ $field->field_key }}]"
                                           id="{{ $type }}_{{ $field->field_key }}_no"
                                           value="0"
                                           {{ ($currentValue !== null && (string) $currentValue === '0') ? 'checked' : '' }}
                                           disabled>
                                    <label class="form-check-label" for="{{ $type }}_{{ $field->field_key }}_no">No</label>
                                </div>
                            </div>

                        @elseif($field->field_type === 'number')
                            <input type="number" step="any"
                                   name="type_details[{{ $field->field_key }}]"
                                   class="form-control"
                                   value="{{ $currentValue }}"
                                   @if($field->is_required) data-required="1" @endif
                                   disabled>

                        @elseif($field->field_type === 'textarea')
                            <textarea name="type_details[{{ $field->field_key }}]"
                                      class="form-control"
                                      rows="3"
                                      @if($field->is_required) data-required="1" @endif
                                      disabled>{{ $currentValue }}</textarea>

                        @else
                            <input type="text"
                                   name="type_details[{{ $field->field_key }}]"
                                   class="form-control"
                                   value="{{ $currentValue }}"
                                   @if($field->is_required) data-required="1" @endif
                                   disabled>
                        @endif
                    </div>
                @endforeach
            </div>
        @endif
    </div>
@endforeach

@push('scripts')
<script>
(function () {
    var typeSelect = document.getElementById('property-type-select');
    if (!typeSelect) return;

    function getFieldValue(section, fieldKey) {
        var name = 'type_details[' + fieldKey + ']';
        var checked = section.querySelector('input[type="radio"][name="' + name + '"]:checked');
        if (checked) return checked.value;
        if (section.querySelector('input[type="radio"][name="' + name + '"]')) return '';
        var el = section.querySelector('[name="' + name + '"]');
        return el ? el.value : '';
    }

    function applyDependencies(section) {
        section.querySelectorAll('.type-field-wrap[data-depends-on]').forEach(function (wrap) {
            var parentKey  = wrap.dataset.dependsOn;
            var triggerVal = wrap.dataset.showIfValue;
            var visible    = (getFieldValue(section, parentKey) === triggerVal);

            wrap.style.display = visible ? '' : 'none';
            wrap.querySelectorAll('input, select, textarea').forEach(function (inp) {
                inp.disabled = !visible;
                if (!visible) {
                    inp.removeAttribute('required');
                } else if (inp.dataset.required === '1') {
                    inp.setAttribute('required', '');
                }
            });
        });
    }

    function bindDependencyListeners(section) {
        if (section.dataset.listenersbound) return;
        section.dataset.listenersbound = '1';
        section.addEventListener('change', function () { applyDependencies(section); });
        section.addEventListener('input',  function () { applyDependencies(section); });
    }

    function showFields(type) {
        document.querySelectorAll('.type-fields-section').forEach(function (el) {
            el.style.display = 'none';
            el.querySelectorAll('input, select, textarea').forEach(function (inp) {
                inp.disabled = true;
                inp.removeAttribute('required');
            });
        });

        if (type) {
            var section = document.getElementById('fields-' + type);
            if (section) {
                section.style.display = 'block';
                section.querySelectorAll('.type-field-wrap').forEach(function (wrap) {
                    if (!wrap.dataset.dependsOn) {
                        wrap.querySelectorAll('input, select, textarea').forEach(function (inp) {
                            inp.disabled = false;
                            if (inp.dataset.required === '1') inp.setAttribute('required', '');
                        });
                    }
                });
                applyDependencies(section);
                bindDependencyListeners(section);
            }
        }
    }

    typeSelect.addEventListener('change', function () { showFields(this.value); });
    showFields(typeSelect.value);
}());
</script>
@endpush