added spinner on form create/edit

resources/views/backend/pages/forms/entertainment/create.blade.php

@@ -26,7 +26,7 @@
         <div class="container-fluid">
             <div class="card card-primary card-outline">
                 <div class="card-body">
-					<form method="POST" action="{{ route('forms.entertainment.store') }}" enctype="multipart/form-data">
+					<form id="expense-form" method="POST" action="{{ route('forms.entertainment.store') }}" enctype="multipart/form-data">
                         @csrf
                         @include('backend.layouts.partials.messages')
                         <div class="row">
@@ -76,6 +76,14 @@
                             <button type="submit" class="btn btn-primary ml-2">Submit</button>
                         </div>
 					</form>
+
+                    <div id="loading-spinner-overlay" class="d-none">
+                        <div class="spinner-wrapper">
+                            <div class="spinner-border text-primary" role="status">
+                            </div>
+                            <p>Submitting, please wait...</p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -89,5 +97,11 @@
             decimalPlaces: 0,         // Tidak ada angka desimal
             unformatOnSubmit: true    // Nilai asli tanpa format saat dikirimkan
         });
+
+        document.getElementById('expense-form').addEventListener('submit', function (e) {
+            const spinnerOverlay = document.getElementById('loading-spinner-overlay');
+            spinnerOverlay.classList.remove('d-none'); // Show overlay
+            spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
+        });
     </script>
 @endsection

resources/views/backend/pages/forms/entertainment/edit.blade.php

@@ -26,7 +26,7 @@
         <div class="container-fluid">
             <div class="card card-primary card-outline">
                 <div class="card-body">
-					<form method="POST" action="{{ route('forms.entertainment.update', $form->id) }}" enctype="multipart/form-data">
+					<form id="expense-form" method="POST" action="{{ route('forms.entertainment.update', $form->id) }}" enctype="multipart/form-data">
                         @csrf
                         @method('PUT')
                         @include('backend.layouts.partials.messages')
@@ -77,6 +77,14 @@
                             <button type="submit" class="btn btn-primary ml-2">Update</button>
                         </div>
 					</form>
+
+                    <div id="loading-spinner-overlay" class="d-none">
+                        <div class="spinner-wrapper">
+                            <div class="spinner-border text-primary" role="status">
+                            </div>
+                            <p>Submitting, please wait...</p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -90,5 +98,11 @@
             decimalPlaces: 0,         // Tidak ada angka desimal
             unformatOnSubmit: true    // Nilai asli tanpa format saat dikirimkan
         });
+
+        document.getElementById('expense-form').addEventListener('submit', function (e) {
+            const spinnerOverlay = document.getElementById('loading-spinner-overlay');
+            spinnerOverlay.classList.remove('d-none'); // Show overlay
+            spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
+        });
     </script>
 @endsection

resources/views/backend/pages/forms/meeting/create.blade.php

@@ -22,11 +22,30 @@
             </div>
         </div>
     </section>
+    <style>
+        #loading-spinner-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
+            z-index: 9999; /* High z-index to cover everything */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .spinner-wrapper {
+            text-align: center;
+            color: white;
+        }
+    </style>
     <section class="content">
         <div class="container-fluid">
             <div class="card card-primary card-outline">
                 <div class="card-body">
-					<form method="POST" action="{{ route('forms.meeting.store') }}" enctype="multipart/form-data">
+					<form id="expense-form" method="POST" action="{{ route('forms.meeting.store') }}" enctype="multipart/form-data">
                         @csrf
                         @include('backend.layouts.partials.messages')
                         <div class="row">
@@ -63,6 +82,14 @@
                             <button type="submit" class="btn btn-primary ml-2">Submit</button>
                         </div>
 					</form>
+
+                    <div id="loading-spinner-overlay" class="d-none">
+                        <div class="spinner-wrapper">
+                            <div class="spinner-border text-primary" role="status">
+                            </div>
+                            <p>Submitting, please wait...</p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -92,5 +119,11 @@
             decimalPlaces: 0,         // Tidak ada angka desimal
             unformatOnSubmit: true    // Nilai asli tanpa format saat dikirimkan
         });
