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

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

@@ -13,7 +13,7 @@
         z-index: 1;
     }
 
-.dropzone-custom-container {
+    .dropzone-custom-container {
         display: flex;
         flex-wrap: wrap;
         gap: 15px;
@@ -23,9 +23,9 @@
         background-color: #f8f9fa;
         min-height: 160px;
         align-items: center;
-}
+    }
 
-.btn-tambah-foto {
+    .btn-tambah-foto {
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -39,14 +39,14 @@
         cursor: pointer;
         transition: 0.2s;
         order: 999; 
-}
-.btn-tambah-foto:hover {
+    }
+    .btn-tambah-foto:hover {
         background: #e9ecef;
         border-color: #6c757d;
         color: #495057;
-}
+    }
 
-.dropzone-custom-container .dz-preview {
+    .dropzone-custom-container .dz-preview {
         position: relative;
         background: #fff;
         border-radius: 12px;
@@ -55,9 +55,9 @@
         width: 140px;
         display: flex;
         flex-direction: column;
-}
+    }
 
-.dropzone-custom-container .dz-image {
+    .dropzone-custom-container .dz-image {
         width: 100%;
         height: 110px;
         background: #f1f5f9;
@@ -67,61 +67,68 @@
         justify-content: center;
         border-radius: 12px 12px 0 0;
         overflow: hidden;
-}
+    }
 
-.dropzone-custom-container .dz-image img {
+    .dropzone-custom-container .dz-image img {
         width: 100%;
         height: 100%;
         object-fit: cover;
-}
+    }
 
-.dropzone-custom-container .dz-details {
+    .dropzone-custom-container .dz-details {
         padding: 8px;
         text-align: center;
         background: #fff;
         border-radius: 0 0 12px 12px;
         border-top: 1px solid #e2e8f0;
-}
-.dropzone-custom-container .dz-filename {
+    }
+    .dropzone-custom-container .dz-filename {
         font-size: 11px;
         font-weight: 600;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         color: #495057;
-}
-.dropzone-custom-container .dz-size {
+    }
+    .dropzone-custom-container .dz-size {
         font-size: 10px;
         color: #adb5bd;
-}
+    }
 
-.dropzone-custom-container .dz-remove-custom {
+    .dropzone-custom-container .dz-control-panel {
         position: absolute;
         top: -8px;
         right: -8px;
-    background: #dc3545;
-    color: #fff;
-    border-radius: 50%;
-    width: 24px;
-    height: 24px;
+        display: flex;
+        gap: 5px;
+        z-index: 20;
+    }
+
+    .dropzone-custom-container .dz-btn-action {
         display: flex;
         align-items: center;
         justify-content: center;
-    text-decoration: none;
-    font-size: 12px;
-    font-weight: bold;
-    z-index: 99;
+        width: 26px;
+        height: 26px;
+        border-radius: 50%;
+        color: #fff !important;
+        text-decoration: none !important;
         box-shadow: 0 2px 5px rgba(0,0,0,0.2);
         cursor: pointer;
-}
-.dropzone-custom-container .dz-remove-custom:hover { background: #c82333; color: #fff; }
+        font-size: 14px;
+    }
 
-.dropzone-custom-container .dz-error-message, 
-.dropzone-custom-container .dz-success-mark, 
-.dropzone-custom-container .dz-error-mark, 
-.dropzone-custom-container .progress { display: none !important; }
+    .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; }
 
-.foto-lightbox {
+    .dropzone-custom-container .dz-error-message, 
+    .dropzone-custom-container .dz-success-mark, 
+    .dropzone-custom-container .dz-error-mark, 
+    .dropzone-custom-container .progress { display: none !important; }
+
+    .foto-lightbox {
         display: none;
         position: fixed !important;
         top: 0 !important;
@@ -134,18 +141,18 @@
         justify-content: center !important;
         padding: 30px !important;
         box-sizing: border-box !important;
-}
-.foto-lightbox.active {
+    }
+    .foto-lightbox.active {
         display: flex !important;
-}
-.foto-lightbox img {
+    }
+    .foto-lightbox img {
         max-width: 90vw !important;
         max-height: 85vh !important;
         object-fit: contain !important;
         border-radius: 8px !important;
         box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
-}
-.foto-lightbox-close {
+    }
+    .foto-lightbox-close {
         position: absolute !important;
         top: 20px !important;
         right: 30px !important;
@@ -154,8 +161,8 @@
         font-weight: bold !important;
         cursor: pointer !important;
         z-index: 100000 !important;
-}
-.foto-lightbox-close:hover { color: #dc3545 !important; }
+    }
+    .foto-lightbox-close:hover { color: #dc3545 !important; }
 </style>
 @endpush
 
@@ -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({