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

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

{% block content %}

</div>

<style type="text/css">
	.productButton{
		height:150px;
		
		cursor:pointer;
		color: #5bc0de;
	}
	.productButton:hover{
		opacity: 0.5;
	}
	.cart{
		font-size: 10px;
	}
</style>

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

	<div class="row pb-3">
		<div class="col-md-9">
			<nav>
				<div class="nav nav-tabs" id="nav-tab" role="tablist">
			 {% for category in categories|filter(category => category.name != 'events') %}
			 	<a class="nav-item nav-link {% if category.id == 1 %}active{% endif %}" id="nav-category-{{category.id}}-tab" data-toggle="tab" href="#nav-category-{{category.id}}" role="tab" aria-controls="nav-category-{{category.id}}" >{{category.name|trans|upper}}</a>
			 {% endfor %}
				</div>
			</nav>
      <div class="tab-content" id="nav-tabContent">
				{% for info in productsView %}
					<div class="tab-pane fade show {% if info.category.id == 1 %}active{% endif %}" id="nav-category-{{info.category.id}}" role="tabpanel" aria-labelledby="nav-category-{{info.category.id}}-tab" style="overflow:scroll; height: 700px;">
						<div class="row">
							{% for product in info.products %}
								<div class="col-md-3 p-3">
									<div class="border 	text-center text-white p-3 addToCart productButton" data-price="{{product.price}}" data-name="{{product.name}}" data-product-id="{{product.id}}" style="background: url(/static/images/coffeeshop/{{product.image}}) no-repeat center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;" >
									</div>
									<div class="bg-info text-white text-center">{{product.name}} <br/><strong> {{product.price}} € </strong></div>
								</div>
								{% if loop.index % 4 == 0 %}
	      					</div><div class="row">
	      				{% endif %}
							{% endfor %}
						</div>
        	</div>
				{% endfor %}
      </div>
      <div class="row" id="userShortScreenRow" >
      	<h1 id="userShortScreen"></h1>
      	<button id="userShortScreenClean" style="display:none" onclick="cleanPanel()" class="btn btn-danger p-3 ml-5">Cancelar</button>
     	</div>
		</div>

		<div class="col-md-3">

			<div class="row">
				<div class="col-md-12 text-center" style="min-height: 380px;">
					<div class="row text-center">
						<p class="text-center"><h2>{{'total'|trans}}: <span id="totalCart">0</span>&euro;</h2></p>
					</div>
					<div class="row mt-4" style="min-height: 50px;">
		        <ul id="cart" class="list-group" style="width:100%;"></ul>
		        <button id="cleanCartButton" class="btn btn-danger w-100 mw-100">{{'empty'|trans}}</button>
						
					</div>
					<div class="row mt-3">
						<button class="btn btn-success pl-2 pr-2 pt-3 pb-2" id="payCartCash" style="width: 100%;" data-paymentMethod-id="1" data-target="#payCartCashModal">{{'cash'|trans}}</button>
					</div>
					<div class="row mt-3">
						<button type="button" class="btn btn-success pl-2 pr-2 pt-3 pb-2 mw-100" style="width: 100%;"  data-toggle="modal" data-target="#payCartSmartCardModal" data-paymentMethod-id="8" >{{'smart-card'|trans}}</button>
					</div>
					<div class="row mt-3">					
						<button class="btn btn-success pl-2 pr-2 pt-3 pb-2" id="payCartVisa" style="width: 100%;" data-paymentMethod-id="5" data-target="#payCartVisaModal">{{'visa'|trans}}</button>
					</div>
					<div class="row mt-3">					
						<button class="btn btn-outline-warning pl-2 pr-2 pt-3 pb-2" id="payInvited" style="width: 100%;" data-paymentMethod-id="0" >{{'invited'|trans}}</button>
					</div>
				</div>
			</div>

			<div class="row mt-2">
				<div class="col-md-4" 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-4" 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-4" 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>
			<div class="row">
				<div class="col-md-4" 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-4" 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-4" 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>
			<div class="row">
				<div class="col-md-4" 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-4" 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-4" 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>
			<div class="row">
				<div class="col-md-4" 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-4" style="padding-left: 3px; padding-right: 3px;">
					<button class="btn btn-warning btn-block btn-lg" style="padding: 15px 0px;border: 1px solid #CCCCCC;" id="individualAmountCorrect"><span style="font-size: 1.2em;"><i class="fa fa-angle-double-left"></i></span></button>
				</div>
				<div class="col-md-4" style="padding-left: 3px; padding-right: 3px;">
					<button class="btn btn-danger btn-block btn-lg" style="padding: 15px 0px;border: 1px solid #CCCCCC;" id="individualAmountErase"><span style="font-size: 1.2em;">X</span></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 class="row mt-4">
				<!-- href="{{path_for(constant('GestionComedor\\Configuration\\Routers\\CoffeeShopPosRouters::COFFEESHOPPOS_RECHARGE'))}}"  -->
				<button  class="btn btn-outline-info" style="width: 100%;" id="rechargeButtonModal">{{'recharge'|trans}}</button>
			</div>

			<div class="row mt-4">
				<a href="{{path_for(constant('GestionComedor\\Configuration\\Routers\\CoffeeShopPosRouters::COFFEESHOPPOS_RETURNS'))}}" class="btn btn-outline-warning" style="width: 100%;">{{'return'|trans}}</a>
			</div>

			<div class="row mt-4">
				<a href="{{path_for(constant('GestionComedor\\Configuration\\Routers\\CoffeeShopPosRouters::COFFEESHOPPOS_EVENTS'))}}" class="btn btn-outline-info" style="width: 100%;">Cafetería Eventos</a>
			</div>

		</div>
	</div>


