<% layout('layouts/print') %>
<% const systemPrefix = ['i','e','a','o','u'].includes(eventBooking.event.eventHost.eventSystem.name.toLowerCase().charAt(0)) ? 'An' : 'A'; %>
<% const hostPrefix = ['i','e','a','o','u'].includes(eventBooking.event.eventHost.name.toLowerCase().charAt(0)) ? 'an' : 'a'; %>
<% const systemData = eventBooking.user[eventBooking.event.eventHost.eventSystem.systemRef]; %>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<div class="display-3 text-center my-4">Thanks For Booking!</div>
<div class="row ticket mb-2">
    <div class="col-2"></div>
    <div class="col-1">
        <div class="ticket-barcode-left">  
        </div>
    </div>
    <div class="col-6 text-white mt-4 pt-4" style="margin-left:-95px;">
        <h4 class="mt-2" style="margin-bottom: 0px;"><%= eventBooking.event.name %></h4>
        <%= dateOutput(eventBooking.event.eventStart) %>
                <% if (dateOutput(eventBooking.event.eventStart) != dateOutput(eventBooking.event.eventEnd)) { %> to
                <%= dateOutput(eventBooking.event.eventEnd) %>
                <% } %>
        <hr class="mt-0">
        <div class=""><small><em><%= eventBooking.event.location %></em></small></div>
        <div class="row mt-2">
            <div class="col"><h6 class="mb-0"><%= eventBooking.firstname %> <%= eventBooking.surname %></h6></div>
            <div class="col text-end"><%= eventBooking.payOnGate == true ? '<b>PAY ON GATE</b>' : '' %></div>
        </div>
        <hr>
        <div class="ticket-list" style="margin-top:-15px;">
            <div class="row">
                <div class="col-5">
                    <% if (eventBooking.event.eventHost.eventSystem.img) { %>
                        <img height="40px" src="<%= eventBooking.event.eventHost.eventSystem.img?.url %>" alt="" style="margin-left:-20px;">
                    <% } %>
                </div>
                <div class="col">
                    <ul class="list-group  list-group-flush list-group-horizontal">
                        <% for (ticket of eventBooking.eventTickets) { %>
                            <li class="list-group-item"><%= ticket.cost > 0 ? `${currencyOutput(ticket.cost)} - ` : '' %><%= ticket.description %></li>
                        <% } %>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="col-2 mt-3 pe-5">
        <div class="ticket-stub">
            <div id="qrcode" class="qrcode text-end"></div>   
        </div>       
    </div>
</div>
<hr>
<div class="row my-3 mb-5">
    <div class="col-3">
        <a class="navbar-brand" href="/"><% if (config.siteLogo?.url) { %><img style="height:80px;" class="pt-3" src="<%= config.imgThumbnail %>" alt="<%= config.siteName %>" title="<%= config.siteName %>"><% } else { %><%= config.siteName %> <% } %></a>
    </div>
    <div class="col">
        <div class="display-6 text-center">Event Booking</div>
    </div>
</div>
<div class="row receipt-body">
    <div class="col">
        <h2 class="mb-3">Event Booking</h2>
        <p class="mb-0"><b><%= eventBooking.event.name %></b></p>
        <p><%= dateOutput(eventBooking.event.eventStart) %>
            <% if (dateOutput(eventBooking.event.eventStart) != dateOutput(eventBooking.event.eventEnd)) { %> to
            <%= dateOutput(eventBooking.event.eventEnd) %>
            <% } %><br/>
        <a class="link-dark" target="_blank" href="https://www.google.com/maps/search/?api=1&query=<%= encodeURI(eventBooking.event.location) %>"><%= eventBooking.event.location %></a></p>
        <p>
            <%= systemPrefix %> <%= eventBooking.event.eventHost.eventSystem.name %> event<% if (eventBooking.event.eventHost.display == true) { %>, hosted by the <%= eventBooking.event.eventHost.name %><% } %>.<br/>
            Contact your event organiser at<br/><a class="link-dark" href="mailto:<%= eventBooking.event.eventHost.contactAddress %>"><%= eventBooking.event.eventHost.contactAddress %></a>.
        </p>
        <p><b>Booked:</b> <%= dateOutput(eventBooking.bookingMade) %> <%= timeOutput(eventBooking.bookingMade) %><br/>
        <b>Paid:</b> <%= dateOutput(eventBooking.bookingPaid) %> <%= timeOutput(eventBooking.bookingPaid) %><br/></p>
        <b>Purchased Event Tickets</b>
        <ul class="list-group list-group-flush">
            <% for (ticket of eventBooking.eventTickets) { %>
                <li class="list-group-item"><%= currencyOutput(ticket.cost) %> <%= ticket.description %></li>
            <% } %>
        </ul>
        <p><b>Total Due:</b> <%= currencyOutput(eventBooking.totalDue) %><br/>
            <b>Total Paid:</b> <%= currencyOutput(eventBooking.totalPaid) %>
        </p>
        <% if (eventBooking.paypalPaymentId) { %>
            <p>
                <b>Paypal ID:</b> <%= eventBooking.paypalPaymentId %><br/> 
                <b>Paypal Account:</b> <%= eventBooking.paypalPayer %><br/>
                <small class="ms-5"><em><b>Paid To:</b> <%= eventBooking.event.eventHost.paypalAddress %></em></small>
            </p>
        <% } %>
        
    </div>
    <div class="col">
        <h2 class="mb-3">Your Details</h2>
        <p>
            <b>Name:</b> <%= `${eventBooking.firstname} ${eventBooking.surname}` %><br/>
            <b>D.O.B:</b> <%= dateOutput(eventBooking.user?.dob) %><br/>
            <b>Email:</b> <%= eventBooking.user.username %>
        </p>
        <p>
            <b>Emergency Contact:</b> <%= eventBooking.user.emergencyContactName %> (<%= eventBooking.user.emergencyContactRelation %>)<br/>
            <b>Emergency Contact Number:</b> <%= eventBooking.user.emergencyContactNumber %>
        </p>
        <% if (eventBooking.user.medicalInfo.length > 0) { %>
            <p>
                <b>Medical Notes:</b><br/>
                <%= eventBooking.user.medicalInfo %>
            </p>
        <% } %>
        <% if (eventBooking.user.allergyDietary.length > 0) { %>
            <p>
                <b>Allergy/Dietary Notes:</b><br/>
                <%= eventBooking.user.allergyDietary %>
            </p>
        <% } %>
        <hr>
        <div class="row">
            <div class="col">
                <p>
                    <b>Character Name:</b> <%= systemData.character.characterName %><br/>
                    <% for (field of eventBooking.event.eventHost.eventSystem.customFields.filter(a => a.section == 'character')) {%>
                        <b><%= field.label %>:</b> <%= systemData.character?.[field.name] %><br/>
                    <% } %>
                </p>
                <p>
                    <% for (field of eventBooking.event.eventHost.eventSystem.customFields.filter(a => a.section == 'player')) {%>
                        <b><%= field.label %>:</b> <%= systemData[field.name] %><br/>
                    <% } %>
                    </p>
            </div>
        </div>
    </div>
</div>
<script>
new QRCode('qrcode', {
          text: '<%= eventBooking._id %>',
          width: 100,
          height: 100,
          colorDark: "#c2272d",
          colorLight: "#f2f2f2",
          correctLevel: QRCode.CorrectLevel.H
        });
</script>