// document.addEventListener('DOMContentLoaded', function() {
//     fetch('list_data/get_upload_file.php')
//         .then(response => response.json())
//         .then(data => {
//             data.forEach(item => {
//                 const uploadImage = document.querySelector(`.uploadImage[data-id="${item.formId}"]`);
//                 if (uploadImage) {
//                     const preview = uploadImage.querySelector('img');
//                     const spanText = uploadImage.querySelector('span');
//                     preview.src = `https://storage.manjapro.net/files/user/${item.fileName}`;
//                     preview.style.display = 'block';
//                     spanText.style.display = 'none';
//                 }
//             });
//         });
// });

// // upload.js
// document.querySelectorAll('.uploadImage').forEach(uploadImage => {
//     uploadImage.addEventListener('click', function() {
//         const fileInput = document.createElement('input');
//         fileInput.type = 'file';
//         fileInput.accept = 'image/*';
//         fileInput.style.display = 'none';

//         fileInput.addEventListener('change', function() {
//             const file = this.files[0];
//             const preview = uploadImage.querySelector('img');
//             const spanText = uploadImage.querySelector('span');

//             // Menampilkan preview gambar
//             const reader = new FileReader();
//             reader.onload = function(e) {
//                 preview.src = e.target.result;
//                 preview.style.display = 'block';
//                 spanText.style.display = 'none';

//                 compressAndUploadImage(file, uploadImage.dataset.id, uploadImage);
//             };
//             reader.readAsDataURL(file);
//         });

//         document.body.appendChild(fileInput);
//         fileInput.click();
//     });
// });

// function compressAndUploadImage(file, formId, uploadImage) {
//     const reader = new FileReader();
//     reader.readAsDataURL(file);
//     reader.onload = function(event) {
//         const img = new Image();
//         img.src = event.target.result;
//         img.onload = function() {
//             const canvas = document.createElement('canvas');
//             const ctx = canvas.getContext('2d');

//             const maxWidth = img.width;
//             const maxHeight = img.height;
//             canvas.width = maxWidth;
//             canvas.height = maxHeight;
//             ctx.drawImage(img, 0, 0, maxWidth, maxHeight);

//             let quality = 0.9;
//             let dataUrl = canvas.toDataURL('image/jpeg', quality);

//             // Mengurangi kualitas sampai ukuran gambar kurang dari 200KB
//             while (dataUrl.length > 200 * 1024) {
//                 quality -= 0.05;
//                 dataUrl = canvas.toDataURL('image/jpeg', quality);
//             }

//             fetch(dataUrl)
//                 .then(res => res.blob())
//                 .then(blob => {
//                     const formData = new FormData();
//                     formData.append('file', blob, file.name);
//                     formData.append('formId', formId);

//                     const xhr = new XMLHttpRequest();
//                     xhr.open('POST', 'list_data/upload_file.php', true);

//                     // Menangani proses upload dan persentase
//                     xhr.upload.onprogress = function(event) {
//                         if (event.lengthComputable) {
//                             const percentComplete = (event.loaded / event.total) * 100;
//                             const progressBar = uploadImage.querySelector('.progressBar');
//                             progressBar.style.width = percentComplete + '%';
//                             uploadImage.querySelector('.progressContainer').style.display = 'block';
//                         }
//                     };

//                     xhr.onload = function() {
//                         if (xhr.status === 200) {
//                             console.log('Success:', xhr.responseText);
//                             showUploadAnimation(uploadImage);
//                         } else {
//                             console.error('Error:', xhr.responseText);
//                         }
//                     };

//                     xhr.send(formData);
//                 });
//         };
//     };
// }

// function showUploadAnimation(uploadImage) {
//     const uploaded = document.createElement('div');
//     uploaded.innerText = 'Uploaded!';
//     uploaded.style.position = 'absolute';
//     uploaded.style.top = '0';
//     uploaded.style.left = '0';
//     uploaded.style.width = '100%';
//     uploaded.style.height = '100%';
//     uploaded.style.background = 'rgba(0, 128, 0, 0.5)';
//     uploaded.style.color = 'white';
//     uploaded.style.fontSize = '24px';
//     uploaded.style.display = 'flex';
//     uploaded.style.alignItems = 'center';
//     uploaded.style.justifyContent = 'center';
//     uploadImage.appendChild(uploaded);

//     setTimeout(() => {
//         uploaded.style.animation = 'fadeOut 2s forwards';
//         setTimeout(() => {
//             uploadImage.removeChild(uploaded);
//         }, 2000);
//     }, 1000); // Menampilkan teks "Uploaded!" selama 1 detik sebelum memulai animasi
// }




