{{-- <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>
    <canvas id="canvas" width="320" height="240" style="display:none;"></canvas>
    <img id="snapshot" style="margin-top:10px; max-width:100%;">
    <input type="hidden" id="camera_image" name="{{ $getName() }}">
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const captureBtn = document.getElementById('captureBtn');
    const snapshot = document.getElementById('snapshot');
    const cameraInput = document.getElementById('camera_image');

    async function startCamera() {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({
                video: { facingMode: "user" } // front camera
            });
            video.srcObject = stream;
        } catch (err) {
            console.error("Camera error: ", err);
            alert("Cannot access camera. Check permissions or HTTPS.");
        }
    }

    captureBtn.addEventListener('click', () => {
        const context = canvas.getContext('2d');
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
        const dataUrl = canvas.toDataURL('image/png');
        snapshot.src = dataUrl;
        cameraInput.value = dataUrl;
    });

    startCamera();
});
</script> --}}



<div x-data="cameraCapture()" x-init="initCamera()" class="space-y-2" wire:ignore 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>
        <x-filament::button color="gray" @click="verify" x-show="photoTaken">Verify</x-filament::button>
    </div>

    {{-- <input type="hidden" name="{{ $getName() }}" x-ref="hiddenInput"> --}}
    {{-- <input type="hidden" x-ref="hiddenInput" name="camera_capture"> --}}
    <input type="hidden" x-ref="hiddenInput" id="camera_capture_field" name="camera_capture_file">

</div>


<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.1.2/dist/tesseract.min.js"></script>
<script>

    // function cameraCapture()
    // {
    //     return
    //     {
    //         stream: null,
    //         currentFacingMode: 'user', // 'user' = front, 'environment' = back
    //         photoTaken: false,
    //         photo1: '',

    //         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.photo1 = dataUrl;
    //             this.$refs.hiddenInput.value = dataUrl;
    //             // @this.set('photo1', dataUrl);
    //             console.log('Captured Image:', dataUrl);
    //         },

    //         async verifyOCR(dataUrl) {
    //             try {
    //                 const { data: { text } } = await Tesseract.recognize(
    //                     dataUrl,
    //                     'eng', // language
    //                     { logger: m => console.log(m) } // optional
    //                 );
    //                 alert("OCR Result: " + text);
    //             } catch (err) {
    //                 console.error(err);
    //                 alert("OCR Failed: " + err.message);
    //             }
    //         },

    //         async verify() {
    //             const dataUrl = this.$refs.hiddenInput.value;
    //             if (!dataUrl) {
    //                 alert("No captured image found!");
    //                 return;
    //             }
    //             await this.verifyOCR(dataUrl);
    //         },

    //         async retakePhoto() {
    //             this.photoTaken = false;
    //             this.$refs.snapshot.classList.add('hidden');
    //             this.$refs.video.classList.remove('hidden');
    //             await this.initCamera();
    //         }
    //     }

    // }

    function cameraCapture() {
    return {
        stream: null,
        currentFacingMode: 'user',
        photoTaken: false,
        photo1: '',

        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');

            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;
            console.log('Captured Image:', dataUrl);
        },

        async verifyOCR(dataUrl) {
            try {
                const { data: { text } } = await Tesseract.recognize(
                    dataUrl,
                    'eng',
                    { logger: m => console.log(m) }
                );
                alert("OCR Result: " + text);
            } catch (err) {
                console.error(err);
                alert("OCR Failed: " + err.message);
            }
        },  // <-- COMMA ADDED HERE

        async verify() {
            const dataUrl = this.$refs.hiddenInput.value;
            if (!dataUrl) {
                alert("No captured image found!");
                return;
            }
            await this.verifyOCR(dataUrl);
        },

        async retakePhoto() {
            this.photoTaken = false;
            this.$refs.snapshot.classList.add('hidden');
            this.$refs.video.classList.remove('hidden');
            await this.initCamera();
        }
    }
}



</script>


{{-- //..Another Option --}}

{{-- <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>

    <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>
    </div>

    <input type="hidden" x-ref="hiddenInput" name="camera_capture_file_path">
</div>

<script>
function cameraCapture() {
    return {
        stream: null,
        photoTaken: false,

        async initCamera() {
            try {
                if (this.stream) this.stream.getTracks().forEach(t => t.stop());
                this.stream = await navigator.mediaDevices.getUserMedia({ video: true });
                this.$refs.video.srcObject = this.stream;
            } catch (err) {
                console.error("Camera error:", err);
                alert("Cannot access camera. Use HTTPS and allow camera access.");
            }
        },

        async capturePhoto() {
            const video = this.$refs.video;
            const canvas = this.$refs.canvas;
            const context = canvas.getContext('2d');

            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            context.drawImage(video, 0, 0, canvas.width, canvas.height);

            // Convert canvas to file
            canvas.toBlob(async blob => {
                const file = new File([blob], 'capture.png', { type: 'image/png' });
                console.log("File ready for upload:", file);

                // Upload to temp folder
                const formData = new FormData();
                formData.append('photo', file);

                const response = await fetch('/temp-upload', {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: formData
                });

                const data = await response.json();
                if (data.success) {
                    this.$refs.hiddenInput.value = data.path; // Filament form hidden input
                    console.log("Saved to temp:", data.path);
                } else {
                    alert('Failed to save image.');
                }
            }, 'image/png');

            this.photoTaken = true;

            if (this.stream) this.stream.getTracks().forEach(track => track.stop());
        },

        retakePhoto() {
            this.photoTaken = false;
            this.initCamera();
        }
    }
}
</script> --}}