From 2ef55f8df592259fe51025ed074707eda64eb449 Mon Sep 17 00:00:00 2001
From: Daeng Deni Mardaeni <ddeni05@gmail.com>
Date: Thu, 7 Nov 2024 23:11:41 +0700
Subject: [PATCH] **Tambahkan dukungan pratinjau untuk gambar dan file PDF**

Modal pratinjau sekarang mendukung gambar (JPG, JPEG, PNG, GIF) selain PDF.
Refaktor kode untuk menangani berbagai jenis file dan perubahan elemen HTML terkait untuk mendukung fungsi baru.
---
 resources/views/component/pdfviewer.blade.php | 48 +++++++++++--------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/resources/views/component/pdfviewer.blade.php b/resources/views/component/pdfviewer.blade.php
index c862dfa..3a070e3 100644
--- a/resources/views/component/pdfviewer.blade.php
+++ b/resources/views/component/pdfviewer.blade.php
@@ -1,17 +1,17 @@
-<!-- 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 z-50">
+<!-- Modal for PDF and Image viewing -->
+<div id="previewModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center hidden w-full z-50">
     <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 flex flex-col">
             <div class="flex justify-between items-center mb-4">
-                <button id="downloadPdfBtn" class="btn btn-primary btn-sm">
+                <button id="downloadBtn" class="btn btn-primary btn-sm">
                     <i class="ki-duotone ki-cloud-download me-1"><span class="path1"></span><span class="path2"></span></i>
-                    Download PDF
+                    Download File
                 </button>
-                <button onclick="closePDFModal()" class="text-2xl">
+                <button onclick="closePreviewModal()" class="text-2xl">
                     <i class="ki-filled ki-cross-square text-red-600"></i>
                 </button>
             </div>
-            <div id="pdfViewer" class="flex-grow"></div>
+            <div id="previewContent" class="flex-grow"></div>
         </div>
     </div>
 </div>
@@ -19,37 +19,47 @@
 @push('scripts')
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.3.0/pdfobject.min.js"></script>
     <script>
-        let currentPdfUrl = '';
+        let currentFileUrl = '';
 
         function viewPDF(url) {
-            currentPdfUrl = url;
-            PDFObject.embed(url, "#pdfViewer");
-            document.getElementById('pdfModal').classList.remove('hidden');
+            currentFileUrl = url;
+            const fileExtension = url.split('.').pop().toLowerCase();
+            const previewContent = document.getElementById('previewContent');
+
+            if (['pdf'].includes(fileExtension)) {
+                PDFObject.embed(url, "#previewContent");
+            } else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension)) {
+                previewContent.innerHTML = `<img src="${url}" alt="Preview" class="max-w-full max-h-full object-contain">`;
+            } else {
+                previewContent.innerHTML = '<p class="text-center">Unsupported file type</p>';
+            }
+
+            document.getElementById('previewModal').classList.remove('hidden');
             document.addEventListener('keydown', handleEscKey);
         }
 
-        function closePDFModal() {
-            document.getElementById('pdfModal').classList.add('hidden');
+        function closePreviewModal() {
+            document.getElementById('previewModal').classList.add('hidden');
             document.removeEventListener('keydown', handleEscKey);
         }
 
         function handleEscKey(event) {
             if (event.key === 'Escape') {
-                closePDFModal();
+                closePreviewModal();
             }
         }
 
         // Close modal when clicking outside the content
-        document.getElementById('pdfModal').addEventListener('click', function(event) {
+        document.getElementById('previewModal').addEventListener('click', function(event) {
             if (event.target === this) {
-                closePDFModal();
+                closePreviewModal();
             }
         });
 
-        // Download PDF functionality
-        document.getElementById('downloadPdfBtn').addEventListener('click', function() {
-            if (currentPdfUrl) {
-                window.open(currentPdfUrl, '_blank');
+        // Download functionality
+        document.getElementById('downloadBtn').addEventListener('click', function() {
+            if (currentFileUrl) {
+                window.open(currentFileUrl, '_blank');
             }
         });
     </script>