zibo-dashboard/public/userarea/photos.js

document.addEventListener("DOMContentLoaded", function() {
    // Gestione del popup per le foto
    async function loadPopupContent(iddatadb) {
        const popupContent = document.getElementById('popupContent');
        try {
            const response = await fetch(`photos_popup.php?iddatadb=${iddatadb}`);
            popupContent.innerHTML = await response.text();

            // Dopo aver caricato il contenuto, associa gli event listener
            attachPhotoEventListeners(iddatadb);
        } catch (error) {
            popupContent.innerHTML = `<p>Errore durante il caricamento: ${error.message}</p>`;
        }
    }

    function attachPhotoEventListeners(iddatadb) {
        const dropArea = document.getElementById('dropArea');
        const photoInput = document.getElementById('photoInput');

        if (!dropArea || !photoInput) {
            console.error('Elementi dropArea o photoInput non trovati nel DOM');
            return;
        }

        console.log('Associando event listener per drag-and-drop');

        // Gestione drag-and-drop
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
        });

        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, () => {
                console.log('Drag enter/over');
                dropArea.classList.add('highlight');
            }, false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, () => {
                console.log('Drag leave/drop');
                dropArea.classList.remove('highlight');
            }, false);
        });

        dropArea.addEventListener('drop', (e) => {
            console.log('File droppato');
            const files = e.dataTransfer.files;
            handleFiles(files, iddatadb);
        }, false);

        dropArea.addEventListener('click', () => {
            console.log('Click su dropArea');
            photoInput.click();
        }, false);

        photoInput.addEventListener('change', () => {
            console.log('File selezionato tramite input');
            handleFiles(photoInput.files, iddatadb);
        }, false);

        // Gestione della rimozione delle foto
        const deleteButtons = document.querySelectorAll('.delete-photo-btn');
        deleteButtons.forEach(button => {
            button.addEventListener('click', async function() {
                const photoId = this.getAttribute('data-photo-id');
                if (confirm('Sei sicuro di voler eliminare questa foto?')) {
                    try {
                        const response = await fetch('delete_photo.php', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded',
                            },
                            body: `photo_id=${photoId}`
                        });
                        const result = await response.json();

                        if (result.success) {
                            // Ricarica il contenuto del popup
                            loadPopupContent(iddatadb);
                        } else {
                            alert('Errore durante l\'eliminazione: ' + result.message);
                        }
                    } catch (error) {
                        alert('Errore durante l\'eliminazione: ' + error.message);
                    }
                }
            });
        });

        // Gestione del click sulle immagini per ingrandirle
        document.querySelectorAll('.thumbnail').forEach(img => {
            img.addEventListener('click', function() {
                const modal = document.getElementById('imageModal');
                const enlargedImage = document.getElementById('enlargedImage');
                enlargedImage.src = this.src;
                modal.style.display = 'block';
            });
        });

        // Gestione della chiusura del modal immagine
        const imageModal = document.getElementById('imageModal');
        const imageCloseBtn = document.querySelector('.image-modal-close');
        if (imageCloseBtn) {
            imageCloseBtn.addEventListener('click', function() {
                imageModal.style.display = 'none';
            });
        }
        if (imageModal) {
            imageModal.addEventListener('click', function(event) {
                if (event.target === imageModal) {
                    imageModal.style.display = 'none';
                }
            });
        _

        async function handleFiles(files, iddatadb) {
            for (const file of files) {
                if (!file.type.startsWith('image/')) {
                    alert('Per favore, carica solo immagini!');
                    continue;
                }

                const formData = new FormData();
                formData.append('photo', file);
                formData.append('iddatadb', iddatadb);

                try {
                    const response = await fetch('upload_photo.php', {
                        method: 'POST',
                        body: formData
                    });
                    const result = await response.json();

                    if (result.success) {
                        // Ricarica il contenuto del popup
                        loadPopupContent(iddatadb);
                    } else {
                        alert('Errore durante il caricamento: ' + result.message);
                    }
                } catch (error) {
                    alert('Errore durante il caricamento: ' + error.message);
                }
            }
        }

        // Gestione del popup per le foto
        const photosButtons = document.querySelectorAll('.photos-btn');
        const photosModal = document.getElementById('photosModal');
        const closeBtn = document.querySelector('.close-btn');

        photosButtons.forEach(button => {
            button.addEventListener('click', function() {
                const iddatadb = this.getAttribute('data-iddatadb');
                loadPopupContent(iddatadb);
                photosModal.style.display = 'block';
                document.querySelector('.overlay').style.display = 'none'; // Nascondi overlay
            });
        });

        if (closeBtn) {
            closeBtn.addEventListener('click', function() {
                photosModal.style.display = 'none';
                document.querySelector('.overlay').style.display = 'none'; // Assicurati che l'overlay sia nascosto
                // Forza la riattivazione della pagina sottostante
                document.body.style.pointerEvents = 'auto';
            });
        }

        if (photosModal) {
            window.addEventListener('click', function(event) {
                if (event.target === photosModal) {
                    photosModal.style.display = 'none';
                    document.querySelector('.overlay').style.display = 'none'; // Nascondi overlay
                    document.body.style.pointerEvents = 'auto'; // Riattiva la pagina
                }
            });
        }
    });