<!DOCTYPE html>
<html>

<head>
  <title>Project Logs - NDA</title>
  <link rel="icon" type="image/icon" href="../images?name=nda_logo.png" />
  <style>
    body {
      /* background-color: antiquewhite; */
      font-family: sans-serif;
    }

    .card {
      background-color: #fff;
      border-radius: 10px;
      max-width: 100%;
      margin: 20px;
      border: 2px solid #d4d4d4;
      padding: 10px 20px;
    }

    /* When moving the mouse over the submit button, add a darker green color */
    input[type=submit]:hover {
      background-color: #45a049;
    }

    /* Add a background color and some padding around the form */
    .container {
      border-radius: 5px;
      padding: 20px;
    }

    .table-heading {
      color: black;
    }

    .button-black {
      background-color: #0f0f0fef;
      color: white;
      padding: 12 px 20 px;
      border: none;
      border-radius: 4 px;
      cursor: pointer;
      font-size: 20px;
    }

    .button-black:hover {
      background-color: #565c5c;
    }

    .loader {
      width: 100%;
      height: 100vh;
      text-align: center;
      position: fixed;
      display: block !important;
    }

    .loader-image {
      width: 20vh;
      height: 20vh;
    }

    .logs-loading {
      visibility: hidden;
    }

    .action-button {
      width: 25px;
      height: 26px;
    }

    .tooltip {
      position: relative;
      float: right;
      padding-right: 13px;
    }

    .tooltip .tooltiptext {
      visibility: hidden;
      width: 50px;
      background-color: #45a049;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;

      /* Position the tooltip */
      position: absolute;
      z-index: 1;
    }

    .tooltip:hover .tooltiptext {
      visibility: visible;
    }

    .styled-table {
      border-collapse: collapse;
      margin: 25px 0;
      font-size: 0.9em;
      font-family: sans-serif;
      min-width: 400px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    }

    .styled-table thead tr {
      background-color: #009879;
      color: #ffffff;
      text-align: left;
    }

    .styled-table th,
    .styled-table td {
      padding-left: 5em !important;
      padding: 12px 15px;
    }

    .styled-table tbody tr {
      border-bottom: 1px solid #dddddd;
    }

    /* .styled-table tbody tr:nth-of-type(even) {
      background-color: #f3f3f3;
    } */

    .styled-table tbody tr:last-of-type {
      border-bottom: 2px solid #009879;
    }

    .styled-table tbody tr.active-row {
      font-weight: bold;
      color: #009879;
    }

    .red-tooltip {
      background-color: red !important;
    }

    .all-logs-checkbox {
      width: 15px;
      height: 14px;
    }

    .button-red {
      background-color: #e40404ef;
      color: white;
      padding: 12 px 20 px;
      border: none;
      border-radius: 4 px;
      cursor: pointer;
      font-size: 20px;
    }

    .button-red:hover {
      background-color: #d46e4c;
    }

    .hide-button {
      display: none !important;
    }

    .anchor-tooltip:hover:after {
      content: 'View logs';
      width: 70px;
      background-color: #45a049;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 2px 2px;
      /* Position the tooltip */
      position: absolute;
      z-index: 1;
    }
  </style>
  <script type="text/javascript" language="JavaScript">
    var lastScrollPosition = 0;
    var selectedLogs = [];
    var UID = '<%=UID%>';
    var protocol = '<%=PROTOCOL%>';
    function enableLoader() {
      document.getElementById('logs-page').classList.add('logs-loading');
      document.getElementById('loader-div').classList.add('loader');
    }
    function gotoPage(path) {
      document.getElementById('logs-page').classList.add('logs-loading');
      document.getElementById('loader-div').classList.add('loader');
      window.location = path;
    }
    function confirmSelection(path, message) {
      let confirmation = confirm(message);
      if (confirmation) {
        gotoPage(path);
      }
    }
    function loadLogs(path, index) {
      if (parseInt(index) === 0) {
        path += '&isLive=true';
      }
      gotoPage(path);
    }
    function checkError(errorCodeConstants) {
      let urlParams = window.location.toString().split('?')[1];
      if (urlParams && urlParams.indexOf('err_code=') > -1) {
        let errorIndex = urlParams.split('err_code=')[1];
        let errorCode = errorIndex.split('&')[0];
        if (errorCodeConstants && errorCodeConstants[errorCode]) {
          alert(errorCodeConstants[errorCode]);
          window.location = '/logs/list';
        }
      }
    }
    function getErrorCodes() {
      let xhr = new XMLHttpRequest();
      xhr.open('GET', `${protocol}://localhost:${PORT}/error-codes`, true);
      xhr.responseType = 'json';
      xhr.onload = function () {
        let status = xhr.status;
        if (status === 200) {
          checkError(xhr.response);
        }
      };
      xhr.send();
    }
    getErrorCodes();
    function deleteSelected(message) {
      let confirmation = confirm(message);
      if (confirmation) {
        if (selectedLogs.length > 0) {
          gotoPage(`/logs/remove?UID=${UID}&ids=${selectedLogs.toString()}`);
        }
      }
    }
    function handleDeleteButton(event, id) {
      if (event.checked) {
        document.getElementById('delete-selected-button').className = 'button-red';
        selectedLogs.push(id);
      } else {
        let logIndex = selectedLogs.indexOf(id);
        if (logIndex > -1) selectedLogs.splice(logIndex, 1);
      }

      if (selectedLogs.length < 1) {
        document.getElementById('delete-selected-button').className = 'button-red hide-button';
      }
    }
  </script>
