DONE: store mykad image in database

app/Http/Controllers/CustomersController.php

@@ -358,7 +358,7 @@ class CustomersController extends Controller
                 ])->json();
         }
 
-        $customer_info = Http::withOptions(['verify' => config('app.api_verify')])->post(config('api.url') . '/api/customers/create/' . $auth_user['cawangan'], [
+        $customer_payload = [
             'kodcaw' => $auth_user['cawangan'],
             'nopelanggan' => $no_pelanggan,
             'nokpbaru' => $nokpbaru,
@@ -385,7 +385,14 @@ class CustomersController extends Controller
             'nota_pekerjaan' => $request->nota_pekerjaan,
             'notaarcc' => $request->notaarcc,
             'tujuangadai' => $request->tujuan_gadai,
-        ]);
+        ];
+
+        if ($request->filled('photo_base64')) {
+            $customer_payload['photo_base64'] = $request->input('photo_base64');
+            $customer_payload['photo_mime'] = $request->input('photo_mime') ?: 'image/jpeg';
+        }
+
+        $customer_info = Http::withOptions(['verify' => config('app.api_verify')])->post(config('api.url') . '/api/customers/create/' . $auth_user['cawangan'], $customer_payload);
 
         Session::put('customer_info', $customer_info);
         Session::put('noic', $request->noic);

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

resources/views/customers/v1/index.blade.php

@@ -210,15 +210,17 @@
             <div class="modal fade" id="daftar_pelanggan_mykad_reader" tabindex="-1" data-backdrop="static"  aria-labelledby="ModalLabel" aria-hidden="true">
                 <div class="modal-dialog modal-lg">
                     <div class="modal-content">
+                        <form id="form-mykad-reader" action="{{ route('customer.store') }}" onsubmit="verifycustomerMyKadReader()" method="POST">
+                                @csrf
                         <div class="modal-header">
                             <h5 class="modal-title" id="ModalLabel">Daftar Pelanggan</h5>
                         </div>
                         <div class="modal-body">
-                            <form action="{{ route('customer.store') }}" onsubmit="verifycustomerMyKadReader()" method="POST">
-                                @csrf
                                 <div class="row form-group">
                                     <div class="col-md-12 d-flex justify-content-center pb-3 d-none" id="photo-mykad-container">
                                         <img src="{{ asset('img/spinner-loader.gif') }}" alt="" id="photo-mykad" width="150" height="200" object-fit="cover">
+                                        <input type="hidden" name="photo_base64" id="photo_base64" value="">
+                                        <input type="hidden" name="photo_mime" id="photo_mime" value="">
                                     </div>
                                     <div class="col-md-6">
                                         <div class="row form-group">
@@ -811,6 +813,8 @@
 
     function verifycustomerMyKadReader(){
 
+        copyMykadPhotoFromImage();
+
         let myKadModal = $('#daftar_pelanggan_mykad_reader');
 
         // Construct URLSearchParams object instance from current URL querystring.
@@ -1277,7 +1281,7 @@
     let wakil_caricustomer_endpoint = "{{ route('wakil.caricustomer') }}";
     let mykad_reader_driver_endpoint = "{{ route('mykadreader.driver') }}";
 </script>
-<script src="{{ asset('js/mykad-reader-customer.js') }}?v=2"></script>
+<script src="{{ asset('js/mykad-reader-customer.js') }}?v=4"></script>
 <script src="{{ asset('js/postcode-concerns.js') }}"></script>
 @endpush
 

resources/views/customers/v1/info.blade.php

@@ -21,6 +21,18 @@
                 </ol>
               </nav>
 
+            @if(!empty($customer_info['photo_base64']))
+                <div class="form-group row col-md-12">
+                    <div class="col-md-12 d-flex justify-content-center pb-3">
+                        <img src="data:{{ $customer_info['photo_mime'] ?? 'image/jpeg' }};base64,{{ $customer_info['photo_base64'] }}"
+                            alt="Gambar MyKad"
+                            width="120"
+                            height="160"
+                            style="object-fit: cover;">
+                    </div>
+                </div>
+            @endif
+
             <div class="form-group row col-md-12">
                 <div class="col-md-6">
                     <div class="form-group row">

resources/views/customers/v2/index.blade.php

@@ -229,15 +229,17 @@
             <div class="modal fade" id="daftar_pelanggan_mykad_reader" tabindex="-1" data-backdrop="static"  aria-labelledby="ModalLabel" aria-hidden="true">
                 <div class="modal-dialog modal-lg">
                     <div class="modal-content">
+                        <form id="form-mykad-reader" action="{{ route('customer.store') }}" onsubmit="verifycustomerMyKadReader()" method="POST">
+                                @csrf
                         <div class="modal-header">
                             <h5 class="modal-title" id="ModalLabel">Daftar Pelanggan</h5>
                         </div>
                         <div class="modal-body">
-                            <form action="{{ route('customer.store') }}" onsubmit="verifycustomerMyKadReader()" method="POST">
-                                @csrf
                                 <div class="row form-group">
                                     <div class="col-md-12 d-flex justify-content-center pb-3 d-none" id="photo-mykad-container">
                                         <img src="{{ asset('img/spinner-loader.gif') }}" alt="" id="photo-mykad" width="150" height="200" object-fit="cover">
+                                        <input type="hidden" name="photo_base64" id="photo_base64" value="">
+                                        <input type="hidden" name="photo_mime" id="photo_mime" value="">
                                     </div>
                                     <div class="col-md-6">
                                         <div class="row form-group">
@@ -890,6 +892,8 @@
 
     function verifycustomerMyKadReader(){
 
+        copyMykadPhotoFromImage();
+
         let myKadModal = $('#daftar_pelanggan_mykad_reader');
 
         // Construct URLSearchParams object instance from current URL querystring.
@@ -1415,7 +1419,7 @@ document.getElementsByName('form-store')[0].addEventListener('keypress', functio
     let wakil_caricustomer_endpoint = "{{ route('wakil.caricustomer') }}";
     let mykad_reader_driver_endpoint = "{{ route('mykadreader.driver') }}";
 </script>
-<script src="{{ asset('js/mykad-reader-customer.js') }}?v=2"></script>
+<script src="{{ asset('js/mykad-reader-customer.js') }}?v=4"></script>
 <script src="{{ asset('js/postcode-concerns.js') }}"></script>
 @endpush
 

resources/views/customers/v2/info.blade.php

@@ -22,6 +22,18 @@
                         </ol>
                     </nav>
 
+                    @if(!empty($customer_info['photo_base64']))
+                        <div class="form-group row col-md-12">
+                            <div class="col-md-12 d-flex justify-content-center pb-3">
+                                <img src="data:{{ $customer_info['photo_mime'] ?? 'image/jpeg' }};base64,{{ $customer_info['photo_base64'] }}"
+                                    alt="Gambar MyKad"
+                                    width="120"
+                                    height="160"
+                                    style="object-fit: cover;">
+                            </div>
+                        </div>
+                    @endif
+
                     <div class="form-group row col-md-12">
                         <div class="col-md-6">
                             <div class="form-group row">