@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>