133 lines
4.9 KiB
PHP
133 lines
4.9 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; // Asumsi mengambil inspeksi pertama
|
|
}
|
|
$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-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>
|
|
|
|
<div class="flex justify-between mt-4">
|
|
<button id="zoomIn" class="btn btn-outline btn-primary">
|
|
<i class="ki-filled ki-plus"></i>
|
|
</button>
|
|
<button id="zoomOut" class="btn btn-outline btn-warning">
|
|
<i class="ki-filled ki-minus"></i>
|
|
</button>
|
|
</div>
|
|
|
|
|
|
<div class="iframe-container" style="width: 100%; border: 1px solid #ccc; height: 800px; overflow: hidden; margin: 10px;">
|
|
<iframe id="reportIframe" width="100%" height="100%" style="border: none; transform-origin: top left;">
|
|
</iframe>
|
|
</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>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const iframe = document.getElementById('reportIframe');
|
|
const loading = document.getElementById('loading');
|
|
const zoomInButton = document.getElementById('zoomIn');
|
|
const zoomOutButton = document.getElementById('zoomOut');
|
|
|
|
// Initial zoom level
|
|
let zoomLevel = 1;
|
|
const url = `{{ route('penilai.print-out') }}?permohonanId={{ $permohonan->id }}&documentId={{ $documentId }}&jaminanId={{ $jenisJaminanId }}&statusLpj=true`;
|
|
|
|
// Display the loading spinner
|
|
loading.style.display = 'flex';
|
|
|
|
// Load the content into the iframe
|
|
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 the iframe
|
|
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
|
|
iframeDoc.open();
|
|
iframeDoc.write(html);
|
|
iframeDoc.close();
|
|
loading.style.display = 'none';
|
|
iframe.style.display = 'block';
|
|
})
|
|
.catch(error => {
|
|
console.error('Problem with fetch operation:', error);
|
|
loading.innerHTML = `<p class="text-red-500">Failed to load the report. Please try again later.</p>`;
|
|
});
|
|
|
|
// Zoom in function
|
|
zoomInButton.addEventListener('click', function () {
|
|
zoomLevel += 0.1; // Increase zoom level
|
|
iframe.style.transform = `scale(${zoomLevel})`;
|
|
iframe.style.transformOrigin = 'top left';
|
|
iframe.style.width = `${100 / zoomLevel}%`;
|
|
iframe.style.height = `${800 / zoomLevel}px`;
|
|
});
|
|
|
|
// Zoom out function
|
|
zoomOutButton.addEventListener('click', function () {
|
|
zoomLevel = Math.max(0.5, zoomLevel - 0.1);
|
|
iframe.style.transform = `scale(${zoomLevel})`;
|
|
iframe.style.transformOrigin = 'top left';
|
|
iframe.style.width = `${100 / zoomLevel}%`;
|
|
iframe.style.height = `${800 / zoomLevel}px`;
|
|
});
|
|
});
|
|
</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>
|