{% extends 'D2PhsdsbcBundle::base_phsdsbc_admin.html.twig' %}

{% block head_style_extra %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="{{ asset('bundles/d2phsdsbc/css/jquery.signaturepad.css') }}" rel="stylesheet">
<style type="text/css">
.typeahead, .tt-query, .tt-hint {
	border: 2px solid #CCCCCC;
	border-radius: 8px;
	font-size: 18px; /* Set input font size */
	height: 50px;
	line-height: 45px;
	outline: medium none;
	width: 396px;
}
.typeahead {
	background-color: #FFFFFF;
}
.typeahead:focus {
	border: 2px solid #0097CF;
}
.tt-query {
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
	color: #999999;
}
.tt-menu {
	background-color: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	margin-top: 12px;
	padding: 8px 0;
	width: 422px;
}
.tt-suggestion {
	font-size: 14px;  /* Set suggestion dropdown font size */
	padding: 3px 20px;
}
.tt-suggestion:hover {
	cursor: pointer;
	background-color: #0097CF;
	color: #FFFFFF;
}
.tt-suggestion p {
	margin: 0;

}
.twitter-typeahead {
	width: 100%;
	margin-top:10px;
}
</style>
{% endblock head_style_extra %}

{% block head_script_extra %} 
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="{{ asset('bundles/d2core/js/datetimepicker_utils.js') }}"></script>
	<script type="text/javascript" src="{{ asset('bundles/d2borrowedasset/js/assistant_admin.js') }}"></script>
	<script type="text/javascript" src="{{ asset('bundles/d2core/js/typeahead.js') }}"></script>
	<script type="text/javascript" src="{{ asset('bundles/d2phsdsbc/js/numeric-1.2.6.min.js') }}"></script>
	<script type="text/javascript" src="{{ asset('bundles/d2phsdsbc/js/bezier.js') }}"></script>
	<script type="text/javascript" src="{{ asset('bundles/d2phsdsbc/js/jquery.signaturepad.js') }}"></script>
	<script type="text/javascript" src="{{ asset('bundles/d2phsdsbc/js/json2.min.js') }}"></script>

	<script>
		$(document).ready(function() {
			$(function() {
				$('#accept_date').datetimepicker({
					format: 'YYYY-MM-DD',
				});
			});

			$('#smoothed_1').signaturePad({
				drawOnly:true, 
				drawBezierCurves:true, 
				lineTop:180,
				output : '#d2_deliverymanagerbundle_deliverytype_signature_accept'
			});
			$('#smoothed_2').signaturePad({
				drawOnly:true, 
				drawBezierCurves:true, 
				lineTop:180,
				output : '#d2_deliverymanagerbundle_deliverytype_signature_deliver'
			});
		});
	</script>
{% endblock head_script_extra %} 

{% block page_header %}
<div class="row">
	<div class="col-md-1">
	{% set site_logo = d2_content_get_admin_logo() %}
	<a href="{{ path('admin_delivery_manager_assistant') }}"><img src="{{ site_logo }}" alt="LOGO" style="width:100%"></a>
	</div>
	<div class="col-md3">
	</div>
	<div class="col-md-8 pull-right">
		<h1 style="font-size:60px">DELIVERY ASSISTANT</h1>
	</div>
</div>
{% endblock page_header %}

{% block content %}

<div class="row" style="margin-top:20px">
	<div class="col-md-offset-2 col-md-8">
		<form action="{{ path('admin_delivery_assistant_accept_create', {'id': entity.id}) }}" {{ form_enctype(form) }} method="POST" class="form-general">
			<div class="row">
				<div class="col-md-12">
					<div class="row form-group">
							{{ form_label(form.bar_code) }}
							<div class="col-sm-9">
							{{ form_errors(form.bar_code) }}
							{{ form_widget(form.bar_code) }}
							</div>	
					</div>
					<div class="row form-group">
							{{ form_label(form.customer) }}
							<div class="col-sm-9">
							{{ form_errors(form.customer) }}
							{{ form_widget(form.customer) }}
							</div>	
					</div>
					<div class="row form-group">
							{{ form_label(form.date) }}
						<div class="col-sm-3 col-md-3">
							{{ form_errors(form.date) }}
							<div class='input-group date' id='accept_date' name='accept_date'>
								{{ form_widget(form.date) }}
								<span class="input-group-addon">
									<span class="glyphicon glyphicon-calendar"></span>
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<hr/>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6">
					<div class="sigPad" id="smoothed_1" style="width:404px;">
						<ul class="sigNav">
							<li class="drawIt"><a href="#draw-it" > Acceptance Signature</a></li>
							<li class="clearButton"><a href="#clear">Clear</a></li>
						</ul>
						<div class="sig sigWrapper" style="height:auto;">
							<div class="typed"></div>
							<canvas class="pad" width="400" height="200"></canvas>
							{{ form_widget(form.signature_accept) }}
						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="sigPad" id="smoothed_2" style="width:404px;">
						<ul class="sigNav">
							<li class="drawIt"><a href="#draw-it" > Delivery Signature</a></li>
							<li class="clearButton"><a href="#clear">Clear</a></li>
						</ul>
						<div class="sig sigWrapper" style="height:auto;">
							<div class="typed"></div>
							<canvas class="pad" width="400" height="200"></canvas>
							{{ form_widget(form.signature_deliver) }}
						</div>
					</div>
				</div>
				{{ form_rest(form) }}
			</div>
			<input class="btn btn-lg btn-default pull-right" type="submit" value="Save" />
		</form>
	</div>
</div>
{% endblock content %}