@php
    /** @var string $attachmentKey */
    /** @var integer $modelID */

    $uniqueKey = $attachmentKey . '-' . $modelID;
@endphp

<div class="mt-1 mb-2">
    <div id="dropzone_container_{{ $uniqueKey }}">
        <div method="post"
             id="dropzone_{{ $uniqueKey }}"
             action="{{ route('admin.api.file.upload') }}"
             class="dropzone dz-clickable"
        >
            @csrf
            @method('POST')

            <div id="template-container-{{ $uniqueKey }}" class="dz-message">
                <div>
                    <i class="h1 text-muted dripicons-cloud-upload"></i>
                    <h3>Drop file's here or click to upload.</h3>
                    <span class="text-muted font-13"> </span>
                </div>
            </div>
        </div>

        <!-- file preview template -->
        <div class="d-none" id="template-template-{{ $uniqueKey }}">
            <div>
                <div class="card mt-1 mb-0 shadow-none border border-light">
                    <div class="p-2">
                        <div class="row align-items-center bg-hover p-3 m-2">
                            <div class="img-box">
                                <img data-dz-thumbnail class="rounded bg-light" alt="" src="">
                            </div>
                            <div class="col pl-0">
                                <a href="javascript:void(0);" class="text-muted font-weight-bold" data-dz-name></a>
                                <p class="mb-0" data-dz-size></p>
                            </div>
                            <a href="#" class="btn btn-sm btn-danger" data-dz-remove>
                                Remove
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('script')

    <script>

        var remove_route = '{{ route('admin.api.file.remove') }}';

        var attachment = @json(app($modelInstance)->where('id', $modelID)->first()->attachment($attachmentKey));

        var CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        var id = '{{ '#dropzone_' . $uniqueKey }}';

        Dropzone.autoDiscover = false;

        var myDropzone = new Dropzone(id, {
            previewsContainer:          document.getElementById('template-container-' + '{{ $uniqueKey }}'),
            previewTemplate:            document.querySelector('#template-template-' + '{{ $uniqueKey }}').innerHTML,
            uploadMultiple:             false,
            paramName:                  'file',
            clickable:                  true,
            maxFiles:                   1,
            acceptedFiles:              '.jpeg,.jpg,.png,.svg',
            dictRemoveFileConfirmation: "Are you sure you want to remove this File?",
            init:                       function () {

                if (attachment === null) {
                    return;
                }

                let mockFile = {
                    uuid:     attachment.uuid,
                    name:     attachment.filename,
                    size:     attachment.filesize,
                    accepted: true
                };

                this.emit('addedfile', mockFile);
                this.emit('thumbnail', mockFile, attachment.url);
                this.emit('complete', mockFile);
                this.files.push(mockFile);

                this.on('maxfilesexceeded', function (file) {
                    this.removeAllFiles();
                    this.addFile(file);
                });

                this.on('addedfile', function (file) {
                    // Remove the previous file from the Dropzone
                    if (this.files.length > 1) {
                        var previousFile = this.files[0];
                        this.removeFile(previousFile);
                    }
                });
            }
        });

        myDropzone.on('success', function (file, response) {
            if (response && response.uuid) {
                file.uuid = response.uuid;
            }
        });

        myDropzone.on('sending', function (file, xhr, formData) {
            formData.append('_token', CSRF_TOKEN);
            formData.append('model_instance', '{{ str_replace("\\", "\\\\", $modelInstance) }}');
            formData.append('model_id', '{{ $modelID }}');
            formData.append('attachment_key', '{{ $attachmentKey }}');
        });

        myDropzone.on("removedfile", function (file) {
            axios.post(remove_route, {
                uuid: file.uuid
            }).then(function (response) {
                window.toastr.success(response.data.message);
            }).catch(function (error) {
                window.toastr.error(error.response.data.message);
            });
        });

    </script>
@endpush