</head>

<body>
  <div id="loader-div" style="display: none;" class=""><br /><br /><br /><br /><br />
    <image class="loader-image" src="../images?name=loading.gif">
  </div>
  <div id="logs-page" class="">
    <div class="table-heading">
      <h2> &nbsp;&nbsp;&nbsp;Logs - <%= projectName %>
      </h2>
    </div>

    <div class="container">
      <button class="button-black" onclick="enableLoader();window.location.href='/'">Back</button>
      <button class="button-red hide-button" id="delete-selected-button"
        onclick="deleteSelected('Are you sure to delete the selected logs ?');">Delete</button>
    </div>
    <div class="container">
      <%if (logsList.length> 0) { %>
        <table class="styled-table">
          <thead>
            <tr>
              <!-- <th><input type="checkbox" class="all-logs-checkbox" name="all-logs-check" id="all-logs-check" /></th> -->
              <th></th>
              <th>S.No</th>
              <th>Date</th>
              <th>Size</th>
              <th>Updated At</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <% logsList.forEach(function(item,index){ %>
              <tr>
                <td>
                  <input type="checkbox" name="logs-check-<%= index + 1 %>" id="logs-check-<%= index + 1 %>"
                    onchange="handleDeleteButton(this,'<%= item.id %>')" />
                </td>
                <td>
                  <%= index + 1 %>
                </td>
                <td>
                  <a href="javascript:void(0)" class="anchor-tooltip"><span
                      onclick="loadLogs('/logs?filename=<%= item.filename %>&UID=<%= item.UID %>&id=<%= item.id %>','<%= index %>')">
                      <%= item.filename %>
                    </span></a>
                </td>
                <td>
                  <%= item.size %>
                </td>
                <td>
                  <%= item.modifiedAt %>
                </td>
                <td>
                  <span class="tooltip">
                    <input type="image" src="../images?name=delete-project.png"
                      onclick="confirmSelection('/logs/remove?UID=<%= item.UID %>&id=<%= item.id %>','Are you sure to delete the <%= item.filename %> log file of <%= projectName %> ?' )"
                      alt="Delete this project" class="action-button">
                    <span class="tooltiptext red-tooltip">Delete</span>
                  </span>
                  <!-- <span class="tooltip">
                    <input type="image" class="action-button" src="../images?name=project-logs.png"
                      onclick="loadLogs('/logs?filename=<%= item.filename %>&UID=<%= item.UID %>&id=<%= item.id %>','<%= index %>')"
                      alt="Logs">
                    <span class="tooltiptext">Logs</span>
                  </span> -->
                </td>
              </tr>
              <% }) %>
          </tbody>
        </table>
        <% } %>
          <%if (logsList.length < 1) { %>
            <h3>No Logs Found</h3>
            <% } %>
    </div>
  </div>
</body>

</html>