@extends('widgets.document.layout.mainlayout')

@section('page_css')
<style>
#is-loading {
    overflow: hidden;
    position: fixed;
}
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
#loader .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.2em;
    color: #007bff;
}
.hidden {
    display: none!important;
}
</style>
@endsection

@section('content')
<div class="account-content">
    <div class="d-flex flex-wrap w-100 vh-100 overflow-hidden account-bg-01">
        <div class="d-flex align-items-center justify-content-center flex-wrap vh-100 overflow-auto w-50 bg-backdrop">
            <iframe src="{{ url('') }}/uploads/{{ $pdf_pem_link }}" class="w-100 h-100" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        @livewire('tenant.widget.document.make-payment', ['document' => $document, 'deal' => $deal, 'contact' => $contact, 'signature_id' => $signature_id, 'access_code' => $access_code]);        
    </div>
</div>
@endsection

@section('page_js')
<script src="/vendor/sign-pad/sign-pad.min.js"></script>
<script src="{{ config('env.themes.dreams_tech.folder') }}/plugins/sweetalert/sweetalert2.all.min.js"></script>
<script src="{{ config('env.themes.dreams_tech.folder') }}/plugins/sweetalert/sweetalerts.min.js"></script>
<script>
    
</script>
@endsection