<!DOCTYPE html>
<html>

<!-- navigation bar -->
<div class="topnav">
  <a class="active" href="/admin-portal/admin-userview">View Users</a>
  <a href="/admin-portal/admin-jobview">View Jobs</a>
  <a href="/admin-portal/admin-myaccount">My Account</a>
</div>

<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>

<script>
  // stringify the data passed from router to ejs (within the EJS template only)
  var selectedID = "null"
  var unapprovedUsersJSON = <%- JSON.stringify(unapprovedUsers) %>
</script>

<script>

//sends form to verify the selected user
function verifyUser(userID, number) {
    $.ajax({
      url: '/admin-portal/admin-userview',
      type: 'PUT',
      data: {userID: userID},
      success: function (result) {
        return
      }
    });

    $( "div." + number ).remove();
    $( "#approveButton" ).remove();

  }

  //displays the full version of the selected unapproved user 
    function display(user, number) {

      numberV = number

      selectedID = user._id

      if (user.accountType == "student") {
        $("div.fullUser").html(
          "<br> Full Name:" + user.firstname + " " + user.lastname + "<br>" +
          "Email: " + user.email + "<br>" +
          "Account Type:" + user.accountType + "<br>" +
          "School: " + user.school + "<br>" +
          "Grade: " + user.grade + "<br>" +
          "Date of Birth: " + user.dateOfBirth + "<br>" +
          "isCoop?: " + user.isCoop + "<br>" 
        )
                    var r = $('<input/>').attr({
                         type: "button",
                         id: "approveButton",
                         value: "Approve",
                         onclick: "verifyUser(selectedID, numberV)"
                    });
            $("div.fullUser").append(r);
      } else if (user.accountType == "employer") {
        $("div.fullUser").html(
          "<a href='student-portal/student-employerprofile?employerID=" + user._id + "'>" + user.companyName + "</a>" +
          "Email: " + user.email + "<br>" +
          "Account Type: " + user.accountType + "<br>" +
          "School: " + user.school + "<br>" +
          "Company Website: " + user.companyWebsite
        )
                    var r = $('<input/>').attr({
                         type: "button",
                         id: "approveButton",
                         value: "Approve",
                         onclick: "verifyUser(selectedID, numberV)"
                    });
            $("div.fullUser").append(r);
      } else if (user.accountType == "admin") {
        $("div.fullUser").html(
          "<br> Full Name: " + user.firstname + user.lastname + "<br>" +
          "Email: " + user.email + "<br>" +
          "Account Type: " + user.accountType + "<br>" +
          "School: " + user.school + "<br>"
        )
                    var r = $('<input/>').attr({
                         type: "button",
                         id: "approveButton",
                         value: "Approve",
                         onclick: "verifyUser(selectedID, numberV)"
                    });
            $("div.fullUser").append(r);
      }
    }

</script>

<br>
<br>
Unapproved Users 
<br>

<!-- displays a preview of every unapproved users with a button to display the full version of the user (display function)-->
<% if (unapprovedUsers != false) { %>
<div>
  <% var x=0 %>
    <% unapprovedUsers.forEach(p=> { %>
      <br>
      <br>

      <div class="<%=x%>" id="<%=x%>">
      <button onclick="display(unapprovedUsersJSON[<%=x%>], <%=x%>)"> View </button>
      <br>

      <% if (p.accountType=="student" ) { %>
        <div>
          <div>
            <%= p.firstname %>
              <%= p.lastname %>
          </div>

          <div>
            <%= p.accountType %>
          </div>

          <div>
            <%= p.school %>
          </div>

          <div>
            <%= p.grade %>
          </div>
        </div>
        <% } else if (p.accountType=="employer" ) { %>
          <div>
            <div>
              <%= p.companyName %>
            </div>

            <div>
              <%= p.accountType %>
            </div>

            <div>
              <%= p.city %>, <%= p.province %>
            </div>
          </div>
          <% } else if (p.accountType=="admin" ) { %>
            <div>
              <div>
                <%= p.firstname %>
                  <%= p.lastname %>
              </div>

              <div>
                <%= p.accountType %>
              </div>

              <div>
                <%= p.school %>
              </div>
            </div>
            <% } %>
          </div>
              <% x++ }) %>

</div>
<% } %>

