From 527cde014bca77de109528d7b1a9ab73b214bdcf Mon Sep 17 00:00:00 2001
From: Afiq Hamzah <afiq.hamzah@pkb.net.my>
Date: Tue, 8 Oct 2024 10:08:09 +0800
Subject: [PATCH] Add tooltip to link in transaction log

---
 .../views/components/table/data-link.blade.php | 18 +++++++++++++++---
 .../table-transactions-online.blade.php        |  6 +++---
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/resources/views/components/table/data-link.blade.php b/resources/views/components/table/data-link.blade.php
index afe7178..ebb2f0e 100644
--- a/resources/views/components/table/data-link.blade.php
+++ b/resources/views/components/table/data-link.blade.php
@@ -1,11 +1,17 @@
-@props(['content', 'url', 'searchId' => ''])
+@props(['content', 'url', 'searchId' => '', 'tooltip' => ''])
 
 <div>
     <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" {{ $attributes->merge(['colspan' => '']) }}>
         <div class="flex items-center">
             <div class="ml-5">
-                <a class="text-blue-400 whitespace-no-wrap hover:underline" href="{{ $url }}"
-                    target="_blank">{{ $content }}</a>
+                <a class="text-blue-400 whitespace-no-wrap hover:underline relative" href="{{ $url }}"
+                    target="_blank" x-data="{ tooltip: false }" @mouseenter="tooltip = true" @mouseleave="tooltip = false">
+                    {{ $content }}
+                    <div x-cloak x-show="tooltip" class="absolute bg-gray-800 text-white text-xs rounded py-1 px-2 bottom-full left-1/2 transform -translate-x-1/2 mb-2">
+                        {{ $tooltip }}
+                        <svg class="absolute text-gray-800 h-2 w-full left-0 top-full" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve"><polygon class="fill-current" points="0,0 127.5,127.5 255,0"/></svg>
+                    </div>
+                </a>
 
                 @if ($searchId != '')
                     <a class="p-1 rounded-md text-black-400 whitespace-no-wrap cursor-pointer {{ $searchId }} hover:bg-green-600 hover:text-white transition-all duration-300">
@@ -16,3 +22,9 @@
         </div>
     </td>
 </div>
+
+@push('additional_styles')
+    <style>
+        [x-cloak] { display: none !important; }
+    </style>
+@endpush
diff --git a/resources/views/online/trail/partials/table-transactions-online.blade.php b/resources/views/online/trail/partials/table-transactions-online.blade.php
index 050102c..0319755 100644
--- a/resources/views/online/trail/partials/table-transactions-online.blade.php
+++ b/resources/views/online/trail/partials/table-transactions-online.blade.php
@@ -30,9 +30,9 @@
                     <x-table.data-status-orb :content="$data['update_status']" />
                     <x-table.data-status-orb :content="$data['update_serahan']" />
                     <x-table.data :content="$data['status']" />
-                    <x-table.data-link :content="$data['billplz_id']" :url="route('transaction.online.log.show', $data['billplz_id'])" searchId="search_billplz_id" />
-                    <x-table.data-link :content="$data['norujukan']" :url="route('transaction.online.gadaian', $data['norujukan'])" searchId="search_norujukan" />
-                    <x-table.data-link :content="$data['total_payment']" :url="route('transaction.online.billplz-transaction-review.show', $data['billplz_id'])" /> 
+                    <x-table.data-link :content="$data['billplz_id']" :url="route('transaction.online.log.show', $data['billplz_id'])" searchId="search_billplz_id" tooltip="View Log" />
+                    <x-table.data-link :content="$data['norujukan']" :url="route('transaction.online.gadaian', $data['norujukan'])" searchId="search_norujukan" tooltip="View Gadai Detail" />
+                    <x-table.data-link :content="$data['total_payment']" :url="route('transaction.online.billplz-transaction-review.show', $data['billplz_id'])" tooltip="Refer Billplz" /> 
                     <x-table.data :content="$data['paid_at']" />
                     <x-table.data :content="$data['nokp']" />
                     <x-table.data :content="$data['customer_name']" />