From db865a453aea8c5a58a87305b921354063677ec9 Mon Sep 17 00:00:00 2001
From: Afiq Hamzah <afiq.hamzah@pkb.net.my>
Date: Mon, 7 Apr 2025 13:30:57 +0800
Subject: [PATCH] Fix online transaction trail data segragations

---
 .../OnlineTransactionTrailController.php      |   5 +-
 resources/views/online/trail/index.blade.php  | 177 +++++++++++++++---
 2 files changed, 156 insertions(+), 26 deletions(-)

diff --git a/app/Http/Controllers/OnlineTransactionTrailController.php b/app/Http/Controllers/OnlineTransactionTrailController.php
index e902efe..31d461e 100644
--- a/app/Http/Controllers/OnlineTransactionTrailController.php
+++ b/app/Http/Controllers/OnlineTransactionTrailController.php
@@ -51,13 +51,10 @@ class OnlineTransactionTrailController extends Controller
             
         $transactionTrailKOOP = Http::arrahn_koop()->get('/api/transaction/online/trail', $queries)->json();
         
-        $transactionTrail = array_merge_recursive($transactionTrailPKB, $transactionTrailKOOP);
-            
         $branchesKOOP = Http::arrahn_koop()->get('/api/cawangan')->json();
         $branchesPKB = Http::arrahn()->get('/api/cawangan')->json();
         $branches = array_merge($branchesKOOP, $branchesPKB);
         
-        
-        return view('online.trail.index', compact('transactionTrail', 'startDate', 'endDate', 'norujukan', 'selectedStatus', 'statuses', 'billplzBillId', 'branches', 'selectedBranch'));
+        return view('online.trail.index', compact('transactionTrailPKB', 'transactionTrailKOOP', 'startDate', 'endDate', 'norujukan', 'selectedStatus', 'statuses', 'billplzBillId', 'branches', 'selectedBranch'));
     }
 }
diff --git a/resources/views/online/trail/index.blade.php b/resources/views/online/trail/index.blade.php
index cb8f2e4..300f718 100644
--- a/resources/views/online/trail/index.blade.php
+++ b/resources/views/online/trail/index.blade.php
@@ -40,38 +40,48 @@
     </div>
 
 
+<div class="container mx-auto">
+  <div class="flex border-b-4 border-yellow-500">
+  	<button class="flex items-center tab-button outer-tab-button active" data-tab="pkb-transactions-summary">
+  	    <span>PKB (v2)</span>
+  	</button>
+  	<button class="flex items-center tab-button outer-tab-button" data-tab="kopkb-transactions-summary">
+  	    <span>KOPKB (v3)</span>
+  	</button>
+  </div>
     @php
         $isGroupedByNorujukan = request()->groupedByNorujukan === 'on' ? true : false;
     @endphp
-    <div class="container mx-auto p-4 bg-yellow-50">
+    <div>
+    <div id="pkb-transactions-summary" class="p-4 bg-yellow-50 tab-content outer-tab-content active">
         <div class="flex border-b border-gray-200 mb-4">
-            <button class="tab-button active flex items-center" data-tab="transactions-online">
+            <button class="tab-button inner-tab-button active flex items-center" data-tab="transactions-online">
                 <span>Table transaction_online</span>
                 @php
                     $flattenArray = fn($x) => is_array($x) ? array_merge(...array_values($x)) : [$x];
                     
-                    $transactionOnlineNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrail['transactionsOnline'])) : sizeOf($transactionTrail['transactionsOnline']);
+                    $transactionOnlineNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrailPKB['transactionsOnline'])) : sizeOf($transactionTrailPKB['transactionsOnline']);
                 @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">{{ $transactionOnlineNumbers }}</span>
             </button>
-            <button class="tab-button flex items-center" data-tab="transactions">
+            <button class="tab-button inner-tab-button flex items-center" data-tab="transactions">
                 <span>Table transaction</span>
                 @php
-                    $transactionNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrail['transaction'])) : sizeOf($transactionTrail['transaction']);
+                    $transactionNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrailPKB['transaction'])) : sizeOf($transactionTrailPKB['transaction']);
                 @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">{{ $transactionNumbers }}</span>
             </button>
-            <button class="tab-button flex items-center" data-tab="transaksi-keuntungan">
+            <button class="tab-button inner-tab-button flex items-center" data-tab="transaksi-keuntungan">
                 <span>Table transaksi_keuntungan</span>
                 @php
