{{-- componente de upload de arquivo --}}
@props([
	'route' => url()->current(),
	'title' => 'Importar arquivo',
	'fileType' => null,
	'noForm' => false,
	'fieldName' => 'file',
])

@section('scripts')
@parent
<script>
	function updateFileName(input) {
			const maxLength = 30; // Set the maximum length of the file name to display
			let fileName = input.files[0].name;
			if (fileName.length > maxLength) {
				fileName = fileName.substring(0, maxLength) + '...';
			}
			document.getElementById('fileLabel').innerText = fileName;
		}
</script>	
@endsection

@if(!$noForm)
	{!! Form::open(['id' => 'form-upload', 'url' => $route, 'autocomplete' => 'off', 'method' => 'post', 'files' => true]) !!}
@endif
<div class="form-group">
	<div class="row">
		<div class="col-12 mb-2 text-primary">
			{{$title}}<br/>
		</div>
		<div class="col-12 mb-4">
			@if($slot)
				{!! $slot!!}
			@else
				Selecione o arquivo para importar os dados.
			@endif
		</div>
		<div class="col-11 col-lg-6 col-xl-4 mx-2 mb-4">
                    <span class="btn btn-info" onclick="document.getElementById('file').click()">Selecione o arquivo</span>
                    <input type="file" class="custom-file-input btn" name="{{$fieldName}}" id="file" 
				@if($fileType) accept="{{$fileType}}" @endif 
				onchange="updateFileName(this)" style="display:none">
                    <span id="fileLabel"></span>
		@if(!$noForm)
				{!! Form::submit('Enviar', ['class' => 'btn btn-primary']) !!}
		@endif
		</div>
	</div>
</div>
@if(!$noForm)
	{!! Form::close() !!}
@endif