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

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


<!DOCTYPE html>
<html>

<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>


<body>

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

<!-- job search bar -->
<form action="/search" method="GET">

  <select name="discipline" id="discipline">
    <option value="technology" <% if((discipline).includes("technology")){ %> selected <% } %>>Technology</option>
    <option value="retail" <% if((discipline).includes("retail")){ %> selected <% } %>>Retail</option>
  </select>

  <select name="type" id="type">
    <option value="coop" <% if((type).includes("coop")){ %> selected <% } %>>Coop</option>
    <option value="regular" <% if((type).includes("regular")){ %> selected <% } %>>Regular</option>
  </select>

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

<!-- displays the preview version of the job posts that match the search -->
<div>
  <% var x=0 %>
    <% if (result) { %>
      <% result.forEach(p=> { %>
        <br>
        <button onclick="display(jobpost[<%=x%>])"> View </button>
        <div>

          <div>
            <a href="admin-portal/admin-viewprofile?employerID=<%= p.creatorID %>"> <%= p.creatorName %> </a>
          </div>

          <div>
            Title: <%= p.jobTitle %>
          </div>

          <div>
            location: <%= p.location %>
          </div>

          <div>
            Type: <%= p.type %>
          </div>

          <div>
            Company Name: <%= p.companyName %>
          </div>

          <div>
            Brief Description: <%= p.briefDescription %>
          </div> 
          
          
        </div>
        </form>
        <% x++ }) %>
          <% } %>
</div>

<!-- function sets up the HTML code for the full version of the selected job post and sends it to the div class="fullPost"-->
<script>
    function display(jobpost) {
      $("div.fullPost").html("<br> Title:" + jobpost.jobTitle + "<br>" +
      "Location:" + jobpost.location + "<br>" +
        "Type:" + jobpost.type + "<br>" +
        "Discipline:" + jobpost.discipline + "<br>" +
        "briefDescription:" + jobpost.briefDescription + "<br>" +
        "Description:" + jobpost.description + "<br>" +
        "Responsibilities:" + jobpost.responsibilities + "<br>" +
        "Skills:" + jobpost.skills + "<br>" +
        "Posted on:" + jobpost.createdAt + "<br>" +
        '<form action="/deletePostAdmin" method="POST">' +
        '<input type="hidden" id="postID" name="postID" value=' + jobpost._id + '>' +
        '<button>Delete</button>')
    }
</script>

</body>

<!-- used to display the full version of the selected job post -->
<div class="fullPost">

</div>

</html>