{% extends '../_layouts/_main.twig' %}
{% block content %}
	<div class="p-refrigerant-license">
		<div class="license__head _blue">
			<h1>Вы оплатили заказ #3259105 <br />Заполните форму, чтобы получить газ:</h1>
			Нам нужны Ваши данные согласно директиве: Regulation (EU) No 517/2014, Article 6, Point 3
		</div>
		<div class="license__body">

			<div class="form-group">
				<div class="form-label">Название фирмы:</div>
				<div class="form-field max-w-400"><input class="form-control lg" type="text" value="Varuosaproff OÜ" /></div>
				<div class="help-block hidden">Заполнение обязательно!</div>
			</div>
			<div class="form-group">
				<div class="form-label">Адрес:</div>
				<div class="form-field max-w-400"><input class="form-control lg" type="text" value="Kadaka tee 2, 11625 Tallinn, Estonia" /></div>
				<div class="help-block hidden">Заполнение обязательно!</div>
			</div>
			<div class="form-group">
				<div class="form-label">Лицензированный специалист:</div>
				<div class="form-field max-w-400"><input class="form-control lg" type="text" value="Voldemar Raadik" /></div>
				<div class="help-block hidden">Заполнение обязательно!</div>
			</div>
			<div class="form-group">
				<div class="mb-8 form-label"><strong>Цель покупки хладагента:</strong></div>
				<ul class="list-unstyled list-unstyled-8">
					<li>
						<div class="form-check">
							<label><input type="radio" name="rad-a" value="1" data-rel-hide=".license__form" /> Буду перепродавать газ дальше</label>
						</div>
					</li>
					<li>
						<div class="form-check">
							<label><input type="radio" name="rad-a" value="2" data-rel-show=".license__form" /> Буду использовать сам для заправки холодильных систем</label>
						</div>
					</li>
				</ul>
			</div>

			<div class="form-group license__form hidden">
				<div class="mb-12 form-label"><strong>Могу предоставить следующие сертификаты:</strong></div>
				<ul class="list-unstyled">
					<li>
						<div class="form-group form-check">
							<label><input type="radio" name="chk-a" value="1" /> Сертификат фирмы</label>
						</div>
						<div class="form-group form-group-hidden pl-24">
							<div class="mb-4"></div>
							<div class="form-label">Номер сертификата</div>
							<div class="form-field max-w-400"><input class="form-control" type="text" value="" /></div>
							<div class="help-block hidden">Заполнение обязательно!</div>
						</div>
					</li>
					<li>
						<div class="form-group form-check">
							<label><input type="checkbox" name="chk-a" value="2" /> Персональный сертификат</label>
						</div>
						<div class="form-group form-group-hidden pl-24">
							<div class="mb-4"></div>
							<div class="form-label">Имя</div>
							<div class="form-field max-w-400"><input class="form-control" type="text" value="" /></div>
							<div class="help-block hidden">Заполнение обязательно!</div>
						</div>
						<div class="form-group form-group-hidden pl-24">
							<div class="mb-4"></div>
							<div class="form-label">Номер сертификата</div>
							<div class="form-field max-w-400"><input class="form-control" type="text" value="" /></div>
							<div class="help-block hidden">Заполнение обязательно!</div>
						</div>
					</li>
				</ul>
			</div>

			<div class="mb-24"></div>

			<div class="licenseBox">
				<div class="box-sign">
					<a href="#modal-sign" class="btn btn-lg btn-primary px-32" data-toggle="modal">Добавить подпись</a>
				</div>
				<div class="box-signed">
					<div class="form-group">
						<div class="p-refrigerant-license-sign sign-area">
							<div class="sign-area__head">
								<div class="flex-row align-items-center">
									<div class="flex-col-auto">Подпись:</div>
									<div class="flex-col-auto ml-auto">
										<a href="#" class="trash-link canvas-sign-clear"><i class="fa fa-trash"></i> Удалить подпись</a>
									</div>
								</div>
							</div>
							<div class="sign-area__body">
								<img id="signImage" src="" alt="" />
							</div>
							<div class="help-block">Подтверждаю, что все данные верны и я имею полномочия подписывать этот документ от имени, указанной выше фирмы.</div>
						</div>
						<input id="signature" name="signature" type="hidden" value="" />
					</div>
					<div class="form-group">
						<button class="btn btn-lg btn-primary px-32">Отправить <i class="ml-4 fa fa-angle-double-right"></i></button>
					</div>
				</div>
			</div>

			<div class="mb-40"></div>

			<strong>Если хотите отказаться от заказа, пишите на <a href="mailto:gas@alvadi.ee">gas@alvadi.ee</a> и мы вернём Вам деньги.</strong>

		</div>
	</div>
	<div class="content-separator"></div>
{% endblock %}
{% block footer %}
	{% include '../_parts/_footer-short.twig' %}
{% endblock %}
{% block modals %}
	<div class="modal modal-flex fade" id="modal-sign" tabindex="-1" role="dialog" aria-labelledby="modal-sign">
		<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
			<div class="modal-content">
				<a href="#" class="cross simple" data-dismiss="modal"></a>
				<div class="modal-body">
					<div class="p-refrigerant-license-sign sign-area">
						<div class="sign-area__head">
							<div class="flex-row align-items-center">
								<div class="flex-col-auto">Подпись (нарисуйте):</div>
								<div class="flex-col-auto ml-auto">
									<a href="#" class="trash-link canvas-sign-clear"><i class="fa fa-trash"></i> Очистить</a>
								</div>
							</div>
						</div>
						<div class="sign-area__body">
							<canvas id="signCanvas" height="200">Ваш браузер не поддерживает Canvas</canvas>
						</div>
						<div class="help-block hidden">Заполнение обязательно!</div>
						<div class="mb-24"></div>
						<a href="#" class="btn btn-lg btn-primary px-32 canvas-sign-save">Готово</a>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}
{% block footerJS %}
	{{ parent() }}
	<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
	<script>
		$(function(){
			var $canvas = document.querySelector('#signCanvas');
			var resultInput = document.querySelector('#signature');
			var $container = $canvas.parentElement;
			var $signImage = document.querySelector('#signImage');
			var $licenseBox = document.querySelector('.licenseBox');

			$('#modal-sign').on('shown.bs.modal', function(e){
				$canvas.width  = $container.clientWidth;
				//$canvas.height = $container.clientHeight;
			});

			window.addEventListener('resize', function(event) {
				$canvas.width  = $container.clientWidth;
				//$canvas.height = $container.clientHeight;
			}, true);

			if( typeof SignaturePad == "function" ){
				const signaturePad = new SignaturePad($canvas);
				document.querySelectorAll('.canvas-sign-clear').forEach(function($link){
					$link.addEventListener('click', (e) => {
						e.preventDefault();
						signaturePad.clear();
						resultInput.value = '';
						$canvas.closest('.sign-area').classList.remove('has-error');
						$signImage.src = '';
						$licenseBox.classList.remove('in');
					});
				});
				document.querySelector('.canvas-sign-save').addEventListener('click', (e) => {
					e.preventDefault();
					const dataURL = signaturePad.toDataURL();
					if( !signaturePad.isEmpty() ){
						$signImage.src = dataURL;
						resultInput.value = dataURL;
						$licenseBox.classList.add('in');
						$('#modal-sign').modal('hide');
					} else {
						$canvas.closest('.sign-area').classList.add('has-error');
						$signImage.src = '';
						$licenseBox.classList.remove('in');
					}
				});
				signaturePad.addEventListener("endStroke", function(){
					const dataURL = signaturePad.toDataURL();
					resultInput.value = dataURL;
				});
			}
		});
	</script>
{% endblock %}