@props(['name' => 'file', 'label' => 'Subir Archivo', 'multiple' => false, 'accept' => 'image/*', 'module' => 'default'])

<div class="form-group">
    <label for="{{ $name }}">{{ $label }}</label>
    <div class="input-group">
        @if($module !== 'default')
            <input type="hidden" name="media_collection" value="{{ $module }}">
        @endif
        <div class="custom-file">
            <input type="file" class="custom-file-input @error(str_replace('[]', '', $name)) is-invalid @enderror"
                id="{{ $name }}" name="{{ $name }}" accept="{{ $accept }}" {{ $multiple ? 'multiple' : '' }}
                onchange="updateFileName(this)">
            <label class="custom-file-label" for="{{ $name }}" data-browse="Elegir">Seleccionar archivo...</label>
        </div>
    </div>
    @error(str_replace('[]', '', $name))
        <span class="text-danger text-sm">{{ $message }}</span>
    @enderror
</div>

@push('js')
    <script>
        function updateFileName(input) {
            let fileName = Array.from(input.files).map(f => f.name).join(', ');
            if (fileName) {
                input.nextElementSibling.innerText = fileName;
            } else {
                input.nextElementSibling.innerText = 'Seleccionar archivo...';
            }
        }
    </script>
@endpush