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

{% block body %}

<style type="text/css">
	html,
	body,
	main.container-fluid {
		height: 100%;
		overflow: hidden;
	}

	main.container-fluid {
		padding: 0;
	}

	body > .container.mt-5 {
		display: none;
	}

	.events-screen {
		background: #f4f6f8;
		color: #1f2933;
		display: grid;
		grid-template-rows: 54px minmax(0, 1fr);
		height: 100vh;
		height: 100dvh;
		width: 100vw;
	}

	.events-header {
		align-items: center;
		background: #ffffff;
		border-bottom: 1px solid #d9e2ec;
		display: flex;
		justify-content: space-between;
		padding: 0 16px;
	}

	.events-brand {
		align-items: center;
		display: flex;
		gap: 14px;
		min-width: 0;
	}

	.events-logo {
		height: 34px;
		max-width: 130px;
		object-fit: contain;
	}

	.events-title {
		font-size: 24px;
		font-weight: 700;
		letter-spacing: 0;
		margin: 0;
	}

	.events-content {
		display: grid;
		gap: 14px;
		grid-template-columns: minmax(0, 1fr) 260px;
		min-height: 0;
		padding: 14px;
	}

	.events-products-area {
		display: flex;
		flex-direction: column;
		gap: 10px;
		min-height: 0;
		overflow: hidden;
	}

	.events-products {
		display: grid;
		align-content: start;
		flex: 0 1 auto;
		gap: 12px;
		grid-template-columns: repeat(6, minmax(110px, 1fr));
		max-height: 100%;
		min-height: 0;
		overflow-y: auto;
		padding-right: 4px;
	}

	.events-product {
		background: transparent;
		border: 0;
		border-radius: 0;
		cursor: pointer;
		display: grid;
		grid-template-rows: 118px auto;
		min-height: 158px;
		overflow: hidden;
	}

	.events-product:hover {
		opacity: 0.5;
	}

	.events-product-image {
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		border: 1px solid #dee2e6;
	}

	.events-product-info {
		align-items: center;
		background: #17a2b8;
		color: #ffffff;
		display: block;
		min-height: 48px;
		padding: 5px 6px;
		text-align: center;
	}

	.events-product-name {
		display: block;
		font-size: 13px;
		font-weight: 400;
		line-height: 1.12;
		overflow-wrap: anywhere;
	}

	.events-product-price {
		display: block;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.2;
		white-space: nowrap;
	}

	.events-cart-panel {
		background: #ffffff;
		border-left: 1px solid #d9e2ec;
		display: flex;
		flex-direction: column;
		gap: 8px;
		height: 100%;
		min-height: 0;
		overflow: hidden;
		padding: 10px;
	}

	.events-total {
		font-size: 20px;
		font-weight: 700;
		margin: 0 0 8px;
		text-align: center;
	}

	.events-header .events-total {
		font-size: 16px;
		margin: 0;
	}

	#cart {
		flex: 1 1 0;
		min-height: 0;
		overflow-y: auto;
	}

	#cart .list-group-item {
		flex-shrink: 0;
		font-size: 12px;
		margin: 0 0 6px !important;
		padding: 6px;
	}

	.events-actions .btn,
	.events-payment-actions .btn,
	.events-keypad .btn,
	#totalIndividualAmountButton {
		min-height: 38px;
		padding-bottom: 7px;
		padding-top: 7px;
	}

	.events-keypad {
		display: grid;
		gap: 5px;
		grid-template-columns: repeat(3, 1fr);
		margin-top: 8px;
	}

	.events-actions {
		display: grid;
		gap: 6px;
	}

	.events-ticket-actions {
		flex: 0 0 auto;
	}

	.events-payment-actions {
		display: grid;
		flex: 0 0 auto;
		gap: 12px;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding-top: 18px;
	}

	.events-payment-actions .btn {
		min-height: 48px;
		padding-bottom: 10px;
		padding-top: 10px;
	}

	.events-actions .btn,
	.events-payment-actions .btn,
	.events-keypad .btn {
		font-size: 14px;
	}

	.events-payment-actions .btn-block + .btn-block {
		margin-top: 0;
	}

	.events-empty {
		align-items: center;
		background: #ffffff;
		border: 1px dashed #bcccdc;
		border-radius: 6px;
		display: flex;
		font-size: 22px;
		font-weight: 600;
		justify-content: center;
		min-height: 220px;
	}

	@media (max-width: 1024px) {
		.events-content {
			grid-template-columns: minmax(0, 1fr) 230px;
			gap: 10px;
			padding: 10px;
		}

		.events-products {
			grid-template-columns: repeat(4, minmax(110px, 1fr));
		}

		.events-product {
			grid-template-rows: 112px auto;
			min-height: 152px;
		}

		.events-cart-panel {
			padding: 8px;
		}

		.events-total {
			font-size: 18px;
		}

		.events-payment-actions {
			gap: 10px;
			padding-top: 16px;
		}

		.events-actions .btn,
		.events-keypad .btn,
		#totalIndividualAmountButton {
			min-height: 34px;
			padding-bottom: 5px;
			padding-top: 5px;
		}

		.events-payment-actions .btn {
			min-height: 44px;
			padding-bottom: 8px;
			padding-top: 8px;
		}
	}

	@media (max-height: 820px) {
		.events-screen {
			grid-template-rows: 44px minmax(0, 1fr);
		}

		.events-header {
			padding: 0 10px;
		}

		.events-logo {
			height: 28px;
			max-width: 105px;
		}

		.events-title {
			font-size: 20px;
		}

		.events-header .btn-sm {
			font-size: 12px;
			padding: 2px 6px;
		}

		.events-content {
			gap: 8px;
			padding: 8px;
		}

		.events-products-area {
			gap: 6px;
		}

		.events-products {
			gap: 8px;
		}

		.events-product {
			grid-template-rows: 92px auto;
			min-height: 128px;
		}

		.events-product-info {
			min-height: 36px;
			padding: 3px 5px;
		}

		.events-product-name {
			font-size: 12px;
			line-height: 1.05;
		}

		.events-product-price {
			font-size: 14px;
			line-height: 1.1;
		}

		.events-cart-panel {
			gap: 5px;
			padding: 6px;
		}

		.events-total {
			font-size: 18px;
			margin-bottom: 4px;
		}

		#userShortScreen {
			font-size: 14px;
			margin-bottom: 4px;
		}

		#cart .list-group-item {
			font-size: 11px;
			margin-bottom: 4px !important;
			padding: 4px;
		}

		.events-keypad {
			gap: 4px;
			margin-top: 4px;
		}

		.events-actions {
			gap: 4px;
		}

		.events-payment-actions {
			gap: 8px;
			padding-top: 14px;
		}

		.events-actions .btn,
		.events-keypad .btn,
		#totalIndividualAmountButton {
			font-size: 13px;
			min-height: 30px;
			padding-bottom: 3px;
			padding-top: 3px;
		}

		.events-payment-actions .btn {
			font-size: 13px;
			min-height: 42px;
			padding-bottom: 7px;
			padding-top: 7px;
		}
	}

	@media (max-height: 660px) {
		.events-screen {
			grid-template-rows: 40px minmax(0, 1fr);
		}

		.events-content {
			padding: 6px;
		}

		.events-product {
			grid-template-rows: 80px auto;
			min-height: 114px;
		}

		.events-payment-actions {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			padding-top: 12px;
		}

		.events-keypad .btn:nth-child(10) {
			grid-column: 2;
		}
	}

	@media (min-width: 1200px) {
		.events-products {
			grid-template-columns: repeat(6, minmax(130px, 1fr));
		}

		.events-content {
			grid-template-columns: minmax(0, 1fr) 280px;
		}

		.events-product {
			grid-template-rows: 150px auto;
			min-height: 198px;
		}
	}

	@media (min-width: 1200px) and (max-height: 820px) {
		.events-product {
			grid-template-rows: 92px auto;
			min-height: 128px;
		}
	}

	@media (min-width: 1200px) and (max-height: 660px) {
		.events-product {
			grid-template-rows: 80px auto;
			min-height: 114px;
		}
	}
