{% extends 'base.html.twig' %}
{% block title %}{{event.name}}{% endblock %}
{% block body %}
<script src="https://www.paypal.com/sdk/js?client-id={{clientID}}¤cy=EUR&commit=false&components=buttons,hosted-fields"></script>
<script>
function handleChange(input, max) {
if (input.value < 1) input.value = 1;
if (input.value > max) input.value = max;
}
</script>
<section id="containerBuyTicket" class="container">
<section class="slogan">
{% set photo = event.getImage('detail') %}
{% if not photo %}
{% set photo = 'default.png' %}
{% endif %}
<img src="/images/event/{{ photo }}" alt="{{event.name}}"/>
<div>
<h1>{{event.name}}</h1>
<p class="eventDescription">{{event.description | raw}}</p>
</div>
</section>
<section class="pricing">
{% if entradas|length > 0 %}
{% for entrada in entradas %}
<div id="entrada-{{entrada.id}}" class="entrada" data-price="{{entrada.price}}">
<div class="block-superior">
<p class="container-left">{{entrada.name}}</p>
<p class="container-right">{{entrada.price}} €</p>
</div>
<div class="block-inferior">
<div class="container-left">
<p><i class="far fa-calendar-alt"></i>
{{entrada.startDate | date("d/m/Y H:i")}}
</p>
<p><i class="fas fa-map-pin"></i>
{{entrada.place | raw}}
</p>
</div>
<div class="container-right">
{% if numTickets[entrada.id]['sold'] + numTickets[entrada.id]['reserved'] < entrada.maxTickets %}
{% if (entrada.maxTickets-numTickets[entrada.id][ 'sold']) < 50 %}
<div class="alert alert-danger text-center mb-1 mb-md-2 ml-3">SOLO QUEDAN {{entrada.maxTickets-numTickets[entrada.id]['sold']-numTickets[entrada.id]['reserved']}}</div>
{% endif %}
{% if numTickets[entrada.id]['reserved'] > 0 %}
<div class="alert alert-info text-center mb-1 mb-md-2 ml-3">{{numTickets[entrada.id]['reserved']}} se están vendiendo ahora.</div>
{% endif %}
<form action="/prebuy_ticket/{{entrada.id}}" method="POST" class="form-style form-alternative">
{% if shop %}
<div class="send-to-email">
<input type="email" name="altEmail" class="form-control" id="altEmail-{{entrada.id}}" placeholder="{{'Email To' |trans}}"/>
<input type="text" name="altName" class="form-control" id="altName-{{entrada.id}}" placeholder="{{'Name To' |trans}}"/>
</div>
{% endif %}
<div class="block-quantity-button">
<div class="quantity">
<div class="quantity-buttons">
<div class="quantity-up">+</div>
<div class="quantity-down">-</div>
</div>
{% if entrada.maxTickets - numTickets[entrada.id]['reserved'] - numTickets[entrada.id]['sold'] >= entrada.maxBuy %}
<input type="number" class="form-control" id="inputQuantity-{{entrada.id}}" name="quantity" value="1" min="0" max="{{entrada.maxBuy}}" onchange="handleChange(this,{{entrada.maxBuy}});">
{% else %}
<input type="number" class="form-control" id="inputQuantity-{{entrada.id}}" name="quantity" value="1" min="0" max="{{entrada.maxTickets - numTickets[entrada.id]['reserved'] - numTickets[entrada.id]['sold']}}" onchange="handleChange(this,{{entrada.maxTickets - numTickets[entrada.id]['reserved'] - numTickets[entrada.id]['sold']}});">
{% endif %}
</div>
{% if shop %}
<button type="submit" name="cash" class="form-control buy btn btn-primary">{{'Send' | trans}}</button>
{% else %}
<button type="submit" name="tpv" class="buy comprarboton btn btn-primary">{{'buy' | trans}}</button>
{% endif %}
</div>
</form>
{% if paypal and not shop %}
<div id="paypal-entrada-{{entrada.id}}" data-entrada-id="{{entrada.id}}" class="paypal-button"></div>
{% endif %}
{% else %}
<div class="alert alert-danger text-center">AGOTADAS</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="alert alert-warning">Aún no están las entradas a la venta. Vuelve pronto a EntradasyTickets.com para conseguirlas.</div>
{% endif %}
</section>
</section>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="/js/paypalPayment.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("body").on("submit", "form", function() {
$(this).submit(function() {
return false;
});
return true;
});
//CUSTOMIZING THE ARROWS FROM THE INPUT TYPE NUMBER
$('.quantity').each(function() {
let input = $(this).find('input[type="number"]');
let btnUp = $(this).find('.quantity-up');
let btnDown = $(this).find('.quantity-down');
let min = input.attr('min');
let max = input.attr('max');
btnUp.click(function() {
let oldValue1 = parseInt(input.val());
let newValue1;
if (oldValue1 >= max) {
newValue1 = oldValue1;
} else {
newValue1 = oldValue1 + 1;
}
input.val(newValue1);
input.trigger("change");
});
btnDown.click(function() {
let oldValue2 = parseInt(input.val());
let newValue2;
if (oldValue2 <= min) {
newValue2 = oldValue2;
} else {
newValue2 = oldValue2 - 1;
}
input.val(newValue2);
input.trigger("change");
});
});
});
</script>
{% endblock %}