{{-- Card reutilizável para itens de coleção (events/news/services/brands/about counters).
     Usado em lse/forms/*.blade.php e em seus <template> para clone via JS (padrão do hero).
     Parâmetros:
       - item      : array com os valores do item (pode ser [] para template)
       - index     : índice numérico OU '__INDEX__' (placeholder de clone)
       - groupKey  : chave do grupo em parameters (ex: items, counters)
       - inputIdBase : prefixo dos IDs do image-picker (ex: event-item)
       - fields    : lista de configs {type, name, label, size, placeholder, required}
--}}
<div class="card mb-3 item-card border shadow-sm" data-index="{{ $index }}">
    <div class="card-header d-flex justify-content-between align-items-center py-2 px-3 bg-light">
        <h6 class="card-title mb-0 small fw-bold text-secondary">
            <i class="bi bi-folder2-open me-1" aria-hidden="true"></i>
            <span class="item-number">Item {{ is_numeric($index) ? $index + 1 : 1 }}</span>
        </h6>
        <button type="button" class="btn btn-sm btn-outline-danger btn-remove-item py-0 px-2"
                aria-label="Remover este item">
            <i class="bi bi-trash-fill" aria-hidden="true"></i>
        </button>
    </div>
    <div class="card-body">
        <div class="row g-2">
            @foreach($fields as $field)
                @php
                    $fieldName = $field['name'];
                    $fieldLabel = $field['label'] ?? ucfirst($fieldName);
                    $fieldSize = $field['size'] ?? 12;
                    $fieldRequired = $field['required'] ?? false;
                    $itemValue = is_array($item) ? ($item[$fieldName] ?? '') : '';
                    $inputName = "parameters[{$groupKey}][{$index}][{$fieldName}]";
                    $inputId = "{$inputIdBase}-{$index}-{$fieldName}";
                @endphp
                @if(($field['type'] ?? 'text') === 'image')
                    <div class="col-md-{{ $fieldSize }}">
                        @include('v2-service-landingsectionseditor::components.forms.image-picker', [
                            'label'   => $fieldLabel,
                            'name'    => $inputName,
                            'value'   => $itemValue,
                            'inputId' => $inputId,
                        ])
                    </div>
                @else
                    <div class="col-md-{{ $fieldSize }}">
                        <label class="form-label small fw-semibold" for="{{ $inputId }}">
                            {{ $fieldLabel }}
                            @if($fieldRequired)
                                <span class="text-danger" aria-hidden="true">*</span>
                            @endif
                        </label>
                        @if(($field['type'] ?? 'text') === 'textarea')
                            <textarea name="{{ $inputName }}" class="form-control form-control-sm"
                                      rows="{{ $field['rows'] ?? 3 }}" id="{{ $inputId }}"
                                      placeholder="{{ $field['placeholder'] ?? '' }}"
                                      {{ $fieldRequired ? 'required' : '' }}>{{ $itemValue }}</textarea>
                        @else
                            <input type="text" name="{{ $inputName }}" class="form-control form-control-sm"
                                   id="{{ $inputId }}" value="{{ $itemValue }}"
                                   placeholder="{{ $field['placeholder'] ?? '' }}"
                                   maxlength="{{ $field['maxlength'] ?? 255 }}"
                                   {{ $fieldRequired ? 'required' : '' }}>
                        @endif
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</div>