update foto jaminan dan laporan preview

2024-12-27 15:58:31 +07:00
parent b70b3b730f
commit 78184094f6
8 changed files with 149 additions and 41 deletions
--- a/resources/views/penilaian/laporan-so.blade.php
+++ b/resources/views/penilaian/laporan-so.blade.php
@@ -0,0 +1,93 @@
+@extends('layouts.main')
+
+@section('content')
+
+<div class="card w-full bg-white rounded-lg shadow-md h-100vh">
+    <div class="card-header flex justify-between items-center">
+        <h3 class="card-title uppercase">
+            Laporan
+        </h3>
+        <a href="{{ url()->previous() }}" class="btn btn-xs btn-info flex items-center">
+            <i class="ki-filled ki-exit-left"></i> Back
+        </a>
+    </div>
+    <div class="card-body relative flex flex-col h-[calc(100vh-4rem)]">
+        <!-- Loading Spinner -->
+        <div id="loading" class="absolute inset-0 flex items-center justify-center bg-gray-100 bg-opacity-50">
+            <div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12"></div>
+            <p class="text-gray-600 mt-2">Loading...</p>
+        </div>
+
+        <!-- Iframe -->
+        <iframe id="reportIframe" class="w-full h-full border rounded-lg hidden" frameborder="0"></iframe>
+    </div>
+</div>
+
+@endsection
+
+@php
+$inspeksiId = null;
+$documentId = null;
+$jenisJaminanId = null;
+
+foreach ($permohonan->debiture->documents as $item) {
+    if (!empty($item->inspeksi)) {
+        $inspeksiId = $item->inspeksi[0]->id; // Asumsi mengambil inspeksi pertama
+    }
+    $documentId = $item->id;
+    $jenisJaminanId = $item->jenis_jaminan_id;
+}
+@endphp
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const iframe = document.getElementById('reportIframe');
+        const loading = document.getElementById('loading');
+        const url = `{{ route('penilai.print-out') }}?permohonanId={{ $permohonan->id }}&documentId={{ $documentId }}&inspeksiId={{ $inspeksiId }}&jaminanId={{ $jenisJaminanId }}&statusLpj=true`;
+
+        // Show loading indicator
+        loading.style.display = 'flex';
+        fetch(url)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok ' + response.statusText);
+                }
+                return response.text();
+            })
+            .then(html => {
+                // Load the content into iframe
+                const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+                iframeDoc.open();
+                iframeDoc.write(html);
+                iframeDoc.close();
+
+                // Hide loading indicator and show iframe
+                loading.style.display = 'none';
+                iframe.style.display = 'block';
+            })
+            .catch(error => {
+                console.error('There has been a problem with your fetch operation:', error);
+                loading.innerHTML = `<p class="text-red-500">Failed to load the report. Please try again later.</p>`;
+            });
+    });
+</script>
+
+<style>
+    /* Loader styles */
+    .loader {
+        border-color: #f3f3f3;
+        border-top-color: #3498db;
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    /* Full height for iframe */
+    .card-body {
+        position: relative;
+    }
+</style>