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

@section('page_css')
<style>
.sign-pad-button-submit, .sign-pad-button-clear {
    display: none;
}
.sign-pad-button-submit {
    display: none;
    margin-top: 5px;
    background-color: #3b82f6;
    color: white;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}
.sign-pad-button-submit:hover {
    background-color: #2563eb;
}
.sign-pad-button-clear {
    margin-top: 5px;
    background-color: #ef4444;
    color: white;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}
.sign-pad-button-clear:hover {
    background-color: #dc2626;
}
</style>
@endsection

@section('content')
<div class="account-content">
    <div class="d-flex flex-wrap w-100 vh-100 overflow-hidden account-bg-01">
        @include('widgets.document._pdf-iframe')
        <div class="d-flex align-items-center justify-content-center flex-wrap vh-100 overflow-auto p-4 w-50 bg-backdrop">
            <div class="mx-auto mw-450">
                <div class="text-left mb-1">
                    <img src="/assets/images/logo-500x200.svg" alt="Logo" width="200" class="img-fluid">
                </div>
                <div class="mb-4">
                    <h4 class="mb-2 fs-20">{{ ucfirst($document->type) }} Information</h4>
                    <p>{{ $document->description }}</p>
                </div>
                <div class="mb-3">
                    <h6 class="mb-3 fw-semibold">Deal Information</h6>
                    <ul>
                        <li class="row mb-3"><span class="col-6">Deal Name</span><span class="col-6">{{ $deal->name }}</span></li>
                        <li class="row mb-3"><span class="col-6">Deal Amount</span><span class="col-6">{{ $deal->amount }}</span></li>
                        <li class="row mb-3"><span class="col-6">Email</span><span class="col-6">{{ $contact->email }}</span></li>
                        <li class="row mb-3"><span class="col-6">Phone</span><span class="col-6">{{ $contact->phone }}</span></li>
                        <li class="row mb-3"><span class="col-6">Address</span><span class="col-6">{{ $contact->address }}</span></li>
                        <li class="row mb-3"><span class="col-6">Created At</span><span class="col-6">{{ $document->created_at }}</span></li>
                    </ul>	
                </div>
                <div class="text-center">
                    <p class="fw-medium text-gray">Copyright &copy; 2024 - CRMS</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page_js')
<script src="/vendor/sign-pad/sign-pad.min.js"></script>
<script>
$(document).ready(function() {
    $('#btnSubmit').click(function() {
        $('.sign-pad-button-submit').click();
    });
});
</script>
@endsection