DONE: store mykad image in database

public/js/mykad-reader-customer.js

@@ -338,10 +338,12 @@ let populateDaftarPelangganModal = (data) => {
         photo.src = 'data:' + mime + ';base64,' + data.photo_base64;
         photo_container.classList.remove('d-none');
         photo_container.classList.add('d-flex');
+        setMykadPhotoFields(data.photo_base64, mime);
     } else {
         photo.src = original_photo_loader;
         photo_container.classList.add('d-none');
         photo_container.classList.remove('d-flex');
+        setMykadPhotoFields('', '');
     }
 
     disablePointerEventsOnClickableInputs();
@@ -360,8 +362,38 @@ let hideMykadPhoto = () => {
         photo_container.classList.add('d-none');
         photo_container.classList.remove('d-flex');
     }
+
+    setMykadPhotoFields('', '');
 };
 
+function setMykadPhotoFields(base64, mime) {
+    let form = document.querySelector("#daftar_pelanggan_mykad_reader form")
+        || document.getElementById("form-mykad-reader");
+    let photoInput = (form && form.querySelector("input[name='photo_base64']"))
+        || document.getElementById("photo_base64");
+    let mimeInput = (form && form.querySelector("input[name='photo_mime']"))
+        || document.getElementById("photo_mime");
+
+    if (photoInput) {
+        photoInput.value = base64 || '';
+    }
+
+    if (mimeInput) {
+        mimeInput.value = mime || '';
+    }
+}
+
+function copyMykadPhotoFromImage() {
+    let photo = document.querySelector("#daftar_pelanggan_mykad_reader #photo-mykad");
+    if (!photo || !photo.src || photo.src.indexOf("base64,") === -1) {
+        return;
+    }
+
+    let parts = photo.src.split("base64,");
+    let mimeMatch = photo.src.match(/^data:([^;]+);/);
+    setMykadPhotoFields(parts[1] || "", mimeMatch ? mimeMatch[1] : "image/jpeg");
+}
+
 if (button_read_mykad) {
     button_read_mykad.addEventListener("click", handleMyKadReader);
 }