</div>

<div class="modal fade" id="rechargeBalanceModal" tabindex="-1" role="dialog" aria-labelledby="rechargeBalanceLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="rechargeBalanceLabel">{{'recharge'|trans}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body pl-5 pr-5">

      	<div class="row mt-2">
	      	<button id="userShortScreenCleanRecharge" style="display:none" onclick="cleanPanel()" class="w-100 btn btn-danger btn-sm p-3 ">Cancelar</button>
	     	</div>

      	<div class="row ">
      		<div class="col-md-12">
      			<label for="rechargeBalance" class="font-weight-bold" >{{'quantity'|trans}}</label>
        		<input type="text" class="form-control" id="rechargeBalance" name="rechargeBalance" value="" placeholder="Escribe la cantidad deseada..." required/>
	     		</div>
      	</div>

	      <div class="row mt-2">
	      	<label for="rechargeBalance" class="font-weight-bold ml-3" >{{'username'|trans}}</label>
	     	</div>

      	<div class="row ">
      		<div class="col-md-12">
        		<input type="hidden" class="form-control" id="userCode" name="userCode" value="" required/>
      		</div>
      	</div>
      	
      	

      	<!--
	      <div class="row mt-4">
  	      <div class="col-md-12 text-left">
	        	<button data-payment-method-id="5" class="w-100 pt-4 pb-4 rechargeButtonPrint btn btn-success btn-success ">{{'visa-print'|trans}}</button>
	        </div>
	      </div>
	      
				<div class="row mt-4">
	        <div class="col-md-12 text-right">
						<button data-payment-method-id="1" class="w-100 pt-4 pb-4 rechargeButtonPrint btn btn-success btn-success ">{{'cash-print'|trans}}</button>
					</div>					
	     	</div>
	     -->

      	<div class="row ">
      		<div class="col-md-12">
      			<table>
      				<tr>
      					<td style="width:330px;">
  						    <input type="hidden" id="userSearchedCoffeeShop">
  								<input class="form-control mr-sm-2 userSearchCoffeeShop m-100" type="search" placeholder="Escribe el username ..." aria-label="Search" autocomplete="off"  >
      					</td>
      					<td><button id="deleteUserSearchedCoffeeShop" class="form-control btn btn-danger" >{{'delete'|trans}}</button></td>
      				</tr>
      			</table>
      		</div> 
      	</div>

      	<div class="row text-white bg-primary p-5 userNameCardDiv">
      		<div class="col-md-12">
	      		<h3 class="userNameCard">Esperando tarjeta</h3>
	      		<div class="excludeAllergensLabel btn-warning mb-4  d-none">{{'exclude-allergens'|trans|upper}}</div>
	      	</div>
	      	<div class="col-md-12 d-none actualBalanceUserDiv" id="actualBalanceUserDiv">
	      		<h3>{{'actual-balance'|trans}}: <span class="actualBalanceUser font-weight-bold"></span> €</h3>		
	      		<div class="allergensUser"></div>
	      			      <div class="row mt-4">
	      		  	      <div class="col-md-12 text-left">
	      			        	<button data-payment-method-id="5" class="w-100 pt-4 pb-4 rechargeButtonPrint btn btn-success btn-success ">{{'visa-print'|trans}}</button>
	      			        </div>
	      			      </div>
	      			      
	      						<div class="row mt-4">
	      			        <div class="col-md-12 text-right">
	      								<button data-payment-method-id="1" class="w-100 pt-4 pb-4 rechargeButtonPrint btn btn-success btn-success ">{{'cash-print'|trans}}</button>
	      							</div>					
	      			     	</div>
	      	</div>
      	</div> 
      </div>

	  </div>
	</div>
</div>	

<div class="modal fade" id="payCartSmartCardModal" tabindex="-1" role="dialog" aria-labelledby="payCartSmartCardModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="paySmartCardModalLabel">{{'pay'|trans}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body pl-5 pr-5">
      	<div class="row ">
      		<div class="col-md-12">
      			<h1>TOTAL <span class="totalEuros">0.00</span> €</h1>
      		</div>
      	</div>
      	<div class="row ">
      		<div class="col-md-12">
      			<table>
      				<tr>
      					<td style="width:330px;">
  						    <input type="hidden" id="userSearchedCoffeeShop">
  								<input class="form-control mr-sm-2 userSearchCoffeeShop m-100" type="search" placeholder="{{search|trans}}" aria-label="Search"  autocomplete="off"  >
      					</td>
      					<td><button id="deleteUserSearchedCoffeeShop" class="form-control btn btn-danger" >{{'delete'|trans}}</button></td>
      				</tr>
      			</table>
      		</div> 
      	</div>

      	<div class="row text-white bg-primary p-5 userNameCardDiv">
      		<div class="col-md-12">
	      		<h3 class="userNameCard">Esperando tarjeta</h3>
	      		<div class="btn-warning mb-4 excludeAllergensLabel d-none">{{'exclude-allergens'|trans|upper}}</div>
	      	</div>
	      	<div class="col-md-12 d-none actualBalanceUserDiv">
	      		<h3>{{'actual-balance'|trans}}: <span class="actualBalanceUser font-weight-bold"></span> €</h3>		
	      		<div class="allergensUser"></div>		
	      		<button id="paySmartCardUserId" data-user-id="" class="btn btn-success pt-3 pb-3" style="width:340px;" >Pagar</button>
	      		<button id="paySmartCardUserIdPrint" data-user-id="" class="btn btn-success pt-3 pb-3 mt-4" style="width:340px;" >Pagar e Imprimir</button>
	      	</div>
      	</div>        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}