{% extends 'base.html.twig' %}

{% block title %}{% endblock %}

{% block body %}
    <div class="container">
        <h1>Sign Member Document</h1>
        <h3>{{ doc.document.title }}</h3>
        <p>{{ doc.document.updated|date('M j, Y h:i:s a', company_timezone) }}</p>

        <form action="" method="post" enctype="multipart/form-data">
            <div class='row'>
                {{ doc.document.renderHtml()|
                    replace({'{{ doc.client.email }}': doc.client.email})|
                    replace({'{{ doc.client.phone }}': doc.client.phone})|
                    raw
                }}
            </div>

            <div class='row'>
                <div class='col'>
                    <div class='input-group input-group-outline mb-3'>
                        {% if doc.document.inExtras(enum('App\\Enums\\DocumentExtras').CLIENT_NAME) %}
                        <input type='text' name='clientName' id='clientName' value='{{ doc.client.name }}'/>
                        {% endif %}

                        {% if doc.document.inExtras(enum('App\\Enums\\DocumentExtras').CLIENT_SIGNATURE) %}
                        <button id='clearClientSignature'>Clear Signature</button><br />
                        <canvas id='clientSignatureCanvas'></canvas>
                        {% endif %}
                    </div>
                </div>
            </div>

            {% if doc.document.inExtras(enum('App\\Enums\\DocumentExtras').PROVIDER_SIGNATURE) %}
            <div class='row'>
                <div class='col'>
                    <div class='input-group input-group-outline mb-3'>
                        {% if doc.document.inExtras(enum('App\\Enums\\DocumentExtras').PROVIDER_NAME) %}
                        <input type='text' name='providerName' id='providerName' value='{{ doc.caseWorker.name }}'/>
                        {% endif %}

                        <button id='clearProviderSignature'>Clear Signature</button><br/>
                        <canvas id='providerSignatureCanvas'></canvas>
                    </div>
                </div>
            </div>
            {% endif %}

            <button type="submit" class="btn btn-primary">Complete</button>
        </form>
    </div>
{% endblock %}

{% block page_js %}
		<script src="https://cdn.jsdelivr.net/npm/signature_pad@5.0.4/dist/signature_pad.umd.min.js"></script>
		<script type='text/javascript'>
			window.onload = initializeSignatureBlocks;
var clientCanvas = document.getElementById('clientSignatureCanvas');
var providerCanvas = document.getElementById('providerSignatureCanvas');
var providerSaveSignature = JSON.parse('{{ caseWorkerSignature|raw }}');
var clientPad = null;
var providerPad = null
function initializeSignatureBlocks() {
    if (providerCanvas) {
        createProviderSignatureBlock();
    }
    if (clientCanvas) {
        createClientSignatureBlock();
    }
}
function createProviderSignatureBlock() {
    providerPad = new SignaturePad(providerCanvas);
    const ratio = Math.max(window.devicePixelRatio || 1, 1);
    providerCanvas.width = providerCanvas.offsetWidth * ratio;
    providerCanvas.height = providerCanvas.offsetHeight * ratio;
    providerCanvas.getContext("2d").scale(ratio, ratio);
    if (providerSaveSignature) {providerPad.fromData(providerSaveSignature);}

    document.getElementById('clearProviderSignature').addEventListener('click', clearProviderSignature);
}
function createClientSignatureBlock() {
    clientPad = new SignaturePad(clientCanvas);
    const ratio = Math.max(window.devicePixelRatio || 1, 1);
    clientCanvas.width = clientCanvas.offsetWidth * ratio;
    clientCanvas.height = clientCanvas.offsetHeight * ratio;
    clientCanvas.getContext("2d").scale(ratio, ratio);

    document.getElementById('clearClientSignature').addEventListener('click', clearClientSignature);
}

function clearClientSignature(e) {
    e.preventDefault();
    clientPad.clear();
}

function clearProviderSignature(e) {
    e.preventDefault();
    providerPad.clear();
}

function saveSignatureBlock() {
document.getElementById('signature').value = JSON.stringify(pad.toData());

return true;
}
		</script>
{% endblock %}

{% block page_css %}
		<style rel='stylesheet'>
			#clientSignatureCanvas, #providerSignatureCanvas {
				width: 100%;
				height: 300px;
				background-color: white;
                border: solid 1px black;
			}
		</style>
{% endblock %}