<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<div class="p-3">
  <input type="hidden" id="requestSeq" th:value="${modifyRequest.requestSeq}">
  <div class="row justify-content-between">
    <div class="col-auto">
      <h5 class="fw-bold">
        <span th:text="${modifyRequest.title}"></span>
      </h5>
    </div>
    <div class="col-auto">
      <span class="text-danger fw-bold" th:if="${modifyRequest.status=='delete'}">삭제</span>
      <span class="text-primary fw-bold" th:if="${modifyRequest.status=='wait'}">대기</span>
      <span class="text-danger fw-bold" th:if="${modifyRequest.status=='dinial'}">거부</span>
      <span class="text-success fw-bold" th:if="${modifyRequest.status=='approval'}">승인</span>
    </div>
  </div>
  <div class="row justify-content-between border-bottom pb-3">
    <div class="col-auto" th:text="${#temporals.format(modifyRequest.createDate, 'yyyy-MM-dd HH:mm:ss')}"></div>
    <div class="col-auto" th:text="${modifyRequest.createId}"></div>
  </div>
  <div class="row border-bottom py-3" th:if="${modifyRequest.requestType != 'etc'}">
    <div class="col-12">
      <th:block th:if="${modifyRequest.requestType=='userInfo'}">
        <th:block th:if="${modifyRequest.status=='wait'}">
          <div class="p-3 border rounded">
            <div class="row mb-3">
              <label for="requestName" class="col-sm-2 col-form-label">이름</label>
              <div class="col-sm-10">
                <div class="input-group">
                  <input type="text" readonly class="form-control" id="originalName" th:value="${userInfo.name}">
                  <span class="input-group-text"><i class="bi bi-arrow-right"></i></span>
                  <input type="text" readonly class="form-control" id="requestName" th:value="${modifyRequest.requestName}"
                         th:classappend="${userInfo.name == modifyRequest.requestName?'':'bg-danger bg-opacity-25'}">
                </div>
              </div>
            </div>
            <div class="row mb-3">
              <label for="requestDepartment" class="col-sm-2 col-form-label">부서</label>
              <div class="col-sm-10">
                <div class="input-group">
                  <th:block th:each="department:${session.departmentList}">
                    <th:block th:if="${department.codeSq == userInfo.department}">
                      <input type="text" readonly class="form-control" id="originalDepartment" th:value="${department.value}">
                    </th:block>
                  </th:block>
                  <span class="input-group-text"><i class="bi bi-arrow-right"></i></span>
                  <th:block th:each="department:${session.departmentList}">
                    <th:block th:if="${department.codeSq == modifyRequest.requestDepartment}">
                      <input type="text" readonly class="form-control" id="requestDepartment" th:value="${department.value}"
                             th:classappend="${userInfo.department == modifyRequest.requestDepartment?'':'bg-danger bg-opacity-25'}">
                    </th:block>
                  </th:block>
                </div>
              </div>
            </div>
            <div class="row mb-3">
              <label for="requestPosition" class="col-sm-2 col-form-label">직책</label>
              <div class="col-sm-10">
                <div class="input-group">
                  <th:block th:each="position:${session.positionList}">
                    <th:block th:if="${position.codeSq == userInfo.position}">
                      <input type="text" readonly class="form-control" id="originalPosition" th:value="${position.value}">
                    </th:block>
                  </th:block>
                  <span class="input-group-text"><i class="bi bi-arrow-right"></i></span>
                  <th:block th:each="position:${session.positionList}">
                    <th:block th:if="${position.codeSq == modifyRequest.requestPosition}">
                      <input type="text" readonly class="form-control" id="requestPosition" th:value="${position.value}"
                             th:classappend="${userInfo.position == modifyRequest.requestPosition?'':'bg-danger bg-opacity-25'}">
                    </th:block>
                  </th:block>
                </div>
              </div>
            </div>
          </div>
        </th:block>
        <th:block th:unless="${modifyRequest.status=='wait'}">
          <div class="p-3 border rounded">
            <div class="row mb-3">
              <label for="modifiedName" class="col-sm-2 col-form-label">이름</label>
              <div class="col-sm-10">
                <input type="text" readonly class="form-control" id="modifiedName" th:value="${modifyRequest.requestName}">
              </div>
            </div>
            <div class="row mb-3">
              <label for="requestDepartment" class="col-sm-2 col-form-label">부서</label>
              <div class="col-sm-10">
                <th:block th:each="department:${session.departmentList}">
                  <th:block th:if="${department.codeSq == modifyRequest.requestDepartment}">
                    <input type="text" readonly class="form-control" id="modifiedDepartment" th:value="${department.value}">
                  </th:block>
                </th:block>
              </div>
            </div>
            <div class="row mb-3">
              <label for="requestPosition" class="col-sm-2 col-form-label">직책</label>
              <div class="col-sm-10">
                <th:block th:each="position:${session.positionList}">
                  <th:block th:if="${position.codeSq == modifyRequest.requestPosition}">
                    <input type="text" readonly class="form-control" id="modifiedPosition" th:value="${position.value}">
                  </th:block>
                </th:block>
              </div>
            </div>
          </div>
        </th:block>
      </th:block>
      <th:block th:if="${modifyRequest.requestType=='categoryRole'}">
        <div class="p-3">
          <th:block th:if="${modifyRequest.status=='wait'}">
            <div class="row justify-content-between mb-2">
              <div class="col-auto"><button type="button" class="btn btn-info" id="moveLeftBtn"><i class="bi bi-arrow-left"></i></button></div>
              <div class="col-auto"><button type="button" class="btn btn-info" id="moveRightBtn"><i class="bi bi-arrow-right"></i></button></div>
            </div>
            <div class="row overflow-auto flex-nowrap" id="categorySelectBody">
              <th:block th:each="depth1:${session.categoryList}">
                <div class="col-auto">
                  <table class="table table-striped">
                    <thead>
                    <th:block th:if="${#lists.contains(categorySeqList, depth1.categorySeq)}">
                      <th:block th:if="${#lists.contains(modifyRequest.requestCategoryList, depth1.categorySeq)}">
                        <tr class="bg-primary bg-opacity-25">
                          <th colspan="3" class="text-center" th:text="${depth1.categoryName}"></th>
                          <th>유지</th>
                        </tr>
                      </th:block>
                      <th:block th:unless="${#lists.contains(modifyRequest.requestCategoryList, depth1.categorySeq)}">
                        <tr class="bg-danger bg-opacity-25">
                          <th colspan="3" class="text-center" th:text="${depth1.categoryName}"></th>
                          <th>삭제</th>
                        </tr>
                      </th:block>
                    </th:block>
                    <th:block th:unless="${#lists.contains(categorySeqList, depth1.categorySeq)}">
                      <th:block th:if="${#lists.contains(modifyRequest.requestCategoryList, depth1.categorySeq)}">
                        <tr class="bg-success bg-opacity-25">
                          <th colspan="3" class="text-center" th:text="${depth1.categoryName}"></th>
                          <th>추가</th>
                        </tr>
                      </th:block>
                      <th:block th:unless="${#lists.contains(modifyRequest.requestCategoryList, depth1.categorySeq)}">
                        <tr>
                          <th colspan="3" class="text-center" th:text="${depth1.categoryName}"></th>
                          <th>-</th>
                        </tr>
                      </th:block>
                    </th:block>
                    <tr>
                      <th>연도</th>
                      <th>중분류</th>
                      <th>소분류</th>
                      <th>변동</th>
                    </tr>
                    </thead>
                    <tbody>
                    <th:block th:each="depth2:${depth1.childCategoryList}">
                      <th:block th:if="${#lists.contains(categorySeqList, depth2.categorySeq)}">
                        <th:block th:if="${#lists.contains(modifyRequest.requestCategoryList, depth2.categorySeq)}">
                          <tr class="bg-primary bg-opacity-25">
                            <td th:text="${depth2.categoryName}"></td>
                            <td></td>
                            <td></td>
                            <td>유지</td>
                          </tr>
                        </th:block>
                        <th:block th:unless="${#lists.contains(modifyRequest.requestCategoryList, depth2.categorySeq)}">
                          <tr class="bg-danger bg-opacity-25">
                            <td th:text="${depth2.categoryName}"></td>
                            <td></td>
                            <td></td>
                            <td>삭제</td>
                          </tr>
                        </th:block>
                      </th:block>
                      <th:block th:unless="${#lists.contains(categorySeqList, depth2.categorySeq)}">
                        <th:block th:if="${#lists.contains(modifyRequest.requestCategoryList, depth2.categorySeq)}">
                          <tr class="bg-success bg-opacity-25">
                            <td th:text="${depth2.categoryName}"></td>
                            <td></td>
                            <td></td>
                            <td>추가</td>
                          </tr>
                        </th:block>
                        <th:block th:unless="${#lists.contains(modifyRequest.requestCategoryList, depth2.categorySeq)}">
                          <tr>
                            <td th:text="${depth2.categoryName}"></td>
                            <td></td>
                            <td></td>
                            <td>-</td>
                          </tr>
                        </th:block>
                      </th:block>
                      <th:block th:each="depth3:${depth2.childCategoryList}">
                        <th:block th:if="${#lists.contains(categorySeqList, depth3.categorySeq)}">
                          <th:block th:if="${#lists.contains(modifyRequest.requestCategoryList, depth3.categorySeq)}">
                            <tr class="bg-primary bg-opacity-25">
                              <td></td>
                              <td th:text="${depth3.categoryName}"></td>
                              <td></td>
                              <td>유지</td>
                            </tr>
                          </th:block>
                          <th:block th:unless="${#lists.contains(modifyRequest.requestCategoryList, depth3.categorySeq)}">
                            <tr class="bg-danger bg-opacity-25">
                              <td></td>
                              <td th:text="${depth3.categoryName}"></td>
                              <td></td>
                              <td>삭제</td>
                            </tr>
                          </th:block>
                        </th:block>
                        <th:block th:unless="${#lists.contains(categorySeqList, depth3.categorySeq)}">
                          <th:block th:if="${#lists.contains(modifyRequest.requestCategoryList, depth3.categorySeq)}">
                            <tr class="bg-success bg-opacity-25">
                              <td></td>
                              <td th:text="${depth3.categoryName}"></td>
                              <td></td>
                              <td>추가</td>
                            </tr>
                          </th:block>
                          <th:block th:unless="${#lists.contains(modifyRequest.requestCategoryList, depth3.categorySeq)}">
                            <tr>
                              <td></td>
                              <td th:text="${depth3.categoryName}"></td>
                              <td></td>
                              <th>-</th>
                            </tr>
                          </th:block>
                        </th:block>
                        <th:block th:each="depth4:${depth3.childCategoryList}">
                          <th:block th:if="${#lists.contains(categorySeqList, depth4.categorySeq)}">
                            <th:block th:if="${#lists.contains(modifyRequest.requestCategoryList, depth4.categorySeq)}">
                              <tr class="bg-primary bg-opacity-25">
                                <td></td>
                                <td></td>
                                <td th:text="${depth4.categoryName}"></td>
                                <td>유지</td>
                              </tr>
                            </th:block>
                            <th:block th:unless="${#lists.contains(modifyRequest.requestCategoryList, depth4.categorySeq)}">
                              <tr class="bg-danger bg-opacity-25">
                                <td></td>
                                <td></td>
                                <td th:text="${depth4.categoryName}"></td>
                                <td>삭제</td>
                              </tr>
                            </th:block>
                          </th:block>
                          <th:block th:unless="${#lists.contains(categorySeqList, depth4.categorySeq)}">
                            <th:block th:if="${#lists.contains(modifyRequest.requestCategoryList, depth4.categorySeq)}">
                              <tr class="bg-success bg-opacity-25">
                                <td></td>
                                <td></td>
                                <td th:text="${depth4.categoryName}"></td>
                                <td>추가</td>
                              </tr>
                            </th:block>
                            <th:block th:unless="${#lists.contains(modifyRequest.requestCategoryList, depth4.categorySeq)}">
                              <tr>
                                <td></td>
                                <td></td>
                                <td th:text="${depth4.categoryName}"></td>
                                <td>-</td>
                              </tr>
                            </th:block>
                          </th:block>
                        </th:block>
                      </th:block>
                    </th:block>
                    </tbody>
                  </table>
                </div>
              </th:block>
            </div>
          </th:block>
          <th:block th:unless="${modifyRequest.status=='wait'}">
            <div class="row justify-content-between">
              <div class="col-auto"><button type="button" class="btn btn-info" id="moveLeftBtn"><i class="bi bi-arrow-left"></i></button></div>
              <div class="col-auto"><button type="button" class="btn btn-info" id="moveRightBtn"><i class="bi bi-arrow-right"></i></button></div>
            </div>
            <div class="row overflow-auto flex-nowrap" id="categorySelectBody">
              <th:block th:each="depth1:${session.categoryList}">
                <div class="col-auto">
                  <table class="table table-striped">
                    <thead>
                    <tr>
                      <th>
                        <input type="checkbox" class="categoryCheckBox parentSeq" th:data-categoryseq="${depth1.categorySeq}"
                               th:checked="${#lists.contains(modifyRequest.requestCategoryList, depth1.categorySeq)}">
                      </th>
                      <th colspan="3" class="text-center" th:text="${depth1.categoryName}"></th>
                    </tr>
                    <tr>
                      <th></th>
                      <th>연도</th>
                      <th>중분류</th>
                      <th>소분류</th>
                    </tr>
                    </thead>
                    <tbody>
                    <th:block th:each="depth2:${depth1.childCategoryList}">
                      <tr>
                        <td>
                          <input type="checkbox" class="categoryCheckBox parentSeq"
                                 th:data-categoryseq="${depth2.categorySeq}" th:data-parentseq="${depth2.parentSeq}"
                                 th:checked="${#lists.contains(modifyRequest.requestCategoryList, depth2.categorySeq)}">
                        </td>
                        <td th:text="${depth2.categoryName}"></td>
                        <td></td>
                        <td></td>
                      </tr>
                      <th:block th:each="depth3:${depth2.childCategoryList}">
                        <tr>
                          <td>
                            <input type="checkbox" class="categoryCheckBox parentSeq"
                                   th:data-categoryseq="${depth3.categorySeq}" th:data-parentseq="${depth3.parentSeq}"
                                   th:checked="${#lists.contains(modifyRequest.requestCategoryList, depth3.categorySeq)}">
                          </td>
                          <td></td>
                          <td th:text="${depth3.categoryName}"></td>
                          <td></td>
                        </tr>
                        <th:block th:each="depth4:${depth3.childCategoryList}">
                          <tr>
                            <td>
                              <input type="checkbox" class="categoryCheckBox" th:data-categoryseq="${depth4.categorySeq}"
                                     th:data-parentseq="${depth4.parentSeq}" th:checked="${#lists.contains(modifyRequest.requestCategoryList, depth4.categorySeq)}">
                            </td>
                            <td></td>
                            <td></td>
                            <td th:text="${depth4.categoryName}"></td>
                          </tr>
                        </th:block>
                      </th:block>
                    </th:block>
                    </tbody>
                  </table>
                </div>
              </th:block>
            </div>
          </th:block>
        </div>
      </th:block>
    </div>
  </div>
  <div class="row border-bottom py-3">
    <div class="col-12" th:utext="${modifyRequest.description}"></div>
  </div>
  <th:block th:if="${modifyRequest.status=='wait'}">
    <th:block th:if="${modifyRequest.createId == loginUser.userId}">
      <div class="row justify-content-between py-3">
        <div class="col-auto">
          <button class="btn btn-danger" id="deleteBtn" th:data-requestseq="${modifyRequest.requestSeq}"><i class="bi bi-trash"></i> 삭제</button>
        </div>
        <div class="col-auto">
          <a class="btn btn-warning" th:href="|@{/info/modifyRequestWrite}?requestSeq=${modifyRequest.requestSeq}|"><i class="bi bi-pencil-square"></i> 수정</a>
        </div>
      </div>
    </th:block>
  </th:block>
  <th:block th:if="${modifyRequest.status=='wait'}">
    <th:block th:if="${loginUser.userRole.contains('ADMIN')}">
      <div class="row justify-content-between py-3">
        <div class="col-auto">
          <button class="btn btn-danger" id="dinialBtn" th:data-requestseq="${modifyRequest.requestSeq}"> 거부</button>
        </div>
        <div class="col-auto">
          <button class="btn btn-success" id="approvalBtn" th:data-requesttype="${modifyRequest.requestType}"
                  th:data-requestseq="${modifyRequest.requestSeq}" th:data-createid="${modifyRequest.createId}"> 승인</button>
        </div>
      </div>
    </th:block>
  </th:block>
</div>