Untitled

<div>
    <div class="row">
        <div class="col-md-12">
            <form wire:submit.prevent="mapSheetFields">
                <div class="card">
                    <div class="card-body">
                        <h5 class="mb-4">{{__("Choose File")}}</h5>
                        <div class="form-group">
                            <div class='file-input form-control' wire:loading.remove wire:target="sheet">
                                <input type="file" wire:model="sheet" accept=".xlsx, .xls">
                                <span class='button'>@if($sheet){{__("Change File")}}@else{{__("Choose File")}}@endif</span>
                                <span class='label' data-js-label>@if($sheet){{$sheet->getClientOriginalName()}}@else{{__("No file selected")}} (xls, xlsx)@endif</span>
                            </div>
                            <h5 class="text-center"><span wire:loading wire:target="sheet"><i class="fad fa-circle-notch fa-spin"></i> Uploading...</span></h5>
                            @if ($errors->has('sheet'))
                            <p class="form-text text-danger">
                                {{ $errors->first('sheet') }}
                            </p>
                            @endif
                        </div>
                    </div>
                    <div class="card-footer">
                        <button class="btn btn-primary float-right" type="submit">{{__("Next")}}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>