+
+        document.getElementById('expense-form').addEventListener('submit', function (e) {
+            const spinnerOverlay = document.getElementById('loading-spinner-overlay');
+            spinnerOverlay.classList.remove('d-none'); // Show overlay
+            spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
+        });
     </script>
 @endsection

resources/views/backend/pages/forms/meeting/edit.blade.php

@@ -22,11 +22,30 @@
             </div>
         </div>
     </section>
+    <style>
+        #loading-spinner-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
+            z-index: 9999; /* High z-index to cover everything */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .spinner-wrapper {
+            text-align: center;
+            color: white;
+        }
+    </style>
     <section class="content">
         <div class="container-fluid">
             <div class="card card-primary card-outline">
                 <div class="card-body">
-					<form method="POST" action="{{ route('forms.meeting.update', $form->id) }}" enctype="multipart/form-data">
+					<form id="expense-form" method="POST" action="{{ route('forms.meeting.update', $form->id) }}" enctype="multipart/form-data">
                         @csrf
                         @method('PUT')
                         @include('backend.layouts.partials.messages')
@@ -64,6 +83,14 @@
                             <button type="submit" class="btn btn-primary ml-2">Update</button>
                         </div>
 					</form>
+
+                    <div id="loading-spinner-overlay" class="d-none">
+                        <div class="spinner-wrapper">
+                            <div class="spinner-border text-primary" role="status">
+                            </div>
+                            <p>Submitting, please wait...</p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -93,5 +120,11 @@
             decimalPlaces: 0,         // Tidak ada angka desimal
             unformatOnSubmit: true    // Nilai asli tanpa format saat dikirimkan
         });
+
+        document.getElementById('expense-form').addEventListener('submit', function (e) {
+            const spinnerOverlay = document.getElementById('loading-spinner-overlay');
+            spinnerOverlay.classList.remove('d-none'); // Show overlay
+            spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
+        });
     </script>
 @endsection

resources/views/backend/pages/forms/other/create.blade.php

@@ -22,11 +22,30 @@
             </div>
         </div>
     </section>
+    <style>
+        #loading-spinner-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
+            z-index: 9999; /* High z-index to cover everything */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .spinner-wrapper {
+            text-align: center;
+            color: white;
+        }
+    </style>
     <section class="content">
         <div class="container-fluid">
             <div class="card card-primary card-outline">
                 <div class="card-body">
-					<form method="POST" action="{{ route('forms.other.store') }}" enctype="multipart/form-data">
+					<form id="expense-form" method="POST" action="{{ route('forms.other.store') }}" enctype="multipart/form-data">
                         @csrf
                         @include('backend.layouts.partials.messages')
                         <div class="row">
@@ -66,6 +85,14 @@
                             <button type="submit" class="btn btn-primary ml-2">Submit</button>
                         </div>
 					</form>
+
+                    <div id="loading-spinner-overlay" class="d-none">
+                        <div class="spinner-wrapper">
+                            <div class="spinner-border text-primary" role="status">
+                            </div>
+                            <p>Submitting, please wait...</p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -79,5 +106,11 @@
             decimalPlaces: 0,         // Tidak ada angka desimal
             unformatOnSubmit: true    // Nilai asli tanpa format saat dikirimkan
         });
+
+        document.getElementById('expense-form').addEventListener('submit', function (e) {
+            const spinnerOverlay = document.getElementById('loading-spinner-overlay');
+            spinnerOverlay.classList.remove('d-none'); // Show overlay
+            spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
+        });
     </script>
 @endsection

resources/views/backend/pages/forms/other/edit.blade.php

@@ -22,11 +22,30 @@
             </div>
         </div>
     </section>
