<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/default_layout}">

<body>

<section layout:fragment="contentFragment">
  <div class="container-fluid">
    <div class="card mt-4">
      <div class="card-header">
        <h5><span style="font-weight: bold">Netty Server List</span></h5>
      </div>
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <form role="form" class="row g-3" name="searchForm" th:action="@{/mgmt/socket/list_view.do}" method="get" th:object="${modelSearch}">
            <input name="page" type="hidden" value="1"/>
            <div class="col-auto">
              <input class="form-control" name="name" placeholder="Server Name" type="text" size="35" th:title="#{title.search}+ '' + #{input.input}"
                     th:value="${modelSearch.name}"
                     maxlength="255"/>
            </div>
            <div class="col-auto">
              <input class="form-control" name="port" placeholder="Port" type="number" size="10" th:title="#{title.search}+ '' + #{input.input}"
                     th:value="${modelSearch.port}"
                     min="1024" max="65535"/>
            </div>
            <div class="col-auto">
              <button type="button" class="btn btn-primary btn_search" th:value="#{button.inquire}">
                <i class="fa-sharp fa-solid fa-magnifying-glass"></i> [[#{title.inquire}]]
              </button>
            </div>
            <div class="col-auto">
              <button type="button" class="btn btn-primary btn_delete">
                <i class="fa-sharp fa-solid fa-trash"></i> [[#{title.delete}]]
              </button>
            </div>
            <div class="col-auto">
              <button type="button" class="btn btn-primary btn_add">
                <i class="fa-sharp fa-solid fa-plus"></i> [[#{button.create}]]
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="card mt-4">
      <div class="card-body">
        <form name="listForm">
          <input name="id" type="hidden"/>
          <input name="checkedIdForDel" type="hidden"/>
          <input id="csrf" type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
          <table class="table table-hover pt-table">
            <colgroup>
              <col style="width: 5%;">
              <col style="width: 5%;">
              <col style="width: 20%;">
              <col style="width: 15%;">
              <col style="width: 15%;">
              <col style="width: 20%;">
              <col style="width: 20%;">
            </colgroup>
            <thead>
            <tr>
              <th><div class="text-center">No.</div></th>
              <th>
                <div class="text-center">
                  <input type="checkbox" name="checkAll" class="form-check-input" onclick="fncCheckAll()" th:title="#{input.selectAll.title}">
                </div>
              </th>
              <th><div class="text-center">Name</div></th>
              <th><div class="text-center">Port</div></th>
              <th><div class="text-center">Status</div></th>
              <th><div class="text-center">Last Modified</div></th>
              <th><div class="text-center">Actions</div></th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="row, status : ${page.content}">
              <td class="text-center" th:text="${page.getNumber() * page.getSize() + status.count}"></td>
              <td>
                <div class="d-flex justify-content-center">
                  <input type="checkbox" name="checkField" class="form-check-input" title="Select"/>
                  <input name="checkId" type="hidden" th:value="${row.id}"/>
                </div>
              </td>
              <td>
                <span th:text="${row.name}"></span>
              </td>
              <td class="text-center">
                <span th:text="${row.port}"></span>
              </td>
              <td class="text-center">
                                <span th:class="${row.active ? 'badge bg-success' : 'badge bg-danger'}"
                                      th:text="${row.active ? 'Active' : 'Inactive'}"></span>
              </td>
              <td class="text-center">
                <span th:text="${#temporals.format(row.lastModified, 'yyyy-MM-dd HH:mm:ss')}"></span>
              </td>
              <td>
                <div class="d-flex justify-content-center">
                  <button type="button" class="btn btn-primary btn-sm me-2"
                          th:onclick="fnStartServer([[${row.id}]])"
                          th:disabled="${!row.active}">
                    <i class="fa-solid fa-play"></i> Start
                  </button>
                  <button type="button" class="btn btn-danger btn-sm me-2"
                          th:onclick="fnStopServer([[${row.id}]])">
                    <i class="fa-solid fa-stop"></i> Stop
                  </button>
                  <button type="button" class="btn btn-secondary btn-sm me-2"
                          th:onclick="fnSelectItem([[${row.id}]])"
                          th:value="#{button.update}">
                    <i class="fa-sharp fa-solid fa-edit"></i> Edit
                  </button>
                </div>
              </td>
            </tr>
            <tr th:if="${page.content.size() == 0}">
              <td colspan="7" th:text="#{common.nodata.msg}"></td>
            </tr>
            </tbody>
          </table>
        </form>
      </div>
      <div class="card-footer">
        <div th:replace="~{fragment/pagination :: pagination(jsFunction='fn_select_page')}"></div>
      </div>
    </div>
  </div>
</section>

</body>

<th:block layout:fragment="contentScript">
  <script>
    function fn_select_page(pageNo) {
      document.searchForm.page.value = pageNo;
      document.searchForm.submit();
    }

    function fnSelectItem(id) {
      location.href = "[[@{/mgmt/socket/update_view.do}]]" + "?id=" + id;
    }

    function fnStartServer(id) {
      if (!confirm('Start the server?')) return;

      const csrfToken = document.getElementById('csrf').value;
      const csrfParameter = document.getElementById('csrf').name;

      const formData = new FormData();
      formData.append(csrfParameter, csrfToken);

      fetch(`[[@{/mgmt/socket/servers/}]]${id}/start`, {
        method: 'POST',
        headers: {
          [csrfParameter]: csrfToken
        },
        body: formData,
        credentials: 'same-origin'
      }).then(response => {
        if (response.ok) {
          location.reload();
        } else {
          alert('Failed to start server');
        }
      }).catch(error => {
        console.error('Error:', error);
        alert('Failed to start server');
      });
    }

    function fnStopServer(id) {
      if (!confirm('Stop the server?')) return;

      const csrfToken = document.getElementById('csrf').value;
      const csrfParameter = document.getElementById('csrf').name;

      const formData = new FormData();
      formData.append(csrfParameter, csrfToken);

      fetch(`[[@{/mgmt/socket/servers/}]]${id}/stop`, {
        method: 'POST',
        headers: {
          [csrfParameter]: csrfToken
        },
        body: formData,
        credentials: 'same-origin'
      }).then(response => {
        if (response.ok) {
          location.reload();
        } else {
          alert('Failed to stop server');
        }
      }).catch(error => {
        console.error('Error:', error);
        alert('Failed to stop server');
      });
    }

    $(function () {
      let fnSearch = document.querySelector(".btn_search");
      let fnDelete = document.querySelector(".btn_delete");
      let fnAdd = document.querySelector(".btn_add");

      fnSearch.addEventListener("click", function () {
        document.searchForm.page.value = 1;
        document.searchForm.submit();
      });

      fnDelete.addEventListener("click", function () {
        var checkField = document.listForm.checkField;
        var id = document.listForm.checkId;
        var checkedIds = "";
        var checkedCount = 0;
        if (checkField) {
          if (checkField.length > 1) {
            for (var i = 0; i < checkField.length; i++) {
              if (checkField[i].checked) {
                checkedIds += ((checkedCount == 0 ? "" : ",") + id[i].value);
                checkedCount++;
              }
            }
          } else {
            if (checkField.checked) {
              checkedIds = id.value;
            }
          }
        }
        if (checkedIds.length > 0) {
          if (confirm("[[#{common.delete.msg}]]")) {
            document.listForm.checkedIdForDel.value = checkedIds;
            document.listForm.method = 'POST';
            document.listForm.action = '[[@{/mgmt/socket/delete.do}]]';
            document.listForm.submit();
          }
        }
      });

      fnAdd.addEventListener("click", function () {
        location.href = '[[@{/mgmt/socket/create_view.do}]]';
      });
    });
  </script>
</th:block>

</html>
