@once
@push('style_section')
    <link rel="stylesheet" href="{{ asset('global/dropzone/dropzone.min.css') }}">
@endpush

@include('partials.listing-delete-confirmation-modal')
@include('partials.listing-delete-confirmation-script')

@push('js_section')
    <script src="{{ asset('frontend/assets/js/listing-gallery-sort.js') }}"></script>
    <script src="{{ asset('global/dropzone/dropzone.min.js') }}"></script>
    <script>
        "use strict";

        function deleteListingGallery(id) {
            confirmListingDelete('remove_gallery_' + id);
        }

        var listingEditDropzoneEl = document.getElementById('listingEditDropzone');
        if (listingEditDropzoneEl) {
            Dropzone.options.listingEditDropzone = {
                url: listingEditDropzoneEl.getAttribute('data-upload-url'),
                params: {
                    _token: '{{ csrf_token() }}',
                },
                autoProcessQueue: false,
                uploadMultiple: true,
                parallelUploads: 10,
                thumbnailHeight: 200,
                thumbnailWidth: 200,
                maxFilesize: 5,
                addRemoveLinks: true,
                acceptedFiles: '.jpeg,.jpg,.png,.webp',
                init: function () {
                    var dropzone = this;
                    var submitBtn = document.getElementById('listing-edit-gallery-submit');
                    if (submitBtn) {
                        submitBtn.addEventListener('click', function (e) {
                            e.preventDefault();
                            dropzone.processQueue();
                        });
                    }
                    this.on('successmultiple', function () {
                        window.location.reload();
                    });
                    this.on('success', function () {
                        if (this.getQueuedFiles().length === 0 && this.getUploadingFiles().length === 0) {
                            window.location.reload();
                        }
                    });
                },
            };
        }
    </script>
@endpush
@endonce