From 585d6d3a5d01617326cebea4b2d99612b6c31ec1 Mon Sep 17 00:00:00 2001
From: Afiq Hamzah <afiq.hamzah@pkb.net.my>
Date: Mon, 7 Oct 2024 15:13:31 +0800
Subject: [PATCH] Enhance online trail diff page

---
 resources/views/online/trail/index.blade.php  |  2 +-
 .../trail/partials/table-diff.blade.php       | 60 +++++++++++++++++--
 2 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/resources/views/online/trail/index.blade.php b/resources/views/online/trail/index.blade.php
index 90b69e4..cb8f2e4 100644
--- a/resources/views/online/trail/index.blade.php
+++ b/resources/views/online/trail/index.blade.php
@@ -249,7 +249,7 @@
         }
         
         .tab-button-diff.active {
-            background-color: #dc2626;
+            background-color: #f87171;
         }
 
         .tab-content {
diff --git a/resources/views/online/trail/partials/table-diff.blade.php b/resources/views/online/trail/partials/table-diff.blade.php
index 173eb7d..9cddf85 100644
--- a/resources/views/online/trail/partials/table-diff.blade.php
+++ b/resources/views/online/trail/partials/table-diff.blade.php
@@ -20,16 +20,64 @@
                     
                 @endphp
                 
-                 @if($diffCount !== 0)
-                    <h1>Diff table transaction</h1>
-                    @dump(array_diff($norujukan_table_transaction_online, $norujukan_table_transaction))
+                @if($diffCount !== 0)
+                    <div class="mt-6 mb-4">
+                        <h2 class="text-xl font-semibold text-gray-800 mb-4">Diff table transaction</h2>
+                        @php
+                            $diff_norujukan_1 = array_diff($norujukan_table_transaction_online, $norujukan_table_transaction);
+                            $diff_norujukan_2 = array_diff($norujukan_table_transaction_online, $norujukan_table_transaksiKeuntungan);
+                        @endphp
+                        
+                        <ul class="list-disc list-inside space-y-2 text-gray-600">
+                            @forelse($diff_norujukan_1 as $norujukan)
+                                <li class="flex items-center">
+                                    <span class="norujukan text-red-500"> - {{ $norujukan }}</span>
+                                    <a class="p-1 rounded-md text-black-400 whitespace-no-wrap cursor-pointer hover:bg-green-600 hover:text-white transition-all duration-300 search-sag-button ml-2">
+                                        <span class="fas fa-magnifying-glass"></span>
+                                    </a>
+                                </li>
+                            @empty
+                                <li class="text-gray-500 italic">No records</li>
+                            @endforelse
+                        </ul>
+                    </div>
                     
-                    <h1>Diff table transaksi_keuntungan</h1>
-                    @dump(array_diff($norujukan_table_transaction_online, $norujukan_table_transaksiKeuntungan))
-                 @endif
+                    <div class="mt-6 mb-4">
+                        <h2 class="text-xl font-semibold text-gray-800 mb-4">Diff table transaksi_keuntungan</h2>
+                        <ul class="list-disc list-inside space-y-2 text-gray-600">
+                            @forelse($diff_norujukan_2 as $norujukan)
+                                <li class="flex items-center">
+                                    <span class="norujukan text-red-500"> - {{ $norujukan }}</span>
+                                    <a class="p-1 rounded-md text-black-400 whitespace-no-wrap cursor-pointer hover:bg-green-600 hover:text-white transition-all duration-300 search-sag-button ml-2">
+                                        <span class="fas fa-magnifying-glass"></span>
+                                    </a>
+                                </li>
+                            @empty
+                                 - <span class="text-gray-500 italic">No records</span>
+                            @endforelse
+                        </ul>
+                    </div>
+                @endif
                  
                 <p class="text-gray-900 whitespace-no-wrap"></p>
             </div>
         </div>
     </div>
 </div>
+
+@push('additional_scripts')
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        document.querySelectorAll('.search-sag-button').forEach(x => x.addEventListener('click', function(event){
+            document.getElementById('reset-button').dispatchEvent(new Event('click'));
+            let norujukan = event.target.parentNode.parentNode.querySelector('.norujukan').innerHTML.trim();
+            alert('search norujukan : '+norujukan);
+            document.getElementById('norujukan').value = norujukan; 
+            window.scrollTo(0, 0);
+            document.getElementById('filterOnlineTransactionForm').submit();
+            event.stopPropagation();
+        }));
+    });
+</script>
+</script>
+@endpush