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.

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) }}
+                                            <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>
-                                                <i class="ki-filled ki-cloud-download"></i></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