+    <style>
+        #loading-spinner-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
+            z-index: 9999; /* High z-index to cover everything */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .spinner-wrapper {
+            text-align: center;
+            color: white;
+        }
+    </style>
     <section class="content">
         <div class="container-fluid">
             <div class="card card-primary card-outline">
                 <div class="card-body">
-					<form method="POST" action="{{ route('forms.other.update', $form->id) }}" enctype="multipart/form-data">
+					<form id="expense-form" method="POST" action="{{ route('forms.other.update', $form->id) }}" enctype="multipart/form-data">
                         @csrf
                         @method('PUT')
                         @include('backend.layouts.partials.messages')
@@ -67,6 +86,14 @@
                             <button type="submit" class="btn btn-primary ml-2">Update</button>
                         </div>
 					</form>
+
+                    <div id="loading-spinner-overlay" class="d-none">
+                        <div class="spinner-wrapper">
+                            <div class="spinner-border text-primary" role="status">
+                            </div>
+                            <p>Submitting, please wait...</p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -80,5 +107,11 @@
             decimalPlaces: 0,         // Tidak ada angka desimal
             unformatOnSubmit: true    // Nilai asli tanpa format saat dikirimkan
         });
+        
+        document.getElementById('expense-form').addEventListener('submit', function (e) {
+            const spinnerOverlay = document.getElementById('loading-spinner-overlay');
+            spinnerOverlay.classList.remove('d-none'); // Show overlay
+            spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
+        });
     </script>
 @endsection

resources/views/backend/pages/forms/upcountry/create.blade.php

@@ -21,11 +21,30 @@
             </div>
         </div>
     </section>
+    <style>
+        #loading-spinner-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
+            z-index: 9999; /* High z-index to cover everything */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .spinner-wrapper {
+            text-align: center;
+            color: white;
+        }
+    </style>
     <section class="content">
         <div class="container-fluid">
             <div class="card card-primary card-outline">
                 <div class="card-body">
-					<form method="POST" action="{{ route('forms.up-country.store') }}" enctype="multipart/form-data">
+					<form id="expense-form" method="POST" action="{{ route('forms.up-country.store') }}" enctype="multipart/form-data">
                         @csrf
                         @include('backend.layouts.partials.messages')
                         <div class="row">
@@ -91,6 +110,14 @@
                             <button type="submit" class="btn btn-primary ml-2">Submit</button>
                         </div>
 					</form>
+
+                    <div id="loading-spinner-overlay" class="d-none">
+                        <div class="spinner-wrapper">
+                            <div class="spinner-border text-primary" role="status">
+                            </div>
+                            <p>Submitting, please wait...</p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -128,5 +155,11 @@
             decimalPlaces: 0,         // Tidak ada angka desimal
             unformatOnSubmit: true    // Nilai asli tanpa format saat dikirimkan
         });
+
+        document.getElementById('expense-form').addEventListener('submit', function (e) {
+            const spinnerOverlay = document.getElementById('loading-spinner-overlay');
+            spinnerOverlay.classList.remove('d-none'); // Show overlay
+            spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
+        });
     </script>
 @endsection

resources/views/backend/pages/forms/upcountry/edit.blade.php

@@ -21,11 +21,30 @@
             </div>
         </div>
     </section>
+    <style>
+        #loading-spinner-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
+            z-index: 9999; /* High z-index to cover everything */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .spinner-wrapper {
+            text-align: center;
+            color: white;
+        }
+    </style>
     <section class="content">
         <div class="container-fluid">
             <div class="card card-primary card-outline">
                 <div class="card-body">
-					<form method="POST" action="{{ route('forms.up-country.update', $form->id) }}" enctype="multipart/form-data">
+					<form id="expense-form" method="POST" action="{{ route('forms.up-country.update', $form->id) }}" enctype="multipart/form-data">
                         @csrf
                         @method('PUT')
                         @include('backend.layouts.partials.messages')
@@ -92,6 +111,14 @@
                             <button type="submit" class="btn btn-primary ml-2">Save</button>
                         </div>
 					</form>
