{{--
    Partial: поле типа repeater — динамический список строк с sub-полями
    Переменные из родителя: $field, $prefix, $values, $imageUrl
--}}
@php $repName = $field['name']; $subFields = $field['sub_fields']; @endphp
<div class="form-group">
    <label class="font-weight-bold d-block mb-2">{{ $field['label'] }}</label>

    <div class="repeater-wrap" data-repeater="{{ $repName }}">

        {{-- ── Существующие строки (с данными) ──────────────────── --}}
        <div class="repeater-rows" id="repeater-rows-{{ $repName }}">
            @foreach($values[$repName] ?? [] as $i => $row)
                <div class="repeater-row card card-secondary mb-2" data-index="{{ $i }}">
                    <div class="card-body py-2 px-3">
                        <div class="d-flex align-items-start">
                            <span class="repeater-handle text-muted mr-2 mt-1">&#9776;</span>
                            <div class="flex-grow-1">
                                @foreach($subFields as $sub)
                                    <div class="form-group mb-2">
                                        <label class="small text-muted mb-0">{{ $sub['label'] }}</label>

                                        @if($sub['type'] === 'textarea')
                                            <textarea name="{{ $prefix }}[{{ $repName }}][{{ $i }}][{{ $sub['name'] }}]"
                                                      class="form-control form-control-sm" rows="2">{{ $row[$sub['name']] ?? '' }}</textarea>

                                        @elseif($sub['type'] === 'image')
                                            @php
                                                $subCurVal = $row[$sub['name']] ?? '';
                                                $subCurUrl = $imageUrl($subCurVal);
                                            @endphp
                                            <input type="hidden"
                                                   name="{{ $prefix }}[{{ $repName }}][{{ $i }}][{{ $sub['name'] }}]"
                                                   value="{{ $subCurVal }}"
                                                   class="js-img-current">
                                            @if($subCurVal)
                                                <div class="mb-1 js-img-preview-current">
                                                    <img src="{{ $subCurUrl }}"
                                                         class="img-thumbnail d-block"
                                                         style="max-height:80px;max-width:120px;object-fit:cover">
                                                </div>
                                            @endif
                                            <div class="custom-file" style="max-width:300px">
                                                <input type="file"
                                                       name="uploads[{{ $repName }}][{{ $i }}][{{ $sub['name'] }}]"
                                                       class="custom-file-input js-img-upload"
                                                       accept="image/*"
                                                       id="upload-{{ $repName }}-{{ $i }}-{{ $sub['name'] }}">
                                                <label class="custom-file-label" for="upload-{{ $repName }}-{{ $i }}-{{ $sub['name'] }}">
                                                    {{ $subCurVal ? 'Заменить' : 'Выбрать' }}
                                                </label>
                                            </div>
                                            <div class="js-img-preview-new mt-1" style="display:none">
                                                <img src="" class="img-thumbnail d-block" style="max-height:80px;max-width:120px;object-fit:cover">
                                                <small class="js-img-new-name text-muted"></small>
                                            </div>

                                        @else
                                            <input type="text"
                                                   name="{{ $prefix }}[{{ $repName }}][{{ $i }}][{{ $sub['name'] }}]"
                                                   class="form-control form-control-sm"
                                                   value="{{ $row[$sub['name']] ?? '' }}">
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-danger ml-2 flex-shrink-0 btn-remove-repeater-row" title="Удалить строку">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- ── Шаблон новой строки (JS-клонирование, __IDX__ → реальный индекс) ── --}}
        <script type="text/template" id="repeater-tpl-{{ $repName }}">
            <div class="repeater-row card card-secondary mb-2" data-index="__IDX__">
                <div class="card-body py-2 px-3">
                    <div class="d-flex align-items-start">
                        <span class="repeater-handle text-muted mr-2 mt-1">&#9776;</span>
                        <div class="flex-grow-1">
                            @foreach($subFields as $sub)
                                <div class="form-group mb-2">
                                    <label class="small text-muted mb-0">{{ $sub['label'] }}</label>
                                    @if($sub['type'] === 'textarea')
                                        <textarea name="{{ $prefix }}[{{ $repName }}][__IDX__][{{ $sub['name'] }}]"
                                                  class="form-control form-control-sm" rows="2"></textarea>
                                    @elseif($sub['type'] === 'image')
                                        <input type="hidden"
                                               name="{{ $prefix }}[{{ $repName }}][__IDX__][{{ $sub['name'] }}]"
                                               value=""
                                               class="js-img-current">
                                        <div class="custom-file" style="max-width:300px">
                                            <input type="file"
                                                   name="uploads[{{ $repName }}][__IDX__][{{ $sub['name'] }}]"
                                                   class="custom-file-input js-img-upload"
                                                   accept="image/*"
                                                   id="upload-{{ $repName }}-__IDX__-{{ $sub['name'] }}">
                                            <label class="custom-file-label" for="upload-{{ $repName }}-__IDX__-{{ $sub['name'] }}">
                                                Выбрать изображение
                                            </label>
                                        </div>
                                        <div class="js-img-preview-new mt-1" style="display:none">
                                            <img src="" class="img-thumbnail d-block" style="max-height:80px;max-width:120px;object-fit:cover">
                                            <small class="js-img-new-name text-muted"></small>
                                        </div>
                                    @else
                                        <input type="text"
                                               name="{{ $prefix }}[{{ $repName }}][__IDX__][{{ $sub['name'] }}]"
                                               class="form-control form-control-sm">
                                    @endif
                                </div>
                            @endforeach
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-danger ml-2 flex-shrink-0 btn-remove-repeater-row" title="Удалить строку">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </div>
        </script>

        <button type="button"
                class="btn btn-sm btn-outline-primary btn-add-repeater-row"
                data-repeater="{{ $repName }}">
            <i class="fas fa-plus"></i> Добавить строку
        </button>
    </div>
</div>