<!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">Queue Handler 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/queues/list_view.do}" method="get" th:object="${queueHandlerSearch}">
            <input name="page" type="hidden" value="1"/>
            <div class="col-auto">
              <input class="form-control" name="name" placeholder="Name" type="text" size="35" th:title="#{title.search}+ '' + #{input.input}"
                     th:value="${queueHandlerSearch.queueName}"
                     maxlength="255"/>
            </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: 20%;">
              <col style="width: 55%;">
              <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">Queue Name</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.queueName}"/>
                </div>
              </td>
              <td>
                <div class="d-flex justify-content-center">
                  <span th:text="${row.queueName}"></span>
                </div>
              </td>
              <td>
                <div class="d-flex justify-content-end">
                  <button type="button" class="btn btn-success btn-sm me-2" th:onclick="fnStartQueue([[${row.queueName}]])" title="Start Queue">
                    <i class="fa-sharp fa-solid fa-play"></i> Start
                  </button>
                  <button type="button" class="btn btn-warning btn-sm me-2" th:onclick="fnStopQueue([[${row.queueName}]])" title="Stop Queue">
                    <i class="fa-sharp fa-solid fa-stop"></i> Stop
                  </button>
                  <button type="button" class="btn btn-primary btn-sm me-2" th:onclick="fnSelectItem([[${row.queueName}]])" th:value="#{button.update}">
                    <i class="fa-sharp fa-solid fa-edit"></i> [[#{button.update}]]
                  </button>
                </div>
              </td>
            </tr>
            <!-- No data message -->
            <tr th:if="${page.content.size() == 0 }">
              <td colspan="6" 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 fnStartQueue(id) {
      if (confirm("Are you sure you want to start this queue?")) {
        let form = document.createElement('form');
        form.method = 'POST';
        form.action = '[[@{/mgmt/queues/start.do}]]';

        let idInput = document.createElement('input');
        idInput.type = 'hidden';
        idInput.name = 'id';
        idInput.value = id;

        let csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = document.getElementById('csrf').name;
        csrfInput.value = document.getElementById('csrf').value;

        form.appendChild(idInput);
        form.appendChild(csrfInput);
        document.body.appendChild(form);
        form.submit();
      }
    }

    function fnStopQueue(id) {
      if (confirm("Are you sure you want to stop this queue?")) {
        let form = document.createElement('form');
        form.method = 'POST';
        form.action = '[[@{/mgmt/queues/stop.do}]]';

        let idInput = document.createElement('input');
        idInput.type = 'hidden';
        idInput.name = 'id';
        idInput.value = id;

        let csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = document.getElementById('csrf').name;
        csrfInput.value = document.getElementById('csrf').value;

        form.appendChild(idInput);
        form.appendChild(csrfInput);
        document.body.appendChild(form);
        form.submit();
      }
    }

    function fn_select_page(pageNo) {
      document.searchForm.page.value = pageNo;
      document.searchForm.submit();
    }

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

    $(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/queues/delete.do}]]';
            document.listForm.submit();
          }
        }
      });

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

</html>