document.addEventListener('DOMContentLoaded', function() {
    // Tambah CSS otomatis (tanpa ganggu style .uploadImage)
    const style = document.createElement('style');
    style.innerHTML = `
    .progressCircle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }
    .progressSvg {
        position: absolute;
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }
    .progressSvg .bg {
        fill: none;
        stroke: #eee;
        stroke-width: 2;
    }
    .progressSvg .progress {
        fill: none;
        stroke: #04c224;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-dasharray: 100, 100;
        stroke-dashoffset: 100;
        transition: stroke-dashoffset 0.3s;
    }
    .progressText {
        position: absolute;
        font-weight: bold;
        font-size: 18px;
        color: #333;
    }`;
    document.head.appendChild(style);

    // URL gambar default (jika tidak ada file)
    const defaultImage = 'https://storage.manjapro.net/files/user/default.jpg';

    // Ambil data file existing dari server
    fetch('list_data/get_upload_file.php')
        .then(response => response.json())
        .then(data => {
            // Tandai semua uploadImage sebagai belum diisi dulu
            document.querySelectorAll('.uploadImage').forEach(upload => {
                const preview = upload.querySelector('img');
                const spanText = upload.querySelector('span');
                preview.src = defaultImage;
                preview.style.display = 'block';
                spanText.style.display = 'none';
            });

            // Lalu isi jika ada data dari server
            data.forEach(item => {
                const uploadImage = document.querySelector(`.uploadImage[data-id="${item.formId}"]`);
                if (uploadImage) {
                    const preview = uploadImage.querySelector('img');
                    const spanText = uploadImage.querySelector('span');
                    const fileName = item.fileName && item.fileName.trim() !== '' 
                        ? item.fileName 
                        : 'default.jpg';

                    preview.src = `https://storage.manjapro.net/files/user/${fileName}`;
                    // preview.src = `https://storage.manjapro.net/files/user/${item.fileName}`;
                    preview.style.display = 'block';
                    spanText.style.display = 'none';
                }
            });
        })
        .catch(() => {
            // Kalau gagal fetch (misal offline), isi semua dengan default
            document.querySelectorAll('.uploadImage').forEach(upload => {
                const preview = upload.querySelector('img');
                const spanText = upload.querySelector('span');
                preview.src = defaultImage;
                preview.style.display = 'block';
                spanText.style.display = 'none';
            });
        });

    // Klik upload
    document.querySelectorAll('.uploadImage').forEach(uploadImage => {
        uploadImage.addEventListener('click', function() {
            const fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.accept = 'image/*';
            fileInput.style.display = 'none';

            fileInput.addEventListener('change', function() {
                const file = this.files[0];
                if (!file) return;

                // Maksimum 20 MB
                if (file.size > 20 * 1024 * 1024) {
                    alert('Ukuran file maksimal 20MB.');
                    return;
                }

                const preview = uploadImage.querySelector('img');
                const spanText = uploadImage.querySelector('span');
                const reader = new FileReader();

                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                    spanText.style.display = 'none';
                    compressAndUploadImage(file, uploadImage.dataset.id, uploadImage);
                };
                reader.readAsDataURL(file);
            });

            document.body.appendChild(fileInput);
            fileInput.click();
        });
    });
});

// Membuat progres circle di tengah
function createProgressCircle(uploadImage) {
    let existing = uploadImage.querySelector('.progressCircle');
    if (existing) return existing;

    const circle = document.createElement('div');
    circle.className = 'progressCircle';
    circle.innerHTML = `
        <svg class="progressSvg" viewBox="0 0 36 36">
            <path class="bg" d="M18 2.0845
                a 15.9155 15.9155 0 0 1 0 31.831
                a 15.9155 15.9155 0 0 1 0 -31.831" />
            <path class="progress" d="M18 2.0845
                a 15.9155 15.9155 0 0 1 0 31.831
                a 15.9155 15.9155 0 0 1 0 -31.831" />
        </svg>
        <div class="progressText">0%</div>`;
    uploadImage.appendChild(circle);
    return circle;
}

// Kompres gambar dan upload
function compressAndUploadImage(file, formId, uploadImage) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(event) {
        const img = new Image();
        img.src = event.target.result;
        img.onload = function() {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');

            let width = img.width;
            let height = img.height;
            const maxDim = 1920;

            // Resize kalau terlalu besar
            if (width > height && width > maxDim) {
                height = Math.round(height * (maxDim / width));
                width = maxDim;
            } else if (height > maxDim) {
                width = Math.round(width * (maxDim / height));
                height = maxDim;
            }

            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(img, 0, 0, width, height);

            let quality = 0.9;
            let dataUrl = canvas.toDataURL('image/jpeg', quality);

            // Turunkan kualitas sampai di bawah 500 KB
            while (dataUrl.length > 500 * 1024 && quality > 0.05) {
                quality -= 0.05;
                dataUrl = canvas.toDataURL('image/jpeg', quality);
            }

            fetch(dataUrl)
                .then(res => res.blob())
                .then(blob => {
                    const formData = new FormData();
                    formData.append('file', blob, file.name);
                    formData.append('formId', formId);

                    const xhr = new XMLHttpRequest();
                    xhr.open('POST', 'list_data/upload_file.php', true);

                    const progressContainer = createProgressCircle(uploadImage);
                    const progressPath = progressContainer.querySelector('.progressSvg .progress');
                    const progressText = progressContainer.querySelector('.progressText');
                    progressContainer.style.display = 'flex';

                    xhr.upload.onprogress = function(event) {
                        if (event.lengthComputable) {
                            const percentComplete = (event.loaded / event.total) * 100;
                            const dashoffset = 100 - percentComplete;
                            progressPath.style.strokeDashoffset = dashoffset;
                            progressText.textContent = Math.round(percentComplete) + '%';
                        }
                    };

                    xhr.onload = function() {
                        if (xhr.status === 200) {
                            progressPath.style.strokeDashoffset = 0;
                            progressText.textContent = 'Uploaded';
                            progressText.style.color = '#04c224';
                            setTimeout(() => {
                                progressContainer.style.display = 'none';
                            }, 1500);
                        } else {
                            alert('Upload gagal.');
                            console.error(xhr.responseText);
                        }
                    };

                    xhr.send(formData);
                });
        };
    };
}