	<script>
	var slotDates = {{ slotDates }};
	var reservations = {{ reservations }};
	var eventStart = {{ eventStart }};
	var eventEnd = {{ eventEnd }};
	var userId = {{ userId }};
	var reservations = {{ reservations }};
	var selectedDate = '{{ selectedDate }}';
	function selectEvent(event)
	{
		$('.Event').hide();
		$('#Event'+event).show();
		$('#Event'+event+' .CancelEvent').show();
		$('#Event'+event+' .SelectEvent').hide();
		$('.Tickets').hide();
		$('#Tickets' + event).show();
		$('INPUT[name="EventId"]').val(event);
	}
	function clearEventSelection()
	{
		clearTicketSelection();
		$('.Event').show();
		$('.SelectEvent').show();
		$('.CancelEvent').hide();
		$('#PersonDetails').hide();
		$('.Tickets').hide();
		$('INPUT[name="EventId"]').val(null);
	}
	function selectTicket(event, ticket)
	{
		$('.Ticket').hide();
		$('#Event' + event + 'Ticket' + ticket).show();
		$('#Event' + event + 'Ticket' + ticket + ' .SelectTicket').hide();
		$('#Event' + event + 'Ticket' + ticket + ' .CancelTicket').show();
		$('#PersonDetails').show();
		$('INPUT[name="TicketId"]').val(ticket);
	}
	function clearTicketSelection()
	{
		$('.Ticket').show();
		$('.SelectTicket').show();
		$('.CancelTicket').hide();
		$('#PersonDetails').hide();
		$('.Tickets').show();
		$('INPUT[name="TicketId"]').val(null);
	}
	function confirmForm()
	{
		var event = $('INPUT[name="EventId"]').val();
		var ticket = $('INPUT[name="TicketId"]').val();
		var name = $('INPUT[name="Name"]').val();
		var family = $('INPUT[name="Family"]').val();
		var team = $('INPUT[name="Team"]').val();
		var phone = $('INPUT[name="Phone"]').val();
		var email = $('INPUT[name="EMail"]').val();

		if(isNaN(event) || isNaN(ticket))
		{
			$('#Error').show();
			$('#Error').html('Системна грешка! Моля презаредете страницата и изберете отново събитие и билет!');
			return false;
		}
		if(name.trim().length <= 3)
		{
			$('#Error').show();
			$('#Error').html('Моля въведете име!');
			return false;
		}
		if(family.trim().length <= 3)
		{
			$('#Error').show();
			$('#Error').html('Моля въведете фамилия!');
			return false;
		}
		if(phone.trim().length <= 7)
		{
			$('#Error').show();
			$('#Error').html('Моля въведете телефон!');
			return false;
		}
		if(!email.toLowerCase()
				.match(
				  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
				))
		{
			$('#Error').show();
			$('#Error').html('Моля въведете e-mail!');
			return false;
		}
		$('#Error').hide();

		var post = { event: event, ticket: ticket, name: name, family: family, team: team, phone: phone, email: email };
		post.{{ security.getTokenKey() }} = '{{ security.getToken() }}';

		var posting = $.post('/', post);
		posting.done(function( data ) {
				if(data.Error)
				{
					$('#Error').show();
					$('#Error').html(data.Error);
				}
				else
				{
					window.location.href = '/success/' + data.ReservationId;
				}
			});

		return true;
	}
	$( function()
	{
		$( "#datepicker" ).datepicker(
		{
			dateFormat: "dd.mm.yy",
			minDate: '+1D',
			maxDate: eventEnd,
			defaultDate: '{{ date("d.m.Y", strtotime(selectedDate)) }}',
			firstDay: 1,
			dayNames: ['Неделя', 'Понеделник', 'Вторник', 'Сряда', 'Четвъртък', 'Петък', 'Събота'],
			dayNamesShort: ['Нед', 'Пон', 'Вто', 'Сря', 'Чет', 'Пет', 'Съб'],
			dayNamesMin: ['Нд', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
			monthNames: ['Януари', 'Февруари', 'Март', 'Април', 'Май', 'Юни', 'Юли', 'Август', 'Септември', 'Октомври', 'Ноември', 'Декември'],
		    beforeShowDay: function(d)
			{
				var appendStyle = '';
				if(reservations.filter(s => s.includes(d.getFullYear() + '-' + ('0' + (d.getMonth() + 1)).slice(-2) + '-' + ('0' + d.getDate()).slice(-2))).length > 0)
				{
					appendStyle = ' ui-state-event-marked';
				}
				else
				{
					appendStyle = ' ui-state-event-empty';
				}

				if(selectedDate == d.getFullYear() + '-' + ('0' + (d.getMonth() + 1)).slice(-2)+ '-' + ('0' + d.getDate()).slice(-2))
				{
					return [true, 'ui-state-active' + appendStyle];
				}

				if(slotDates.filter(s => s.includes(d.getFullYear() + '-' + ('0' + (d.getMonth() + 1)).slice(-2) + '-' + ('0' + d.getDate()).slice(-2))).length > 0)
				{
					return [true, 'ui-state-event' + appendStyle];
				}
				else
				{
					return [true, 'ui-state-disabled'];
				}

				return [true, ''];
			},
			onSelect: function(dateText, inst)
			{
				window.location.href = '/calendar/' + inst.selectedYear + '-' + ('0' + (inst.selectedMonth + 1)).slice(-2) + '-' + ('0' + (inst.selectedDay)).slice(-2);
			}
		});
	} );
	</script>
	
{{ message }} 

<div id="datepicker"></div>

<div id="EventDetails">
	{{ selectedDate ? '<p><h3>Избрана дата: ' ~ date('d.m.Y', strtotime(selectedDate)) ~ '</h3></p>' : '' }}
	{{ instruction | default('Моля изберете дата.') }}
</div>

{% if slots %}
<p>Часове:</p>
	{% for slot in slots %}
	<p>
		<h3>{{ slot }}</h3><br>
		<?php $found = false; ?>
		{% for res in reservationsData %}
			{% if res.DateTime == selectedDate ~ ' ' ~ slot and res.UserId == userId %}
				<?php $found = true; ?>
			{% endif %}
		{% endfor %}
		<form method="post">
		<input type="hidden" name="Event" value="1">
		<input type="hidden" name="DateTime" value="{{ selectedDate ~ ' ' ~ slot }}">
		{% if found %}
		<input type="submit" name="UnReserve" value="Отпиши ме!">
		{% else %}
		<input type="submit" name="Reserve" value="Запиши ме!">
		{% endif %}
		</form>
		<?php $found = false; ?>
		{% for res in reservationsData %}
			{% if res.DateTime == selectedDate ~ ' ' ~ slot %}
				<?php $found = true; ?>
			{% endif %}
		{% endfor %}
		{% if found %}
		Заявки:
		{% else %}
		Няма желаещи!
		{% endif %}
		<ol>
		{% for res in reservationsData %}
			{% if res.DateTime == selectedDate ~ ' ' ~ slot %}
		<li>
			<h3>{{ res.User.Name }}</h3>
		</li>
			{% endif %}
		{% endfor %}
		</ol>
	</p>
	{% endfor %}
{% endif %}

<br><br>