{{-- Repeatable key/value rows saved into the model's `specs` JSON column. --}}
<div class="col-12">
    <label class="form-label">{{ __('admin.fields.specs') }}</label>

    <div id="specsRows" class="d-flex flex-column gap-2">
        @forelse ($specs ?? [] as $key => $value)
            <div class="row g-2 spec-row">
                <div class="col-md-5">
                    <input type="text" name="spec_keys[]" class="form-control" value="{{ $key }}" placeholder="{{ __('admin.fields.name') }}">
                </div>
                <div class="col-md-6">
                    <input type="text" name="spec_values[]" class="form-control" value="{{ $value }}" placeholder="{{ __('admin.fields.description') }}">
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-outline-danger w-100" onclick="this.closest('.spec-row').remove()">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
            </div>
        @empty
            <div class="row g-2 spec-row">
                <div class="col-md-5">
                    <input type="text" name="spec_keys[]" class="form-control" placeholder="{{ __('admin.fields.name') }}">
                </div>
                <div class="col-md-6">
                    <input type="text" name="spec_values[]" class="form-control" placeholder="{{ __('admin.fields.description') }}">
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-outline-danger w-100" onclick="this.closest('.spec-row').remove()">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
            </div>
        @endforelse
    </div>

    <button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addSpecRow()">
        <i class="bi bi-plus-lg"></i> {{ __('admin.actions.create') }}
    </button>
</div>

@push('scripts')
    <script>
        function addSpecRow() {
            const row = document.querySelector('#specsRows .spec-row').cloneNode(true);
            row.querySelectorAll('input').forEach(input => input.value = '');
            document.getElementById('specsRows').appendChild(row);
        }
    </script>
@endpush