<!DOCTYPE html>
<html lang="en"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{default}">
<head>
</head>
<body>
<div layout:fragment="content">
    <div>Должности</div>
    <div sec:authorize="hasRole('ROLE_ADMIN')">
        <a class="btn btn-success button-fixed"
           onsubmit="openModalEdit()" data-bs-target="#positionEditModal" data-bs-toggle="modal">
            <i class="fa-solid fa-plus"></i> Добавить
        </a>
    </div>
    <div>
        <table class="table table-hover">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">ID</th>
                <th scope="col">Имя</th>
                <th sec:authorize="hasRole('ROLE_ADMIN')" scope="col">Элементы управления</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="position, iterator: ${positions}">
                <th scope="row" th:text="${iterator.index} + 1"/>
                <td th:text="${position.id}"/>
                <td th:text="${position.name}" style="width: 60%"/>
                <td sec:authorize="hasRole('ROLE_ADMIN')" style="width: 10%">
                    <div class="btn-group" role="group" aria-label="Basic example">
                        <a class="btn btn-info button-fixed button-sm" th:data-position="${position.id}"
                           data-bs-target="#positionEditModal" data-bs-toggle="modal"
                           th:onclick="openModalEdit(this.getAttribute('data-position'))">Изменить</a>
                        <button type="button" class="btn btn-danger button-fixed button-sm"
                                th:attr="onclick=|confirm('Удалить запись?') && document.getElementById('remove-${position.id}').click()|">
                            Удалить
                        </button>
                    </div>
                    <form th:action="@{/position/delete/{id}(id=${position.id})}" method="post">
                        <button th:id="'remove-' + ${position.id}" type="submit" style="display: none">
                            Удалить
                        </button>
                    </form>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="modal" id="positionEditModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <form id="form-edit-position">
                        <input type="hidden" id="positionId" name="id"/>
                        <div class="mb-3">
                            <label for="name" class="form-label">Название</label>
                            <input type="text" class="form-control" id="name" required="true">
                        </div>

                        <div class="mb-3">
                            <button type="submit" class="btn btn-primary button-fixed">
                                <span th:if="${id == null}">Добавить</span>
                                <span th:if="${id != null}">Обновить</span>
                            </button>
                            <a class="btn btn-secondary button-fixed" data-bs-dismiss="modal">
                                Назад
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<th:block layout:fragment="scripts">
    <script th:inline="javascript">
        function openModalEdit(id) {
            var positions = [[${positions}]];
            var position = positions.find(x => x.id + '' === id);
            if (position !== 'undefined') {
                $('#positionId').val(id);
                $('#name').val(position.name);
            }
        }

        $(document).on('submit', '#form-edit-position', function (e) {
              e.preventDefault();
              var positionName = document.getElementById('name');
              var idInput = document.getElementById('positionId');
              var urlPosition = 'http://localhost:8080/api/position';
              let position = {name: positionName.value};
              var method = 'POST';
              if (idInput.value !== '') {
                 method = 'PUT';
                 urlPosition = urlPosition + '/' + idInput.value;
              }
              $.ajax({
                url: urlPosition,
                method: method,
                data: JSON.stringify(position),
                contentType: "application/json;"
              })
              .done(function() {
                location.reload();
              })
              .fail((err) => {
                alert(err);
              });
            });
    </script>
</th:block>
</html>