@props([
    'name',
    'label',
    'value' => [],
    'required' => false,
    'help' => null,
    'fields' => [],
    'min' => 0,
    'max' => 10,
    'sortable' => false
])

@php
    $items = is_array($value) ? $value : (is_string($value) ? json_decode($value, true) ?? [] : []);
    $uniqueId = 'repeater_' . md5($name . time());
@endphp

<div class="form-group input-with-label">
    <div class="repeater-header flex justify-between items-center mb-3">
        <label class="form-label mb-2 block fw-semibold mb-0 text-xl">
            {{ $label }}
            @if($required)
                <span class="text-danger ms-1">*</span>
            @endif
            @if($help)
                <i class="fas fa-info-circle ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $help }}"></i>
            @endif
        </label>

        <div class="repeater-controls">
            <span class="badge bg-secondary me-2" id="count-{{ $uniqueId }}">{{ count($items) }}/{{ $max }}</span>
            <button type="button" class="btn btn-sm btn-primary add-item" data-repeater="{{ $uniqueId }}" {{ count($items) >= $max ? 'disabled' : '' }}>
                <i class="fas fa-plus"></i> Add Item
            </button>
        </div>
    </div>

    <div class="repeater-container" id="{{ $uniqueId }}" data-name="{{ $name }}" data-min="{{ $min }}" data-max="{{ $max }}" data-sortable="{{ $sortable ? 'true' : 'false' }}">
        @if(count($items) > 0)
            @foreach($items as $index => $item)
                <div class="repeater-item card mb-3" data-index="{{ $index }}">
                    <div class="card-header bg-light py-2">
                        <div class="flex justify-between items-center">
                            <span class="item-title fw-semibold text-xl">Item {{ $index + 1 }}</span>
                            <div class="item-controls">
                                @if($sortable)
                                    <button type="button" class="btn btn-xs btn-outline-secondary me-1 move-up" title="Move Up" {{ $index === 0 ? 'disabled' : '' }}>
                                        <i class="fas fa-chevron-up"></i>
                                    </button>
                                    <button type="button" class="btn btn-xs btn-outline-secondary me-1 move-down" title="Move Down" {{ $index === count($items) - 1 ? 'disabled' : '' }}>
                                        <i class="fas fa-chevron-down"></i>
                                    </button>
                                @endif
                                <button type="button" class="btn btn-xs btn-outline-secondary me-1 toggle-item" title="Toggle">
                                    <i class="fas fa-chevron-up"></i>
                                </button>
                                <button type="button" class="btn btn-xs btn-outline-danger remove-item" title="Remove" {{ count($items) <= $min ? 'disabled' : '' }}>
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @foreach($fields as $fieldName => $fieldConfig)
                                @php
                                    $fieldValue = $item[$fieldName] ?? ($fieldConfig['default'] ?? '');
                                    $colClass = 'col-12';
                                    if (isset($fieldConfig['col'])) {
                                        $colClass = 'col-md-' . $fieldConfig['col'];
                                    }
                                @endphp
                                <div class="{{ $colClass }} mb-3">
                                    @if($fieldConfig['type'] === 'text')
                                        <label class="form-label mb-2 block mb-1">{{ $fieldConfig['label'] }}
                                            @if($fieldConfig['required'] ?? false) <span class="text-danger">*</span> @endif
                                        </label>
                                        <input type="text"
                                               name="{{ $name }}[{{ $index }}][{{ $fieldName }}]"
                                               class="form-control mb-2"
                                               value="{{ old($name . '.' . $index . '.' . $fieldName, $fieldValue) }}"
                                               placeholder="{{ $fieldConfig['placeholder'] ?? '' }}"
                                               {{ ($fieldConfig['required'] ?? false) ? 'required' : '' }}>
                                        @if($fieldConfig['help'] ?? false)
                                            <small class="form-text text-muted">{{ $fieldConfig['help'] }}</small>
                                        @endif

                                    @elseif($fieldConfig['type'] === 'textarea')
                                        <label class="form-label mb-2 block">{{ $fieldConfig['label'] }}
                                            @if($fieldConfig['required'] ?? false) <span class="text-danger">*</span> @endif
                                        </label>
                                        <textarea name="{{ $name }}[{{ $index }}][{{ $fieldName }}]"
                                                  class="form-control mb-2"
                                                  rows="{{ $fieldConfig['rows'] ?? 3 }}"
                                                  placeholder="{{ $fieldConfig['placeholder'] ?? '' }}"
                                                  {{ ($fieldConfig['required'] ?? false) ? 'required' : '' }}>{{ old($name . '.' . $index . '.' . $fieldName, $fieldValue) }}</textarea>
                                        @if($fieldConfig['help'] ?? false)
                                            <small class="form-text text-muted">{{ $fieldConfig['help'] }}</small>
                                        @endif

                                    @elseif($fieldConfig['type'] === 'select')
                                        <label class="form-label mb-2 block">{{ $fieldConfig['label'] }}
                                            @if($fieldConfig['required'] ?? false) <span class="text-danger">*</span> @endif
                                        </label>
                                        <select name="{{ $name }}[{{ $index }}][{{ $fieldName }}]"
                                                class="form-select"
                                                {{ ($fieldConfig['required'] ?? false) ? 'required' : '' }}>
                                            <option value="">Choose...</option>
                                            @foreach($fieldConfig['options'] ?? [] as $optionValue => $optionLabel)
                                                <option value="{{ $optionValue }}"
                                                        {{ old($name . '.' . $index . '.' . $fieldName, $fieldValue) == $optionValue ? 'selected' : '' }}>
                                                    {{ $optionLabel }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @if($fieldConfig['help'] ?? false)
                                            <small class="form-text text-muted">{{ $fieldConfig['help'] }}</small>
                                        @endif

                                    @elseif($fieldConfig['type'] === 'image')
                                        <label class="form-label mb-2 block">{{ $fieldConfig['label'] }}
                                            @if($fieldConfig['required'] ?? false) <span class="text-danger">*</span> @endif
                                        </label>
                                        <input type="file"
                                               name="{{ $name }}[{{ $index }}][{{ $fieldName }}]"
                                               class="form-control mb-2"
                                               accept="image/*"
                                               {{ ($fieldConfig['required'] ?? false) ? 'required' : '' }}>
                                        @if($fieldValue && is_string($fieldValue))
                                            <div class="mt-2">
                                                <img src="{{ asset($fieldValue) }}" alt="Current image" class="img-thumbnail" style="max-width: 100px; max-height: 100px;">
                                                <input type="hidden" name="{{ $name }}[{{ $index }}][{{ $fieldName }}_current]" value="{{ $fieldValue }}">
                                            </div>
                                        @endif
                                        @if($fieldConfig['help'] ?? false)
                                            <small class="form-text text-muted">{{ $fieldConfig['help'] }}</small>
                                        @endif

                                    @elseif($fieldConfig['type'] === 'url')
                                        <label class="form-label mb-2 block">{{ $fieldConfig['label'] }}
                                            @if($fieldConfig['required'] ?? false) <span class="text-danger">*</span> @endif
                                        </label>
                                        <input type="url"
                                               name="{{ $name }}[{{ $index }}][{{ $fieldName }}]"
                                               class="form-control mb-2"
                                               value="{{ old($name . '.' . $index . '.' . $fieldName, $fieldValue) }}"
                                               placeholder="{{ $fieldConfig['placeholder'] ?? 'https://...' }}"
                                               {{ ($fieldConfig['required'] ?? false) ? 'required' : '' }}>
                                        @if($fieldConfig['help'] ?? false)
                                            <small class="form-text text-muted">{{ $fieldConfig['help'] }}</small>
                                        @endif

                                    @elseif($fieldConfig['type'] === 'number')
                                        <label class="form-label mb-2 block">{{ $fieldConfig['label'] }}
                                            @if($fieldConfig['required'] ?? false) <span class="text-danger">*</span> @endif
                                        </label>
                                        <input type="number"
                                               name="{{ $name }}[{{ $index }}][{{ $fieldName }}]"
                                               class="form-control mb-2"
                                               value="{{ old($name . '.' . $index . '.' . $fieldName, $fieldValue) }}"
                                               min="{{ $fieldConfig['min'] ?? '' }}"
                                               max="{{ $fieldConfig['max'] ?? '' }}"
                                               step="{{ $fieldConfig['step'] ?? 'any' }}"
                                               {{ ($fieldConfig['required'] ?? false) ? 'required' : '' }}>
                                        @if($fieldConfig['help'] ?? false)
                                            <small class="form-text text-muted">{{ $fieldConfig['help'] }}</small>
                                        @endif

                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endforeach
        @else
            <div class="empty-state text-center py-5 text-muted">
                <i class="fas fa-plus-circle fa-3x mb-3 opacity-50"></i>
                <p class="mb-0">No items added yet. Click "Add Item" to get started.</p>
            </div>
        @endif
    </div>

    @if($help && !$errors->has($name))
        <div class="form-text text-muted">{{ $help }}</div>
    @endif

    @error($name)
        <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror
</div>

{{-- Template for new items --}}
<template id="template-{{ $uniqueId }}">
    <div class="repeater-item card mb-3" data-index="__INDEX__">
        <div class="card-header bg-light py-2">
            <div class="flex justify-between items-center">
                <span class="item-title fw-semibold text-xl">Item __ITEM_NUMBER__</span>
                <div class="item-controls">
                    @if($sortable)
                        <button type="button" class="btn btn-xs btn-outline-secondary me-1 move-up" title="Move Up">
                            <i class="fas fa-chevron-up"></i>
                        </button>
                        <button type="button" class="btn btn-xs btn-outline-secondary me-1 move-down" title="Move Down">
                            <i class="fas fa-chevron-down"></i>
                        </button>
                    @endif
                    <button type="button" class="btn btn-xs btn-outline-secondary me-1 toggle-item" title="Toggle">
                        <i class="fas fa-chevron-up"></i>
                    </button>
                    <button type="button" class="btn btn-xs btn-outline-danger remove-item" title="Remove">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                @foreach($fields as $fieldName => $fieldConfig)
                    @php
                        $colClass = 'col-12';
                        if (isset($fieldConfig['col'])) {
                            $colClass = 'col-md-' . $fieldConfig['col'];
                        }
                    @endphp
                    <div class="{{ $colClass }} mb-3">
                        @if($fieldConfig['type'] === 'text')
                            <label class="form-label mb-2 block">{{ $fieldConfig['label'] }}
                                @if($fieldConfig['required'] ?? false) <span class="text-danger">*</span> @endif
                            </label>
                            <input type="text"
                                   name="{{ $name }}[__INDEX__][{{ $fieldName }}]"
                                   class="form-control mb-2"
                                   value="{{ $fieldConfig['default'] ?? '' }}"
                                   placeholder="{{ $fieldConfig['placeholder'] ?? '' }}"
                                   {{ ($fieldConfig['required'] ?? false) ? 'required' : '' }}>
                            @if($fieldConfig['help'] ?? false)
                                <small class="form-text text-muted">{{ $fieldConfig['help'] }}</small>
                            @endif

                        @elseif($fieldConfig['type'] === 'textarea')
                            <label class="form-label mb-2 block">{{ $fieldConfig['label'] }}
                                @if($fieldConfig['required'] ?? false) <span class="text-danger">*</span> @endif
                            </label>
                            <textarea name="{{ $name }}[__INDEX__][{{ $fieldName }}]"
                                      class="form-control mb-2"
                                      rows="{{ $fieldConfig['rows'] ?? 3 }}"
                                      placeholder="{{ $fieldConfig['placeholder'] ?? '' }}"
                                      {{ ($fieldConfig['required'] ?? false) ? 'required' : '' }}>{{ $fieldConfig['default'] ?? '' }}</textarea>
                            @if($fieldConfig['help'] ?? false)
                                <small class="form-text text-muted">{{ $fieldConfig['help'] }}</small>
                            @endif

                        @elseif($fieldConfig['type'] === 'select')
                            <label class="form-label mb-2 block">{{ $fieldConfig['label'] }}
                                @if($fieldConfig['required'] ?? false) <span class="text-danger">*</span> @endif
                            </label>
                            <select name="{{ $name }}[__INDEX__][{{ $fieldName }}]"
                                    class="form-select"
                                    {{ ($fieldConfig['required'] ?? false) ? 'required' : '' }}>
                                <option value="">Choose...</option>
                                @foreach($fieldConfig['options'] ?? [] as $optionValue => $optionLabel)
                                    <option value="{{ $optionValue }}"
                                            {{ ($fieldConfig['default'] ?? '') == $optionValue ? 'selected' : '' }}>
                                        {{ $optionLabel }}
                                    </option>
                                @endforeach
                            </select>
                            @if($fieldConfig['help'] ?? false)
                                <small class="form-text text-muted">{{ $fieldConfig['help'] }}</small>
                            @endif

                        @elseif($fieldConfig['type'] === 'image')
                            <label class="form-label mb-2 block">{{ $fieldConfig['label'] }}
                                @if($fieldConfig['required'] ?? false) <span class="text-danger">*</span> @endif
                            </label>
                            <input type="file"
                                   name="{{ $name }}[__INDEX__][{{ $fieldName }}]"
                                   class="form-control mb-2"
                                   accept="image/*"
                                   {{ ($fieldConfig['required'] ?? false) ? 'required' : '' }}>
                            @if($fieldConfig['help'] ?? false)
                                <small class="form-text text-muted">{{ $fieldConfig['help'] }}</small>
                            @endif

                        @elseif($fieldConfig['type'] === 'url')
                            <label class="form-label mb-2 block">{{ $fieldConfig['label'] }}
                                @if($fieldConfig['required'] ?? false) <span class="text-danger">*</span> @endif
                            </label>
                            <input type="url"
                                   name="{{ $name }}[__INDEX__][{{ $fieldName }}]"
                                   class="form-control mb-2"
                                   value="{{ $fieldConfig['default'] ?? '' }}"
                                   placeholder="{{ $fieldConfig['placeholder'] ?? 'https://...' }}"
                                   {{ ($fieldConfig['required'] ?? false) ? 'required' : '' }}>
                            @if($fieldConfig['help'] ?? false)
                                <small class="form-text text-muted">{{ $fieldConfig['help'] }}</small>
                            @endif

                        @elseif($fieldConfig['type'] === 'number')
                            <label class="form-label mb-2 block">{{ $fieldConfig['label'] }}
                                @if($fieldConfig['required'] ?? false) <span class="text-danger">*</span> @endif
                            </label>
                            <input type="number"
                                   name="{{ $name }}[__INDEX__][{{ $fieldName }}]"
                                   class="form-control mb-2"
                                   value="{{ $fieldConfig['default'] ?? '' }}"
                                   min="{{ $fieldConfig['min'] ?? '' }}"
                                   max="{{ $fieldConfig['max'] ?? '' }}"
                                   step="{{ $fieldConfig['step'] ?? 'any' }}"
                                   {{ ($fieldConfig['required'] ?? false) ? 'required' : '' }}>
                            @if($fieldConfig['help'] ?? false)
                                <small class="form-text text-muted">{{ $fieldConfig['help'] }}</small>
                            @endif

                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</template>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('{{ $uniqueId }}');
    const template = document.getElementById('template-{{ $uniqueId }}');
    const addButton = document.querySelector('[data-repeater="{{ $uniqueId }}"]');
    const countBadge = document.getElementById('count-{{ $uniqueId }}');

    let itemIndex = {{ count($items) }};
    const minItems = parseInt(container.dataset.min);
    const maxItems = parseInt(container.dataset.max);
    const sortable = container.dataset.sortable === 'true';

    // Add item functionality
    addButton.addEventListener('click', function() {
        if (itemIndex >= maxItems) return;

        // Hide empty state
        const emptyState = container.querySelector('.empty-state');
        if (emptyState) {
            emptyState.style.display = 'none';
        }

        const newItem = template.content.cloneNode(true);
        const itemElement = newItem.querySelector('.repeater-item');

        // Replace placeholders
        const html = itemElement.outerHTML
            .replace(/__INDEX__/g, itemIndex)
            .replace(/__ITEM_NUMBER__/g, itemIndex + 1);

        container.insertAdjacentHTML('beforeend', html);

        itemIndex++;
        updateControls();

        // Animate new item
        const newItemElement = container.lastElementChild;
        newItemElement.style.opacity = '0';
        newItemElement.style.transform = 'translateY(20px)';
        setTimeout(() => {
            newItemElement.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
            newItemElement.style.opacity = '1';
            newItemElement.style.transform = 'translateY(0)';
        }, 10);
    });

    // Event delegation for item controls
    container.addEventListener('click', function(e) {
        const item = e.target.closest('.repeater-item');
        if (!item) return;

        if (e.target.closest('.remove-item')) {
            removeItem(item);
        } else if (e.target.closest('.toggle-item')) {
            toggleItem(item);
        } else if (e.target.closest('.move-up')) {
            moveItem(item, 'up');
        } else if (e.target.closest('.move-down')) {
            moveItem(item, 'down');
        }
    });

    function removeItem(item) {
        if (confirm('Are you sure you want to remove this item?')) {
            item.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
            item.style.opacity = '0';
            item.style.transform = 'translateX(-100px)';

            setTimeout(() => {
                item.remove();
                itemIndex--;
                updateControls();
                reindexItems();

                // Show empty state if no items
                if (container.children.length === 0) {
                    container.innerHTML = `
                        <div class="empty-state text-center py-5 text-muted">
                            <i class="fas fa-plus-circle fa-3x mb-3 opacity-50"></i>
                            <p class="mb-0">No items added yet. Click "Add Item" to get started.</p>
                        </div>
                    `;
                }
            }, 300);
        }
    }

    function toggleItem(item) {
        const cardBody = item.querySelector('.card-body');
        const icon = item.querySelector('.toggle-item i');

        if (cardBody.style.display === 'none') {
            cardBody.style.display = 'block';
            icon.classList.remove('fa-chevron-down');
            icon.classList.add('fa-chevron-up');
        } else {
            cardBody.style.display = 'none';
            icon.classList.remove('fa-chevron-up');
            icon.classList.add('fa-chevron-down');
        }
    }

    function moveItem(item, direction) {
        if (!sortable) return;

        const sibling = direction === 'up' ? item.previousElementSibling : item.nextElementSibling;
        if (!sibling || sibling.classList.contains('empty-state')) return;

        if (direction === 'up') {
            item.parentNode.insertBefore(item, sibling);
        } else {
            item.parentNode.insertBefore(sibling, item);
        }

        reindexItems();
        updateControls();
    }

    function reindexItems() {
        const items = container.querySelectorAll('.repeater-item');
        items.forEach((item, index) => {
            item.dataset.index = index;
            item.querySelector('.item-title').textContent = `Item ${index + 1}`;

            // Update form field names
            const inputs = item.querySelectorAll('input, select, textarea');
            inputs.forEach(input => {
                const name = input.name;
                if (name) {
                    const namePattern = /^(.+?\[)\d+(\].*?)$/;
                    const match = name.match(namePattern);
                    if (match) {
                        input.name = match[1] + index + match[2];
                    }
                }
            });
        });
    }

    function updateControls() {
        const itemCount = container.querySelectorAll('.repeater-item').length;

        // Update counter
        countBadge.textContent = `${itemCount}/${maxItems}`;

        // Update add button state
        addButton.disabled = itemCount >= maxItems;

        // Update remove button states
        container.querySelectorAll('.remove-item').forEach(btn => {
            btn.disabled = itemCount <= minItems;
        });

        // Update move button states
        if (sortable) {
            const items = container.querySelectorAll('.repeater-item');
            items.forEach((item, index) => {
                const moveUp = item.querySelector('.move-up');
                const moveDown = item.querySelector('.move-down');

                if (moveUp) moveUp.disabled = index === 0;
                if (moveDown) moveDown.disabled = index === items.length - 1;
            });
        }
    }

    // Initial setup
    updateControls();
});
</script>
@endpush

<style>
.repeater-container {
    position: relative;
}

.repeater-item {
    transition: all 0.3s ease;
    border: 1px solid #dee2e6;
}

.repeater-item:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0,123,255,0.15);
}

.repeater-header {
    background: #f8f9fa;
    padding: 10px 15px;
    border-bottom: 1px solid #dee2e6;
    border-radius: 6px 6px 0 0;
}

.item-controls .btn {
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1;
}

.empty-state {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
}

.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.5;
}

.card-header {
    cursor: grab;
}

.card-header:active {
    cursor: grabbing;
}

@media (max-width: 768px) {
    .repeater-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .item-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
}
</style>