From a4139c1e19ed9f5001f183f77b0ceb017d8e1ee0 Mon Sep 17 00:00:00 2001
From: majid <rustammajid76@gmail.com>
Date: Tue, 10 Dec 2024 08:55:30 +0700
Subject: [PATCH] update denah bisa upload pdf

---
 app/Http/Controllers/SurveyorController.php   |  4 +-
 .../views/surveyor/components/denah.blade.php | 95 +++++++++++++++----
 2 files changed, 76 insertions(+), 23 deletions(-)

diff --git a/app/Http/Controllers/SurveyorController.php b/app/Http/Controllers/SurveyorController.php
index 2e90f8f..b4703e9 100644
--- a/app/Http/Controllers/SurveyorController.php
+++ b/app/Http/Controllers/SurveyorController.php
@@ -217,7 +217,7 @@ class SurveyorController extends Controller
         try {
             $maxSize = getMaxFileSize('Foto');
             $validatedData = $request->validate([
-                'foto_denah' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:'. $maxSize,
+                'foto_denah' => 'required|file|mimes:jpeg,jpg,png,pdf,svg|max:'. $maxSize,
                 'luas' => 'required|numeric',
                 'permohonan_id' => 'required',
                 'jenis_jaminan_id' => 'required'
@@ -843,7 +843,7 @@ class SurveyorController extends Controller
 
                 $inspectionData = json_decode($inspeksi->data_form, true);
                 if (json_last_error() !== JSON_ERROR_NONE) {
-                    throw new \Exception('Error decoding inspection data: ' . json_last_error_msg());
+                    throw new \Exception('Harap mengisi form inspeksi terlebih dahulu.');
                 }
 
                 if ($inspeksi->data_pembanding) {
diff --git a/resources/views/surveyor/components/denah.blade.php b/resources/views/surveyor/components/denah.blade.php
index fb21f36..a79b3c1 100644
--- a/resources/views/surveyor/components/denah.blade.php
+++ b/resources/views/surveyor/components/denah.blade.php
@@ -5,6 +5,15 @@
 @endsection
 
 @section('content')
+    <style>
+        .pdf-preview {
+            width: 100%;
+            max-width: 100%;
+            border: 1px solid #ddd;
+            margin-top: 10px;
+        }
+    </style>
+
     @include('lpj::assetsku.includenya')
     <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
         <div class="card min-w-full">
@@ -130,34 +139,40 @@
                     <input type="hidden" value="{{ $permohonan->id }}" name="permohonan_id">
                     <input type="hidden" name="jenis_jaminan_id" value="{{ request('jenis_jaminan') }}">
                     <div class="mt-2">
-                        <div class=""max-w-4xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">
-
-                            <div>
-                            </div>
+                        <div class=" mx-auto overflow-hidden">
                             <div class="flex flex-wrap gap-4" style="margin-top: 20px">
-                                <div class="flex w-full  items-center justify-center gap-4">
+                                <div class="flex w-full items-center justify-center gap-4">
                                     <label class="form-label max-w-56">
-                                        <span class="form-label">Upload Denah</span>
+                                        <span class="form-label">Upload Denah (Foto/PDF)</span>
                                     </label>
                                     <div class="w-full grid gap-5">
-                                        <img id="foto_denah-preview"
-                                            src="{{ isset($formDenah['foto_denah']) ? asset('storage/' . old('foto_denah', $formDenah['foto_denah'])) : '' }}"
-                                            alt="Gambar foto_denah"
-                                            style="{{ isset($formDenah['foto_denah']) ? 'width: 30rem;' : 'display: none;' }}">
-
+                                        <!-- Preview Container -->
+                                        <div id="preview-container">
+                                            <!-- Image preview -->
+                                            <img id="foto_denah-preview"
+                                                src="{{ isset($formDenah['foto_denah']) ? asset('storage/' . old('foto_denah', $formDenah['foto_denah'])) : '' }}"
+                                                alt="Gambar foto_denah"
+                                                style="{{ isset($formDenah['foto_denah']) && strpos($formDenah['foto_denah'], '.pdf') === false ? 'width: 30rem;' : 'display: none;' }}">
 
+                                            <!-- PDF preview -->
+                                            @if (isset($formDenah['foto_denah']) && strpos($formDenah['foto_denah'], '.pdf') !== false)
+                                                <div id="pdf-preview" class="pdf-preview">
+                                                    <embed src="{{ asset('storage/' . $formDenah['foto_denah']) }}"
+                                                        type="application/pdf" width="100%" height="500px">
+                                                </div>
+                                            @endif
+                                        </div>
 
                                         <div class="input-group w-full flex gap-2">
                                             <input type="file"
                                                 value="{{ old('foto_denah', isset($formDenah['foto_denah']) ? $formDenah['foto_denah'] : '') }}"
-                                                name="foto_denah" class="file-input file-input-bordered w-full "
-                                                accept="image/*" onchange="previewImage(this, 'foto_denah-preview')">
+                                                name="foto_denah" class="file-input file-input-bordered w-full"
+                                                accept=".jpg,.jpeg,.png,.pdf" onchange="previewFile(this)">
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <em id="error-foto_denah" class="alert text-danger text-sm"></em>
-
                         </div>
 
                     </div>
@@ -202,18 +217,56 @@
 
 @push('scripts')
     <script>
-        function previewImage(input, previewId) {
-            if (input.files && input.files[0]) {
-                var reader = new FileReader();
-                reader.onload = function(e) {
-                    $('#' + previewId).attr('src', e.target.result).show();
+        function previewFile(input) {
+            const previewContainer = document.getElementById('preview-container');
+            const imagePreview = document.getElementById('foto_denah-preview');
+            const file = input.files[0];
+
+            // Hapus preview PDF yang ada (jika ada)
+            const existingPdfPreview = document.getElementById('pdf-preview');
+            if (existingPdfPreview) {
+                existingPdfPreview.remove();
+            }
+
+            if (file) {
+                // Cek tipe file
+                if (file.type.startsWith('image/')) {
+                    // Jika file adalah gambar
+                    imagePreview.style.display = 'block';
+                    const reader = new FileReader();
+
+                    reader.onload = function(e) {
+                        imagePreview.src = e.target.result;
+                        imagePreview.style.width = '30rem';
+                    }
+
+                    reader.readAsDataURL(file);
+                } else if (file.type === 'application/pdf') {
+                    // Jika file adalah PDF
+                    imagePreview.style.display = 'none';
+
+                    // Buat preview PDF
+                    const pdfPreview = document.createElement('div');
+                    pdfPreview.id = 'pdf-preview';
+                    pdfPreview.className = 'pdf-preview';
+
+                    const pdfEmbed = document.createElement('embed');
+                    pdfEmbed.src = URL.createObjectURL(file);
+                    pdfEmbed.type = 'application/pdf';
+                    pdfEmbed.width = '100%';
+                    pdfEmbed.height = '500px';
+
+                    pdfPreview.appendChild(pdfEmbed);
+                    previewContainer.appendChild(pdfPreview);
                 }
-                reader.readAsDataURL(input.files[0]);
             } else {
-                $('#' + previewId).hide();
+                // Jika tidak ada file yang dipilih
+                imagePreview.style.display = 'none';
+                imagePreview.src = '';
             }
         }
 
+
         function submitDenah() {
             const loadingOverlay = document.getElementById('loadingOverlay');
             loadingOverlay.classList.remove('hidden');