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

{% block contentTitle %}{% if title %}{{title}}{% else %}{{'coffeeshop'|trans}}{% endif %}{% 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-2" >
		<div class="col-md-3 text-left">
			<a class="mt-4 btn btn-outline-warning" href="{% if indexUrl %}{{indexUrl}}{% else %}{{path_for(constant('GestionComedor\\Configuration\\Routers\\CoffeeShopPosRouters::COFFEESHOPPOS_INDEX'))}}{% endif %}">{% if title %}{{title}}{% else %}{{'coffeeshop'|trans}}{% endif %}</a>
		</div>
		<div class="col-md-3 text-center">
			<button class="mt-4 btn {% if typeTicket == ticketTypeValue %}btn-info{% else %}btn-outline-info{% endif %}" id="buttonTypeTicketTicket" data-type-ticket="{{ticketTypeValue|default('dt')}}">{{'tickets'|trans}}</button>
		</div>
		<div class="col-md-3 text-center">
			<button  class="mt-4 btn  {% if typeTicket == ticketTypeValue %}btn-outline-info{% else %}btn-info{% endif %}" id="buttonTypeTicketReturns" data-type-ticket="{{returnTypeValue|default('dr')}}">{{'returns'|trans}}</button>
		</div>
		<div class="col-md-3 text-center">
			<a class="mt-4 btn btn-outline-danger" href="{% if archingUrl %}{{archingUrl}}{% else %}{{path_for(constant('GestionComedor\\Configuration\\Routers\\CoffeeShopPosRouters::COFFEESHOPPOS_ARCHING'))}}{% endif %}">{{'arching'|trans}}</a>
		</div>
	</div>

	<form action="{% if returnsUrl %}{{returnsUrl}}{% else %}{{path_for(constant('GestionComedor\\Configuration\\Routers\\CoffeeShopPosRouters::COFFEESHOPPOS_RETURNS'))}}{% endif %}" method="GET"  >
		<input type="hidden" id="valueTypeTicket" name="typeTicket" value="{{ticketTypeValue|default('dt')}}" />
		<div class="row">
			<div class="col-md-2 form-group">
				<label >{{'from'|trans}}</label>
	      <input type="date" class="form-control text-center" id="dateFrom" name="dateFrom" {% if dateFrom %}value="{{dateFrom}}"{% endif %} required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
			</div>
			<div class="col-md-2 form-group">
				<label>{{'to'|trans}}</label>
	  		<input type="date" class="form-control text-center" id="dateTo" name="dateTo" {% if dateTo %}value="{{dateTo}}"{% endif %} required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
			</div>
			<div class="col-md-2 form-group">
				<button type="submit" class="mt-4 btn btn-dark">{{'to-search'|trans}}</button>
			</div>
		</div>
	</form>


	<div class="row pb-3">
		<div class="col-md-6">
			<div class="row">
				<div class="col-md-12" style="min-height: 380px;">
					<style type="text/css">
					#ticketList > li:hover{
					    background-color: #ddd !important;
					    cursor: pointer;
					}
					</style>
        	<ul id="ticketList" class="list-group">
        	{% for ticket in tickets %}
        		<li class="list-group-item text-left viewDetails" data-ticket-id="{{ticket.id}}">{% if ticket.returnedTicketId %}<i class="fa fa-circle  text-warning "></i> {% endif %}  {% if ticket.typeTicket == 'DRCH' %} RECARGA {{ticket.payment.user.username}} {% else %}Ticket {{ticket.numTicket}}{% endif %} | {{ticket.createdAt|date("d-m-Y")}} | {{ticket.price}} €  </li>
					{% endfor %}
					</ul>
				</div>
			</div>
		</div>


		<div class="col-md-6">
			<div id="divInfoTicket" style="position: fixed;" class="d-none">

			<div class="row" >
				<div class="col-md-12">
					{{'date'|trans}}:   <span id="dateTicket"></span>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					{{'number-ticket'|trans}}:   <span id="numTicket"></span>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<ul id="productsTicket"></ul>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					{{'total'|trans}}:   <span id="totalTicket"></span>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					{{'payment-method'|trans}}:   <span id="paymentMethod"></span>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<button class="btn btn-warning d-none" id="buttonReturned" disabled>{{'returned'|trans}}</button>
					<button class="btn btn-danger d-none" id="buttonToReturn" data-ticket-id="">{{'to-return'|trans}}</button>
					<button class="btn btn-warning d-none" id="buttonToPrint" data-ticket-id="">{{'print-ticket'|trans}}</button>
				</div>
			</div>
		</div>

		</div>
	</div>

	<div class="row pb-3">
		<div class="col-md-6">
		</div>
		<div class="col-md-6">

		</div>

	</div>

</div>




{% endblock %}