<% layout('layouts/boilerplate') 
function toTitleCase(str) {
    if (typeof str == 'undefined') return '';
    return str.replace(/\w\S*/g, function(txt){
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
};%>
<!-- <script src="https://cdn.tiny.cloud/1/9rpfmnglpt10wzitgh0d0zn5ru3343oti9q4hfwl9of7mwpu/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script> -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb small">
    <li class="breadcrumb-item"><a href="/admin/events/<%= currentUser.role == 'eventHost' ? '' : 'all' %>" class="link-dark">Manage Events</a></li>
    <li class="breadcrumb-item"><a href="/admin/events/<%= event._id %>/manage" class="link-dark"><%= event.name %></a></li>
    <li class="breadcrumb-item active" aria-current="page">Editing Event</li>
  </ol>
</nav>
<div class="card shadow py-3 px-3 mb-3">
  <input type="hidden" id="eventId" value="<%= event._id %>">
  <form action="/admin/events/<%= event._id %>/edit?_method=PUT" method="POST" enctype="multipart/form-data">
    <div class="row">
      <div class="col border-end">
        <div class="mb-3">
          <label for="eventName">Event Name</label>
          <div class="input-group">
            <input class="form-control" type="text" id="eventName" name="event[name]" value="<%= event.name %>">
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="mb-3">
              <label for="eventStartDate">Start Date</label>
              <input class="form-control" type="date" id="eventStartDate" name="event[eventStart]" value="<%= new Date(event.eventStart).toISOString().split('T')[0] %>">
            </div>
          </div>
          <div class="col">
            <div class="mb-3">
              <label for="eventEndDate">End Date</label>
              <input class="form-control" type="date" id="eventEndDate" name="event[eventEnd]" value="<%= new Date(event.eventEnd).toISOString().split('T')[0] %>">
            </div>
          </div>
        </div>
        <div class="mb-3">
          <label for="eventLocation">Event Location</label>
          <input class="form-control" type="text" id="eventLocation" name="event[location]" value="<%= event.location %>">
        </div>
        <div class="row">
          <div class="col">
            <div class="mb-3">
              <label for="eventHost">Event Host</label>
              <select class="form-select" aria-label="Default select example" onchange="setHostImageUrl(this)" id="eventHost" name="event[eventHost]">
                <option <%= event.eventHost.name === '' ? 'selected' : '' %>>Select an Event Host</option>
                <% for (host of eventHosts.sort((a, b) => a.eventSystem.name.localeCompare(b.eventSystem.name) || a.name.localeCompare(b.name))) { %>
                  <% if ((currentUser.eventHosts.filter(a => a._id.equals(host._id)).length > 0) || currentUser.eventSystems.filter(a => a._id.equals(host.eventSystem._id)).length > 0|| ['admin','superAdmin'].includes(currentUser.role)) { %>
                <option <%= event.eventHost._id.equals(host._id) ? 'selected' : '' %> data-img="<%= host.img %>" value="<%= host._id %>"> <%= host.eventSystem.name %>
                  <%= host.display ? ` - ${host.name}` : '' %></option>
                <% }} %>
              </select>
              <input type="hidden" class="form-control" id="eventImageUrl" onblur="setHostImageUrl(this)" name="event[hostImg]" readonly value="<%= event.hostImg %>">
            </div>
            <div class="mb-3">
              <label for="eventImg" class="form-label">Upload Custom Event Image</label>
              <input class="form-control" type="file" id="eventImg" name="image" accept="image/png, image/jpeg">
            </div>
            <div class="mb-3">
              <label for="externalBooking">External Booking Link</label>
              <input type="url" class="form-control" id="externalBooking" name="event[externalBooking]" value="<%= event.externalBooking %>">
            </div>
            <div class="mb-3 row">
              <div class="col-8"><label title="When the event is full will add bookings to a waiting list. Players in the waiting list require manual approval to pay." for="eventBookingQueue">Use Waiting List</label></div>
              <div class="col">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" role="switch" name="event[overflowQueue]" id="eventBookingQueue" <%=( event.overflowQueue ? 'checked' : '') %>>
                </div>
              </div>
            </div>
            <div class="mb-3 row">
              <div class="col-8"><label for="eventVisible">Advertise Event</label></div>
              <div class="col">
                  <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" role="switch" name="event[visible]" id="eventVisible" <%=( event.visible ? 'checked' : '') %>>
                  </div>
              </div>
              </div>
            <% if (['superAdmin'].includes(currentUser.role) && config.hostingCharge > 0){ %>
                <div class="mb-3 row">
                  <div class="col-6 pt-2"><label for="registrationFee">Registration Fee</label></div>
                  <div class="col-6">
                    <div class="input-group">
                      <span class="input-group-text">£</span>
                      <input class="form-control form-control-sm mt-0" type="number" id="registrationFee" name="event[registrationFee][value]" value="<%= event.registrationFee.value %>"></div>
                      <input type="hidden" name="event[registrationFee][totalPaid]" value="<%= event.registrationFee.totalPaid %>">
                      <input type="hidden" name="event[registrationFee][datePaid]" value="<%= event.registrationFee.datePaid %>">
                      <input type="hidden" name="event[registrationFee][paypalPaymentId]" value="<%= event.registrationFee.paypalPaymentId %>">
                      <input type="hidden" name="event[registrationFee][paypalPayer]" value="<%= event.registrationFee.paypalPayer %>">
                  </div>
                </div>
            <% } %>

            <% if (event.registrationFee.value == event.registrationFee.totalPaid) { %>
                <div class="mb-3 row">
                <div class="col-8"><label for="eventAllowBookings">Open For Bookings</label></div>
                <div class="col">
                    <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" name="event[allowBookings]" id="eventAllowBookings" <%=( event.allowBookings ? 'checked' : '') %>>
                    </div>
                </div>
                </div>
                <% if (event.eventHost.eventSystem.systemRef == 'lorienTrust') { %>
                    <div class="mb-3">
                    <label for="eventSanctioningOfficer">Sanctioning Officer</label>
                    <input type="text" class="form-control" id="eventSanctioningOfficer" name="event[sanctioningOfficer]" value="<%= event.sanctioningOfficer %>">
                    </div>
                <% } %>
                <% if (event.registrationFee.value > 0) { %><div class="mb-3 form-text">
                  Registration Fee of <%= new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(event.registrationFee.value)  %> paid by<br/> <%= event.registrationFee.paypalPayer %>
                </div><% } %>
            <% } else { %>
                <h4>Registration Fee - <%= new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(event.registrationFee.value)  %></h4>
                <p id="result-message"></p>
                <div id="paypal-button-container"></div>
                <p class="form-text">Before you can open bookings please pay the event registration fee</p>
            <% } %>
          </div>
          <div class="col text-center">
            <img src="<%= typeof event.img.url === 'undefined' ? event.hostImg : event.imgThumbnail %>" id="eventImg" class="img-fluid mx-auto">
          </div>
        </div>
        <div class="accordion accordion-flush" id="eventEditAccordion">
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#eventAttendeeLimits" aria-expanded="true" aria-controls="eventAttendeeLimits">
                Event Attendee Limits
              </button>
            </h2>
            <div id="eventAttendeeLimits" class="accordion-collapse collapse show" data-bs-parent="#eventEditAccordion">
              <div class="row mt-3">

                <div class="col">
                  <div class="form-floating mb-3">
                    <input type="text" class="form-control form-control-sm" id="eventLimitsPlayers" name="event[limits][playerLimit]" value="<%= event.limits.playerLimit %>">
                    <label for="eventLimitsPlayers">Player Tickets</label>
                  </div>
                </div>
                <div class="col">
                  <div class="form-floating mb-3">
                    <input type="text" class="form-control form-control-sm" id="eventLimitsPlayerBunks" name="event[limits][playerBunkLimit]" value="<%= event.limits.playerBunkLimit %>">
                    <label for="eventLimitsPlayerBunks">Player Bunks</label>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col">
                  <div class="form-floating mb-3">
                    <input type="text" class="form-control form-control-sm" id="eventLimitsMonsters" name="event[limits][monsterLimit]" value="<%= event.limits.monsterLimit %>">
                    <label for="eventLimitsMonsters">Monster Tickets</label>
                  </div>
                </div>
                <div class="col">
                  <div class="form-floating mb-3">
                    <input type="text" class="form-control form-control-sm" id="eventLimitsMonstersBunk" name="event[limits][monsterBunkLimit]" value="<%= event.limits.monsterBunkLimit %>">
                    <label for="eventLimitsMonstersBunk">Monster Bunks</label>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col">
                  <div class="form-floating mb-3">
                    <input type="text" class="form-control form-control-sm" id="eventLimitsStaff" name="event[limits][staffLimit]" value="<%= event.limits.staffLimit %>">
                    <label for="eventLimitsStaff">Staff Tickets</label>
                  </div>
                </div>
                <div class="col">
                  <div class="form-floating mb-3">
                    <input type="text" class="form-control form-control-sm" id="eventLimitsStaffBunk" name="event[limits][staffBunkLimit]" value="<%= event.limits.staffBunkLimit %>">
                    <label for="eventLimitsStaffBunk">Staff Bunks</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#eventFinancials" aria-expanded="true" aria-controls="eventFinancials">
                Financials
              </button>
            </h2>
            <div id="eventFinancials" class="accordion-collapse collapse" data-bs-parent="#eventEditAccordion">
              <div class="row mt-3">
                <div class="col">
                  <div class="input-group mb-3">
                    <span class="input-group-text">£</span>
                    <div class="form-floating">
                      <input type="number" class="form-control form-control-sm" id="siteFee" name="event[financials][siteFee]" value="<%= event.financials.siteFee %>">
                      <label for="siteFee">Full Site Fee</label>
                    </div>
                  </div>
                  <div class="input-group mb-3">
                    <span class="input-group-text">£</span>
                    <div class="form-floating">
                      <input type="number" class="form-control form-control-sm" id="insurance" name="event[financials][insurance]" value="<%= event.financials.insurance %>">
                      <label for="insurance">Insurance</label>
                    </div>
                  </div>
                  <div class="input-group mb-3">
                    <span class="input-group-text">£</span>
                    <div class="form-floating">
                      <input title="Does your supporting system have a fee for running an event?" type="number" class="form-control form-control-sm" id="sanctioningFee" name="event[financials][sanctioningFee]" value="<%= event.financials.sanctioningFee %>">
                      <label for="sanctioningFee">Sanctioning Fee</label>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="input-group mb-3">
                    <span class="input-group-text">£</span>
                    <div class="form-floating">
                      <input type="number" class="form-control form-control-sm" id="props" name="event[financials][props]" value="<%= event.financials.props %>">
                      <label for="props">Prop's & Costume's</label>
                    </div>
                  </div>
                  <div class="input-group mb-3">
                    <span class="input-group-text">£</span>
                    <div class="form-floating">
                      <input type="number" class="form-control form-control-sm" id="admin" name="event[financials][admin]" value="<%= event.financials.admin %>">
                      <label for="admin">Admin Costs</label>
                    </div>
                  </div>
                  <div class="input-group mb-3">
                    <span class="input-group-text">£</span>
                    <div class="form-floating">
                      <input type="number" class="form-control form-control-sm" id="other" name="event[financials][otherCosts]" value="<%= event.financials.otherCosts %>">
                      <label for="other">Other Costs</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="mb-3">
          <label for="eventPromoDescription">Promo Description</label>
          <textarea class="form-control" name="event[promoDescription]" id="eventPromoDescription" cols="30" rows="2"><%= event.promoDescription %></textarea>
        </div>
        <div class="mb-3">
          <label for="eventIcInvitation">IC Invitation</label>
          <textarea class="form-control" name="event[icInvitation]" id="eventIcInvitation" cols="30" rows="8"><%= event.icInvitation %></textarea>
        </div>
        <div class="mb-3">
          <label for="eventDescription">Event Description</label>
          <textarea class="form-control" name="event[fullDescription]" id="eventDescription" cols="30" rows="8"><%= event.fullDescription %></textarea>
        </div>
      </div>
    </div>
    <hr>
    <div class="mb-3">
      <h4>Event Tickets</h4>
      <table class="table table-hover">
        <thead>
          <th scope="col"></th>
          <th scope="col">Cost</th>
          <th scope="col">Description</th>
          <th scope="col">Type</th>
          <th scope="col">Availability</th>
          <th scope="col"></th>
        </thead>
        <tbody>
          <% for (ticket of event.eventTickets) { %>
          <tr>
            <td scope="row"><i class="h3 bi bi-ticket-detailed pt-1"></i></td>
            <td scope="row"><%= new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(ticket.cost)%></td>
            <td scope="row">
              <%= ticket.description %>
              <% if (ticket.caterer && ticket.caterer != '') { %>
              <br><span class="small"><%= ticket.caterer %></span>
              <% } %>
            </td>
            <td scope="row"><%= toTitleCase(ticket.ticketType) %></td>
            <td><%= ticket.availableFrom.toLocaleDateString() %> - <%= ticket.availableTo.toLocaleDateString() %></td>
            <td><a href="/admin/events/<%= event._id %>/tickets/<%= ticket._id %>" class="link-dark me-2"><i class="bi bi-pencil-square"></i></a></td>
          </tr>
          <%} %>
        </tbody>
      </table>
      <% if (event.eventEnd > archiveDate) { %>
      <div class="row mb-1">
        <div class="col-2"><a href="/admin/events/<%= event._id %>/tickets/new" class="btn btn-warning">Add Event Ticket</a></div>
      </div>
      <% } %>
    </div>
    <hr>
    <% if (event.eventEnd > archiveDate) { %>
    <div class="d-grid gap-2 mb-3">
      <button class="btn btn-success">Update Event</button>
    </div>
    <% } %>
  </form>
  <% if (['admin','superAdmin'].includes(currentUser.role) && event.attendees.length == 0) { %>
  <div class="d-grid gap-2 mb-3">
    <a href="#" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">Delete Event</a>
  </div>
  <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" 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="deleteModalLabel">Delete Event?</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to delete this event?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <form action="/admin/events/<%= event._id %>/edit?_method=DELETE" method="POST">
            <button type="submit" class="btn btn-danger">Delete Event</button>
          </form>

        </div>
      </div>
    </div>
  </div>
  <% } else{ %>
  <div class="d-grid gap-2 mb-3">
    <button href="#" class="btn btn-danger" title="Event cannot be deleted once bookings have been taken" disabled>Event Cannot Be Deleted</button>
    <a href="#" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#cancelModal">Cancel Event</a>
  </div>
  <div class="modal fade" id="cancelModal" tabindex="-1" aria-labelledby="cancelModalLabel" 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="cancelModalLabel">Cancel Event?</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to cancel this event?</p>
          <p>This will e-mail all booked attendees and notify them of the event cancellation. You are responsible for refunding any bookings paid, this will not be done automatically.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <form action="/admin/events/<%= event._id %>/cancel" method="POST">
            <button type="submit" class="btn btn-danger">Delete Event</button>
          </form>

        </div>
      </div>
    </div>
  </div>
  <% } %>
  <script src="/js/events.js"></script>
  <% if (event.registrationFee.value != event.registrationFee.totalPaid) { %>
  <script src="<%= paypalScript %>"></script>
<script src="/js/registrationPaypal.js"></script>
<% } %>