From a9421963a7bcd8ba046df53cf8e33c9b0772f425 Mon Sep 17 00:00:00 2001
From: dhanabalan <dhana@example.com>
Date: Mon, 27 Oct 2025 16:24:05 +0530
Subject: [PATCH] added retake photo functionality and improved capture logic
 in camera capture component

---
 .../views/fields/camera-capture.blade.php     | 63 ++++++++++---------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/resources/views/fields/camera-capture.blade.php b/resources/views/fields/camera-capture.blade.php
index c3754fb..3870f5f 100644
--- a/resources/views/fields/camera-capture.blade.php
+++ b/resources/views/fields/camera-capture.blade.php
@@ -734,17 +734,13 @@ function cameraCapture() {
         <x-filament::button color="primary" @click="switchCamera">Switch Camera</x-filament::button>
         <x-filament::button color="success" @click="capturePhoto">Capture Photo</x-filament::button>
         <x-filament::button color="warning" @click="verifyPhoto">Verify</x-filament::button>
+        <x-filament::button color="primary" @click="retakePhoto">Retake</x-filament::button>
     </div>
 
     <input type="hidden" x-ref="hiddenInput" name="camera_capture_file">
     {{-- <input type="hidden" x-ref="serialInput" name="serialNumbers"> --}}
     {{-- <input type="hidden" x-model="serialNumbers" name="serialNumbers"> --}}
     <input type="hidden" x-model="serialNumbers" name="serialNumbers">
-
-
-
-
-
 </div>
 
 <!-- Scripts -->
@@ -825,36 +821,35 @@ function cameraCapture() {
         //     this.stopDetection();
         // },
 
-
         async capturePhoto() {
-    const video = this.$refs.video;
-    const canvas = this.$refs.canvas;
-    const overlay = this.$refs.overlay;
-    const snapshot = this.$refs.snapshot; // ✅ Fix: define snapshot reference
-    const ctx = canvas.getContext('2d');
+            const video = this.$refs.video;
+            const canvas = this.$refs.canvas;
+            const overlay = this.$refs.overlay;
+            const snapshot = this.$refs.snapshot; // ✅ Fix: define snapshot reference
+            const ctx = canvas.getContext('2d');
 
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    ctx.drawImage(video, 0, 0);
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            ctx.drawImage(video, 0, 0);
 
-    const snapshotData = canvas.toDataURL('image/png'); // ✅ Correct data var
-    this.$refs.hiddenInput.value = snapshotData;
-    this.capturedPhoto = snapshotData;
+            const snapshotData = canvas.toDataURL('image/png'); // ✅ Correct data var
+            this.$refs.hiddenInput.value = snapshotData;
+            this.capturedPhoto = snapshotData;
 
-    // ✅ Stop camera
-    if (this.stream) this.stream.getTracks().forEach(track => track.stop());
+            // ✅ Stop camera
+            if (this.stream) this.stream.getTracks().forEach(track => track.stop());
 
-    // ✅ Hide video + overlay
-    video.classList.add('hidden');
-    overlay.classList.add('hidden');
+            // ✅ Hide video + overlay
+            video.classList.add('hidden');
+            overlay.classList.add('hidden');
 
-    // ✅ Show captured image
-    snapshot.src = snapshotData; // ✅ Correct variable
-    snapshot.classList.remove('hidden');
+            // ✅ Show captured image
+            snapshot.src = snapshotData; // ✅ Correct variable
+            snapshot.classList.remove('hidden');
 
-    alert("Photo captured!");
-    this.stopDetection();
-},
+            alert("Photo captured!");
+            this.stopDetection();
+        },
 
         async verifyPhoto() {
             if (!this.capturedPhoto) {
@@ -885,7 +880,6 @@ function cameraCapture() {
 
                     //this.$refs.serialInput.value = JSON.stringify(this.serialNumbers);
                     alert("Serial numbers stored in hidden input:\n" + this.$refs.serialInput.value);
-
                 }
             } catch (err) {
                 console.error("OCR verify error:", err);
@@ -924,6 +918,14 @@ function cameraCapture() {
             }
         },
 
+
+        async retakePhoto() {
+            this.photoTaken = false;
+            this.$refs.snapshot.classList.add('hidden');
+            this.$refs.video.classList.remove('hidden');
+            await this.initCamera();
+        },
+
         startDetection() {
             if (this.textDetectionInterval) clearInterval(this.textDetectionInterval);
             this.textDetectionInterval = setInterval(() => this.detectText(), 1000);
@@ -946,3 +948,6 @@ function cameraCapture() {
 
 
 
+
+
+