{% extends "common/auth_page.twig" %}

{% block contentTitle %}{{'coffeeshop'|trans}}{% endblock %}

{% block content %}

</div>

<div class="container-fluid pl-5 pr-5">

	<div class="row pb-3">
    	<input type="hidden" id="userSearchedCoffeeShop">
		<div class="col-md-6"> <input class="form-control mr-sm-2 userSearchCoffeeShop m-100" type="search" placeholder="{{search|trans}}" aria-label="Search" name="userSearchCoffeeShop" id="userSearchCoffeeShop"  autocomplete="off"  ></div>
		<div class="col-md-3 text-left"><button id="userSearchButton" class="form-control btn btn-success" >{{'search-user'|trans}}</button></div>
		<div class="col-md-3 text-left"><button id="deleteUserSearchedCoffeeShop" class="form-control btn btn-danger" >{{'delete'|trans}}</button></div>
	</div>

	<div class="row">
		<div class="col-md-6 p-5" style="border: 3px solid #5bc0de;height: 700px;min-height: 70%;" id="labelBackgroundUser">
			<div class="row ">
				<div class="col-mod-12">
					<div id="sandwichReserved"></div>
					<div id="allergicUser" class="btn-danger p-2 mb-4 text-center d-none">{{'allergic'|trans|upper}}</div>
					<h3 id="userName"></h3>
					<div id="excludeAllergensLabel" class="btn-warning p-2 mb-4 text-center d-none">{{'exclude-allergens'|trans|upper}}</div>
				</div>
			</div>
			<div class="row">
				<div class="col-mod-12">
					<div id="allergensUser"></div>		
				</div>
			</div>
			<div class="row">
				<div class="col-mod-12 d-none" id="actualBalanceUserDiv">
					<h3>{{'actual-balance'|trans}}: <span id="actualBalanceUser" class="font-weight-bold"></span> €</h3>		
				</div>
			</div>
			<input type="hidden" id="userId" value="" />
			<input type="hidden" id="isAdmin" value="{{isAdmin}}" />
			<input type="hidden" id="isAllergic" value="0" />

			<div class="row">
				<div class="col-md-12 pt-3">
					<table class="table" id="paymentsTable">
						<thead>
							<tr>
								<th>{{'value'|trans}}</th>
								<th>{{'date'|trans}}</th>
								<th></th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>

		</div>





		<div class="col-md-6 p-5" style="border: 3px solid #5bc0de;height: 700px;min-height: 70%;">
			<div class="row">
				<div class="col-md-12 text-center">
					<h3>{{'enter-payment'|trans}}</h3>
				</div>
			</div>
			<div class="row mb-3">
				<div class="col-md-12 text-left">
					<h3>{{'fixed-amount'|trans}}</h3>
				</div>
			</div>
			<div class="row pb-3">
				<div class="col-md-6 text-center">
					<div class="w-100 btn btn-info payButton " style="padding: 15px 0px;" data-price="0.5" ><span style="font-size: 1.2em;">0,50</span></div>
				</div>
				<div class="col-md-6">
					<div class="w-100 btn btn-info payButton" style="padding: 15px 0px;" data-price="1"><span style="font-size: 1.2em;">1,00</span></div>
				</div>
			</div>
			<div class="row pb-3">
				<div class="col-md-6">
					<div class="w-100 btn btn-info payButton" style="padding: 15px 0px;" data-price="1.2"><span style="font-size: 1.2em;">1,20</span></div>
				</div>
				<div class="col-md-6">
					<div class="w-100 btn btn-info payButton" style="padding: 15px 0px;" data-price="1.3"><span style="font-size: 1.2em;">1,30</span></div>
				</div>
			</div>
			<div class="row pb-3">
				<div class="col-md-6">
					<div class="w-100 btn btn-info payButton" style="padding: 15px 0px;" data-price="2"><span style="font-size: 1.2em;">2,00</span></div>
				</div>
				<div class="col-md-6 " >
					<div class="w-100 btn btn-info payButton" style="padding: 15px 0px;" data-price="2.5"><span style="font-size: 1.2em;">2,50</span></div>
				</div>
			</div>

			<div class="row pb-3">
				<div class="col-md-12 text-left">
					<h3>{{'amount'|trans}}</h3>
				</div>
			</div>

			<div class="row">
				<div class="col-md-1" style="padding-left: 3px; padding-right: 3px;">
					<button class="btn btn-light btn-block btn-lg individualAmountButton" value="0" style="padding: 15px 0px;border: 1px solid #CCCCCC;"><span style="font-size: 1.2em;">0</span></button>
				</div>
				<div class="col-md-1" style="padding-left: 3px; padding-right: 3px;">
					<button class="btn btn-light btn-block btn-lg individualAmountButton" value="1" style="padding: 15px 0px;border: 1px solid #CCCCCC;"><span style="font-size: 1.2em;">1</span></button>
				</div>
				<div class="col-md-1" style="padding-left: 3px; padding-right: 3px;">
					<button class="btn btn-light btn-block btn-lg individualAmountButton" value="2" style="padding: 15px 0px;border: 1px solid #CCCCCC;"><span style="font-size: 1.2em;">2</span></button>
				</div>
				<div class="col-md-1" style="padding-left: 3px; padding-right: 3px;">
					<button class="btn btn-light btn-block btn-lg individualAmountButton" value="3" style="padding: 15px 0px;border: 1px solid #CCCCCC;"><span style="font-size: 1.2em;">3</span></button>
				</div>
				<div class="col-md-1" style="padding-left: 3px; padding-right: 3px;">
					<button class="btn btn-light btn-block btn-lg individualAmountButton" value="4" style="padding: 15px 0px;border: 1px solid #CCCCCC;"><span style="font-size: 1.2em;">4</span></button>
				</div>
				<div class="col-md-1" style="padding-left: 3px; padding-right: 3px;">
					<button class="btn btn-light btn-block btn-lg individualAmountButton" value="5" style="padding: 15px 0px;border: 1px solid #CCCCCC;"><span style="font-size: 1.2em;">5</span></button>
				</div>
				<div class="col-md-1" style="padding-left: 3px; padding-right: 3px;">
					<button class="btn btn-light btn-block btn-lg individualAmountButton" value="6" style="padding: 15px 0px;border: 1px solid #CCCCCC;"><span style="font-size: 1.2em;">6</span></button>
				</div>
				<div class="col-md-1" style="padding-left: 3px; padding-right: 3px;">
					<button class="btn btn-light btn-block btn-lg individualAmountButton" value="7" style="padding: 15px 0px;border: 1px solid #CCCCCC;"><span style="font-size: 1.2em;">7</span></button>
				</div>
				<div class="col-md-1" style="padding-left: 3px; padding-right: 3px;">
					<button class="btn btn-light btn-block btn-lg individualAmountButton " value="8" style="padding: 15px 0px;border: 1px solid #CCCCCC;"><span style="font-size: 1.2em;">8</span></button>
				</div>
				<div class="col-md-1" style="padding-left: 3px; padding-right: 3px;">
					<button class="btn btn-light btn-block btn-lg individualAmountButton" value="9" style="padding: 15px 0px;border: 1px solid #CCCCCC;"><span style="font-size: 1.2em;">9</span></button>
				</div>
				<div class="col-md-1" >
					<button class="btn btn-warning btn-lg " id="individualAmountCorrect"><i class="fa fa-angle-double-left"></i></button>
				</div>
				<div class="col-md-1" >
					<button class="btn btn-danger btn-lg" id="individualAmountErase">X</button>
				</div>
			</div>

			<div class="row pt-5">
				<div class="col-md-12">
					<div class="w-100 btn btn-info disabled" style="padding: 15px 0px; font-size:1.2em;"  id="totalIndividualAmountButton" value="0.00">0.00</div>
				</div>
			</div>

		</div>
	</div>


</div>



{% endblock %}