<br>
<br>

<!-- this is where the full versio nof the user is placed when displayed-->
<div class="fullUser" id="fullUser">

</div>

<br><br><br>

<script>
  // stringify the data passed from router to ejs (within the EJS template only)
  var usersSearched = <%- JSON.stringify(result) %>
</script>

<!-- user search form -->
<form action="/searchUser" method="GET">

  <select name="userType" id="userType">
    <option value="student" <% if((userType).includes("student")){ %> selected <% } %>>Student</option>
    <option value="employer" <% if((userType).includes("employer")){ %> selected <% } %>>Employer</option>
    <option value="admin" <% if((userType).includes("admin")){ %> selected <% } %>>Admin</option>
</select>

  <select name="school" id="school">
    <option value="Earl of March Secondary School">Earl of March Secondary School</option>
  </select>

  <input type="text" id="term" name="term" value="<%=term%>">
  <button>Search</button>
</form>

<!-- displays a preview of every searched user with a button to display the full version of the user (display2 function)-->
<div>
  <% var x=0 %>
    <% if (result) { %>
      <% result.forEach(p=> { %>
        <br>
        <button onclick="display2(usersSearched[<%=x%>], <%=x%>)"> View </button>
        <div>

          <div>
            <% if (p.accountType == "student" || p.accountType == "admin") { %>
           <%= p.firstname %> <%= p.lastname %>
           <% } else if (p.accountType == "employer") { %>
            <%= p.companyName %>
            <% } %>
          </div>

          <div>
            <%= p.accountType %>
          </div>

          <div>
            <% if (p.accountType == "student") { %>
            <%= p.school %> <br>
            Grade <%= p.grade %>
            <% } else if (p.accountType == "employer") { %>
            <%= p.city %> , <%= p.province %>
            <% } %>
          </div>


        </div>
        </form>
        <% x++ }) %>
          <% } %>
</div>

<script>

