@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">
            <div class="d-flex align-items-center justify-content-center flex-fill flex-wrap vh-100 overflow-auto">
                <div class="login-shapes">
                    <div class="login-right-shape">
                        <img src="{{ config('env.themes.dreams_tech.folder') }}/img/authentication/shape-01.png" alt="Shape">
                    </div>
                    <div class="login-left-shape">
                        <img src="{{ config('env.themes.dreams_tech.folder') }}/img/authentication/shape-02.png" alt="Shape"> 
                    </div> 
                </div>
                @include('widgets.document._index')
            </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