-                    $transaksiKeuntunganNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrail['transaksiKeuntungan'])) : sizeOf($transactionTrail['transaksiKeuntungan']);
+                    $transaksiKeuntunganNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrailPKB['transaksiKeuntungan'])) : sizeOf($transactionTrailPKB['transaksiKeuntungan']);
                 @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">{{ $transaksiKeuntunganNumbers }}</span>
             </button>
-            <button class="tab-button flex items-center" data-tab="gldetail">
+            <button class="tab-button inner-tab-button flex items-center" data-tab="gldetail">
                 <span>Table gldetail</span>
                 @php
-                    $glDetailNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrail['glDetail'])) : sizeOf($transactionTrail['glDetail']);
+                    $glDetailNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrailPKB['glDetail'])) : sizeOf($transactionTrailPKB['glDetail']);
                 @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>
@@ -90,7 +100,7 @@
                 
             @endphp
             @if($diffCount !== 0)
-                <button class="tab-button tab-button-diff flex text-white items-center" data-tab="diff">
+                <button class="tab-button inner-tab-button tab-button-diff flex text-white items-center" data-tab="diff">
                     <span>Diff</span>
                 </button>
             @endif
@@ -99,45 +109,140 @@
         @php
             $pageVariation = $isGroupedByNorujukan ? 'grouped-by-norujukan' : '';
         @endphp
-        <div id="transactions-online" class="tab-content active">
+        <div id="transactions-online" class="tab-content inner-tab-content active">
             <div class="relative overflow-hidden">
                 <div class="overflow-x-scroll scroll-content">
-                    @include("online.trail.partials.{$pageVariation}.table-transactions-online")
+                    @include("online.trail.pkb.partials.{$pageVariation}.table-transactions-online")
                 </div>
             </div>
         </div>
-        <div id="transactions" class="tab-content hidden">
+        <div id="transactions" class="tab-content inner-tab-content hidden">
             <div class="relative overflow-hidden">
                 <div class="overflow-x-scroll scroll-content">
-                    @include("online.trail.partials.{$pageVariation}.table-transactions")
+                    @include("online.trail.pkb.partials.{$pageVariation}.table-transactions")
                 </div>
             </div>
         </div>
-        <div id="transaksi-keuntungan" class="tab-content hidden">
+        <div id="transaksi-keuntungan" class="tab-content inner-tab-content hidden">
             <div class="relative overflow-hidden">
                 <div class="overflow-x-scroll scroll-content">
-                    @include("online.trail.partials.{$pageVariation}.table-transaksi-keuntungan")
+                    @include("online.trail.pkb.partials.{$pageVariation}.table-transaksi-keuntungan")
                 </div>
             </div>
         </div>
-        <div id="gldetail" class="tab-content hidden">
+        <div id="gldetail" class="tab-content inner-tab-content hidden">
             <div class="relative overflow-hidden">
                 <div class="overflow-x-scroll scroll-content">
-                    @include("online.trail.partials.{$pageVariation}.table-gldetail")
+                    @include("online.trail.pkb.partials.{$pageVariation}.table-gldetail")
                 </div>
             </div>
         </div>
-        <div id="diff" class="tab-content hidden">
+        <div id="diff" class="tab-content inner-tab-content hidden">
             <div class="relative overflow-hidden">
                 <div class="overflow-x-scroll scroll-content">
-                    @include("online.trail.partials.table-diff")
+                    @include("online.trail.pkb.partials.table-diff")
                 </div>
             </div>
         </div>
     </div>
