<% layout('layouts/boilerplate') %>
<!-- <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/systems" class="link-dark">Manage Event Systems</a></li>
    <li class="breadcrumb-item active" aria-current="page">
      <%= eventSystem.name %>
    </li>
  </ol>
</nav>
<div class="row">
  <div class="col">
    <div class="card shadow  py-3 px-3 mb-3">
      <div class="card-header bg-white">
        <h4>Edit Event System <% if (eventSystem.img?.url) { %><img style="margin-top:-20px;" class="ms-5 d-none d-md-inline-block" height="60px" src="<%= eventSystem.img.url %>" alt="<%= eventSystem.name %>"><% } %></h4>
      </div>
      <div class="card-body">
        <form action="/admin/systems/<%= eventSystem._id %>" method="POST" class="validated-form" enctype="multipart/form-data" novalidate>
          <div class="row mb-3">
            <div class="col-md-6">
              <div class="mb-3">
                <label for="systemName">Name</label>
                <input required type="text" id="systemName" name="name" class="form-control" value="<%= eventSystem.name %>" disabled autocomplete="off">
              </div>
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label for="systemImg">Image <span class="form-text">(60px x 250px)</span></label>
                  <div class="input-group">
                    <input class="form-control" type="file" id="systemImg" name="image" accept="image/png, image/jpeg">
                    <% if (eventSystem.img?.url) { %> <a title="Clear current image" class="btn btn-outline-secondary" href="#" onclick="document.getElementById('delImg').submit()" type="button"><i class="bi bi-trash"></i></a><% } %>
                  </div>
                  <div class="form-text">Do not upload an image if you do not wish to change the current image.</div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="row mt-4">
                    <div class="col-8"><label for="systemActive">Active for Bookings</label></div>
                    <div class="col">
                      <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" name="active" id="systemActive" <%=( eventSystem.active ? 'checked' : '') %>>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <label for="sanctioningFee">Sanctioning Fee</label>
                  <div class="input-group">
                    <span class="input-group-text">Â£</span>
                    <input type="number" class="form-control" name="sanctioningFee" id="sanctioningFee" value="<%= eventSystem.sanctioningFee %>">
                  </div>
                  <p class="form-text">Does the system impose a fee for running an event with their rules?</p>
                </div>
              </div>
              <div class="mb-3 mt-0">
                <label for="systemWebsite">Website</label>
                <input type="url" id="systemWebsite" name="website" class="form-control" value="<%= eventSystem.website %>">
              </div>
              <div class="mb-3 input-group" title="Discord Webhook">
                <span class="input-group-text"><i class="bi bi-discord me-2"></i> Webhook</span>
                <input type="url" name="webhooks[discord]" id="discordWebhook" value="<%= eventSystem.webhooks?.discord %>" class="form-control">
                <div class="form-text">Link the website into a Discord Webhook to automatically post event adverts.</div>
              </div>
              <% if (currentUser.role == 'superAdmin') { %>
              <div class="mb-3">
                <label for="customTools">Custom Tools</label>
                <input type="text" id="customTools" name="customTools" class="form-control" value="<%= eventSystem.customTools?.join(',') %>">
                <div class="form-text">Comma seperated list of tools</div>
              </div>
              <% } %>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label for="systemName">Description</label>
                <textarea required class="form-control" name="description" id="systemDescription" cols="30" rows="5">
                                    <%= eventSystem.description %>
                                    </textarea>
              </div>
              <div class="mb-2">
                <div title="Your Facebook Link" class="input-group">
                  <span class="input-group-text"><i class="bi bi-facebook"></i></span>
                  <input type="url" class="form-control" name="facebook" id="facebook" value="<%= eventSystem.facebook %>" placeholder="https://www.facebook.com/YOUR_SYSTEM_NAME">
                </div>
              </div>
              <div class="mb-2">
                <div title="Your Instagram Link" class="input-group">
                  <span class="input-group-text"><i class="bi bi-instagram"></i></span>
                  <input type="url" class="form-control" name="instagram" id="instagram" value="<%= eventSystem.instagram %>" placeholder="https://www.instagram.com/YOUR_SYSTEM_NAME">
                </div>
              </div>
              <div class="mb-2">
                <div title="Your X (Twitter) Link" class="input-group">
                  <span class="input-group-text"><i class="bi bi-twitter-x"></i></span>
                  <input type="url" class="form-control" name="twitter" id="twitter" value="<%= eventSystem.twitter %>" placeholder="https://www.twitter.com/YOUR_SYSTEM_NAME">
                </div>
              </div>
              <div class="mb-2">
                <div title="Your TikTok Link" class="input-group">
                  <span class="input-group-text"><i class="bi bi-tiktok"></i></span>
                  <input type="text" class="form-control" name="tiktok" id="tiktok" value="<%= eventSystem.tiktok %>" placeholder="">
                </div>
              </div>
              <div class="mb-2">
                <div title="Your Snapchat Link" class="input-group">
                  <span class="input-group-text"><i class="bi bi-snapchat"></i></span>
                  <input type="text" class="form-control" name="snapchat" id="snapchat" value="<%= eventSystem.snapchat %>" placeholder="">
                </div>
              </div>
              <div class="mb-2">
                <div title="Your WhatsApp Link" class="input-group">
                  <span class="input-group-text"><i class="bi bi-whatsapp"></i></span>
                  <input type="text" class="form-control" name="whatsapp" id="whatsapp" value="<%= eventSystem.whatsapp %>" placeholder="">
                </div>
              </div>
              <div class="mb-2">
                <div title="Your Discord Link" class="input-group">
                  <span class="input-group-text"><i class="bi bi-discord"></i></span>
                  <input type="url" class="form-control" name="discord" id="discord" value="<%= eventSystem.discord %>" placeholder="https://discord.gg/bCpxsz5JXw">
                </div>
              </div>
            </div>
          </div>
          <hr>
          <div class="row mb-3">
            <div class="col-md-6">
              <div class="row mb-3">
                <div class="col"><b>Custom Character Fields</b></div>
                <div class="col text-end"><a href="" onclick="newField('<%= eventSystem._id %>');document.getElementById('customSection').value = 'character'" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#customFieldModal"><i class="bi bi-plus-circle"></i> Add Character Field</a></div>
              </div>
              <table class="table table-striped">
                <thead>
                  <th>Field Name</th>
                  <th>Type</th>
                  <th></th>
                </thead>
                <tbody>
                  <tr>
                    <td>Character Name <i>(Mandatory field)</i></td>
                    <td>Text</td>
                    <td></td>
                  </tr>
                  <% for (field of eventSystem.customFields.filter(a => a.section == 'character')){ %>
                  <tr>
                    <td><%= field.label %></td>
                    <td class="text-capitalize"><%= field.type %></td>
                    <td><a href="#" data-bs-toggle="modal" data-bs-target="#customFieldModal" class="link-dark" onclick="editField('<%= eventSystem._id %>',<%= JSON.stringify(field) %>)"><i class="bi bi-pencil-square"></i></a></td>
                  </tr>
                  <% } %>
                </tbody>
              </table>
            </div>
            <div class="col-md-6">
              <div class="row mb-3">
                <div class="col"><b>Custom Player Fields</b></div>
                <div class="col text-end"><a href="" onclick="newField('<%= eventSystem._id %>');document.getElementById('customSection').value = 'player'" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#customFieldModal"><i class="bi bi-plus-circle"></i> Add Player Field</a></div>
              </div>
              <table class="table table-striped">
                <thead>
                  <th>Field Name</th>
                  <th>Type</th>
                  <th></th>
                </thead>
                <tbody>
                  <% for (field of eventSystem.customFields.filter(a => a.section == 'player')){ %>
                  <tr>
                    <td><%= field.label %></td>
                    <td class="text-capitalize"><%= field.type %></td>
                    <td><a href="#" data-bs-toggle="modal" data-bs-target="#customFieldModal" onclick="editField('<%= eventSystem._id %>',<%= JSON.stringify(field) %>)" class="link-dark"><i class="bi bi-pencil-square"></i></a></td>
                  </tr>
                  <% } %>
                </tbody>
              </table>
            </div>
          </div>
          <% var display = false; if (display) { %>
          <hr>
          <div class="row mb-3">
            <div class="col-md-6">
              <div class="row mb-3">
                <div class="col"><b>Event Lammies (Front)</b></div>
                <div class="col text-end"><a href="" onclick="newLammieField('<%= eventSystem._id %>');document.getElementById('customLammieSection').value = 'front'" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#customLammieFieldModal"><i class="bi bi-plus-circle"></i> Add Lammie Field</a></div>
              </div>
              <table class="table table-striped">
                <thead>
                  <th>Field Name</th>
                  <th>Location</th>
                  <th></th>
                </thead>
                <tbody>
                  <tr>
                    <td>Created Date</td>
                    <td>Bottom Left</td>
                    <td></td>
                  </tr>
                  <tr>
                    <td>Expiry Date</td>
                    <td>Bottom Right</td>
                    <td></td>
                  </tr>
                  <tr>
                    <td>Name</td>
                    <td>Top Centre</td>
                    <td></td>
                  </tr>
                  <tr>
                    <td>Description</td>
                    <td>Middle Centre</td>
                    <td></td>
                  </tr>
                  <% for (field of eventSystem.lammieFields.filter(a => a.section == 'front')){ %>
                  <tr>
                    <td><%= field.label %></td>
                    <td class="text-capitalize"><%= field.position %></td>
                    <td><a href="#" data-bs-toggle="modal" data-bs-target="#customLammieFieldModal" onclick="editLammieField('<%= eventSystem._id %>',<%= JSON.stringify(field) %>)" class="link-dark"><i class="bi bi-pencil-square"></i></a></td>
                  </tr>
                  <% } %>
                </tbody>
              </table>
            </div>
            <div class="col-md-6">
              <div class="row mb-3">
                <div class="col"><b>Event Lammies (Back)</b></div>
                <div class="col text-end"><a href="" onclick="newLammieField('<%= eventSystem._id %>');document.getElementById('customLammieSection').value = 'back'" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#customLammieFieldModal"><i class="bi bi-plus-circle"></i> Add Lammie Field</a></div>
              </div>
              <table class="table table-striped">
                <thead>
                  <th>Field Name</th>
                  <th>Location</th>
                  <th></th>
                </thead>
                <tbody>
                  <tr>
                    <td>Ownerhsip Decleration</td>
                    <td>Bottom Centre</td>
                  </tr>
                  <% for (field of eventSystem.lammieFields.filter(a => a.section == 'back')){ %>
                  <tr>
                    <td><%= field.label %></td>
                    <td class="text-capitalize"><%= field.position %></td>
                    <td><a href="#" data-bs-toggle="modal" data-bs-target="#customLammieFieldModal" onclick="editLammieField('<%= eventSystem._id %>',<%= JSON.stringify(field) %>)" class="link-dark"><i class="bi bi-pencil-square"></i></a></td>
                  </tr>
                  <% } %>
                </tbody>
              </table>
            </div>
          </div>
          <% } %>
          <hr>
          <div class="mb-3">
            <label for="systemName">Terms & Conditions</label>
            <textarea required class="form-control" name="terms" id="systemTerms" title="These are your system specific terms and conditions" cols="30" rows="5">
                            <%= eventSystem.terms %>
                            </textarea>
          </div>

          <div class="text-end">
            <% if (currentUser.role == 'superAdmin') { %>
            <a href="" data-bs-toggle="modal" data-bs-target="#deleteModal" class="btn btn-danger">Delete</a>
            <% } %>
            <button class="btn btn-success">Save Changes</button>
          </div>

        </form>
      </div>
    </div>
  </div>
