<% layout('layouts/boilerplate') %>
<div class="row">
  <div class="col col-md-8 offset-md-2">
    <div class="card shadow">
      <input type="hidden" value="<%= eventBooking._id %>" id="eventBookingId">
      <div class="row h-100 g-0">
        <div class="col-md-4">
          <div class="card-body">
            <div class="img align-middle text-center ms-2">
              <% if (eventBooking.event.img.url || eventBooking.event.eventHost.img.url) { %>
                <img id="eventImg" <% if (eventBooking.event.img.url) {%> aria-label="event-logo" <% } %> title="Hosted By <%= eventBooking.event.eventHost.name %>" class="rounded event-logo" src="<%= typeof eventBooking.event.img.url === 'undefined' ? eventBooking.event.eventHost.img.url : eventBooking.event.imgThumbnail %>" class="img-fluid rounded-start py-3 px-3" alt="...">
                <% if (eventBooking.event.img.url) { %><img style="left:65px" id="hostLogo" src="<%= eventBooking.event.eventHost.img.url %>" class="host-logo-fade" title="Hosted By <%= event.eventHost.name %>" alt="">
                <% } %>
                <% } %>
            </div>
          </div>
        </div>
        <div class="col-md-8">
          <div class="card-body">
            <h4 class="card-title">
              <p class="display-6">Pay for
                <%= currentUser && currentUser.equals(eventBooking.user) ? 'your' : 'another' %> booking</p>
              <a class="link-dark" href="/events/<%= eventBooking.event._id %>">
                <%= eventBooking.event.name %>
              </a>
            </h4>
            <p class="card-text">
              <i>
                <%= dateOutput(eventBooking.event.eventStart) %>
                                    <% if (dateOutput(eventBooking.event.eventStart) != dateOutput(eventBooking.event.eventEnd)) { %> to
                                    <%= dateOutput(eventBooking.event.eventEnd) %>
                                    <% } %><br /><small>
                  <a class="link-dark" target="_blank" href="https://www.google.com/maps/search/?api=1&query=<%= encodeURI(eventBooking.event.location) %>"><%= eventBooking.event.location.split(',')[0] %></a>
                </small>
              </i>
            <p class="card-text">
            <ul>
              <% for (eventTicket of eventBooking.eventTickets) { %>
              <li>
                <% if (['player','playerchild'].includes(eventTicket.ticketType)) { %> <i class="bi bi-ticket-detailed"></i>
                <% } %>
                <% if (['monster','monsterchild'].includes(eventTicket.ticketType)) { %> <i class='bi bi-bug-fill nav_icon'></i>
                <% } %>
                <% if (['staff'].includes(eventTicket.ticketType)) { %> <i class="bi bi-stopwatch"></i>
                <% } %>
                <% if (['mealticket','mealticketchild'].includes(eventTicket.ticketType)) { %> <i class="fa fa-cutlery" aria-hidden="true"></i>
                <% } %>
                <%= currencyOutput(eventTicket.cost) %> -
                <%= eventTicket.description %>
              </li>
              <% } %>
            </ul>
            <hr>
            <% if (eventBooking.eventTickets.filter(a => new Date(a.availableTo) < new Date()).length > 0 ) {%>
            <div class="alert alert-danger">
              <p>The tickets you have selected are no longer available!</p>
              <p><a href="#" onclick="document.getElementById('deleteRebook').submit()" class="alert-link">Click here</a> to delete this booking and re-book.</p>
              <form id="deleteRebook" action="/events/booking/<%= eventBooking._id %>?_method=DELETE&rebook=true" method="POST"></form>
            </div>
            <% } else { %>
            <p id="result-message"></p>
            <div id="paypal-button-container"></div>
            <% } %>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://www.paypal.com/sdk/js?client-id=AcZBxEtVxq308mof8Cb7uFmiM8CmzmlRX3e3TF1OhAx8RzRfDFxF-dp0OQYEMPbgNf7-qqw5pj96EyNq&currency=GBP"></script>
<script src="/js/paypal.js"></script>
<script src="/js/eventLogo.js"></script>