<% const dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; %>
<div class="modal fade" id="cateringModal" tabindex="-1" aria-labelledby="cateringModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="cateringModalLabel">Catering Choices</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="cateringForm" action="/admin/events/<%= event._id %>/catering" method="POST">
            <div class="form-text mb-3">
              Updating this form will share the catering choices on the event page, and allow attendees to make selections (if required).
            </div>
            <div class="row mb-3">
              <div class="col">
                <label for="catererName">Caterer</label>
                <input type="text" class="form-control" id="catererName" name="catering[caterer]" value="<%= event.catering.caterer %>">
              </div>
              <div class="col">
                <label for="catererContact">Contact</label>
                <input type="text" class="form-control" id="catererContact" name="catering[catererContact]" value="<%= event.catering.catererContact %>" placeholder="Phone/E-mail Address">
              </div>
              <div class="col">
                <div class="form-check form-switch mt-md-4">
                  <label class="form-check-label" for="cateringDisplay">Display</label>
                  <input class="form-check-input" type="checkbox" role="switch" id="cateringDisplay" name="catering[display]" <%= event.catering.display ? 'checked' : '' %>>
                </div>
              </div>
            </div>
            <div class="mb-3">
              <label for="message">Catering Notes</label>
              <textarea class="form-control" name="catering[notes]" id="cateringNotes" cols="30" rows="10"><%= event.catering.notes %></textarea>
            </div>
            <div class="form-check form-switch">
              <label class="form-check-label" for="cateringRequired"><h4>Menu Choices Require Selection</h4></label>
              <input class="form-check-input" type="checkbox" role="switch" id="cateringRequired" name="catering[choiceRequired]" <%= event.catering.choiceRequired ? 'checked' : '' %>>
            </div>
            <hr class="mt-0">
            <div class="row">
            <% for (var d = new Date(event.eventStart); d <= new Date(event.eventEnd); d.setDate(d.getDate() + 1)) { %>
              <div class="col">
                  <div class="text-center"><%=  dayNames[new Date(d).getDay()] %></div>
                  <div id="meals<%=  dayNames[new Date(d).getDay()] %>">
                    <% const catering = JSON.parse(JSON.stringify(event.catering)) %>
                    <% if (catering?.menu) { %>
                    <% for (meal of Object.keys(catering?.menu[dayNames[new Date(d).getDay()]]?.meals)) { %>
                      <div id="meals<%= meal %>" class="my-3">
                        <div>
                          <input type="text" class="form-control" name="catering[menu][<%= dayNames[new Date(d).getDay()] %>][meals][<%= meal %>][name]" placeholder="Breakfast, Lunch, Dinner, etc..." value="<%= catering.menu[dayNames[new Date(d).getDay()]]?.meals[meal].name %>">
                        </div>
                        <div id="options<%= meal %>" class="ms-4">
                          <% for (option of catering.menu[dayNames[new Date(d).getDay()]]?.meals[meal].options){ %>
                            <% let optionId = Date.now().toString(36) + Math.random().toString(36).substr(2); %>
                            <div id="<%= optionId %>" class="input-group">
                              <a href="#" class="link-danger input-group-text" onclick="delMealOption('options<%=meal %>','<%= optionId %>')"><i class="bi bi-trash3-fill"></i></a>
                              <input class="form-control form-control-sm" name="catering[menu][<%= dayNames[new Date(d).getDay()] %>][meals][<%= meal %>][options]" placeholder="Food option (V,GF)" value="<%= option %>">
                            </div>
                            
                          <% } %>
                        </div>
                        <div class="row">
                          <div class="col">
                            <a href="#" class="link-dark mt-0" onclick="addMealOption('options<%= meal %>','<%=  dayNames[new Date(d).getDay()] %>','<%= meal %>')">Add Meal Option</a>
                          </div>
                          <div class="col-3 text-end">
                            <a href="#" class="link-danger mt-0" onclick="delMeal('meals<%=  dayNames[new Date(d).getDay()] %>','meals<%= meal %>')">Delete</a>
                          </div>
                        </div>
                      </div>
                    <% }} %>
                  </div>
                  <div class="d-grid gap-2 mt-3 me-2">
                    <a href="#" class="btn btn-outline-primary" onclick="addMeal('<%= dayNames[new Date(d).getDay()] %>')">Add A Meal</a>
                  </div>
              </div>
              <% } %>
            </div>
          </form>
          <div id="spinnerDivEmailCatering"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-primary" title="This will display the catering choices on the event page" onclick="document.getElementById('cateringForm').submit()">Save</button>
            <button type="button" class="btn btn-primary" onclick=""><i class="bi bi-envelope-at"></i> Save & Email</button>
          </div>
        </div>
      </div>
    </div>
  </div>