</div>
<form action="/admin/systems/<%= eventSystem._id %>/image?_method=DELETE" method="POST" id="delImg"></form>
<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 System?</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 System?</p>
        <p>This will delete all linked event hosts, events, and event bookings!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <form action="/admin/systems/<%= eventSystem._id %>?_method=DELETE" method="POST">
          <button type="submit" class="btn btn-danger">Delete System</button>
        </form>

      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="customFieldModal" tabindex="-1" aria-labelledby="customFieldModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <form id="customFieldForm" action="/admin/systems/<%= eventSystem._id %>/fields" method="POST" class="validated-form" novalidate>
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="customFieldModalLabel">Create new Custom Field?</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="section" id="customSection">
          <div class="row">
            <div class="col-md-4 mb-3">
              <label for="customLabel">Label</label>
              <input id="customLabel" type="text" onblur="document.getElementById('customName').value = camelize(this.value)" name="label" class="form-control" required placeholder="Text label for field...">
              <input type="hidden" name="name" id="customName">
              <input type="hidden" name="idField" id="customId">
              <div class="invalid-feedback">You must label your field!</div>
            </div>
            <div class="col-md-4 mb-3">
              <label for="customType">Type</label>
              <select onchange=" if(this.value == 'select' ) document.getElementById('customOptions').parentElement.classList.remove('d-none'); else document.getElementById('customOptions').parentElement.classList.add('d-none')" class="form-select" name="type" id="customType" required>
                <option value="text" selected>Text</option>
                <option value="number">Number</option>
                <option value="checkbox">Checkbox</option>
                <option value="select">Dropdown Box</option>
              </select>
              <div class="mt-3 d-none">
                <label for="customOptions">Options</label>
                <input type="text" class="form-control" id="customOptions" name="options" placeholder="Option 1,Option 2,Option3...">
                <div class="form-text">Please comma seperate your options</div>
              </div>

            </div>
            <div class="col-md-4">
              <div class="form-check">
                <label for="customRequired" class="form-check-label"> Required</label>
                <input onchange="document.getElementById('customError').parentElement.classList.toggle('d-none')" type="checkbox" class="form-check-input" name="required" id="customRequired">
                <p class="form-text">Is this a required field?</p>
              </div>
              <div class="form-check">
                <label for="customDisplay" class="form-check-label"> Display</label>
                <input type="checkbox" class="form-check-input" name="display" id="customDisplay">
                <p class="form-text">Display as event attendee data?</p>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4">
              <div class="mb-3">
                <label for="customDefaultValue">Default Value</label>
                <input type="text" name="defaultValue" id="customDefaultValue" class="form-control">
                <div class="form-text">Fill if your field has a default value</div>
              </div>
              <div class="mb-3">
                <label for="customPlaceholder">Placeholder</label>
                <input type="text" class="form-control" name="placeholder" id="customPlaceholder">
              </div>
            </div>
            <div class="col-md-8">
              <div class="mb-3">
                <label for="customDescription">Description</label>
                <input type="text" class="form-control" name="description" id="customDescription">
                <div class="form-text">This will be the text displayed under a field</div>
              </div>
              <div class="mb-3 d-none">
                <label for="customError">Error Text</label>
                <input type="text" class="form-control" name="error" id="customError">
                <div class="form-text">This will be the text displayed under a field</div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">

          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <a href="#" id="deleteFieldBtn" class="btn btn-danger" onclick="deleteField()">Delete Field</a>
          <button id="fieldSubmit" type="submit" class="btn btn-success">Create Field</button>
        </div>
      </form>
      <form id="deleteFieldForm" action="/admin/systems/<%= eventSystem._id %>/fields?_method=DELETE" method="POST"><input type="hidden" id="deleteId" name="idField"></form>
    </div>
  </div>
