<% layout('layouts/boilerplate') %>
<% var playerTickets = event.eventTickets.filter(e => ['player','playerchild'].includes(e.ticketType) && new Date(e.availableFrom) < new Date() && new Date(e.availableTo) > new Date() && e.available); %>
<% var monsterTickets = event.eventTickets.filter(e => ['monster','monsterchild'].includes(e.ticketType) && new Date(e.availableFrom) < new Date() && new Date(e.availableTo) > new Date() && e.available); %>
<% var staffTickets = event.eventTickets.filter(e => ['staff'].includes(e.ticketType) && new Date(e.availableFrom) < new Date() && new Date(e.availableTo) > new Date() && e.available); %>
<% const systemPrefix = ['i','e','a','o','u'].includes(event.eventHost.eventSystem.name.toLowerCase().charAt(0)) ? 'an' : 'a'; %>
<% const hostPrefix = ['i','e','a','o','u'].includes(event.eventHost.name.toLowerCase().charAt(0)) ? 'an' : 'a'; %>
<div class="row">
	<div class="col">
		<div class="card shadow py-3 px-3 mb-3">
			<div class="card-header bg-white">
				<h4>
					<%= event.name %> - Ticket Booking
				</h4>
			</div>
			<% var mealTickets = event.eventTickets.filter(e => ['mealticket','mealticketchild'].includes(e.ticketType) && new Date(e.availableFrom) < new Date() && new Date(e.availableTo) > new Date() && e.available); %>
			<div class="card-body">
				<% if (event.attendees.find(a => a.user?.equals(currentUser._id)) && !changeUser) { %>
				<div class="alert alert-warning">
					You already have a booking for this event! <a href="/account/bookings" class="alert-link">Click here</a> to view your booking.
				</div>
				<% } %>
				<% if (changeUser) { %>
				<div class="alert alert-warning">
					<h4 class="alert-heading">ADMIN
						<%= manual ? 'MANUAL ' : '' %>BOOKING</h4>
					<p>Please be aware you are currently booking for another user account</p>
					<% if (manual) { %>
					<p>Manual Bookings will never be displayed on event pages</p>
					<% }%>
				</div>
				<% } %>
				<ul class="nav nav-tabs mb-3" id="pills-tab" role="tablist">
					<% if (playerTickets.length > 0) { %>
					<li class="nav-item" role="presentation">
						<a class="nav-link link-dark <%= playerTickets.length > 0 ? 'active' : '' %>" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true"><i class="bi bi-ticket-detailed"></i> Player Bookings</a>
					</li>
					<% } if (monsterTickets.length > 0) { %>
					<li class="nav-item" role="presentation">
						<button class="nav-link link-dark <%= playerTickets.length == 0 ? 'active' : '' %>" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false"><i class='bi bi-bug-fill nav_icon'></i> Monster Bookings</button>
					</li> <% } %>
					<% if (staffTickets.length > 0) { %>
					<li class="nav-item" role="presentation">
						<button class="nav-link link-dark <%= playerTickets.length == 0 && monsterTickets.length == 0 ? 'active' : '' %>" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false"><i class="bi bi-stopwatch"></i> Staff Bookings</button>
					</li>
					<% } %>
				</ul>
				<div class="tab-content" id="pills-tabContent">
					<% if (playerTickets.length > 0) { %>
					<div class="tab-pane fade <%= playerTickets.length > 0 ? 'show active' : '' %>" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
						<p>Book to play <b>
								<%= event.name %>!</b></p>
						<form id="playerTickets" class="validated-form" action="/events/<%= event._id %>/book" method="POST" novalidate>
							<% if (event.playerSpaces === 0 && !event.overflowQueue) { %>
							<div class="alert alert-danger" role="alert">
								Sorry! Player tickets are currently fully booked.
							</div>
							<% } else { %>
							<% if (event.playerSpaces === 0 && event.overflowQueue) { %>
							<div class="alert alert-danger" role="alert">
								Player tickets are currently fully booked. You can still book however you will be entered into a waiting list.
							</div>
							<% } if(changeUser) { %>
							<% if (manual) { %>
							<div class="row">
								<div class="col">
									<div class="mb-3">
										<label for="firstname">First Name</label>
										<input required type="text" name="firstname" class="form-control">
									</div>
								</div>
								<div class="col">
									<div class="mb-3">
										<label for="surname">Surname</label>
										<input required type="text" name="surname" class="form-control">
									</div>
								</div>
							</div>
							<% } else { %>
							<div class="mb-3">
								<label for="username">E-mail Address</label>
								<input class="form-control" type="email" name="username" required>
								<div class="invalid-feedback">Please enter a valid e-mail address</div>
							</div>
							<% }} %>
							<p>The following tickets are available to play</p>
							<% 
                                for (ticket of playerTickets) { %>
							<div class="mb-3 form-check">
								<input class="form-check-input" type="radio" required id="ticket_<%= ticket._id %>" value="<%= ticket._id %>" name="ticketSelected[playerTickets]" <%= playerTickets.length == 1 ? 'checked' : '' %>>
								<label class="form-check-label" for="ticket_<%= ticket._id %>">
									<%= ticket.cost > 0 ? `${currencyOutput(ticket.cost)} - ` : '' %><%= ticket.description %></label>
								<div class="invalid-feedback">You must select a ticket</div>
							</div>
							<%  } %>
							<% var playerBunkTickets = event.eventTickets.filter(e => ['playerbunk'].includes(e.ticketType) && new Date(e.availableFrom) < new Date() && new Date(e.availableTo) > new Date() && e.available);
                                if (playerBunkTickets.length > 0){ %>
							<hr>
							<h5>Indoor Bunks</h5>
							<% if (event.playerBunkSpaces === 0) { %>
							<div class="alert alert-danger" role="alert">
								Sorry! Player bunks are currently fully booked.
							</div>
							<% } else { %>
							<% for (ticket of playerBunkTickets){ %>
							<div class="mb-3 form-check">
								<input class="form-check-input" type="radio" id="ticket_<%= ticket._id %>" value="<%= ticket._id %>" name="ticketSelected[playerBunks]">
								<label class="form-check-label" for="ticket_<%= ticket._id %>">
									<%= ticket.cost > 0 ? `${currencyOutput(ticket.cost)} - ` : '' %><%= ticket.description %></label>
							</div>
							<% } } } %>


							<% if (mealTickets.length > 0){ %>
							<hr>
							<h5>Meal Tickets</h5>
							<% for (ticket of mealTickets){ %>
							<div class="mb-3 form-check">
								<input class="form-check-input" type="radio" id="ticket_<%= ticket._id %>" value="<%= ticket._id %>" name="ticketSelected[playerMeal]">
								<label class="form-check-label" for="ticket_<%= ticket._id %>">
									<%= currencyOutput(ticket.cost) %> - <%= ticket.description %></label>
							</div>
							<% } } %>
							<div class="<%= !event.eventHost.eventSystem.terms ? 'mb-3' : '' %> form-check">
								<input type="checkbox" name="terms" id="termsPlayer" class="form-check-input" required>
								<label for="termsPlayer">I agree to <%= config.siteName %> <a class="link-dark" data-bs-toggle="modal" data-bs-target="#termsModal" href="/terms" target="_blank">Terms & Conditions</a></label>
								<div class="invalid-feedback">In order to book an event hosted by <%= config.siteName %> you must agree to our Terms & Conditions</div>
							</div>
							<% if (event.eventHost.eventSystem.terms) { %>
								<div class="<%= !event.eventHost.terms ? 'mb-3' : '' %> form-check">
								<input type="checkbox" name="terms" id="termsSystemPlayer" class="form-check-input" required>
								<label for="termsSystemPlayer">I agree to <%= event.eventHost.eventSystem.name %> <a class="link-dark" data-bs-toggle="modal" data-bs-target="#systemTermsModal" href="/system/<%= event.eventHost.eventSystem.systemRef %>/terms" target="_blank">Terms & Conditions</a></label>
								<div class="invalid-feedback">In order to book <%= systemPrefix %> <%= event.eventHost.eventSystem.name %> event you must agree to their Terms & Conditions</div>
							</div>
                    		<% } %>
							<% if (event.eventHost.terms) { %>
								<div class="mb-3 form-check">
								<input type="checkbox" name="terms" id="termsHostPlayer" class="form-check-input" required>
								<label for="termsHostPlayer">I agree to the event hosts <a class="link-dark" data-bs-toggle="modal" data-bs-target="#hostTermsModal" href="" target="_blank">Terms & Conditions</a></label>
								<div class="invalid-feedback">In order to book <%= hostPrefix %> <%= event.eventHost.name %> event you must agree to their hosts Terms & Conditions</div>
							</div>
                    		<% } %>
							<div class=" mb-3">
								<button class="btn btn-success">
									<h5 class="mt-2"><i class="bi bi-ticket-detailed"></i> Book a Player Ticket</h5>
								</button>
							</div>
							<% } %>
						</form>

					</div> <% } if (monsterTickets.length > 0) {%>
					<div class="tab-pane fade <%= playerTickets.length == 0 ? 'show active' : '' %>" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
						<p>Book to monster/crew <b>
								<%= event.name %>!</b></p>
						<form id="monsterTickets" class="validated-form" action="/events/<%= event._id %>/book" method="POST" novalidate>
							<% if (event.monsterSpaces === 0 && !event.overflowQueue) { %>
							<div class="alert alert-danger" role="alert">
								Sorry! Monster tickets are currently fully booked.
							</div>
							<% } else { %>
							<% if (event.monsterSpaces === 0 && event.overflowQueue) { %>
							<div class="alert alert-danger" role="alert">
								Player tickets are currently fully booked. You can still book however you will be entered into a waiting list.
							</div>
							<% } if(changeUser) { %>
							<% if (manual) { %>
							<% } else { %>
							<div class="mb-3">
								<label for="username">E-mail Address</label>
								<input class="form-control" type="email" name="username" required>
								<div class="invalid-feedback">Please enter a valid e-mail address</div>
							</div>
							<% }} %>
							<p>The following tickets are available to monster</p>
							<%  for (ticket of monsterTickets) { %>
							<div class="mb-3 form-check">
								<input class="form-check-input" type="radio" required id="ticket_<%= ticket._id %>" value="<%= ticket._id %>" name="ticketSelected[monsterTicket]" <%= monsterTickets.length == 1 ? 'checked' : '' %>>
								<label class="form-check-label" for="ticket_<%= ticket._id %>">
									<%= ticket.cost > 0 ? `${currencyOutput(ticket.cost)} - ` : '' %><%= ticket.description %></label>
								<div class="invalid-feedback">You must select a ticket</div>
							</div>
							<% } %>

							<% var monsterBunkTickets = event.eventTickets.filter(e => ['monsterbunk'].includes(e.ticketType) && new Date(e.availableFrom) < new Date() && new Date(e.availableTo) > new Date() && e.available);
                                if (monsterBunkTickets.length > 0){ %>
							<hr>
							<h5>Indoor Bunks</h5>
							<% if (event.monsterBunkSpaces === 0) { %>
							<div class="alert alert-danger" role="alert">
								Sorry! Monster tickets are currently fully booked.
							</div>
							<% } else { %>
							<% for (ticket of monsterBunkTickets){ %>
							<div class="mb-3 form-check">
								<input class="form-check-input" type="radio" id="ticket_<%= ticket._id %>" value="<%= ticket._id %>" name="ticketSelected[monsterBunk]">
								<label class="form-check-label" for="ticket_<%= ticket._id %>">
									<%= ticket.cost > 0 ? `${currencyOutput(ticket.cost)} - ` : '' %><%= ticket.description %></label>
							</div>
							<% } } }%>

							<% if (mealTickets.length > 0){ %>
							<hr>
							<h5>Meal Tickets</h5>
							<% for (ticket of mealTickets){ %>
							<div class="mb-3 form-check">
								<input class="form-check-input" type="radio" id="ticket_<%= ticket._id %>" value="<%= ticket._id %>" name="ticketSelected[monsterMeal]">
								<label class="form-check-label" for="ticket_<%= ticket._id %>">
									<%= ticket.cost > 0 ? `${currencyOutput(ticket.cost)} - ` : '' %><%= ticket.description %></label>
							</div>
							<% } } %>
							<div class="<%= !event.eventHost.eventSystem.terms ? 'mb-3' : '' %> form-check">
								<input type="checkbox" name="terms" id="termsMonster" class="form-check-input" required>
								<label for="termsMonster">I agree to <%= config.siteName %> <a class="link-dark" href="/terms" target="_blank">Terms & Conditions</a></label>
								<div class="invalid-feedback">In order to book an event hosted by <%= config.siteName %> you must agree to our Terms & Conditions</div>
							</div>
							<% if (event.eventHost.eventSystem.terms) { %>
								<div class="<%= !event.eventHost.terms ? 'mb-3' : '' %> form-check">
								<input type="checkbox" name="terms" id="termsSystemMonster" class="form-check-input" required>
								<label for="termsSystemMonster">I agree to <%= event.eventHost.eventSystem.name %> <a class="link-dark" data-bs-toggle="modal" data-bs-target="#systemTermsModal" href="/system/<%= event.eventHost.eventSystem.systemRef %>/terms" target="_blank">Terms & Conditions</a></label>
								<div class="invalid-feedback">In order to book <%= systemPrefix %> <%= event.eventHost.eventSystem.name %> event you must agree to their Terms & Conditions</div>
							</div>
                    		<% } %>
							<% if (event.eventHost.terms) { %>
								<div class="mb-3 form-check">
								<input type="checkbox" name="terms" id="termsHostMonster" class="form-check-input" required>
								<label for="termsHostMonster">I agree to the event hosts> <a class="link-dark" data-bs-toggle="modal" data-bs-target="#hostTermsModal" href="" target="_blank">Terms & Conditions</a></label>
								<div class="invalid-feedback">In order to book <%= hostPrefix %> <%= event.eventHost.name %> event you must agree to their hosts Terms & Conditions</div>
							</div>
                    		<% } %>
							<button class="btn btn-danger mb-3">
								<h5 class="mt-2"><i class="bi bi-ticket-detailed"></i> Book A Monster Ticket</h5>
							</button>
							<% } %>
						</form>
					</div> <% } if (staffTickets.length > 0) { %>
					<div class="tab-pane fade <%= playerTickets.length == 0 && monsterTickets.length == 0 ? 'show active' : '' %>" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
						<p>Book to staff <b>
								<%= event.name %>!</b></p>
						<p>The following tickets are available for staff</p>
						<form id="staffTickets" class="validated-form" action="/events/<%= event._id %>/book" method="POST" novalidate>
							<% if (event.staffSpaces === 0 && !event.overflowQueue) { %>
							<div class="alert alert-danger" role="alert">
								Sorry! Staff tickets are currently fully booked.
							</div>
							<% } else { %>
							<% if (event.staffSpaces === 0 && event.overflowQueue) { %>
							<div class="alert alert-danger" role="alert">
								Staff tickets are currently fully booked. You can still book however you will be entered into a waiting list.
							</div>
							<% } if(changeUser) { %>
							<% if (manual) { %>
							<% } else { %>
							<div class="mb-3">
								<label for="username">E-mail Address</label>
								<input class="form-control" type="email" name="username" required>
								<div class="invalid-feedback">Please enter a valid e-mail address</div>
							</div>
							<% }} %>
							<% for (ticket of staffTickets) { %>
							<div class="mb-3 form-check">
								<input class="form-check-input" type="radio" required id="ticket_<%= ticket._id %>" value="<%= ticket._id %>" name="ticketSelected[staffTicket]" <%= staffTickets.length == 1 ? 'checked' : '' %>>
								<label class="form-check-label" for="ticket_<%= ticket._id %>">
									<%= ticket.cost > 0 ? `${currencyOutput(ticket.cost)} - ` : '' %><%= ticket.description %></label>
								<div class="invalid-feedback">You must select a ticket</div>
							</div>
							<% } %>

							<% var staffBunkTickets = event.eventTickets.filter(e => ['staffbunk'].includes(e.ticketType) && new Date(e.availableFrom) < new Date() && new Date(e.availableTo) > new Date() && e.available);
                                if (staffBunkTickets.length > 0){ %>
							<hr>
							<h5>Indoor Bunks</h5>
							<% for (ticket of staffBunkTickets){ %>
							<div class="mb-3 form-check">
								<input class="form-check-input" type="check" id="ticket_<%= ticket._id %>" value="<%= ticket._id %>" name="ticketSelected[staffBunk]">
								<label class="form-check-label" for="ticket_<%= ticket._id %>">
									<%= ticket.cost > 0 ? `${currencyOutput(ticket.cost)} - ` : '' %><%= ticket.description %></label>
							</div>
							<% } } %>

							<% if (mealTickets.length > 0){ %>
							<hr>
							<h5>Meal Tickets</h5>
							<% for (ticket of mealTickets){ %>
							<div class="mb-3 form-check">
								<input class="form-check-input" type="radio" id="ticket_<%= ticket._id %>" value="<%= ticket._id %>" name="ticketSelected[staffMeal]">
								<label class="form-check-label" for="ticket_<%= ticket._id %>">
									<%= ticket.cost > 0 ? `${currencyOutput(ticket.cost)} - ` : '' %><%= ticket.description %></label>
							</div>
							<% } } %>
							<div class="<%= !event.eventHost.eventSystem.terms ? 'mb-3' : '' %> form-check">
								<input type="checkbox" name="terms" id="termsStaff" class="form-check-input" required>
								<label for="termsStaff">I agree to <%= config.siteName %> <a class="link-dark" href="/terms"  data-bs-toggle="modal" data-bs-target="#termsModal" href="/terms" target="_blank">Terms & Conditions</a></label>
								<div class="invalid-feedback">In order to book an event hosted by <%= config.siteName %> you must agree to our Terms & Conditions</div>
							</div>
							<% if (event.eventHost.eventSystem.terms) { %>
								<div class="<%= !event.eventHost.terms ? 'mb-3' : '' %> form-check">
								<input type="checkbox" name="terms" id="termsSystemStaff" class="form-check-input" required>
								<label for="termsSystemStaff">I agree to <%= event.eventHost.eventSystem.name %> <a class="link-dark" data-bs-toggle="modal" data-bs-target="#systemTermsModal" href="/system/<%= event.eventHost.eventSystem.systemRef %>/terms" target="_blank">Terms & Conditions</a></label>
								<div class="invalid-feedback">In order to book <%= systemPrefix %> <%= event.eventHost.eventSystem.name %> event you must agree to their Terms & Conditions</div>
							</div>
                    		<% } %>
							<% if (event.eventHost.terms) { %>
								<div class="mb-3 form-check">
								<input type="checkbox" name="terms" id="termsHostStaff" class="form-check-input" required>
								<label for="termsHostStaff">I agree to the event hosts <a class="link-dark" data-bs-toggle="modal" data-bs-target="#hostTermsModal" href="" target="_blank">Terms & Conditions</a></label>
								<div class="invalid-feedback">In order to book <%= hostPrefix %> <%= event.eventHost.name %> event you must agree to the host's Terms & Conditions</div>
							</div>
                    		<% } %>
							<button class="btn btn-primary mb-3">
								<h5 class="mt-2"><i class="bi bi-ticket-detailed"></i> Book A Staff Ticket</h5>
							</button>
							<% } %>
						</form>
						<i>Please note: Staff tickets are usually by invitation only. Please do not book as staff without speaking to the event organisers first.</i>
					</div>
					<% } %>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-3">
		<%- include('../partials/eventSidebar')%>
	</div>
