foto tambah lahan

2026-07-14 15:41:16 +07:00
parent 5b776b2ae8
commit d4eb27e583
1 changed files with 198 additions and 37 deletions
@@ -12,6 +12,150 @@
        background-color: #f8f9fa;
        z-index: 1;
    }
+
+.dropzone-custom-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+    padding: 15px;
+    border: 2px dashed #ced4da;
+    border-radius: 12px;
+    background-color: #f8f9fa;
+    min-height: 160px;
+    align-items: center;
+}
+
+.btn-tambah-foto {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 140px;
+    height: 160px;
+    border: 2px dashed #a8b1ba;
+    border-radius: 12px;
+    background: #fff;
+    color: #6c757d;
+    cursor: pointer;
+    transition: 0.2s;
+    order: 999; 
+}
+.btn-tambah-foto:hover {
+    background: #e9ecef;
+    border-color: #6c757d;
+    color: #495057;
+}
+
+.dropzone-custom-container .dz-preview {
+    position: relative;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
+    border: 1px solid #e2e8f0;
+    width: 140px;
+    display: flex;
+    flex-direction: column;
+}
+
+.dropzone-custom-container .dz-image {
+    width: 100%;
+    height: 110px;
+    background: #f1f5f9;
+    cursor: zoom-in;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 12px 12px 0 0;
+    overflow: hidden;
+}
+
+.dropzone-custom-container .dz-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.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 {
+    font-size: 11px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #495057;
+}
+.dropzone-custom-container .dz-size {
+    font-size: 10px;
+    color: #adb5bd;
+}
+
+.dropzone-custom-container .dz-remove-custom {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    background: #dc3545;
+    color: #fff;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    font-size: 12px;
+    font-weight: bold;
+    z-index: 99;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    cursor: pointer;
+}
+.dropzone-custom-container .dz-remove-custom:hover { background: #c82333; color: #fff; }
+
+.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;
+    left: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    background: rgba(0, 0, 0, 0.85) !important;
+    z-index: 99999 !important;
+    align-items: center !important;
+    justify-content: center !important;
+    padding: 30px !important;
+    box-sizing: border-box !important;
+}
+.foto-lightbox.active {
+    display: flex !important;
+}
+.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 {
+    position: absolute !important;
+    top: 20px !important;
+    right: 30px !important;
+    color: #fff !important;
+    font-size: 40px !important;
+    font-weight: bold !important;
+    cursor: pointer !important;
+    z-index: 100000 !important;
+}
+.foto-lightbox-close:hover { color: #dc3545 !important; }
 </style>
@endpush

@@ -226,23 +370,22 @@
                            </div>

                            <hr class="my-4">
-                            <div class="row">
-                                <div class="col-12 mb-4">
-                                    <h6 class="mb-0">Foto</h6>
-
                            <div class="row">
                                <div class="col-md-12 mb-3 form-control-validation">
-                                            <div id="dropzone-foto" class="needsclick">
-                                                <div class="dz-message needsclick">
-                                                    Drop foto di sini atau klik untuk memilih
+                                    <h6 class="mb-5">Foto</h6>
+                                    <div id="dropzone-container" class="dropzone-custom-container">
+                                        
+                                        <div id="btn-tambah-foto" class="btn-tambah-foto">
+                                            <i class="ti tabler-plus" style="font-size: 32px; margin-bottom: 8px;"></i>
+                                            <span style="font-size: 13px; font-weight: 600;">Tambah Foto</span>
                                        </div>
+                                        
                                    </div>
+                                    
                                    <input type="file" id="foto-input" name="foto[]" multiple hidden>
                                    @error('file')<div class="error invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
-                                </div>
-                            </div>

                            <div class="row mt-3">
                                <div class="col-12 text-end">
@@ -258,6 +401,11 @@
        </div>
    </div>
 </div>
+
+<div id="foto-lightbox" class="foto-lightbox">
+    <span class="foto-lightbox-close">&times;</span>
+    <img id="foto-lightbox-img" src="" alt="Preview Foto Besar">
+</div>
@endsection

@push('scripts')
@@ -505,35 +653,48 @@
            $('#luas_lahan').val(area.toFixed(2));
        }

-        // DROPZONE
-        const previewTemplate = `<div class="dz-preview dz-file-preview">
+        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-image"><img data-dz-thumbnail /></div>
            <div class="dz-details">
-  <div class="dz-thumbnail">
-    <img data-dz-thumbnail>
-    <span class="dz-nopreview">No preview</span>
-    <div class="dz-success-mark"></div>
-    <div class="dz-error-mark"></div>
-    <div class="dz-error-message"><span data-dz-errormessage></span></div>
-    <div class="progress">
-      <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>
-    </div>
-  </div>
-  <div class="dz-filename" data-dz-name></div>
-  <div class="dz-size" data-dz-size></div>
+                <div class="dz-filename"><span data-dz-name></span></div>
+                <div class="dz-size"><span data-dz-size></span></div>
            </div>
        </div>`;

-
        Dropzone.autoDiscover = false;
-        const dropzoneFoto = $("#dropzone-foto").addClass("dropzone").dropzone({
+        
+        let myDropzone = null;
+        const dropzoneElement = document.querySelector("#dropzone-container");
+
+        if (dropzoneElement) {
+            myDropzone = new Dropzone(dropzoneElement, {
                url: "/", 
+                autoProcessQueue: false,
                previewTemplate: previewTemplate,
-            parallelUploads: 1,
+                clickable: "#btn-tambah-foto", 
+                previewsContainer: "#dropzone-container", 
+                parallelUploads: 10,
                maxFilesize: 5,
-            addRemoveLinks: true,
+                addRemoveLinks: false,
                acceptedFiles: "image/jpeg,image/jpg,image/png",
+                thumbnailWidth: null,
+                thumbnailHeight: null,
+            });
+        }
+
+        $(document).on('click', '#dropzone-container .dz-image img', function (e) {
+            e.stopPropagation(); 
+            $('#foto-lightbox-img').attr('src', this.src);
+            $('#foto-lightbox').addClass('active');
        });

+        $('#foto-lightbox').on('click', function (e) {
+            if (e.target === this || $(e.target).hasClass('foto-lightbox-close')) {
+                $(this).removeClass('active');
+            }
+        });
        // FORM

        $('#petani-lahan-tanaman').validate({