document.addEventListener('DOMContentLoaded', function() {
    const fileInputWrappers = document.querySelectorAll('.file-input-wrapper');

    fileInputWrappers.forEach((wrapper) => {
        const button = wrapper.querySelector('.btn-file-input');
        const input = wrapper.querySelector('input[type="file"]');
        const fileNameSpan = wrapper.querySelector('.file-name');

        button.addEventListener('click', () => {
            input.click();
        });

        input.addEventListener('change', () => {
            if (input.files.length > 0) {
                if (input.files.length === 1) {
                    fileNameSpan.textContent = input.files[0].name;
                } else {
                    fileNameSpan.textContent = input.files.length + ' files selected';
                }
            } else {
                fileNameSpan.textContent = 'No file selected';
            }
            updatePreview();
        });
    });

    const form = document.getElementById('watermark-form');
    form.addEventListener('change', updatePreview);

    function updatePreview() {
        const formData = new FormData(form);
        axios.post('/preview', formData)
            .then(function (response) {
                const previewContainer = document.getElementById('preview-container');
                previewContainer.innerHTML = ''; // Clear previous previews
                response.data.preview_urls.forEach(function(url) {
                    const img = document.createElement('img');
                    img.src = url;
                    img.style.maxWidth = '100%';
                    img.style.maxHeight = '300px';
                    img.style.marginBottom = '10px';
                    previewContainer.appendChild(img);
                });
                document.getElementById('preview-text').style.display = 'none';
            })
            .catch(function (error) {
                console.error('Error:', error);
            });
    }
});