From 5a40e9f0e28bfcd1c677bf65678b63c5816a856c Mon Sep 17 00:00:00 2001
From: Afiq Hamzah <afiq.hamzah@pkb.net.my>
Date: Mon, 7 Oct 2024 14:32:56 +0800
Subject: [PATCH] Add loader when opening marhun modals

---
 resources/views/modal/marhun.blade.php | 135 +++++++++++++++++--------
 1 file changed, 92 insertions(+), 43 deletions(-)

diff --git a/resources/views/modal/marhun.blade.php b/resources/views/modal/marhun.blade.php
index e2c6acf..9dfbcef 100644
--- a/resources/views/modal/marhun.blade.php
+++ b/resources/views/modal/marhun.blade.php
@@ -1,5 +1,7 @@
 <link href="{{ asset('css/customportal.css') }}" rel="stylesheet">
 
+<div id="marhunLoader" class="loader" style="display: none;"></div>
+
 <div class="modal animate__animated animate__bounceInDown" id="marhunModal">
     <div class="modal-dialog modal-lg modal-dialog-centered">
         <div class="modal-content">
@@ -167,61 +169,108 @@
     </div>
 </div>
 
+@push('additional_styles')
+<style>
+    .loader {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 9999;
+    }
+
+    .loader::after {
+        content: "";
+        width: 50px;
+        height: 50px;
+        border: 10px solid #dddddd;
+        border-top-color: #009578;
+        border-radius: 50%;
+        animation: loading 1s ease infinite;
+    }
+
+    @keyframes loading {
+        from {
+            transform: rotate(0turn)
+        }
+
+        to {
+            transform: rotate(1turn)
+        }
+    }
+</style>
+@endpush
+
 @push('additional_js_scripts')
 <script>
     const showMarhunDetailModal = async function(event) {
 
         event.preventDefault();
-        
+
+        document.getElementById('marhunLoader').style.display = 'flex';
         const norujukan = event.target.innerHTML;
-        
-        const data = await fetch('/api/pembiayaan-modal-data/' + norujukan).then(x => x.json());
-        
-        const formatter = new Intl.NumberFormat('en-US', {
-            minimumFractionDigits: 2
-        });
 
-        $('#pembiayaan').text('RM' + formatter.format(data.gadaianDetails.pinjaman));
-        $('#bpembiayaan').text('RM' + formatter.format(data.gadaianDetails.bakipjm));
-        $('#nm').text('RM' + formatter.format(data.gadaianDetails.nilaimarhun));
-        $('#berat').text(data.gadaianDetails.berat + 'g');
-        $('#koskeun').text('RM' + formatter.format(data.gadaianDetails.bakiupah));
-        $('#norujukan').text(data.gadaianDetails.norujukan);
-        $('#tempoh').text(data.gadaianDetails.tempoh);
-        $('#namacaw').text(data.gadaianDetails.cawangan_name);
-        $('#pemb').text('RM ' + data.gadaianDetails.pinjaman);
-        $('#bpemb').text('RM ' + data.gadaianDetails.bakipjm);
-        $('#statuslelong').text(data.gadaianDetails.taglel === 1 ? 'Akan Dilelong' : '-');
-        $('#norujukan_modal').val(data.gadaianDetails.norujukan);
-        $('#pinjaman_modal').val(data.gadaianDetails.pinjaman);
-        $('#marhunModal').modal('show');
-        
+        try {
 
-        $('#tablehistorybayaran').DataTable().clear().destroy();
-        let table_bayaran_history = $('#tablehistorybayaran').DataTable();
+            const data = await fetch('/api/pembiayaan-modal-data/' + norujukan).then(x => x.json());
 
-        $('#biasa').DataTable().clear().destroy();
-        let table_marhun = $('#biasa').DataTable();
+            const formatter = new Intl.NumberFormat('en-US', {
+                minimumFractionDigits: 2
+            });
 
-        data.bayaranHistoryDetails.forEach((x, index) => {
-            table_bayaran_history.row.add([
-                index + 1,
-                x.created_at,
-                `RM ${x.duit_masuk}  <a target='_blank' href="${x.resit_ansuran_link}" class='btn btn-info btn-sm'><span class='fas fa-print'></span></a>`,
-            ]).draw(false)
-        });
+            $('#pembiayaan').text('RM' + formatter.format(data.gadaianDetails.pinjaman));
+            $('#bpembiayaan').text('RM' + formatter.format(data.gadaianDetails.bakipjm));
+            $('#nm').text('RM' + formatter.format(data.gadaianDetails.nilaimarhun));
+            $('#berat').text(data.gadaianDetails.berat + 'g');
+            $('#koskeun').text('RM' + formatter.format(data.gadaianDetails.bakiupah));
+            $('#norujukan').text(data.gadaianDetails.norujukan);
+            $('#tempoh').text(data.gadaianDetails.tempoh);
+            $('#namacaw').text(data.gadaianDetails.cawangan_name);
+            $('#pemb').text('RM ' + data.gadaianDetails.pinjaman);
+            $('#bpemb').text('RM ' + data.gadaianDetails.bakipjm);
+            $('#statuslelong').text(data.gadaianDetails.taglel === 1 ? 'Akan Dilelong' : '-');
+            $('#norujukan_modal').val(data.gadaianDetails.norujukan);
+            $('#pinjaman_modal').val(data.gadaianDetails.pinjaman);
+            $('#marhunModal').modal('show');
 
-        data.marhunDetails.forEach((x, index) => {
-            table_marhun.row.add([
-                index + 1,
-                x.marhun,
-                x.berat,
-                x.karat,
-                `RM ${formatter.format(x.n_marhun)}`,
-                x.nota
-            ]).draw(false)
-        });
 
+            $('#tablehistorybayaran').DataTable().clear().destroy();
+            let table_bayaran_history = $('#tablehistorybayaran').DataTable();
+
+            $('#biasa').DataTable().clear().destroy();
+            let table_marhun = $('#biasa').DataTable();
+
+            data.bayaranHistoryDetails.forEach((x, index) => {
+                table_bayaran_history.row.add([
+                    index + 1,
+                    x.created_at,
+                    `RM ${x.duit_masuk}  <a target='_blank' href="${x.resit_ansuran_link}" class='btn btn-info btn-sm'><span class='fas fa-print'></span></a>`,
+                ]).draw(false)
+            });
+
+            data.marhunDetails.forEach((x, index) => {
+                table_marhun.row.add([
+                    index + 1,
+                    x.marhun,
+                    x.berat,
+                    x.karat,
+                    `RM ${formatter.format(x.n_marhun)}`,
+                    x.nota
+                ]).draw(false)
+            });
+
+            document.getElementById('marhunLoader').style.display = 'none';
+
+        } catch (error) {
+            console.error('Error fetching data:', error);
+            // Hide loader in case of error
+            document.getElementById('marhunLoader').style.display = 'none';
+        }
     };
 
     document.addEventListener('DOMContentLoaded', function() {