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

{% block title %}Profile
{% endblock %}

{% block body %}
	{{ block('nav', 'internal/libs/nav.html.twig') }}

	<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
		{{ block('topnav', 'internal/libs/top-nav.html.twig') }}
		<form name='form' method='post' enctype='multipart/form-data' onsubmit='return saveSignatureBlock()'>

			{{ form_errors(form) }}
			<div class='container'>
				<div class='row'>
					<div class='col text-center' id='profile-image'>
						<input type='hidden' name='id' value='{{ currentUser.id }}'/>
						<input type='hidden' name='{{ field_name(form.signature) }}' id='signature'/>
						<img class='profile-image' src='{% if currentUser.imageName %}{{ user_image_path }}/{{ currentUser.imageName }}{% endif %}'/>

						{{ form_row(form.imageName) }}
					</div>
					<div class='col'>
						<div class='input-group input-group-outline mb-3 is-filled'>
							<label for='profile_form_name' class='form-label'>Name</label>
							<input type='text' name='{{ field_name(form.name) }}' id='profile_form_name' class='form-control' value='{{ currentUser.name }}'/>
						</div>

						<div class='input-group input-group-outline mb-3 is-filled'>
							<label for='profile_form_email' class='form-label'>Email</label>
							<input type='email' name='{{ field_name(form.email) }}' id='profile_form_email' class='form-control' value='{{ currentUser.email }}'/>
						</div>

						<div class='input-group input-group-outline mb-3 {% if currentUser.personalPhone %}is-filled{% endif %}'>
							<label for='profile_form_phone' class='form-label'>Phone</label>
							<input type='tel' name='{{ field_name(form.personalPhone) }}' id='profile_form_phone' class='form-control' value='{{ currentUser.personalPhone }}'/>
						</div>

						<div class='input-group input-group-outline mb-3 {% if currentUser.workPhone %}is-filled{% endif %}'>
							<label for='profile_form_workPhone' class='form-label'>Work Phone</label>
							<input type='tel' name='{{ field_name(form.workPhone) }}' id='profile_form_workPhone' class='form-control' value='{{ currentUser.workPhone }}'/>
						</div>

						<div class='input-group input-group-outline mb-3'>
							<label for='profile_form_password' class='form-label'>Password</label>
							<input type='password' name='{{ field_name(form.password.first) }}' id='profile_form_password' class='form-control' autocomplete='new-password'/>
						</div>

						<div class='input-group input-group-outline mb-3'>
							<label for='profile_form_confirmPassword' class='form-label'>Confirm Password</label>
							<input type='password' name='{{ field_name(form.password.second) }}' id='profile_form_confirmPassword' class='form-control' autocomplete='new-password'/>
						</div>
					</div>
				</div>

				<div class='row'>
					<div class='col'>
						<div class='input-group input-group-outline mb-3'>
							Saved Signature:
							<button id='clearSignature'>Clear Signature</button><br/>
							<canvas id='signature_pad'></canvas>
						</div>
					</div>
				</div>

				<div class='row'>
					<div class='col text-center'>
						<div class='input-group input-group-outline mb-3'>
							{{ form_row(form.submit) }}
						</div>
					</div>
				</div>
			</div>
			{{ form_end(form) }}
		</main>
	{% 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 = createSignatureBlock;
var canvas = document.getElementById('signature_pad');
var pad = null;
var signatureData = JSON.parse('{{ signature|raw }}');
function createSignatureBlock() {
pad = new SignaturePad(canvas);
const ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
{% if signaturePresent %}pad.fromData(signatureData);{% endif %}

document.getElementById('clearSignature').addEventListener('click', clearSignatureBlock);
}

function clearSignatureBlock(e) {
e.preventDefault();
pad.clear();
}

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

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

	{% block page_css %}
		<style rel='stylesheet'>
			.profile-image {
				width: 300px;
				height: 300px;
			}
			#signature_pad {
				width: 100%;
				height: 300px;
				background-color: white;
			}
		</style>
	{% endblock %}