From 06e45a5eab14a1bd46235fe37fbf47914410838e Mon Sep 17 00:00:00 2001
From: Afiq Hamzah <afiq.hamzah@pkb.net.my>
Date: Mon, 7 Oct 2024 11:21:28 +0800
Subject: [PATCH] Add diff tab for online transaction trail

---
 resources/views/online/trail/index.blade.php | 34 ++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/resources/views/online/trail/index.blade.php b/resources/views/online/trail/index.blade.php
index fd7aa17..90b69e4 100644
--- a/resources/views/online/trail/index.blade.php
+++ b/resources/views/online/trail/index.blade.php
@@ -75,6 +75,25 @@
                 @endphp
                 <span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-yellow-600 rounded-full ml-2">{{ $glDetailNumbers }}</span>
             </button>
+            
+            @php
+                $recordNumbers = [
+                    $transactionOnlineNumbers,
+                    $transactionNumbers,
+                    $transaksiKeuntunganNumbers,
+                    $glDetailNumbers,
+                ];
+                
+                $uniqueRecordNumbers = array_unique($recordNumbers);
+                $diffCount = count($uniqueRecordNumbers) > 1 ? max($uniqueRecordNumbers) - min($uniqueRecordNumbers) : 0;
+                
+                
+            @endphp
+            @if($diffCount !== 0)
+                <button class="tab-button tab-button-diff flex text-white items-center" data-tab="diff">
+                    <span>Diff</span>
+                </button>
+            @endif
         </div>
 
         @php
@@ -108,6 +127,13 @@
                 </div>
             </div>
         </div>
+        <div id="diff" class="tab-content hidden">
+            <div class="relative overflow-hidden">
+                <div class="overflow-x-scroll scroll-content">
+                    @include("online.trail.partials.table-diff")
+                </div>
+            </div>
+        </div>
     </div>
 @endsection
 
@@ -212,11 +238,19 @@
             cursor: pointer;
             transition: background-color 0.3s;
         }
+        
+        .tab-button-diff {
+            background-color: #ef4444;
+        }
 
         .tab-button.active {
             background-color: #ffffff;
             border-bottom: 2px solid #3b82f6;
         }
+        
+        .tab-button-diff.active {
+            background-color: #dc2626;
+        }
 
         .tab-content {
             display: none;