{{-- JS genérico de adicionar/remover/reindexar itens de coleção (padrão do hero).
     Usado pelos forms SUCESU: eventos, notícias, serviços, marcas, contadores.
     Parâmetros:
       - containerId : id do container dos itens (ex: events-items-container)
       - templateId  : id do <template> usado no clone
       - addBtnId    : id do botão Adicionar
       - noItemsId   : id da mensagem "nenhum item" (opcional)
       - inputIdBase : prefixo dos ids (ex: event-item) — usado para reindexar ids do image-picker
       - groupKey    : chave do grupo em parameters (ex: items, counters)
       - labelSingular: rótulo do item (ex: Evento) para o item-number
--}}
<script>
(function() {
    var container = document.getElementById('{{ $containerId }}');
    var addBtn = document.getElementById('{{ $addBtnId }}');
    var template = document.getElementById('{{ $templateId }}');
    var noMsg = document.getElementById('{{ $noItemsId }}');
    var base = '{{ $inputIdBase }}';
    var groupRe = new RegExp('parameters\\[' + '{{ $groupKey }}' + '\\]\\[\\d+\\]', 'g');

    if (!container || !addBtn) return;

    function updateEmptyState() {
        var count = container.querySelectorAll('.item-card').length;
        if (noMsg) noMsg.style.display = count === 0 ? 'block' : 'none';
    }

    function reindexItemId(id, newIndex) {
        return id.replace(new RegExp('(^' + base + '-)\\d+(-)', 'g'), '$1' + newIndex + '$2');
    }

    function reindexItems() {
        var items = container.querySelectorAll('.item-card');
        items.forEach(function(item, newIndex) {
            item.setAttribute('data-index', newIndex);

            item.querySelectorAll('input').forEach(function(input) {
                if (input.getAttribute('name')) {
                    input.setAttribute('name', input.getAttribute('name').replace(groupRe, 'parameters[{{ $groupKey }}][' + newIndex + ']'));
                }
                if (input.id && input.id.indexOf(base + '-') === 0) {
                    input.id = reindexItemId(input.id, newIndex);
                }
            });

            item.querySelectorAll('.image-picker-container, .btn-select-image, .btn-clear-image').forEach(function(el) {
                var did = el.getAttribute('data-input-id');
                if (did && did.indexOf(base + '-') === 0) {
                    el.setAttribute('data-input-id', reindexItemId(did, newIndex));
                }
            });

            item.querySelectorAll('label').forEach(function(label) {
                var forAttr = label.getAttribute('for');
                if (forAttr && forAttr.indexOf(base + '-') === 0) {
                    label.setAttribute('for', reindexItemId(forAttr, newIndex));
                }
            });

            var pt = item.querySelector('[id$="-preview-text"]');
            if (pt && pt.id.indexOf(base + '-') === 0) pt.id = reindexItemId(pt.id, newIndex);
            var th = item.querySelector('[id$="-thumbnail"]');
            if (th && th.id.indexOf(base + '-') === 0) th.id = reindexItemId(th.id, newIndex);

            var num = item.querySelector('.item-number');
            if (num) num.textContent = '{{ $labelSingular }} ' + (newIndex + 1);
        });
        updateEmptyState();
    }

    addBtn.addEventListener('click', function() {
        var currentCount = container.querySelectorAll('.item-card').length;
        var clone = document.importNode(template.content, true);
        var el = clone.querySelector('.item-card');
        el.setAttribute('data-index', currentCount);
        el.innerHTML = el.innerHTML.replace(/__INDEX__/g, currentCount);
        var num = el.querySelector('.item-number');
        if (num) num.textContent = '{{ $labelSingular }} ' + (currentCount + 1);
        container.appendChild(el);
        updateEmptyState();
    });

    container.addEventListener('click', function(e) {
        var removeBtn = e.target.closest('.btn-remove-item');
        if (!removeBtn) return;
        var card = removeBtn.closest('.item-card');
        if (!card) return;
        card.remove();
        reindexItems();
    });
})();
</script>