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

{% block head_style_extra %}
<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="{{ 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() {
			$('#smoothed').signaturePad({
				drawOnly:true, 
				drawBezierCurves:true, 
				lineTop:180,
				output : '#signature'
			});
		});
	</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('home_page') }}"><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">LOAN ASSISTANT</h1>
	</div>
</div>
{% endblock page_header %}

{% block content %}
<div class="row" style="margin-top:30px">
	<div class="col-md-offset-3 col-md-6">
		<table style="width:100%">
			<tr>
				<td style="width:90%"><input id="customer" class="typeahead form-control" autocomplete="off" placeholder="Type in your Name" type="text" value="" style="width:100%; margin-bottom:7px"></td>
				<td style="padding-left:10px"><a href="javascript:LoadLoan()" class="btn btn-default btn-lg">GO</a></td>
			</tr>
		</table>
	</div>
</div>
<div id="loan_space" class="row hidden" style="margin-top:20px">
	<div class="col-md-offset-3 col-md-3">
		<table class="table table-bordered" style="margin-top:30px">
			<tr><th>ISBN</th><td id="isbn_holder"></td></tr>
			<tr><th>Title</th><td id="title_holder"></td></tr>
			<tr><th>Author</th><td id="author_holder"></td></tr>
			<tr><th>Return On</th><td id="return_holder"></td></tr>
		</table>
		<a id="submit_loan" data-loan="" href="javascript:SubmitLoan()" class="btn btn-default btn-lg pull-right">Accept</a>
	</div>
	<div class="col-md-3">
		<div class="sigPad pull-right" id="smoothed" style="width:304px;">
			<ul class="sigNav">
				<li class="drawIt"><a href="#draw-it" > Please Sign</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="300" height="200"></canvas>
				<input id="signature" style="display:none"/>
			</div>
		</div>
	</div>
</div>
{% endblock content %}