<!-- <script src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/js/esg/addJudgeScript.js"> </script> -->
<script>
// global variables for judge script 
let judges_parent_container_selector = "#hosts-details-container"; 
let modal_parent_container_selector = "body"; 
let insert_tab = false; 
let tab_container_selector = "";
let insert_stylesheets = ["https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/stylesheets/ESG/addEventJudgeStyles.css"];

const closeArjModal = (identifier) => {
  $(identifier).hide();
}

const getForm = (form_type) => {
  if(form_type === "add"){
   return = `        <h2 class="form-title fullSite" id="form-title-addjudgeglobalfinalists">Add New Judge</h2>
            <form id="formaddjudgeglobalfinalists" class="add-user-form fullSite">
              <input type="text" id="user_first_name" name="user_first_name" placeholder="First Name" required="" class="add-user-input fullSite">
              <input type="text" id="user_last_name" name="user_last_name" placeholder="Last Name" required="" class="add-user-input fullSite">
              <input type="text" id="user_email" name="user_email" placeholder="Email" required="" class="add-user-input fullSite">
              <input type="hidden" name="groups" value="" checked="" class="fullSite">
              <input type="submit" id="form_submit_addjudgeglobalfinalists" name="Submit" class="pressbtn add-form-submit add-user-submit fullSite" value="Add Event Judge" disabled="disabled">
            </form>
    `
  } else {
   return = `        <h2 class="form-title fullSite" id="form-title-addjudgeglobalfinalists">Add New Judge</h2>
            <form id="formaddjudgeglobalfinalists" class="add-user-form fullSite">
              <input type="text" id="user_first_name" name="user_first_name" placeholder="First Name" required="" class="add-user-input fullSite">
              <input type="text" id="user_last_name" name="user_last_name" placeholder="Last Name" required="" class="add-user-input fullSite">
              <input type="text" id="user_email" name="user_email" placeholder="Email" required="" class="add-user-input fullSite">
              <input type="hidden" name="groups" value="" checked="" class="fullSite">
              <input type="submit" id="form_submit_addjudgeglobalfinalists" name="Submit" class="pressbtn add-form-submit add-user-submit fullSite" value="Add Event Judge" disabled="disabled">
            </form>
    `
  }
}

const insertModal = () => {
  let modal_html = `
  <div id="addremovejudge" class="arj-modal-overlay" style="display: none;">
    <div class="arj-modal-content">
      <div class="arj-invitation">
        <span class="arj-closeModalBtn" onclick="closeArjModal('#addremovejudge')">X</span>
          <div id="modal-content-container"> </div>
          <div id="arj-form-response-container" class="arj-form-response-container">
          <img id="arj-successful-img" class="arj-successful-img" style="display: none;" src="https://passport-media.s3-us-west-1.amazonaws.com/EWC/judgingdashboard/successful_invite.png">
          <p id="arj-form-response-text" style="display: none;" class="arj-form-response-text"> </p>
          <button id="arj-form-response-btn" style="display: none;" class="arj-pressbtn arj-modal-button arj-form-response-button">Refresh Form</button>
        </div>
      </div>
    </div>
  </div>`
  return modal_html;
}

const openModal = (modal_type) => {
  let modal_form = getForm(modal_type);
  $("#modal-content-container").html(modal_form)
  $("#addremovejudge").show();
}

const insertARJHTML = () => {
  let arj_skeleton = `
    <div class="arj-container">
      <h2>Event Judges</h2>
      <div class="arj-button" onclick="openModal('add')">Add Judge</div>
    </div>
  `;
  return arj_skeleton;
}


// insert stylesheets
$(window).load(() => {
  let insert_html = ""
  for(var i = 0; i < insert_stylesheets.length; i++){
    let curr_stylesheet = insert_stylesheets[i]
    insert_html += `<link type="text/css" rel="stylesheet" href="${curr_stylesheet}" />`
  } 
  $("head").append(insert_html);
})

$(document).ready(function() { 
  // create and insert modal which will hold the add and remove forms 
  let modal_html  = insertModal();
  let arj_html = insertARJHTML();
  $(judges_parent_container_selector).append(arj_html);
  $(modal_parent_container_selector).append(modal_html);
});

</script>