//updates the information of the selected search user
function updateUser(userID, number, radioButton, firstname, lastname) {

  if (firstname != 'null' && lastname!='null') {
    $.ajax({
      url: '/updateUser',
      type: 'PUT',
      data: {userID: userID, accountStatus: document.querySelector('input[name = "accountStatus"]:checked').value, firstname: firstname, lastname: lastname, isCoop: document.querySelector('input[name = "isCoop"]:checked').value},
      success: function (result) {
        return
      }
    });
  } else {
    $.ajax({
      url: '/updateUser',
      type: 'PUT',
      data: {userID: userID, accountStatus: document.querySelector('input[name = "accountStatus"]:checked').value}, isCoop: document.querySelector('input[name = "isCoop"]:checked').value,
      success: function (result) {
        return
      }
    });
  }

  }

  //displays the full version of the selected searched user
    function display2(user, number) {
numberV = number
selectedID = user._id

if (user.accountType == "student") {
  $("div.fullUserSecond").html(
    "<br> Full Name:" + user.firstname + " " + user.lastname + "<br>" +
    "Email: " + user.email + "<br>" +
    "Account Type:" + user.accountType + "<br>" +
    "School: " + user.school + "<br>" +
    "Grade: " + user.grade + "<br>" +
    "Date of Birth: " + user.dateOfBirth + "<br>" +
    "isCoop?: " + user.isCoop + "<br>" 
  )

              var r = $('<input/>').attr({
                   type: "radio",
                   id: "accountEnabled",
                   name: "accountStatus",
                   value: "enabled",
                   label: "Enabled"
              });
              
              var labelR = document.createElement('label');
              labelR.setAttribute('for', r);
              labelR.innerHTML = "Enabled";

              var s = $('<input/>').attr({
                   type: "radio",
                   id: "accountDisabled",
                   name: "accountStatus",
                   value: "disabled",
                   label: "Disabled"
              });

              var labelS = document.createElement('label');
              labelS.setAttribute('for', s);
              labelS.innerHTML = "Disabled";

              var t = $('<input/>').attr({
                   type: "text",
                   id: "firstname",
                   value: user.firstname
              });

              var w = $('<input/>').attr({
                   type: "radio",
                   id: "yesCoop",
                   name: "isCoop",
                   value: "true",
                   label: "Coop"
              });
              
              var labelw = document.createElement('label');
              labelw.setAttribute('for', w);
              labelw.innerHTML = "Coop";

              var x = $('<input/>').attr({
                   type: "radio",
                   id: "noCoop",
                   name: "isCoop",
                   value: "false",
                   label: "Regular"
              });

              var labelx = document.createElement('label');
              labelx.setAttribute('for', x);
              labelx.innerHTML = "Regular";

              var t = $('<input/>').attr({
                   type: "text",
                   id: "firstname",
                   value: user.firstname
              });

              var u = $('<input/>').attr({
                   type: "text",
                   id: "lastname",
                   value: user.lastname
              });

              var v = $('<input/>').attr({
                   type: "button",
                   id: "confirmButton",
                   value: "Confirm",
                   onclick: "updateUser(selectedID, numberV, 'value', document.getElementById('firstname').value, document.getElementById('lastname').value)"
              });

      $("div.fullUserSecond").append(w); 
      $("div.fullUserSecond").append(labelw); 
      $("div.fullUserSecond").append(x); 
      $("div.fullUserSecond").append(labelx); $("div.fullUserSecond").append("<br>")

      $("div.fullUserSecond").append(r); 
      $("div.fullUserSecond").append(labelR); 
      $("div.fullUserSecond").append(s); 
      $("div.fullUserSecond").append(labelS); $("div.fullUserSecond").append("<br>")

      $("div.fullUserSecond").append(t); 
      $("div.fullUserSecond").append(u); $("div.fullUserSecond").append("<br>")
      $("div.fullUserSecond").append(v);

} else if (user.accountType == "employer") {
  $("div.fullUserSecond").html(
    "<br> <a href='admin-portal/admin-viewprofile?employerID=" + user._id + "'>" + user.companyName + "</a> <br>" +
    "Email: " + user.email + "<br>" +
    "Account Type: " + user.accountType + "<br>" +
    "Company Website: " + user.companyWebsite + "<br>"
  )
  var r = $('<input/>').attr({
                   type: "radio",
                   id: "accountEnabled",
                   name: "accountStatus",
                   value: "enabled",
                   label: "Enabled"
              });
              
              var labelR = document.createElement('label');
              labelR.setAttribute('for', r);
              labelR.innerHTML = "Enabled";

              var s = $('<input/>').attr({
                   type: "radio",
                   id: "accountDisabled",
                   name: "accountStatus",
                   value: "disabled",
                   label: "Disabled"
              });

              var labelS = document.createElement('label');
              labelS.setAttribute('for', s);
              labelS.innerHTML = "Disabled";

              var v = $('<input/>').attr({
                   type: "button",
                   id: "confirmButton",
                   value: "Confirm",
                   onclick: "updateUser(selectedID, numberV, 'value', 'null', 'null')"
              });

      $("div.fullUserSecond").append(r); 
      $("div.fullUserSecond").append(labelR); 
      $("div.fullUserSecond").append(s); 
      $("div.fullUserSecond").append(labelS); $("div.fullUserSecond").append("<br>")
      $("div.fullUserSecond").append(v);

} else if (user.accountType == "admin") {
  $("div.fullUserSecond").html(
    "<br> Full Name: " + user.firstname + user.lastname + "<br>" +
    "Email: " + user.email + "<br>" +
    "Account Type: " + user.accountType + "<br>" +
    "School: " + user.school + "<br>"
  )
}
}

</script>

<!-- the full version of the selected searched user is displayed here -->
<div class="fullUserSecond">

</div>



<li><a href="/logout">Logout</a></li>

</html>