</div>
<div class="modal fade" id="customLammieFieldModal" tabindex="-1" aria-labelledby="customLammieFieldModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <form id="customLammieFieldForm" action="/admin/systems/<%= eventSystem._id %>/lammiefields" method="POST" class="validated-form" novalidate>
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="customLammieFieldModalLabel">Create new Lammie Field?</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="section" id="customLammieSection">
          <div class="row">
            <div class="col-md-4 mb-3">
              <label for="customLammieLabel">Label</label>
              <input id="customLammieLabel" type="text" onblur="document.getElementById('customLammieName').value = camelize(this.value)" name="label" class="form-control" required placeholder="Text label for field...">
              <input type="hidden" name="name" id="customLammieName">
              <input type="hidden" name="idField" id="customLammieId">
              <div class="invalid-feedback">You must label your field!</div>
              <div class="mt-3">
                <label for="customLammiePosition">Position</label>
                <select class="form-select" name="position" id="customLammiePosition">
                  <option value="topLeft">Top Left</option>
                  <option value="topCentre">Top Centre</option>
                  <option value="topRight">Top Right</option>
                  <option value="midLeft">Middle Left</option>
                  <option value="midCentre">Middle Centre</option>
                  <option value="midRight">Middle Right</option>
                  <option value="botLeft">Bottom Left</option>
                  <option value="botCentre">Bottom Centre</option>
                  <option value="botRight">Bottom Right</option>
                </select>
              </div>
            </div>
            <div class="col-md-4 mb-3">
              <label for="customLammieType">Type</label>
              <select onchange=" if(this.value == 'select' ) document.getElementById('customLammieOptions').parentElement.classList.remove('d-none'); else document.getElementById('customLammieOptions').parentElement.classList.add('d-none')" class="form-select" name="type" id="customLammieType" required>
                <option value="text" selected>Text</option>
                <option value="number">Number</option>
                <option value="checkbox">Checkbox</option>
                <option value="select">Dropdown Box</option>
              </select>
              <div class="mt-3 d-none">
                <label for="customLammieOptions">Options</label>
                <input type="text" class="form-control" id="customLammieOptions" name="options" placeholder="Option 1,Option 2,Option3...">
                <div class="form-text">Please comma seperate your options</div>
              </div>

            </div>
            <div class="col-md-4">
              <div class="form-check">
                <label for="customLammieRequired" class="form-check-label"> Required</label>
                <input onchange="document.getElementById('customLammieError').parentElement.classList.toggle('d-none')" type="checkbox" class="form-check-input" name="required" id="customLammieRequired">
                <p class="form-text">Is this a required field?</p>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4">
              <div class="mb-3">
                <label for="customLammieDefaultValue">Default Value</label>
                <input type="text" name="defaultValue" id="customLammieDefaultValue" class="form-control">
                <div class="form-text">Fill if your field has a default value</div>
              </div>
              <div class="mb-3">
                <label for="customLammiePlaceholder">Placeholder</label>
                <input type="text" class="form-control" name="placeholder" id="customLammiePlaceholder">
              </div>
            </div>
            <div class="col-md-8">
              <div class="mb-3">
                <label for="customLammieDescription">Description</label>
                <input type="text" class="form-control" name="description" id="customLammieDescription">
                <div class="form-text">This will be the text displayed under a field</div>
              </div>
              <div class="mb-3 d-none">
                <label for="customLammieError">Error Text</label>
                <input type="text" class="form-control" name="error" id="customLammieError">
                <div class="form-text">This will be the text displayed under a field</div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <a href="#" id="deleteLammieFieldBtn" class="btn btn-danger" onclick="deleteLammieField()">Delete Field</a>
          <button id="lammieFieldSubmit" type="submit" class="btn btn-success">Create Field</button>
        </div>
      </form>
      <form id="deleteLammieFieldForm" action="/admin/systems/<%= eventSystem._id %>/lammiefields?_method=DELETE" method="POST"><input type="hidden" id="lammieDeleteId" name="idField"></form>
    </div>
  </div>
</div>
<script src="/js/adminEventSystem.js"></script>