From a59f685d41f905a563cd77f17ea46b1e06de138e Mon Sep 17 00:00:00 2001
From: arifal <arifaldiosdevelopment@gmail.com>
Date: Mon, 14 Jul 2025 11:46:51 +0700
Subject: [PATCH] fix icon target and handle using back or front camera
 precheck and postcheck

---
 .../layouts/partials/sidebarMenu.blade.php    |   2 +-
 .../views/transaction/postchecks.blade.php    | 978 ++++++++++++++----
 .../views/transaction/prechecks.blade.php     | 602 ++++++++++-
 3 files changed, 1329 insertions(+), 253 deletions(-)

diff --git a/resources/views/layouts/partials/sidebarMenu.blade.php b/resources/views/layouts/partials/sidebarMenu.blade.php
index 0b82471..2040508 100755
--- a/resources/views/layouts/partials/sidebarMenu.blade.php
+++ b/resources/views/layouts/partials/sidebarMenu.blade.php
@@ -232,7 +232,7 @@
                 @can('view', $menus['kpi.targets.index'])
                 <li class="kt-menu__item" aria-haspopup="true">
                     <a href="{{ route('kpi.targets.index') }}" class="kt-menu__link">
-                        <i class="fa fa-user-cog" style="display: flex; align-items: center; margin-right: 10px;"></i>
+                        <i class="fa fa-bullseye" style="display: flex; align-items: center; margin-right: 10px;"></i>
                         <span class="kt-menu__link-text">Target</span>
                     </a>
                 </li>
diff --git a/resources/views/transaction/postchecks.blade.php b/resources/views/transaction/postchecks.blade.php
index 6135ac0..1076270 100644
--- a/resources/views/transaction/postchecks.blade.php
+++ b/resources/views/transaction/postchecks.blade.php
@@ -1,6 +1,8 @@
 @extends('layouts.frontapp')
 
 @section('styles')
+<!-- SweetAlert2 CSS -->
+<link rel="stylesheet" href="{{ asset('node_modules/sweetalert2/dist/sweetalert2.min.css') }}">
 <style>
   .card {
     border: 1px solid #ddd;
@@ -123,6 +125,16 @@
     box-shadow: 0 4px 8px rgba(0,0,0,0.2);
   }
 
+  .btn-info {
+    background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
+    border: none;
+  }
+
+  .btn-info:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+  }
+
   .btn-lg {
     padding: 15px 30px;
     font-size: 16px;
@@ -140,6 +152,48 @@
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   }
 
