From fa08131cb3eb6efb3ed084b37a1caa7a3dd21539 Mon Sep 17 00:00:00 2001
From: hafifierahman <muhdhafifie97@gmail.com>
Date: Mon, 9 Dec 2024 22:44:37 +0800
Subject: [PATCH] added cartCount in the Trolley

---
 public/js/miscellaneous/navigation-trolley.js | 59 +++++++++++++++++++
 .../views/includes/main/navigation.blade.php  | 27 ++-------
 2 files changed, 63 insertions(+), 23 deletions(-)
 create mode 100644 public/js/miscellaneous/navigation-trolley.js

diff --git a/public/js/miscellaneous/navigation-trolley.js b/public/js/miscellaneous/navigation-trolley.js
new file mode 100644
index 0000000..c4914e7
--- /dev/null
+++ b/public/js/miscellaneous/navigation-trolley.js
@@ -0,0 +1,59 @@
+async function fetchCartCount() {
+    try {
+        // Replace with your API endpoint
+        const response = await fetch('/showcarts-available');
+
+        if (!response.ok) {
+            throw new Error('Failed to fetch cart count');
+        }
+
+        const data = await response.json();
+        console.log(data.status_koop);
+
+        let totalcount = 0;
+        totalcount += (data.status_koop === 'PENDING') ? 1 : 0;
+        totalcount += (data.status_pkb === 'PENDING') ? 1 : 0;
+        // Assuming the API returns a JSON object with a `count` property
+        const cartCount = totalcount || 0;
+
+        updateCartCount(cartCount);
+    } catch (error) {
+        console.error('Error fetching cart count:', error);
+        // Optionally, handle error (e.g., show default value or retry)
+        updateCartCount(0);
+    }
+}
+
+function updateCartCount(itemCount) {
+    const cartCountElement = document.getElementById('cart-count');
+
+    if (itemCount > 0) {
+        cartCountElement.textContent = itemCount; // Show the number of items
+        cartCountElement.classList.remove('d-none'); // Ensure it is visible
+    } else {
+        cartCountElement.textContent = ''; // Clear the content
+        cartCountElement.classList.add('d-none'); // Hide the element if the cart is empty
+    }
+}
+
+function redirectTrolley() {
+    let form = document.createElement('form');
+    form.method = 'POST';
+    form.action = routetrolley;
+
+    let csrfInput = document.createElement('input');
+    csrfInput.type = 'hidden';
+    csrfInput.name = '_token';
+    csrfInput.value = csrftoken;
+    form.appendChild(csrfInput);
+
+    let redirectInput = document.createElement('input');
+    redirectInput.type = 'hidden';
+    redirectInput.name = 'redirect_trolley';
+    redirectInput.value = 'trolley';
+    form.appendChild(redirectInput);
+    document.body.appendChild(form);
+    form.submit();
+}
+
+fetchCartCount();
\ No newline at end of file
diff --git a/resources/views/includes/main/navigation.blade.php b/resources/views/includes/main/navigation.blade.php
index c6609d3..693acf3 100644
--- a/resources/views/includes/main/navigation.blade.php
+++ b/resources/views/includes/main/navigation.blade.php
@@ -61,6 +61,9 @@
         </div>
     </div>
 </div> -->
+<script> let routetrolley = '{{ route("payment.action") }}';let csrftoken = '{{ csrf_token() }}';</script>
+<script src="{{ asset('js/miscellaneous/navigation-trolley.js') }}"></script>
+
 <div class="container position-sticky z-index-sticky top-0">
     <div class="row">
         <div class="col-12">
@@ -111,30 +114,8 @@
                             <li class="nav-item ms-lg-auto">
                                 <a class="nav-link nav-link-icon me-2 cursor-pointer" onclick="redirectTrolley()">
                                     <i class="fa fa-shopping-cart"></i>
-                                    <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Troli">Troli</p>
+                                    <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Troli">Troli <span id="cart-count" class="badge bg-danger ms-1">0</span></p>
                                 </a>
-                                <script>
-                                        function redirectTrolley(){
-                                            let form = document.createElement('form');
-                                            form.method = 'POST';
-                                            form.action = '{{ route("payment.action") }}';
-
-                                            let csrfInput = document.createElement('input');
-                                            csrfInput.type = 'hidden';
-                                            csrfInput.name = '_token';
-                                            csrfInput.value = '{{ csrf_token() }}';
-                                            form.appendChild(csrfInput);
-
-                                            let redirectInput = document.createElement('input');
-                                            redirectInput.type = 'hidden';
-                                            redirectInput.name = 'redirect_trolley';
-                                            redirectInput.value = 'trolley';
-                                            form.appendChild(redirectInput);
-                                            document.body.appendChild(form);
-                                            form.submit();
-                                        }
-                                        
-                                </script>
                             </li>
                             <li class="nav-item my-auto ms-3 ms-lg-0">
                                 <a href="{{ route('logout') }}" class="btn btn-sm bg-white border mb-0 me-1 mt-2 mt-md-0" onclick="event.preventDefault();document.getElementById('logout-form').submit();">