From 07a127d0034a2d85a849592ff37648d41238244e Mon Sep 17 00:00:00 2001
From: Tanuja Pansare <tanuja@stratawiz.com>
Date: Fri, 30 Oct 2026 10:36:57 +0530
Subject: [PATCH] Form changes Horizon - Upload Daily Field Work Photo

---
 ...a8b3-d211-46ba-b867-69d4b85da68d.blade.php | 139 ++++++++++++------
 1 file changed, 93 insertions(+), 46 deletions(-)

diff --git a/resources/views/form/rapport-horizon/1793272971-f2e4a8b3-d211-46ba-b867-69d4b85da68d.blade.php b/resources/views/form/rapport-horizon/1793272971-f2e4a8b3-d211-46ba-b867-69d4b85da68d.blade.php
index 5f67524b..be503ff7 100644
--- a/resources/views/form/rapport-horizon/1793272971-f2e4a8b3-d211-46ba-b867-69d4b85da68d.blade.php
+++ b/resources/views/form/rapport-horizon/1793272971-f2e4a8b3-d211-46ba-b867-69d4b85da68d.blade.php
@@ -157,9 +157,9 @@
                                             @break
                                         
                                         @case('file')
-                                            @if(!isset($form->is_approval) || $form->is_approval != 'yes')
-                                                
+                                        @if(!isset($form->is_approval) || $form->is_approval != 'yes')
                                             @if($question->code == 'upload_photo')
+
                                                 <div class="d-flex align-items-center gap-2 mb-2">
                                                     <label for="field-upload_photo" class="form-label mb-0">
                                                         {{$question->question}}
@@ -167,22 +167,53 @@
                                                     </label>
 
                                                     <button type="button" id="start-photo-camera"
-                                                            class="btn btn-primary btn-sm">
+                                                        class="btn btn-primary btn-sm">
                                                         Open Camera
                                                     </button>
                                                 </div>
-                                            @else
-                                                <label for="field-{{$question->code}}" class="form-label">
-                                                    {{$question->question}}
-                                                    {!!$question->required == 'yes' ? '<span class="text-danger">*</span>':''!!}
-                                                </label>
-                                            @endif
-                                                
 
-                                            @elseif(isset($question->value))
-                                                <img src="{{$question->value}}" class="img-fluid">
+                                                <div id="photo-camera-container">
+                                                    <video id="photo-camera-preview"
+                                                        autoplay playsinline
+                                                        style="display:none; width:100%; max-height:350px; border-radius:8px;">
+                                                    </video>
+
+                                                    <img id="photo-captured-preview"
+                                                        alt="Captured photo"
+                                                        style="display:none; width:100%; max-height:350px; object-fit:contain;">
+
+                                                    <input type="file"
+                                                        id="field-upload_photo"
+                                                        name="upload_photo"
+                                                        accept="image/*"
+                                                        data-required="{{$question->required == 'yes' ? '1' : '0'}}"
+                                                        style="display:none;">
+
+                                                    <div class="d-flex flex-wrap gap-2 mt-2">
+                                                        <button type="button" id="capture-photo"
+                                                            class="btn btn-success" style="display:none;">
+                                                            Capture Photo
+                                                        </button>
+
+                                                        <button type="button" id="retake-photo"
+                                                            class="btn btn-secondary" style="display:none;">
+                                                            Retake Photo
+                                                        </button>
+                                                    </div>
+                                                </div>
+
+                                            @else
+                                                <input type="file"
+                                                    id="field-{{$question->code}}"
+                                                    name="{{$question->code}}"
+                                                    class="form-control"
+                                                    {{$question->required == 'yes' ? 'required' : ''}}>
                                             @endif
-                                            @break
+
+                                        @elseif(isset($question->value))
+                                            <img src="{{$question->value}}" class="img-fluid">
+                                        @endif
+                                        @break
 
                                         @case('multitextbox')
                                             <div class="row">
@@ -366,47 +397,63 @@
             const photoInput = document.getElementById('field-upload_photo');
 
             $('#start-photo-camera').on('click', async function () {
-    try {
-        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-            throw new Error('Camera access requires HTTPS or localhost.');
-        }
+                try {
+                    if (!navigator.mediaDevices ||
+                        !navigator.mediaDevices.getUserMedia) {
+                        throw new Error('Camera API is unavailable. Use HTTPS or localhost.');
+                    }
 
-        // This triggers the browser's native camera permission prompt
-        photoStream = await navigator.mediaDevices.getUserMedia({
-            video: { facingMode: { ideal: 'environment' } },
-            audio: false
-        });
+                    // Request camera permission
+                    photoStream = await navigator.mediaDevices.getUserMedia({
+                        video: {
+                            facingMode: { ideal: 'environment' }
+                        },
+                        audio: false
+                    });
 
-        video.srcObject = photoStream;
-        video.style.display = 'block';
-        preview.style.display = 'none';
+                    // Check required elements
+                    if (!video || !preview || !photoInput) {
+                        throw new Error('Camera elements are missing from the page.');
+                    }
 
-        $('#start-photo-camera').hide();
-        $('#capture-photo').show();
-        $('#retake-photo').hide();
+                    video.srcObject = photoStream;
+                    video.style.display = 'block';
+                    preview.style.display = 'none';
 
-    } catch (error) {
-        console.error('Camera error:', error);
+                    await video.play();
 
-        if (error.name === 'NotAllowedError' ||
-            error.name === 'PermissionDeniedError') {
+                    $('#start-photo-camera').hide();
+                    $('#capture-photo').show();
+                    $('#retake-photo').hide();
 
-            Swal.fire({
-                icon: 'warning',
-                title: 'Camera Permission Required',
-                text: 'Please allow camera access in your browser settings and click Open Camera again.'
+                } catch (error) {
+                    console.error('Camera error:', error);
+
+                    // Stop any partially opened camera stream
+                    if (photoStream) {
+                        photoStream.getTracks().forEach(track => track.stop());
+                        photoStream = null;
+                    }
+
+                    if (error.name === 'NotAllowedError' ||
+                        error.name === 'PermissionDeniedError') {
+
+                        Swal.fire({
+                            icon: 'warning',
+                            title: 'Camera Access Denied',
+                            text: 'Please enable camera permission for this website in your browser settings, then try again.'
+                        });
+
+                    } else {
+                        Swal.fire({
+                            icon: 'error',
+                            title: 'Unable to Open Camera',
+                            text: error.message || 'Please check your camera and try again.'
+                        });
+                    }
+                }
             });
 
-        } else {
-            Swal.fire({
-                icon: 'error',
-                title: 'Camera Unavailable',
-                text: 'Unable to access your camera. Please check your camera and try again.'
-            });
-        }
-    }
-});
-
             $('#capture-photo').on('click', function () {
                 if (!photoStream || !video.videoWidth) {
                     return;