110 lines
3.8 KiB
PHP
110 lines
3.8 KiB
PHP
@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>
|
|
@php
|
|
$inspeksiId = null;
|
|
$documentId = null;
|
|
$jenisJaminanId = null;
|
|
|
|
foreach ($permohonan->debiture->documents as $item) {
|
|
if (!empty($item->inspeksi)) {
|
|
$inspeksiId = $item->inspeksi[0]->id;
|
|
}
|
|
$documentId = $item->id;
|
|
$jenisJaminanId = $item->jenis_jaminan_id;
|
|
}
|
|
@endphp
|
|
<div class="card-body relative flex flex-col h-[calc(100vh-4rem)] overflow-hidden">
|
|
<!-- Loading Spinner -->
|
|
<div id="loading" class="absolute inset-0 flex items-center justify-center bg-opacity-50">
|
|
<div class="loader"></div>
|
|
</div>
|
|
|
|
<div id="pdf-container" class="mt-4" style="width: 100%; height: 800px; border: 1px solid #ccc; margin: 10px;"></div>
|
|
|
|
<div class="card-footer flex justify-end">
|
|
<a href="{{ route('penilai.print-out') }}?permohonanId={{ $permohonan->id }}&documentId={{ $documentId }}&inspeksiId={{ $inspeksiId }}&jaminanId={{ $jenisJaminanId }}&statusLpj=0" class="btn btn-primary">
|
|
<i class="ki-filled ki-printer"></i> Print
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.3.0/pdfobject.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const loading = document.getElementById('loading');
|
|
const pdfContainer = document.getElementById('pdf-container');
|
|
|
|
const pdfUrl = `{{ route('penilai.print-out') }}?permohonanId={{ $permohonan->id }}&documentId={{ $documentId }}&jaminanId={{ $jenisJaminanId }}&statusLpj=true`;
|
|
|
|
// Display the loading spinner
|
|
loading.style.display = 'flex';
|
|
|
|
// Fetch the PDF URL to ensure it loads properly
|
|
fetch(pdfUrl)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch the PDF file.');
|
|
}
|
|
return response.blob();
|
|
})
|
|
.then(blob => {
|
|
const url = URL.createObjectURL(blob);
|
|
// Embed PDF using PDFObject
|
|
PDFObject.embed(url, pdfContainer, {
|
|
height: "100%",
|
|
fallbackLink: `<p class="text-red-500">It appears you don't have a PDF plugin for this browser. You can <a href="${url}">click here to download the PDF file.</a></p>`
|
|
});
|
|
loading.style.display = 'none';
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
loading.innerHTML = `<p class="text-red-500">Failed to load the report. Please try again later.</p>`;
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.loader {
|
|
width: 100px;
|
|
display: grid;
|
|
background: radial-gradient(farthest-side, #35C1D0 98%, #0000) center/30px 100%
|
|
no-repeat;
|
|
--mask:
|
|
radial-gradient(12px at left 15px top 50%, #0000 95%, #000),
|
|
radial-gradient(12px at center, #0000 95%, #000),
|
|
radial-gradient(12px at right 15px top 50%, #0000 95%, #000);
|
|
-webkit-mask: var(--mask);
|
|
mask: var(--mask);
|
|
-webkit-mask-composite: source-in;
|
|
mask-composite: intersect;
|
|
animation: l2 1s infinite alternate;
|
|
}
|
|
.loader:before,
|
|
.loader:after {
|
|
content: "";
|
|
grid-area: 1/1;
|
|
height: 30px;
|
|
aspect-ratio: 1;
|
|
background: #35C1D0;
|
|
border-radius: 50%;
|
|
}
|
|
.loader:after {
|
|
margin-left: auto;
|
|
}
|
|
@keyframes l2 {
|
|
to {
|
|
width: 50px;
|
|
}
|
|
}
|
|
</style>
|