@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card mb-3 mt-3" style="height:100vh;">

                <div class="card-header pb-0">
                    <h6>User Manual MSJTagihanTlp</h6>
                </div>

                <div class="card-body px-0 pt-0 pb-2">

                    @if ($user_manual)
						<div class="embed-responsive embed-responsive-16by9 position-relative">

							{{-- Loading --}}
							<div id="pdf-loading"
								 class="position-absolute top-50 start-50 translate-middle text-center">
								<div class="spinner-border text-primary" role="status"></div>
								<div class="mt-2">Memuat dokumen...</div>
							</div>

							<iframe
								id="pdf-frame"
								class="embed-responsive-item"
								src="{{ route('user.manual.view', $user_manual) }}#toolbar=1&navpanes=1&scrollbar=1&view=FitH"
								width="100%"
								height="600px"
								style="border:none;"
								onload="document.getElementById('pdf-loading').style.display='none';"
								frameborder="0" 
								allowfullscreen
							></iframe>
						</div>
					@else
						<div class="alert alert-warning text-center m-4">
							<strong>Akses Ditolak</strong><br>
							User manual tidak tersedia untuk role Anda.
						</div>
					@endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection