@php
 $with_valid_until = $with_valid_until ?? false;
@endphp

@push('styles')
    <style>
        .img-preview {
            display: none;
            width: 200px;
            height: 120px;
            object-fit: cover;
            border: 1px solid #ccc;
            margin-bottom: 3px
        }
    </style>
@endpush
@if($id=='mcu_document')
    @php $accept = 'application/pdf'; @endphp
@else
    @php $accept = '.png,.jpg,.jpeg'; @endphp
@endif
<div class="file is-boxed {{ $id }}">
    <label class="file-label">
        <input class="file-input" id="{{ $id }}" type="file" accept="{{ $accept }}" name="{{ $id }}[]" multiple>
        <span class="file-cta" id="{{ $id }}">
            <span class="file-icon" id="file-icon-{{ $id }}" style="margin-top: 40px">
                <i class="lnil lnil-32 lnil-cloud-upload"></i>
            </span>
            <span class="file-label" id="label-{{ $id }}">@lang('app.drag_and_click_to_upload')</span>
        </span>
    </label>
</div>
<div id="preview-{{ $id }}" class="file-preview"></div>
<div class="invalid-feedback help" id="error_field_required"></div>

@push('scripts')
    <script>
        $(document).ready(function() {

            const fileInputs = $('.file-input');

            fileInputs.each(function() {
                const id = $(this).attr('id');

                const previewId = `preview_${id}`;

                // upload-file.js
                multipleUpload(id, previewId, {{ $pdf ? 'true' : 'false' }}, {{ $with_valid_until ? 'true' : 'false' }});
            });
        });
    </script>
@endpush