+
+                    <div id="loading-spinner-overlay" class="d-none">
+                        <div class="spinner-wrapper">
+                            <div class="spinner-border text-primary" role="status">
+                            </div>
+                            <p>Submitting, please wait...</p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -129,5 +156,11 @@
             decimalPlaces: 0,         // Tidak ada angka desimal
             unformatOnSubmit: true    // Nilai asli tanpa format saat dikirimkan
         });
+
+        document.getElementById('expense-form').addEventListener('submit', function (e) {
+            const spinnerOverlay = document.getElementById('loading-spinner-overlay');
+            spinnerOverlay.classList.remove('d-none'); // Show overlay
+            spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
+        });
     </script>
 @endsection

resources/views/backend/pages/forms/vehicle/create.blade.php

@@ -22,11 +22,30 @@
             </div>
         </div>
     </section>
+    <style>
+        #loading-spinner-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
+            z-index: 9999; /* High z-index to cover everything */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .spinner-wrapper {
+            text-align: center;
+            color: white;
+        }
+    </style>
     <section class="content">
         <div class="container-fluid">
             <div class="card card-primary card-outline">
                 <div class="card-body">
-					<form method="POST" action="{{ route('forms.vehicle.store') }}" enctype="multipart/form-data">
+					<form id="expense-form" method="POST" action="{{ route('forms.vehicle.store') }}" enctype="multipart/form-data">
                         @csrf
                         @include('backend.layouts.partials.messages')
                         <div class="row">
@@ -76,6 +95,14 @@
                             <button type="submit" class="btn btn-primary ml-2">Submit</button>
                         </div>
 					</form>
+
+                    <div id="loading-spinner-overlay" class="d-none">
+                        <div class="spinner-wrapper">
+                            <div class="spinner-border text-primary" role="status">
+                            </div>
+                            <p>Submitting, please wait...</p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -89,5 +116,11 @@
             decimalPlaces: 0,         // Tidak ada angka desimal
             unformatOnSubmit: true    // Nilai asli tanpa format saat dikirimkan
         });
+
+        document.getElementById('expense-form').addEventListener('submit', function (e) {
+            const spinnerOverlay = document.getElementById('loading-spinner-overlay');
+            spinnerOverlay.classList.remove('d-none'); // Show overlay
+            spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
+        });
     </script>
 @endsection

resources/views/backend/pages/forms/vehicle/edit.blade.php

@@ -21,11 +21,30 @@
             </div>
         </div>
     </section>
+    <style>
+        #loading-spinner-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
+            z-index: 9999; /* High z-index to cover everything */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .spinner-wrapper {
+            text-align: center;
+            color: white;
+        }
+    </style>
     <section class="content">
         <div class="container-fluid">
             <div class="card card-primary card-outline">
                 <div class="card-body">
-					<form method="POST" action="{{ route('forms.vehicle.update', $form->id) }}" enctype="multipart/form-data">
+					<form id="expense-form" method="POST" action="{{ route('forms.vehicle.update', $form->id) }}" enctype="multipart/form-data">
                         @csrf
                         @method('PUT')
                         @include('backend.layouts.partials.messages')
@@ -75,6 +94,14 @@
                             <button type="submit" class="btn btn-primary ml-2">Save</button>
                         </div>
 					</form>
+
+                    <div id="loading-spinner-overlay" class="d-none">
+                        <div class="spinner-wrapper">
+                            <div class="spinner-border text-primary" role="status">
+                            </div>
+                            <p>Submitting, please wait...</p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -88,5 +115,11 @@
             decimalPlaces: 0,         // Tidak ada angka desimal
             unformatOnSubmit: true    // Nilai asli tanpa format saat dikirimkan
         });
+
+        document.getElementById('expense-form').addEventListener('submit', function (e) {
+            const spinnerOverlay = document.getElementById('loading-spinner-overlay');
+            spinnerOverlay.classList.remove('d-none'); // Show overlay
+            spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
+        });
     </script>
 @endsection