changed logic in camera capture

resources/views/fields/camera-capture.blade.php

@@ -1,4 +1,4 @@
-<div>
+{{-- <div>
     <video id="video" width="320" height="240" autoplay playsinline style="border:1px solid #ccc;"></video>
     <br>
     <button type="button" id="captureBtn" class="mt-2 px-4 py-2 bg-blue-600 text-white rounded">Capture</button>
@@ -37,4 +37,86 @@ document.addEventListener('DOMContentLoaded', () => {
 
     startCamera();
 });
+</script> --}}
+
+<div x-data="cameraCapture()" x-init="initCamera()" class="space-y-2">
+    <video x-ref="video" width="320" height="240" autoplay playsinline class="border rounded"></video>
+    <canvas x-ref="canvas" width="320" height="240" class="hidden"></canvas>
+    <img x-ref="snapshot" class="hidden border rounded max-w-full">
+
+    {{-- <div class="flex space-x-2 mt-2">
+        <x-filament::button color="primary" @click="capturePhoto" x-show="!photoTaken">Capture</x-filament::button>
+        <x-filament::button color="secondary" @click="retakePhoto" x-show="photoTaken">Retake</x-filament::button>
+        <x-filament::button color="gray" @click="switchCamera" x-show="!photoTaken">Switch Camera</x-filament::button>
+    </div> --}}
+    <div class="flex space-x-4 mt-2">
+    <x-filament::button color="primary" @click="capturePhoto" x-show="!photoTaken">Capture</x-filament::button>
+    <x-filament::button color="secondary" @click="retakePhoto" x-show="photoTaken">Retake</x-filament::button>
+    <x-filament::button color="gray" @click="switchCamera" x-show="!photoTaken">Switch Camera</x-filament::button>
+</div>
+
+
+    <input type="hidden" name="{{ $getName() }}" x-ref="hiddenInput">
+</div>
+
+<script>
+function cameraCapture() {
+    return {
+        stream: null,
+        currentFacingMode: 'user', // 'user' = front, 'environment' = back
+        photoTaken: false,
+
+        async initCamera() {
+            try {
+                if (this.stream) {
+                    this.stream.getTracks().forEach(track => track.stop());
+                }
+
+                this.stream = await navigator.mediaDevices.getUserMedia({
+                    video: { facingMode: this.currentFacingMode }
+                });
+
+                this.$refs.video.srcObject = this.stream;
+            } catch (err) {
+                console.error("Camera error:", err);
+                alert("Cannot access camera. Enable permissions or use HTTPS.");
+            }
+        },
+
+        async switchCamera() {
+            this.currentFacingMode = this.currentFacingMode === 'user' ? 'environment' : 'user';
+            await this.initCamera();
+        },
+
+        capturePhoto() {
+            const video = this.$refs.video;
+            const canvas = this.$refs.canvas;
+            const snapshot = this.$refs.snapshot;
+            const context = canvas.getContext('2d');
+
+            context.drawImage(video, 0, 0, canvas.width, canvas.height);
+            const dataUrl = canvas.toDataURL('image/png');
+
+            // stop camera stream after capture
+            if (this.stream) {
+                this.stream.getTracks().forEach(track => track.stop());
+            }
+
+            snapshot.src = dataUrl;
+            snapshot.classList.remove('hidden');
+            video.classList.add('hidden');
+            this.photoTaken = true;
+
+            this.$refs.hiddenInput.value = dataUrl;
+        },
+
+        async retakePhoto() {
+            this.photoTaken = false;
+            this.$refs.snapshot.classList.add('hidden');
+            this.$refs.video.classList.remove('hidden');
+            await this.initCamera();
+        }
+    }
+}
 </script>
+