Perbaiki pengaturan canvas dan hapus elemen gambar yang tidak terpakai

- Modifikasi ukuran canvas agar sesuai dengan rasio video (portrait/landscape).
- Tambahkan logika untuk menampilkan kontrol editor dan menyembunyikan kontrol kamera.
- Sesuaikan ulang ukuran canvas menggambar agar sinkron dengan ukuran canvas utama.
- Hapus elemen gambar pratinjau yang tidak lagi digunakan di komponen foto.

resources/views/surveyor/components/foto.blade.php

@@ -418,11 +418,6 @@
                                         <div class="input-group w-full flex gap-2">
                                             <input type="hidden" name="name_lantai_unit[]" value="lantai">
                                             <div class="preview-container">
-                                                <img id="foto_lantai-preview-{{ $loop->index }}"
-                                                    src="{{ asset('storage/' . old('foto_lantai_unit', $item['foto_lantai_unit'])) }}"
-                                                    alt="Foto Lantai" class="mt-2 h-auto"
-                                                    style="{{ old('foto_lantai_unit', $item['foto_lantai_unit']) ? 'display: block;' : 'display: none;' }} width: 30rem;">
-
                                             </div>
                                             <input id="inputLantai" type="file" name="foto_lantai_unit[]"
                                                 class="file-input file-input-bordered w-full" accept="image/*"

resources/views/surveyor/js/camera-editor.blade.php

@@ -133,7 +133,7 @@
 
 
 
-            
+
         });
     </script>
 
@@ -204,9 +204,9 @@
             setupCanvas() {
                 // Set initial canvas size
                 this.canvas.width = 1280;
-                this.canvas.height = 960;
+                this.canvas.height = (this.canvas.width * 3) / 4;
-                this.drawingCanvas.width = 1280;
+                this.drawingCanvas.width = this.canvas.width;
-                this.drawingCanvas.height = 960;
+                this.drawingCanvas.height = this.canvas.height;
             }
 
             setupDrawingContext() {
@@ -277,6 +277,43 @@
                 this.saveDrawingState();
             }
 
+            takePhoto() {
+                const context = this.canvas.getContext('2d');
+
+                // Determine if the video is in portrait or landscape mode
+                const isPortrait = this.video.videoHeight > this.video.videoWidth;
+
+                if (isPortrait) {
+                    // Portrait mode
+                    this.canvas.width = this.video.videoWidth;
+                    this.canvas.height = this.video.videoHeight;
+                    context.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
+                } else {
+                    // Landscape mode
+                    this.canvas.width = 1280;
+                    this.canvas.height = (this.canvas.width * this.video.videoHeight) / this.video.videoWidth;
+                    context.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
+                }
+
+                // Adjust drawing canvas to match main canvas
+                this.drawingCanvas.width = this.canvas.width;
+                this.drawingCanvas.height = this.canvas.height;
+
+                // Hide video, show canvases
+                this.video.style.display = 'none';
+                this.canvas.style.display = 'block';
+                this.drawingCanvas.style.display = 'block';
+
+                // Show editor controls, hide camera controls
+                document.getElementById('editorControls').classList.remove('hidden');
+                document.getElementById('cameraControls').classList.add('hidden');
+
+                // Clear drawing history
+                this.drawingHistory = [];
+                this.historyIndex = -1;
+                this.saveDrawingState();
+            }
+
             switchCamera() {
                 this.currentFacingMode = this.currentFacingMode === 'environment' ? 'user' : 'environment';
                 this.startCamera();