</div>

<div class="modal fade" id="hostTermsModal" tabindex="-1" aria-labelledby="hostTermsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="hostTermsModalLabel"><%= event.eventHost.name %> Terms & Conditions</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <%- event.eventHost.terms %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="systemTermsModal" tabindex="-1" aria-labelledby="systemTermsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="systemTermsModalLabel"><%= event.eventHost.eventSystem.name %> Terms & Conditions</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <%- event.eventHost.eventSystem.terms %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="termsModalLabel"><%= config.siteName %> Terms & Conditions</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <%- config.terms %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<% if (event.img.url) { %>
<script>
	document.getElementById('eventImg')
		.addEventListener('mouseenter', () => {
			document.getElementById('eventImg')
				.classList.add('event-logo-fade');
			document.getElementById('hostLogo')
				.classList.remove('host-logo-fade');
			document.getElementById('hostLogo')
				.classList.add('host-logo');
		})
	document.getElementById('eventImg')
		.addEventListener('mouseleave', () => {
			document.getElementById('eventImg')
				.classList.remove('event-logo-fade');
			document.getElementById('hostLogo')
				.classList.add('host-logo-fade');
			document.getElementById('hostLogo')
				.classList.remove('host-logo');
		})

	document.getElementById('hostLogo')
		.addEventListener('mouseenter', () => {
			document.getElementById('eventImg')
				.classList.add('event-logo-fade');
			document.getElementById('hostLogo')
				.classList.remove('host-logo-fade');
			document.getElementById('hostLogo')
				.classList.add('host-logo');
		})
	document.getElementById('hostLogo')
		.addEventListener('mouseleave', () => {
			document.getElementById('eventImg')
				.classList.remove('event-logo-fade');
			document.getElementById('hostLogo')
				.classList.add('host-logo-fade');
			document.getElementById('hostLogo')
				.classList.remove('host-logo');
		})
</script>
<% } %>