@props(['dropzoneId', 'uploadUrl', 'inputName', 'message' => 'Drop files here or click to upload.', 'formId'])
<div class="row g-3">
    <div class="col-12">
        <div class="needsclick dropzone" id="{{ $dropzoneId }}">
            <div class="dz-message">
                <div class="mb-3">
                    <i class="display-5 text-muted ri-upload-cloud-2-fill"></i>
                </div>

                <p class="fs-14">{{ $message }}</p>
            </div>
        </div>
    </div>
</div>

@push('js')
    <script>
        Dropzone.autoDiscover = false;
        window.uploadedDocumentMap = window.uploadedDocumentMap || {};

        $(function() {
            let myDropzone = new Dropzone("#{{ $dropzoneId }}", {
                url: '{{ $uploadUrl }}',
                maxFilesize: 5,
                acceptedFiles: '.pdf,.jpeg,.jpg,.png,.gif',
                addRemoveLinks: true,
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                success: function(file, response) {
                    $('#{{ $formId }}').append(
                        '<input type="hidden" name="{{ $inputName }}[]" value="' + response
                        .name + '">');
                    uploadedDocumentMap[file.name] = response.name;
                },
                removedfile: function(file) {
                    file.previewElement.remove();
                    var name = uploadedDocumentMap[file.name] || file.file_name;
                    $('#{{ $formId }}').find('input[name="{{ $inputName }}[]"][value="' +
                        name + '"]').remove();
                }
            });
        });
    </script>
@endpush