Merge branch 'main' of https://git.probindo.com/Probindo/database-pertani-web

resources/views/produktivitas/petani/lahan/add.blade.php

@@ -95,26 +95,33 @@
         color: #adb5bd;
     }
 
-.dropzone-custom-container .dz-remove-custom {
+    .dropzone-custom-container .dz-control-panel {
         position: absolute;
         top: -8px;
         right: -8px;
-    background: #dc3545;
+        display: flex;
-    color: #fff;
+        gap: 5px;
-    border-radius: 50%;
+        z-index: 20;
-    width: 24px;
+    }
-    height: 24px;
+
+    .dropzone-custom-container .dz-btn-action {
         display: flex;
         align-items: center;
         justify-content: center;
-    text-decoration: none;
+        width: 26px;
-    font-size: 12px;
+        height: 26px;
-    font-weight: bold;
+        border-radius: 50%;
-    z-index: 99;
+        color: #fff !important;
+        text-decoration: none !important;
         box-shadow: 0 2px 5px rgba(0,0,0,0.2);
         cursor: pointer;
+        font-size: 14px;
     }
-.dropzone-custom-container .dz-remove-custom:hover { background: #c82333; color: #fff; }
+
+    .dropzone-custom-container .btn-edit { background: #ffc107; color: #000 !important; }
+    .dropzone-custom-container .btn-edit:hover { background: #7367f0; }
+    .dropzone-custom-container .btn-delete { background: #dc3545; }
+    .dropzone-custom-container .btn-delete:hover { background: #c82333; }
 
     .dropzone-custom-container .dz-error-message, 
     .dropzone-custom-container .dz-success-mark, 
@@ -655,7 +662,14 @@
 
         const previewTemplate = `
         <div class="dz-preview dz-file-preview">
-            <a href="javascript:void(0);" class="dz-remove-custom" data-dz-remove title="Hapus File">✕</a>
+            <div class="dz-control-panel">
+                <a href="javascript:void(0);" class="dz-btn-action btn-edit" title="Ganti Foto">
+                    <i class="ti tabler-pencil"></i>
+                </a>
+                <a href="javascript:void(0);" class="dz-btn-action btn-delete" data-dz-remove title="Hapus Foto">
+                    <i class="ti tabler-x"></i>
+                </a>
+            </div>
             <div class="dz-image"><img data-dz-thumbnail /></div>
             <div class="dz-details">
                 <div class="dz-filename"><span data-dz-name></span></div>
@@ -683,6 +697,29 @@
                 thumbnailHeight: null,
             });
         }
+        $(document).on('click', '.btn-edit', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            let previewElement = $(this).closest('.dz-preview')[0];
+            let dz = myDropzone; 
+            let fileToReplace = dz.files.find(f => f.previewElement === previewElement);
+
+            if (fileToReplace) {
+                let tempInput = document.createElement('input');
+                tempInput.type = 'file';
+                tempInput.accept = 'image/jpeg,image/jpg,image/png';
+
+                tempInput.onchange = function(event) {
+                    let newFile = event.target.files[0];
+                    if (newFile) {
+                        dz.removeFile(fileToReplace); 
+                        dz.addFile(newFile);
+                    }
+                };
+                tempInput.click();
+            }
+        });
 
         $(document).on('click', '#dropzone-container .dz-image img', function (e) {
             e.stopPropagation(); 
@@ -695,6 +732,34 @@
                 $(this).removeClass('active');
             }
         });
+
+        $(document).on('click', '.dz-edit', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            let previewElement = $(this).closest('.dz-preview')[0];
+            
+            let dz = $("#dropzone-foto")[0].dropzone;
+            
+            let fileToReplace = dz.files.find(f => f.previewElement === previewElement);
+
+            if (fileToReplace) {
+                let tempInput = document.createElement('input');
+                tempInput.type = 'file';
+                tempInput.accept = 'image/jpeg,image/jpg,image/png'; 
+
+                tempInput.onchange = function(event) {
+                    let newFile = event.target.files[0];
+                    if (newFile) {
+                        dz.removeFile(fileToReplace);
+                        dz.addFile(newFile);
+                    }
+                };
+
+                tempInput.click();
+            }
+        });
+        // -----------------------------------
         // FORM
 
         $('#petani-lahan-tanaman').validate({