{{-- <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 x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="space-y-2">
    <video
        x-ref="video"
        autoplay
        playsinline
        class="border rounded w-80 h-auto"
    ></video>

    <!-- no need to fix width/height here either -->
    <canvas x-ref="canvas" class="hidden"></canvas>

    <img x-ref="snapshot" class="hidden border rounded max-w-full"> --}}


{{--
    <div class="flex space-x-8 mt-2">
        <x-filament::button color="primary" @click="capturePhoto" x-show="!photoTaken">Capture</x-filament::button>
        <x-filament::button color="primary" @click="retakePhoto" x-show="photoTaken">Retake</x-filament::button>
        <x-filament::button color="primary" @click="switchCamera" x-show="!photoTaken">Switch Camera</x-filament::button>
        <x-filament::button color="primary" @click="verify" x-show="photoTaken">Verify</x-filament::button>
    </div> --}}
    {{-- <div class="flex space-x-2 mt-2">
    <x-filament::button color="primary" @click="capturePhoto" x-show="!photoTaken" class="inline-flex w-auto">Capture</x-filament::button>
    <x-filament::button color="primary" @click="retakePhoto" x-show="photoTaken" class="inline-flex w-auto">Retake</x-filament::button>
    <x-filament::button color="primary" @click="switchCamera" x-show="!photoTaken" class="inline-flex w-auto">Switch Camera</x-filament::button>
    <x-filament::button color="primary" @click="verify" x-show="photoTaken" class="inline-flex w-auto">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');

            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;

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

            //const dataUrl = canvas.toDataURL('image/png');
            const dataUrl = canvas.toDataURL('image/jpeg', 0.95);

            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()" wire:ignore class="space-y-2">
    <video
        x-ref="video"
        autoplay
        playsinline
        class="border rounded w-80 h-auto"
    ></video>

    <canvas x-ref="canvas" class="hidden"></canvas>

    <img x-ref="snapshot" class="hidden border rounded max-w-full">

    <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="primary" @click="retakePhoto" x-show="photoTaken">Retake</x-filament::button>
        <x-filament::button color="primary" @click="switchCamera" x-show="!photoTaken" class="inline-flex w-auto">Switch Camera</x-filament::button>
        <x-filament::button color="primary" @click="verify" x-show="photoTaken" class="inline-flex w-auto">Verify</x-filament::button>
    </div>

    <input type="hidden" x-ref="hiddenInput" x-model="photo1" name="camera_capture_file">

</div>

<script>
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();
        },

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

            // Show snapshot
            const snapshot = this.$refs.snapshot;
            snapshot.src = canvas.toDataURL('image/jpeg');
            snapshot.classList.remove('hidden');
            video.classList.add('hidden');

            // Convert canvas to file
            canvas.toBlob(async blob => {
                const file = new File([blob], 'capture.jpeg', { type: 'image/jpeg' });
                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/jpeg', 1.0); // 1.0 = highest quality

            this.photoTaken = true;

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


        // 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);
        //     }
        // },

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

        async verify() {
            const filePath = this.$refs.hiddenInput.value; // e.g., "temp/capture_1760764396.jpeg"

            if (!filePath) {
                alert("No captured image found!");
                return;
            }

            try {
                const response = await fetch('/verify-ocr', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ path: filePath })
                });

                const data = await response.json();

                console.log(data);

                // if (data.success) {
                //     alert("OCR Result: " + data.text);
                //     console.error(data.text);
                // }
                if (data.success) {
                    const serials = Array.isArray(data.text) ? data.text.join("\n") : data.text;
                    alert("OCR Result:\n" + serials);
                    console.log(serials);
                }
                else {
                    alert("OCR Failed: " + data.error);
                    console.error(data.error);
                }
            } catch (err) {
                console.error(err.message);
                alert("OCR request failed: " + err.message);
            }
        },


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