document.addEventListener('DOMContentLoaded', function() {
    // Ensure the element exists before adding event listener
    const imageUploadInput = document.getElementById('image_upload');
    if (imageUploadInput) {
        imageUploadInput.addEventListener('change', handleFiles);
    } else {
        // console.error("Element with ID 'image_upload' not found.");
    }

    const fileUploadContainer = document.getElementById('file-upload-container');
    if (fileUploadContainer) {
        fileUploadContainer.addEventListener('dragover', function(event) {
            event.preventDefault();
            this.style.border = '2px dashed #007bff';
        });

        fileUploadContainer.addEventListener('dragleave', function() {
            this.style.border = '';
        });

        fileUploadContainer.addEventListener('drop', function(event) {
            event.preventDefault();
            this.style.border = '';
            const files = event.dataTransfer.files;
            handleFiles({ target: { files: files } });
        });
    }

    function handleFiles(event) {
        const files = event.target.files;
        const imagePreviewContainer = document.getElementById('image_preview');

        for (let i = 0; i < files.length; i++) {
            const file = files[i];

            if (!file.type.startsWith('image/')) {
                console.error('Invalid file type: ' + file.name);
                continue;
            }

            const reader = new FileReader();

            reader.onload = function(e) {
                const imgContainer = document.createElement('div');
                imgContainer.style.position = 'relative';

                const img = document.createElement('img');
                img.src = e.target.result;
                img.style.width = '120px';
                img.style.height = '120px';
                img.style.margin = '10px 16px 16px 0';

                const deleteIcon = document.createElement('a');
                deleteIcon.className = 'dz-remove trash-top d-flex align-items-center justify-content-center';
                deleteIcon.href = 'javascript:undefined;';
                deleteIcon.setAttribute('data-dz-remove', '');

                const icon = document.createElement('i');
                icon.className = 'ti ti-trash';
                deleteIcon.appendChild(icon);

                deleteIcon.addEventListener('click', function() {
                imgContainer.remove();
                });

                imgContainer.appendChild(img);
                imgContainer.appendChild(deleteIcon);
                imagePreviewContainer.appendChild(imgContainer);
            }

            reader.readAsDataURL(file);
        }
    }
});


document.querySelectorAll('.dz-remove').forEach(deleteIcon => {
   

    document.querySelectorAll('.dz-remove').forEach(deleteIcon => {
        deleteIcon.addEventListener('click', function () {
            const imgContainer = this.parentElement;
            const imageId = imgContainer.getAttribute('data-id');
            const deletedImageIdsInput = document.getElementById('deleted_image_ids');
            let deletedIds = deletedImageIdsInput.value ? deletedImageIdsInput.value.split(',') : [];
            
            if (!deletedIds.includes(imageId)) {
                deletedIds.push(imageId);
            }
            deletedImageIdsInput.value = deletedIds.join(',');
    
            imgContainer.remove();
        });
    });
});