+    <div id="kopkb-transactions-summary" class="p-4 bg-yellow-50 tab-content outer-tab-content">
+        <div class="flex border-b border-gray-200 mb-4">
+            <button class="tab-button inner-tab-button flex items-center" data-tab="transactions-online-kopkb">
+                <span>Table transaction_online</span>
+                @php
+                    $flattenArray = fn($x) => is_array($x) ? array_merge(...array_values($x)) : [$x];
+                    
+                    $transactionOnlineNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrailKOOP['transactionsOnline'])) : sizeOf($transactionTrailKOOP['transactionsOnline']);
+                @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">{{ $transactionOnlineNumbers }}</span>
+            </button>
+            <button class="tab-button inner-tab-button flex items-center" data-tab="transactions-kopkb">
+                <span>Table transaction</span>
+                @php
+                    $transactionNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrailKOOP['transaction'])) : sizeOf($transactionTrailKOOP['transaction']);
+                @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">{{ $transactionNumbers }}</span>
+            </button>
+            <button class="tab-button inner-tab-button flex items-center" data-tab="transaksi-keuntungan-kopkb">
+                <span>Table transaksi_keuntungan</span>
+                @php
+                    $transaksiKeuntunganNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrailKOOP['transaksiKeuntungan'])) : sizeOf($transactionTrailKOOP['transaksiKeuntungan']);
+                @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">{{ $transaksiKeuntunganNumbers }}</span>
+            </button>
+            <button class="tab-button inner-tab-button flex items-center" data-tab="gldetail-kopkb">
+                <span>Table gldetail</span>
+                @php
+                    $glDetailNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrailKOOP['glDetail'])) : sizeOf($transactionTrailKOOP['glDetail']);
+                @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 inner-tab-button tab-button-diff flex text-white items-center" data-tab="diff-kopkb">
+                    <span>Diff</span>
+                </button>
+            @endif
+        </div>
+
+        @php
+            $pageVariation = $isGroupedByNorujukan ? 'grouped-by-norujukan' : '';
+        @endphp
+        <div id="transactions-online-kopkb" class="tab-content inner-tab-content">
+            <div class="relative overflow-hidden">
+                <div class="overflow-x-scroll scroll-content">
+                    @include("online.trail.kopkb.partials.{$pageVariation}.table-transactions-online")
+                </div>
+            </div>
+        </div>
+        <div id="transactions-kopkb" class="tab-content inner-tab-content hidden">
+            <div class="relative overflow-hidden">
+                <div class="overflow-x-scroll scroll-content">
+                    @include("online.trail.kopkb.partials.{$pageVariation}.table-transactions")
+                </div>
+            </div>
+        </div>
+        <div id="transaksi-keuntungan-kopkb" class="tab-content inner-tab-content hidden">
+            <div class="relative overflow-hidden">
+                <div class="overflow-x-scroll scroll-content">
+                    @include("online.trail.kopkb.partials.{$pageVariation}.table-transaksi-keuntungan")
+                </div>
+            </div>
+        </div>
+        <div id="gldetail-kopkb" class="tab-content inner-tab-content hidden">
+            <div class="relative overflow-hidden">
+                <div class="overflow-x-scroll scroll-content">
+                    @include("online.trail.kopkb.partials.{$pageVariation}.table-gldetail")
+                </div>
+            </div>
+        </div>
+        <div id="diff-kopkb" class="tab-content inner-tab-content hidden">
+            <div class="relative overflow-hidden">
+                <div class="overflow-x-scroll scroll-content">
+                    @include("online.trail.kopkb.partials.table-diff")
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
 @endsection
 
 @push('additional_scripts')
+
     <script>
         (function() {
             setTimeout(function() {
@@ -148,9 +253,37 @@
             }, 3000);
         })();
 
+	document.addEventListener('DOMContentLoaded', function() {
+            const tabButtons = document.querySelectorAll('.tab-button.outer-tab-button');
+            const tabContents = document.querySelectorAll('.tab-content.outer-tab-content');
+
+            tabButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    const tabId = button.getAttribute('data-tab');
+
+		    const activatedContent = document.querySelector('#' + tabId);
+		    const innerTabFirst = activatedContent.querySelector('.inner-tab-button');
+		    const innerTabAll = activatedContent.querySelectorAll('.inner-tab-button');
+		    const innerTabContent = activatedContent.querySelector('.inner-tab-content');
+
+		    innerTabAll.forEach(x => x.classList.remove('active'));
+		    innerTabFirst.classList.add('active');
+		    innerTabContent.classList.add('active');
+
+                    // Deactivate all tabs
+                    tabButtons.forEach(btn => btn.classList.remove('active'));
+                    tabContents.forEach(content => content.classList.remove('active'));
+
+                    // Activate the clicked tab
+                    button.classList.add('active');
+                    document.getElementById(tabId).classList.add('active');
+                });
+            });
+        });
+
         document.addEventListener('DOMContentLoaded', function() {
-            const tabButtons = document.querySelectorAll('.tab-button');
-            const tabContents = document.querySelectorAll('.tab-content');
+            const tabButtons = document.querySelectorAll('.tab-button.inner-tab-button');
+            const tabContents = document.querySelectorAll('.tab-content.inner-tab-content');
 
             tabButtons.forEach(button => {
                 button.addEventListener('click', () => {