From 5343c424b1a17594d7929b8346b99d35f7f64747 Mon Sep 17 00:00:00 2001
From: Daeng Deni Mardaeni <ddeni05@gmail.com>
Date: Thu, 31 Oct 2024 10:03:19 +0700
Subject: [PATCH] Add PDF preview feature in detail-jaminan component

Introduced a "Preview" button that allows users to view PDF documents directly within the application. Added a modal for PDF viewing and included scripts to handle PDF embedding and modal visibility.
---
 .../views/component/detail-jaminan.blade.php  | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/resources/views/component/detail-jaminan.blade.php b/resources/views/component/detail-jaminan.blade.php
index b710872..66005fb 100644
--- a/resources/views/component/detail-jaminan.blade.php
+++ b/resources/views/component/detail-jaminan.blade.php
@@ -74,8 +74,8 @@
                                     </td>
                                     <td class="py-3 text-gray-700 text-2sm font-normal">
                                         @if(isset($detail->dokumen_jaminan))
-                                            <a href="{{ route('debitur.jaminan.download',['id'=>$permohonan->debiture->id,'dokumen'=>$detail->id]) }}" class="badge badge-sm badge-outline mt-2">{{ basename($detail->dokumen_jaminan) }}
-                                                <i class="ki-filled ki-cloud-download"></i></a>
+                                            <a href="{{ route('debitur.jaminan.download',['id'=>$permohonan->debiture->id,'dokumen'=>$detail->id]) }}" class="badge badge-sm badge-outline mt-2 badge-info"><i class="ki-filled ki-cloud-download mr-2"></i> Download</a>
+                                            <span class="badge badge-sm badge-outline badge-warning mt-2" onclick="viewPDF('{{ Storage::url($detail->dokumen_jaminan) }}')"><i class="ki-filled ki-eye mr-2"></i>Preview</span>
                                         @endif
                                     </td>
                                 </tr>
@@ -95,3 +95,29 @@
         @endforeach
     </div>
 </div>
+
+<!-- Modal for PDF viewing -->
+<div id="pdfModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center hidden w-full">
+    <div class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all min-w-3xl w-[1500px] h-[1200px]">
+        <div class="p-4 h-full">
+            <button onclick="closePDFModal()" class="float-right text-2xl">
+                <i class="ki-filled ki-cross-square text-red-600"></i>
+            </button>
+            <div id="pdfViewer" class="h-full"></div>
+        </div>
+    </div>
+</div>
+
+@push('scripts')
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.3.0/pdfobject.min.js"></script>
+    <script>
+        function viewPDF(url) {
+            PDFObject.embed(url, "#pdfViewer");
+            document.getElementById('pdfModal').classList.remove('hidden');
+        }
+
+        function closePDFModal() {
+            document.getElementById('pdfModal').classList.add('hidden');
+        }
+    </script>
+@endpush