<% layout('layouts/boilerplate'); 
function toTitleCase(str) {
    try{
    if (typeof str == 'undefined') return '';
    return str.replace(/\w\S*/g, function(txt){
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
    }
    catch{return str}
};
%>
<% const dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; %>
    <div class="row">
        <div class="col d-md-none">
            <% if (event.ticketsAvailable && !event.externalBooking && event.allowBookings) { %>
                <div class="d-grid gap-2 mb-3">
                    <a href="/events/<%= event._id %>/book" class="btn btn-success">
                        <h3 class="mt-2"><i class="bi bi-ticket-detailed"></i> Book Tickets</h3>
                    </a>
                </div>
                <% } else if (event.externalBooking && event.allowBookings) { %>
                    <div class="d-grid gap-2 mb-3">
                        <a href="<%= event.externalBooking %>" data-bs-toggle="modal" data-bs-target="#externalBookingModal" class="btn btn-success">
                            <h3 class="mt-2"><i class="bi bi-ticket-detailed"></i> Book Tickets</h3>
                        </a>
                    </div>
                    <% } %>
        </div>
        <div class="col-md-9">
            <div class="card shadow py-3 px-3 mb-3">
                <div class="card-header bg-white">
                    <h2>
                        <%= event.name %>
                    </h2>
                </div>
                <div class="card-body">
                    <div class="text-center px-2 px-md-4 py-3">
                        <i>
                        <%- event.icInvitation %>
                        </i>
                    </div>
                    <ul class="nav nav-tabs" id="eventTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link link-dark active" id="info-tab" data-bs-toggle="tab" data-bs-target="#info-tab-pane" type="button" role="tab" aria-controls="info-tab-pane" aria-selected="true"><h4>Event Information</h4</button>
                        </li>
                        <% if (event.catering.display) { %>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link link-dark" id="catering-tab" data-bs-toggle="tab" data-bs-target="#catering-tab-pane" type="button" role="tab" aria-controls="info-tab-pane" aria-selected="true"><h4>Catering</h4</button>
                            </li>
                        <% } %>
                        <% if (event.attendees.length > 0 && currentUser) { %>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link link-dark" id="attendees-tab" data-bs-toggle="tab" data-bs-target="#attendees-tab-pane" type="button" role="tab" aria-controls="attendees-tab-pane" aria-selected="false"><h4>Attendees</h4></button>
                            </li>
                            <% } %>
                    </ul>
                    <div class="tab-content" id="eventTabsContent">
                        <div class="tab-pane fade show active mt-3" id="info-tab-pane" role="tabpanel" aria-labelledby="info-tab" tabindex="0">
                            <%- event.fullDescription %>
                        </div>
                        <% if (event.catering.display) { %>   
                            <div class="tab-pane fade mt-3" id="catering-tab-pane" role="tabpanel" aria-labelledby="info-tab" tabindex="0">
                                <div class="row">
                                    <div class="col">
                                        <p>Catering for this event is provided by <span class="lead"><%= event.catering.caterer %></span>.</p>
                                    </div>
                                    <% if (currentUser){ %>
                                    <% if (event.catering.choiceRequired && event.attendees.filter(a => a.user.equals(currentUser._id)).length > 0) { %>
                                    <div class="col-4 text-end">
                                        <a href="/events/<%= event._id %>/catering" class="btn btn-secondary">Submit your meal choices</a>
                                    </div>
                                    <% } %>
                                    <% } %>
                                </div>
                                <% if (event.catering.catererContact) { %>
                                <p>For any queries please contact the caterer at <%= event.catering.catererContact %></p>
                                <% } %>
                                <div class="mb-3">
                                    <%- event.catering.notes %>
                                </div>
                                <% const catering = JSON.parse(JSON.stringify(event.catering)) %>
                                <% if (catering?.menu) { %>
                                    <hr>
                                    <div class="row">
                                    <% for (var d = new Date(event.eventStart); d <= new Date(event.eventEnd); d.setDate(d.getDate() + 1)) { %>
                                        <% if (dayNames[new Date(d).getDay()]) { %>
                                        <div class="col text-center">
                                            <div class="lead"><%=  dayNames[new Date(d).getDay()] %></div>
                                            <% for (meal of Object.keys(catering?.menu[dayNames[new Date(d).getDay()]].meals)) { %>
                                                <p class="mb-0 mt-3"><b><%= catering.menu[dayNames[new Date(d).getDay()]].meals[meal].name %></b></p>
                                                <ul class="list-group list-group-flush">
                                                    <% for (option of catering.menu[dayNames[new Date(d).getDay()]].meals[meal].options){ %>
                                                        <li class="list-group-item" style="border-bottom:none"><%= option %></li>
                                                    <% } %>
                                                </ul>
                                            <% } %>
                                        </div>
                                        <% } %>
                                    <% } %>
                                    </div>
                                <% } %>
                            </div>
                        <% } %>
                        
                        <% if (event.attendees.length > 0 && currentUser) { %>
                            <div class="tab-pane fade mt-3" id="attendees-tab-pane" role="tabpanel" aria-labelledby="attendees-tab" tabindex="0">
                                <div class="row">
                                    <div class="col col-md-7">
                                        <h5>Players</h5>
                                        <table class="table table-sm table-hover table-borderless">
                                            <thead>
                                                <th scope="row">Player Name</th>
                                                <th scope="row">Character</th>
                                                <th scope="row"></th>
                                            </thead>
                                            <tbody>
                                                <% for (attendee of event.attendees.filter(f => f.ticketType == 'player' && f.display).sort((a,b) => a.surname.localeCompare(b.surname) || a.firstname.localeCompare(b.firstname) )){ %>
                                                    <tr>
                                                        <td scope="col">
                                                            <%= toTitleCase(attendee.firstname) %>
                                                                <%= toTitleCase(attendee.surname) %>
                                                        </td>
                                                        <td scope="col">
                                                            <%= toTitleCase(attendee.icName) %>
                                                        </td>
                                                        <% if (typeof attendee.customFields !== 'undefined') {for (field of attendee.customFields) { %>
                                                        <td scope="col">
                                                            <%= toTitleCase(field.value) %>
                                                        </td>
                                                        <% }} %>
                                                    </tr>
                                                    <% } %>
                                            </tbody>
                                        </table>
                                        <hr class="d-md-none">
                                    </div>
                                    <div class="col col-md-5">
                                        <h5>Event Crew</h5>
                                        <table class="table table-sm table-hover table-borderless">
                                            <thead>
                                                <th scope="row">Crew Name</th>
                                                <th scope="row">Role</th>
                                            </thead>
                                            <tbody>
                                                <% for (attendee of (event.attendees.filter(f =>{ return f.ticketType != 'player' && f.display })).sort((a,b) => { return ('' + a.ticketType).localeCompare(b.ticketType) || ('' + a.surname).localeCompare(b.surname) || ('' + a.firstname).localeCompare(b.firstname) })){ %>
                                                    <tr>
                                                        <td>
                                                            <%= toTitleCase(attendee.firstname) %>
                                                                <%= toTitleCase(attendee.surname) %>
                                                        </td>
                                                        <td>
                                                            <%= toTitleCase(attendee.ticketType) %>
                                                        </td>
                                                    </tr>
                                                    <% } %>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <p class="text-muted mt-3"><small>Only attendees that have selected to display their event attendance will be displayed here. This is not a definitive list of attendees.<br/>Update your <a href="/account" class="link-dark">Account Settings</a> to change your preferences.</small></p>
                            </div>
                            <% } %>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <%- include('../partials/eventSidebar')%>
        </div>
    </div>
    <% if (event.externalBooking) { %>
        <div class="modal fade" id="externalBookingModal" tabindex="-1" aria-labelledby="externalBookingModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="externalBookingModalLabel">External Booking Site</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        This event uses an external booking website. Do you wish to continue?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <a target="_blank" href="<%= event.externalBooking %>" type="button" class="btn btn-primary">Visit Booking Page</a>
                    </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>
                <% } %>