From aa41da8a68869fe0eb9253c8cda90001266da1db Mon Sep 17 00:00:00 2001
From: Daeng Deni Mardaeni <ddeni05@gmail.com>
Date: Thu, 7 Nov 2024 21:31:46 +0700
Subject: [PATCH] Tambahkan fitur download dan penutupan modal PDF dengan
 tombol Escape

Memperbarui tampilan modal untuk menyertakan tombol download PDF dan menutupi modal ketika tombol Escape ditekan. Penyesuaian elemen dalam modal untuk mengatur tata letak yang lebih baik dan menambah event listener untuk menangani penutupan modal saat klik di luar isi modal.
---
 resources/views/component/pdfviewer.blade.php | 43 ++++++++++++++++---
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/resources/views/component/pdfviewer.blade.php b/resources/views/component/pdfviewer.blade.php
index 177ecf5..c862dfa 100644
--- a/resources/views/component/pdfviewer.blade.php
+++ b/resources/views/component/pdfviewer.blade.php
@@ -1,11 +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">
+<div id="pdfModal" 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">
-            <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 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">
+                    <i class="ki-duotone ki-cloud-download me-1"><span class="path1"></span><span class="path2"></span></i>
+                    Download PDF
+                </button>
+                <button onclick="closePDFModal()" class="text-2xl">
+                    <i class="ki-filled ki-cross-square text-red-600"></i>
+                </button>
+            </div>
+            <div id="pdfViewer" class="flex-grow"></div>
         </div>
     </div>
 </div>
@@ -13,13 +19,38 @@
 @push('scripts')
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.3.0/pdfobject.min.js"></script>
     <script>
+        let currentPdfUrl = '';
+
         function viewPDF(url) {
+            currentPdfUrl = url;
             PDFObject.embed(url, "#pdfViewer");
             document.getElementById('pdfModal').classList.remove('hidden');
+            document.addEventListener('keydown', handleEscKey);
         }
 
         function closePDFModal() {
             document.getElementById('pdfModal').classList.add('hidden');
+            document.removeEventListener('keydown', handleEscKey);
         }
+
+        function handleEscKey(event) {
+            if (event.key === 'Escape') {
+                closePDFModal();
+            }
+        }
+
+        // Close modal when clicking outside the content
+        document.getElementById('pdfModal').addEventListener('click', function(event) {
+            if (event.target === this) {
+                closePDFModal();
+            }
+        });
+
+        // Download PDF functionality
+        document.getElementById('downloadPdfBtn').addEventListener('click', function() {
+            if (currentPdfUrl) {
+                window.open(currentPdfUrl, '_blank');
+            }
+        });
     </script>
 @endpush