</style>

	<input type="hidden" id="coffeeshopPosRedirectUrl" value="/eventos/" />
	<input type="hidden" id="coffeeshopPosBox" value="events" />
	<input type="hidden" id="isAdmin" value="1" />
	<input type="hidden" id="usersSearchUrl" value="{{ usersSearchUrl }}">
	<input type="hidden" id="usersUrl" value="{{ usersUrl }}">

	<section class="events-screen">
		<header class="events-header">
			<div class="events-brand">
				<img class="events-logo" src="/static/images/delicom-logo.png" alt="Delicom">
				<h1 class="events-title">EVENTOS</h1>
			</div>
			<div>
				<a class="btn btn-sm btn-outline-info" href="{{path_for(constant('GestionComedor\\Configuration\\Routers\\ReservationRouters::RESERVATION_SPECIAL'))}}" >Recogida Especial</a>
				<a class="btn btn-sm btn-outline-success" href="{{path_for(constant('GestionComedor\\Configuration\\Routers\\ReservationRouters::RESERVATION_SPECIAL_PRODUCTS'))}}" >Productos pendientes</a>
				<a class="btn btn-sm btn-outline-warning" href="{{returnsUrl}}">{{'returns'|trans}}</a>
				<a class="btn btn-sm btn-outline-danger" href="{{archingUrl}}">{{'arching'|trans}}</a>
			</div>
		</header>

	<div class="events-content">
		<div class="events-products-area">
			<div class="events-products">
				{% for info in productsView %}
					{% for product in info.products %}
						<div class="events-product addToCart" data-price="{{product.price}}" data-name="{{product.name}}" data-product-id="{{product.id}}">
							<div class="events-product-image" style="background-image: url(/static/images/coffeeshop/{{product.image}});"></div>
							<div class="events-product-info">
								<span class="events-product-name">{{product.name}}</span>
								<span class="events-product-price">{{product.price}} €</span>
							</div>
						</div>
					{% endfor %}
				{% endfor %}

				{% if productsCount == 0 %}
					<div class="events-empty">No hay productos de eventos</div>
				{% endif %}
			</div>

			<div class="events-payment-actions">
				<button type="button" class="btn btn-success btn-block" data-toggle="modal" data-target="#payCartSmartCardModal" data-paymentMethod-id="8">{{'smart-card'|trans}}</button>
				<button class="btn btn-success btn-block" id="payCartCash" data-paymentMethod-id="1" data-target="#payCartCashModal">{{'cash'|trans}}</button>
				<button class="btn btn-success btn-block" id="payCartVisa" data-paymentMethod-id="5" data-target="#payCartVisaModal">{{'visa'|trans}}</button>
				<button class="btn btn-outline-warning btn-block" id="payInvited" data-paymentMethod-id="0">{{'invited'|trans}}</button>
			</div>
		</div>

		<aside class="events-cart-panel">
			<div>
				<h2 class="events-total">{{'total'|trans}}: <span id="totalCart">0</span>&euro;</h2>
				<div id="userShortScreenRow">
					<h4 id="userShortScreen"></h4>
					<button id="userShortScreenClean" style="display:none" onclick="cleanPanel()" class="btn btn-danger btn-block mb-2">Cancelar</button>
				</div>
			</div>

			<ul id="cart" class="list-group"></ul>

			<div class="events-actions events-ticket-actions">
				<button id="cleanCartButton" class="btn btn-danger btn-block">{{'empty'|trans}}</button>
			</div>

			<div class="events-keypad d-none">
				{% for number in [1,2,3,4,5,6,7,8,9,0] %}
					<button class="btn btn-light btn-lg individualAmountButton" value="{{number}}">{{number}}</button>
				{% endfor %}
				<button class="btn btn-warning btn-lg" id="individualAmountCorrect"><i class="fa fa-angle-double-left"></i></button>
				<button class="btn btn-danger btn-lg" id="individualAmountErase">X</button>
			</div>

			<div class="d-none">
				<div class="w-100 btn btn-info disabled d-none" id="totalIndividualAmountButton" value="0.00">0.00</div>
			</div>

		</aside>
	</div>
</section>

<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 %}