+  .photo-preview-container {
+    background: #f8f9fa;
+    padding: 15px;
+    border-radius: 8px;
+    border: 1px solid #dee2e6;
+  }
+
+  .camera-controls .btn {
+    margin-bottom: 5px;
+  }
+
+  .camera-controls .btn-sm {
+    padding: 6px 12px;
+    font-size: 12px;
+  }
+
+  .form-control.is-invalid {
+    border-color: #dc3545;
+    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+  }
+
+  .form-control.is-invalid:focus {
+    border-color: #dc3545;
+    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+  }
+
+  .invalid-feedback {
+    display: block;
+    width: 100%;
+    margin-top: 0.25rem;
+    font-size: 80%;
+    color: #dc3545;
+  }
+
+  .camera-info {
+    margin-top: 8px;
+    padding: 5px 10px;
+    background: rgba(5, 150, 105, 0.1);
+    border-radius: 4px;
+    border-left: 3px solid #059669;
+  }
+
   .alert {
     border-radius: 8px;
     border: none;
@@ -358,6 +412,12 @@
                     <button type="button" class="btn btn-success btn-sm" onclick="capturePhoto('front_camera', 'front_canvas', 'front_image', 'front_preview')">
                       <i class="fas fa-camera-retro"></i> Ambil Foto
                     </button>
+                    <button type="button" class="btn btn-warning btn-sm" onclick="stopCamera('front_camera')">
+                      <i class="fas fa-times"></i> Tutup Kamera
+                    </button>
+                    <button type="button" class="btn btn-info btn-sm" onclick="switchCamera('front_camera')">
+                      <i class="fas fa-sync"></i> Ganti Kamera
+                    </button>
                   </div>
                   <div class="mt-2">
                     <small class="text-muted">Atau upload foto dari galeri:</small>
@@ -392,6 +452,12 @@
                         <button type="button" class="btn btn-success btn-sm" onclick="capturePhoto('cabin_camera', 'cabin_canvas', 'cabin_temperature_image', 'cabin_preview')">
                           <i class="fas fa-camera-retro"></i> Ambil Foto
                         </button>
+                        <button type="button" class="btn btn-warning btn-sm" onclick="stopCamera('cabin_camera')">
+                          <i class="fas fa-times"></i> Tutup Kamera
+                        </button>
+                        <button type="button" class="btn btn-info btn-sm" onclick="switchCamera('cabin_camera')">
+                          <i class="fas fa-sync"></i> Ganti Kamera
+                        </button>
                       </div>
                       <div class="mt-2">
                         <small class="text-muted">Atau upload foto dari galeri:</small>
@@ -433,6 +499,12 @@
                         <button type="button" class="btn btn-success btn-sm" onclick="capturePhoto('ac_camera', 'ac_canvas', 'ac_image', 'ac_preview')">
                           <i class="fas fa-camera-retro"></i> Ambil Foto
                         </button>
+                        <button type="button" class="btn btn-warning btn-sm" onclick="stopCamera('ac_camera')">
+                          <i class="fas fa-times"></i> Tutup Kamera
+                        </button>
+                        <button type="button" class="btn btn-info btn-sm" onclick="switchCamera('ac_camera')">
+                          <i class="fas fa-sync"></i> Ganti Kamera
+                        </button>
                       </div>
                       <div class="mt-2">
                         <small class="text-muted">Atau upload foto dari galeri:</small>
@@ -474,6 +546,12 @@
                         <button type="button" class="btn btn-success btn-sm" onclick="capturePhoto('blower_camera', 'blower_canvas', 'blower_image', 'blower_preview')">
                           <i class="fas fa-camera-retro"></i> Ambil Foto
                         </button>
+                        <button type="button" class="btn btn-warning btn-sm" onclick="stopCamera('blower_camera')">
+                          <i class="fas fa-times"></i> Tutup Kamera
+                        </button>
+                        <button type="button" class="btn btn-info btn-sm" onclick="switchCamera('blower_camera')">
+                          <i class="fas fa-sync"></i> Ganti Kamera
+                        </button>
                       </div>
                       <div class="mt-2">
                         <small class="text-muted">Atau upload foto dari galeri:</small>
@@ -515,6 +593,12 @@
                         <button type="button" class="btn btn-success btn-sm" onclick="capturePhoto('evaporator_camera', 'evaporator_canvas', 'evaporator_image', 'evaporator_preview')">
                           <i class="fas fa-camera-retro"></i> Ambil Foto
                         </button>
+                        <button type="button" class="btn btn-warning btn-sm" onclick="stopCamera('evaporator_camera')">
+                          <i class="fas fa-times"></i> Tutup Kamera
+                        </button>
+                        <button type="button" class="btn btn-info btn-sm" onclick="switchCamera('evaporator_camera')">
+                          <i class="fas fa-sync"></i> Ganti Kamera
+                        </button>
                       </div>
                       <div class="mt-2">
                         <small class="text-muted">Atau upload foto dari galeri:</small>
@@ -569,242 +653,696 @@
 @endsection
 
 @section('javascripts')
+<!-- SweetAlert2 JS -->
+<script src="{{ asset('node_modules/sweetalert2/dist/sweetalert2.all.min.js') }}"></script>
 <script>
-let streams = {};
+  let streams = {};
 
-// Logout function
-function logout(event){
-    event.preventDefault();
-    Swal.fire({
-        title: 'Logout?',
-        text: "Anda akan keluar dari sistem!",
-        showCancelButton: true,
-        confirmButtonColor: '#d33',
-        cancelButtonColor: '#dedede',
-        confirmButtonText: 'Logout'
-    }).then((result) => {
-        if (result.value) {
-            $('#logout-form').submit();
-        }
-    })
-}
-
-// Fallback untuk browser lama
-if (navigator.mediaDevices === undefined) {
-  navigator.mediaDevices = {};
-}
-
-if (navigator.mediaDevices.getUserMedia === undefined) {
-  navigator.mediaDevices.getUserMedia = function(constraints) {
-    // Coba berbagai versi getUserMedia
-    const getUserMedia = navigator.webkitGetUserMedia || 
-                        navigator.mozGetUserMedia || 
-                        navigator.msGetUserMedia ||
-                        navigator.oGetUserMedia;
-    
-    if (!getUserMedia) {
-      return Promise.reject(new Error('getUserMedia tidak didukung di browser ini'));
-    }
-    
-    return new Promise(function(resolve, reject) {
-      getUserMedia.call(navigator, constraints, resolve, reject);
-    });
-  }
-}
-
-// Tambahan fallback untuk browser yang sangat lama
-if (navigator.getUserMedia === undefined) {
-  navigator.getUserMedia = navigator.mediaDevices.getUserMedia;
-}
-
-// Start camera
-async function startCamera(videoId) {
-  try {
-    const video = document.getElementById(videoId);
-    
-    // Cek apakah browser mendukung getUserMedia
-    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-      throw new Error('Browser tidak mendukung akses kamera');
-    }
-    
-    // Stop stream yang sedang berjalan
-    if (streams[videoId]) {
-      streams[videoId].getTracks().forEach(track => track.stop());
-    }
-    
-    // Konfigurasi kamera
-    const constraints = {
-      video: {
-        width: { min: 320, ideal: 640, max: 1280 },
-        height: { min: 240, ideal: 480, max: 720 },
-        aspectRatio: { ideal: 4/3 }
-      }
-    };
-    
-    const stream = await navigator.mediaDevices.getUserMedia(constraints);
-    
-    video.srcObject = stream;
-    streams[videoId] = stream;
-    
-    // Tunggu video siap
-    video.onloadedmetadata = function() {
-      video.play();
-    };
-    
-    video.onerror = function(e) {
-      console.error('Error pada video:', e);
-      alert('Error pada video stream');
-    };
-    
-  } catch (err) {
-    // Pesan error yang lebih spesifik
-    let errorMessage = 'Tidak dapat mengakses kamera. ';
-    
-    if (err.name === 'NotAllowedError') {
-      errorMessage += 'Izin kamera ditolak. Silakan:\n1. Klik ikon kamera di address bar\n2. Pilih "Allow"\n3. Refresh halaman';
-    } else if (err.name === 'NotFoundError') {
-      errorMessage += 'Kamera tidak ditemukan. Pastikan HP memiliki kamera.';
-    } else if (err.name === 'NotReadableError') {
-      errorMessage += 'Kamera sedang digunakan aplikasi lain. Tutup aplikasi kamera lain.';
-    } else if (err.name === 'OverconstrainedError') {
-      errorMessage += 'Kamera tidak mendukung resolusi yang diminta.';
-    } else if (err.name === 'SecurityError') {
-      errorMessage += 'Akses kamera diblokir. Pastikan menggunakan HTTPS atau localhost.';
-    } else {
-      errorMessage += 'Error: ' + err.message;
-    }
-    
-    alert(errorMessage);
-  }
-}
-
-// Capture photo and convert to file
-function capturePhoto(videoId, canvasId, inputId, previewId) {
-  const video = document.getElementById(videoId);
-  const canvas = document.getElementById(canvasId);
-  const fileInput = document.getElementById(inputId);
-  const preview = document.getElementById(previewId);
-  
-  if (!video.srcObject) {
-    alert('Silakan buka kamera terlebih dahulu');
-    return;
-  }
-  
-  // Pastikan video sudah siap
-  if (video.videoWidth === 0 || video.videoHeight === 0) {
-    alert('Video belum siap. Tunggu sebentar dan coba lagi.');
-    return;
-  }
-  
-  try {
-    const context = canvas.getContext('2d');
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    context.drawImage(video, 0, 0, canvas.width, canvas.height);
-    
-    // Convert canvas ke File object
-    canvas.toBlob(function(blob) {
-      // Buat File object
-      const file = new File([blob], `photo_${Date.now()}.jpg`, {
-        type: 'image/jpeg',
-        lastModified: Date.now()
+  // Logout function
+  function logout(event){
+      event.preventDefault();
+      
+      // Stop all cameras before logout
+      Object.keys(streams).forEach(videoId => {
+        stopCamera(videoId);
       });
       
-      // Assign ke file input
-      const dataTransfer = new DataTransfer();
-      dataTransfer.items.add(file);
-      fileInput.files = dataTransfer.files;
+      Swal.fire({
+          title: 'Logout?',
+          text: "Anda akan keluar dari sistem!",
+          showCancelButton: true,
+          confirmButtonColor: '#d33',
+          cancelButtonColor: '#dedede',
+          confirmButtonText: 'Logout'
+      }).then((result) => {
+          if (result.value) {
+              $('#logout-form').submit();
+          }
+      })
+  }
+
+  // Fallback untuk browser lama
+  if (navigator.mediaDevices === undefined) {
+    navigator.mediaDevices = {};
+  }
+
+  if (navigator.mediaDevices.getUserMedia === undefined) {
+    navigator.mediaDevices.getUserMedia = function(constraints) {
+      // Coba berbagai versi getUserMedia
+      const getUserMedia = navigator.webkitGetUserMedia || 
+                          navigator.mozGetUserMedia || 
+                          navigator.msGetUserMedia ||
+                          navigator.oGetUserMedia;
       
-      // Preview
-      const url = URL.createObjectURL(blob);
-      preview.innerHTML = `
+      if (!getUserMedia) {
+        return Promise.reject(new Error('getUserMedia tidak didukung di browser ini'));
+      }
+      
+      return new Promise(function(resolve, reject) {
+        getUserMedia.call(navigator, constraints, resolve, reject);
+      });
+    }
+  }
+
+  // Tambahan fallback untuk browser yang sangat lama
+  if (navigator.getUserMedia === undefined) {
+    navigator.getUserMedia = navigator.mediaDevices.getUserMedia;
+  }
+
+  // Get available cameras and select back camera
+  async function getBackCamera() {
+    try {
+      // Minta izin kamera terlebih dahulu
+      await navigator.mediaDevices.getUserMedia({ video: true });
+      
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const videoDevices = devices.filter(device => device.kind === 'videoinput');
+      
+      console.log('Kamera yang tersedia:', videoDevices.map(d => ({ label: d.label, deviceId: d.deviceId })));
+      
+      // Cari kamera belakang berdasarkan label atau deviceId
+      const backCamera = videoDevices.find(device => 
+        device.label.toLowerCase().includes('back') ||
+        device.label.toLowerCase().includes('belakang') ||
+        device.label.toLowerCase().includes('rear') ||
+        device.label.toLowerCase().includes('environment') ||
+        device.deviceId.includes('back') ||
+        device.deviceId.includes('rear')
+      );
+      
+      if (backCamera) {
+        console.log('Kamera belakang ditemukan:', backCamera.label);
+        return backCamera.deviceId;
+      }
+      
+      // Jika tidak ada kamera belakang yang terdeteksi, gunakan kamera pertama
+      if (videoDevices.length > 0) {
+        console.log('Menggunakan kamera pertama:', videoDevices[0].label);
+        return videoDevices[0].deviceId;
+      }
+      
+      return null;
+    } catch (err) {
+      console.log('Tidak dapat mendapatkan daftar kamera:', err);
+      return null;
+    }
+  }
+
+  // Start camera
+  async function startCamera(videoId) {
+    try {
+      const video = document.getElementById(videoId);
+      
+      // Cek apakah browser mendukung getUserMedia
+      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        throw new Error('Browser tidak mendukung akses kamera');
+      }
+      
+      // Cek apakah kamera sudah berjalan
+      if (streams[videoId] && streams[videoId].active) {
+        console.log('Kamera sudah berjalan untuk:', videoId);
+        return;
+      }
+      
+      // Stop stream yang sedang berjalan untuk kamera lain
+      Object.keys(streams).forEach(key => {
+        if (streams[key] && streams[key].active) {
+          streams[key].getTracks().forEach(track => track.stop());
+          delete streams[key];
+        }
+      });
+      
+      // Dapatkan deviceId kamera belakang
+      const backCameraId = await getBackCamera();
+      
+      let stream;
+      
+      if (backCameraId) {
+        // Gunakan deviceId kamera belakang yang spesifik
+        const constraints = {
+          video: {
+            deviceId: { exact: backCameraId },
+            width: { min: 320, ideal: 640, max: 1280 },
+            height: { min: 240, ideal: 480, max: 720 },
+            aspectRatio: { ideal: 4/3 }
+          }
+        };
+        
+        try {
+          stream = await navigator.mediaDevices.getUserMedia(constraints);
+          console.log('Menggunakan kamera belakang dengan deviceId:', backCameraId);
+        } catch (err) {
+          console.log('Gagal menggunakan kamera belakang, mencoba fallback...');
+          // Fallback ke constraint biasa
+          stream = await navigator.mediaDevices.getUserMedia({
+            video: {
+              width: { min: 320, ideal: 640, max: 1280 },
+              height: { min: 240, ideal: 480, max: 720 },
+              aspectRatio: { ideal: 4/3 },
+              facingMode: { ideal: 'environment' }
+            }
+          });
+        }
+      } else {
+        // Jika tidak bisa mendapatkan deviceId, gunakan facingMode
+        const constraints = {
+          video: {
+            width: { min: 320, ideal: 640, max: 1280 },
+            height: { min: 240, ideal: 480, max: 720 },
+            aspectRatio: { ideal: 4/3 },
+            facingMode: { ideal: 'environment' } // Kamera belakang
+          }
+        };
+        
+        try {
+          stream = await navigator.mediaDevices.getUserMedia(constraints);
+        } catch (err) {
+          console.log('Kamera belakang tidak tersedia, mencoba kamera depan...');
+          
+          // Fallback ke kamera depan
+          const frontCameraConstraints = {
+            video: {
+              width: { min: 320, ideal: 640, max: 1280 },
+              height: { min: 240, ideal: 480, max: 720 },
+              aspectRatio: { ideal: 4/3 },
+              facingMode: { ideal: 'user' } // Kamera depan
+            }
+          };
+          
+          try {
+            stream = await navigator.mediaDevices.getUserMedia(frontCameraConstraints);
+          } catch (frontErr) {
+            // Jika kamera depan juga gagal, coba tanpa constraint facingMode
+            const fallbackConstraints = {
+              video: {
+                width: { min: 320, ideal: 640, max: 1280 },
+                height: { min: 240, ideal: 480, max: 720 },
+                aspectRatio: { ideal: 4/3 }
+              }
+            };
+            
+            stream = await navigator.mediaDevices.getUserMedia(fallbackConstraints);
+          }
+        }
+      }
+      
+      video.srcObject = stream;
+      streams[videoId] = stream;
+      
+      // Tunggu video siap
+      video.onloadedmetadata = function() {
+        video.play();
+        
+        // Tampilkan informasi kamera yang digunakan
+        const cameraInfo = document.createElement('div');
+        cameraInfo.className = 'camera-info';
+        cameraInfo.innerHTML = `
+          <small class="text-success">
+            <i class="fas fa-camera"></i> Kamera aktif - ${backCameraId ? 'Kamera belakang' : 'Kamera default'}
+          </small>
+        `;
+        
+        // Hapus info kamera sebelumnya jika ada
+        const existingInfo = video.parentElement.querySelector('.camera-info');
+        if (existingInfo) {
+          existingInfo.remove();
+        }
+        
+        video.parentElement.appendChild(cameraInfo);
+      };
+      
+      video.onerror = function(e) {
+        console.error('Error pada video:', e);
+        Swal.fire({
+          icon: 'error',
+          title: 'Error Video',
+          text: 'Error pada video stream',
+          confirmButtonText: 'OK'
+        });
+      };
+      
+      console.log('Kamera berhasil dibuka untuk:', videoId);
+      
+      // Tampilkan notifikasi sukses
+      Swal.fire({
+        icon: 'success',
+        title: 'Kamera Berhasil Dibuka',
+        text: backCameraId ? 'Menggunakan kamera belakang' : 'Menggunakan kamera default',
+        timer: 2000,
+        showConfirmButton: false,
+        toast: true,
+        position: 'top-end'
+      });
+      
+    } catch (err) {
+      // Pesan error yang lebih spesifik
+      let errorMessage = 'Tidak dapat mengakses kamera. ';
+      
+      if (err.name === 'NotAllowedError') {
+        errorMessage += 'Izin kamera ditolak. Silakan:\n1. Klik ikon kamera di address bar\n2. Pilih "Allow"\n3. Refresh halaman';
+      } else if (err.name === 'NotFoundError') {
+        errorMessage += 'Kamera tidak ditemukan. Pastikan HP memiliki kamera.';
+      } else if (err.name === 'NotReadableError') {
+        errorMessage += 'Kamera sedang digunakan aplikasi lain. Tutup aplikasi kamera lain.';
+      } else if (err.name === 'OverconstrainedError') {
+        errorMessage += 'Kamera tidak mendukung resolusi yang diminta.';
+      } else if (err.name === 'SecurityError') {
+        errorMessage += 'Akses kamera diblokir. Pastikan menggunakan HTTPS atau localhost.';
+      } else {
+        errorMessage += 'Error: ' + err.message;
+      }
+      
+      Swal.fire({
+        icon: 'error',
+        title: 'Error Kamera',
+        text: errorMessage,
+        confirmButtonText: 'OK'
+      });
+    }
+  }
+
+  // Capture photo and convert to file
+  function capturePhoto(videoId, canvasId, inputId, previewId) {
+    const video = document.getElementById(videoId);
+    const canvas = document.getElementById(canvasId);
+    const fileInput = document.getElementById(inputId);
+    const preview = document.getElementById(previewId);
+    
+    if (!video.srcObject) {
+      Swal.fire({
+        icon: 'warning',
+        title: 'Kamera Belum Dibuka',
+        text: 'Silakan buka kamera terlebih dahulu',
+        confirmButtonText: 'OK'
+      });
+      return;
+    }
+    
+    // Pastikan video sudah siap
+    if (video.videoWidth === 0 || video.videoHeight === 0) {
+      Swal.fire({
+        icon: 'warning',
+        title: 'Video Belum Siap',
+        text: 'Video belum siap. Tunggu sebentar dan coba lagi.',
+        confirmButtonText: 'OK'
+      });
+      return;
+    }
+    
+    try {
+      const context = canvas.getContext('2d');
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      context.drawImage(video, 0, 0, canvas.width, canvas.height);
+      
+      // Convert canvas ke File object
+      canvas.toBlob(function(blob) {
+        // Buat File object
+        const file = new File([blob], `photo_${Date.now()}.jpg`, {
+          type: 'image/jpeg',
+          lastModified: Date.now()
+        });
+        
+        // Assign ke file input
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(file);
+        fileInput.files = dataTransfer.files;
+        
+        // Preview dengan tombol batal dan retake
+        const url = URL.createObjectURL(blob);
+        preview.innerHTML = `
+          <div class="photo-preview-container">
+            <img src="${url}" style="max-width: 200px; max-height: 150px; border-radius: 8px; border: 3px solid #059669; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+            <div class="mt-2">
+              <small class="text-success"><i class="fas fa-check"></i> Foto berhasil diambil</small>
+              <br>
+              <small class="text-muted">Ukuran: ${(file.size / 1024).toFixed(1)} KB</small>
+            </div>
+            <div class="mt-2">
+              <button type="button" class="btn btn-warning btn-sm mr-1" onclick="retakePhoto('${videoId}', '${inputId}', '${previewId}')">
+                <i class="fas fa-redo"></i> Ambil Ulang
+              </button>
+              <button type="button" class="btn btn-danger btn-sm" onclick="cancelPhoto('${inputId}', '${previewId}')">
+                <i class="fas fa-times"></i> Batal
+              </button>
+            </div>
+          </div>
+        `;
+        
+        // Stop kamera setelah mengambil foto
+        stopCamera(videoId);
+        
+        // Tampilkan notifikasi foto berhasil diambil
+        Swal.fire({
+          icon: 'success',
+          title: 'Foto Berhasil Diambil',
+          text: 'Foto berhasil disimpan',
+          timer: 2000,
+          showConfirmButton: false,
+          toast: true,
+          position: 'top-end'
+        });
+        
+      }, 'image/jpeg', 0.8);
+      
+    } catch (err) {
+      Swal.fire({
+        icon: 'error',
+        title: 'Gagal Mengambil Foto',
+        text: 'Gagal mengambil foto: ' + err.message,
+        confirmButtonText: 'OK'
+      });
+    }
+  }
+
+  // Function to retake photo
+  function retakePhoto(videoId, inputId, previewId) {
+    const fileInput = document.getElementById(inputId);
+    const preview = document.getElementById(previewId);
+    
+    // Clear file input
+    const dataTransfer = new DataTransfer();
+    fileInput.files = dataTransfer.files;
+    
+    // Clear preview
+    preview.innerHTML = '';
+    
+    // Stop any existing camera first
+    stopCamera(videoId);
+    
+    // Start camera again after a short delay
+    setTimeout(() => {
+      startCamera(videoId);
+    }, 100);
+    
+    // Tampilkan notifikasi foto diambil ulang
+    Swal.fire({
+      icon: 'info',
+      title: 'Mengambil Foto Ulang',
+      text: 'Kamera dibuka untuk mengambil foto ulang',
+      timer: 1500,
+      showConfirmButton: false,
+      toast: true,
+      position: 'top-end'
+    });
+  }
+
+  // Function to cancel photo
+  function cancelPhoto(inputId, previewId) {
+    const fileInput = document.getElementById(inputId);
+    const preview = document.getElementById(previewId);
+    
+    // Clear file input
+    const dataTransfer = new DataTransfer();
+    fileInput.files = dataTransfer.files;
+    
+    // Clear preview
+    preview.innerHTML = '';
+    
+    // Tampilkan notifikasi foto dibatalkan
+    Swal.fire({
+      icon: 'info',
+      title: 'Foto Dibatalkan',
+      text: 'Foto berhasil dibatalkan',
+      timer: 1500,
+      showConfirmButton: false,
+      toast: true,
+      position: 'top-end'
+    });
+  }
+
+  // Function to switch between front and back camera
+  async function switchCamera(videoId) {
+    const video = document.getElementById(videoId);
+    
+    if (!streams[videoId]) {
+      Swal.fire({
+        icon: 'warning',
+        title: 'Kamera Belum Dibuka',
+        text: 'Silakan buka kamera terlebih dahulu',
+        confirmButtonText: 'OK'
+      });
+      return;
+    }
+    
+    try {
+      // Stop current stream
+      stopCamera(videoId);
+      
+      // Wait a bit before starting new camera
+      await new Promise(resolve => setTimeout(resolve, 100));
+      
+      // Get current facing mode
+      const currentTracks = streams[videoId] ? streams[videoId].getVideoTracks() : [];
+      let currentFacingMode = 'environment'; // default to back camera
+      
+      if (currentTracks.length > 0) {
+        const settings = currentTracks[0].getSettings();
+        if (settings.facingMode) {
+          currentFacingMode = settings.facingMode;
+        }
+      }
+      
+      // Switch to opposite camera
+      const newFacingMode = currentFacingMode === 'environment' ? 'user' : 'environment';
+      
+      const constraints = {
+        video: {
+          width: { min: 320, ideal: 640, max: 1280 },
+          height: { min: 240, ideal: 480, max: 720 },
+          aspectRatio: { ideal: 4/3 },
+          facingMode: { ideal: newFacingMode }
+        }
+      };
+      
+      const stream = await navigator.mediaDevices.getUserMedia(constraints);
+      
+      video.srcObject = stream;
+      streams[videoId] = stream;
+      
+      // Update camera info
+      video.onloadedmetadata = function() {
+        video.play();
+        
+        const cameraInfo = document.createElement('div');
+        cameraInfo.className = 'camera-info';
+        cameraInfo.innerHTML = `
+          <small class="text-success">
+            <i class="fas fa-camera"></i> Kamera aktif - ${newFacingMode === 'environment' ? 'Kamera belakang' : 'Kamera depan'}
+          </small>
+        `;
+        
+        const existingInfo = video.parentElement.querySelector('.camera-info');
+        if (existingInfo) {
+          existingInfo.remove();
+        }
+        
+        video.parentElement.appendChild(cameraInfo);
+      };
+      
+      console.log('Berhasil beralih ke kamera:', newFacingMode === 'environment' ? 'belakang' : 'depan');
+      
+    } catch (err) {
+      console.error('Gagal beralih kamera:', err);
+      Swal.fire({
+        icon: 'error',
+        title: 'Gagal Beralih Kamera',
+        text: 'Tidak dapat beralih ke kamera lain: ' + err.message,
+        confirmButtonText: 'OK'
+      });
+    }
+  }
+
+  // Function to stop camera
+  function stopCamera(videoId) {
+    const video = document.getElementById(videoId);
+    
+    if (streams[videoId]) {
+      streams[videoId].getTracks().forEach(track => {
+        track.stop();
+        console.log('Track stopped:', track.kind);
+      });
+      delete streams[videoId];
+    }
+    
+    if (video.srcObject) {
+      video.srcObject = null;
+    }
+    
+    // Hapus info kamera
+    const cameraInfo = video.parentElement.querySelector('.camera-info');
+    if (cameraInfo) {
+      cameraInfo.remove();
+    }
+    
+    console.log('Kamera ditutup untuk:', videoId);
+    
+    // Tampilkan notifikasi kamera ditutup
+    Swal.fire({
+      icon: 'info',
+      title: 'Kamera Ditutup',
+      text: 'Kamera berhasil ditutup',
+      timer: 1500,
+      showConfirmButton: false,
+      toast: true,
+      position: 'top-end'
+    });
+  }
+
+  // Handle file upload from gallery
+  function handleFileUpload(input, inputId, previewId) {
+    const file = input.files[0];
+    if (!file) return;
+    
+    if (!file.type.startsWith('image/')) {
+      Swal.fire({
+        icon: 'warning',
+        title: 'File Tidak Valid',
+        text: 'Pilih file gambar',
+        confirmButtonText: 'OK'
+      });
+      return;
+    }
+    
+    // Validasi ukuran file (max 2MB)
+    if (file.size > 2 * 1024 * 1024) {
+      Swal.fire({
+        icon: 'warning',
+        title: 'Ukuran File Terlalu Besar',
+        text: 'Ukuran file maksimal 2MB',
+        confirmButtonText: 'OK'
+      });
+      return;
+    }
+    
+    // Assign ke file input yang sesuai
+    const targetInput = document.getElementById(inputId);
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(file);
+    targetInput.files = dataTransfer.files;
+    
+    // Preview dengan tombol batal
+    const url = URL.createObjectURL(file);
+    const preview = document.getElementById(previewId);
+    preview.innerHTML = `
+      <div class="photo-preview-container">
         <img src="${url}" style="max-width: 200px; max-height: 150px; border-radius: 8px; border: 3px solid #059669; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
         <div class="mt-2">
-          <small class="text-success"><i class="fas fa-check"></i> Foto berhasil diambil</small>
+          <small class="text-success"><i class="fas fa-check"></i> Foto berhasil diupload</small>
           <br>
           <small class="text-muted">Ukuran: ${(file.size / 1024).toFixed(1)} KB</small>
         </div>
-      `;
-    }, 'image/jpeg', 0.8);
+        <div class="mt-2">
+          <button type="button" class="btn btn-danger btn-sm" onclick="cancelPhoto('${inputId}', '${previewId}')">
+            <i class="fas fa-times"></i> Batal
+          </button>
+        </div>
+      </div>
+    `;
     
-  } catch (err) {
-    alert('Gagal mengambil foto: ' + err.message);
+    // Clear the original input
+    input.value = '';
+    
+    // Tampilkan notifikasi foto berhasil diupload
+    Swal.fire({
+      icon: 'success',
+      title: 'Foto Berhasil Diupload',
+      text: 'Foto berhasil disimpan dari galeri',
+      timer: 2000,
+      showConfirmButton: false,
+      toast: true,
+      position: 'top-end'
+    });
   }
-}
 
-// Handle file upload from gallery
-function handleFileUpload(input, inputId, previewId) {
-  const file = input.files[0];
-  if (!file) return;
-  
-  if (!file.type.startsWith('image/')) {
-    alert('Pilih file gambar');
-    return;
-  }
-  
-  // Validasi ukuran file (max 2MB)
-  if (file.size > 2 * 1024 * 1024) {
-    alert('Ukuran file maksimal 2MB');
-    return;
-  }
-  
-  // Assign ke file input yang sesuai
-  const targetInput = document.getElementById(inputId);
-  const dataTransfer = new DataTransfer();
-  dataTransfer.items.add(file);
-  targetInput.files = dataTransfer.files;
-  
-  // Preview
-  const url = URL.createObjectURL(file);
-  const preview = document.getElementById(previewId);
-  preview.innerHTML = `
-    <img src="${url}" style="max-width: 200px; max-height: 150px; border-radius: 8px; border: 3px solid #059669; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
-    <div class="mt-2">
-      <small class="text-success"><i class="fas fa-check"></i> Foto berhasil diupload</small>
-      <br>
-      <small class="text-muted">Ukuran: ${(file.size / 1024).toFixed(1)} KB</small>
-    </div>
-  `;
-}
-
-// Stop all cameras when page is unloaded
-window.addEventListener('beforeunload', function() {
-  Object.values(streams).forEach(stream => {
-    stream.getTracks().forEach(track => track.stop());
+  // Stop all cameras when page is unloaded
+  window.addEventListener('beforeunload', function() {
+    Object.values(streams).forEach(stream => {
+      if (stream && stream.active) {
+        stream.getTracks().forEach(track => {
+          track.stop();
+          console.log('Track stopped on page unload:', track.kind);
+        });
+      }
+    });
   });
-});
 
-// Form validation
-document.getElementById('postcheckForm').addEventListener('submit', function(e) {
-  const requiredFields = ['kilometer', 'front_image', 'pressure_high'];
-  let isValid = true;
-  
-  requiredFields.forEach(fieldId => {
-    const field = document.getElementById(fieldId);
-    
-    if (field.type === 'file') {
-      // Validasi file input
-      if (!field.files || field.files.length === 0) {
-        field.classList.add('is-invalid');
-        isValid = false;
-      } else {
-        field.classList.remove('is-invalid');
-      }
-    } else {
-      // Validasi input biasa
-      if (!field.value.trim()) {
-        field.classList.add('is-invalid');
-        isValid = false;
-      } else {
-        field.classList.remove('is-invalid');
-      }
+  // Stop all cameras when page is hidden (mobile browsers)
+  document.addEventListener('visibilitychange', function() {
+    if (document.hidden) {
+      Object.values(streams).forEach(stream => {
+        if (stream && stream.active) {
+          stream.getTracks().forEach(track => {
+            track.stop();
+            console.log('Track stopped on page hidden:', track.kind);
+          });
+        }
+      });
+    }
+  });
+
+  // Form validation
+  document.getElementById('postcheckForm').addEventListener('submit', function(e) {
+    const requiredFields = ['kilometer', 'front_image', 'pressure_high'];
+    let isValid = true;
+    let errorMessages = [];
+    
+    requiredFields.forEach(fieldId => {
+      const field = document.getElementById(fieldId);
+      
+      if (field.type === 'file') {
+        // Validasi file input
+        if (!field.files || field.files.length === 0) {
+          field.classList.add('is-invalid');
+          isValid = false;
+          errorMessages.push('Foto depan kendaraan wajib diisi');
+        } else {
+          field.classList.remove('is-invalid');
+        }
+      } else {
+        // Validasi input biasa
+        if (!field.value.trim()) {
+          field.classList.add('is-invalid');
+          isValid = false;
+          if (fieldId === 'kilometer') {
+            errorMessages.push('Kilometer wajib diisi');
+          } else if (fieldId === 'pressure_high') {
+            errorMessages.push('Pressure High wajib diisi');
+          }
+        } else {
+          field.classList.remove('is-invalid');
+        }
+      }
+    });
+    
+    if (!isValid) {
+      e.preventDefault();
+      Swal.fire({
+        icon: 'warning',
+        title: 'Validasi Gagal',
+        html: errorMessages.join('<br>'),
+        confirmButtonText: 'OK'
+      });
+    } else {
+      // Stop all cameras before submitting
+      Object.keys(streams).forEach(videoId => {
+        stopCamera(videoId);
+      });
+    }
+  });
+
+  // Remove error styling when user starts typing
+  document.addEventListener('input', function(e) {
+    if (e.target.classList.contains('is-invalid')) {
+      e.target.classList.remove('is-invalid');
+    }
+  });
+
+  // Remove error styling when user selects a file
+  document.addEventListener('change', function(e) {
+    if (e.target.type === 'file' && e.target.classList.contains('is-invalid')) {
+      e.target.classList.remove('is-invalid');
     }
   });
-  
-  if (!isValid) {
-    e.preventDefault();
-    alert('Mohon lengkapi semua field yang wajib diisi');
-  }
-});
 </script>
 @endsection
diff --git a/resources/views/transaction/prechecks.blade.php b/resources/views/transaction/prechecks.blade.php
index 6e1e910..e9554cb 100644
--- a/resources/views/transaction/prechecks.blade.php
+++ b/resources/views/transaction/prechecks.blade.php
@@ -1,6 +1,8 @@
 @extends('layouts.frontapp')
 
 @section('styles')
+<!-- SweetAlert2 CSS -->
+<link rel="stylesheet" href="{{ asset('node_modules/sweetalert2/dist/sweetalert2.min.css') }}">
 <style>
   .card {
     border: 1px solid #ddd;
@@ -123,6 +125,16 @@
     box-shadow: 0 4px 8px rgba(0,0,0,0.2);
   }
 
+  .btn-info {
+    background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
+    border: none;
+  }
+
+  .btn-info:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+  }
+
   .btn-lg {
     padding: 15px 30px;
     font-size: 16px;
@@ -140,6 +152,48 @@
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   }
 
+  .photo-preview-container {
+    background: #f8f9fa;
+    padding: 15px;
+    border-radius: 8px;
+    border: 1px solid #dee2e6;
+  }
+
+  .camera-controls .btn {
+    margin-bottom: 5px;
+  }
+
+  .camera-controls .btn-sm {
+    padding: 6px 12px;
+    font-size: 12px;
+  }
+
+  .form-control.is-invalid {
+    border-color: #dc3545;
+    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+  }
+
+  .form-control.is-invalid:focus {
+    border-color: #dc3545;
+    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+  }
+
+  .invalid-feedback {
+    display: block;
+    width: 100%;
+    margin-top: 0.25rem;
+    font-size: 80%;
+    color: #dc3545;
+  }
+
+  .camera-info {
+    margin-top: 8px;
+    padding: 5px 10px;
+    background: rgba(5, 150, 105, 0.1);
+    border-radius: 4px;
+    border-left: 3px solid #059669;
+  }
+
   .alert {
     border-radius: 8px;
     border: none;
@@ -358,6 +412,12 @@
                       <button type="button" class="btn btn-success btn-sm" onclick="capturePhoto('front_camera', 'front_canvas', 'front_image', 'front_preview')">
                         <i class="fas fa-camera-retro"></i> Ambil Foto
                       </button>
+                      <button type="button" class="btn btn-warning btn-sm" onclick="stopCamera('front_camera')">
+                        <i class="fas fa-times"></i> Tutup Kamera
+                      </button>
+                      <button type="button" class="btn btn-info btn-sm" onclick="switchCamera('front_camera')">
+                        <i class="fas fa-sync"></i> Ganti Kamera
+                      </button>
                     </div>
                     <div class="mt-2">
                       <small class="text-muted">Atau upload foto dari galeri:</small>
@@ -392,6 +452,12 @@
                           <button type="button" class="btn btn-success btn-sm" onclick="capturePhoto('cabin_camera', 'cabin_canvas', 'cabin_temperature_image', 'cabin_preview')">
                             <i class="fas fa-camera-retro"></i> Ambil Foto
                           </button>
+                          <button type="button" class="btn btn-warning btn-sm" onclick="stopCamera('cabin_camera')">
+                            <i class="fas fa-times"></i> Tutup Kamera
+                          </button>
+                          <button type="button" class="btn btn-info btn-sm" onclick="switchCamera('cabin_camera')">
+                            <i class="fas fa-sync"></i> Ganti Kamera
+                          </button>
                         </div>
                         <div class="mt-2">
                           <small class="text-muted">Atau upload foto dari galeri:</small>
@@ -433,6 +499,12 @@
                           <button type="button" class="btn btn-success btn-sm" onclick="capturePhoto('ac_camera', 'ac_canvas', 'ac_image', 'ac_preview')">
                             <i class="fas fa-camera-retro"></i> Ambil Foto
                           </button>
+                          <button type="button" class="btn btn-warning btn-sm" onclick="stopCamera('ac_camera')">
+                            <i class="fas fa-times"></i> Tutup Kamera
+                          </button>
+                          <button type="button" class="btn btn-info btn-sm" onclick="switchCamera('ac_camera')">
+                            <i class="fas fa-sync"></i> Ganti Kamera
+                          </button>
                         </div>
                         <div class="mt-2">
                           <small class="text-muted">Atau upload foto dari galeri:</small>
@@ -474,6 +546,12 @@
                           <button type="button" class="btn btn-success btn-sm" onclick="capturePhoto('blower_camera', 'blower_canvas', 'blower_image', 'blower_preview')">
                             <i class="fas fa-camera-retro"></i> Ambil Foto
                           </button>
+                          <button type="button" class="btn btn-warning btn-sm" onclick="stopCamera('blower_camera')">
+                            <i class="fas fa-times"></i> Tutup Kamera
+                          </button>
+                          <button type="button" class="btn btn-info btn-sm" onclick="switchCamera('blower_camera')">
+                            <i class="fas fa-sync"></i> Ganti Kamera
+                          </button>
                         </div>
                         <div class="mt-2">
                           <small class="text-muted">Atau upload foto dari galeri:</small>
@@ -515,6 +593,12 @@
                           <button type="button" class="btn btn-success btn-sm" onclick="capturePhoto('evaporator_camera', 'evaporator_canvas', 'evaporator_image', 'evaporator_preview')">
                             <i class="fas fa-camera-retro"></i> Ambil Foto
                           </button>
+                          <button type="button" class="btn btn-warning btn-sm" onclick="stopCamera('evaporator_camera')">
+                            <i class="fas fa-times"></i> Tutup Kamera
+                          </button>
+                          <button type="button" class="btn btn-info btn-sm" onclick="switchCamera('evaporator_camera')">
+                            <i class="fas fa-sync"></i> Ganti Kamera
+                          </button>
                         </div>
                         <div class="mt-2">
                           <small class="text-muted">Atau upload foto dari galeri:</small>
@@ -569,12 +653,20 @@
 @endsection
 
 @section('javascripts')
+<!-- SweetAlert2 JS -->
+<script src="{{ asset('node_modules/sweetalert2/dist/sweetalert2.all.min.js') }}"></script>
 <script>
   let streams = {};
 
   // Logout function
   function logout(event){
       event.preventDefault();
+      
+      // Stop all cameras before logout
+      Object.keys(streams).forEach(videoId => {
+        stopCamera(videoId);
+      });
+      
       Swal.fire({
           title: 'Logout?',
           text: "Anda akan keluar dari sistem!",
@@ -617,6 +709,45 @@
     navigator.getUserMedia = navigator.mediaDevices.getUserMedia;
   }
 
+  // Get available cameras and select back camera
+  async function getBackCamera() {
+    try {
+      // Minta izin kamera terlebih dahulu
+      await navigator.mediaDevices.getUserMedia({ video: true });
+      
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const videoDevices = devices.filter(device => device.kind === 'videoinput');
+      
+      console.log('Kamera yang tersedia:', videoDevices.map(d => ({ label: d.label, deviceId: d.deviceId })));
+      
+      // Cari kamera belakang berdasarkan label atau deviceId
+      const backCamera = videoDevices.find(device => 
+        device.label.toLowerCase().includes('back') ||
+        device.label.toLowerCase().includes('belakang') ||
+        device.label.toLowerCase().includes('rear') ||
+        device.label.toLowerCase().includes('environment') ||
+        device.deviceId.includes('back') ||
+        device.deviceId.includes('rear')
+      );
+      
+      if (backCamera) {
+        console.log('Kamera belakang ditemukan:', backCamera.label);
+        return backCamera.deviceId;
+      }
+      
+      // Jika tidak ada kamera belakang yang terdeteksi, gunakan kamera pertama
+      if (videoDevices.length > 0) {
+        console.log('Menggunakan kamera pertama:', videoDevices[0].label);
+        return videoDevices[0].deviceId;
+      }
+      
+      return null;
+    } catch (err) {
+      console.log('Tidak dapat mendapatkan daftar kamera:', err);
+      return null;
+    }
+  }
+
   // Start camera
   async function startCamera(videoId) {
     try {
@@ -627,21 +758,93 @@
         throw new Error('Browser tidak mendukung akses kamera');
       }
       
-      // Stop stream yang sedang berjalan
-      if (streams[videoId]) {
-        streams[videoId].getTracks().forEach(track => track.stop());
+      // Cek apakah kamera sudah berjalan
+      if (streams[videoId] && streams[videoId].active) {
+        console.log('Kamera sudah berjalan untuk:', videoId);
+        return;
       }
       
-      // Konfigurasi kamera
-      const constraints = {
-        video: {
-          width: { min: 320, ideal: 640, max: 1280 },
-          height: { min: 240, ideal: 480, max: 720 },
-          aspectRatio: { ideal: 4/3 }
+      // Stop stream yang sedang berjalan untuk kamera lain
+      Object.keys(streams).forEach(key => {
+        if (streams[key] && streams[key].active) {
+          streams[key].getTracks().forEach(track => track.stop());
+          delete streams[key];
         }
-      };
+      });
       
-      const stream = await navigator.mediaDevices.getUserMedia(constraints);
+      // Dapatkan deviceId kamera belakang
+      const backCameraId = await getBackCamera();
+      
+      let stream;
+      
+      if (backCameraId) {
+        // Gunakan deviceId kamera belakang yang spesifik
+        const constraints = {
+          video: {
+            deviceId: { exact: backCameraId },
+            width: { min: 320, ideal: 640, max: 1280 },
+            height: { min: 240, ideal: 480, max: 720 },
+            aspectRatio: { ideal: 4/3 }
+          }
+        };
+        
+        try {
+          stream = await navigator.mediaDevices.getUserMedia(constraints);
+          console.log('Menggunakan kamera belakang dengan deviceId:', backCameraId);
+        } catch (err) {
+          console.log('Gagal menggunakan kamera belakang, mencoba fallback...');
+          // Fallback ke constraint biasa
+          stream = await navigator.mediaDevices.getUserMedia({
+            video: {
+              width: { min: 320, ideal: 640, max: 1280 },
+              height: { min: 240, ideal: 480, max: 720 },
+              aspectRatio: { ideal: 4/3 },
+              facingMode: { ideal: 'environment' }
+            }
+          });
+        }
+      } else {
+        // Jika tidak bisa mendapatkan deviceId, gunakan facingMode
+        const constraints = {
+          video: {
+            width: { min: 320, ideal: 640, max: 1280 },
+            height: { min: 240, ideal: 480, max: 720 },
+            aspectRatio: { ideal: 4/3 },
+            facingMode: { ideal: 'environment' } // Kamera belakang
+          }
+        };
+        
+        try {
+          stream = await navigator.mediaDevices.getUserMedia(constraints);
+        } catch (err) {
+          console.log('Kamera belakang tidak tersedia, mencoba kamera depan...');
+          
+          // Fallback ke kamera depan
+          const frontCameraConstraints = {
+            video: {
+              width: { min: 320, ideal: 640, max: 1280 },
+              height: { min: 240, ideal: 480, max: 720 },
+              aspectRatio: { ideal: 4/3 },
+              facingMode: { ideal: 'user' } // Kamera depan
+            }
+          };
+          
+          try {
+            stream = await navigator.mediaDevices.getUserMedia(frontCameraConstraints);
+          } catch (frontErr) {
+            // Jika kamera depan juga gagal, coba tanpa constraint facingMode
+            const fallbackConstraints = {
+              video: {
+                width: { min: 320, ideal: 640, max: 1280 },
+                height: { min: 240, ideal: 480, max: 720 },
+                aspectRatio: { ideal: 4/3 }
+              }
+            };
+            
+            stream = await navigator.mediaDevices.getUserMedia(fallbackConstraints);
+          }
+        }
+      }
       
       video.srcObject = stream;
       streams[videoId] = stream;
@@ -649,13 +852,48 @@
       // Tunggu video siap
       video.onloadedmetadata = function() {
         video.play();
+        
+        // Tampilkan informasi kamera yang digunakan
+        const cameraInfo = document.createElement('div');
+        cameraInfo.className = 'camera-info';
+        cameraInfo.innerHTML = `
+          <small class="text-success">
+            <i class="fas fa-camera"></i> Kamera aktif - ${backCameraId ? 'Kamera belakang' : 'Kamera default'}
+          </small>
+        `;
+        
+        // Hapus info kamera sebelumnya jika ada
+        const existingInfo = video.parentElement.querySelector('.camera-info');
+        if (existingInfo) {
+          existingInfo.remove();
+        }
+        
+        video.parentElement.appendChild(cameraInfo);
       };
       
       video.onerror = function(e) {
         console.error('Error pada video:', e);
-        alert('Error pada video stream');
+        Swal.fire({
+          icon: 'error',
+          title: 'Error Video',
+          text: 'Error pada video stream',
+          confirmButtonText: 'OK'
+        });
       };
       
+      console.log('Kamera berhasil dibuka untuk:', videoId);
+      
+      // Tampilkan notifikasi sukses
+      Swal.fire({
+        icon: 'success',
+        title: 'Kamera Berhasil Dibuka',
+        text: backCameraId ? 'Menggunakan kamera belakang' : 'Menggunakan kamera default',
+        timer: 2000,
+        showConfirmButton: false,
+        toast: true,
+        position: 'top-end'
+      });
+      
     } catch (err) {
       // Pesan error yang lebih spesifik
       let errorMessage = 'Tidak dapat mengakses kamera. ';
@@ -674,7 +912,12 @@
         errorMessage += 'Error: ' + err.message;
       }
       
-      alert(errorMessage);
+      Swal.fire({
+        icon: 'error',
+        title: 'Error Kamera',
+        text: errorMessage,
+        confirmButtonText: 'OK'
+      });
     }
   }
 
@@ -686,13 +929,23 @@
     const preview = document.getElementById(previewId);
     
     if (!video.srcObject) {
-      alert('Silakan buka kamera terlebih dahulu');
+      Swal.fire({
+        icon: 'warning',
+        title: 'Kamera Belum Dibuka',
+        text: 'Silakan buka kamera terlebih dahulu',
+        confirmButtonText: 'OK'
+      });
       return;
     }
     
     // Pastikan video sudah siap
     if (video.videoWidth === 0 || video.videoHeight === 0) {
-      alert('Video belum siap. Tunggu sebentar dan coba lagi.');
+      Swal.fire({
+        icon: 'warning',
+        title: 'Video Belum Siap',
+        text: 'Video belum siap. Tunggu sebentar dan coba lagi.',
+        confirmButtonText: 'OK'
+      });
       return;
     }
     
@@ -715,36 +968,250 @@
         dataTransfer.items.add(file);
         fileInput.files = dataTransfer.files;
         
-        // Preview
+        // Preview dengan tombol batal dan retake
         const url = URL.createObjectURL(blob);
         preview.innerHTML = `
-          <img src="${url}" style="max-width: 200px; max-height: 150px; border-radius: 8px; border: 3px solid #059669; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
-          <div class="mt-2">
-            <small class="text-success"><i class="fas fa-check"></i> Foto berhasil diambil</small>
-            <br>
-            <small class="text-muted">Ukuran: ${(file.size / 1024).toFixed(1)} KB</small>
+          <div class="photo-preview-container">
+            <img src="${url}" style="max-width: 200px; max-height: 150px; border-radius: 8px; border: 3px solid #059669; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+            <div class="mt-2">
+              <small class="text-success"><i class="fas fa-check"></i> Foto berhasil diambil</small>
+              <br>
+              <small class="text-muted">Ukuran: ${(file.size / 1024).toFixed(1)} KB</small>
+            </div>
+            <div class="mt-2">
+              <button type="button" class="btn btn-warning btn-sm mr-1" onclick="retakePhoto('${videoId}', '${inputId}', '${previewId}')">
+                <i class="fas fa-redo"></i> Ambil Ulang
+              </button>
+              <button type="button" class="btn btn-danger btn-sm" onclick="cancelPhoto('${inputId}', '${previewId}')">
+                <i class="fas fa-times"></i> Batal
+              </button>
+            </div>
           </div>
         `;
+        
+        // Stop kamera setelah mengambil foto
+        stopCamera(videoId);
+        
+        // Tampilkan notifikasi foto berhasil diambil
+        Swal.fire({
+          icon: 'success',
+          title: 'Foto Berhasil Diambil',
+          text: 'Foto berhasil disimpan',
+          timer: 2000,
+          showConfirmButton: false,
+          toast: true,
+          position: 'top-end'
+        });
+        
       }, 'image/jpeg', 0.8);
       
     } catch (err) {
-      alert('Gagal mengambil foto: ' + err.message);
+      Swal.fire({
+        icon: 'error',
+        title: 'Gagal Mengambil Foto',
+        text: 'Gagal mengambil foto: ' + err.message,
+        confirmButtonText: 'OK'
+      });
     }
   }
 
+  // Function to retake photo
+  function retakePhoto(videoId, inputId, previewId) {
+    const fileInput = document.getElementById(inputId);
+    const preview = document.getElementById(previewId);
+    
+    // Clear file input
+    const dataTransfer = new DataTransfer();
+    fileInput.files = dataTransfer.files;
+    
+    // Clear preview
+    preview.innerHTML = '';
+    
+    // Stop any existing camera first
+    stopCamera(videoId);
+    
+    // Start camera again after a short delay
+    setTimeout(() => {
+      startCamera(videoId);
+    }, 100);
+    
+    // Tampilkan notifikasi foto diambil ulang
+    Swal.fire({
+      icon: 'info',
+      title: 'Mengambil Foto Ulang',
+      text: 'Kamera dibuka untuk mengambil foto ulang',
+      timer: 1500,
+      showConfirmButton: false,
+      toast: true,
+      position: 'top-end'
+    });
+  }
+
+  // Function to cancel photo
+  function cancelPhoto(inputId, previewId) {
+    const fileInput = document.getElementById(inputId);
+    const preview = document.getElementById(previewId);
+    
+    // Clear file input
+    const dataTransfer = new DataTransfer();
+    fileInput.files = dataTransfer.files;
+    
+    // Clear preview
+    preview.innerHTML = '';
+    
+    // Tampilkan notifikasi foto dibatalkan
+    Swal.fire({
+      icon: 'info',
+      title: 'Foto Dibatalkan',
+      text: 'Foto berhasil dibatalkan',
+      timer: 1500,
+      showConfirmButton: false,
+      toast: true,
+      position: 'top-end'
+    });
+  }
+
+  // Function to switch between front and back camera
+  async function switchCamera(videoId) {
+    const video = document.getElementById(videoId);
+    
+    if (!streams[videoId]) {
+      Swal.fire({
+        icon: 'warning',
+        title: 'Kamera Belum Dibuka',
+        text: 'Silakan buka kamera terlebih dahulu',
+        confirmButtonText: 'OK'
+      });
+      return;
+    }
+    
+    try {
+      // Stop current stream
+      stopCamera(videoId);
+      
+      // Wait a bit before starting new camera
+      await new Promise(resolve => setTimeout(resolve, 100));
+      
+      // Get current facing mode
+      const currentTracks = streams[videoId] ? streams[videoId].getVideoTracks() : [];
+      let currentFacingMode = 'environment'; // default to back camera
+      
+      if (currentTracks.length > 0) {
+        const settings = currentTracks[0].getSettings();
+        if (settings.facingMode) {
+          currentFacingMode = settings.facingMode;
+        }
+      }
+      
+      // Switch to opposite camera
+      const newFacingMode = currentFacingMode === 'environment' ? 'user' : 'environment';
+      
+      const constraints = {
+        video: {
+          width: { min: 320, ideal: 640, max: 1280 },
+          height: { min: 240, ideal: 480, max: 720 },
+          aspectRatio: { ideal: 4/3 },
+          facingMode: { ideal: newFacingMode }
+        }
+      };
+      
+      const stream = await navigator.mediaDevices.getUserMedia(constraints);
+      
+      video.srcObject = stream;
+      streams[videoId] = stream;
+      
+      // Update camera info
+      video.onloadedmetadata = function() {
+        video.play();
+        
+        const cameraInfo = document.createElement('div');
+        cameraInfo.className = 'camera-info';
+        cameraInfo.innerHTML = `
+          <small class="text-success">
+            <i class="fas fa-camera"></i> Kamera aktif - ${newFacingMode === 'environment' ? 'Kamera belakang' : 'Kamera depan'}
+          </small>
+        `;
+        
+        const existingInfo = video.parentElement.querySelector('.camera-info');
+        if (existingInfo) {
+          existingInfo.remove();
+        }
+        
+        video.parentElement.appendChild(cameraInfo);
+      };
+      
+      console.log('Berhasil beralih ke kamera:', newFacingMode === 'environment' ? 'belakang' : 'depan');
+      
+    } catch (err) {
+      console.error('Gagal beralih kamera:', err);
+      Swal.fire({
+        icon: 'error',
+        title: 'Gagal Beralih Kamera',
+        text: 'Tidak dapat beralih ke kamera lain: ' + err.message,
+        confirmButtonText: 'OK'
+      });
+    }
+  }
+
+  // Function to stop camera
+  function stopCamera(videoId) {
+    const video = document.getElementById(videoId);
+    
+    if (streams[videoId]) {
+      streams[videoId].getTracks().forEach(track => {
+        track.stop();
+        console.log('Track stopped:', track.kind);
+      });
+      delete streams[videoId];
+    }
+    
+    if (video.srcObject) {
+      video.srcObject = null;
+    }
+    
+    // Hapus info kamera
+    const cameraInfo = video.parentElement.querySelector('.camera-info');
+    if (cameraInfo) {
+      cameraInfo.remove();
+    }
+    
+    console.log('Kamera ditutup untuk:', videoId);
+    
+    // Tampilkan notifikasi kamera ditutup
+    Swal.fire({
+      icon: 'info',
+      title: 'Kamera Ditutup',
+      text: 'Kamera berhasil ditutup',
+      timer: 1500,
+      showConfirmButton: false,
+      toast: true,
+      position: 'top-end'
+    });
+  }
+
   // Handle file upload from gallery
   function handleFileUpload(input, inputId, previewId) {
     const file = input.files[0];
     if (!file) return;
     
     if (!file.type.startsWith('image/')) {
-      alert('Pilih file gambar');
+      Swal.fire({
+        icon: 'warning',
+        title: 'File Tidak Valid',
+        text: 'Pilih file gambar',
+        confirmButtonText: 'OK'
+      });
       return;
     }
     
     // Validasi ukuran file (max 2MB)
     if (file.size > 2 * 1024 * 1024) {
-      alert('Ukuran file maksimal 2MB');
+      Swal.fire({
+        icon: 'warning',
+        title: 'Ukuran File Terlalu Besar',
+        text: 'Ukuran file maksimal 2MB',
+        confirmButtonText: 'OK'
+      });
       return;
     }
     
@@ -754,30 +1221,71 @@
     dataTransfer.items.add(file);
     targetInput.files = dataTransfer.files;
     
-    // Preview
+    // Preview dengan tombol batal
     const url = URL.createObjectURL(file);
     const preview = document.getElementById(previewId);
     preview.innerHTML = `
-      <img src="${url}" style="max-width: 200px; max-height: 150px; border-radius: 8px; border: 3px solid #059669; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
-      <div class="mt-2">
-        <small class="text-success"><i class="fas fa-check"></i> Foto berhasil diupload</small>
-        <br>
-        <small class="text-muted">Ukuran: ${(file.size / 1024).toFixed(1)} KB</small>
+      <div class="photo-preview-container">
+        <img src="${url}" style="max-width: 200px; max-height: 150px; border-radius: 8px; border: 3px solid #059669; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+        <div class="mt-2">
+          <small class="text-success"><i class="fas fa-check"></i> Foto berhasil diupload</small>
+          <br>
+          <small class="text-muted">Ukuran: ${(file.size / 1024).toFixed(1)} KB</small>
+        </div>
+        <div class="mt-2">
+          <button type="button" class="btn btn-danger btn-sm" onclick="cancelPhoto('${inputId}', '${previewId}')">
+            <i class="fas fa-times"></i> Batal
+          </button>
+        </div>
       </div>
     `;
+    
+    // Clear the original input
+    input.value = '';
+    
+    // Tampilkan notifikasi foto berhasil diupload
+    Swal.fire({
+      icon: 'success',
+      title: 'Foto Berhasil Diupload',
+      text: 'Foto berhasil disimpan dari galeri',
+      timer: 2000,
+      showConfirmButton: false,
+      toast: true,
+      position: 'top-end'
+    });
   }
 
   // Stop all cameras when page is unloaded
   window.addEventListener('beforeunload', function() {
     Object.values(streams).forEach(stream => {
-      stream.getTracks().forEach(track => track.stop());
+      if (stream && stream.active) {
+        stream.getTracks().forEach(track => {
+          track.stop();
+          console.log('Track stopped on page unload:', track.kind);
+        });
+      }
     });
   });
 
+  // Stop all cameras when page is hidden (mobile browsers)
+  document.addEventListener('visibilitychange', function() {
+    if (document.hidden) {
+      Object.values(streams).forEach(stream => {
+        if (stream && stream.active) {
+          stream.getTracks().forEach(track => {
+            track.stop();
+            console.log('Track stopped on page hidden:', track.kind);
+          });
+        }
+      });
+    }
+  });
+
   // Form validation
   document.getElementById('precheckForm').addEventListener('submit', function(e) {
     const requiredFields = ['kilometer', 'front_image', 'pressure_high'];
     let isValid = true;
+    let errorMessages = [];
     
     requiredFields.forEach(fieldId => {
       const field = document.getElementById(fieldId);
@@ -787,6 +1295,7 @@
         if (!field.files || field.files.length === 0) {
           field.classList.add('is-invalid');
           isValid = false;
+          errorMessages.push('Foto depan kendaraan wajib diisi');
         } else {
           field.classList.remove('is-invalid');
         }
@@ -795,6 +1304,11 @@
         if (!field.value.trim()) {
           field.classList.add('is-invalid');
           isValid = false;
+          if (fieldId === 'kilometer') {
+            errorMessages.push('Kilometer wajib diisi');
+          } else if (fieldId === 'pressure_high') {
+            errorMessages.push('Pressure High wajib diisi');
+          }
         } else {
           field.classList.remove('is-invalid');
         }
@@ -803,7 +1317,31 @@
     
     if (!isValid) {
       e.preventDefault();
-      alert('Mohon lengkapi semua field yang wajib diisi');
+      Swal.fire({
+        icon: 'warning',
+        title: 'Validasi Gagal',
+        html: errorMessages.join('<br>'),
+        confirmButtonText: 'OK'
+      });
+    } else {
+      // Stop all cameras before submitting
+      Object.keys(streams).forEach(videoId => {
+        stopCamera(videoId);
+      });
+    }
+  });
+
+  // Remove error styling when user starts typing
+  document.addEventListener('input', function(e) {
+    if (e.target.classList.contains('is-invalid')) {
+      e.target.classList.remove('is-invalid');
+    }
+  });
+
+  // Remove error styling when user selects a file
+  document.addEventListener('change', function(e) {
+    if (e.target.type === 'file' && e.target.classList.contains('is-invalid')) {
+      e.target.classList.remove('is-invalid');
     }
   });
 </script>