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

{% block contentTitle %}{{'daily-reservations'|trans}}{% endblock %}

{% block content %}

</div>

<style type="text/css">
.btn-xlarge {
    padding: 18px 28px;
    font-size: 30px;
    line-height: normal;
    -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
}
</style>

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

	<div class="row pb-3">
    	<input type="hidden" id="userSearchedDailyReservation">
		<div class="col-md-6"> <input class="form-control mr-sm-2 userSearchDailyReservation" type="search" placeholder="{{search|trans}}" aria-label="Search" name="userReservation"  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-7">
			<div class="row p-2">
				<div id="labelBackgroundUser" class="col-md-12 p-5" style="border: 3px solid #5bc0de;height: 500px;min-height: 70%;">
					<div id="excludeAllergensLabel" class="btn-warning p-2 mb-4 text-center d-none">{{'exclude-allergens'|trans|upper}}</div>
					<div id="allergicUser" class="btn-danger p-2 mb-4 text-center d-none">{{'allergic'|trans|upper}}</div>
					<h1><span id="userName"></span><span id="actualBalanceUser"></span></h1>
					<div id="vegetarianUser" class="d-none btn-success p-2 mt-4 mb-2 text-center">{{'vegetarian'|trans|upper}}</div>
					<div id="allergensUser"></div>

					<ul id="productsMenuReservation">
					</ul>
					<div class="col-md-12" id="allergensMenuReservation"></div>
				</div>
			</div>
			<div class="row p-2">
				<div class="col-md-12 p-5" style="border: 3px solid #f0ad4e;height: 200px;min-height: 70%;">
					<div id="divExcludeReserves" class="row d-none">
						<div class="col-md-12" >
							<div class="col-md-12 text-left text-danger pt-2"><h2>{{'reserve-collegue'|trans|upper}}</h2></div>
						</div>
					</div>
					<div id="divPickReserve" class="row d-none">
						<div class="col-md-12" >
							<!--<button type="button" class="btn btn-xlarge btn-info" id="buttonPickMenu" style="">{{'pick'|trans}}</button>-->
						</div>
					</div>
					<div id="divPickedReserve" class="row d-none">
						<div class="col-md-12">
							<!--<button type="button" disabled class="btn btn-xlarge btn-success" >{{'picked'|trans}}</button>-->
						</div>
					</div>		
					<div id="divPickedReserveMenus" class="row d-none">
						{% for stat in stats.menus %}
						<div class="col">
								<button type="button" class="btn btn-xlarge btn-success btnReserveMenuNoReserve" data-menu-id="{{stat.menu.id}}" >{{'pick'|trans}} {{stat.menu.line.name}}</button>
						</div>
						{% endfor %}
					</div>		
					<div class="col-md-12 text-left text-danger pt-2"><h2 id="error-message"></h2></div>
				</div>
			</div>
		</div>
		<div class="col-md-2">
			<div class="row p-2">
			<div class="card mb-3 w-100" style="overflow: scroll; height: 720px; min-height: 720px;border: 3px solid {{stat.color}};"   >
				<table class="table table-striped">
					<tbody id="listScanSmartcard">
						{% if listScan|length > 0 %}
							{% for scan in listScan %}
								<tr><td>{{scan.user}}</td><td>{{scan.date}}</td><td>{{scan.picked|raw}}</td></tr>
							{% endfor %}
						{% endif %}
					</tbody>
				</table>
				<ul id="listScanSmartcard">
					
				</ul>
			</div>
			</div>

		</div>

		<div class="col-md-3">
			<div class="row p-2 ">
			{% for stat in stats.menus %}
				<div class="card mb-3 w-100" style="min-height: 200px;border: 3px solid {{stat.color}};"   >
  				<div class="card-body" style="background: {{stat.menu.line.color}}">
	  				<h5 class="card-title">{{stat.menu.products[1].principalName}}</h5>
	  				<h6 class="card-subtitle mb-2 text-muted">{{stat.menu.products[1].secondaryName}}</h6>
	  				<p class="card-text" style="font-size:10px;">
	  					{% for allergen in stat.menu.products[1].allergens %}
	  						<img class="logo" src="/static/images/allergens/{{allergen.image}}" alt="{{allergen.name}}" style="height:40px;max-width:100%;" data-toggle="tooltip" data-html="true" title="{{allergen.name}}"/> 
	  					{% endfor %}
	  				</p>
	  				{{'reserves'|trans}} : <span class="font-weight-bold" id="StatReservesTotal-{{stat.menu.id}}"> {{stat.reserves.total}}</span><br/>
						{{'pickeds'|trans}} : <span class="font-weight-bold" id="StatReservesPicked-{{stat.menu.id}}"> {{stat.reserves.picked}}</span><br/>
						{{'no-pickeds'|trans}} : <span class="font-weight-bold" id="StatReservesUnpicked-{{stat.menu.id}}"> {{stat.reserves.unpicked}}</span><br/>
						{{'picked-not-reserved'|trans}} : <span class="font-weight-bold" id="StatReservesPickedForced-{{stat.menu.id}}"> {{stat.reservesForced.picked}}</span><br/>
					</div>
				</div>
			{% endfor %}
			</div>
		</div>
	</div>


</div>


{% endblock %}