feat: create lapor.html reporting form with geocoding integration

03PovertyMapping/lapor.html

@@ -1321,6 +1321,18 @@ async function submitReport() {
                 const upRes = await PhotoUpload.upload('report', reportId, photoInput.files);
                 console.log('Upload result:', upRes);
             }
+            
+            // Tampilkan pesan sukses dan ubah UI
+            document.getElementById('formWrap').style.display = 'none';
+            document.getElementById('successCard').style.display = 'block';
+            document.getElementById('successReportId').textContent = reportId;
+            
+            // Kembalikan tombol ke state awal
+            btn.disabled = false;
+            btn.innerHTML = '<i class="fas fa-paper-plane"></i> Kirim Laporan';
+            
+            // Scroll ke atas untuk melihat pesan sukses
+            window.scrollTo({ top: 0, behavior: 'smooth' });
         } else {
             showToast(data.message || 'Gagal mengirim laporan.', 'error', 5000);
             btn.disabled = false;
@@ -1384,6 +1396,7 @@ function resetForm() {
     }
 
     // Reset photos
+    globalSelectedFiles = [];
     const photoInput = document.getElementById('reportPhotos');
     if (photoInput) photoInput.value = '';
     const strip = document.getElementById('reportPhotoStrip');
@@ -1425,6 +1438,9 @@ function showToast(msg, type = 'success', duration = 3200) {
     const strip = document.getElementById('reportPhotoStrip');
     const errEl = document.getElementById('reportPhotoError');
     
+    // Array global untuk menampung file secara kumulatif
+    window.globalSelectedFiles = window.globalSelectedFiles || [];
+    
     if (!zone || !input) return;
     
     function showErr(msg) {
@@ -1438,44 +1454,73 @@ function showToast(msg, type = 'success', duration = 3200) {
         document.getElementById('reportPhotoZone')?.classList.remove('dragover');
     }
     
+    function updateInputFiles() {
+        const dt = new DataTransfer();
+        window.globalSelectedFiles.forEach(file => dt.items.add(file));
+        input.files = dt.files;
+    }
+    
     function handleFiles(fileList) {
         clearErr();
         
-        // Validasi jumlah file
-        if (fileList.length > PhotoUpload.MAX_FILES) {
-            showErr(`Maksimal ${PhotoUpload.MAX_FILES} foto.`);
-            input.value = '';
+        const newArray = Array.from(fileList);
+        const currentTotal = window.globalSelectedFiles.length + newArray.length;
+        
+        // Validasi jumlah file total
+        if (currentTotal > PhotoUpload.MAX_FILES) {
+            showErr(`Maksimal ${PhotoUpload.MAX_FILES} foto. Anda sudah memilih ${window.globalSelectedFiles.length} foto.`);
+            updateInputFiles(); // kembalikan ke sebelumnya
             return;
         }
         
         // Validasi tiap file
-        for (let i = 0; i < fileList.length; i++) {
-            const file = fileList[i];
+        for (let i = 0; i < newArray.length; i++) {
+            const file = newArray[i];
             const ext = file.name.split('.').pop().toLowerCase();
             if (!['jpg', 'jpeg', 'png'].includes(ext)) {
                 showErr(`File "${file.name}" bukan JPG/PNG.`);
-                input.value = '';
+                updateInputFiles();
                 return;
             }
             if (file.size > 5 * 1024 * 1024) {
                 showErr(`File "${file.name}" melebihi 5 MB.`);
-                input.value = '';
+                updateInputFiles();
                 return;
             }
         }
         
-        // Tampilkan preview
+        // Tambahkan ke array global
+        window.globalSelectedFiles.push(...newArray);
+        updateInputFiles();
+        
+        // Tampilkan preview kumulatif
         strip.innerHTML = '';
-        Array.from(fileList).forEach(file => {
+        window.globalSelectedFiles.forEach((file, index) => {
+            const wrapper = document.createElement('div');
+            wrapper.style.cssText = 'position:relative;display:inline-block;margin:4px;';
+            
             const reader = new FileReader();
             reader.onload = function(e) {
                 const img = document.createElement('img');
                 img.src = e.target.result;
                 img.className = 'photo-thumb';
-                img.style.cssText = 'width:72px;height:72px;object-fit:cover;border-radius:8px;border:1.5px solid #e2e6ef;margin:4px;cursor:pointer;';
+                img.style.cssText = 'width:72px;height:72px;object-fit:cover;border-radius:8px;border:1.5px solid #e2e6ef;cursor:pointer;';
                 img.title = file.name;
                 img.onclick = () => PhotoUpload.lightbox(img.src);
-                strip.appendChild(img);
+                
+                const btn = document.createElement('button');
+                btn.innerHTML = '&times;';
+                btn.style.cssText = 'position:absolute;top:2px;right:2px;background:rgba(0,0,0,0.6);color:white;border:none;border-radius:50%;width:18px;height:18px;font-size:12px;line-height:1;cursor:pointer;padding:0;';
+                btn.onclick = (e) => {
+                    e.stopPropagation();
+                    window.globalSelectedFiles.splice(index, 1);
+                    updateInputFiles();
+                    handleFiles([]); // Re-render preview
+                };
+                
+                wrapper.appendChild(img);
+                wrapper.appendChild(btn);
+                strip.appendChild(wrapper);
             };
             reader.readAsDataURL(file);
         });