@props([
'name' => 'items',
'title' => 'Items',
'columns' => [],
'model' => null,
'initEmpty' => false,
'hideFirstTrash' => false,
'notAllowToAdd' => false,
'deleteOld' => true,
])

<div class="repeater-container mb-4" data-repeater>
    <div class="repeater-items">
        @php
        $items = old($name, $model ? $model->{$name} : []);
        if(empty($items) && $initEmpty) $items = [[]];
        @endphp

        @foreach($items as $index => $item)
        <div class="repeater-item mb-4 p-4 border rounded" data-repeater-item>
            <div class="row align-items-start">
                @foreach($columns as $column)
                <div class="{{ $column['width'] ?? 'col-md-12' }} mb-3 mb-md-0">
                    @if($column['type'] === 'image')
                    <x-ui::form.image
                        name="{{ $name }}[{{ $index }}][{{ $column['name'] }}]"
                        :label="$column['label']"
                        :naming_input="true"
                        wrapper-class="repeater-image-upload h-100"
                        :value="$item[$column['name']] ?? null"
                    />
                    @else
                    @foreach($column['translations'] ?? [config('app.locale')] as $lang)
                    <x-ui::form.input
                        :star="$column['required'] ?? false"
                        size="3"
                        name="{{ $name }}[{{ $index }}][{{ $column['name'] }}][{{ $lang }}]"
                        label="{{ $column['label'] }} ({{ strtoupper($lang) }})"
                        :value="$item[$column['name']][$lang] ?? ''"
                        :type="$column['type'] ?? 'text'"
                    />
                    @endforeach
                    @endif
                </div>
                @endforeach

                <div class="col-12 text-end">
                    @if(!($hideFirstTrash && $loop->first) || $loop->count > 1)
                    <button type="button" class="btn btn-danger" data-repeater-remove>
                        <i class="fas fa-trash"></i> {{ __('Remove') }}
                    </button>
                    @endif
                </div>
            </div>
        </div>
        @endforeach
    </div>

    @if(!$notAllowToAdd)
    <div class="text-center mt-3">
        <button type="button" class="btn btn-primary" data-repeater-add>
            <i class="fas fa-plus"></i> {{ __('Add ').$title }}
        </button>
    </div>
    @endif
</div>

@once
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('[data-repeater]').forEach(repeaterContainer => {
            const itemsContainer = repeaterContainer.querySelector('.repeater-items');
            const addButton = repeaterContainer.querySelector('[data-repeater-add]');
            const initialItem = itemsContainer.querySelector('[data-repeater-item]').cloneNode(true);

            function createNewItem() {
                const newItem = initialItem.cloneNode(true);
                resetItemValues(newItem);
                return newItem;
            }

            function resetItemValues(item) {
                // Clear inputs
                item.querySelectorAll('input:not([type="hidden"]), textarea, select').forEach(input => {
                    if(input.type === 'file') {
                        input.value = '';
                        const preview = input.closest('.repeater-image-upload')?.querySelector('.image-preview');
                        if(preview) preview.innerHTML = '';
                    } else {
                        input.value = input.dataset.default || '';
                    }
                });

                // Clear validation
                item.querySelectorAll('.invalid-feedback').forEach(e => e.remove());
                item.querySelectorAll('.is-invalid').forEach(e => e.classList.remove('is-invalid'));
            }

            function updateItemIndices() {
                itemsContainer.querySelectorAll('[data-repeater-item]').forEach((item, index) => {
                    // Update names
                    item.querySelectorAll('[name]').forEach(el => {
                        el.name = el.name.replace(
                            new RegExp(`${repeaterContainer.dataset.name}\\[\\d+\\]`, 'g'),
                            `${repeaterContainer.dataset.name}[${index}]`
                        );
                    });

                    // Update IDs and labels
                    item.querySelectorAll('[id]').forEach(el => {
                        const newId = el.id.replace(/-(\d+)-/g, `-${index}-`);
                        el.id = newId;
                        item.querySelectorAll(`label[for="${el.id}"]`).forEach(label => {
                            label.htmlFor = newId;
                        });
                    });
                });
            }

            if(addButton) {
                addButton.addEventListener('click', () => {
                    const newItem = createNewItem();
                    itemsContainer.appendChild(newItem);
                    updateItemIndices();
                });
            }

            repeaterContainer.addEventListener('click', (e) => {
                if(e.target.closest('[data-repeater-remove]')) {
                    const item = e.target.closest('[data-repeater-item]');
                    if(itemsContainer.children.length > 1) {
                        item.remove();
                        updateItemIndices();
                    }
                }
            });

            updateItemIndices();
        });
    });
</script>
@endonce